/* ============================================================
   EL ARCHIVO DREAMCORE — style.css
   Web 1.0 fiel: biseles, Comic Sans + Times, esquinas cuadradas.
   Fondo = FOTO liminal real (fija). Sin backdrop-filter, sin
   blur animado: el "cristal" se finge con rgba opacos.
   ============================================================ */

:root {
  /* día: las 3 de la tarde de un verano que no existió */
  --cielo: #a8d8f0;
  --cielo-claro: #c8e8f8;
  --hierba: #5a9632;
  --hierba-clara: #7ab648;
  --nube-rosa: #ffd6e8;
  --casa: #f0ece4;
  --tinta: #22303a;
  --tinta-suave: #4a5a64;
  --panel: rgba(240, 236, 228, 0.90);
  --panel-solido: #f0ece4;
  --titulo-bar: #6f9ec4;
  --titulo-texto: #ffffff;
  --enlace: #1a4fa0;
  --enlace-visitado: #7a4a8a;
  --bisel-claro: #ffffff;
  --bisel-oscuro: #8a9aa4;
  --fosforo: #33ff66;
  --velo-1: rgba(168, 216, 240, 0.50);
  --velo-2: rgba(200, 232, 248, 0.72);
  --wallpaper: url("../actual_images/casa-horizonte.jpeg");
  --banner-foto: url("../actual_images/nubes-algodon.jpeg");
}

html[data-theme="noche"] {
  --cielo: #0c141f;
  --cielo-claro: #16222e;
  --hierba: #2e4a26;
  --hierba-clara: #3c6030;
  --nube-rosa: #5a4054;
  --casa: #1a2430;
  --tinta: #cfe0d8;
  --tinta-suave: #8aa094;
  --panel: rgba(16, 24, 34, 0.88);
  --panel-solido: #101822;
  --titulo-bar: #24364a;
  --titulo-texto: #cfe0d8;
  --enlace: #8ab8e8;
  --enlace-visitado: #b89ad0;
  --bisel-claro: #3c4e5e;
  --bisel-oscuro: #050a10;
  --velo-1: rgba(6, 12, 20, 0.66);
  --velo-2: rgba(6, 12, 20, 0.84);
  --wallpaper: url("../actual_images/pasillo-ventana.jpeg");
  --banner-foto: url("../actual_images/parque-domo.jpeg");
}

/* atardecer: la hora dorada, las nubes rosas de las seis */
html[data-theme="atardecer"] {
  --cielo: #f2b48c;
  --cielo-claro: #f8d4b4;
  --hierba: #8f7a3a;
  --hierba-clara: #b89a4a;
  --nube-rosa: #ffb3c8;
  --casa: #fbeede;
  --tinta: #4a2f33;
  --tinta-suave: #7a5560;
  --panel: rgba(251, 238, 222, 0.90);
  --panel-solido: #fbeede;
  --titulo-bar: #d98a6a;
  --titulo-texto: #ffffff;
  --enlace: #b04a2a;
  --enlace-visitado: #8a4a7a;
  --bisel-claro: #ffffff;
  --bisel-oscuro: #c89a7a;
  --velo-1: rgba(242, 180, 140, 0.45);
  --velo-2: rgba(255, 200, 170, 0.70);
  --wallpaper: url("../actual_images/calle-mar-de-nubes.jpeg");
  --banner-foto: url("../actual_images/nubes-algodon.jpeg");
}

/* piscina: poolrooms, azulejos cian, agua a temperatura del aire */
html[data-theme="piscina"] {
  --cielo: #aee0e6;
  --cielo-claro: #cdf0f2;
  --hierba: #2f8a90;
  --hierba-clara: #46a6ac;
  --nube-rosa: #cfeef0;
  --casa: #eef8f8;
  --tinta: #14383c;
  --tinta-suave: #3a6a6e;
  --panel: rgba(238, 248, 248, 0.90);
  --panel-solido: #eef8f8;
  --titulo-bar: #3fa0a8;
  --titulo-texto: #ffffff;
  --enlace: #0a6a78;
  --enlace-visitado: #5a6aa0;
  --bisel-claro: #ffffff;
  --bisel-oscuro: #8ab8bc;
  --velo-1: rgba(174, 224, 230, 0.45);
  --velo-2: rgba(205, 240, 242, 0.72);
  --wallpaper: url("../actual_images/piscina-inundada.jpeg");
  --banner-foto: url("../actual_images/piscina-inundada.jpeg");
}

/* vhs: el canal a las 3am, fósforo verde sobre tubo apagado */
html[data-theme="vhs"] {
  --cielo: #0a0f0a;
  --cielo-claro: #0f160f;
  --hierba: #1a3a1a;
  --hierba-clara: #2a5a2a;
  --nube-rosa: #2a1a2a;
  --casa: #0e160e;
  --tinta: #c8f0c8;
  --tinta-suave: #6a9a6a;
  --panel: rgba(8, 14, 8, 0.88);
  --panel-solido: #0a120a;
  --titulo-bar: #1c3a1c;
  --titulo-texto: #c8f0c8;
  --enlace: #4aff7a;
  --enlace-visitado: #b89ad0;
  --bisel-claro: #2a4a2a;
  --bisel-oscuro: #030803;
  --velo-1: rgba(4, 10, 4, 0.70);
  --velo-2: rgba(4, 10, 4, 0.86);
  --wallpaper: url("../actual_images/pasillo-verde.jpeg");
  --banner-foto: url("../actual_images/pasillo-verde.jpeg");
}

/* mall: el centro comercial muerto de noche, luz ámbar sobre teal */
html[data-theme="mall"] {
  --cielo: #14181c;
  --cielo-claro: #1c2228;
  --hierba: #2a3a32;
  --hierba-clara: #3a4e44;
  --nube-rosa: #3a2e30;
  --casa: #1a2024;
  --tinta: #d6cdba;
  --tinta-suave: #9a907e;
  --panel: rgba(20, 24, 28, 0.88);
  --panel-solido: #161b20;
  --titulo-bar: #2e3e3a;
  --titulo-texto: #e0d6c4;
  --enlace: #d8a85a;
  --enlace-visitado: #b89ad0;
  --bisel-claro: #3a4642;
  --bisel-oscuro: #070b0d;
  --velo-1: rgba(10, 14, 18, 0.62);
  --velo-2: rgba(10, 14, 18, 0.82);
  --wallpaper: url("../actual_images/centro-comercial-nocturno.jpeg");
  --banner-foto: url("../actual_images/centro-comercial-fuente.jpeg");
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "Times New Roman", Times, serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--cielo);
}

/* el wallpaper: una FOTO, fija, con velo de color encima.
   pseudo-elemento position:fixed (no background-attachment) y
   sin filter() — el velo va horneado en el gradiente. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(var(--velo-1), var(--velo-2)),
    var(--wallpaper) center / cover no-repeat;
}

/* grano global, estático, casi imperceptible */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

/* ---------- marco general ---------- */

#page {
  max-width: 1000px;
  margin: 14px auto 40px;
  border: 2px outset var(--bisel-claro);
  background: var(--panel);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}

/* ---------- banner ---------- */

#site-banner {
  position: relative;
  height: 150px;
  border-bottom: 2px ridge var(--bisel-claro);
  background: var(--banner-foto) center / cover no-repeat;
  overflow: hidden;
}

#site-banner .banner-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.06), var(--velo-1));
}

#site-banner .banner-texto {
  position: absolute;
  left: 18px;
  bottom: 12px;
}

#site-banner h1 {
  margin: 0;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 34px;
  letter-spacing: 2px;
  color: #ffffff;
  text-shadow: 2px 2px 0 #22303a, 4px 4px 0 rgba(0, 0, 0, 0.35);
}

#site-banner .banner-sub {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 12px;
  color: #ffffff;
  text-shadow: 1px 1px 0 #22303a;
}

#theme-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 11px;
  padding: 3px 9px;
  cursor: pointer;
  color: var(--tinta);
  background: var(--panel-solido);
  border: 2px outset var(--bisel-claro);
}
#theme-toggle:active { border-style: inset; }

/* ---------- marquee ---------- */

#site-marquee {
  border-bottom: 2px groove var(--bisel-claro);
  background: var(--panel-solido);
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 12px;
  color: var(--tinta-suave);
  padding: 2px 0;
}

/* ---------- layout: menú + contenido ---------- */

#layout { display: flex; align-items: flex-start; }

#site-nav {
  flex: 0 0 200px;
  padding: 10px;
}

/* el botón ☰ solo aparece en móvil (ver @media); en escritorio, fuera */
#nav-toggle { display: none; }

#content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 20px 24px;
  border-left: 2px groove var(--bisel-claro);
}

/* ---------- menú lateral ---------- */

.nav-grupo { margin-bottom: 12px; border: 2px outset var(--bisel-claro); }

.nav-grupo .nav-titulo {
  background: var(--titulo-bar);
  color: var(--titulo-texto);
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 3px 8px;
}

.nav-grupo ul { list-style: none; margin: 0; padding: 5px; background: var(--panel-solido); }
.nav-grupo li { margin-bottom: 4px; }
.nav-grupo li:last-child { margin-bottom: 0; }

/* cada enlace es un botón biselado, estilo barra lateral de FAA */
.nav-grupo li a {
  display: block;
  padding: 6px 9px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 12px;
  text-decoration: none;
  color: var(--enlace);
  background: var(--panel-solido);
  border: 2px outset var(--bisel-claro);
}
.nav-grupo li a:hover { background: var(--nube-rosa); color: var(--tinta); }
.nav-grupo li a:active { border-style: inset; }

/* la página actual: botón "hundido" (pulsado) */
.nav-grupo li a.actual {
  border-style: inset;
  background: var(--hierba);
  color: #ffffff;
  cursor: default;
}

/* iris, la mascota: un ojo en CSS puro, cero svg */
#iris-box {
  text-align: center;
  padding: 10px 4px 8px;
  border: 2px outset var(--bisel-claro);
  background: var(--panel-solido);
}
#iris-box a { text-decoration: none; }
.ojo {
  position: relative;
  width: 64px;
  height: 38px;
  margin: 0 auto;
  background: #fdfdf6;
  border: 1px solid var(--tinta-suave);
  border-radius: 50%;
  overflow: hidden;
}
.ojo .iris {
  position: absolute;
  top: 5px;
  left: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #7ab0d8;
}
.ojo .pupila {
  position: absolute;
  top: 13px;
  left: 26px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1a2430;
}
.ojo .parpado {
  position: absolute;
  inset: 0;
  background: var(--casa);
  transform: translateY(-100%);
  animation: parpadeo 7s infinite;
}
@keyframes parpadeo {
  0%, 91%, 100% { transform: translateY(-100%); }
  93%, 95% { transform: translateY(0); }
}
#iris-box .iris-nombre {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 10px;
  color: var(--tinta-suave);
  margin-top: 5px;
}

/* ---------- migas de pan / pagenav ---------- */

#site-crumbs {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 11px;
  color: var(--tinta-suave);
  margin-bottom: 10px;
}
#site-crumbs a { color: var(--enlace); }

#site-pagenav {
  margin-top: 28px;
  padding-top: 10px;
  border-top: 2px groove var(--bisel-claro);
  display: flex;
  justify-content: space-between;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 12px;
}

/* ---------- contenido ---------- */

h1, h2, h3 {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  color: var(--tinta);
  letter-spacing: 0.5px;
}
#content h1 {
  font-size: 26px;
  margin: 4px 0 14px;
  padding-bottom: 6px;
  border-bottom: 3px double var(--tinta-suave);
}
#content h2 { font-size: 19px; margin: 26px 0 8px; }
#content h3 { font-size: 15px; margin: 18px 0 6px; }

a { color: var(--enlace); }
a:visited { color: var(--enlace-visitado); }

hr { border: none; border-top: 1px dashed var(--tinta-suave); margin: 22px 0; }

blockquote {
  margin: 14px 18px;
  padding: 8px 14px;
  border-left: 4px solid var(--nube-rosa);
  background: var(--panel-solido);
  font-style: italic;
  color: var(--tinta-suave);
}

code, .mono { font-family: "Courier New", Courier, monospace; font-size: 0.92em; }

/* cajas tipo ventana */
.ventana {
  border: 2px outset var(--bisel-claro);
  background: var(--panel-solido);
  margin: 16px 0;
}
.ventana .titulo {
  background: var(--titulo-bar);
  color: var(--titulo-texto);
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 9px;
}
.ventana .cuerpo { padding: 10px 14px; }

.aviso {
  border: 2px inset var(--bisel-claro);
  background: var(--nube-rosa);
  color: #4a3040;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 12px;
  padding: 8px 12px;
  margin: 14px 0;
}
html[data-lum="oscuro"] .aviso { color: #f0dce8; }

/* tablas web 1.0 */
table.datos {
  border-collapse: collapse;
  width: 100%;
  margin: 14px 0;
  font-size: 15px;
}
table.datos th, table.datos td {
  border: 1px solid var(--tinta-suave);
  padding: 5px 9px;
  vertical-align: top;
  text-align: left;
}
table.datos th {
  background: var(--titulo-bar);
  color: var(--titulo-texto);
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 12px;
}
table.datos tr:nth-child(even) td { background: rgba(127, 127, 127, 0.07); }

/* ---------- fotos ---------- */

img.foto, .polaroid img {
  max-width: 100%;
  display: block;
  /* desaturación leve: foto vieja, recuerdo de un lugar */
  filter: saturate(0.82) contrast(0.95) brightness(1.03);
}

.foto-marco {
  border: 2px inset var(--bisel-claro);
  padding: 4px;
  background: var(--panel-solido);
  margin: 14px 0;
}
.foto-marco .pie {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 11px;
  color: var(--tinta-suave);
  padding: 5px 3px 1px;
  text-align: center;
}

/* galería de polaroids */
.polaroids {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  padding: 8px 0;
}
.polaroid {
  background: #fdfdf6;
  border: 1px solid #c8c4b8;
  padding: 8px 8px 6px;
  width: 218px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.18);
}
html[data-lum="oscuro"] .polaroid { background: #1c2632; border-color: #0a1018; }
.polaroid:nth-child(odd) { transform: rotate(-1.4deg); }
.polaroid:nth-child(even) { transform: rotate(1.1deg); }
.polaroid:nth-child(3n) { transform: rotate(2deg); }
.polaroid:hover { transform: rotate(0deg) scale(1.03); }
.polaroid img { width: 100%; height: 150px; object-fit: cover; }
.polaroid .pie {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 11px;
  text-align: center;
  color: var(--tinta-suave);
  padding-top: 6px;
  min-height: 2.4em;
}

/* wallpapers */
.wall-item { display: flex; gap: 14px; align-items: flex-start; margin: 16px 0; }
.wall-item img { width: 190px; height: 120px; object-fit: cover; border: 2px inset var(--bisel-claro); }

/* ---------- piezas sueltas ---------- */

/* paleta de muestras (divs, no svg) */
.muestras { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.muestra { width: 110px; }
.muestra .color { height: 46px; border: 2px inset var(--bisel-claro); }
.muestra .nombre {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  text-align: center;
  padding-top: 3px;
  color: var(--tinta-suave);
}

/* el monolito: una puerta al azar */
.puerta-zona { text-align: center; margin: 20px 0; }
.monolito {
  display: inline-block;
  width: 64px;
  height: 120px;
  background: #0a0a0c;
  border: 1px solid #2a2a30;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.25s;
}
.monolito:hover { transform: translateY(-4px); }
.puerta-zona .pie {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 11px;
  color: var(--tinta-suave);
  margin-top: 8px;
}

/* contador fósforo */
.contador {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  font-size: 18px;
  letter-spacing: 4px;
  color: var(--fosforo);
  background: #000000;
  border: 2px inset var(--bisel-claro);
  padding: 3px 10px;
}

/* botones 88x31 (html puro) */
.botones-88 { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 10px 0 4px; }
.boton-88 {
  width: 88px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Courier New", Courier, monospace;
  font-size: 9px;
  line-height: 1.15;
  text-decoration: none;
  border: 2px outset var(--bisel-claro);
  background: var(--panel-solido);
  color: var(--tinta);
}
.boton-88:active { border-style: inset; }
.boton-88.negro { background: #000; color: var(--fosforo); }
.boton-88.rosa { background: var(--nube-rosa); color: #4a3040; }
.boton-88.cielo { background: var(--cielo); color: #1c2a33; }

/* ---------- guestbook ---------- */

#gb-form label, #sub-form label {
  display: block;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 12px;
  margin-top: 10px;
}
#gb-form input[type="text"], #gb-form input[type="url"], #gb-form textarea, #gb-form select,
#sub-form input[type="text"], #sub-form input[type="url"], #sub-form textarea, #sub-form select {
  width: 100%;
  font-family: "Times New Roman", Times, serif;
  font-size: 15px;
  padding: 4px 6px;
  border: 2px inset var(--bisel-claro);
  background: #fffef8;
  color: #22303a;
}
html[data-lum="oscuro"] #gb-form input[type="text"],
html[data-lum="oscuro"] #gb-form input[type="url"],
html[data-lum="oscuro"] #gb-form textarea,
html[data-lum="oscuro"] #gb-form select,
html[data-lum="oscuro"] #sub-form input[type="text"],
html[data-lum="oscuro"] #sub-form input[type="url"],
html[data-lum="oscuro"] #sub-form textarea,
html[data-lum="oscuro"] #sub-form select {
  background: #0c141d;
  color: #cfe0d8;
}
#gb-form button, button.boton {
  margin-top: 12px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 13px;
  padding: 4px 16px;
  cursor: pointer;
  border: 2px outset var(--bisel-claro);
  background: var(--panel-solido);
  color: var(--tinta);
}
#gb-form button:active, button.boton:active { border-style: inset; }

.gb-entrada { border: 2px outset var(--bisel-claro); background: var(--panel-solido); margin: 12px 0; }
.gb-entrada .gb-meta {
  background: var(--titulo-bar);
  color: var(--titulo-texto);
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 11px;
  padding: 2px 8px;
}
.gb-entrada .gb-msg { padding: 8px 12px; }

/* ---------- footer ---------- */

#site-footer {
  border-top: 2px ridge var(--bisel-claro);
  background: var(--panel-solido);
  text-align: center;
  padding: 14px 10px 18px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 11px;
  color: var(--tinta-suave);
}
#site-footer .contador-zona { margin: 8px 0 4px; }
#site-footer .contador-nota { font-size: 10px; }

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  #layout { flex-direction: column; }
  #site-nav { flex: none; width: 100%; padding: 8px; }

  /* el botón ☰: barra de título a lo ancho, estilo FAA "Hide Sidebar" */
  #nav-toggle {
    display: block;
    width: 100%;
    text-align: left;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-size: 13px;
    padding: 12px;
    border: 2px outset var(--bisel-claro);
    background: var(--titulo-bar);
    color: var(--titulo-texto);
    cursor: pointer;
  }
  #nav-toggle:active { border-style: inset; }

  /* plegado por defecto: solo se ve el botón */
  #site-nav .nav-grupo,
  #site-nav #iris-box { display: none; }

  /* desplegado: rejilla de 2 columnas de botones, con el ☰ a lo ancho */
  #site-nav.abierto { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  #site-nav.abierto #nav-toggle { grid-column: 1 / -1; margin-bottom: 8px; }
  #site-nav.abierto .nav-grupo { display: block; margin-bottom: 10px; }
  #site-nav.abierto #iris-box { display: block; grid-column: 1 / -1; }

  /* tap targets cómodos (≈44px) en móvil */
  #site-nav .nav-grupo li a { padding: 11px 9px; }

  #content { border-left: none; border-top: 2px groove var(--bisel-claro); padding: 12px 14px 20px; }
  #site-banner h1 { font-size: 24px; }
  .wall-item { flex-direction: column; }
  .wall-item img { width: 100%; height: auto; }
}

/* ============================================================
   AÑADIDOS: selector de temas, galería viva, lightbox, buscador,
   honeypot y accesibilidad (prefers-reduced-motion).
   ============================================================ */

/* ---------- selector de temas (sustituye al toggle) ---------- */

#theme-select {
  position: absolute;
  top: 10px;
  right: 10px;
  max-width: 48%;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 11px;
  padding: 3px 6px;
  cursor: pointer;
  color: var(--tinta);
  background: var(--panel-solido);
  border: 2px outset var(--bisel-claro);
}
#theme-select:focus { outline: 2px solid var(--fosforo); }

/* ---------- honeypot anti-bots (invisible para humanos) ---------- */

.hp {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* ---------- galería viva: barra de filtros ---------- */

.galeria-controles {
  border: 2px outset var(--bisel-claro);
  background: var(--panel-solido);
  padding: 10px 12px;
  margin: 14px 0;
}
.galeria-controles .gc-buscar {
  width: 100%;
  font-family: "Times New Roman", Times, serif;
  font-size: 15px;
  padding: 5px 8px;
  border: 2px inset var(--bisel-claro);
  background: #fffef8;
  color: #22303a;
  margin-bottom: 10px;
}
html[data-lum="oscuro"] .galeria-controles .gc-buscar { background: #0c141d; color: #cfe0d8; }

.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 11px;
  padding: 2px 9px;
  cursor: pointer;
  text-decoration: none;
  color: var(--tinta);
  background: var(--panel-solido);
  border: 2px outset var(--bisel-claro);
}
.tag-chip:hover { background: var(--nube-rosa); }
.tag-chip.activa {
  background: var(--hierba);
  color: #fff;
  border-style: inset;
}
.galeria-conteo {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 11px;
  color: var(--tinta-suave);
  margin: 6px 0 0;
}
.galeria-vacia {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 13px;
  color: var(--tinta-suave);
  text-align: center;
  padding: 24px 8px;
}
.polaroid a { display: block; text-decoration: none; }

/* ---------- lightbox ---------- */

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#lightbox.abierto { display: flex; }
#lightbox .lb-fondo {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 12, 0.88);
  cursor: zoom-out;
}
#lightbox figure {
  position: relative;
  z-index: 1;
  max-width: 92%;
  max-height: 92%;
  margin: 0;
  background: var(--panel-solido);
  border: 2px outset var(--bisel-claro);
  padding: 8px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
}
#lightbox img {
  display: block;
  max-width: 100%;
  max-height: 74vh;
  margin: 0 auto;
  filter: saturate(0.82) contrast(0.95) brightness(1.03);
}
#lightbox figcaption {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 12px;
  color: var(--tinta-suave);
  text-align: center;
  padding: 8px 4px 2px;
}
#lightbox .lb-cerrar,
#lightbox .lb-prev,
#lightbox .lb-next {
  position: absolute;
  z-index: 2;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 16px;
  cursor: pointer;
  color: var(--tinta);
  background: var(--panel-solido);
  border: 2px outset var(--bisel-claro);
  padding: 4px 12px;
}
#lightbox .lb-cerrar:active,
#lightbox .lb-prev:active,
#lightbox .lb-next:active { border-style: inset; }
#lightbox .lb-cerrar { top: 12px; right: 12px; }
#lightbox .lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
#lightbox .lb-next { right: 12px; top: 50%; transform: translateY(-50%); }

/* ---------- buscador del sitio ---------- */

#buscar-input {
  width: 100%;
  font-family: "Times New Roman", Times, serif;
  font-size: 17px;
  padding: 7px 10px;
  border: 2px inset var(--bisel-claro);
  background: #fffef8;
  color: #22303a;
  margin: 6px 0 14px;
}
html[data-lum="oscuro"] #buscar-input { background: #0c141d; color: #cfe0d8; }
.buscar-grupo-titulo {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 12px;
  color: var(--tinta-suave);
  margin: 16px 0 4px;
  text-transform: lowercase;
}
.buscar-resultado {
  border: 2px outset var(--bisel-claro);
  background: var(--panel-solido);
  padding: 6px 10px;
  margin: 6px 0;
}
.buscar-resultado a { font-family: "Comic Sans MS", "Comic Sans", cursive; font-size: 13px; }
.buscar-resultado .br-ctx { font-size: 12px; color: var(--tinta-suave); }

/* ---------- envíos: lista de aceptados ---------- */

.sub-entrada {
  border: 2px outset var(--bisel-claro);
  background: var(--panel-solido);
  margin: 10px 0;
  padding: 8px 12px;
}
.sub-entrada .sub-meta {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 11px;
  color: var(--tinta-suave);
}

/* ---------- accesibilidad: respeta prefers-reduced-motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ojo .parpado { display: none; }
  .polaroid:nth-child(odd),
  .polaroid:nth-child(even),
  .polaroid:nth-child(3n) { transform: none; }
}

/* ---------- la rocola: el reproductor con playlist (YouTube IFrame API) ----------
   estilo Frutiger Aero Archive pero en la piel del sitio: chasis outset,
   vídeo 16:9 con marco inset, pantalla de fósforo, botones que se hunden al
   pulsar (sin mover nada de sitio) y lista de temas numerada y clicable.
   No alojamos la música: suena desde youtube-nocookie.com. */

.dc-rocola {
  border: 2px outset var(--bisel-claro);
  background: var(--panel-solido);
  padding: 8px;
  max-width: 560px;
  margin: 14px auto;
  font-family: "Courier New", Courier, monospace;
}
.dc-rocola-cab {
  background: var(--titulo-bar);
  color: var(--titulo-texto);
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  padding: 3px 9px;
  margin: -8px -8px 8px;
}

/* el vídeo, 16:9 responsivo */
.dc-rocola-video {
  position: relative;
  padding-top: 56.25%;
  border: 2px inset var(--bisel-claro);
  background: #000;
  margin-bottom: 8px;
}
.dc-rocola-video iframe,
.dc-rocola-video #dc-yt-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* pantalla de fósforo: ahora suena + tiempo */
.dc-rocola-lcd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  background: #000;
  color: var(--fosforo);
  border: 2px inset var(--bisel-claro);
  padding: 6px 9px;
  margin-bottom: 7px;
  text-shadow: 0 0 4px currentColor;
}
.dc-rocola-now { overflow: hidden; }
.dc-rocola-tit { font-size: 14px; letter-spacing: 1px; }
.dc-rocola-art { font-size: 11px; opacity: 0.8; margin-left: 6px; }
.dc-rocola-time {
  font-size: 11px;
  opacity: 0.85;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* barra de progreso: canaleta inset + relleno fósforo, clic/flechas para saltar */
.dc-rocola-barra {
  height: 12px;
  background: #000;
  border: 2px inset var(--bisel-claro);
  cursor: pointer;
  margin-bottom: 8px;
}
.dc-rocola-barra:focus-visible { outline: 2px solid var(--fosforo); outline-offset: 2px; }
.dc-rocola-prog { height: 100%; width: 0; background: var(--fosforo); box-shadow: 0 0 5px var(--fosforo); }

/* botonera */
.dc-rocola-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.dc-rocola-btns button {
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  line-height: 1;
  border: 2px outset var(--bisel-claro);
  background: var(--panel-solido);
  color: var(--tinta);
  cursor: pointer;
  padding: 8px 13px;
  min-height: 36px;
}
.dc-rocola-btns button:active { border-style: inset; }
.dc-rocola-play { font-weight: bold; min-width: 48px; }
.dc-rocola-tog { font-family: "Comic Sans MS", "Comic Sans", cursive; font-size: 11px; }
.dc-rocola-tog[aria-pressed="true"] { border-style: inset; background: #000; color: var(--fosforo); }

/* la lista de temas, numerada y clicable */
.dc-rocola-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 208px;
  overflow: auto;
  border: 2px inset var(--bisel-claro);
  background: var(--panel-solido);
}
.dc-rocola-pista {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px dotted var(--tinta-suave);
  background: transparent;
  color: var(--tinta);
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 12px;
  padding: 7px 9px;
  cursor: pointer;
}
.dc-rocola-pista:hover { background: var(--nube-rosa); color: #4a3040; }
html[data-lum="oscuro"] .dc-rocola-pista:hover { color: #f0dce8; }
.dc-rocola-pista:focus-visible { outline: 2px solid var(--titulo-bar); outline-offset: -2px; }
.dc-rocola-pista.activa { background: var(--titulo-bar); color: var(--titulo-texto); font-weight: bold; }
.dc-rocola-pista.activa::before { content: "\25B6  "; }
.dc-rocola-n { color: var(--tinta-suave); font-family: "Courier New", Courier, monospace; }
.dc-rocola-pista.activa .dc-rocola-n { color: var(--titulo-texto); }
.dc-rocola-nota { opacity: 0.7; font-style: italic; }

.dc-rocola-pie {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 10px;
  color: var(--tinta-suave);
  text-align: center;
  padding-top: 7px;
}
.dc-rocola-pie a { font-size: 10px; }