/* ══════════════════════════════════════════════════════════════
   header.css — Header fijo + drawer móvil + tabbar inferior
   Depende de las variables definidas en /css/variables.css
═══════════════════════════════════════════════════════════════ */

/* env(safe-area-inset-top) es el espacio que ocupan el notch / la
   isla dinámica / el reloj del iPhone cuando la app corre instalada
   a pantalla completa. Sin esto, la cintilla y el header quedan
   tapados por ahí arriba — por eso se veía "borroso"/cortado. */
body { padding-top: calc(var(--header-h) + var(--trust-h) + env(safe-area-inset-top)); }

/* ── Trust strip (cinta fija arriba del menú) ──
   El truco del loop infinito sin cortes: el HTML (en header.php)
   repite el mismo bloque de íconos 2 veces seguidas, y la animación
   solo recorre el 50% del ancho total (= exactamente 1 bloque).
   Cuando termina el primer bloque, el segundo idéntico ya está ahí,
   así que el reinicio de la animación es invisible. */
.trust-strip {
  position: fixed; top: 0; left: 0; right: 0; z-index: 205;
  height: calc(var(--trust-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  box-sizing: border-box;
  /* Fijo (NO var(--text-1)) a propósito: --text-1 es la variable de
     TEXTO, y en modo oscuro cambia a un color casi blanco — usarla
     de fondo aquí hacía que esta franja (y el área del notch arriba)
     se viera blanca, con el texto blanco encima invisible. Esta
     franja siempre debe ser oscura, sin importar el tema del sitio. */
  background: #0F172A; overflow: hidden;
  display: flex; align-items: center;
}
.trust-inner {
  display: flex; gap: 32px; white-space: nowrap;
  width: max-content;
  animation: trust-scroll 26s linear infinite;
}
.trust-strip:hover .trust-inner { animation-play-state: paused; }
.ti { display: flex; align-items: center; gap: 8px; color: #fff; font-size: .74rem; font-weight: 600; }
@keyframes trust-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.site-header {
  position: fixed; top: calc(var(--trust-h) + env(safe-area-inset-top)); left: 0; right: 0; z-index: 200;
  height: var(--header-h);
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header { background: rgba(11, 15, 20, .85); }
}
:root[data-theme="dark"] .site-header { background: rgba(11, 15, 20, .85); }

.sh-inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-md);
}

/* Logo */
.sh-logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.sh-logo-mark {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--g2), var(--g1));
}
.sh-logo-mark svg { width: 18px; height: 18px; }
.sh-logo-text { font-weight: 700; font-size: 1.02rem; color: var(--text-1); }
.sh-logo-text strong { color: var(--g2); }

/* Nav desktop */
.sh-nav { display: flex; align-items: center; gap: 26px; }
.sh-nav a {
  position: relative;
  font-size: .88rem; font-weight: 600; color: var(--text-2);
  padding: 4px 1px 8px;
  transition: color .15s ease;
}
.sh-nav a:hover { color: var(--g2); }
/* Página activa: se queda en verde (no solo al pasar el mouse), con
   una rayita animada abajo para que sea obvio en qué página estás. */
.sh-nav a.active { color: var(--g1); font-weight: 700; }
.sh-nav a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--g2), var(--g1));
  animation: gtNavUnderline .28s ease;
}
@keyframes gtNavUnderline {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Acciones (cuenta, carrito, menú) */
.sh-actions { display: flex; align-items: center; gap: 6px; }
.sh-icon-btn {
  position: relative;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-1);
  transition: background .15s ease;
}
.sh-icon-btn:hover { background: var(--bg-s); }
.sh-icon-btn svg { width: 19px; height: 19px; }

.sh-cart-count {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: var(--r-pill);
  background: var(--g2); color: #fff;
  font-size: .62rem; font-weight: 800; line-height: 16px; text-align: center;
}
.sh-cart-count:empty,
.sh-cart-count[data-count="0"] { display: none; }

/* Rebote verde cada vez que cambia la cantidad en el carrito — antes
   el numerito solo cambiaba "en silencio", ahora se nota que sí pasó
   algo. Lo dispara js/carrito.js agregando esta clase un instante
   sobre CUALQUIER badge con .gt-cart-count (el de escritorio y el de
   la tabbar de abajo en móvil, los dos a la vez). */
.sh-cart-count.pulse { animation: gtCartPulso .5s ease; }
@keyframes gtCartPulso {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* Envoltura del ícono del carrito en la tabbar de abajo (móvil) — solo
   para poder anclar el numerito justo sobre el ícono, igual que ya
   pasaba en el header de escritorio (.sh-icon-btn). Le damos un
   tamaño mínimo fijo (antes se encogía al tamaño exacto del ícono,
   24x24) para que el numerito tenga espacio de sobra y no le quede
   encimado justo arriba del carrito. */
.sh-tab-ico-wrap {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 24px;
}
/* El numerito de la tabbar necesita su propio ancla (más hacia la
   esquina, un poco fuera del ícono) — antes usaba las mismas
   coordenadas que el badge de escritorio (top:2px;right:2px), que ahí
   sí caían en la esquina de un botón de 40x40, pero aquí el ícono es
   mucho más chico y el numerito terminaba encimado justo en medio. */
.sh-tab-ico-wrap .sh-cart-count { top: -6px; right: -8px; }

.sh-menu-btn { display: none; }

/* Botón "Salir" rápido junto al ícono de la personita — solo se
   imprime en el HTML cuando $isAdmin es true (ver header.php), así
   que en el sitio normal ni siquiera existe este elemento. Color
   ámbar para que se distinga de los demás iconos del header, igual
   que el resto de la señalética de "modo administrador". */
.sh-admin-exit { color: #A8760E; }
.sh-admin-exit:hover { background: rgba(245, 166, 35, .12); }
.sh-admin-exit svg { width: 17px; height: 17px; }

/* ── Avatar de iniciales (cliente con sesión iniciada) ──
   Antes, con sesión iniciada o no, el header mostraba el mismo
   monito genérico — no se notaba si ya habías iniciado sesión. Ahora,
   logueado, el ícono de personita se cambia por un círculo con tus
   dos iniciales (ver gtIniciales() en components/header.php), más un
   botón aparte para cerrar sesión rápido. */
.sh-avatar-btn { padding: 0; }
.sh-avatar-iniciales {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--g2), var(--g1));
  color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .02em;
  user-select: none;
}

/* Botón "Cerrar sesión" junto al avatar — gris neutro normalmente,
   rojo al pasar el mouse para que se note que es una acción distinta
   (salir), sin confundirse con el ámbar de "modo administrador". */
.sh-client-exit { color: var(--text-3); }
.sh-client-exit:hover { background: rgba(220, 38, 38, .1); color: #DC2626; }
.sh-client-exit svg { width: 17px; height: 17px; }

/* ── Leyenda "modo administrador" ──
   Banner en flujo normal (NO fixed) — se agrega como lo ÚLTIMO dentro
   de header.php, después de la tabbar, para no meterse con el cálculo
   de padding-top del <body> que ya está ajustado para la trust-strip
   fija + el header fijo (ver arriba). Al ir en flujo normal, cae
   automáticamente justo debajo de ese espacio reservado. */
.admin-banner {
  background: repeating-linear-gradient(135deg, #FFF3D6, #FFF3D6 10px, #FFECB8 10px, #FFECB8 20px);
  border-bottom: 1px solid rgba(245, 166, 35, .35);
}
.admin-banner-inner {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap;
  padding: 8px 16px;
  text-align: center;
}
.admin-banner-text {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 700; color: #7A5205;
}
.admin-banner-salir {
  font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  color: #7A5205; text-decoration: underline; white-space: nowrap;
}
@media (max-width: 1024px) {
  /* En móvil la tabbar es fixed y este banner (en flujo normal) cae
     justo debajo de la trust-strip, arriba del contenido — se ve bien
     porque el body de esta vista solo reserva trust-strip + tabbar,
     nunca el alto del header de escritorio (que aquí está oculto). */
  .admin-banner-inner { padding: 7px 14px; }
  .admin-banner-text { font-size: .72rem; }
}

/* ── Drawer móvil ── */
.sh-drawer-overlay {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(15, 23, 42, .45);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.sh-drawer-overlay.active { opacity: 1; pointer-events: auto; }

.sh-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 220;
  width: min(80vw, 320px);
  background: var(--card-bg);
  box-shadow: var(--sh-3);
  padding: calc(var(--header-h) + var(--trust-h) + env(safe-area-inset-top) + 12px) 8px 24px;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
}
.sh-drawer.active { transform: translateX(0); }

.sh-drawer-nav { display: flex; flex-direction: column; gap: 2px; }
.sh-drawer-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: var(--r-sm);
  font-weight: 600; font-size: .93rem; color: var(--text-1);
}
.sh-drawer-nav a:hover { background: var(--bg-s); }
.sh-drawer-nav a svg { width: 18px; height: 18px; stroke: var(--g2); }

/* ── Tabbar inferior estilo app (único menú en móvil/tablet) ── */
/* ── La tabbar ENTERA es la superficie de vidrio ──
   Antes tenía un fondo sólido (var(--card-bg)) — por eso el "liquid
   glass" no se veía: el pedacito translúcido detrás de la pestaña
   activa no tenía nada distinto qué difuminar, solo el mismo color
   sólido detrás. Ahora la barra completa es translúcida + con blur,
   así el contenido de la página (fotos, colores) se ve borroso
   detrás según haces scroll — eso es lo que da el efecto de vidrio. */
.sh-tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 190;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 -2px 24px rgba(15, 23, 42, .06);
  padding: 6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));
  justify-content: space-around;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sh-tabbar {
    background: rgba(11, 15, 20, .72);
    border-top-color: rgba(255, 255, 255, .08);
  }
}
:root[data-theme="dark"] .sh-tabbar {
  background: rgba(11, 15, 20, .72);
  border-top-color: rgba(255, 255, 255, .08);
}
.sh-tabbar a,
.sh-tabbar .sh-tab-more {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 14px; border-radius: 14px;
  color: var(--text-3); font-size: .64rem; font-weight: 700;
  background: none; border: none;
  transition: color .18s ease;
}
.sh-tabbar a svg,
.sh-tabbar .sh-tab-more svg { width: 20px; height: 20px; transition: transform .18s cubic-bezier(.34,1.56,.64,1); }
.sh-tabbar a.active,
.sh-tabbar .sh-tab-more.active { color: var(--g1); }
.sh-tabbar a.active svg,
.sh-tabbar .sh-tab-more.active svg { transform: translateY(-1px) scale(1.06); }

/* ── "Liquid glass" detrás de la pestaña activa ──
   Vidrio esmerilado translúcido (blur + saturación), como el look
   "Liquid Glass" de Apple — se dibuja detrás del ícono+texto activo
   con un pequeño "pop" al aparecer. Antes "Inicio" tenía este active
   fijo en el HTML sin importar la página; ahora depende de la ruta
   real (ver components/header.php, gtEsActiva()). */
.sh-tabbar a.active::before,
.sh-tabbar .sh-tab-more.active::before {
  content: '';
  position: absolute; inset: -2px 2px; z-index: -1;
  border-radius: 16px;
  background: rgba(0, 201, 116, .14);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(0, 168, 94, .25);
  box-shadow: 0 3px 10px rgba(0, 120, 70, .16), inset 0 1px 0 rgba(255, 255, 255, .45);
  animation: gtTabGlassIn .32s cubic-bezier(.34,1.56,.64,1);
}
@keyframes gtTabGlassIn {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sh-tabbar a.active::before,
  :root:not([data-theme="light"]) .sh-tab-more.active::before {
    background: rgba(0, 201, 116, .16);
    border-color: rgba(0, 201, 116, .3);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
  }
}
:root[data-theme="dark"] .sh-tabbar a.active::before,
:root[data-theme="dark"] .sh-tab-more.active::before {
  background: rgba(0, 201, 116, .16);
  border-color: rgba(0, 201, 116, .3);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* En el drawer, el link de "Carrito" solo tiene sentido en pantallas
   grandes (en móvil el carrito ya vive en la tabbar de abajo). */
.sh-drawer-only-mobile { display: none; }

/* ══════════════════════════════════════════════════════════════
   Breakpoint: en móvil Y TABLET, ocultamos POR COMPLETO la barra
   de arriba (logo + iconos) y dejamos la tabbar inferior como
   ÚNICO menú de navegación — para que no se vean "dos menús" a
   la vez, tal como en una app nativa.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .site-header { display: none; }
  .sh-tabbar { display: flex; }
  .sh-drawer-only-mobile { display: flex; }

  /* Sin header visible, el body solo necesita reservar el alto
     de la cintilla de arriba (más el notch) y el de la tabbar de abajo. */
  body {
    padding-top: calc(var(--trust-h) + env(safe-area-inset-top));
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }
  .sh-drawer { padding-top: calc(var(--trust-h) + env(safe-area-inset-top) + 12px); }
}