/* ============================================================
   bl-fixes.css — correcciones puntuales sobre el template ATZ.
   Cargado al final del <head> para hacer override seguro.
   Cubre: header (texto blanco perdido), home (slider vs banner),
   producto (tintas/logo con clases Tailwind que v2 no carga) y
   guardas responsive móviles. NO cambia la línea de diseño.
   ============================================================ */

/* ---- 1) HEADER TOP: el topbar usa texto y separadores BLANCOS (diseño oscuro
   del template ATZ). La clase .yellow-bg lo pintaba casi-blanco (#F9F8F2) y el
   texto blanco se perdía. Forzamos fondo oscuro legible. ---- */
.header-top { background-color: #363f4d !important; }
.header-top .header_text p,
.header-top .header_list > li a { color: #fff; }
.header-top .header_list > li a:hover { color: #eb3e32; }

/* ---- 2) HOME: la columna lateral (sale-banner) debe igualar la altura del
   slider principal cuando van lado a lado (>=768px). En móvil se apilan y fluyen.
   OJO (fix regresión): se ACOTA a `.slider .carousel_slide1`. El testimonial-slider comparte la
   clase `.carousel_slide1`; sin el scope, estas alturas de 573px estiraban los testimonios en
   escritorio (≥992px) dejando un hueco enorme. ---- */
@media (min-width: 768px) {
  .bl-home .slider .carousel_slide1,
  .bl-home .slider .carousel_slide1 .owl-stage,
  .bl-home .slider .carousel_slide1 .owl-stage .owl-item,
  .bl-home .slider .carousel_slide1 .sale-banner,
  .bl-home .slider .carousel_slide1 .sale-banner > a { height: 573px; }
  .bl-home .slider .carousel_slide1 .sale-banner img { width: 100%; height: 573px; object-fit: cover; object-position: center; }
}

/* ---- 3) PRODUCTO: el markup legacy traía utilidades de Tailwind que v2 NO carga. ---- */
/* 3a) Los SVG decorativos de los selects de tinta (Tailwind .absolute) se
   renderizaban a 100x100 inline y rompían el bloque -> ocultarlos. */
#idtintasfrente .group svg,
#idtintasreverso .group svg { display: none !important; }
/* 3b) El wrapper .group/.w-64 (Tailwind, sin ancho ni position) -> caja sana. */
#idtintasfrente .group,
#idtintasreverso .group {
  position: relative; width: 100%; max-width: 280px; margin: 10px auto;
  display: flex; align-items: center; gap: 8px;
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 12px;
}
#idtintasfrente .group select,
#idtintasreverso .group select { flex: 1 1 auto; }
/* 3c) El .input-group envolvía FRENTE y REVERSO como flex y los descuadraba
   ("el reverso se pasa abajo"). Que se apilen en bloque, ancho completo. */
#conimpresion .input-group { display: block; }
#conimpresion .input-group > .check-tab { width: 100%; display: block; }
/* 3d) Columnas sueltas (.col-6 / .col-12 sin .row) -> ancho completo, sin descuadre. */
#conimpresion .quantity-box > .col-6,
#conimpresion .quantity-box > .col-12 { max-width: 100%; flex: 0 0 100%; }
/* 3e) El logo en la bolsa 3D nunca debe desbordar su cara. */
.impresionfront, .impresionback { max-width: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; }

/* ---- 4) RESPONSIVE: guardas para móvil (evitar scroll horizontal y desbordes). ---- */
@media (max-width: 767.98px) {
  html, body { overflow-x: hidden; }
  /* imágenes de contenido nunca desbordan su contenedor */
  .product-img img, .common-cart-img img, .news-img img, .cart-img img,
  .sale-banner img, .blog_info img { max-width: 100%; height: auto; }
  /* tablas anchas (tintas, pedidos, carrito) con scroll propio en vez de romper */
  .order-review-table, .table-responsive { width: 100%; overflow-x: auto; }
  /* el header top apila centrado en móvil (ya tiene text-center) sin recortes */
  .header-top .header_list { padding-left: 0; }
}

/* ---- 5) QA-25: en teléfonos pequeños (<=575px) la leyenda de los banners de Home
   (.shop-hover-text, posicionada en absoluto y forzada visible en táctil) desbordaba
   la imagen y el botón "Comprar" se encimaba. La sacamos del posicionamiento absoluto
   para que fluya bajo la imagen (solo en móvil; el hover de desktop no se toca). ---- */
@media (max-width: 575px) {
  .slider .sale-banner .shop-hover-text,
  .banner-section .sale-banner .shop-hover-text { position: relative; top: auto; right: auto; bottom: auto; left: auto; }
  .slider .sale-banner .shop-hover-wrap,
  .banner-section .sale-banner .shop-hover-wrap { position: static; transform: none; width: 100%; }
}

/* ---- 6) QA-V3 BUG-04/05: los botones de flecha del checkout (facturación/envío) se veían como
   "cuadritos vacíos que no hacen nada". Ya se carga buttonreg.css (flecha visible); aquí les damos
   una ETIQUETA clara debajo para que se entienda qué hacen. El click sigue en el div contenedor. ---- */
#idbottregfact, #idbottregfactform, #idbottregaddmas, #idbottregdireccionesform {
  cursor: pointer; text-align: left; display: inline-flex; align-items: center; gap: 10px;
}
#idbottregfact::after, #idbottregfactform::after,
#idbottregaddmas::after, #idbottregdireccionesform::after {
  font-size: 14px; font-weight: 600; color: #eb3e32; white-space: nowrap;
}
#idbottregaddmas::after            { content: "Agregar nueva dirección"; }
#idbottregdireccionesform::after   { content: "Volver a mis direcciones"; }
#idbottregfact::after              { content: "Volver a mis datos fiscales"; }
#idbottregfactform::after          { content: "Volver a mis datos fiscales"; }

/* ---- 7) QA-V3 BUG-02: los iconos de cuenta/wishlist/carrito del header se veían muy pequeños (18px)
   respecto al sitio en producción. Solo los del bloque derecho (NO el topbar de contacto). ---- */
.header-right .header_list > ul > li > a > i,
.header-right.header_list > ul > li > a > i { font-size: 22px; }
.header-cart .cart-icon i { font-size: 24px; }

/* ---- 8) QA-V3 BUG-03a: en el carrito la imagen del producto salía enorme. Se acota a un thumbnail. ---- */
.cart-table .row-img img, table.carrito .row-img img { max-width: 90px; height: auto; }
@media (max-width: 575px) {
  .cart-table .row-img img, table.carrito .row-img img { max-width: 64px; }
}

/* ---- 9) QA-V3 BUG-07/08: en móvil el banner del slider se veía CORTADO (background cover a altura
   fija) y en iPad Mini (768px) la columna lateral se ENCIMABA sobre el slider. En ≤991px apilamos
   ambas columnas a ancho completo y mostramos el arte COMPLETO (contain + relación de aspecto del
   banner ~5:3), sin recortes ni superposición. En ≥992px no se toca el diseño de escritorio. ---- */
@media (max-width: 991px) {
  .bl-home .slider .col-md-9,
  .bl-home .slider .col-md-3 { flex: 0 0 100%; max-width: 100%; }
  .bl-home .slider-area {
    height: auto !important;
    padding: 0 !important;
    aspect-ratio: 5 / 3;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
  /* la columna lateral (owl sale-banner) recupera su alto natural, no el 573px forzado (que encimaba).
     Acotado a `.slider` para NO tocar el testimonial-slider (que comparte .carousel_slide1). */
  .bl-home .slider .carousel_slide1,
  .bl-home .slider .carousel_slide1 .owl-stage,
  .bl-home .slider .carousel_slide1 .owl-item,
  .bl-home .slider .carousel_slide1 .sale-banner,
  .bl-home .slider .carousel_slide1 .sale-banner > a { height: auto !important; }
  /* el banner lateral es vertical (612x1200); sin tope, apilado a ancho completo quedaba ENORME en
     teléfono. Se acota la altura mostrando el arte completo (contain). */
  .bl-home .slider .carousel_slide1 .sale-banner img { height: auto !important; width: 100%; max-height: 70vh; object-fit: contain; }
}

/* ============================================================
   10) RESPONSIVE GLOBAL — auditoría integral (multi-agente + verificación visual, 2026-10).
   Overrides aditivos y acotados que preservan el template ATZ; escritorio ≥992 intacto
   (la regresión del testimonial a 573px se corrigió arriba, §2/§9, acotando a `.slider`).
   ============================================================ */

/* 10.1 CHROME · Targets táctiles ≥44px. El selector previo `.header-right .header_list > ul`
   (descendiente) estaba MUERTO: .header-right y .header_list son el MISMO div → usar el compuesto.
   Afecta iconos de cuenta/wishlist/carrito, la hamburguesa (nav principal móvil) y el menú. */
.header-right.header_list > ul > li > a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
}
.navbar-toggler {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
}
@media (max-width: 991px) {
  .header-btm .navbar .navbar-collapse > ul > li > a { padding: 12px 15px; }
}

/* 10.2 CHROME · Mini-carrito del header anclado al header-right y acotado al viewport para que NO
   se salga de pantalla en teléfonos (el template lo dejaba en 325px fijo con left:0). */
@media (max-width: 991px) {
  .header-right { position: relative; }
  .header-cart  { position: static; }
  .header-cart .cart-box,
  .header-cart:hover .cart-box {
    left: auto; right: 0; top: 100%;
    width: min(320px, calc(100vw - 30px));
    max-width: calc(100vw - 30px);
  }
}

/* 10.3 CHROME · pulido: logo con tope en teléfono; topbar que no aprieta en pantallas muy angostas;
   ocultar la columna vacía del footer (reservaba ~50% junto a "Síguenos"). */
@media (max-width: 575px) { .header-logo a img { width: auto; max-width: 140px; } }
@media (max-width: 360px) {
  .header-top .header_list > li a   { font-size: 12px; }
  .header-top .header_list > li a i { padding-right: 4px; }
}
@media (max-width: 991px) { .footer-top .footer-box.box-3 { display: none; } }

/* 10.4 GLOBAL · guarda anti-scroll-horizontal extendida a la banda de iPad (768–991), antes sin red
   (solo ≤767.98). Defensivo. */
@media (max-width: 991.98px) { html, body { overflow-x: hidden; } }

/* 10.5 TÁCTIL · botones e inputs del flujo (home CTAs, carrito, checkout, cuenta, auth, contacto) a
   ≥44px en teléfono; responsive.css los bajaba a ~37px. Acotado para no tocar escritorio. */
@media (max-width: 575px) {
  .bl-home .btn-primary,
  .cart-box-section .ci-btn .btn, .cart-table .table-btn li a,
  .checkout-process .btn-submit, #btnfinalcompra,
  .login_form .btn, .formpass button, .contact-inputs .btn, .contact-form .btn,
  #bl-dirs .btn, #bl-form-dir .btn, #bl-form-fac .btn {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .checkout-form .form-control, .contact-form .form-control { min-height: 44px; }
}

/* 10.6 CARRITO · en modo apilado (≤575) dos celdas sin data-title pintaban una etiqueta " :" suelta
   (imagen y Detalles); y el tooltip de Detalles (250px fijo) podía rozar el borde. */
@media (max-width: 575px) {
  .cart-table tbody tr td.row-img::before { content: "" !important; }
  .cart-table tbody tr td[idser]::before  { content: "Detalles :" !important; }
  .cart-table .tooltip-container .tooltip { left: 0; transform: none; max-width: 100%; }
  .cart-table .tooltip-container .about   { width: auto; max-width: 100%; }
}

/* 10.7 CUENTA · la tabla de "Mis pedidos" heredaba width:575px (del checkout de 4 columnas) y forzaba
   scroll innecesario; y las 3 acciones por dirección no envolvían en móvil. */
@media (max-width: 575px) {
  #accordionsesci .order-review-table .table { width: 100%; }
  #bl-dirs td.text-right { white-space: normal; }
  #bl-dirs td.text-right .btn { display: inline-block; margin: 2px 0 2px 4px; }
}

/* 10.8 PRODUCTO · ~250px de hueco muerto encima de la bolsa 3D: estiloResponsivo.css deja activo
   `.col-md-5{top:150px}` y .bl-bag-col añade padding-top:100px → doble salto. Se neutraliza el top
   heredado (el padding ya reserva holgura para las cotas 3D). El mismo top:150px global empujaba la
   imagen del Quickview → resetear dentro del modal. */
@media (max-width: 1200px) {
  .products-detail-section .bl-bag-col { top: 0 !important; padding-top: 40px; }
  #test-popup3 .col-md-5 { top: 0 !important; display: block; }
}

/* 10.9 PRODUCTO · botones de cantidad −/+ e input a ≥44px (eran 35px); la barra fija inferior de
   compra tapaba el botón "subir" → reubicarlo por encima de la barra. */
@media (max-width: 991px) {
  #contenedorCrearVenta .minus,
  #contenedorCrearVenta .plus { height: 44px; line-height: 44px; }
  #contenedorCrearVenta .quantity-number { height: 44px; }
  .scrollup { bottom: 90px; }
}