/* ===========================================================================
   retro.css — la piel de 1999 del mapa del sitio (ORDEN-LEGALES-IDIOMAS-1 §4).

   SOLO la carga page-mapa-de-sitio.php, y esa pagina NO carga style.css: esta
   hoja es una piel aparte, con sus propios tokens en :root. Ningun hex fuera
   de este bloque de tokens. Cero imagenes externas: la barra de «bajo
   construccion», los biseles, el icono de la ventana y la cinta son CSS.
   ======================================================================== */
:root {
  --rt-gris:     #C0C0C0;   /* el gris de ventana */
  --rt-gris-osc: #808080;
  --rt-gris-cl:  #DFDFDF;
  --rt-blanco:   #FFFFFF;
  --rt-negro:    #000000;
  --rt-marino:   #000080;   /* barra de titulo */
  --rt-marino2:  #1084D0;
  --rt-azul:     #0000EE;   /* enlace */
  --rt-morado:   #551A8B;   /* enlace visitado */
  --rt-amarillo: #FFD400;
  --rt-rosa:     #FF1B7F;
  --rt-cian:     #00FFFF;
  --rt-verde:    #00FF00;   /* digitos del contador */
  --rt-serif:    "Times New Roman", Times, serif;
  --rt-mono:     "Courier New", Courier, monospace;
  --rt-ui:       Tahoma, "MS Sans Serif", Arial, sans-serif;
  --rt-bisel:    inset -1px -1px var(--rt-negro), inset 1px 1px var(--rt-blanco), inset -2px -2px var(--rt-gris-osc), inset 2px 2px var(--rt-gris-cl);
  --rt-bisel-in: inset 1px 1px var(--rt-negro), inset -1px -1px var(--rt-blanco), inset 2px 2px var(--rt-gris-osc), inset -2px -2px var(--rt-gris-cl);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--rt-gris); }
body {
  margin: 0; padding: 8px; color: var(--rt-negro); background: var(--rt-gris);
  font: 16px/1.4 var(--rt-serif);
}
a { color: var(--rt-azul); text-decoration: underline; }
a:visited { color: var(--rt-morado); }
a:hover, a:focus-visible { background: var(--rt-amarillo); outline: 1px dotted var(--rt-negro); }

/* --- barra superior: volver + idiomas --------------------------------------- */
.retro__barra {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
  padding: 6px 8px; margin: 0 auto 8px; max-width: 800px;
  background: var(--rt-gris); box-shadow: var(--rt-bisel); font: 13px var(--rt-ui);
}
.retro__volver::before { content: "<< "; }
.retro__idiomas { display: flex; gap: 6px; align-items: center; }
.retro__idiomas > * + *::before { content: "· "; color: var(--rt-gris-osc); }
.retro__idioma { font-weight: bold; }
.retro__idioma[aria-current="page"] { color: var(--rt-negro); text-decoration: none; background: var(--rt-amarillo); padding: 0 4px; }
.retro__idioma--off { color: var(--rt-gris-osc); }

/* --- la ventana ---------------------------------------------------------- */
.retro__ventana {
  max-width: 800px; margin: 0 auto; background: var(--rt-gris); padding: 3px;
  box-shadow: var(--rt-bisel);
}
.retro__titulo {
  display: flex; align-items: center; gap: 6px; padding: 3px 4px;
  background: linear-gradient(90deg, var(--rt-marino), var(--rt-marino2));
  color: var(--rt-blanco); font: bold 13px var(--rt-ui);
}
.retro__icono {
  width: 14px; height: 14px; flex: none;
  background: linear-gradient(135deg, var(--rt-amarillo) 0 50%, var(--rt-rosa) 50% 100%);
  box-shadow: inset 0 0 0 1px var(--rt-negro);
}
.retro__botones-win { margin-left: auto; display: flex; gap: 2px; }
.retro__botones-win i, .retro__x {
  width: 16px; height: 14px; display: grid; place-items: center; font: bold 10px/1 var(--rt-ui);
  color: var(--rt-negro); background: var(--rt-gris); box-shadow: var(--rt-bisel); font-style: normal;
}
.retro__x { margin-left: auto; border: 0; padding: 0; cursor: pointer; }
.retro__x:active { box-shadow: var(--rt-bisel-in); }

/* --- la cinta que se desliza (marquee con CSS) ------------------------------- */
.retro__cinta {
  overflow: hidden; white-space: nowrap; margin: 3px 0;
  background: var(--rt-negro); color: var(--rt-cian); font: bold 14px/2 var(--rt-mono);
}
.retro__cinta span { display: inline-block; padding-left: 100%; animation: rt-cinta 22s linear infinite; }
@keyframes rt-cinta { to { transform: translateX(-100%); } }

/* --- el cuerpo ------------------------------------------------------------- */
.retro__cuerpo { background: var(--rt-blanco); padding: 16px; box-shadow: var(--rt-bisel-in); }
.retro__cuerpo h1 { font: bold 32px/1.15 var(--rt-serif); margin: 0 0 6px; color: var(--rt-marino); }
.retro__cuerpo h2 { font: bold 22px/1.2 var(--rt-serif); margin: 22px 0 6px; padding-bottom: 2px; border-bottom: 2px solid var(--rt-marino); }
.retro__cuerpo h2 small { font: 13px var(--rt-ui); color: var(--rt-gris-osc); }
.retro__intro { margin: 0 0 6px; }
.retro__nota { margin: 0 0 12px; font: italic 13px var(--rt-serif); color: var(--rt-gris-osc); }
.retro__construccion {
  margin: 0 0 8px; padding: 6px; text-align: center;
  background: repeating-linear-gradient(45deg, var(--rt-amarillo) 0 14px, var(--rt-negro) 14px 28px);
}
.retro__construccion span { display: inline-block; padding: 2px 10px; background: var(--rt-blanco); font: bold 13px var(--rt-ui); text-transform: uppercase; letter-spacing: .08em; }
.retro__bloque ul { margin: 0; padding: 0 0 0 20px; columns: 2; column-gap: 24px; }
.retro__bloque li { break-inside: avoid; margin: 0 0 2px; }
.retro__hr { border: 0; border-top: 1px solid var(--rt-gris-osc); border-bottom: 1px solid var(--rt-blanco); margin: 20px 0; }

/* --- contador honesto y libro de visitas ------------------------------------- */
.retro__contador { text-align: center; margin: 0 0 12px; }
.retro__digitos {
  display: inline-block; vertical-align: middle; margin: 0 4px; padding: 2px 8px; cursor: default;
  font: bold 20px/1.2 var(--rt-mono); letter-spacing: .12em;
  color: var(--rt-verde); background: var(--rt-negro); border: 0; box-shadow: var(--rt-bisel-in);
  -webkit-user-select: none; user-select: none;
}
.retro__digitos:focus-visible { outline: 2px dotted var(--rt-amarillo); outline-offset: 2px; }
.retro__libro { text-align: center; margin: 0; }

/* --- botones biselados ---------------------------------------------------- */
.retro__boton {
  display: inline-block; min-height: 30px; padding: 4px 16px; cursor: pointer;
  font: 14px var(--rt-ui); color: var(--rt-negro); text-decoration: none;
  background: var(--rt-gris); border: 0; box-shadow: var(--rt-bisel);
}
.retro__boton:hover, .retro__boton:focus-visible { background: var(--rt-gris-cl); outline: 1px dotted var(--rt-negro); outline-offset: -5px; }
.retro__boton:active { box-shadow: var(--rt-bisel-in); }
.retro__boton:visited { color: var(--rt-negro); }

/* --- pie ------------------------------------------------------------------- */
.retro__pie { padding: 8px 4px 4px; text-align: center; font: 12px var(--rt-ui); color: var(--rt-negro); }
.retro__pie p { margin: 0; }

/* --- la ventanita del secreto (Windows 98) ------------------------------------ */
.retro__secreto {
  padding: 3px; border: 0; margin: auto; width: min(92vw, 380px);
  background: var(--rt-gris); color: var(--rt-negro); box-shadow: var(--rt-bisel);
  font: 13px var(--rt-ui);
}
.retro__secreto::backdrop { background: var(--rt-marino); opacity: .55; }
.retro__secreto__cuerpo { padding: 14px 12px 12px; }
.retro__secreto__t { font: bold 15px var(--rt-ui); margin: 0 0 8px; }
.retro__secreto p { margin: 0 0 10px; }
.retro__secreto__botones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin: 12px 0 0; }

/* --- la estela del puntero ---------------------------------------------------- */
/* Los pone retro.js: un rombo pixelado en la paleta, que cae y se apaga.
   pointer-events: none — nunca tapa el clic. */
.rt-chispa {
  position: fixed; left: var(--x, 0); top: var(--y, 0); width: 8px; height: 8px; margin: -4px 0 0 -4px;
  pointer-events: none; z-index: 9999; transform: rotate(45deg);
  animation: rt-chispa .7s ease-out forwards;
}
.rt-chispa--1 { background: var(--rt-amarillo); }
.rt-chispa--2 { background: var(--rt-rosa); }
.rt-chispa--3 { background: var(--rt-cian); }
.rt-chispa--4 { background: var(--rt-verde); }
.rt-chispa--5 { background: var(--rt-blanco); box-shadow: 0 0 0 1px var(--rt-negro); }
@keyframes rt-chispa {
  to { transform: translateY(18px) rotate(45deg) scale(.2); opacity: 0; }
}

/* --- menos movimiento: la cinta se detiene y no hay estela ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .retro__cinta span { animation: none; padding-left: 0; }
  .rt-chispa { display: none; }
}

/* --- 390: una columna, todo respira ---------------------------------------------- */
@media (max-width: 599px) {
  body { padding: 6px; }
  .retro__cuerpo { padding: 12px; }
  .retro__cuerpo h1 { font-size: 26px; }
  .retro__bloque ul { columns: 1; }
  .retro__barra { justify-content: center; }
}