/* ═══════════════════════════════════════════════════════
   APP NAV — Barra inferior unificada Vitalia
   Agregar al final de style.css Y al final de stylecuenta.css
   (o crear un archivo compartido app-nav.css e importarlo en ambos)
════════════════════════════════════════════════════════ */

/* ---------- VARIABLES (ya definidas en stylecuenta.css, 
   replicar en style.css si no existen) ---------- */
:root {
  --nav-h:        64px;          /* altura barra móvil */
  --nav-bg:       #A11E4A;       /* bordo Vitalia */
  --nav-border:   rgba(255,255,255,.12);
  --nav-active:   #ffffff;       /* ítem activo: blanco */
  --nav-inactive: rgba(255,255,255,.55);
  --nav-cart-bg:  #A11E4A;       /* bordo carrito FAB */
  --nav-safe:     env(safe-area-inset-bottom, 0px);  /* iPhone notch */
}

/* ── BARRA CONTENEDOR ── */
.app-nav {
  display: none;                 /* oculta por defecto en PC */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--nav-h) + var(--nav-safe));
  padding-bottom: var(--nav-safe);

  background: var(--nav-bg);
  border-top: 1px solid var(--nav-border);
  box-shadow: 0 -4px 24px rgba(0,0,0,.18);

  flex-direction: row;
  align-items: stretch;
  justify-content: space-around;

  z-index: 9200;                 /* encima del sidebar (9150) y su overlay (9140) */
  -webkit-tap-highlight-color: transparent;
}

/* ── MOSTRAR SOLO EN MÓVIL ── */
@media (max-width: 1024px) {
  .app-nav { display: flex; }

  /* Empuja el contenido de la página para que no quede tapado */
  body { padding-bottom: calc(var(--nav-h) + var(--nav-safe) + 8px); }
}

/* ── ÍTEM BASE ── */
.app-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;

  background: none;
  border: none;
  padding: 0 4px;
  cursor: pointer;
  color: var(--nav-inactive);
  transition: color .15s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  position: relative;
}

.app-nav__item:active {
  transform: scale(.9);
  color: var(--nav-active);
}

/* ── ÍCONO ── */
.app-nav__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-nav__icon svg {
  width: 24px;
  height: 24px;
  display: block;
  stroke-width: 1.6;
  transition: stroke-width .2s ease, transform .2s ease;
}

/* ── LABEL ── */
.app-nav__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  font-family: 'DM Sans', 'MADECarvingSoft', sans-serif;
  white-space: nowrap;
}

/* ── ÍTEM ACTIVO ── */
.app-nav__item--active {
  color: var(--nav-active);
}

.app-nav__item--active .app-nav__icon svg {
  stroke-width: 2.8;
  transform: scale(1.12);
}

.app-nav__item--active .app-nav__label {
  font-weight: 800;
}

.app-nav__item--active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: var(--nav-active);
  border-radius: 0 0 3px 3px;
}

/* ── CARRITO FAB (ítem central especial) ── */
.app-nav__item--cart {
  flex: 1.2;
}

/* Suprimir el indicador activo (línea blanca) para el carrito */
.app-nav__item--cart.app-nav__item--active::after {
  display: none;
}

/* Carrito: sin engrosado ni escala al activarse */
.app-nav__item--cart .app-nav__icon svg {
  stroke-width: 1.6 !important;
  transform: none !important;
}

.app-nav__icon--cart {
  position: relative;
  background: #A11E4A;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  margin-top: -28px;             /* flota sobre la barra */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(161,30,74,.5), 0 2px 6px rgba(0,0,0,.2);
  transition: transform .15s ease, box-shadow .15s;
  /* Evitar blur por sub-píxel */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.app-nav__item--cart:active .app-nav__icon--cart {
  transform: scale(.88);
  box-shadow: 0 3px 10px rgba(161,30,74,.35);
}

.app-nav__icon--cart svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  shape-rendering: geometricPrecision;
  display: block;
}

/* ── BADGE CONTADOR CARRITO ── */
.app-nav__badge {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 17px;
  height: 17px;
  max-width: 44px;               /* nunca sale del círculo de 56px */
  background: #E2833D;
  color: #ffffff;
  border-radius: 50px;
  font-size: 10px;
  font-weight: 800;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
}

.app-nav__badge:not(:empty) { display: flex; }

/* ═══════════════════════════════════════════════════════
   OCULTAR los botones flotantes antiguos en móvil
   (por si quedaron en el HTML — esto evita que dupliquen)
════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Barra vacía antigua */
  .barra-inferior               { display: none !important; }

  /* Botones flotantes sueltos — ya los reemplaza app-nav */
  .btn-inicio-flotante          { display: none !important; }
  .favorites-button             { display: none !important; }
  .sidebar-toggle               { display: none !important; }

  /* Carrito: en móvil lo maneja app-nav; en PC sigue igual */
  .cart-button                  { display: none !important; }

  /* Login decorativo oculto */
  #login-google.logged          { display: none !important; }
}

/* ═══════════════════════════════════════════════════════
   PC (≥1025px) — la barra no existe, los botones de PC
   siguen con sus estilos originales de style.css
════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  .app-nav { display: none !important; }
  #login-google { display: none !important; }
}