/* ===== Base y variables ===== */
:root {
  --negro: #14120f;
  --dorado: #b8963e;
  --dorado-claro: #d9bd76;
  --crema: #faf7f2;
  --gris: #6b675f;
  --borde: #e5dfd2;
  --blanco: #ffffff;
  --superficie: #f1ece1;
  --radio: 10px;
  --radio-sm: 6px;
  --radio-lg: 14px;
  --sombra: 0 1px 2px rgba(20, 18, 15, 0.06), 0 1px 1px rgba(20, 18, 15, 0.04);
  --sombra-md: 0 8px 24px rgba(20, 18, 15, 0.10), 0 2px 8px rgba(20, 18, 15, 0.06);
  --anillo-foco: 0 0 0 3px rgba(184, 150, 62, 0.35);
  --fuente-serif: "Instrument Serif", Georgia, serif;
  /* Siempre oscuro: texto sobre el dorado de marca (que no cambia entre
     modos). --negro sí cambia en modo oscuro, así que no sirve para esto. */
  --texto-sobre-dorado: #14120f;
  font-size: 16px;
}

/*
 * Modo oscuro/claro: en vez de variables nuevas, se redefinen las mismas
 * --negro/--crema/--blanco/--borde/--gris que ya usa todo el sitio (carrito,
 * checkout, calculadora, ficha de producto...), así el toggle se aplica en
 * las 6 páginas públicas sin tener que reescribir cada regla existente.
 * --dorado/--dorado-claro no cambian: son el acento de marca en ambos modos.
 * El admin nunca setea data-tema, así que no le afecta.
 */
html[data-tema="oscuro"] {
  --negro: #f2ede3;
  --crema: #17140f;
  --blanco: #221f19;
  --gris: #b6b0a2;
  --borde: #3a3428;
  --superficie: #2b2620;
  --sombra: 0 2px 14px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

/* Evita el "rebote" elástico del navegador (trackpad/mobile) al hacer
   scroll más allá del principio o el final de la página: sin esto, cada
   vez que el usuario se pasa de scroll se ve un salto/flash del fondo. */
html {
  overscroll-behavior-y: none;
}

/* Foco accesible y consistente en todo el sitio (teclado/lector de
   pantalla): un solo anillo dorado en vez del outline azul por defecto,
   visible solo con :focus-visible para no aparecer en clics de mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--anillo-foco);
}
/* Los enlaces de texto normales no tienen radio propio: sin esto el
   anillo de foco sale en ángulo recto pegado al texto. */
a:not([class]):focus-visible { border-radius: var(--radio-sm); }

body {
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  background: var(--crema);
  color: var(--negro);
  line-height: 1.5;
  transition: background-color 0.2s ease, color 0.2s ease;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }

/* Ningún input/textarea del sitio fijaba fondo/color propio: en modo claro
   no se notaba (blanco por defecto del navegador coincide con --blanco),
   pero en modo oscuro se quedaban blancos con texto negro sin importar el
   tema (ej. el contador de cantidad). Los inputs con su propio fondo
   explícito (como el buscador del hero) siguen ganando por ir después. */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background: var(--blanco);
  color: var(--negro);
}

.contenedor {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== Header ===== */
.cabecera {
  background: var(--blanco);
  color: var(--negro);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 50;
}

.cabecera .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
  flex-wrap: wrap;
}

.marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.marca .logo-img {
  display: block;
  height: 44px;
  width: auto;
}

.marca .subtitulo {
  font-size: 0.75rem;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.nav-principal {
  display: flex;
  gap: 22px;
  font-size: 0.9rem;
  font-weight: 500;
}

.nav-principal a {
  position: relative;
  padding: 4px 0;
  transition: color 0.15s ease;
}
.nav-principal a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -1px;
  height: 2px;
  background: var(--dorado);
  transition: right 0.2s ease;
}
.nav-principal a:hover { color: var(--dorado); }
.nav-principal a:hover::after,
.nav-principal a[aria-current="page"]::after { right: 0; }
.nav-principal a[aria-current="page"] { color: var(--dorado); }

/* ===== Menú desplegable "Categorías" en la barra de navegación =====
   El botón reusa el mismo look del link de al lado (mismo subrayado que
   crece al hover/activo); el panel es una tarjeta flotante en escritorio
   y una lista en línea dentro del menú hamburguesa en móvil. */
.nav-categorias { position: relative; }
.nav-cat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  background: none;
  border: none;
  padding: 4px 0;
  font: inherit;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
  transition: color 0.15s ease;
}
.nav-cat-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -1px;
  height: 2px;
  background: var(--dorado);
  transition: right 0.2s ease;
}
.nav-cat-toggle:hover { color: var(--dorado); }
.nav-cat-toggle:hover::after,
.nav-categorias.abierto .nav-cat-toggle::after,
.nav-cat-toggle[aria-current="page"]::after { right: 0; }
.nav-categorias.abierto .nav-cat-toggle,
.nav-cat-toggle[aria-current="page"] { color: var(--dorado); }
.nav-cat-flecha { width: 14px; height: 14px; transition: transform 0.15s ease; }
.nav-categorias.abierto .nav-cat-flecha { transform: rotate(180deg); }

.nav-cat-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 230px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-md);
  padding: 8px;
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.nav-categorias.abierto .nav-cat-panel { display: flex; }

.nav-cat-grupo { border-bottom: 1px solid var(--borde); padding-bottom: 4px; margin-bottom: 4px; }
.nav-cat-grupo:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.nav-cat-categoria {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radio-sm);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--negro);
  transition: background-color 0.12s ease, color 0.12s ease;
}
.nav-cat-categoria:hover { background: rgba(184, 150, 62, 0.08); color: var(--dorado); }
.nav-cat-todos {
  color: var(--dorado);
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
  margin-bottom: 4px;
  padding-bottom: 10px;
}
.nav-cat-subs { display: flex; flex-direction: column; padding-left: 8px; }
.nav-cat-subcategoria {
  display: block;
  padding: 6px 10px;
  border-radius: var(--radio-sm);
  font-size: 0.8rem;
  color: var(--gris);
  transition: background-color 0.12s ease, color 0.12s ease;
}
.nav-cat-subcategoria:hover { background: rgba(184, 150, 62, 0.08); color: var(--dorado); }

.acciones-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Botón hamburguesa: solo se muestra en móvil (ver media query), oculto
   en escritorio donde el nav ya cabe en la cabecera. */
.btn-menu-movil {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--crema);
  color: var(--negro);
  cursor: pointer;
  flex-shrink: 0;
  order: -1;
}
.btn-menu-movil:hover { border-color: var(--dorado); }
.btn-menu-movil svg { width: 18px; height: 18px; }
.btn-menu-movil .icono-cerrar { display: none; }
.btn-menu-movil[aria-expanded="true"] .icono-menu { display: none; }
.btn-menu-movil[aria-expanded="true"] .icono-cerrar { display: block; }

.toggle-tema {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--crema);
  color: var(--negro);
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-tema:hover { border-color: var(--dorado); }
.toggle-tema svg { width: 18px; height: 18px; }
.toggle-tema .icono-luna { display: none; }
html[data-tema="oscuro"] .toggle-tema .icono-sol { display: none; }
html[data-tema="oscuro"] .toggle-tema .icono-luna { display: block; }

.carrito-boton {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--dorado);
  color: var(--texto-sobre-dorado);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* ===== Splash de bienvenida (solo index.html): tapa toda la pantalla al
   cargar el catálogo, se queda quieta un momento y se desvanece sola. Se
   elimina del DOM al terminar (ver script inline en index.html), así que
   no queda un overlay invisible estorbando clics ni lectores de pantalla. */
.con-splash, .con-modal-pdf { overflow: hidden; }
.splash-inicio {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  animation: splash-desvanecer 2.6s ease forwards;
}
.splash-inicio-logo {
  width: 180px;
  height: 180px;
  animation: splash-logo-entrada 0.8s ease both;
}
@keyframes splash-logo-entrada {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes splash-desvanecer {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}
@media (max-width: 480px) {
  .splash-inicio-logo { width: 130px; height: 130px; }
}

/* ===== Hero ===== */
.hero {
  background: linear-gradient(135deg, #1d1a14, #100f0c);
  color: var(--crema);
  padding: 48px 0;
  text-align: center;
}

.hero h1 {
  font-size: 2rem;
  margin: 0 0 8px;
  color: var(--dorado-claro);
  letter-spacing: 0.5px;
}

.hero p {
  margin: 0;
  color: #c9c5ba;
  font-size: 1rem;
}

/* ===== Hero del catálogo (index.html): banner administrable desde el
   admin, con carrusel si hay 2+ imágenes. Es una sección aparte de .hero
   (que sigue usando calculadora.html sin cambios) porque el rediseño solo
   aplica a la página de catálogo. ===== */
.hero-catalogo {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, var(--crema), var(--borde));
  padding: 56px 20px;
}

.hero-catalogo .capa-banner {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-catalogo .imagen-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.hero-catalogo .imagen-banner.activa { opacity: 1; }

.hero-catalogo .capa-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 18, 15, 0.15), rgba(20, 18, 15, 0.55));
}

.hero-catalogo:not(.con-banner) .capa-banner { display: none; }

.hero-catalogo .puntos-banner {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 6px;
}
.hero-catalogo .puntos-banner button {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
}
.hero-catalogo .puntos-banner button.activo { background: var(--dorado-claro); }

.contenido-hero-catalogo {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

.hero-catalogo:not(.con-banner) .contenido-hero-catalogo { color: var(--negro); }
.hero-catalogo.con-banner .contenido-hero-catalogo { color: #fff; }

.pill-hero {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--dorado-claro);
  color: var(--dorado-claro);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
  background: rgba(20, 18, 15, 0.25);
}
.hero-catalogo:not(.con-banner) .pill-hero { background: var(--blanco); }

.hero-catalogo h1 {
  font-family: var(--fuente-serif);
  font-weight: 400;
  font-size: 2.4rem;
  margin: 0 0 10px;
  letter-spacing: 0.3px;
}

.hero-catalogo p {
  margin: 0 0 26px;
  font-size: 1rem;
  opacity: 0.9;
}

.buscador-hero {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--blanco);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
  box-shadow: var(--sombra-md);
  max-width: 480px;
  margin: 0 auto;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.buscador-hero:focus-within {
  border-color: var(--dorado-claro);
  box-shadow: var(--sombra-md), var(--anillo-foco);
}
.buscador-hero input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.92rem;
  color: var(--negro);
}
/* El anillo de foco vive en el contenedor (:focus-within más arriba); si
   también se le pone al input suelto, salen dos anillos: uno redondeado
   (la píldora) y uno en ángulo recto pegado al input, encimados. */
.buscador-hero input:focus-visible { box-shadow: none; }
.buscador-hero button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  background: var(--dorado);
  color: var(--texto-sobre-dorado);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.buscador-hero button:hover { background: var(--dorado-claro); }

/* ===== Layout catálogo ===== */
.zona-catalogo {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  padding: 32px 0 56px;
  align-items: start;
}

.panel-filtros {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
  position: sticky;
  top: 90px;
}

.panel-filtros h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gris);
  margin: 18px 0 10px;
}

.panel-filtros h3:first-child { margin-top: 0; }

.opcion-filtro {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: var(--radio-sm);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.opcion-filtro:hover { background: rgba(184, 150, 62, 0.08); }

.opcion-filtro input { accent-color: var(--dorado); }

.categoria-grupo { border-bottom: 1px solid var(--borde); }
.categoria-grupo:last-child { border-bottom: none; }

.categoria-grupo-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: var(--radio-sm);
  transition: background-color 0.12s ease;
}
.categoria-grupo-cabecera:hover { background: rgba(184, 150, 62, 0.08); }
.categoria-grupo-cabecera .opcion-filtro { padding: 0; margin: 0; flex: 1; }
.categoria-grupo-cabecera .opcion-filtro:hover { background: none; }

.btn-expandir-subcategoria {
  background: none;
  border: none;
  color: var(--gris);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 4px;
  transform: rotate(0deg);
  transition: transform 0.15s ease;
}
.categoria-grupo.abierta .btn-expandir-subcategoria { transform: rotate(180deg); }

.lista-subcategorias {
  display: none;
  padding: 0 0 8px 24px;
}
.categoria-grupo.abierta .lista-subcategorias { display: block; }

.opcion-subcategoria {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  margin: 0 -8px;
  border-radius: var(--radio-sm);
  font-size: 0.85rem;
  color: var(--gris);
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.opcion-subcategoria:hover { background: rgba(184, 150, 62, 0.08); }
.opcion-subcategoria input { accent-color: var(--dorado); }

.rango-filtro { font-size: 0.85rem; }
.rango-filtro output { color: var(--dorado); font-weight: 600; }
.rango-filtro input[type="range"] {
  width: 100%;
  accent-color: var(--dorado);
  margin-top: 6px;
}

.btn-limpiar-filtros {
  margin-top: 16px;
  width: 100%;
  background: none;
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 8px;
  font-size: 0.8rem;
  color: var(--gris);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-limpiar-filtros:hover { border-color: var(--dorado); color: var(--dorado); }

/* ===== Grid productos ===== */
.titulo-seccion {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--negro);
  margin: 8px 0 16px;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}
/* Antes era un border-bottom que subrayaba todo el ancho del texto: un
   acento corto y fijo se siente menos "bloque" y más de marca, sin
   abandonar el lenguaje de mayúsculas + tracking que usa el resto del
   sitio (h3 de filtros, labels de formulario, etc). */
.titulo-seccion::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--dorado);
}

.grid-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.tarjeta-producto {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  animation: aparecer-tarjeta 0.35s ease both;
}

@keyframes aparecer-tarjeta {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.tarjeta-producto:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-md);
  border-color: var(--dorado-claro);
}

.tarjeta-producto .render {
  position: relative;
  aspect-ratio: 1 / 1;
  /* Sin esto, una imagen real (p. ej. muy vertical) fuerza su propio alto
     mínimo como item flex/grid y rompe el aspect-ratio de la tarjeta. */
  min-height: 0;
  overflow: hidden;
  background: var(--superficie);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tarjeta-producto .render img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-producto .render:empty::after { content: attr(data-tipo); }

.badge-ref-tarjeta {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(20, 18, 15, 0.82);
  color: var(--crema);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 999px;
}

.badge-material-tarjeta {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: var(--dorado);
  color: var(--texto-sobre-dorado);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 4px 9px;
  border-radius: 999px;
}

.info-tarjeta {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.info-tarjeta .categoria-eyebrow {
  font-size: 0.7rem;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.info-tarjeta .nombre {
  font-family: var(--fuente-serif);
  font-size: 1.15rem;
  font-weight: 400;
  margin: 1px 0;
}
.info-tarjeta .peso { font-size: 0.82rem; color: var(--gris); }
.info-tarjeta .precio { font-size: 1rem; font-weight: 700; margin-top: 4px; }

.btn {
  display: inline-block;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.btn:active { transform: scale(0.97); }

.btn-dorado { background: var(--dorado); color: var(--texto-sobre-dorado); }
.btn-dorado:hover { background: var(--dorado-claro); }
.btn-oscuro { background: var(--negro); color: var(--crema); }
.btn-oscuro:hover { background: #2a2620; }
.btn-borde {
  background: transparent;
  border: 1px solid var(--negro);
  color: var(--negro);
}
.btn-full { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:disabled:active { transform: none; }

.btn-ver {
  margin: 0 14px 14px;
  background: var(--negro);
  color: var(--crema);
  border-radius: 6px;
  padding: 9px;
  font-size: 0.78rem;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-ver:hover { background: var(--dorado); color: var(--texto-sobre-dorado); }

.sin-resultados {
  padding: 40px;
  text-align: center;
  color: var(--gris);
}
.sin-resultados::before {
  content: "🔍";
  display: block;
  font-size: 1.8rem;
  margin-bottom: 10px;
  opacity: 0.5;
}

/* ===== Ficha de producto ===== */
.ficha-producto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 40px 0;
}

.ficha-render {
  background: var(--superficie);
  border-radius: var(--radio);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris);
  overflow: hidden;
}
.ficha-render img { width: 100%; height: 100%; object-fit: cover; }

.galeria-miniaturas {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.miniatura-galeria {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  background: var(--superficie);
  cursor: pointer;
}
.miniatura-galeria img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura-galeria.activa { border-color: var(--dorado); }
.ficha-render:empty::after { content: attr(data-tipo); text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem; }

.ficha-info .ref { color: var(--dorado); font-weight: 700; letter-spacing: 1px; font-size: 0.85rem; }
.ficha-info h1 { margin: 6px 0 14px; font-size: 1.5rem; }
.ficha-info .descripcion { color: var(--gris); margin-bottom: 18px; }

.tabla-specs {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 22px;
  font-size: 0.9rem;
}
.tabla-specs td { padding: 9px 0; border-bottom: 1px solid var(--borde); }
.tabla-specs td:first-child { color: var(--gris); width: 45%; }
.tabla-specs td:last-child { font-weight: 600; text-align: right; }

.opciones-talla button {
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.opciones-talla button:hover:not(.activo) { border-color: var(--dorado); color: var(--dorado); }

.miniatura-galeria {
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.miniatura-galeria:hover:not(.activa) { border-color: var(--dorado-claro); transform: translateY(-2px); }

.selector-bloque { margin-bottom: 18px; }
.selector-bloque label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gris);
  margin-bottom: 8px;
}

.opciones-talla { display: flex; gap: 8px; flex-wrap: wrap; }
.opciones-talla button {
  min-width: 42px;
  padding: 8px 0;
  border: 1px solid var(--borde);
  background: var(--blanco);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.opciones-talla button.activo {
  border-color: var(--dorado);
  background: var(--dorado);
  color: var(--texto-sobre-dorado);
}

.contador {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--borde);
  border-radius: 6px;
  overflow: hidden;
}
.contador button {
  background: var(--crema);
  border: none;
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.contador button:hover { background: var(--dorado); color: var(--texto-sobre-dorado); }
.contador input {
  width: 44px;
  border: none;
  text-align: center;
  font-size: 0.95rem;
  -moz-appearance: textfield;
}
.contador input::-webkit-outer-spin-button,
.contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.precio-total {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 18px 0;
}

/* ===== Visor 3D (STL) ===== */
.seccion-visor-stl { padding: 0 0 48px; }
.ayuda-visor { color: var(--gris); font-size: 0.85rem; margin: -6px 0 14px; }
.contenedor-visor-stl {
  width: 100%;
  height: 420px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: 16px;
}
.contenedor-visor-stl canvas { display: block; touch-action: none; }
@media (max-width: 600px) {
  .contenedor-visor-stl { height: 300px; }
}

/* ===== Calculadora ===== */
.tarjeta-calculadora {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 24px;
  max-width: 420px;
  margin: 0 auto;
  box-shadow: var(--sombra);
}
.tarjeta-calculadora h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 18px;
}
.campo-calc { margin-bottom: 16px; }
.campo-calc label { display: block; font-size: 0.82rem; color: var(--gris); margin-bottom: 6px; }
.campo-calc input[type="number"] {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  font-size: 0.95rem;
}
.separador-calc { border: none; border-top: 1px dashed var(--borde); margin: 18px 0; }
.resumen-calc { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 4px 0; }
.resumen-calc.total { font-weight: 700; font-size: 1.1rem; padding-top: 10px; border-top: 1px solid var(--borde); margin-top: 6px; }


/* ===== Carrito ===== */
.pagina-carrito { padding: 40px 0 60px; }
.fila-carrito {
  display: grid;
  grid-template-columns: 80px 1fr auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 8px;
  margin: 0 -8px;
  border-radius: var(--radio-sm);
  border-bottom: 1px solid var(--borde);
  transition: background-color 0.15s ease;
}
.fila-carrito:hover { background: rgba(184, 150, 62, 0.05); }
.fila-carrito .render-mini {
  width: 70px;
  height: 70px;
  border-radius: 6px;
  background: var(--superficie);
  overflow: hidden;
}
.fila-carrito .render-mini img { width: 100%; height: 100%; object-fit: cover; }
.fila-carrito .detalle .ref { color: var(--dorado); font-size: 0.75rem; font-weight: 700; }
.fila-carrito .detalle .nombre { font-weight: 600; }
.fila-carrito .detalle .talla { font-size: 0.82rem; color: var(--gris); }
.fila-carrito .quitar {
  background: none;
  border: none;
  color: #b23b3b;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 6px 8px;
  border-radius: var(--radio-sm);
  transition: background-color 0.15s ease;
}
.fila-carrito .quitar:hover { background: #fbe9e9; }

.resumen-pedido {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 22px;
  margin-top: 24px;
  max-width: 360px;
  margin-left: auto;
}
.resumen-pedido .linea { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.92rem; }
.resumen-pedido .linea.total { font-weight: 700; font-size: 1.15rem; border-top: 1px solid var(--borde); margin-top: 8px; padding-top: 12px; }
.carrito-vacio { text-align: center; padding: 60px 0; color: var(--gris); }
/* Mismo bloque de estado vacío para dos contextos (carrito.html y "producto
   no encontrado" en producto.html): se distingue el ícono por id, no por
   clase, para no duplicar la clase compartida. */
#carrito-vacio::before {
  content: "🛒";
  display: block;
  font-size: 2.2rem;
  margin-bottom: 12px;
  opacity: 0.45;
}
#producto-no-encontrado::before {
  content: "🔎";
  display: block;
  font-size: 2.2rem;
  margin-bottom: 12px;
  opacity: 0.45;
}

/* ===== Checkout ===== */
.pagina-checkout { padding: 40px 0 60px; display: grid; grid-template-columns: 1fr 380px; gap: 40px; }
.formulario-datos label { display: block; font-size: 0.82rem; color: var(--gris); margin: 14px 0 6px; }
.formulario-datos input, .formulario-datos textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
}
.error-campo { color: #b23b3b; font-size: 0.78rem; margin-top: 4px; display: none; }

input[type="file"] {
  font-size: 0.85rem;
  color: var(--gris);
  padding: 4px 0;
}
input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--borde);
  background: var(--crema);
  color: var(--negro);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--dorado);
  color: var(--dorado);
}

/* ===== Confirmación ===== */
.pagina-confirmacion {
  max-width: 480px;
  margin: 60px auto;
  text-align: center;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-md);
  padding: 40px 28px;
  animation: aparecer-confirmacion 0.4s ease;
}
.icono-check {
  width: 64px; height: 64px; border-radius: 50%;
  background: #e7f6ec; color: #2f9e52;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin: 0 auto 18px;
  animation: entrar-check 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes aparecer-confirmacion {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes entrar-check {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}
.pagina-confirmacion .numero-orden { font-size: 1.3rem; font-weight: 700; margin: 10px 0; }
.estado-pago {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.estado-pago.aprobado { background: #e7f6ec; color: #2f9e52; }
.estado-pago.pendiente { background: #fff6e0; color: #a67c00; }
.estado-pago.rechazado { background: #fbe9e9; color: #b23b3b; }
.btn-whatsapp {
  background: #25d366; color: #fff; margin-top: 20px;
}
.btn-whatsapp:hover { background: #1fb85a; }

/* ===== Recursos / FAQ ===== */
.seccion-recursos { padding: 40px 0; }
.grid-recursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tarjeta-recurso {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.tarjeta-recurso:hover { box-shadow: var(--sombra-md); border-color: var(--dorado-claro); }
.tarjeta-recurso .icono { font-size: 1.4rem; }
.tarjeta-recurso .titulo { font-weight: 600; }
.btn-ver-recurso {
  background: none;
  border: none;
  padding: 0;
  color: var(--dorado);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s ease;
}
.btn-ver-recurso:hover { color: var(--dorado-claro); text-decoration: underline; }

/* ===== Visor de PDF en modal: abre el documento dentro de la misma
   página en vez de navegar al archivo suelto. Oculta la barra de
   herramientas nativa del visor (incluye su botón de descarga) con
   #toolbar=0 y bloquea el clic derecho; no es infalible, pero saca la
   descarga de "un clic" del flujo normal. ===== */
.modal-pdf {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-pdf-fondo {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 15, 0.72);
}
.modal-pdf-panel {
  position: relative;
  width: min(820px, 100%);
  height: min(88vh, 900px);
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-pdf-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--borde);
  font-weight: 700;
  font-size: 0.9rem;
}
.modal-pdf-cerrar {
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--gris);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radio-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.modal-pdf-cerrar:hover { background: var(--crema); color: var(--negro); }
.modal-pdf-panel iframe { flex: 1; width: 100%; border: none; background: var(--crema); }

.seccion-faq { padding: 20px 0 60px; }
.item-faq { border-bottom: 1px solid var(--borde); }
.item-faq summary {
  cursor: pointer;
  padding: 16px 4px;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.15s ease;
}
.item-faq summary:hover { color: var(--dorado); }
.item-faq summary::-webkit-details-marker { display: none; }
.item-faq summary::after { content: "+"; color: var(--dorado); font-size: 1.2rem; }
.item-faq[open] summary::after { content: "−"; }
.item-faq p { margin: 0 4px 16px; color: var(--gris); }

/* ===== Footer ===== */
/* ===== Botón flotante de WhatsApp (solo index.html) ===== */
.btn-whatsapp-flotante {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 300;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(20, 18, 15, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-whatsapp-flotante:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(20, 18, 15, 0.32); }
.btn-whatsapp-flotante svg { width: 30px; height: 30px; color: #ffffff; }
@media (max-width: 600px) {
  .btn-whatsapp-flotante { right: 16px; bottom: 16px; width: 50px; height: 50px; }
  .btn-whatsapp-flotante svg { width: 26px; height: 26px; }
}

.pie-pagina {
  /* Franja siempre oscura (no --negro, que se invierte en modo oscuro):
     es un elemento decorativo de fondo, no texto, así que no debe aclararse. */
  background: #14120f;
  color: #b6b2a8;
  padding: 28px 0;
  text-align: center;
  font-size: 0.82rem;
}
.pie-pagina .creditos-dev {
  margin-top: 6px;
  font-size: 0.72rem;
  color: #726e63;
}
.pie-pagina .creditos-dev a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}
.pie-pagina .creditos-dev a:hover { color: var(--dorado-claro); }

/* ===== Utilidades ===== */
.oculto { display: none !important; }

/* Respeta la preferencia de "reducir movimiento" del sistema: apaga las
   animaciones de entrada y transiciones largas para quien las desactivó. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ===== Admin: layout con menú lateral ===== */
.admin-layout { display: flex; min-height: 100vh; align-items: stretch; }

.admin-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--negro);
  color: var(--crema);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
}
.admin-sidebar-marca { margin-bottom: 26px; display: block; }
.admin-sidebar-marca .logo-img {
  display: block;
  height: 76px;
  width: auto;
  margin-bottom: 6px;
}
.admin-sidebar-marca .subtitulo {
  color: #b6b2a8;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.admin-sidebar-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.admin-sidebar-nav a {
  padding: 10px 12px;
  border-radius: 6px;
  color: #d8d4c8;
  font-size: 0.9rem;
  font-weight: 600;
}
.admin-sidebar-nav a:hover { background: #23201a; }
.admin-sidebar-nav a.activo { background: var(--dorado); color: var(--negro); }
.admin-sidebar-pie {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid #39352b;
}
.admin-sidebar-pie a { color: #b6b2a8; font-size: 0.82rem; }
.admin-sidebar-pie button {
  background: var(--dorado);
  color: var(--negro);
  border: none;
  border-radius: 6px;
  padding: 9px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}

.admin-main { flex: 1; min-width: 0; padding: 32px; }

@media (max-width: 760px) {
  .admin-layout { flex-direction: column; }
  .admin-sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 14px 16px;
  }
  .admin-sidebar-marca { margin-bottom: 0; }
  .admin-sidebar-nav {
    flex-direction: row;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 4px 10px;
    order: 3;
  }
  .admin-sidebar-nav a { padding: 6px 8px; font-size: 0.85rem; }
  .admin-sidebar-pie {
    flex-direction: row;
    align-items: center;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    margin-left: auto;
    order: 2;
  }
  .admin-main { padding: 20px 16px; max-width: 100% !important; overflow-x: hidden; }
}

/* ===== Admin: tarjetas del dashboard ===== */
.grid-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin: 20px 0 32px;
}
.tarjeta-stat {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px 18px;
}
.tarjeta-stat-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tarjeta-stat .icono-stat {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  background: rgba(184, 150, 62, 0.12);
}
.tarjeta-stat.icono-alerta .icono-stat { background: rgba(250, 178, 25, 0.16); }
.tarjeta-stat .valor { font-size: 1.7rem; font-weight: 700; line-height: 1; }
.tarjeta-stat .etiqueta { font-size: 0.8rem; color: var(--gris); margin-top: 4px; }
.tarjeta-stat .delta-stat { font-size: 0.72rem; margin-top: 8px; color: var(--gris); }
.tarjeta-stat .delta-stat.positivo { color: var(--estado-bueno); font-weight: 600; }

/* ===== Admin: gráficas del dashboard (ECharts) =====
   Colores de estado (pendiente/aprobado/rechazado): son semánticos, no de
   marca, así que van fijos y nunca se tocan con --dorado ni con el tema. */
:root {
  --estado-bueno: #0ca30c;
  --estado-alerta: #fab219;
  --estado-critico: #d03b3b;
}

.filtro-rango {
  display: inline-flex;
  gap: 4px;
  background: var(--crema);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 3px;
  margin: 4px 0 18px;
}
.filtro-rango button {
  border: none;
  background: none;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gris);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.filtro-rango button:hover { color: var(--negro); }
.filtro-rango button.activo { background: var(--dorado); color: var(--texto-sobre-dorado); }

.grid-graficas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin: 0 0 32px;
}
.grid-graficas.fila-ancha { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }

.tarjeta-grafica {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
  min-width: 0;
}
.tarjeta-grafica-cabecera { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
.tarjeta-grafica-cabecera .icono-grafica {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  background: rgba(184, 150, 62, 0.12);
}
.tarjeta-grafica .titulo-grafica { font-size: 0.85rem; font-weight: 700; margin: 0; }
.tarjeta-grafica .subtitulo-grafica { font-size: 0.75rem; color: var(--gris); margin: 2px 0 0; }
.tarjeta-grafica .lienzo-grafica { width: 100%; height: 220px; }
.tarjeta-grafica .lienzo-grafica.chico { height: 170px; }
.tarjeta-grafica .sin-datos-grafica {
  padding: 40px 0;
  text-align: center;
  color: var(--gris);
  font-size: 0.85rem;
}

/* Donut de estados: gráfica a la izquierda, conteo/porcentaje en filas a la
   derecha (en vez de una leyenda genérica) para que se lea como tabla. */
.fila-donut-estados { display: flex; align-items: center; gap: 18px; }
.fila-donut-estados .lienzo-grafica { width: 130px; height: 130px; flex-shrink: 0; }
.leyenda-estados { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.leyenda-estados .fila-leyenda-estado {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--negro);
}
.leyenda-estados .punto-leyenda { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.leyenda-estados .nombre-leyenda { flex: 1; }
.leyenda-estados .cuenta-leyenda { font-weight: 700; }
.leyenda-estados .pct-leyenda { color: var(--gris); font-size: 0.75rem; width: 34px; text-align: right; }

.tabla-ultimos-pedidos-vacia { padding: 24px; text-align: center; color: var(--gris); font-size: 0.85rem; }
.tooltip-grafica strong { font-size: 0.85rem; }
.grid-accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.tarjeta-acceso {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tarjeta-acceso .titulo { font-weight: 700; }
.tarjeta-acceso .descripcion { font-size: 0.85rem; color: var(--gris); flex: 1; }
.tarjeta-acceso.proximamente { opacity: 0.55; }

.admin-shell { padding: 0 0 40px; }
.admin-cabecera-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--negro);
}
.admin-login-card {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 32px;
  width: 100%;
  max-width: 360px;
  box-shadow: var(--sombra);
}
.admin-login-card .logo-img {
  display: block;
  height: 56px;
  width: auto;
  margin: 0 auto 14px;
}
.admin-login-card h1 {
  font-size: 1.1rem;
  margin: 0 0 4px;
  text-align: center;
}
.admin-login-card .subtitulo {
  text-align: center;
  color: var(--gris);
  font-size: 0.85rem;
  margin-bottom: 20px;
  display: block;
}
.tabla-admin {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.tabla-admin th, .tabla-admin td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--borde);
  font-size: 0.88rem;
}
.tabla-admin th {
  background: var(--crema);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.72rem;
  color: var(--gris);
}
.tabla-admin tr:last-child td { border-bottom: none; }
.badge-tipo {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--superficie);
  font-size: 0.75rem;
  font-weight: 600;
}
.acciones-fila { display: flex; gap: 8px; }
.acciones-fila button, .acciones-fila a {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dorado);
}
.acciones-fila .eliminar { color: #b23b3b; }
.fila-medida {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mensaje-admin {
  font-size: 0.85rem;
  margin-top: 10px;
  min-height: 1.2em;
}
.mensaje-admin.error { color: #b23b3b; }
.mensaje-admin.ok { color: #2f9e52; }
.mensaje-admin a { color: var(--dorado); font-weight: 600; }
.tabla-vacia { padding: 40px; text-align: center; color: var(--gris); }

.barra-tabla-productos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.barra-tabla-productos #buscador-productos {
  flex: 1;
  min-width: 220px;
  padding: 9px 14px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 0.9rem;
}
.etiqueta-tamano-pagina {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--gris);
  white-space: nowrap;
}
.etiqueta-tamano-pagina select {
  padding: 6px 10px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  font-size: 0.85rem;
  background: var(--blanco);
}
.paginacion-productos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--gris);
}
.botones-paginacion {
  display: flex;
  align-items: center;
  gap: 12px;
}
.botones-paginacion .btn {
  padding: 7px 14px;
  font-size: 0.78rem;
}
.botones-paginacion .btn:disabled { opacity: 0.4; cursor: default; }
#indicador-pagina { white-space: nowrap; }
.btn-ver-pedido {
  border: 1px solid var(--borde);
  background: var(--blanco);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--gris);
}
.btn-ver-pedido:hover { border-color: var(--dorado); color: var(--dorado); }
.fila-detalle-pedido td { background: var(--crema); padding: 16px !important; }
.detalle-pedido {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.detalle-pedido strong {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris);
  margin-bottom: 6px;
}
.detalle-pedido p { margin: 0; font-size: 0.88rem; line-height: 1.5; }
.detalle-pedido ul { margin: 0; padding-left: 18px; font-size: 0.88rem; }
.detalle-pedido li { margin-bottom: 4px; }
.acciones-pedido {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}
.acciones-pedido .btn { padding: 8px 16px; font-size: 0.78rem; }
.acciones-pedido .btn:disabled { opacity: 0.5; cursor: default; }
.miniatura-admin {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--borde);
}
.miniatura-admin img { width: 100%; height: 100%; object-fit: cover; }

.galeria-imagenes-admin {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}
.miniatura-admin-editable {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.miniatura-acciones { display: flex; gap: 4px; }
.miniatura-acciones button {
  width: 24px;
  height: 24px;
  border: 1px solid var(--borde);
  background: var(--blanco);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--gris);
}
.miniatura-acciones button:hover { border-color: var(--dorado); color: var(--dorado); }

.chips-tallas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.chip-talla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--crema);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 5px 6px 5px 14px;
  font-size: 0.85rem;
  font-weight: 600;
}
.chip-talla button {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--gris);
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
}
.chip-talla button:hover { background: #fbe9e9; color: #b23b3b; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .zona-catalogo { grid-template-columns: 1fr; }
  .panel-filtros { position: static; }
  .ficha-producto { grid-template-columns: 1fr; }
  .pagina-checkout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .btn-menu-movil { display: flex; }

  /* El nav pasa a ser un panel desplegable anclado a la cabecera (que ya
     es position:sticky, así que sirve de referencia para el absolute)
     en vez de envolverse en varias líneas dentro del header. */
  .nav-principal {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--blanco);
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra-md);
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }
  .nav-principal.abierto {
    /* Antes 320px fijo: con el menú de categorías desplegado adentro (más
       las subcategorías) el contenido puede superar eso y quedaba
       recortado sin que se notara que había más. */
    max-height: min(80vh, 600px);
    overflow-y: auto;
    opacity: 1;
    padding: 8px 20px 14px;
  }
  .nav-principal a { padding: 12px 4px; }
  .nav-principal a::after { display: none; }
  .nav-principal a[aria-current="page"] {
    background: rgba(184, 150, 62, 0.08);
    border-radius: var(--radio-sm);
    padding-left: 10px;
  }

  /* El menú de categorías, adentro del panel móvil, se ve como un ítem más
     de la lista (con acordeón), no como la tarjeta flotante de escritorio. */
  .nav-cat-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 12px 4px;
  }
  .nav-cat-toggle::after { display: none; }
  .nav-cat-panel {
    position: static;
    display: block;
    max-height: 0;
    overflow: hidden;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 0 0 10px;
    min-width: 0;
    transition: max-height 0.2s ease;
  }
  .nav-categorias.abierto .nav-cat-panel { max-height: 600px; }
  .nav-cat-categoria, .nav-cat-subcategoria { padding: 9px 10px; }
}

@media (max-width: 600px) {
  .buscador-rapido input { width: 100%; }
  .hero h1 { font-size: 1.5rem; }
  .fila-carrito { grid-template-columns: 60px 1fr; grid-template-rows: auto auto; }

  /* Tarjetas de producto: con el minmax(220px,1fr) de escritorio, una
     pantalla angosta solo alcanza para 1 columna y se ven enormes. Se
     fuerzan 2 columnas y se reduce el padding interno para que quepan
     bien. */
  .grid-productos { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .info-tarjeta { padding: 10px; gap: 2px; }
  .info-tarjeta .nombre { font-size: 1rem; }
  .badge-ref-tarjeta, .badge-material-tarjeta { font-size: 0.62rem; padding: 3px 8px; }
  .btn-ver { margin: 0 10px 10px; font-size: 0.7rem; padding: 8px; }
}