/* ==============================================================
   carrito-panel.css
   Punto Neto v1.5
   Ruta: public/assets/css/carrito-panel.css
   Creado: 2026-07-01
   Modificado: 2026-08-16
   Descripcion: Estilos GLOBALES del carrito — se cargan en TODAS
                las paginas desde layout.php (fijo, no es un
                pagina_css condicional), porque el carrito ya no
                pertenece a ninguna vista especifica (viene de
                catalogo.css v1.0, relocalizado 1:1 sin cambios de
                comportamiento salvo lo indicado abajo).

                UNICO cambio de comportamiento real en este archivo:
                la regla de ".contenido-principal" — es lo que hace
                que el panel EMPUJE el contenido de la pagina cuando
                tiene items, y desaparezca sin dejar hueco muerto
                cuando esta vacio/cerrado (antes quedaba un hueco de
                300px fijo en el grid de catalogo.css aunque no
                hubiera nada en el carrito).

   v1.5 (2026-08-16) — FIX bug real reportado por Ami: en mobile,
   el boton "Agregar" del modal .selector-variantes (productos CON
   variantes/complementos) quedaba tapado por el nav inferior fijo
   (nav-movil.css, z-index:900, agregado 2026-08-11 — despues de
   que este modal ya tenia z-index:30). Ver el comentario en la
   regla .selector-variantes mas abajo para el detalle completo.

   Depende de:    public/assets/css/base.css (variables --color-*,
                  --sp-*, --radio-*, --sombra-*, --trans-*) y de que
                  layout.php envuelva $vista en
                  <div class="vista-activa"> dentro de <main>
                  (ver src/Views/layout.php v1.4).
   Requerido por: src/Views/layout.php (fijo, todas las paginas)

   v1.1 — BUG RESUELTO: la regla ".contenido-principal >
   *:first-child" (ver abajo) asumia que la vista activa es
   SIEMPRE un unico elemento hijo — cierto para catalogo.php (de
   donde se relocalizo este CSS), pero NO para home.php, que emite
   4 <section> hermanas sueltas sin wrapper. Resultado real: 5
   flex-items en fila (4 secciones + carrito-panel) en vez de 2 —
   home se veia comprimido horizontalmente con un hueco negro (el
   panel del carrito vacio reclamando sus 300px). Fix de raiz en
   layout.php v1.4 (envuelve $vista en <div class="vista-activa">)
   + aqui se cambia el selector de ":first-child" (fragil, depende
   del orden del DOM) a ".vista-activa" (explicito, no se rompe si
   a futuro se agrega otro elemento antes dentro de
   .contenido-principal).

   v1.2 — GAP RESUELTO (anotado sin resolver desde v1.0): en movil
   NO existia ninguna regla que ocultara .carrito-panel por default
   — solo dependia del atributo [hidden], que el JS quita en cuanto
   hay items, sin importar el tamaño de pantalla. Resultado real:
   en movil, en cuanto se agregaba un producto, el panel aparecia
   como un flex-item mas dentro de .contenido-principal, montado
   sobre el catalogo — no era un modal que el usuario abria, ya
   estaba ahi de por si. Y al tocar la barra inferior ("expandir"),
   tampoco pasaba nada visible porque
   .carrito-panel--expandido-movil nunca tuvo estilos propios. Fix:
   en pantallas <1024px el panel esta oculto por default
   (display:none) sin importar [hidden]; SOLO se muestra, como hoja
   fija de pantalla completa con backdrop, cuando tiene la clase
   carrito-panel--expandido-movil (que ahora si el usuario controla
   via la barra movil y el nuevo boton de cerrar — ver
   carrito-global.js v1.1 y carrito-panel.php v1.1).

   v1.3 — 3 fixes reportados probando en dispositivo real:
   1. El panel expandido en movil quedaba TAPADO por el header
      (.encabezado tiene z-index:100, sticky; el panel expandido
      tenia z-index:40 — el header se dibujaba encima, ocultando
      los items de arriba). Fix: z-index del panel/backdrop subido
      por encima del header (160/150).
   2. El boton "Ir a pagar" aparecia pegado arriba con un hueco
      negro enorme abajo — el panel tenia overflow-y:auto en el
      CONTENEDOR COMPLETO, pero ningun hijo tenia flex:1, asi que
      todo se agrupaba a su tamaño natural arriba sin llenar el
      espacio. Fix: ahora SOLO .carrito-items crece y scrollea
      (flex:1;overflow-y:auto), empujando el total+botones al
      fondo real de la pantalla — alcanzables con el pulgar.
   3. Estado "carrito vacio" (.carrito-vacio) y clase
      .carrito-panel--forzado — soporta que el icono del carrito
      del header abra el panel aunque no tenga items, en vez de
      navegar a /carrito (404, esa vista aun no existe — ver
      layout.php v1.5 y carrito-global.js v1.2).

   v1.4 — .carrito-item-imagen: miniatura del producto en cada
   linea del carrito (ver carrito-global.js v1.4 y
   CarritoController.php v1.2, que ahora manda producto_imagen).
   ============================================================== */

/* ---------------- Layout que reacciona al carrito ----------------
   .contenido-principal envuelve tanto la vista activa como
   #carrito-panel (ver layout.php: <?php require $vista; ?> seguido
   del partial de carrito, ambos dentro de <main>). Con flex, si el
   panel esta [hidden] (display:none via el fix de abajo), la vista
   ocupa el 100% del ancho sola. En cuanto el carrito tiene items,
   reclama sus 300px y la vista se encoge — esto es el "empuje"
   pedido, sin que ninguna vista necesite saber nada del carrito. */
.contenido-principal {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
}

/* La vista activa debe poder encogerse — sin min-width:0 un grid/
   flex hijo puede forzar overflow horizontal en vez de reducirse
   cuando el carrito abre.
   v1.1: antes ".contenido-principal > *:first-child" — dependia
   de que la vista fuera siempre el primer hijo por POSICION en el
   DOM. Ahora se apunta a la clase explicita ".vista-activa" que
   layout.php v1.4 pone directo en el wrapper de $vista — mas
   robusto, no depende del orden de los elementos. */
.vista-activa {
  flex: 1;
  min-width: 0;
}

/* ---------------- Panel de carrito (desktop lateral / movil hoja) --- */
.carrito-panel {
  flex: 0 0 300px;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.carrito-titulo { font-size: 15px; font-weight: 900; text-transform: uppercase; }

.carrito-items { display: flex; flex-direction: column; gap: var(--sp-2); }
.carrito-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: 12.5px;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--color-borde);
}
.carrito-item-nombre { font-weight: 700; color: var(--color-texto); flex: 1; }
.carrito-item-cantidad { color: var(--color-texto-suave); font-size: 12px; }
.carrito-item-precio { font-weight: 800; color: var(--color-primario); white-space: nowrap; }

/* v1.4: miniatura de producto — antes cada fila solo tenia texto,
   se sentia vacia sobre todo con un solo producto en el carrito. */
.carrito-item-imagen {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: var(--radio-sm);
  object-fit: cover;
}
.carrito-item-imagen--vacia {
  background: var(--color-superficie-alt);
}
.carrito-item-quitar {
  background: none; border: none; cursor: pointer;
  color: var(--color-texto-suave);
  font-family: 'Material Symbols Rounded';
  font-size: 16px;
  padding: 0;
}
.carrito-item-quitar:hover { color: var(--color-primario); }

.carrito-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 900;
  font-size: 15px;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--color-borde);
}
#carrito-total { color: var(--color-primario); }

.carrito-btn-pagar { width: 100%; }
.boton-texto {
  background: none;
  border: none;
  color: var(--color-texto-suave);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: var(--sp-1) 0;
}

/* ---------------- Badge del carrito en el header ----------------
   #insignia-carrito ya existia en layout.php pero nada lo
   actualizaba — carrito-global.js ya lo resuelve en JS, esto es
   solo la parte visual (atenuado cuando esta en 0). */
.insignia-carrito {
  transition: opacity var(--trans-rapida);
}
.insignia-carrito[data-vacio="true"] {
  opacity: .35;
}

/* ---------------- Barra movil de carrito ---------------- */
.carrito-barra-movil {
  position: fixed;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-primario);
  color: var(--texto-sobre-primario);
  border: none;
  border-radius: var(--radio-pill);
  padding: var(--sp-3) var(--sp-5);
  font-weight: 800;
  font-size: 13.5px;
  box-shadow: var(--sombra-3);
  cursor: pointer;
}

/* ---------------- Selector de variantes (hoja desde abajo) ---------------- */
.selector-variantes {
  position: fixed;
  inset: 0;
  /* 2026-08-16 — FIX bug real reportado por Ami: en mobile, el nav
     inferior fijo (nav-movil.css, z-index:900, agregado 2026-08-11 —
     DESPUÉS de que este modal ya tenía z-index:30) se dibujaba
     encima de este modal, tapando el botón "Agregar" en productos
     con variantes/complementos. Productos SIN opciones no lo sufrían
     porque su botón "+Agregar" vive en la card, en flujo normal de
     la página, nunca dentro de este modal fijo. Antes: z-index:30.
     Ahora: 1000, igualando el mismo estándar que ya usa el modal de
     "Vista rápida" (ver carrito-global.js, elVR.style.cssText) — y
     el mismo techo que el propio nav-movil.css ya reservaba en su
     comentario ("debajo del modal-cerrado (1000)"). Sube TODO el
     modal de una vez (fondo + hoja), porque ambos son hijos dentro
     de este mismo contenedor con position:fixed — no hace falta
     tocar z-index en ningún otro selector de este archivo. */
  z-index: 1000;
  display: flex;
  align-items: flex-end;
}
.selector-variantes-fondo {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}
.selector-variantes-hoja {
  position: relative;
  width: 100%;
  background: var(--color-superficie);
  border-radius: var(--radio-lg) var(--radio-lg) 0 0;
  padding: var(--sp-5);
  max-height: 70vh;
  overflow-y: auto;
}
.selector-variantes-cerrar {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--color-superficie-alt);
  color: var(--color-texto);
  font-family: 'Material Symbols Rounded';
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.selector-variantes-cerrar:hover { background: var(--color-borde); }
.selector-variantes-hoja h3 {
  font-size: 15px;
  font-weight: 900;
  margin-bottom: var(--sp-3);
}
.variante-opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--color-borde);
  cursor: pointer;
}
.variante-opcion--agotada { opacity: .4; pointer-events: none; }
.variante-opcion-nombre { font-size: 13px; font-weight: 700; }
.variante-opcion-precio { font-size: 12.5px; color: var(--color-texto-suave); }
#selector-variantes-confirmar { width: 100%; margin-top: var(--sp-4); }
#selector-variantes-confirmar:disabled { opacity: .4; cursor: not-allowed; }

/* FIX CRITICO (heredado de catalogo.css v1.0 — sigue siendo
   necesario aqui): sin esta regla, el atributo HTML `hidden` que
   pone el JS no tiene ningun efecto, porque los `display: flex` de
   arriba lo pisan siempre. Con este override, [hidden] siempre
   gana sin importar el orden de las demas reglas. */
.carrito-panel[hidden],
.selector-variantes[hidden],
.carrito-barra-movil[hidden] {
  display: none !important;
}

/* ---------------- Backdrop del panel expandido (movil) ----------------
   v1.2: mismo patron que .selector-variantes-fondo — capa oscura
   detras del panel cuando esta expandido en pantalla completa.
   Clic en ella cierra el panel (ver carrito-global.js). En
   desktop nunca se activa (el panel siempre esta visible como
   sidebar, no hay "expandir/cerrar" ahi). */
.carrito-panel-fondo {
  position: fixed;
  inset: 0;
  z-index: 150; /* v1.3: antes 39 — quedaba DEBAJO del header
    (.encabezado, z-index:100), asi que el header tapaba el borde
    superior del panel. Ahora va por encima. */
  background: rgba(0,0,0,.5);
}
.carrito-panel-fondo[hidden] { display: none !important; }

/* ---------------- Boton de cerrar del panel expandido (movil) --------
   v1.2: oculto por default (no aplica en el sidebar de desktop, que
   nunca se cierra). Solo se muestra cuando el panel esta en modo
   expandido movil — ver el media query de abajo. */
.carrito-panel-cerrar {
  display: none;
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--color-superficie-alt);
  color: var(--color-texto);
  font-family: 'Material Symbols Rounded';
  font-size: 18px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.carrito-panel-cerrar:hover { background: var(--color-borde); }

/* v1.3: visible tambien cuando el panel se abrio manualmente desde
   el icono del header (con o sin items) — ver
   carrito-global.js v1.2, actualizarVisibilidadPanel(). En el
   sidebar automatico de desktop (items presentes, nunca forzado)
   sigue sin mostrarse — ese panel no se "cierra", es persistente. */
.carrito-panel--forzado .carrito-panel-cerrar {
  display: flex;
}

/* ---------------- Estado "carrito vacio" ----------------
   v1.3: antes, si no habia items, el panel simplemente no
   existia visualmente — no habia nada que mostrarle a un usuario
   que abriera el carrito desde el icono del header sin haber
   agregado nada. Este bloque reemplaza a .carrito-contenido
   cuando el carrito esta vacio. */
.carrito-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-3);
  color: var(--color-texto-suave);
  font-size: 13px;
}
.carrito-vacio[hidden] { display: none !important; }

/* ---------------- Contenido del carrito (items + total + botones) ----
   v1.3: antes estos elementos eran hijos directos de .carrito-panel
   sin agrupar. Se agrupan en un wrapper para poder controlar el
   estado vacio/con-contenido de un solo golpe, y para que en movil
   SOLO .carrito-items (no todo el panel) sea lo que scrollea —
   ver el media query de abajo. */
.carrito-contenido {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
  min-height: 0;
}
.carrito-contenido[hidden] { display: none !important; }

@media (min-width: 1024px) {
  .carrito-barra-movil { display: none; }
  .carrito-panel { position: sticky; top: var(--sp-4); }

  .selector-variantes { align-items: center; justify-content: center; }
  .selector-variantes-hoja {
    width: 380px;
    border-radius: var(--radio-lg);
    max-height: 60vh;
  }
}

/* ---------------- Panel en movil — v1.2, gap resuelto ----------------
   ANTES: sin esta seccion, .carrito-panel solo se ocultaba via el
   atributo [hidden] (controlado por "hay items o no"), sin importar
   el tamaño de pantalla. En movil, en cuanto habia items, el panel
   aparecia siempre como flex-item mas dentro de .contenido-principal
   — montado sobre el catalogo, sin que el usuario lo hubiera abierto.
   Y aunque el JS ya ponia la clase carrito-panel--expandido-movil al
   tocar la barra, esa clase nunca tuvo estilos propios, asi que no
   se notaba ninguna diferencia visual.

   AHORA: por default, oculto en pantallas <1024px (independiente de
   [hidden] — se corta desde la raiz con la regla de mayor
   especificidad de abajo). Solo se muestra cuando tiene la clase
   carrito-panel--expandido-movil, y ahi se comporta como hoja de
   pantalla completa (mismo espiritu que .selector-variantes-hoja),
   con su boton de cerrar visible y el backdrop detras. */
@media (max-width: 1023.98px) {
  .carrito-panel:not(.carrito-panel--expandido-movil) {
    display: none;
  }

  .carrito-panel.carrito-panel--expandido-movil {
    position: fixed;
    inset: 0;
    z-index: 160; /* v1.3: antes 40 — por debajo del header
      (z-index:100, sticky), asi que el header tapaba la parte de
      arriba del panel (items ocultos). Ahora va por encima. */
    border-radius: 0;
    animation: carrito-panel-entrada 250ms ease;
    /* v1.3: YA NO overflow-y/max-height aqui — el panel completo
       ya no scrollea como bloque. Con inset:0 su altura es fija
       (100% del viewport); ahora es .carrito-items (dentro de
       .carrito-contenido) el que crece y scrollea, dejando el
       total + "Ir a pagar" siempre visibles al fondo. Antes,
       sin ningun hijo con flex:1, todo el contenido se agrupaba
       arriba a su tamaño natural y el resto de la pantalla
       quedaba vacio (el boton aparecia pegado arriba). */
  }

  .carrito-panel.carrito-panel--expandido-movil .carrito-panel-cerrar {
    display: flex;
  }

  /* Solo la lista de productos crece y scrollea — el titulo y el
     bloque de total/botones se quedan fijos a su tamaño natural,
     el segundo siempre pegado al fondo real de la pantalla. */
  .carrito-panel.carrito-panel--expandido-movil .carrito-items {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }
}

@keyframes carrito-panel-entrada {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}