/* Copiado de wsc-marca/src/estilos/base/especimen.css (4f300a7 2026-10-14) por web/traer-sistema.py. No se edita aquí: se cambia en el sistema y se vuelve a traer. */
/* Copiado de wsc-sistema/css/especimen.css (02/10/2026). Sin la l. 7 (--alto-cabecera: 64px; manda el de valores.css, 56) ni la cabecera
   del documento antiguo (l. 35–65, .cabecera: no se usa en el armazón).
   Los valores (color, letra, espacio, forma, movimiento) están en ../valores.css: aquí solo hay reglas
   que usan sus nombres. Si cambias algo aquí, cambia la cara de todas las páginas. */
/* ==========================================================================
   WSC · Marco del documento (cabecera, cabeceras de sección, muestras, pie)
   Solo usa tokens del sistema.
   ========================================================================== */
/* Alto de la cabecera (sin su filete): de él salen el aire al saltar a un apartado y los topes
   de lo que se pega bajo ella */
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--alto-cabecera) + var(--e-16)); overflow-x: clip; } /* en Safari de iPhone el recorte de body no basta */
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  overflow-x: clip;
}
/* Enlaces: subrayado de puntos, discreto en lectura; al pasar, línea continua */
a {
  color: var(--enlace);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: var(--trazo);
  text-decoration-color: color-mix(in oklab, currentColor 60%, transparent);
  text-underline-offset: var(--e-4);
  transition: text-decoration-color var(--m-t2) var(--m-ui), color var(--m-t2) var(--m-ui);
}
/* En texto corrido el enlace va en el color del texto: lo distingue el subrayado */
:where(p, li, dd, td, figcaption, .regla > span) > a:where(:not([class])) { color: inherit; text-decoration-color: var(--texto-3); }
@media (hover: hover) {
  a:hover { text-decoration-style: solid; text-decoration-color: currentColor; }
  :where(p, li, dd, td, figcaption, .regla > span) > a:where(:not([class])):hover { color: var(--enlace); }
}
[hidden]:not([hidden="until-found"]) { display: none !important; }
.solo-lector { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
code, .codigo { font-variant-ligatures: none; }

.logo {
  display: block;
  width: 74px;
  background: var(--marca);
  /* el dibujo y su proporción: css/logo.css (gen_logo.py) */
}
/* Fuera del contenido (cabecera) sigue a la ventana; dentro, a la página */
@container ventana (min-width: 640px) { .logo:where(:not(.lienzo *, .pagina-propia *)) { width: 93px; } }
@container pagina (min-width: 640px) { .logo { width: 93px; } }

/* Grupo segmentado de botones de icono (tema). Cada botón mide 44 × 44: la zona
   táctil mínima, también en la cabecera. El grupo no recorta: el anillo del foco se ve
   entero (el botón con foco, encima de sus vecinos) y los extremos llevan el radio
   interior (4 − 1) */
.seg { display: inline-flex; border: var(--trazo) solid var(--linea-2); border-radius: var(--r); }
.seg > :first-child { border-start-start-radius: calc(var(--r) - var(--trazo)); border-end-start-radius: calc(var(--r) - var(--trazo)); }
.seg > :last-child { border-start-end-radius: calc(var(--r) - var(--trazo)); border-end-end-radius: calc(var(--r) - var(--trazo)); }
.seg > :focus-visible { position: relative; z-index: 1; }
.seg button, .conmutador {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--texto-2);
  cursor: pointer;
  transition: background-color var(--m-t2) var(--m-ui), color var(--m-t2) var(--m-ui);
}
.seg button + button { border-left: var(--trazo) solid var(--linea-2); }
.seg .seg-texto { width: auto; min-width: 44px; padding: 0 var(--e-12); font: inherit; font-size: var(--t-nota); line-height: 16px; letter-spacing: 0; }
/* Progreso de lectura: 1 px bajo la cabecera */
.progreso-lectura { position: absolute; inset: auto 0 -1px 0; height: 1px; pointer-events: none; }
.progreso-lectura i { display: block; height: 100%; background: var(--accion); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
[data-ahora] .t-mono { margin-right: var(--e-8); color: var(--texto); }
.seg button[aria-pressed="true"] { background: var(--accion); color: var(--accion-texto); }
.conmutador { border: var(--trazo) solid var(--linea-2); border-radius: var(--r); }
.conmutador[aria-pressed="true"] { background: var(--accion); color: var(--accion-texto); border-color: var(--accion); }
@media (hover: hover) {
  .seg button:not([aria-pressed="true"]):hover, .conmutador:not([aria-pressed="true"]):hover { color: var(--texto); background: var(--capa); }
}

/* ---- Cabecera de sección: 3 + 1 + 8 ---- */
.cab { row-gap: var(--e-24); margin-bottom: var(--e-64); }
.cab-num { display: flex; gap: var(--e-12); align-items: baseline; color: var(--texto-2); padding-top: var(--e-12); }
.cab-num .t-mono { color: var(--texto); }
.cab .c-contenido { display: grid; gap: var(--e-24); }
.cab .entradilla { color: var(--texto-2); }

/* Subapartado dentro de una sección */
.sub { row-gap: var(--e-24); margin-top: var(--e-96); }
.cab + .sub { margin-top: 0; }
.sub-titulo { display: grid; gap: var(--e-8); align-content: start; }
.sub-titulo .t-rotulo { color: var(--texto-2); }

/* ---- Muestras de código y datos técnicos ---- */
.codigo { font-family: var(--f-mono); font-size: 12px; line-height: 16px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
pre.codigo {
  margin: 0;
  padding: var(--e-16);
  border: var(--trazo) solid var(--linea);
  border-radius: var(--r);
  background: var(--hundido);
  overflow-x: auto;
  white-space: pre;
}
.leyenda { font-size: var(--t-nota); line-height: 20px; color: var(--texto-2); }
/* La lista de reglas, a ras de su columna: la raya cae en la línea de la retícula */
.reglas { margin: 0; padding: 0; list-style: none; }
.regla { display: flex; gap: var(--e-12); font-size: var(--t-menor); line-height: 24px; }
.regla::before { content: "—"; color: var(--texto-3); flex: none; }


/* Contenedores de gráfica y tablas anchas */
.desborde { overflow-x: auto; max-width: 100%; }
/* Lo que no cabe se desliza de lado y lo dice (armazon.js › desliza): encima de la caja, una nota en nota y texto 2,
   solo mientras de verdad no cabe, a 8 de ella (--hueco descuenta el hueco de la rejilla que las contiene). La caja
   recibe el foco y las flechas la recorren. Sin sombras ni fundidos */
.t-nota.desliza-nota { margin: 0 0 calc(var(--e-8) - var(--hueco, 0px)); color: var(--texto-2); }
.t-nota.desliza-nota[hidden] { display: none; }
@media print { .desliza-nota { display: none; } }
svg { max-width: 100%; }

/* ---- Pie ----
   Cada dato va entero y el punto medio se queda al final de su línea, nunca al
   principio de la siguiente. En S, un dato por línea y sin puntos; el teléfono, el
   correo y la web, en filas de 44 px (zona táctil). Desde M, en línea: el enlace
   alarga su zona táctil hacia arriba y hacia abajo sin mover el texto. */
.pie { border-top: var(--trazo) solid var(--linea); padding-block: var(--e-48); color: var(--texto-2); }
.pie .reticula { row-gap: var(--e-16); }
.pie-dato { white-space: nowrap; }
.pie-datos a { color: inherit; text-decoration-color: var(--texto-3); padding-block: calc((44px - 1.5em) / 2); }
@media (hover: hover) { .pie-datos a:hover { color: var(--enlace); } }
@container ventana (max-width: 639px) {
  .pie-datos { display: grid; justify-items: start; }
  .pie-dato { white-space: normal; }
  .pie-sep { display: none; }
  .pie-datos a { display: inline-flex; align-items: center; min-block-size: 44px; padding-block: 0; }
}

/* En pantallas táctiles, el enlace dentro de un texto alarga su zona táctil hacia
   arriba y hacia abajo (no mueve la línea) hasta 44 px o algo más: 22 − 0,7 em por lado
   (WebKit redondea el alto de la letra). Va por encima de la línea siguiente y de lo que
   haya debajo, que no se pulsan: responde en toda su caja. Secciones 00–03 */
@media (pointer: coarse) {
  :is(#s-00, #s-01, #s-02, #s-03) :where(p, li, dd, td, figcaption, .regla > span) > a:where(:not([class])) {
    position: relative;
    z-index: 1;
    padding-block: calc(22px - 0.7em);
  }
}
/* En S, ninguna línea de texto pasa de 36 ch en su tamaño: unos 45 caracteres. Vale
   para el cuerpo (16), el destacado (18) y el texto menor (13 y 15); los titulares, las
   cifras, las muestras de letra y las filas que reparten su ancho (código y valor) van a
   todo el ancho de su columna. Secciones 00–03 (las demás, en su hoja) */
@container pagina (max-width: 639px) {
  :is(#s-00, #s-01, #s-02, #s-03).seccion :is(p:not(.t-cartel, .t-titulo-1, .t-titulo-2, .t-titulo-3, .t-numero, .juego-glifo, .mf-celdas, .cota, .paso-token, .pasos-cab-meta), .leyenda) { max-inline-size: 36ch; }
}

/* Tema al cargar: hasta que corre especimen.js, el botón marcado del tema sale del que
   ya puso la cabeza (data-theme), sin transición; así «Auto» no se enciende un momento
   cuando hay un tema guardado. El JS quita la clase al aplicar el tema. */
.tema-inicial .seg button, .tema-inicial .conmutador { transition: none; }
.tema-inicial .seg button[data-tema] { background: transparent; color: var(--texto-2); }
.tema-inicial:not([data-theme]) .seg button[data-tema="sistema"],
.tema-inicial[data-theme="light"] .seg button[data-tema="claro"],
.tema-inicial[data-theme="dark"] .seg button[data-tema="oscuro"] { background: var(--accion); color: var(--accion-texto); }