/* REKTMAP · Copyright 2026 Merleth · Todos los derechos reservados · ver LICENSE */
/* =====================================================================================
   REKTMAP · guías · hoja de estilo común
   Las guías visten la identidad de REKTMAP: ámbar sobre negro azulado, Sora para titulares, IBM Plex Sans para el texto y
   Plex Mono para todo lo que sea un dato. Verde y rojo se reservan para largos y cortos, igual que en el programa; nunca se
   usan de adorno.

   Desde el rediseño 2.0 (tarea 12, 1.90.13) cada guía se lee de dos maneras, y su guion (src/guias/guia.js) marca cuál en
   <html> antes de pintarse:
   · [data-marco]: dentro de REKTMAP, en la vista GUÍAS. Las medidas son las de la maqueta (columna de 760 px, letra de 15) y
     cambian con la disposición que le manda REKTMAP ([data-disp]: escritorio, tableta o teléfono). El índice de guías, la
     cabecera y «EN ESTA GUÍA» los pinta REKTMAP, así que aquí no van ni la marca ni el índice propio.
   · [data-suelto]: abierta aparte (otra pestaña, u otra ventana del programa). El mismo estilo, con la fila de la marca arriba,
     la columna ancha (1.040 px, letra de 17 desde 1.100 px) y su índice como columna lateral desde 1.400 px, con el apartado
     que se lee marcado (decisiones del titular, 10-oct-2026).
   Lo que la maqueta no dibuja se conserva con los tokens 3.0: las notas y los avisos en su caja con su etiqueta, las fichas,
   las fórmulas con sus exponentes, las teclas y el código, los colores de las tablas, la barra de progreso de lectura y el
   destello al saltar a un apartado. Como la maqueta: viñetas normales, sin rayas entre apartados y las cabeceras de las tablas
   sin mayúsculas.

   Las variables son una copia de las de src/estilos/base.css. No se importa aquel fichero a propósito: trae el reset y los
   estilos de la aplicación entera, y una guía es un documento, no una interfaz.
   ===================================================================================== */
@import url("../recursos/fuentes/fuentes.css");

:root {
  --fondo: #070a12;
  --fondo-2: #0c1120;
  --panel: rgba(160, 180, 220, 0.04);
  --relleno-suave: rgba(160, 180, 220, 0.06);
  --relleno-activo: rgba(160, 180, 220, 0.12);
  --linea: rgba(160, 180, 220, 0.10);
  --linea-suave: rgba(160, 180, 220, 0.06);
  --linea-fuerte: rgba(160, 180, 220, 0.22);
  --texto: #e9edf5;
  --texto-2: #a3adc2;
  /* el mismo tono que src/estilos/base.css (aclarado el 8-sep-2026: con #6b7690 las etiquetas pequeñas de las guías se
     quedaban por debajo del 4,5 de contraste que pide la WCAG AA) */
  --texto-3: #7d88a6;
  --acento: #f5b942;
  --acento-rgb: 245, 185, 66;
  --rekt: #ff0000;
  --largo: #2fd6a0;
  --corto: #ff5c7a;
  --f-titulo: "Sora", system-ui, -apple-system, sans-serif;
  --f-texto: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --radio: 12px;
  --radio-s: 8px;
  /* La columna de lectura de la guía suelta. Con 760 px, en un monitor de PC quedaba media pantalla vacía y el texto se veía
     estrecho; a 1040 px se leen unas 110 letras por línea con la letra de 17 px de las pantallas anchas, que es el límite de
     lo cómodo. Por encima de 1400 px el índice se coloca al lado como columna fija (ver más abajo). Dentro de REKTMAP manda
     la maqueta: 760 px. */
  --columna: 1040px;
  --lateral: 260px;
  --hueco: 44px;
  /* tiempo y curva: la misma copia que src/estilos/base.css (el enlace del índice y el destello del titular al saltar) */
  --t-base: 150ms;
  --curva-estandar: cubic-bezier(.4, 0, .2, 1);
  --curva-revelado: cubic-bezier(.19, 1, .22, 1);
  --transicion: var(--t-base) var(--curva-estandar);
  /* las medidas del texto: las de la guía suelta; dentro de REKTMAP las cambia cada disposición */
  --t-texto: 15.5px;
  --interlineado: 1.7;
  --t-h1: 38px;
  --t-bajada: 17px;
  --t-h2: 23px;
  --t-h3: 17px;
  --t-pie-figura: 11.5px;
  --t-tabla: 13.5px;
  --hueco-bloque: 16px;
}

* { box-sizing: border-box; }
/* la guía se lee sobre fondo oscuro: que la barra de desplazamiento y los controles del navegador vayan a juego */
html { color-scheme: dark; }
/* el scroll suave de las anclas del índice, pero no si el lector pide menos movimiento */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: var(--t-texto);
  line-height: var(--interlineado);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- portada */
.portada { padding: 40px 0 8px; }
/* el mismo ancho y el mismo margen que el texto (main): la portada y lo que sigue caen en la misma vertical */
.portada-int { max-width: var(--columna); margin: 0 auto; padding: 0 28px; }

/* la fila de la marca: solo en la guía suelta (dentro de REKTMAP ya está el carril). La moneda a 34 px, como en el carril,
   REKT en rojo y MAP en ámbar, y el lema */
.marca { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; }
.marca img { width: 34px; height: 34px; flex: none; }
.marca-txt { font-family: var(--f-titulo); font-weight: 800; font-size: 20px; letter-spacing: 0.02em; line-height: 1; }
.marca-rekt { color: var(--rekt); }
.marca-map { color: var(--acento); }
.marca-tag { font-family: var(--f-mono); font-size: 11px; color: var(--texto-3); letter-spacing: 0.08em; }
@media (max-width: 640px) { .marca-tag { display: none; } }

/* el rótulo de la maqueta («GUÍA 03 · EL CICLO», «ACERCA DE · VERSIÓN …»), con lo que decía el sello */
.sello {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--texto-3); text-transform: uppercase; margin-bottom: var(--hueco-bloque);
}
.portada h1 {
  font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-h1); line-height: 1.05;
  margin: 0 0 var(--hueco-bloque); letter-spacing: -0.03em; color: var(--texto);
}
.portada .bajada { color: var(--texto-2); font-size: var(--t-bajada); line-height: 1.5; margin: 0; max-width: 62ch; }

/* ------------------------------------------------------------------ índice */
.indice { max-width: var(--columna); margin: 30px auto 0; padding: 0 28px; }
.indice-caja { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); padding: 14px 16px; }
.indice h2 {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--texto-3); margin: 0 0 8px; font-weight: 500;
}
.indice ol { margin: 0; padding-left: 0; list-style: none; counter-reset: idx; }
.indice li { counter-increment: idx; margin: 0; }
.indice a {
  display: block; padding: 5px 10px; border-left: 2px solid transparent; border-radius: 0 6px 6px 0;
  color: var(--texto-2); text-decoration: none; font-size: 13.5px; line-height: 1.45; transition: color var(--transicion), background-color var(--transicion);
}
.indice a::before { content: counter(idx, decimal-leading-zero); font-family: var(--f-mono); font-size: 10.5px; color: var(--texto-3); margin-right: 10px; }
.indice a:hover { color: var(--texto); }
/* el apartado que se lee (lo marca src/guias/guia.js), como «EN ESTA GUÍA» dentro de REKTMAP */
.indice a[aria-current="location"] { color: var(--texto); font-weight: 600; background: var(--relleno-activo); border-left-color: var(--acento); }
.indice a[aria-current="location"]::before { color: var(--acento); }

/* ------------------------------------------------------------------- texto */
main { max-width: var(--columna); margin: 0 auto; padding: 8px 28px 64px; }
section { padding-top: 0; }

/* Al saltar a un apartado, un destello ámbar de 1 s en su título, una sola vez: confirma dónde has aterrizado. Suelta lo da
   el ancla (:target); dentro de REKTMAP lo pone el guion al elegir el apartado (.destello) */
section:target > h2, h2.destello { animation: destello-titulo 1s var(--curva-revelado); }
@keyframes destello-titulo { from { color: var(--acento); background-color: rgba(var(--acento-rgb), 0.18); } }

h2 {
  display: flex; gap: 12px; align-items: baseline;
  font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-h2); line-height: 1.2;
  margin: 38px 0 var(--hueco-bloque); letter-spacing: -0.015em; scroll-margin-top: 18px; color: var(--texto);
}
section:first-child > h2 { margin-top: 22px; }
/* el título al que se salta recibe el foco para seguir leyendo desde ahí (tabindex=-1, src/guias/guia.js): no es un control, y
   el destello ya dice dónde se ha aterrizado */
h2[tabindex="-1"]:focus { outline: none; }
h2 .num { font-family: var(--f-mono); font-size: 12px; color: var(--acento); font-weight: 500; letter-spacing: 0.04em; flex: none; }
h3 { font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-h3); line-height: 1.3; margin: 26px 0 var(--hueco-bloque); color: var(--texto); }
h4 { font-family: var(--f-titulo); font-weight: 600; font-size: calc(var(--t-texto) + 0.5px); margin: 22px 0 8px; color: var(--acento); }

p { margin: 0 0 var(--hueco-bloque); color: var(--texto-2); text-wrap: pretty; }
strong { color: var(--texto); font-weight: 600; }
em { color: var(--texto-2); }
a { color: var(--acento); }

ul, ol { margin: 0 0 var(--hueco-bloque); padding-left: 20px; color: var(--texto-2); }
li { margin: 6px 0; }
li::marker { color: var(--texto-3); }
/* las listas que antes llevaban «▸»: viñetas normales, como la maqueta */
ul.limpia { list-style: disc; }

.mono { font-family: var(--f-mono); }
code {
  font-family: var(--f-mono); font-size: 0.88em; padding: 1px 6px; border-radius: 5px;
  background: var(--relleno-suave); color: var(--texto); border: 1px solid var(--linea-suave);
}
kbd {
  font-family: var(--f-mono); font-size: 0.85em; padding: 1px 6px; border-radius: 5px;
  background: var(--relleno-activo); color: var(--texto); border: 1px solid var(--linea-fuerte); border-bottom-width: 2px;
}
sup { font-size: 0.7em; line-height: 0; }
.largo { color: var(--largo); }
.corto { color: var(--corto); }
.ambar { color: var(--acento); }

/* --------------------------------------------------------------- avisos */
.nota, .ojo {
  margin: 22px 0; padding: 14px 18px; border-radius: var(--radio-s);
  border-left: 2px solid var(--acento); background: var(--relleno-suave);
}
.nota p:last-child, .ojo p:last-child { margin-bottom: 0; }
.nota .et, .ojo .et, .ficha .clave {
  display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--acento); margin-bottom: 6px;
}
.ojo { border-left-color: var(--corto); background: rgba(255, 92, 122, 0.06); }
.ojo .et { color: var(--corto); }

/* --------------------------------------------------------------- el registro de errores («Acerca de», apartado 07; 2.5.0) */
/* los únicos botones de las guías: como un aviso, con «Guardar el registro» en el ámbar de REKTMAP */
.registro {
  margin: 22px 0; padding: 14px 18px; border-radius: var(--radio-s);
  border-left: 2px solid var(--acento); background: var(--relleno-suave);
}
.registro p { margin: 0 0 12px; }
.registro .registro-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; }
.registro button {
  font-family: var(--f-texto); font-size: 13.5px; font-weight: 500; line-height: 1.2; color: var(--texto);
  background: var(--relleno-activo); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-s);
  padding: 9px 15px; cursor: pointer; transition: background-color var(--transicion), border-color var(--transicion);
}
.registro button.principal { color: var(--fondo); background: var(--acento); border-color: var(--acento); font-weight: 600; }
@media (hover: hover) {
  .registro button:hover:not(:disabled) { border-color: var(--acento); }
  .registro button.principal:hover { background: #f8c862; }
}
.registro button:disabled { opacity: 0.45; cursor: default; }
.registro button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.registro .registro-dicho { margin: 10px 0 0; font-size: 13px; color: var(--texto-2); }
.registro .registro-dicho:empty { display: none; }

/* --------------------------------------------------------------- figuras */
/* Las capturas van a su tamaño real, centradas, y solo se reducen si no caben (decisión cerrada de la tarea 12). Están a
   doble resolución: su tamaño real es el que llevan en `width` y `height`, la mitad de sus píxeles, el que tienen en el
   programa; por eso aquí no se toca su ancho, solo se limita a la columna. */
figure { margin: 22px 0; }
figure img {
  display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--radio-s);
  border: 1px solid var(--linea); background: var(--fondo-2);
}
figcaption { font-family: var(--f-mono); font-size: var(--t-pie-figura); line-height: 1.55; color: var(--texto-3); margin-top: 8px; }

/* la caja de herramientas de dibujo: la fila de botones arriba y su tabla debajo */
.figura-lado img { margin-bottom: 14px; }
.figura-lado .tabla { margin-top: 0; }

/* la letra pequeña de una medición: cómo se hizo y hasta dónde llega */
.metodo {
  font-family: var(--f-mono); font-size: 12px; line-height: 1.6; color: var(--texto-3);
  border-top: 1px solid var(--linea-suave); padding-top: 12px; margin-top: 22px;
}

/* una fórmula suelta, en una línea (con sus exponentes) */
.formula {
  font-family: var(--f-mono); font-size: 14px; color: var(--acento); margin: 0 0 var(--hueco-bloque);
  padding: 12px 16px; border-radius: var(--radio-s); border: 1px solid var(--linea); background: var(--panel);
}

/* ---------------------------------------------------------------- tablas */
/* como la maqueta: cada tabla en una caja de borde suave que se desliza de lado si no cabe (.tabla), las cabeceras en mono
   sin mayúsculas; con los colores de siempre en las celdas de datos (ámbar lo que interviene, gris lo que no entra en el
   cálculo) */
.tabla { margin: 22px 0; overflow-x: auto; border: 1px solid var(--linea-suave); border-radius: var(--radio-s); }
table { width: 100%; border-collapse: collapse; margin: 0; font-size: var(--t-tabla); }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linea-suave); vertical-align: top; color: var(--texto-2); }
th { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--texto-3); font-weight: 500; }
tbody tr:last-child td { border-bottom: 0; }
td.mono { font-family: var(--f-mono); font-size: 0.93em; color: var(--acento); white-space: nowrap; }
td.mono.no { color: var(--texto-3); }
/* una celda de datos larga (una lista de exchanges) se parte como el texto, o la tabla no cabría */
td.mono.larga { white-space: normal; }

/* --------------------------------------------------- fichas de las vistas */
.fichas { display: grid; gap: 12px; margin: 22px 0; }
.ficha {
  border: 1px solid var(--linea); border-left: 2px solid var(--acento);
  border-radius: var(--radio-s); background: var(--panel); padding: 14px 18px;
}
.ficha h3 { margin: 0 0 4px; font-size: calc(var(--t-texto) + 0.5px); }
.ficha p { margin: 0; }
.ficha p + p { margin-top: 8px; }
.ficha .responde { color: var(--texto-3); font-style: italic; }

/* ------------------------------------------------------------------- pie */
/* el pie de cada guía: las fuentes, la licencia y el aviso (dentro de REKTMAP, el pie del programa solo lleva el © y la
   versión, como EL PLAN) */
.pie {
  max-width: var(--columna); margin: 0 auto; padding: 24px 28px 44px;
  border-top: 1px solid var(--linea); color: var(--texto-3); font-size: 12.5px; line-height: 1.7;
}
.pie p { color: var(--texto-3); margin-bottom: 8px; }
.pie .marca-pie { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--texto-2); margin-bottom: 10px; text-transform: uppercase; }
.pie a { color: var(--texto-2); }

/* ======================================================= la guía suelta, por anchos */
@media (max-width: 640px) {
  :root { --t-texto: 15px; --t-h1: 28px; --t-bajada: 15.5px; --t-h2: 20px; --t-tabla: 12.5px; }
  .portada { padding: 28px 0 4px; }
  .portada-int, .indice, main, .pie { padding-left: 20px; padding-right: 20px; }
  th, td { padding: 7px 8px; }
  /* en pantalla estrecha las celdas mono tienen que poder partirse, o una tabla de tres columnas se sale por el lado */
  td.mono { white-space: normal; }
  .formula { font-size: 13px; }
}
/* Un punto más de letra en la columna ancha: a 15,5 px las líneas se hacían demasiado largas */
@media (min-width: 1100px) {
  :root { --t-texto: 17px; --t-h1: 42px; --t-bajada: 18px; --t-h2: 25px; --t-h3: 18px; --t-pie-figura: 12px; --t-tabla: 14.5px; }
  .formula { font-size: 15px; }
}
/* A partir de 1400 px sobra sitio a los lados: el índice pasa a columna lateral fija, a la izquierda del texto, y la portada
   y el pie se alinean con la misma rejilla. Cuatro pistas: canal fluido · lateral · columna · canal fluido. */
@media (min-width: 1400px) {
  html[data-suelto] body, html[data-suelto] .portada, html[data-suelto] .pie {
    display: grid;
    grid-template-columns: minmax(24px, 1fr) var(--lateral) minmax(0, var(--columna)) minmax(24px, 1fr);
    column-gap: var(--hueco);
  }
  html[data-suelto] .portada, html[data-suelto] .pie { grid-column: 1 / -1; padding-left: 0; padding-right: 0; }
  html[data-suelto] .portada-int { grid-column: 3; max-width: none; margin: 0; padding: 0; }
  html[data-suelto] .pie > * { grid-column: 3; }
  html[data-suelto] .indice {
    grid-column: 2;
    position: sticky; top: 22px; align-self: start;
    max-width: none; margin: 36px 0 0; padding: 0;
    max-height: calc(100vh - 44px); overflow-y: auto;
  }
  html[data-suelto] main { grid-column: 3; max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
}

/* ======================================================= dentro de REKTMAP */
/* Las medidas de la maqueta (escenas 4j y g1e–g6e; 5i y g1t–g6t; 8l y g1p–g6p): la columna de 760 px pegada a la izquierda
   con su margen, la letra de 15 sobre 1,65, el título de 42 y los apartados de 23. Sin la marca ni el índice propio: los pone
   la vista. */
html[data-marco] { --t-texto: 15px; --interlineado: 1.65; --t-h1: 42px; --t-bajada: 17px; --t-h2: 23px; --t-h3: 17px; --t-pie-figura: 10.5px; --t-tabla: 12.5px; }
html[data-marco] body { padding: 44px 56px 80px; }
html[data-marco] .marca, html[data-marco] .indice { display: none; }
html[data-marco] .portada { padding: 0; }
html[data-marco] .portada-int, html[data-marco] main, html[data-marco] .pie { max-width: 760px; margin: 0; padding-left: 0; padding-right: 0; }
html[data-marco] main { padding-top: 0; padding-bottom: 40px; }
html[data-marco] .pie { padding-bottom: 0; }
html[data-marco] .sello { font-size: 10px; }
html[data-marco][data-disp="tableta"] { --t-h1: 36px; --t-bajada: 16px; }
html[data-marco][data-disp="tableta"] body { padding: 32px 40px 72px; }
html[data-marco][data-disp="tableta"] .portada-int, html[data-marco][data-disp="tableta"] main, html[data-marco][data-disp="tableta"] .pie { max-width: 660px; }
html[data-marco][data-disp="telefono"] { --t-texto: 14px; --t-h1: 28px; --t-bajada: 15px; --t-h2: 19px; --t-h3: 16px; --t-tabla: 11.5px; --hueco-bloque: 14px; }
html[data-marco][data-disp="telefono"] body { padding: 18px 16px 32px; }
html[data-marco][data-disp="telefono"] th, html[data-marco][data-disp="telefono"] td { padding: 7px 8px; }
html[data-marco][data-disp="telefono"] td.mono { white-space: normal; }
html[data-marco][data-disp="telefono"] .formula { font-size: 12.5px; }

/* Impresión: fondo claro para no gastar un cartucho entero, y sin índice */
@media print {
  body { background: #fff; color: #14161c; font-size: 11.5pt; padding: 0; }
  p, li, td, th { color: #14161c; }
  .indice { display: none; }
  .portada h1, h2, h3 { color: #14161c; }
  strong { color: #000; }
  figure img { border-color: #c8ccd6; }
  section { break-inside: avoid-page; }
}

/* -------------------------------------------------------- barra de progreso de lectura */
/* Una línea fina arriba del todo que crece con lo leído, ligada al scroll del documento con animation-timeline. Se hizo en
   CSS cuando la guía no podía llevar ningún guion; ahora lleva el suyo (src/guias/guia.js), pero esto sigue siendo lo más
   sencillo y no gasta nada al desplazarse. Solo donde el navegador la soporta; donde no, @supports descarta el bloque
   entero y no aparece nada. */
@supports (animation-timeline: scroll()) {
  body::before {
    content: ""; position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 2px;
    background: var(--acento); transform-origin: left; transform: scaleX(0); pointer-events: none;
    animation: progreso-lectura linear;
    animation-timeline: scroll(root);
  }
  @keyframes progreso-lectura { to { transform: scaleX(1); } }
}

/* Las guías no cargan base.css: sin esto, ninguna animación ni transición de esta hoja respetaba prefers-reduced-motion
   (docs/ANIMACIONES.md, hallazgo 5). Misma regla universal que allí. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}