/* ============================================================
   AEGONPERFUMES — SISTEMA DE DISEÑO
   ============================================================
   Este archivo es la única fuente de verdad para colores,
   tipografía y espaciado de todo el proyecto.

   REGLA DE ORO: nunca escribas un color o tamaño "a mano" en
   otro archivo CSS. Si necesitas un valor que no existe aquí,
   agrégalo primero como variable en este archivo, con su
   nombre y comentario, y úsalo desde ahí.
   ============================================================ */

:root {

  /* ---------- COLOR: SUPERFICIES ---------- */
  --color-bg: #121214;              /* Fondo de la página (body) */
  --color-surface: #1A1A1E;         /* Tarjetas, navbar, modales */
  --color-surface-raised: #222226;  /* Elementos sobre una superficie (ej. carrito sobre overlay) */
  --color-border: #2C2C31;          /* Bordes y divisores sutiles, NO usar texto-secundario para esto */

  /* ---------- COLOR: TEXTO ---------- */
  --color-text-primary: #FFFFFF;    /* Títulos, precios, nombres de fragancia */
  --color-text-secondary: #A0A0A5;  /* Notas olfativas, descripciones, pies de página */
  --color-text-on-accent: #121214;  /* Texto SOBRE fondo dorado — oscuro por contraste, no blanco */

  /* ---------- COLOR: ACENTO / MARCA ---------- */
  --color-accent: #C5A059;          /* Botón de acción, insignias "Más vendido" */
  --color-accent-hover: #E5C17D;    /* Hover de botones y enlaces */
  --color-accent-soft: rgba(197, 160, 89, 0.12); /* Fondos sutiles con tinte dorado (ej. badge decant) */

  /* ---------- COLOR: ESTADOS DE PEDIDO (panel admin) ---------- */
  /* Neutros con distinto peso, no semáforo rojo/amarillo/verde:
     eso rompería el tono de lujo. La diferencia se nota en
     intensidad, no en cambio de color. */
  --color-status-pendiente: #A0A0A5;
  --color-status-preparando: #C5A059;
  --color-status-enviado: #E5C17D;
  --color-status-entregado: #FFFFFF;

  /* ---------- COLOR: OVERLAY ---------- */
  --color-overlay: rgba(8, 8, 9, 0.75); /* Fondo oscurecido detrás del carrito lateral / modales */

  /* ---------- TIPOGRAFÍA ---------- */
  --font-display: 'Cormorant Garamond', serif;  /* Títulos grandes, nombre de marca */
  --font-body: 'Inter', sans-serif;             /* Precios, botones, descripciones, UI */

  --fs-xs: 0.75rem;    /* 12px — notas al pie, etiquetas */
  --fs-sm: 0.875rem;   /* 14px — texto secundario */
  --fs-base: 1rem;     /* 16px — texto base */
  --fs-md: 1.125rem;   /* 18px — precios, nombres de producto */
  --fs-lg: 1.5rem;     /* 24px — subtítulos */
  --fs-xl: 2.25rem;    /* 36px — títulos de sección */
  --fs-2xl: 3rem;      /* 48px — hero */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ---------- ESPACIADO ---------- */
  /* Escala de 4px. Usar siempre estos valores, nunca px sueltos. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---------- RADIOS Y SOMBRAS ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 24px rgba(197, 160, 89, 0.25); /* El "resplandor" dorado, elemento de firma */

  /* ---------- TRANSICIONES ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* ============================================================
   RESET BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  margin: 0 0 var(--space-3) 0;
  letter-spacing: 0.02em;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--space-3) 0; color: var(--color-text-secondary); }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }

/* Foco visible para accesibilidad — nunca quitar el outline sin reemplazo */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ============================================================
   DIVISOR CON FIRMA DE MARCA
   ============================================================
   El gradiente dorado, no una línea plana. Se usa entre
   secciones del Home y antes del footer. Úsalo con moderación.
   ============================================================ */

.divider-gold {
  height: 1px;
  border: none;
  margin: var(--space-7) 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-accent) 50%,
    transparent 100%
  );
  opacity: 0.5;
}

/* ============================================================
   BOTONES
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  border: none;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-text-on-accent); /* texto oscuro, ver nota de accesibilidad arriba */
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ============================================================
   BADGE — decant / original / más vendido
   ============================================================ */

.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge-decant {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  border: 1px solid rgba(197, 160, 89, 0.3);
}

.badge-original {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.badge-bestseller {
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
}

.badge-unavailable {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-text-secondary);
  border: 1px dashed var(--color-border);
}

/* ============================================================
   TARJETA DE PRODUCTO
   ============================================================
   El componente más importante del sitio: no hay página de
   ficha de producto, así que esta tarjeta ES la decisión de
   compra completa.
   ============================================================ */

.product-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.product-card:hover {
  box-shadow: var(--shadow-glow);
  border-color: rgba(197, 160, 89, 0.4);
}

.product-card--unavailable {
  opacity: 0.82;
}

.product-card--unavailable:hover {
  box-shadow: none;
  border-color: var(--color-border);
}

.product-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-surface-raised); /* placeholder mientras carga la foto real */
  overflow: hidden;
  position: relative;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-card__floating-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  color: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.product-card__body {
  padding: var(--space-4);
}

.product-card__brand {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-1);
}

.product-card__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.product-card__badges {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* ---------- Selector de variante (tamaño/precio) ---------- */
/* Pills seleccionables, no <select> nativo — más rápido de tocar en móvil */

.variant-selector {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.variant-pill {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--fs-xs);
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.variant-pill[aria-pressed="true"] {
  border-color: var(--color-accent);
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

.variant-pill:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

.product-card__price-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--space-2);
}

.product-card__price {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.product-card__old-price {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  text-decoration: line-through;
}

.product-card__discount {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background-color: rgba(197, 160, 89, 0.16);
  color: var(--color-accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-card__savings {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
}

/* ============================================================
   CARRITO LATERAL
   ============================================================ */

.cart-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-overlay);
  z-index: 40;
}

.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background-color: var(--color-surface);
  border-left: 1px solid var(--color-border);
  z-index: 41;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
}

.cart-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   FORMULARIO DE CHECKOUT
   ============================================================ */

.form-field {
  margin-bottom: var(--space-4);
}

.form-field label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: var(--space-3);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-accent);
}

.checkout-transferencia {
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-raised);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.checkout-transferencia p {
  margin: 0 0 var(--space-2);
}

.checkout-transferencia p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   STATUS PILL — panel admin (estado de pedido)
   ============================================================ */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  background-color: var(--color-surface-raised);
}

.status-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}

.status-pendiente  { color: var(--color-status-pendiente); }
.status-preparando { color: var(--color-status-preparando); }
.status-enviado    { color: var(--color-status-enviado); }
.status-entregado  { color: var(--color-status-entregado); }

/* ============================================================
   CONTENEDOR
   ============================================================ */

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ============================================================
   NAVBAR
   ============================================================
   Sticky en móvil: el botón del carrito siempre visible,
   porque el comprador llega de Instagram y compra rápido.
   ============================================================ */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--space-4);
  background: rgba(10, 10, 12, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Compensa el espacio del navbar fijo en páginas públicas. */
#navbar-container + * {
  margin-top: 76px;
}

.navbar__logo {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: var(--color-text-primary);
  flex-shrink: 0;
  text-transform: uppercase;
}

.navbar__logo span {
  color: var(--color-accent);
}

.navbar__desktop-nav {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-left: 1rem;
  max-width: min(62vw, 680px);
}

.navbar__desktop-link {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--transition-fast);
  white-space: nowrap;
  padding: 2px 0;
}

.navbar__desktop-link:hover {
  color: var(--color-accent);
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-left: auto;
}

.navbar__menu-btn {
  display: inline-flex;
}

.navbar__admin-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.68rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

.navbar__admin-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background-color: rgba(197, 160, 89, 0.12);
}

.navbar__icon-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 6px;
  font-size: 1.05rem;
  line-height: 1;
  border-radius: 999px;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.navbar__icon-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-accent);
}

.navbar__cart-count {
  position: absolute;
  top: -4px;
  right: -8px;
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 9, 0.88);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
  z-index: 32;
}

.navbar-menu-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.navbar-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(330px, 92vw);
  padding: calc(var(--space-7) + var(--space-3)) var(--space-5) var(--space-5);
  background-color: var(--color-surface);
  background-image: linear-gradient(180deg, #1A1A1E 0%, #121214 100%);
  border-left: 1px solid var(--color-border);
  box-shadow: -24px 0 48px rgba(0, 0, 0, 0.45);
  transform: translateX(105%);
  transition: transform var(--transition-base);
  z-index: 33;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.navbar-menu.is-visible {
  transform: translateX(0);
}

.navbar-menu__link {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: 0.02em;
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.navbar-menu__link:hover {
  color: var(--color-accent-hover);
}

.navbar-menu__socials {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

.navbar-menu__social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--fs-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.navbar-menu__social-link svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}

.navbar-menu__social-link:last-child svg {
  fill: currentColor;
  stroke: none;
}

@media (min-width: 768px) {
  .navbar__desktop-nav {
    display: flex;
  }

  .navbar__menu-btn {
    display: none;
  }
}

@media (max-width: 767px) {
  .navbar {
    padding: 12px var(--space-4);
  }
}

@media (max-width: 640px) {
  .navbar__actions {
    gap: var(--space-3);
  }

  .navbar__admin-link {
    padding: 5px 8px;
    font-size: 11px;
    letter-spacing: 0.04em;
  }
}

/* ============================================================
   HERO
   ============================================================
   El "thesis" de la página: el resplandor dorado sobre fondo
   oscuro que ya define el logo, ahora como atmósfera de fondo.
   ============================================================ */

.hero {
  position: relative;
  background-color: var(--color-surface);
  min-height: min(620px, 68vh);
  display: grid;
  place-items: center;
  align-content: center;
  padding: var(--space-8) var(--space-4);
  text-align: center;
  overflow: hidden;
}

.hero__image,
.hero__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__image {
  object-fit: cover;
  object-position: center 58%;
  z-index: 0;
  transition: opacity 350ms ease;
}

.hero__image--changing {
  opacity: 0.2;
}

.hero__scrim {
  background-color: rgba(10, 10, 11, 0.68);
  z-index: 1;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin: var(--space-4);
  pointer-events: none;
  z-index: 2;
}

.hero__eyebrow {
  position: relative;
  z-index: 3;
  font-size: var(--fs-xs);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: var(--space-3);
}

.hero__title {
  position: relative;
  z-index: 3;
  /* clamp: nunca baja de 28px ni sube de 48px, escala según
     el ancho de pantalla — evita que se vea apretado en
     celulares de 320-360px sin perder impacto en desktop */
  font-size: clamp(1.75rem, 5vw + 1rem, var(--fs-2xl));
  margin-bottom: var(--space-3);
}

.hero__subtitle {
  position: relative;
  z-index: 3;
  max-width: 480px;
  margin: 0 auto var(--space-6) auto;
  font-size: var(--fs-base);
}

.hero > .btn {
  position: relative;
  z-index: 3;
}

@media (max-width: 640px) {
  .hero {
    min-height: min(560px, 72vh);
    padding: var(--space-7) var(--space-4);
  }

  .hero__image {
    object-position: 62% center;
  }

  .hero::before {
    margin: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__image {
    transition: none;
  }
}

/* ============================================================
   SECCIÓN — título + ver todo
   ============================================================ */

.section {
  padding: var(--space-7) 0;
}

.section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.section__title {
  margin: 0;
}

.section__link {
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* ============================================================
   TARJETA DE CATEGORÍA
   ============================================================ */

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.category-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: flex-end;
  padding: var(--space-3);
  cursor: pointer;
  transition: border-color var(--transition-base);
}

.category-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.category-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 40%, rgba(8, 8, 9, 0.85) 100%);
}

.category-card__label {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--color-text-primary);
}

.category-card:hover {
  border-color: var(--color-accent);
}

/* En móvil, las categorías se apilan en una sola columna ancha
   en vez de comprimirse a un tercio del ancho de pantalla */
@media (max-width: 480px) {
  .category-grid {
    grid-template-columns: 1fr;
  }
  .category-card {
    aspect-ratio: 16 / 9;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-7) var(--space-4);
  text-align: center;
}

.footer__logo {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  margin-bottom: var(--space-2);
}

.footer__tagline {
  font-size: var(--fs-sm);
  margin-bottom: var(--space-5);
}

.footer__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__meta {
  margin-top: var(--space-6);
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  opacity: 0.6;
}

/* ============================================================
   PROPUESTA DE VALOR — "Por qué elegirnos"
   ============================================================
   Resuelve la objeción de confianza de un comprador nuevo,
   antes de que vea un solo producto.
   ============================================================ */

.value-props {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.value-prop {
  text-align: center;
  padding: var(--space-4);
}

.value-prop__icon {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--space-3) auto;
  color: var(--color-accent);
}

.value-prop__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.value-prop__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.value-prop__desc {
  font-size: var(--fs-sm);
  margin: 0;
}

@media (max-width: 640px) {
  .value-props {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ============================================================
   Para dudas previas a la compra (¿es original?, ¿tienen tal
   fragancia?). No reemplaza el flujo de checkout — es un canal
   paralelo, igual que en la operación real del negocio hoy.
   ============================================================ */

.whatsapp-float {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 35;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card), 0 0 0 0 rgba(197, 160, 89, 0.4);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.whatsapp-float:hover {
  background-color: var(--color-accent-hover);
  transform: scale(1.05);
}

.whatsapp-float svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

/* ============================================================
   BLOQUE DE INSTAGRAM
   ============================================================
   Prueba social real: enlaza al perfil activo del negocio en
   vez de inventar reseñas. Las imágenes aquí son temporales
   (placeholder) hasta integrar el feed real o fotos del dueño.
   ============================================================ */

.instagram-section {
  text-align: center;
}

.instagram-section__handle {
  font-size: var(--fs-sm);
  margin-bottom: var(--space-4);
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.instagram-grid__item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: block;
}

.instagram-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.instagram-grid__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-bg);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.instagram-grid__item:hover::after {
  opacity: 0.3;
}

/* ============================================================
   TESTIMONIOS
   ============================================================ */

.testimonios__intro {
  margin-bottom: var(--space-5);
}

.testimonios__layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: var(--space-5);
}

.testimonio-form {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.testimonio-form__status {
  display: block;
  margin-top: var(--space-3);
  color: var(--color-accent);
  font-size: var(--fs-sm);
}

.testimonios__lista {
  display: grid;
  gap: var(--space-3);
}

.testimonio-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.testimonio-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.testimonio-card__nombre {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--color-text-primary);
}

.testimonio-card__rating {
  color: var(--color-accent-hover);
  letter-spacing: 0.1em;
  font-size: var(--fs-sm);
}

.testimonio-card__texto {
  margin: 0;
  color: var(--color-text-secondary);
}

@media (max-width: 640px) {
  .testimonios__layout {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   GRID DE PRODUCTOS
   ============================================================
   Usado en Home (destacados) y Catálogo. En móvil forzamos
   2 columnas fijas en vez de dejar que auto-fill decida —
   así el usuario ve el catálogo como cuadrícula desde el
   primer scroll, no una sola columna de tarjetas gigantes.
   ============================================================ */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}

@media (max-width: 560px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .product-card__body {
    padding: var(--space-3);
  }

  .product-card__name {
    font-size: var(--fs-sm);
  }

  .product-card__price {
    font-size: var(--fs-base);
  }

  .variant-pill {
    padding: 4px var(--space-2);
  }
}
/* ============================================================
   SKELETON LOADER
   ============================================================
   Tarjetas "fantasma" mientras Supabase responde. Usa el mismo
   tamaño y forma que .product-card para que no haya "salto" de
   layout cuando los datos reales se renderizan.
   ============================================================ */

.skeleton-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.skeleton-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-surface-raised);
}

.skeleton-card__body {
  padding: var(--space-4);
}

.skeleton-line {
  height: 12px;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-raised);
  margin-bottom: var(--space-3);
}

.skeleton-line--short  { width: 40%; }
.skeleton-line--medium { width: 70%; }
.skeleton-line--long   { width: 55%; height: 20px; }

/* Pulso sutil dorado — coherente con --shadow-glow del resto del sitio */
.skeleton-card__image,
.skeleton-line {
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
/* ============================================================
   CATÁLOGO — encabezado
   ============================================================ */

.catalog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
}

.catalog-empty {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  color: var(--color-text-secondary);
}

.catalog-load-more {
  display: flex;
  justify-content: center;
  padding: var(--space-6) 0;
}

/* ============================================================
   PANEL DE FILTROS (bottom sheet)
   ============================================================
   Sube desde abajo, no modal centrado — más fácil de alcanzar
   con el pulgar en una mano, mismo principio que el carrito
   lateral pero desde la base de la pantalla.
   ============================================================ */

.filter-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-overlay);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.filter-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.filter-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 85vh;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  z-index: 51;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--transition-base);
}

.filter-panel.is-visible {
  transform: translateY(0);
}

.filter-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.filter-panel__header h3 {
  margin: 0;
}

.filter-panel__close {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--fs-lg);
  cursor: pointer;
  line-height: 1;
}

.filter-panel__body {
  padding: var(--space-5);
  overflow-y: auto;
}

.filter-panel__footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
}

.filter-panel__footer .btn {
  flex: 1;
}

.filter-group {
  margin-bottom: var(--space-6);
}

.filter-group__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-pill {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-pill[aria-pressed="true"] {
  border-color: var(--color-accent);
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

.filter-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-primary);
  cursor: pointer;
}

.filter-checkbox input {
  accent-color: var(--color-accent);
  width: 18px;
  height: 18px;
}
/* ============================================================
   TARJETA DE PRODUCTO — altura uniforme
   ============================================================
   El grid ya iguala el alto de las tarjetas de una misma fila
   (comportamiento por defecto de CSS Grid). Estas reglas hacen
   que cada tarjeta aproveche ese alto disponible como un
   contenedor flexible, y que el botón "Agregar al carrito"
   siempre quede pegado al fondo, sin importar si el nombre del
   perfume ocupa una o dos líneas.
   ============================================================ */

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Reserva siempre el espacio de 2 líneas para el nombre, y corta
   con "…" si el nombre es más largo — así todas las tarjetas
   arrancan su badge/precio/botón desde la misma altura, no solo
   el botón. */
.product-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--fs-md) * 1.3 * 2);
}

/* Empuja el botón al fondo de la tarjeta, sin importar cuánto
   contenido haya arriba (nombre largo, más variantes, etc.) */
.product-card__body > .btn {
  margin-top: auto;
}

/* ============================================================
   NAVBAR — logo como link
   ============================================================
   El logo ahora es un <a> (navega a Home), pero visualmente no
   debe verse como un link normal — sin subrayado, sin cambio
   de color al hover, es parte de la identidad de marca, no un
   link de navegación cualquiera.
   ============================================================ */

.navbar__logo {
  text-decoration: none;
}

.navbar__logo:hover {
  color: var(--color-text-primary);
}
/* ============================================================
   CARRITO LATERAL — mostrar/ocultar
   ============================================================
   Las clases base (.cart-overlay, .cart-panel, .cart-item,
   .cart-total-row) ya existían desde Fase 3, pero les faltaba
   el mecanismo de mostrar/ocultar — por defecto ahora quedan
   fuera de pantalla, con la misma técnica que ya usamos en el
   panel de filtros del Bloque 4.
   ============================================================ */

.cart-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.cart-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.cart-panel {
  transform: translateX(100%);
  transition: transform var(--transition-base);
}

.cart-panel.is-visible {
  transform: translateX(0);
}

.cart-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.cart-panel__header h3 {
  margin: 0;
}

.cart-panel__close {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--fs-lg);
  cursor: pointer;
  line-height: 1;
}

.cart-panel__body {
  flex: 1;
  overflow-y: auto;
}

.cart-empty {
  text-align: center;
  color: var(--color-text-secondary);
  padding: var(--space-6) 0;
}

.cart-item img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-raised);
  flex-shrink: 0;
}

.cart-item__info {
  flex: 1;
  min-width: 0; /* permite que el texto largo trunque en vez de desbordar */
}

.cart-item__brand {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cart-item__name {
  font-size: var(--fs-sm);
  color: var(--color-text-primary);
  margin: var(--space-1) 0;
}

.cart-item__price {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.cart-item__quantity {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.qty-btn {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: var(--fs-sm);
  line-height: 1;
}

.qty-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.cart-item__remove {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-sm);
  opacity: 0.6;
}

.cart-item__remove:hover {
  opacity: 1;
}
/* ============================================================
   NAVBAR — ícono del carrito como SVG
   ============================================================
   Mismo lenguaje visual que los íconos de "Por qué elegirnos"
   y el de WhatsApp: trazo fino, sin relleno, hereda el color
   del texto (currentColor) para que funcione igual en hover.
   ============================================================ */

.navbar__icon-svg {
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* ============================================================
   BARRA DE BÚSQUEDA (slide-down)
   ============================================================
   Desplegable debajo del navbar, oculta por defecto. Usa
   max-height en vez de display:none para poder animar la
   transición — igual de "elegante" que un fade, pero funciona
   con contenido de altura variable.
   ============================================================ */

.search-bar {
  max-height: 0;
  overflow: hidden;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  transition: max-height var(--transition-base);
}

.search-bar.is-visible {
  max-height: 72px;
}

.search-bar__form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  max-width: 1100px;
  margin: 0 auto;
}

.search-bar__icon {
  flex-shrink: 0;
  stroke: var(--color-text-secondary);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.search-bar__input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  outline: none;
}

.search-bar__input::placeholder {
  color: var(--color-text-secondary);
}

.search-bar__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--fs-base);
  cursor: pointer;
  line-height: 1;
}

/* ============================================================
   INDICADOR DE BÚSQUEDA ACTIVA (en Catálogo)
   ============================================================ */

.catalog-search-indicator {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  padding-bottom: var(--space-4);
}

.catalog-search-indicator a {
  color: var(--color-accent);
}
/* ============================================================
   CHECKOUT
   ============================================================ */

.checkout-header {
  padding-bottom: var(--space-4);
}

.shipping-progress {
  display: grid;
  gap: var(--space-2);
  max-width: 960px;
  margin: 0 auto var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-accent-soft), var(--color-surface));
  color: var(--color-text-primary);
}

.shipping-progress__copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.shipping-progress__copy span,
.shipping-progress--pickup span {
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
}

.shipping-progress__track {
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--color-border);
}

.shipping-progress__track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-color: var(--color-accent);
  transition: width var(--transition-base);
}

.shipping-progress--unlocked {
  border-color: var(--color-accent-hover);
}

.shipping-progress--pickup {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

@media (max-width: 640px) {
  .shipping-progress {
    margin-bottom: var(--space-3);
  }

  .shipping-progress__copy,
  .shipping-progress--pickup {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }
}

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: var(--space-7);
}

@media (min-width: 768px) {
  .checkout-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.checkout-summary,
.checkout-form-section {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.checkout-summary__title {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-4);
}

.checkout-summary .cart-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.checkout-summary .cart-item img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.checkout-summary .cart-item__name {
  overflow-wrap: anywhere;
}

.checkout-summary .cart-total-row {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
}

.checkout-total-line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.checkout-total-line--grand {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  font-size: var(--fs-lg);
}

@media (max-width: 767px) {
  .checkout-header {
    padding-top: var(--space-6);
  }

  .checkout-layout {
    gap: var(--space-4);
    padding-bottom: var(--space-6);
  }

  .checkout-summary,
  .checkout-form-section {
    padding: var(--space-4);
  }
}

.checkout-error {
  background-color: rgba(197, 89, 89, 0.1);
  border: 1px solid rgba(197, 89, 89, 0.3);
  color: #E58F8F;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-4);
}

.checkout-success {
  text-align: center;
  padding: var(--space-8) var(--space-4);
}

.checkout-success h2 {
  margin-bottom: var(--space-3);
}

.checkout-success p {
  max-width: 480px;
  margin: 0 auto var(--space-5) auto;
}

.checkout-success__order {
  color: var(--color-text-primary);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.checkout-success__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}

.checkout-success__actions .btn {
  min-width: 260px;
}

.checkout-success--floating {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-5);
  z-index: 80;
  width: min(420px, calc(100vw - var(--space-6)));
  background-color: var(--color-surface-raised);
  border: 1px solid rgba(197, 160, 89, 0.45);
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  animation: checkout-toast-in 240ms ease-out;
  text-align: left;
}

.checkout-success--floating h2 {
  margin-bottom: var(--space-2);
}

.checkout-success--floating p {
  margin: 0 0 var(--space-3) 0;
  max-width: none;
}

@keyframes checkout-toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .checkout-success--floating {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    width: auto;
    padding: var(--space-4);
  }
}
/* ============================================================
   CONFIRMACIÓN DE PEDIDO
   ============================================================ */

.confirmacion-section {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.confirmacion-contenido {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.confirmacion-contenido h2 {
  margin-bottom: var(--space-3);
}

.confirmacion-contenido p {
  margin-bottom: var(--space-5);
}
/* ============================================================
   PANEL DE ADMINISTRACIÓN — layout base
   ============================================================ */

.admin-header {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-surface);
  z-index: 30;
}

.admin-header__logo {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: 0.05em;
}

.admin-header__logo span {
  color: var(--color-accent);
}

.admin-content {
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
}

.admin-header__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-width: 0;
}

.admin-header__menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.admin-header__menu-toggle span {
  width: 18px;
  height: 1px;
  background-color: var(--color-text-primary);
  transition: transform var(--transition-base), opacity var(--transition-base);
  transform-origin: center;
}

.admin-header.is-menu-open .admin-header__menu-toggle {
  border-color: var(--color-accent);
  background-color: var(--color-accent-soft);
}

.admin-header.is-menu-open .admin-header__menu-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.admin-header.is-menu-open .admin-header__menu-toggle span:nth-child(2) {
  opacity: 0;
}

.admin-header.is-menu-open .admin-header__menu-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.admin-header__logout {
  flex-shrink: 0;
}

/* ============================================================
   LOGIN DEL ADMIN
   ============================================================ */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.login-card__logo {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  text-align: center;
  margin-bottom: var(--space-1);
}

.login-card__logo span {
  color: var(--color-accent);
}

.login-card__subtitle {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.password-input-wrap {
  position: relative;
}

.password-input-wrap input {
  padding-right: 44px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.password-toggle:hover {
  color: var(--color-accent);
  background-color: rgba(197, 160, 89, 0.08);
}

.password-toggle:focus-visible {
  outline-offset: 1px;
}

.password-toggle__icon {
  display: inline-flex;
  line-height: 0;
}
/* ============================================================
   NAVEGACIÓN DEL PANEL
   ============================================================ */

.admin-nav {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.admin-nav__link {
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.admin-nav__link.is-active {
  color: var(--color-accent);
}

@media (max-width: 900px) {
  .admin-header {
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
  }

  .admin-header__logo {
    font-size: var(--fs-md);
    line-height: 1.2;
  }

  .admin-header__menu-toggle {
    display: inline-flex;
  }

  .admin-header__panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
  }

  .admin-header.is-menu-open .admin-header__panel {
    display: flex;
  }

  .admin-nav {
    flex-direction: column;
    gap: var(--space-2);
  }

  .admin-nav__link {
    display: block;
    padding: var(--space-2) 0;
  }

  .admin-header__logout {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .admin-header {
    padding: var(--space-3) var(--space-4);
  }

  .admin-header__logo {
    font-size: 1rem;
    letter-spacing: 0.03em;
  }

  .admin-header__panel {
    padding: var(--space-4);
  }

  .admin-nav__link {
    font-size: var(--fs-xs);
  }
}

/* ============================================================
   LISTA DE PRODUCTOS (ADMIN)
   ============================================================ */

.admin-productos-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-7);
}

.admin-product-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.admin-product-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.admin-product-card__header img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-raised);
  flex-shrink: 0;
}

.admin-product-card__info {
  flex: 1;
  min-width: 0;
}

.admin-product-card__info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}

.admin-product-card__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.admin-product-card__field span {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-product-card__field--full {
  grid-column: 1 / -1;
}

.admin-product-card__input,
.admin-product-card__select,
.admin-product-card__textarea {
  width: 100%;
  padding: var(--space-2);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}

.admin-product-card__textarea {
  resize: vertical;
  min-height: 56px;
}

.admin-product-card__brand {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-product-card__name {
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
}

.admin-product-card__category {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}

.admin-product-card__active {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  white-space: nowrap;
  flex-shrink: 0;
}

.admin-product-card__variants {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.admin-variant-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(90px, 0.9fr) minmax(90px, 0.9fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-surface-raised);
  border-radius: var(--radius-sm);
}

.admin-variant-row__label {
  flex: 1;
  font-size: var(--fs-sm);
}

.admin-variant-row__price,
.admin-variant-row__discount {
  width: 100%;
  padding: var(--space-2);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-body);
}

.admin-variant-row__discount-field,
.admin-variant-form-row__discount-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.admin-variant-row__discount-label,
.admin-variant-form-row__discount-label {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-variant-row__discount:disabled {
  opacity: 0.6;
}

.admin-variant-row__available {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.admin-product-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.admin-product-card__status {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
/* ============================================================
   SUBIDA DE IMAGEN (ADMIN)
   ============================================================ */

.admin-product-card__image-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.admin-product-card__thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-raised);
}

.admin-product-card__upload-label {
  font-size: 10px;
  color: var(--color-accent);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

.admin-product-card__upload-label:hover {
  color: var(--color-accent-hover);
}

@media (max-width: 860px) {
  .admin-product-card__header {
    flex-wrap: wrap;
  }

  .admin-product-card__active {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  .admin-product-card__info-grid {
    grid-template-columns: 1fr;
  }

  .admin-product-card__active {
    justify-content: flex-start;
  }
}
/* ============================================================
   FORMULARIO DE NUEVO PRODUCTO
   ============================================================ */

.admin-form {
  max-width: 640px;
}

.admin-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .admin-form__row {
    grid-template-columns: 1fr;
  }
}

.admin-form textarea {
  width: 100%;
  padding: var(--space-3);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  resize: vertical;
}

.admin-form__subtitle {
  font-size: var(--fs-md);
  margin-bottom: var(--space-4);
}

/* ============================================================
   NUEVO PEDIDO — ADMIN
   ============================================================ */

.admin-order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: var(--space-5);
  align-items: start;
}

.admin-order-panel {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.admin-order-panel__header,
.admin-order-total,
.admin-order-item,
.admin-order-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.admin-order-panel__meta,
.admin-order-result__brand,
.admin-order-result__stock,
.admin-order-item span,
.admin-order-item small {
  display: block;
  color: var(--color-text-secondary);
  font-size: var(--fs-xs);
}

.admin-order-search input,
.admin-order-filters select,
.admin-order-item__quantity {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font: inherit;
}

.admin-order-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-4);
}

.admin-order-results,
.admin-order-items {
  display: grid;
  gap: var(--space-2);
}

.admin-order-result,
.admin-order-item {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.admin-order-result > div,
.admin-order-item > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-order-result__add,
.admin-order-item__remove {
  flex: 0 0 auto;
}

.admin-order-item__quantity {
  width: 76px;
  flex: 0 0 76px;
}

.admin-order-item__remove {
  background: none;
  border: 0;
  color: var(--color-text-secondary);
  cursor: pointer;
  font: inherit;
}

.admin-order-item__remove:hover {
  color: #E58F8F;
}

.admin-order-total {
  border-top: 1px solid var(--color-border);
  margin: var(--space-4) 0;
  padding-top: var(--space-4);
  font-size: var(--fs-md);
}

.admin-order-empty {
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 840px) {
  .admin-order-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .admin-order-panel {
    padding: var(--space-4);
  }

  .admin-order-filters {
    grid-template-columns: 1fr 1fr;
  }

  .admin-order-result,
  .admin-order-item {
    align-items: flex-start;
  }
}

.admin-variant-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(90px, 0.9fr) minmax(90px, 0.9fr) auto auto;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-3);
}

.admin-variant-form-row input[type="text"],
.admin-variant-form-row input[type="number"],
.admin-variant-form-row select {
  padding: var(--space-2);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  width: 100%;
}

.variante-available {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.variante-quitar {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--fs-sm);
}

.variante-quitar:hover {
  color: #E58F8F;
}

@media (max-width: 640px) {
  .admin-variant-form-row {
    grid-template-columns: 1fr 1fr;
  }
}
/* ============================================================
   LISTA DE PEDIDOS (ADMIN)
   ============================================================ */

.admin-pedidos-filtro {
  margin-bottom: var(--space-5);
}

.admin-pedidos-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-7);
}

.admin-pedido-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.admin-pedido-card__resumen {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  cursor: pointer;
}

.admin-pedido-card__cliente {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.admin-pedido-card__fecha {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}

.admin-pedido-card__total {
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.admin-pedido-card__toggle {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--fs-md);
}

.admin-pedido-card__detalle {
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border);
}

.admin-pedido-card__detalle p {
  font-size: var(--fs-sm);
  margin: var(--space-2) 0;
}

.admin-pedido-items {
  margin: var(--space-4) 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.admin-pedido-item {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  padding: var(--space-1) 0;
}

.admin-pedido-card__acciones {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.admin-pedido-card__status-select {
  padding: var(--space-2);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-body);
}

.admin-pedido-card__estado-guardado {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
/* ============================================================
   FILA DE VARIANTE NUEVA (dentro de una tarjeta existente)
   ============================================================ */

.admin-variant-row--nueva {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(90px, 0.9fr) minmax(90px, 0.9fr) auto auto;
  gap: var(--space-2);
}

.admin-variant-row__size,
.admin-variant-row__type {
  padding: var(--space-2);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  width: 100%;
}

.admin-variant-row__quitar {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--fs-sm);
}

.admin-variant-row__quitar:hover {
  color: #E58F8F;
}

.admin-product-card__agregar-variante {
  margin-bottom: var(--space-4);
}

@media (max-width: 640px) {
  .admin-variant-row {
    grid-template-columns: 1fr 1fr;
  }

  .admin-variant-row__available {
    grid-column: 1 / -1;
  }

  .admin-variant-row--nueva {
    grid-template-columns: 1fr 1fr;
  }

  .admin-variant-row--nueva .admin-variant-row__available {
    grid-column: 1 / span 1;
  }
}
/* ============================================================
   CATEGORÍAS Y MARCAS (ADMIN)
   ============================================================ */

.admin-cat-marca-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

@media (max-width: 640px) {
  .admin-cat-marca-grid {
    grid-template-columns: 1fr;
  }
}

.admin-panel-section {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.admin-simple-list {
  list-style: none;
  margin: 0 0 var(--space-5) 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
}

.admin-simple-list li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}

.admin-slug {
  color: var(--color-text-secondary);
  font-size: var(--fs-xs);
}

.admin-inline-form {
  display: flex;
  gap: var(--space-2);
}

.admin-inline-form input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-body);
}
/* ============================================================
   BÚSQUEDA DE PRODUCTOS (ADMIN)
   ============================================================ */

.admin-search-bar {
  margin-bottom: var(--space-5);
}

.admin-search-bar input {
  width: 100%;
  max-width: 420px;
  padding: var(--space-3);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
}

/* ============================================================
   MARCAS (PÚBLICO)
   ============================================================ */

.marcas-header {
  padding-bottom: var(--space-4);
}

.marcas-header__desc {
  margin: 0;
}

.marcas-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-5);
}

.marcas-panel {
  align-self: start;
}

.marcas-search-bar {
  margin-bottom: var(--space-3);
}

.marcas-search-bar input {
  max-width: none;
}

.marcas-lista {
  margin-bottom: 0;
}

.marcas-lista__btn {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  padding: var(--space-1) 0;
  cursor: pointer;
  font-size: var(--fs-sm);
}

.marcas-lista__btn.is-active {
  color: var(--color-accent);
}

.marcas-result-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  gap: var(--space-3);
}

.marcas-result-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.marcas-productos {
  padding-bottom: var(--space-4);
}

@media (max-width: 900px) {
  .marcas-layout {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   TESTIMONIOS (ADMIN)
   ============================================================ */

.admin-testimonios-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-7);
}

.admin-testimonio-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.admin-testimonio-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.admin-testimonio-card__name {
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
}

.admin-testimonio-card__meta {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}

.admin-testimonio-card__text {
  margin: 0;
}

.admin-testimonio-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
}

.admin-testimonios-filtros {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  align-items: center;
}

.admin-testimonios-filtros__select {
  padding: var(--space-3);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}

.admin-testimonios-acciones {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.admin-testimonios-acciones__status {
  font-size: var(--fs-sm);
  color: var(--color-accent);
}

.admin-testimonios-acciones__status.is-error {
  color: #E58F8F;
}

.admin-testimonios-paginacion {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.admin-testimonios-paginacion .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .marcas-result-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .marcas-result-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .admin-testimonios-filtros {
    grid-template-columns: 1fr;
  }

  .admin-testimonios-acciones {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-testimonios-paginacion {
    justify-content: space-between;
  }

  .admin-testimonio-card__head {
    flex-direction: column;
    gap: var(--space-2);
  }
}
/* ============================================================
   DASHBOARD (ADMIN)
   ============================================================ */

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@media (max-width: 640px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
  }
}

.admin-stat-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
}

.admin-stat-card__value {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.admin-stat-card__label {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

.admin-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  padding-bottom: var(--space-7);
}

@media (max-width: 900px) {
  .admin-charts-grid {
    grid-template-columns: 1fr;
  }
}

.admin-chart-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
/* ============================================================
   DASHBOARD (ADMIN)
   ============================================================ */

.admin-metricas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

@media (max-width: 768px) {
  .admin-metricas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.admin-metrica-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.admin-metrica-card__label {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.admin-metrica-card__valor {
  font-size: var(--fs-xl);
  font-family: var(--font-display);
  color: var(--color-accent);
}

.admin-graficas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .admin-graficas-grid {
    grid-template-columns: 1fr;
  }
}

.admin-grafica-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
/* ============================================================
   CONFIGURACIÓN (ADMIN)
   ============================================================ */

.admin-form__ayuda {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}

.admin-form__status {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

/* ============================================================
   GUÍA / AYUDA (ADMIN)
   ============================================================
   Página de ayuda para el dueño del negocio, sin jerga técnica.
   Usa <details>/<summary> nativos: se abren y cierran sin JS,
   funcionan bien con lectores de pantalla y en móvil no hay
   riesgo de que un script falle y la deje "rota".
   ============================================================ */

.ayuda-intro {
  color: var(--color-text-secondary);
  font-size: var(--fs-md);
  line-height: 1.6;
  margin-bottom: var(--space-6);
  max-width: 60ch;
}

.ayuda-grupo {
  margin-bottom: var(--space-7);
}

.ayuda-grupo__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.ayuda-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.ayuda-item__pregunta {
  padding: var(--space-4) var(--space-5);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--color-text-primary);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.ayuda-item__pregunta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.ayuda-item__pregunta::-webkit-details-marker {
  display: none;
}

.ayuda-item__pregunta::after {
  content: '+';
  font-size: var(--fs-lg);
  color: var(--color-accent);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.ayuda-item[open] .ayuda-item__pregunta::after {
  transform: rotate(45deg);
}

.ayuda-item__respuesta {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--fs-base);
  line-height: 1.7;
}

.ayuda-item__respuesta ol,
.ayuda-item__respuesta ul {
  margin: var(--space-3) 0;
  padding-left: var(--space-5);
}

.ayuda-item__respuesta li {
  margin-bottom: var(--space-2);
}

.ayuda-item__respuesta strong {
  color: var(--color-text-primary);
}

.ayuda-alerta {
  background: var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

.ayuda-alerta strong {
  color: var(--color-text-primary);
}

.ayuda-contacto {
  background: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  margin-top: var(--space-7);
}

.ayuda-contacto p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}