/* Sistema de diseño editorial: papel White Cloud (Benjamin Moore 2159-70) y tinta en escala de grises.
   Todos los colores salen de estos tokens; el modo oscuro solo cambia sus valores.
   Claro  (sobre #faf3e2): tinta 15.7:1 · tinta-2 8.7:1 · tinta-3 6.3:1 · línea 3.9:1
   Oscuro (sobre #161616): tinta 16.4:1 · tinta-2 9.6:1 · tinta-3 7.6:1 · línea 4.2:1 */
:root {
  --papel: #faf3e2;
  --papel-2: #f1eada;
  --tinta: #1a1a1a;
  --tinta-2: #454545;
  --tinta-3: #595959;
  --linea: #7a7a7a;   /* bordes de controles (>= 3:1) */
  --filete: #bdbdbd;  /* filetes decorativos */
  --velo: rgba(250, 243, 226, .93); /* fondo del panel de código sobre la obra */
  --display: "IM Fell English", "EB Garamond", Georgia, serif;
  --serif: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  color-scheme: light;
}

/* Modo oscuro: sigue al sistema salvo que se elija "claro" a mano */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #161616;
    --papel-2: #1f1f1f;
    --tinta: #faf3e2;
    --tinta-2: #bdbdbd;
    --tinta-3: #a8a8a8;
    --linea: #7a7a7a;
    --filete: #3a3a3a;
    --velo: rgba(22, 22, 22, .93);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #161616;
  --papel-2: #1f1f1f;
  --tinta: #faf3e2;
  --tinta-2: #bdbdbd;
  --tinta-3: #a8a8a8;
  --linea: #7a7a7a;
  --filete: #3a3a3a;
  --velo: rgba(22, 22, 22, .93);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--papel); color: var(--tinta); }
body {
  font: 19px/1.55 var(--serif);
  font-feature-settings: "liga", "onum";
  -webkit-font-smoothing: antialiased;
}
a { color: var(--tinta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
button { font: inherit; color: inherit; }

/* ---------- Portada ---------- */
.cabecera { max-width: 1180px; margin: 0 auto; padding: 40px 32px 8px; text-align: center; }
.antetitulo {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 28px; padding-bottom: 8px; border-bottom: 1px solid var(--tinta);
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2);
}
.cabecera h1 {
  margin: 0; font: 400 clamp(52px, 10vw, 120px)/.95 var(--display);
  letter-spacing: -.01em;
}
.subtitulo {
  margin: 14px 0 0; font: italic 400 clamp(19px, 2.4vw, 26px)/1.3 var(--display); color: var(--tinta-2);
}
.doble {
  border: 0; height: 5px; margin: 28px 0 32px;
  border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--tinta);
}
.bajada {
  max-width: 34em; margin: 0 auto 12px; text-align: left; hyphens: auto;
  font-size: 21px; line-height: 1.6;
}
.bajada::first-letter {
  float: left; font: 400 3.4em/.8 var(--display); margin: .08em .1em 0 0; color: var(--tinta);
}
.meta {
  margin: 0 0 36px; font-size: 15px; font-style: italic; color: var(--tinta-3);
}

/* Selector de tema */
.tema {
  padding: 0 0 0 8px; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--tinta-2);
}
.tema:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }

/* Filtros */
.filtros {
  display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: center;
  padding: 14px 0; border-top: 1px solid var(--filete); border-bottom: 1px solid var(--filete);
}
#buscar {
  flex: 0 1 240px; min-width: 0; padding: 6px 2px; border: 0; border-bottom: 1px solid var(--linea);
  background: transparent; color: var(--tinta); font: italic 18px var(--serif); border-radius: 0;
}
#buscar::placeholder { color: var(--tinta-3); opacity: 1; }
#buscar:focus { outline: none; border-bottom: 2px solid var(--tinta); }
.chips { display: flex; flex-wrap: wrap; gap: 4px 6px; justify-content: center; }
.chip {
  padding: 3px 10px; border: 1px solid transparent; border-radius: 0; background: none;
  font: 14px var(--serif); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-2); cursor: pointer;
}
.chip:hover { color: var(--tinta); border-bottom-color: var(--tinta); }
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }

/* ---------- Catálogo ---------- */
.grilla {
  display: grid; gap: 44px 32px; max-width: 1180px; margin: 0 auto; padding: 40px 32px 64px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.tarjeta {
  display: block; align-self: start; padding: 0; border: 0; background: none;
  text-align: left; cursor: pointer;
}
.mini {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--papel-2); border: 1px solid var(--tinta);
  outline: 1px solid var(--filete); outline-offset: 4px; margin: 5px;
}
.mini img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.08);
  transition: filter .35s ease;
}
/* El color de la obra aparece al pasar el mouse */
.tarjeta:hover .mini img, .tarjeta:focus-visible .mini img { filter: none; }
.mini .sin {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: italic 44px var(--display); color: var(--tinta-3);
}
.tarjeta:focus-visible { outline: 2px solid var(--tinta); outline-offset: 6px; }
.pie-tarjeta { display: flex; gap: 10px; align-items: baseline; padding: 12px 5px 0; border-bottom: 1px solid var(--filete); padding-bottom: 6px; }
.num {
  flex: none; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3);
}
.nombre { font: italic 19px/1.3 var(--serif); }
.tarjeta:hover .nombre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tags { padding: 5px 5px 0; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.vacio { grid-column: 1 / -1; padding: 48px 0; text-align: center; font-style: italic; color: var(--tinta-2); }

.pie {
  max-width: 1180px; margin: 0 auto; padding: 20px 32px 48px; text-align: center;
  border-top: 2px solid var(--tinta); font-size: 15px; font-style: italic; color: var(--tinta-2);
}
.pie p { margin: 8px 0 0; }

/* ---------- Visor ---------- */
.visor { position: fixed; inset: 0; z-index: 10; background: #000; }
#lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.barra {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px;
  background: var(--papel); border-bottom: 3px double var(--tinta);
}
.barra button, .barra a {
  padding: 4px 10px; border: 1px solid var(--linea); border-radius: 0; background: var(--papel);
  color: var(--tinta); cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 15px/1.3 var(--serif); letter-spacing: .04em;
}
.barra button:hover, .barra a:hover { border-color: var(--tinta); background: var(--papel-2); }
.barra button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.titulo {
  padding: 0 6px; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: italic 20px var(--display);
}
.espacio { flex: 1; }
.versiones { display: flex; gap: 4px; flex-wrap: wrap; }
.versiones:empty { display: none; }
.versiones button { padding: 4px 8px; font-variant-numeric: lining-nums; }

.codigo {
  position: absolute; z-index: 1; left: 0; top: var(--alto-barra, 56px); bottom: 0; width: min(580px, 48vw);
  padding: 18px 22px 56px; margin: 0; border: 0; border-right: 1px solid var(--tinta); resize: none;
  background: var(--velo); color: var(--tinta);
  font: 14px/1.6 var(--mono); tab-size: 2; white-space: pre; overflow: auto; outline: none;
}
.codigo:focus { box-shadow: inset 0 0 0 2px var(--tinta); }
.visor.sin-codigo .codigo, .visor.sin-codigo .ayuda { display: none; }
.ayuda {
  position: absolute; z-index: 2; left: 0; bottom: 0; width: min(580px, 48vw); margin: 0;
  padding: 8px 22px; background: var(--papel); border-top: 1px solid var(--filete); border-right: 1px solid var(--tinta);
  font-size: 13px; font-style: italic; color: var(--tinta-3);
}
.error {
  position: absolute; z-index: 3; right: 12px; bottom: 12px; max-width: min(520px, 90vw);
  padding: 10px 14px; background: var(--papel); color: var(--tinta);
  border: 1px solid var(--tinta); border-left: 6px solid var(--tinta);
  font: 14px/1.4 var(--mono); white-space: pre-wrap;
}
.aviso {
  position: absolute; z-index: 3; left: 50%; top: 72px; transform: translateX(-50%);
  max-width: min(540px, 90vw); padding: 10px 16px; background: var(--papel);
  border: 1px solid var(--tinta); outline: 1px solid var(--filete); outline-offset: 3px;
  font-size: 16px; font-style: italic; text-align: center;
}

@media (max-width: 700px) {
  body { font-size: 17px; }
  .cabecera { padding: 24px 16px 8px; }
  .antetitulo { justify-content: center; font-size: 11px; }
  .bajada { font-size: 18px; }
  .grilla { padding: 28px 16px 40px; gap: 32px 16px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pie-tarjeta { flex-direction: column; gap: 2px; }
  .nombre { font-size: 17px; }
  .pie { padding: 16px 16px 40px; }
  .codigo { width: 100%; top: auto; height: 45%; padding-top: 14px; padding-bottom: 14px; border-right: 0; border-top: 1px solid var(--tinta); }
  .titulo { max-width: 100%; order: -1; flex-basis: 100%; }
  .ayuda { display: none; }
}

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

/* Modo captura (miniaturas): solo el lienzo */
.captura .cabecera, .captura .grilla, .captura .pie,
.captura .barra, .captura .codigo, .captura .ayuda, .captura .aviso, .captura .error { display: none !important; }
.captura .visor { background: #000; }