/* El catalogo publico.
 *
 * Movil primero: el 95 % de los clientes entran desde el telefono (AGENTS.md §4), asi que el
 * ancho estrecho es el caso normal y el escritorio es la excepcion que anade columnas.
 *
 * Tipografias DEL SISTEMA a proposito (Centro de Mando, autorizacion PR #10, punto 6): esta
 * pagina la abre cualquiera desde un enlace de WhatsApp, y pedir la fuente a un tercero le
 * manda la IP de cada visitante.
 *
 * La paleta y los nombres de las variables salen de inventario/maqueta.html para que las dos
 * pantallas se parezcan.
 */

:root {
  --ground: #e9ecef;
  --paper: #ffffff;
  --paper-2: #f5f7f8;
  --ink: #0e1519;
  --ink-2: #465561;
  --ink-3: #5a6874;
  --line: #dde3e7;
  --line-2: #edf1f3;
  --marine: #12546f;
  --marine-ink: #ffffff;
  --marine-wash: #e1edf3;
  --stop: #ac2318;
  --stop-wash: #f7e0de;
  --sombra: 0 1px 2px rgba(14, 21, 25, 0.05), 0 8px 24px -12px rgba(14, 21, 25, 0.18);
  --sombra-alta: 0 -8px 30px -10px rgba(14, 21, 25, 0.3);
  --radio: 10px;
  --diana: 44px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0a1218;
    --paper: #111e26;
    --paper-2: #0d1920;
    --ink: #e6eef3;
    --ink-2: #b3c4ce;
    --ink-3: #93a7b4;
    --line: #243743;
    --line-2: #1a2a34;
    --marine: #6fb8d6;
    --marine-ink: #06131a;
    --marine-wash: #12303e;
    --stop: #f08078;
    --stop-wash: #321614;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px -14px rgba(0, 0, 0, 0.7);
    --sombra-alta: 0 -8px 30px -10px rgba(0, 0, 0, 0.75);
  }
}

:root[data-theme="dark"] {
  --ground: #0a1218;
  --paper: #111e26;
  --paper-2: #0d1920;
  --ink: #e6eef3;
  --ink-2: #b3c4ce;
  --ink-3: #93a7b4;
  --line: #243743;
  --line-2: #1a2a34;
  --marine: #6fb8d6;
  --marine-ink: #06131a;
  --marine-wash: #12303e;
  --stop: #f08078;
  --stop-wash: #321614;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px -14px rgba(0, 0, 0, 0.7);
  --sombra-alta: 0 -8px 30px -10px rgba(0, 0, 0, 0.75);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Sin desborde lateral pase lo que pase: es lo primero que se mira a 375 px. */
  overflow-x: hidden;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

.envoltorio {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px 96px;
}

/* Solo para lectores de pantalla. */
.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Que el foco SIEMPRE se vea: se navega con teclado y sin foco visible no se puede. */
:focus-visible {
  outline: 3px solid var(--marine);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- cabecera ---------- */

.cabecera {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.cabecera__interior {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* La diana de toque llega a 44 px aunque el texto sea mas bajo: se pulsa con el pulgar. */
.cabecera__marca {
  display: inline-flex;
  align-items: center;
  min-height: var(--diana);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
  text-decoration: none;
}

.cabecera__nota {
  font-size: 0.75rem;
  color: var(--ink-2);
  margin: 2px 0 0;
}

/* ---------- controles ---------- */

.etiqueta {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 6px;
}

.control {
  width: 100%;
  min-height: var(--diana);
  padding: 10px 12px;
  font: inherit;
  font-size: 1rem; /* 16 px: por debajo, iOS hace zoom al enfocar. */
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* Apagado, pero legible: el texto de dentro («Elige una marca primero») es la instrucción que
   dice por qué está apagado. Con --ink-3 se quedaba en 3,45:1. */
.control:disabled { color: var(--ink-2); background: var(--paper-2); }

/* ⚠️ La opción NO hereda del select apagado: el navegador le pone un gris suyo (rgb(109,109,109)),
   que en tema oscuro se queda en 3,45:1. Se le pone color a la opción, no solo al select. */
.control:disabled option,
.control option { color: var(--ink); background: var(--paper); }

.boton {
  min-height: var(--diana);
  min-width: var(--diana);
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.boton--primario {
  background: var(--marine);
  border-color: var(--marine);
  color: var(--marine-ink);
}

.insignia {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--marine);
  color: var(--marine-ink);
  font-size: 0.75rem;
  font-weight: 700;
}

.boton--primario .insignia { background: var(--marine-ink); color: var(--marine); }

/* ---------- cabecera de la lista ---------- */

.cabecera-lista {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 0 14px;
}

.cabecera-lista__cuenta {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cabecera-lista__orden { min-width: 210px; }

/* ---------- barra de filtros del telefono ---------- */

.barra-movil {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 8px;
  padding: 10px 0;
  background: var(--ground);
}

.barra-movil .control { flex: 1 1 auto; }
.barra-movil .boton--filtrar { flex: 0 0 auto; }

/* ---------- cuadricula ---------- */

.cuadricula {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 600px) {
  .cuadricula { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .cuadricula { grid-template-columns: repeat(3, 1fr); }
}

.tarjeta {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.tarjeta__enlace {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* La foto A SANGRE: llena la tarjeta de borde a borde (PLAN.md §11, decision de Jose). */
.tarjeta__marco {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
}

.tarjeta__foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tarjeta__foto--sinfoto {
  background: repeating-linear-gradient(
    135deg,
    var(--line-2),
    var(--line-2) 12px,
    var(--paper-2) 12px,
    var(--paper-2) 24px
  );
}

.tarjeta__cuerpo { display: block; padding: 12px 14px 16px; }

.tarjeta__meta {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.tarjeta__titulo {
  margin: 4px 0 10px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.tarjeta__precio {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
}

.tarjeta__precio-etiqueta { font-size: 0.8rem; color: var(--ink-2); }
.tarjeta__precio-cifra { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.tarjeta__precio--sin { color: var(--ink-2); }

.tarjeta__desglose { margin-top: 6px; display: grid; gap: 2px; }

.tarjeta__linea {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--ink-2);
}

/* ---------- esqueletos ---------- */

.tarjeta--esqueleto .tarjeta__foto {
  aspect-ratio: 4 / 3;
  background: var(--line-2);
}

.tarjeta--esqueleto .linea {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: var(--line-2);
  margin: 10px 0;
}

.tarjeta--esqueleto .linea--corta { width: 55%; }

/* ---------- avisos ---------- */

.aviso {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: 28px 20px;
  text-align: center;
  margin: 8px 0;
}

.aviso--error { border-color: var(--stop); background: var(--stop-wash); }
.aviso__titulo { margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; }
.aviso__texto { margin: 0 0 16px; color: var(--ink-2); }

/* ---------- filtros: hoja abajo en el telefono ---------- */

.velo {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(14, 21, 25, 0.45);
  border: 0;
  padding: 0;
}

.velo[hidden] { display: none; }

.hoja {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--paper);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: var(--sombra-alta);
  transform: translateY(100%);
  transition: transform 0.22s ease-out;
}

.hoja.esta-abierta { transform: translateY(0); }

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

.hoja__cabecera {
  position: sticky;
  top: 0;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.hoja__titulo { margin: 0; font-size: 1.05rem; font-weight: 700; }

.filtros { padding: 16px; display: grid; gap: 16px; }
.filtros__grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.filtros__par { display: flex; align-items: center; gap: 8px; }
.filtros__guion { color: var(--ink-2); }

.filtros__pie {
  display: flex;
  gap: 10px;
  padding-top: 4px;
}

.filtros__pie .boton { flex: 1 1 0; }

/* En pantalla ancha la hoja deja de ser hoja y se queda de columna. */
@media (min-width: 900px) {
  .disposicion {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
  }

  .barra-movil { display: none; }

  .velo { display: none !important; }

  .hoja {
    position: sticky;
    top: 16px;
    transform: none;
    max-height: none;
    overflow: visible;
    border-radius: var(--radio);
    border: 1px solid var(--line);
    box-shadow: var(--sombra);
  }

  .hoja__cerrar { display: none; }
}

/* ---------- ficha ---------- */

.migas {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0;
  font-size: 0.85rem;
  color: var(--ink-2);
}

/* Es el enlace de VOLVER, y se pulsa con el pulgar: 44 px de alto como cualquier otra diana.
   Medía 20,4 px porque solo se le había puesto color. */
.migas a {
  display: inline-flex;
  align-items: center;
  min-height: var(--diana);
  padding: 0 2px;
  color: var(--marine);
}

.ficha { padding-bottom: 32px; }

.galeria { display: grid; gap: 10px; }

/* IMPORTANTE 7 — la foto salia vertical y se comia la pantalla del telefono.
   `vista-ficha.mjs` pone width="1200" height="900" en la etiqueta, y esos atributos
   valen como CSS de baja prioridad. Aqui se pisaba el ancho pero NO el alto, asi que
   quedaban las dos medidas fijas: 100% de ancho y 900px de alto. Y `aspect-ratio` solo
   rellena la medida que falta: con las dos puestas, se ignora.
   El alto tiene que decir `auto` para que 4/3 tenga algo que calcular. */
.galeria__principal {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--paper-2);
  display: block;
}

.galeria__principal--sinfoto {
  background: repeating-linear-gradient(
    135deg,
    var(--line-2),
    var(--line-2) 14px,
    var(--paper-2) 14px,
    var(--paper-2) 28px
  );
}

.galeria__tiras {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.galeria__mini {
  width: 96px;
  height: 72px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-2);
  cursor: pointer;
}

.galeria__mini.es-actual { border-color: var(--marine); }
.galeria__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ficha__cabecera { padding: 18px 0 10px; }

.ficha__titulo {
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.ficha__meta { margin: 6px 0 0; color: var(--ink-2); }

.precio {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: 6px 16px;
  margin: 16px 0;
}

.precio__fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-2);
}

.precio__fila:last-child { border-bottom: 0; }

/* «Puesto en Cuba» es la suma, y se ve que lo es. */
.precio__fila--total {
  background: var(--marine-wash);
  margin: 0 -16px;
  padding: 14px 16px;
  border-radius: 0 0 var(--radio) var(--radio);
}

.precio__etiqueta { display: grid; gap: 2px; font-weight: 600; }

.precio__nota {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--ink-2);
  max-width: 42ch;
}

.precio__cifra { font-size: 1.2rem; font-weight: 700; white-space: nowrap; }
.precio__fila--total .precio__cifra { font-size: 1.5rem; }
.precio__sin { color: var(--ink-2); padding: 14px 0; margin: 0; }

.bloque { margin: 24px 0; }

.bloque__titulo {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 600px) {
  .specs { grid-template-columns: 1fr 1fr; }
  .ficha__datos { max-width: 720px; }
}

.specs__item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

@media (min-width: 900px) {
  .ficha {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 28px;
    align-items: start;
  }

  .migas { grid-column: 1 / -1; }
}

/* ---------- pie ---------- */

.pie {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding: 20px 0 0;
  color: var(--ink-2);
  font-size: 0.82rem;
}