/* CASTAMOTO — Sistema de diseño (sección 1 del prompt maestro: negro/amarillo,
   bordes redondeados, sombras discretas, mobile-first, buen contraste).

   Modo claro/oscuro: la identidad de marca (--amarillo y derivados) y los dos
   tokens de CONTRASTE FIJO (--negro para texto sobre amarillo/blanco, --fondo
   para el fondo de página) no cambian de rol entre temas — lo que cambia es
   la superficie (tarjetas, inputs, header), el borde y el texto secundario/
   principal, redefinidos en el bloque [data-theme="light"] más abajo.
   Por defecto el sitio es oscuro (el estilo que pide el prompt maestro);
   el botón de tema (ver layout.js) guarda la preferencia del usuario en
   localStorage y la aplica antes de pintar la página (ver theme-init.js). */
:root {
  /* Fijos: no cambian entre temas */
  --negro: #0d0d0d;
  --amarillo: #f4c430;
  --amarillo-oscuro: #d1a512;
  --amarillo-suave: #fde9a8;
  --exito: #2fb344;
  --exito-fondo: rgba(47, 179, 68, 0.15);
  --error: #e5484d;
  --error-fondo: rgba(229, 72, 77, 0.15);

  /* Variables por tema (valores por defecto = tema oscuro) */
  --fondo: #0d0d0d;
  --negro-suave: #161616;
  --gris-oscuro: #1e1e1e;
  --gris-borde: #2c2c2c;
  --gris-borde-fuerte: #3a3a3a;
  --gris-texto: #b3b3b3;
  --gris-texto-tenue: #7a7a7a;
  --blanco: #ffffff;
  /* Superficie donde vive la FOTO del producto: más clara que el resto de la
     tarjeta (como el blanco de estudio de fotografía de un marketplace real)
     para que la imagen destaque en vez de fundirse con el fondo de la tarjeta. */
  --superficie-imagen: #232323;

  --radio: 10px;
  --radio-sm: 6px;
  --radio-lg: 14px;
  --sombra: 0 4px 16px rgba(0, 0, 0, 0.35);
  --sombra-card: 0 1px 3px rgba(0, 0, 0, 0.4);
  --sombra-card-hover: 0 12px 28px rgba(0, 0, 0, 0.5);
  --sombra-header: 0 2px 12px rgba(0, 0, 0, 0.45);
  --fuente:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --header-height: 68px;
}

/* Tema claro: mismo negro/amarillo de marca, superficies e inversión de texto
   claras. --negro se mantiene fijo (sigue siendo el texto sobre amarillo/blanco).
   Grises NEUTROS (no beige) sobre fondo gris claro y tarjetas blanco puro —
   la estructura de color que usan los marketplaces grandes en su modo claro
   (fondo de página gris, tarjetas blancas, texto casi negro), aplicada con
   nuestra propia paleta negro/amarillo encima. */
[data-theme="light"] {
  --fondo: #ebebeb;
  --negro-suave: #f5f5f5;
  --gris-oscuro: #ffffff;
  --gris-borde: #e3e3e3;
  --gris-borde-fuerte: #cccccc;
  --gris-texto: #636363;
  --gris-texto-tenue: #949494;
  --blanco: #1a1a1a;
  --superficie-imagen: #ffffff;
  --sombra: 0 4px 16px rgba(0, 0, 0, 0.08);
  --sombra-card: 0 1px 2px rgba(0, 0, 0, 0.1);
  --sombra-card-hover: 0 8px 24px rgba(0, 0, 0, 0.14);
  --sombra-header: 0 1px 4px rgba(0, 0, 0, 0.08);
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--fuente);
  background: var(--fondo);
  color: var(--blanco);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}
/* El reset de arriba (display:block, regla de autor) le gana al display:none
   del atributo [hidden] del navegador (UA vs autor: gana autor aunque tenga
   menos especificidad) — sin esto, cualquier <img hidden> del sitio se
   seguiría viendo. Ver perfil.html/perfil.js. */
img[hidden] {
  display: none;
}
button {
  font-family: inherit;
  cursor: pointer;
}
input,
select,
textarea {
  font-family: inherit;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fondo);
  border-bottom: 2px solid var(--amarillo);
  box-shadow: var(--sombra-header);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-height);
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--amarillo);
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.site-header__logo img {
  height: 80px;
  width: auto;
}

.site-header__search {
  flex: 1;
  min-width: 0;
  max-width: 640px;
}
.site-header__search form {
  display: flex;
  border-radius: 999px;
  overflow: hidden;
  /* Blanco fijo a propósito (no var(--blanco), que en tema claro pasa a ser
     texto oscuro): la barra de búsqueda siempre necesita alto contraste con
     texto oscuro encima, en los dos temas. */
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--gris-borde);
}
.site-header__search input {
  flex: 1;
  min-width: 0;
  border: none;
  padding: 12px 18px;
  background: transparent;
  color: var(--negro);
  font-size: 0.95rem;
}
.site-header__search input::placeholder {
  color: var(--gris-texto-tenue);
}
.site-header__search input:focus {
  outline: none;
}
.site-header__search button {
  border: none;
  padding: 0 20px;
  background: var(--amarillo);
  color: var(--negro);
  font-weight: 700;
  font-size: 1.05rem;
  transition: background 0.15s ease;
}
.site-header__search button:hover {
  background: var(--amarillo-oscuro);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  position: relative;
}

/* Botón "☰" único (mobile): agrupa tema/idioma/notificaciones/favoritos/
   carrito/sesión en un solo dropdown en vez de una fila de íconos sueltos.
   Oculto en escritorio — ahí siguen visibles como siempre. */
.site-header__mobile-toggle {
  display: none;
}
/* "display: contents" en escritorio: el wrapper desaparece del layout y sus
   hijos (tema/idioma/etc.) actúan como si fueran flex items directos de
   .site-header__actions, IGUAL que antes de agregar el wrapper — cero
   cambio visual en desktop/tablet. Se pisa en la media query de mobile. */
.site-header__actions-menu {
  display: contents;
}
@media (max-width: 640px) {
  .site-header__mobile-toggle {
    display: flex;
  }
  .site-header__actions-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    position: absolute;
    z-index: 190;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    background: var(--gris-oscuro);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    pointer-events: none;
    transition:
      opacity 0.16s ease,
      transform 0.16s ease,
      visibility 0s linear 0.16s;
  }
  .site-header__actions-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition:
      opacity 0.16s ease,
      transform 0.16s ease;
  }
  .site-header__actions-menu .icon-btn,
  .site-header__actions-menu a.icon-btn,
  .site-header__actions-menu > a {
    width: 100%;
    justify-content: flex-start;
  }
  .site-header__actions-menu .notif-bell {
    width: 100%;
  }
  .site-header__actions-menu .notif-bell .icon-btn {
    width: 100%;
    justify-content: flex-start;
  }
  /* La campanita adentro del ☰ abre su propio panel flotando a la izquierda
     del drawer (que ya está pegado al borde derecho) — a la derecha se
     saldría de la pantalla. */
  .site-header__actions-menu .notif-panel {
    right: auto;
    left: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .site-header__actions-menu {
      transition: none;
    }
  }
}

.notif-bell {
  position: relative;
}

.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(340px, calc(100vw - 24px));
  max-height: 420px;
  background: var(--gris-oscuro);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 190;
}
/* Mismo problema que .assistant-panel[hidden] (ver más abajo, mismo motivo):
   sin esto "display: flex" de autor le gana al "display: none" de [hidden]. */
.notif-panel[hidden] {
  display: none;
}
.notif-panel__header {
  background: var(--negro);
  color: var(--amarillo);
  padding: 12px 14px;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.notif-panel__header button {
  background: none;
  border: none;
  color: var(--gris-texto);
  font-size: 0.72rem;
  text-decoration: underline;
  padding: 0;
}
.notif-panel__header button:hover {
  color: var(--amarillo);
}
.notif-panel__list {
  overflow-y: auto;
}
.notif-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--gris-borde);
  padding: 10px 14px;
  color: var(--blanco);
}
.notif-item:hover {
  background: var(--negro-suave);
}
.notif-item--unread {
  background: rgba(255, 193, 7, 0.06);
  border-left: 3px solid var(--amarillo);
}
.notif-item__title {
  font-weight: 700;
  font-size: 0.85rem;
}
.notif-item__message {
  font-size: 0.8rem;
  color: var(--gris-texto);
}
.notif-item__date {
  font-size: 0.7rem;
  color: var(--gris-texto-tenue);
  margin-top: 2px;
}

.icon-btn {
  position: relative;
  background: transparent;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-sm);
  color: var(--blanco);
  padding: 8px 10px;
  font-size: 0.85rem;
}
.icon-btn:hover {
  border-color: var(--amarillo);
  color: var(--amarillo);
}

.badge-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--amarillo);
  color: var(--negro);
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
/* Mismo problema que img[hidden]/.assistant-panel[hidden] (buscar esos
   comentarios): "display: flex" de autor le gana al "display: none" del
   atributo [hidden] — sin esto, el "0" del carrito vacío no se ocultaba. */
.badge-count[hidden] {
  display: none;
}

/* Header angosto (celular): el logo con imagen de 80px + texto "CASTAMOTO" +
   el botón "Iniciar sesión" son rígidos (flex-shrink: 0) y entre los tres
   nunca entraban en ~375px de ancho, empujando TODA la página a scrollear
   horizontalmente (no era culpa del WhatsApp ni del asistente flotantes —
   se probó quitándolos del DOM y el overflow seguía igual). Se achica el
   logo y se vuelve el botón de sesión ícono-solo para que todo entre. */
@media (max-width: 640px) {
  /* Con el logo achicado y los botones ícono-solo (abajo) ya entraban en una
     sola fila en la mayoría de los casos, PERO con varios íconos logueado
     (favoritos+carrito+Admin+Salir) el buscador quedaba comprimido a una
     tira casi invisible — sin espacio real para escribir. Se pasa el
     buscador a su propia fila completa en vez de competir por ancho. */
  :root {
    --header-height: 116px;
  }
  .site-header__bar {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 0;
    row-gap: 8px;
  }
  .site-header__search {
    order: 3;
    flex-basis: 100%;
    max-width: 100%;
  }
  .site-header__logo img {
    height: 40px;
  }
  .site-header__logo span {
    display: none;
  }
  /* Sin esto, .site-header__actions (ahora angosto: solo contiene el botón
     ☰) queda pegado al logo del lado izquierdo — el dropdown, anclado con
     "right: 0" a ESE contenedor angosto, se salía de la pantalla por la
     izquierda. Empujarlo al borde derecho de la fila lo deja donde
     cualquiera espera encontrar el menú hamburguesa. */
  .site-header__actions {
    margin-left: auto;
  }
  /* Nota: acá NO hay más reglas de "ícono-solo" para Salir/Admin/saludo —
     ahora viven dentro del drawer del ☰ (.site-header__actions-menu, ver
     más arriba), con espacio de sobra para el texto completo en su propia
     fila. Antes competían por ancho en una sola línea, por eso se recortaban. */
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--radio-sm);
  border: 1px solid transparent;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 0.9rem;
  transition:
    transform 0.1s ease,
    opacity 0.15s ease;
}
.btn:active {
  transform: translateY(1px);
}
.btn-primary {
  background: var(--amarillo);
  color: var(--negro);
  box-shadow: 0 2px 10px rgba(244, 196, 48, 0.25);
}
.btn-primary:hover {
  background: var(--amarillo-oscuro);
  box-shadow: 0 4px 14px rgba(244, 196, 48, 0.35);
}
.btn-secondary {
  background: var(--gris-oscuro);
  color: var(--blanco);
  border-color: var(--gris-borde);
}
.btn-secondary:hover {
  border-color: var(--amarillo);
}
/* Reutiliza el verde "--exito" ya existente en la paleta (no se agrega el
   verde de marca de WhatsApp ni ningún otro color de identidad de terceros). */
.btn-whatsapp {
  background: var(--exito);
  color: var(--blanco);
}
.btn-whatsapp:hover {
  filter: brightness(1.1);
}
.btn-danger {
  background: transparent;
  color: var(--error);
  border-color: var(--error);
}
.gps-fill-btn {
  width: 100%;
  margin: 4px 0 14px;
  font-size: 0.82rem;
}
.btn-danger:hover {
  background: var(--error-fondo);
}
.btn-block {
  width: 100%;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* --- Migas de pan --- */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--gris-texto-tenue);
  padding: 14px 0 0;
}
.breadcrumbs a {
  color: var(--gris-texto);
  transition: color 0.15s ease;
}
.breadcrumbs a:hover {
  color: var(--amarillo);
}
.breadcrumbs span[aria-current] {
  color: var(--blanco);
}

/* --- Layout con sidebar de filtros (listados de catálogo) --- */
.catalog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
@media (min-width: 860px) {
  .catalog-layout {
    grid-template-columns: 240px 1fr;
  }
}

.filters-sidebar {
  background: var(--gris-oscuro);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 18px;
}
.filters-sidebar h2 {
  font-size: 0.95rem;
  color: var(--amarillo);
  margin: 0 0 14px;
}
.filters-sidebar .form-group:last-child {
  margin-bottom: 0;
}
.filters-sidebar label {
  font-size: 0.8rem;
}
.filters-sidebar .form-group + h2,
.filters-sidebar h3 {
  font-size: 0.78rem;
  color: var(--gris-texto);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 16px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--gris-borde);
}
.filter-check-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}
.filter-check-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--gris-texto);
  cursor: pointer;
  margin: 0;
}
.filter-check-list label:hover {
  color: var(--blanco);
}
.filter-check-list input {
  width: auto;
  margin: 0;
  accent-color: var(--amarillo);
}

/* --- Nav de categorías --- */
/* Barra amarilla con dropdown "Categorías" + accesos curados, en vez de la
   lista plana de antes — mismo contraste fijo negro-sobre-amarillo que
   .btn-primary (ver --negro arriba: no cambia con el tema claro/oscuro). */
.category-nav {
  background: var(--amarillo);
}
.category-nav__bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  flex-wrap: wrap;
  /* Sin overflow-x/white-space acá a propósito: un ancestro con overflow
     recortaría el menú desplegable (position: absolute) del dropdown de
     categorías — con pocos accesos curados alcanza con que envuelvan
     (flex-wrap) en pantallas angostas, no hace falta scroll horizontal. */
}
.category-nav__links-wrap {
  position: relative;
}
/* Escritorio/tablet: los 3 links van sueltos en la barra, como siempre. El
   botón "☰ Menú" (mobile) queda oculto — ver media query de abajo.
   Selector con el wrapper (no ".category-nav__links-toggle" solo) a propósito:
   este botón también tiene la clase ".category-nav__toggle" (mismo estilo
   base que el de Categorías) y esa regla define "display: flex" más abajo en
   el archivo — con la misma especificidad, gana la que viene después en el
   cascade, así que hace falta MÁS especificidad acá, no solo orden. */
.category-nav__links-wrap .category-nav__links-toggle {
  display: none;
}
.category-nav__links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.category-nav a {
  color: var(--negro);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.category-nav a:hover {
  text-decoration: underline;
}

.category-nav__dropdown {
  position: relative;
}
@media (max-width: 480px) {
  /* Celular angosto: en vez de que "Todos los productos/Ofertas/Servicios"
     compitan por ancho en la barra (se veían amontonados o partidos en dos
     líneas), se esconden detrás de un botón "☰ Menú" — mismo dropdown
     animado que "☰ Categorías" (opacity/transform, ver .category-nav__menu),
     nada de scroll horizontal escondido que el usuario podría no descubrir. */
  .category-nav__links-wrap .category-nav__links-toggle {
    display: flex;
  }
  .category-nav__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    z-index: 150;
    top: calc(100% + 10px);
    left: 0;
    min-width: 200px;
    background: var(--gris-oscuro);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top left;
    pointer-events: none;
    transition:
      opacity 0.16s ease,
      transform 0.16s ease,
      visibility 0s linear 0.16s;
  }
  .category-nav__links a {
    color: var(--blanco);
    padding: 8px 6px;
    width: 100%;
  }
  .category-nav__links.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition:
      opacity 0.16s ease,
      transform 0.16s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .category-nav__links {
      transition: none;
    }
  }
}
.category-nav__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--negro);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 2px 0;
  white-space: nowrap;
}
.category-nav__caret {
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}
.category-nav__toggle[aria-expanded="true"] .category-nav__caret {
  transform: rotate(180deg);
}
/* Panel chico y horizontal (chips en fila que envuelven) en vez de una
   lista vertical larga — todas las categorías al mismo nivel, sin anidar
   padre/hijas, para que quepa en pocas líneas. */
.category-nav__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: absolute;
  z-index: 150;
  top: calc(100% + 10px);
  left: 0;
  width: max-content;
  max-width: min(520px, 90vw);
  background: var(--gris-oscuro);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra);
  padding: 10px;
  white-space: normal;
  /* Animado (antes era display:none/flex instantáneo): opacity+transform en
     vez de tocar "display" directamente, porque display no es animable —
     visibility con delay evita que el panel intercepte clicks/tab mientras
     está "cerrado" pero técnicamente sigue en el DOM con display:flex. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0s linear 0.16s;
}
.category-nav__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}
@media (prefers-reduced-motion: reduce) {
  .category-nav__menu {
    transition: none;
  }
}
.category-nav__menu a {
  color: var(--blanco);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--negro-suave);
  border: 1px solid var(--gris-borde);
  white-space: nowrap;
}
.category-nav__menu a:hover {
  border-color: var(--amarillo);
  color: var(--amarillo);
  text-decoration: none;
}

/* --- Secciones / Home --- */
.section {
  padding: 36px 0;
}
.section__title {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 20px;
  color: var(--blanco);
  border-left: 4px solid var(--amarillo);
  padding-left: 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--negro-suave), var(--fondo) 70%);
  border-bottom: 1px solid var(--gris-borde);
  padding: 48px 0;
  text-align: center;
}
/* Por encima de los .hero-float (z-index: 0) — si no, el texto quedaría
   detrás de los íconos flotando en vez de encima. */
.hero > .container {
  position: relative;
  z-index: 1;
}
/* Brillo diagonal (mismo keyframe que .wash-cta/.promo-banner, sección
   home-banners) — el hero era el único bloque grande del home totalmente
   estático, sin nada de vida. */
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 193, 7, 0.12), transparent);
  animation: wash-cta-shine 4s ease-in-out infinite;
  animation-delay: 0.8s;
  pointer-events: none;
}
/* Entrada escalonada (título → subtítulo → buscador) en vez de que todo
   aparezca de golpe con la carga de la página — "opacity: 0" en el estado
   inicial de las 3 piezas, la animación las lleva a 1 con distinto delay. */
.hero h1,
.hero p,
.hero #hero-search-form {
  animation: hero-fade-up 0.6s ease-out both;
}
.hero h1 {
  animation-delay: 0.05s;
}
.hero p {
  animation-delay: 0.15s;
}
.hero #hero-search-form {
  animation-delay: 0.28s;
}
@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Decoración flotando de fondo (llave/engranaje/casco/moto) — el brillo solo
   no alcanzaba, esto le da profundidad de verdad. Opacity bajo + z-index
   detrás del texto: se sienten, no compiten por atención. */
.hero-float {
  position: absolute;
  z-index: 0;
  opacity: 0.1;
  font-size: 2.6rem;
  filter: grayscale(1);
  pointer-events: none;
  user-select: none;
  animation: hero-float-drift 8s ease-in-out infinite;
}
.hero-float--1 {
  top: 12%;
  left: 6%;
  font-size: 2.2rem;
  animation-duration: 7s;
  animation-delay: 0s;
}
.hero-float--2 {
  top: 65%;
  left: 12%;
  font-size: 1.8rem;
  animation-duration: 9s;
  animation-delay: 1.2s;
}
.hero-float--3 {
  top: 18%;
  right: 8%;
  font-size: 2.4rem;
  animation-duration: 8.5s;
  animation-delay: 0.6s;
}
.hero-float--4 {
  top: 62%;
  right: 6%;
  font-size: 3rem;
  animation-duration: 10s;
  animation-delay: 1.8s;
}
.hero-float--5 {
  top: 5%;
  left: 45%;
  font-size: 1.6rem;
  animation-duration: 6.5s;
  animation-delay: 2.4s;
}
@keyframes hero-float-drift {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-16px) rotate(8deg);
  }
}
@media (max-width: 640px) {
  /* En celular la caja del hero es más baja — se sacan los dos del medio
     (--5 solapaba el título) y se dejan solo las 4 esquinas, más chicas. */
  .hero-float--5 {
    display: none;
  }
  .hero-float {
    font-size: 1.6rem;
    opacity: 0.08;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero::after {
    display: none;
  }
  .hero h1,
  .hero p,
  .hero #hero-search-form {
    animation: none;
  }
  .hero-float {
    animation: none;
  }
}
.hero h1 {
  position: relative;
  color: var(--amarillo);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  margin: 0 0 8px;
  letter-spacing: -0.3px;
}
.hero p {
  position: relative;
  color: var(--gris-texto);
  margin: 0;
}
.hero #hero-search-form {
  position: relative;
  transition: box-shadow 0.2s ease;
}
.hero #hero-search-form:focus-within {
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.25);
}
/* Pulso sutil en el botón "Buscar" — mismo criterio que .wash-cta__btn: le
   da vida sin ser invasivo, se pausa apenas alguien interactúa con la barra. */
.hero #hero-search-form button {
  animation: hero-search-btn-pulse 2.4s ease-in-out infinite;
  animation-delay: 1.2s;
}
.hero #hero-search-form:hover button,
.hero #hero-search-form:focus-within button {
  animation-play-state: paused;
}
@keyframes hero-search-btn-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 193, 7, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero #hero-search-form button {
    animation: none;
  }
}

/* Carrusel de destacados del home (sección 41) — fotos reales de productos
   con descuento/novedad, nunca una promoción inventada (ver home.js). */
.hero-carousel {
  position: relative;
  border-radius: var(--radio-lg);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--superficie-imagen);
  box-shadow: var(--sombra-card);
  margin: 24px 0;
}
@media (max-width: 640px) {
  .hero-carousel {
    aspect-ratio: 4 / 3;
  }
}

.hero-carousel__track {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
  display: block;
}
.hero-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
}
.hero-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-carousel__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 24px 20px;
  background: linear-gradient(
    0deg,
    rgba(13, 13, 13, 0.85),
    rgba(13, 13, 13, 0)
  );
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-carousel__title {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 800;
}
.hero-carousel__subtitle {
  color: var(--amarillo-suave);
  font-size: 0.95rem;
  font-weight: 700;
}

.hero-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(13, 13, 13, 0.55);
  color: #ffffff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  transition: background 0.15s ease;
}
.hero-carousel__arrow:hover {
  background: rgba(13, 13, 13, 0.8);
}
.hero-carousel__arrow--prev {
  left: 12px;
}
.hero-carousel__arrow--next {
  right: 12px;
}

.hero-carousel__dots {
  position: absolute;
  bottom: 12px;
  right: 16px;
  display: flex;
  gap: 6px;
  z-index: 5;
}
.hero-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}
.hero-carousel__dot.is-active {
  background: var(--amarillo);
  transform: scale(1.3);
}

/* Banner promocional (sección 41: "Banner promocional") — solo mensaje de
   marca propio, nunca una oferta o cuenta regresiva inventada. */
.promo-banner {
  position: relative;
  background: linear-gradient(
    120deg,
    var(--amarillo) 0%,
    var(--amarillo-oscuro) 100%
  );
  color: var(--negro);
  border-radius: var(--radio);
  padding: 14px 20px;
  margin: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: var(--sombra-card);
  overflow: hidden;
}
/* Mismo brillo diagonal que .wash-cta (reusa el keyframe wash-cta-shine) —
   desfasado 1.6s para que no crucen los dos bancos exactamente juntos. */
.promo-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  animation: wash-cta-shine 3.2s ease-in-out infinite;
  animation-delay: 1.6s;
}
@media (prefers-reduced-motion: reduce) {
  .promo-banner::after {
    display: none;
  }
}
.promo-banner__text h2 {
  margin: 0 0 2px;
  font-size: 1.02rem;
  font-weight: 800;
}
.promo-banner__text p {
  margin: 0;
  font-size: 0.78rem;
  opacity: 0.8;
}
.promo-banner .btn-primary {
  background: var(--negro);
  color: var(--amarillo);
  box-shadow: none;
}
.promo-banner .btn-primary:hover {
  background: var(--negro-suave);
}

/* Chips de categoría en el Home: más parecidas a los accesos rápidos de un
   marketplace (ícono + nombre) que a una tarjeta de producto genérica. */
.category-chip {
  padding: 20px 12px !important;
}
.category-chip .card__icon {
  font-size: 2rem;
  margin-bottom: 6px;
}
.category-chip .card__icon-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-bottom: 6px;
}

/* Carrusel animado de categorías (Home): desplazamiento automático continuo
   en vez de una grilla estática — el track trae el contenido duplicado
   (ver home.js) y la animación lo corre de 0% a -50%, que es un loop
   perfecto sin salto porque a mitad de camino se ve idéntico al arranque. */
.category-carousel {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
}
.category-carousel__track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: category-carousel-scroll 32s linear infinite;
}
.category-carousel__track .category-chip {
  flex: 0 0 150px;
}
.category-carousel:hover .category-carousel__track,
.category-carousel:focus-within .category-carousel__track {
  animation-play-state: paused;
}
@keyframes category-carousel-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* Quien prefiere menos movimiento (ajuste del sistema operativo) ve la fila
   quieta — el usuario igual puede scrollear horizontal con el mouse/dedo. */
@media (prefers-reduced-motion: reduce) {
  .category-carousel__track {
    animation: none;
    overflow-x: auto;
  }
}

/* --- Grids --- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 960px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.grid--compact {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 640px) {
  .grid--compact {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 960px) {
  .grid--compact {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* --- Card de producto/servicio ---
   Referencia de UX de marketplace (sección 1: funcionalidad sí, identidad
   visual propia — negro/amarillo, no la paleta de terceros): foto sobre
   superficie clara, elevación al pasar el mouse, jerarquía fuerte en precio,
   insignias de descuento/calificación/stock, igual que cualquier grilla de
   resultados de un marketplace grande. */
.card {
  background: var(--gris-oscuro);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-card);
  transition:
    border-color 0.15s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.card:hover {
  border-color: var(--amarillo);
  transform: translateY(-4px);
  box-shadow: var(--sombra-card-hover);
}
/* Alto FIJO en píxeles (no aspect-ratio): todas las fotos de la grilla miden
   exactamente lo mismo sin importar las proporciones de la imagen original
   ni el ancho de la tarjeta — la causa de que se vieran "alargadas". */
.card__image {
  height: 190px;
  width: 100%;
  background: var(--superficie-imagen);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris-texto-tenue);
  font-size: 0.75rem;
  position: relative;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .card__image {
    height: 150px;
  }
}
.card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Placeholder animado para "Lavado de Moto"/"Lavado de Casco" (sección de
   lavados, sin foto real todavía) — mismo lenguaje visual que .wash-cta del
   home (ícono + burbujas subiendo) en vez del "Sin imagen" genérico de
   cualquier otra tarjeta sin foto. Ver cards.js: washPlaceholderMarkup(). */
.wash-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--superficie-imagen), rgba(255, 193, 7, 0.12));
}
.wash-placeholder__icon {
  font-size: 3rem;
  position: relative;
  z-index: 1;
  animation: wash-placeholder-bob 3s ease-in-out infinite;
}
/* La misma tarjeta se usa en un contenedor chico (grilla, 190px de alto) y
   uno grande (galería del detalle, cuadrado ~460px) — se agranda el ícono
   en ese segundo caso para que no se vea perdido en el centro. */
.detail-gallery__main .wash-placeholder__icon {
  font-size: 6rem;
}
@keyframes wash-placeholder-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
.wash-placeholder__bubble {
  position: absolute;
  bottom: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(13, 13, 13, 0.12);
  animation: wash-placeholder-bubble 3.4s ease-in infinite;
}
.wash-placeholder__bubble--1 {
  left: 22%;
  width: 8px;
  height: 8px;
  animation-delay: 0s;
}
.wash-placeholder__bubble--2 {
  left: 38%;
  width: 6px;
  height: 6px;
  animation-delay: 0.7s;
}
.wash-placeholder__bubble--3 {
  left: 52%;
  width: 10px;
  height: 10px;
  animation-delay: 1.4s;
}
.wash-placeholder__bubble--4 {
  left: 66%;
  width: 7px;
  height: 7px;
  animation-delay: 2.1s;
}
.wash-placeholder__bubble--5 {
  left: 78%;
  width: 5px;
  height: 5px;
  animation-delay: 2.8s;
}
@keyframes wash-placeholder-bubble {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  15% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(-150px) scale(1);
    opacity: 0;
  }
}
@keyframes wash-placeholder-bubble-lg {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }
  15% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(-380px) scale(1.6);
    opacity: 0;
  }
}
.detail-gallery__main .wash-placeholder__bubble {
  animation-name: wash-placeholder-bubble-lg;
}
@media (prefers-reduced-motion: reduce) {
  .wash-placeholder__icon,
  .wash-placeholder__bubble {
    animation: none;
  }
}

.card__discount-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--exito);
  color: var(--negro);
  font-weight: 800;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: var(--radio-sm);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.card__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.card__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--blanco);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
  line-height: 1.2;
}
.card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--gris-texto-tenue);
}
.card__rating .stars {
  color: var(--amarillo);
  letter-spacing: 1px;
}
/* margin-top:auto ancla el precio (y todo lo que va después: insignia de
   stock, marca/ubicación) al fondo de la tarjeta — así el precio queda a la
   misma altura en toda la fila del grid, sin importar si el nombre ocupa
   una o dos líneas, o si hay calificación/marca arriba o no (sección "todo
   uniforme"). Requiere que .card__body sea flex column (ya lo es). */
.card__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 6px;
}
.card__price {
  font-weight: 800;
  color: var(--blanco);
  font-size: 1.2rem;
  letter-spacing: -0.3px;
}
.card__price-old {
  color: var(--gris-texto-tenue);
  text-decoration: line-through;
  font-size: 0.78rem;
  font-weight: 400;
}
.card__meta {
  font-size: 0.75rem;
  color: var(--gris-texto);
}
.card__favorite {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(13, 13, 13, 0.75);
  border: none;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Blanco fijo (no var(--blanco)): flota sobre la FOTO del producto con un
     fondo oscuro también fijo, no sobre el fondo de la página — debe seguir
     siendo legible igual en los dos temas. */
  color: #ffffff;
  transition:
    transform 0.15s ease,
    color 0.15s ease;
}
.card__favorite:hover {
  transform: scale(1.1);
}
.card__favorite.is-active {
  color: var(--amarillo);
}

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  width: fit-content;
}
.badge-disponible {
  background: var(--exito-fondo);
  color: var(--exito);
}
.badge-ultimas_unidades {
  background: rgba(244, 196, 48, 0.15);
  color: var(--amarillo);
}
.badge-agotado {
  background: var(--error-fondo);
  color: var(--error);
}

/* --- Formularios --- */
.form-group {
  margin-bottom: 14px;
}
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: var(--gris-texto);
}
.form-control {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--gris-borde);
  background: var(--negro-suave);
  color: var(--blanco);
  font-size: 0.9rem;
}
.form-control:focus {
  outline: none;
  border-color: var(--amarillo);
}
.form-error {
  color: var(--error);
  font-size: 0.78rem;
  margin-top: 4px;
}
.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.form-row .form-group {
  flex: 1;
  min-width: 160px;
}

/* --- Campo de contraseña con botón "ojito" (mostrar/ocultar) --- */
.password-field {
  position: relative;
}
.password-field .form-control {
  padding-right: 40px;
}
.password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
  color: var(--gris-texto);
  border-radius: var(--radio-sm);
}
.password-toggle:hover {
  color: var(--amarillo);
}
.password-toggle svg {
  display: block;
}

.auth-link {
  display: block;
  text-align: right;
  font-size: 0.78rem;
  color: var(--gris-texto);
  margin: -6px 0 14px;
}
.auth-link:hover {
  color: var(--amarillo);
}

/* --- Modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 16px;
}
.modal-overlay.is-open {
  display: flex;
}
.modal {
  background: var(--gris-oscuro);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  width: 100%;
  max-width: 420px;
  padding: 24px;
  box-shadow: var(--sombra);
  max-height: 90vh;
  overflow-y: auto;
}
.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.modal__title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--amarillo);
  margin: 0;
}
.modal__close {
  background: none;
  border: none;
  color: var(--gris-texto);
  font-size: 1.3rem;
}
.modal__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--gris-texto);
  font-size: 0.78rem;
  text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gris-borde);
}
.modal__tab {
  flex: 1;
  background: var(--negro-suave);
  border: 1px solid var(--gris-borde);
  color: var(--gris-texto);
  padding: 8px;
  border-radius: var(--radio-sm);
  font-weight: 700;
  font-size: 0.85rem;
}
.modal__tab.is-active {
  border-color: var(--amarillo);
  color: var(--amarillo);
}
/* Modal más ancho para formularios con más campos (ej. gestión de servicios) */
.modal--wide {
  max-width: 640px;
}

.admin-image-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.admin-image-list__item {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--radio-sm);
  overflow: hidden;
  border: 1px solid var(--gris-borde);
}
.admin-image-list__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.admin-image-list__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  /* Blanco fijo: mismo motivo que .card__favorite — flota sobre una foto miniatura. */
  background: rgba(13, 13, 13, 0.75);
  color: #ffffff;
  border: none;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}

/* --- Toast --- */
.toast-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast {
  background: var(--gris-oscuro);
  border: 1px solid var(--gris-borde);
  border-left: 5px solid var(--amarillo);
  border-radius: var(--radio-sm);
  padding: 14px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blanco);
  /* Sombra más marcada que el resto de la UI (var(--sombra)) a propósito —
     tiene que destacarse sobre CUALQUIER contenido de la página, no mezclarse
     con el resto de las cards/paneles que ya usan esa misma sombra sutil. */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  max-width: 360px;
  animation: toast-in 0.2s ease-out;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.toast.toast-error {
  border-left-color: var(--error);
}
.toast.toast-success {
  border-left-color: var(--exito);
}

/* --- Estados --- */
.empty-state,
.loading-state,
.error-state {
  text-align: center;
  padding: 40px 16px;
  color: var(--gris-texto);
}
.error-state {
  color: var(--error);
}

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--gris-borde);
  margin-top: 40px;
  padding: 36px 0 20px;
  color: var(--gris-texto);
  font-size: 0.85rem;
  background: var(--negro-suave);
}
.site-footer strong {
  color: var(--amarillo);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  text-align: left;
}
@media (min-width: 640px) {
  .site-footer__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.site-footer__col h3 {
  font-size: 0.78rem;
  color: var(--blanco);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0 0 12px;
}
.site-footer__col a {
  display: block;
  color: var(--gris-texto);
  font-size: 0.82rem;
  margin-bottom: 8px;
  transition: color 0.15s ease;
}
.site-footer__col a:hover {
  color: var(--amarillo);
}
.site-footer__bottom {
  border-top: 1px solid var(--gris-borde);
  margin-top: 24px;
  padding-top: 16px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--gris-texto-tenue);
}
.site-footer__bottom a {
  color: var(--gris-texto);
  text-decoration: underline;
  transition: color 0.15s ease;
}
.site-footer__bottom a:hover {
  color: var(--amarillo);
}

/* --- Utilidades --- */
.flex {
  display: flex;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gap-8 {
  gap: 8px;
}
.gap-16 {
  gap: 16px;
}
.mt-16 {
  margin-top: 16px;
}
.mb-16 {
  margin-bottom: 16px;
}
.text-center {
  text-align: center;
}
.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;
}
.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid var(--gris-borde);
  margin-bottom: 20px;
}
.filters-bar select,
.filters-bar input {
  padding: 8px 10px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--gris-borde);
  background: var(--negro-suave);
  color: var(--blanco);
  font-size: 0.85rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 800px) {
  .detail-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Caja de compra (columna derecha del detalle, como en un marketplace):
   agrupa precio/stock/cantidad/CTA en un bloque con borde propio en vez de
   quedar sueltos en la columna. */
.purchase-box {
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg);
  padding: 20px;
  background: var(--gris-oscuro);
  box-shadow: var(--sombra-card);
}

.seller-box {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  margin-top: 16px;
}
.seller-box__icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--negro-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.seller-box__name {
  font-weight: 700;
  color: var(--blanco);
  font-size: 0.9rem;
}
.seller-box__meta {
  font-size: 0.75rem;
  color: var(--gris-texto);
}

.stock-hint {
  font-weight: 400;
  color: var(--gris-texto);
  font-size: 0.78rem;
}

.payment-methods-box {
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  font-size: 0.85rem;
}
.payment-methods-box strong {
  color: var(--blanco);
}
.payment-methods-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.payment-methods-list li {
  background: var(--negro-suave);
  border: 1px solid var(--gris-borde);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  color: var(--gris-texto);
}

/* "Lo que tienes que saber de este producto" */
.specs-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--blanco);
  margin: 0 0 10px;
}
.specs-summary {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.specs-summary li {
  font-size: 0.85rem;
  color: var(--gris-texto);
}
.specs-summary strong {
  color: var(--blanco);
}
.link-btn {
  background: none;
  border: none;
  color: var(--amarillo);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 0;
  text-decoration: underline;
}
.specs-table {
  width: 100%;
  font-size: 0.85rem;
  color: var(--gris-texto);
  margin-top: 8px;
  border-collapse: collapse;
}
.specs-table td {
  padding: 6px 0;
  border-bottom: 1px solid var(--gris-borde);
}
.specs-table td:first-child {
  font-weight: 600;
  color: var(--blanco);
  width: 40%;
}

/* Carrusel horizontal (relacionados) */
.carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
}
.carousel .card {
  flex: 0 0 200px;
  scroll-snap-align: start;
}
.carousel::-webkit-scrollbar {
  height: 8px;
}
.carousel::-webkit-scrollbar-thumb {
  background: var(--gris-borde);
  border-radius: 999px;
}

/* La galería necesita position:relative como ancla para el panel de zoom
   (que se posiciona a su derecha) — ver .gallery-zoom-panel más abajo. */
/* Tamaño fijo/acotado (sección "todo uniforme"): sin este límite, la imagen
   ocupaba toda la columna del grid (hasta ~580px en pantallas anchas, mucho
   más grande que cualquier foto de producto de un marketplace real). */
.detail-gallery {
  position: relative;
  max-width: 460px;
}

.detail-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--superficie-imagen);
  border-radius: var(--radio-lg);
  overflow: hidden;
  border: 1px solid var(--gris-borde);
  box-shadow: var(--sombra-card);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rating-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--gris-texto);
  margin: 4px 0 12px;
}
.rating-summary .stars {
  color: var(--amarillo);
  letter-spacing: 2px;
  font-size: 1rem;
}
.stars {
  color: var(--amarillo);
  letter-spacing: 1px;
}

/* Opiniones del producto (sección 26) */
.review-item {
  border-bottom: 1px solid var(--gris-borde);
  padding: 14px 0;
}
.review-item:first-child {
  padding-top: 0;
}
.review-item__header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.85rem;
}
.review-item__header strong {
  color: var(--blanco);
}
.review-item__date {
  color: var(--gris-texto-tenue);
  font-size: 0.75rem;
  margin-left: auto;
}
.review-item__comment {
  margin: 6px 0 0;
  color: var(--gris-texto);
  font-size: 0.88rem;
  white-space: pre-line;
}

/* Mi perfil */
.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--gris-borde);
  flex-shrink: 0;
}
.profile-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--negro-suave);
  font-size: 1.8rem;
}

/* Botón flotante de WhatsApp (todo el sitio) */
.whatsapp-float-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--exito);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  z-index: 180;
  transition: transform 0.15s ease;
  animation: whatsapp-pulse-scale 2.4s ease-in-out infinite;
}
/* Se pausa el pulso al pasar el mouse, para que el :hover (agrandar un
   poco más, fijo) se vea limpio en vez de compitiendo con la animación. */
.whatsapp-float-btn:hover {
  animation-play-state: paused;
  transform: scale(1.08);
}
/* Anillo que se expande y se desvanece detrás del botón — el "toque" que
   llama la atención sin mover el ícono en sí (eso lo hace whatsapp-pulse-scale). */
.whatsapp-float-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--exito);
  z-index: -1;
  animation: whatsapp-pulse-ring 2.4s ease-out infinite;
}
@keyframes whatsapp-pulse-scale {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}
@keyframes whatsapp-pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float-btn,
  .whatsapp-float-btn::before {
    animation: none;
  }
}

/* Bot de preguntas (Fase 11): botón flotante arriba del de WhatsApp (mismo
   right, bottom mayor) para que no se superpongan, color de marca (amarillo)
   para distinguirse del verde de WhatsApp de un vistazo. */
.assistant-toggle-btn {
  position: fixed;
  right: 20px;
  bottom: 88px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--amarillo);
  color: var(--negro);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  z-index: 180;
  transition: transform 0.15s ease;
}
.assistant-toggle-btn:hover {
  transform: scale(1.08);
}

.assistant-panel {
  position: fixed;
  right: 20px;
  bottom: 152px;
  width: min(340px, calc(100vw - 40px));
  height: min(440px, calc(100vh - 200px));
  background: var(--gris-oscuro);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 190;
}
/* Mismo problema que img[hidden] (ver arriba): "display: flex" de autor le
   gana al "display: none" de [hidden] del navegador — sin esto, cerrar el
   panel (panel.hidden = true) no lo ocultaba de verdad. */
.assistant-panel[hidden] {
  display: none;
}
.assistant-panel__header {
  background: var(--negro);
  color: var(--amarillo);
  padding: 12px 14px;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.assistant-panel__header button {
  background: none;
  border: none;
  color: var(--gris-texto);
  font-size: 1.1rem;
}
.assistant-panel__messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.assistant-msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: var(--radio);
  font-size: 0.85rem;
  line-height: 1.4;
  white-space: pre-line;
}
.assistant-msg--bot {
  align-self: flex-start;
  background: var(--negro-suave);
  color: var(--blanco);
}
.assistant-msg--user {
  align-self: flex-end;
  background: var(--amarillo);
  color: var(--negro);
}
.assistant-msg--typing {
  color: var(--gris-texto-tenue);
  font-style: italic;
}
.assistant-panel__form {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--gris-borde);
}
.assistant-panel__form input {
  flex: 1;
}
.assistant-panel__form button {
  background: var(--amarillo);
  color: var(--negro);
  border: none;
  border-radius: var(--radio-sm);
  padding: 0 14px;
  font-weight: 700;
}
@media (max-width: 480px) {
  .assistant-panel {
    right: 12px;
    bottom: 140px;
  }
  .assistant-toggle-btn,
  .whatsapp-float-btn {
    right: 12px;
  }
}

/* Historial de estados del pedido */
.order-history {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.order-history__step {
  border-left: 2px solid var(--gris-borde);
  padding-left: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.order-history__date {
  color: var(--gris-texto-tenue);
  font-size: 0.78rem;
}
.order-history__comment {
  flex-basis: 100%;
  margin: 2px 0 0;
  color: var(--gris-texto);
  font-size: 0.82rem;
}

/* Lista "Mis pedidos" */
.order-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.order-list-item__meta {
  font-size: 0.8rem;
  color: var(--gris-texto);
}
.order-list-item__number {
  font-weight: 700;
  color: var(--blanco);
}
.order-list-item__info {
  flex: 1;
  min-width: 140px;
}
.order-list-item__thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radio-sm);
  background: var(--superficie-imagen);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.order-list-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.order-list-item__thumb-placeholder {
  font-size: 1.4rem;
}
.detail-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-gallery__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.detail-gallery__thumbs img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radio-sm);
  border: 2px solid var(--gris-borde);
  cursor: pointer;
}
.detail-gallery__thumbs img.is-active {
  border-color: var(--amarillo);
}

/* Giro 360° a partir de las fotos reales del producto/servicio (ver gallery360.js) */
.detail-gallery__main.is-360 {
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}
.detail-gallery__main.is-360.is-dragging {
  cursor: grabbing;
}
.detail-gallery__main.is-360 img {
  pointer-events: none;
}
.gallery-360-hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  /* Blanco fijo: mismo motivo que .card__favorite — flota sobre la foto del producto. */
  background: rgba(13, 13, 13, 0.7);
  color: #ffffff;
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 999px;
  pointer-events: none;
}

/* Zoom al pasar el mouse (funcionalidad típica de marketplace grande, sección
   1: se replica el comportamiento, no el diseño de un tercero) — lupa sobre
   la foto + panel ampliado a la derecha. Solo en dispositivos con mouse real
   (ver "canHoverZoom" en gallery360.js); en táctil, el equivalente es el
   click/tap que abre pantalla completa (.gallery-lightbox-overlay). */
.detail-gallery__main.is-zoomable:not(.is-360) {
  cursor: zoom-in;
}

.gallery-zoom-lens {
  position: absolute;
  border: 2px solid var(--amarillo);
  background: rgba(244, 196, 48, 0.15);
  pointer-events: none;
  display: none;
}
/* La lupa solo tiene sentido junto al panel ampliado — mismo punto de corte
   de ancho que .gallery-zoom-panel, para no mostrar un recuadro "vacío". */
@media (min-width: 1200px) {
  .gallery-zoom-lens.is-visible {
    display: block;
  }
}

.gallery-zoom-panel {
  display: none;
  position: absolute;
  top: 0;
  left: calc(100% + 16px);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-color: var(--gris-oscuro);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-card-hover);
  z-index: 60;
  pointer-events: none;
}
/* Solo hay espacio real a la derecha de la galería en pantallas anchas
   (el grid de detalle pasa a 2 columnas desde 800px, ver .detail-grid);
   1200px = el ancho máximo de .container, para que el panel nunca se salga
   del viewport aunque la ventana sea más angosta que ese máximo. */
@media (min-width: 1200px) {
  .gallery-zoom-panel.is-visible {
    display: block;
  }
}

.gallery-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 13, 0.92);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
}
.gallery-lightbox-overlay img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  border-radius: var(--radio);
  margin: auto;
}
.gallery-lightbox-close {
  position: fixed;
  top: 16px;
  right: 20px;
  background: rgba(13, 13, 13, 0.75);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
  cursor: pointer;
}

/* Botón único "compartir" (solo ícono) + menú desplegable con las opciones
   (WhatsApp/Facebook/X/Telegram/copiar enlace) — en vez de una fila fija de
   6 botones con texto ocupando todo el ancho. */
.product-share {
  position: relative;
  display: inline-block;
  margin-top: 12px;
}
.product-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--gris-borde);
  background: var(--negro-suave);
  color: var(--blanco);
  border-radius: var(--radio-sm);
  padding: 8px 12px;
  font-size: 0.8rem;
}
.product-share-btn:hover {
  border-color: var(--amarillo);
  color: var(--amarillo);
}
.share-dropdown {
  display: none;
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: var(--gris-oscuro);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra);
  padding: 6px;
  flex-direction: column;
  gap: 2px;
}
.share-dropdown.is-open {
  display: flex;
}
.share-dropdown a,
.share-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  color: var(--blanco);
  padding: 8px 10px;
  border-radius: var(--radio-sm);
  font-size: 0.85rem;
}
.share-dropdown a:hover,
.share-dropdown button:hover {
  background: var(--negro-suave);
  color: var(--amarillo);
}

.cart-line {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gris-borde);
  align-items: center;
}
.cart-line__image {
  width: 72px;
  height: 72px;
  border-radius: var(--radio-sm);
  overflow: hidden;
  background: var(--negro-suave);
  flex-shrink: 0;
}
.cart-line__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-line__info {
  flex: 1;
  min-width: 0;
}
.cart-line__qty {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cart-line__qty button {
  width: 28px;
  height: 28px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--gris-borde);
  background: var(--negro-suave);
  color: var(--blanco);
}
.cart-line__qty input {
  width: 44px;
  text-align: center;
}

.summary-box {
  background: var(--gris-oscuro);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 20px;
  box-shadow: var(--sombra-card);
}

/* Cupón de descuento (sección 30) dentro del resumen del carrito/checkout. */
.coupon-box {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gris-borde);
}
.coupon-box input {
  flex: 1;
}
.coupon-box--applied {
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--exito);
}
.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: var(--gris-texto);
}
.summary-row.total {
  color: var(--blanco);
  font-weight: 800;
  font-size: 1.1rem;
  border-top: 1px solid var(--gris-borde);
  padding-top: 10px;
  margin-top: 10px;
}

.address-option {
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-sm);
  padding: 12px;
  margin-bottom: 10px;
  cursor: pointer;
}
.address-option.is-selected {
  border-color: var(--amarillo);
  background: rgba(244, 196, 48, 0.06);
}

.step-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.step-list span {
  background: var(--gris-oscuro);
  border: 1px solid var(--gris-borde);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.78rem;
  color: var(--gris-texto);
}
.step-list span.is-active {
  border-color: var(--amarillo);
  color: var(--amarillo);
  font-weight: 700;
}

.confirmation-box {
  text-align: center;
  padding: 40px 20px;
}
.confirmation-box .order-number {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--amarillo);
  margin: 12px 0;
}

/* --- Panel administrativo (Fase 6) --- */
/* --- Panel admin: layout con barra lateral --- */
.admin-shell {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - var(--header-height));
}

.admin-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--gris-oscuro);
  border-right: 1px solid var(--gris-borde);
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}
.admin-sidebar__header {
  display: none;
}
.admin-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
}

.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: none;
  border: none;
  border-radius: var(--radio-sm);
  color: var(--gris-texto);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}
.admin-nav-link span {
  font-size: 1.05rem;
}
.admin-nav-link:hover {
  background: var(--negro-suave);
  color: var(--blanco);
  transform: translateX(2px);
}
.admin-nav-link.is-active {
  background: var(--negro-suave);
  color: var(--amarillo);
}

.admin-content {
  flex: 1;
  min-width: 0;
  padding: 0 24px 40px;
}

/* Solo aparece en pantallas angostas (ver media query) */
.admin-drawer-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 16px 16px 0;
  background: var(--gris-oscuro);
  border: 1px solid var(--gris-borde);
  color: var(--blanco);
  padding: 10px 16px;
  border-radius: var(--radio-sm);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.admin-drawer-backdrop {
  display: none;
}

@media (max-width: 900px) {
  .admin-drawer-toggle {
    display: inline-flex;
  }
  .admin-content {
    padding: 0 16px 40px;
  }

  .admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    z-index: 250;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--sombra);
  }
  .admin-sidebar.is-open {
    transform: translateX(0);
  }
  .admin-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gris-borde);
    margin-bottom: 8px;
  }
  .admin-sidebar__brand {
    font-weight: 800;
    color: var(--amarillo);
  }
  .admin-sidebar__close {
    background: none;
    border: none;
    color: var(--gris-texto);
    font-size: 1.2rem;
    cursor: pointer;
  }

  .admin-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(13, 13, 13, 0.55);
    z-index: 240;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .admin-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Animación de entrada al cambiar de sección (sección "moderna, animada") */
@keyframes adminPanelIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.admin-panel-enter {
  animation: adminPanelIn 0.35s ease;
}

/* --- Dashboard "Resumen" (sección 28) --- */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--gris-oscuro);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg);
  padding: 16px 18px;
  box-shadow: var(--sombra-card);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-card-hover);
}
.stat-card__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radio);
  background: var(--negro-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.stat-card__value {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--blanco);
  line-height: 1.2;
}
.stat-card__label {
  font-size: 0.75rem;
  color: var(--gris-texto);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1.4fr 1fr;
  }
}

.dashboard-panel {
  background: var(--gris-oscuro);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg);
  padding: 18px 20px;
  box-shadow: var(--sombra-card);
}
.dashboard-panel h3 {
  margin: 0 0 14px;
  font-size: 0.95rem;
  color: var(--amarillo);
}

.chart-bars {
  width: 100%;
  height: 180px;
}
.chart-bar {
  fill: var(--amarillo);
  transition: fill 0.15s ease;
}
.chart-bar:hover {
  fill: var(--amarillo-oscuro);
}
.chart-axis-label {
  fill: var(--gris-texto);
  font-size: 6px;
}

.status-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.8rem;
}
.status-bar-row__label {
  width: 110px;
  flex-shrink: 0;
  color: var(--gris-texto);
}
.status-bar-row__track {
  flex: 1;
  height: 10px;
  background: var(--negro-suave);
  border-radius: 999px;
  overflow: hidden;
}
.status-bar-row__fill {
  height: 100%;
  background: var(--amarillo);
  border-radius: 999px;
  transition: width 0.5s ease;
}
.status-bar-row__count {
  width: 26px;
  text-align: right;
  font-weight: 700;
  color: var(--blanco);
}

.top-products-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.top-products-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gris-borde);
  font-size: 0.85rem;
}
.top-products-list li:last-child {
  border-bottom: none;
}
.top-products-list .rank {
  color: var(--amarillo);
  font-weight: 800;
  margin-right: 8px;
}

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 640px;
}
.admin-table th,
.admin-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--gris-borde);
  white-space: nowrap;
}
.admin-table th {
  background: var(--negro-suave);
  color: var(--amarillo);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.admin-table tr:last-child td {
  border-bottom: none;
}
.admin-table select,
.admin-table input {
  padding: 6px 8px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--gris-borde);
  background: var(--negro-suave);
  color: var(--blanco);
  font-size: 0.8rem;
}
.admin-table .btn {
  padding: 6px 12px;
  font-size: 0.78rem;
}

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(244, 196, 48, 0.15);
  color: var(--amarillo);
}
.status-badge.is-final-good {
  background: rgba(47, 179, 68, 0.15);
  color: var(--exito);
}
.status-badge.is-final-bad {
  background: rgba(229, 72, 77, 0.15);
  color: var(--error);
}

/* --- CTA "Lavado de Motos y Cascos" (home) --- */
/* Compacta a propósito (una sola línea de alto en desktop) — antes ocupaba
   demasiado espacio con el subtítulo largo. El brillo que cruza (::after)
   más el pulso del botón "Reservar" son lo que llama la atención, no el
   tamaño del bloque. */
/* Banner de lavado + banner de productos lado a lado (2 columnas en desktop,
   apiladas en mobile) — lavado va primero. */
.home-banners {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 16px 0;
}
@media (min-width: 700px) {
  .home-banners {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .home-banners .promo-banner,
  .home-banners .wash-cta {
    margin: 0;
    height: 100%;
  }
}

.wash-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--amarillo), var(--amarillo-oscuro));
  color: var(--negro);
  border-radius: var(--radio);
  padding: 8px 16px 8px 10px;
  box-shadow: var(--sombra-card);
  overflow: hidden;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.wash-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-card-hover);
}

/* Mini animación "lavando la moto": el emoji queda fijo y burbujas van
   subiendo y desvaneciéndose alrededor, en loop — sin depender de ningún
   archivo de imagen/GIF externo (mismo criterio que los placeholders SVG
   del catálogo: todo generado en CSS, nada que subir ni que se pueda romper
   por una URL externa caída). */
.wash-cta__anim {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wash-cta__moto {
  font-size: 1.7rem;
  position: relative;
  z-index: 1;
}
.wash-cta__bubble {
  position: absolute;
  bottom: 4px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(13, 13, 13, 0.15);
  animation: wash-cta-bubble 2.6s ease-in infinite;
}
.wash-cta__bubble--1 {
  left: 4px;
  width: 5px;
  height: 5px;
  animation-delay: 0s;
}
.wash-cta__bubble--2 {
  left: 16px;
  animation-delay: 0.6s;
}
.wash-cta__bubble--3 {
  left: 28px;
  width: 6px;
  height: 6px;
  animation-delay: 1.2s;
}
.wash-cta__bubble--4 {
  left: 22px;
  width: 4px;
  height: 4px;
  animation-delay: 1.8s;
}
@keyframes wash-cta-bubble {
  0% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-38px) scale(1);
    opacity: 0;
  }
}

.wash-cta__icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.wash-cta__text {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.wash-cta__text strong {
  font-size: 0.92rem;
}
.wash-cta__text span {
  font-size: 0.78rem;
  opacity: 0.8;
}
.wash-cta__btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--negro);
  color: var(--amarillo);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  flex-shrink: 0;
  animation: wash-cta-btn-pulse 2s ease-in-out infinite;
}
.wash-cta__arrow {
  font-weight: 800;
}

/* Brillo diagonal que cruza el banner cada tanto — el "algo se mueve, andá
   a mirar" que pide un CTA, sin depender de agrandar el bloque. */
.wash-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  animation: wash-cta-shine 3.2s ease-in-out infinite;
}
@keyframes wash-cta-shine {
  0% {
    left: -60%;
  }
  35%,
  100% {
    left: 130%;
  }
}
@keyframes wash-cta-btn-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wash-cta::after {
    display: none;
  }
  .wash-cta__btn {
    animation: none;
  }
  .wash-cta__bubble {
    animation: none;
    opacity: 0;
  }
}
@media (max-width: 480px) {
  .wash-cta__text {
    flex-direction: column;
    gap: 0;
  }
}

/* --- Wizard de reserva de lavado --- */
.wash-wizard {
  max-width: 560px;
  margin: 24px auto;
}
.wash-wizard__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.wash-wizard__step {
  flex: 1;
  min-width: 110px;
  text-align: center;
  padding: 8px 6px;
  border-radius: var(--radio-sm);
  background: var(--negro-suave);
  border: 1px solid var(--gris-borde);
  color: var(--gris-texto);
  font-size: 0.75rem;
  font-weight: 700;
}
.wash-wizard__step.is-active {
  border-color: var(--amarillo);
  color: var(--amarillo);
}
.wash-wizard__step.is-done {
  color: var(--exito);
  border-color: var(--exito);
}
.wash-wizard__nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}
.wash-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.wash-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--gris-oscuro);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg);
  padding: 24px 16px;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}
.wash-option:hover {
  border-color: var(--amarillo);
  transform: translateY(-3px);
}
.wash-option__icon {
  font-size: 2.4rem;
}
.wash-option__img {
  width: 64px;
  height: 64px;
  border-radius: var(--radio-lg);
  object-fit: cover;
}
.wash-option__name {
  font-weight: 700;
  color: var(--blanco);
}
.wash-option__price {
  color: var(--amarillo);
  font-weight: 800;
  font-size: 1.1rem;
}

/* Grilla de horarios (disponible/ocupado) del wizard de lavado */
.wash-time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.wash-time-slot {
  padding: 10px 4px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--gris-borde);
  background: var(--negro-suave);
  color: var(--blanco);
  font-size: 0.82rem;
  font-weight: 600;
}
.wash-time-slot:hover:not(.is-disabled) {
  border-color: var(--amarillo);
  color: var(--amarillo);
}
.wash-time-slot.is-selected {
  background: var(--amarillo);
  border-color: var(--amarillo);
  color: var(--negro);
}
.wash-time-slot.is-disabled {
  background: none;
  border-style: dashed;
  color: var(--gris-texto-tenue);
  text-decoration: line-through;
  cursor: not-allowed;
  opacity: 0.6;
}