/* Stella Nova — layout y componentes.
*
* "Página de papel": una hoja cálida (la-sn-paper) flota sobre el campo
* gris ahuesado (el atelier). El contenido es el protagonista; el chrome
* se retira a un filete. Mobile-first. Tokens en tokens.css; tipos en
* fonts.css. No reestructura el DOM de extensiones (ver skinStyles).
*/
/* ───────────────────────── Base ───────────────────────── */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
/* La cabecera es `position: sticky; top: 0`, así que al saltar a un ancla
(clic en la tabla de contenidos, #target en la URL) el encabezado destino
quedaba tapado por la barra. `scroll-padding-top` retrae el punto de anclaje
del scroll el alto de la barra + un respiro, así el encabezado aterriza justo
debajo. Una sola declaración cubre TODO salto de scroll (TOC, :target,
anclas de Especial:). */
html { scroll-padding-top: calc(var(--sn-header-h) + var(--sn-s-3)); }
*, *::before, *::after { box-sizing: inherit; }
body {
margin: 0;
font-family: var(--sn-font-text);
font-size: var(--sn-fs-base);
font-weight: 400;
line-height: var(--sn-leading);
color: var(--sn-ink);
background-color: var(--sn-field);
/* Grano de papel: ruido fractal SVG a muy baja opacidad, solo en el
campo. Da atmósfera sin coste de imagen ni daño al contraste. */
background-image:
radial-gradient(circle at 15% 0%, rgba(255,255,255,.5), transparent 55%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
background-blend-mode: soft-light;
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: "kern", "liga", "calt";
}
body::before { /* fija la opacidad del grano vía token sin tocar el bg */
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
background: var(--sn-field); opacity: calc(1 - var(--sn-field-grain) * 6);
mix-blend-mode: normal;
}
a { color: var(--sn-link); text-underline-offset: .14em;
text-decoration-thickness: .06em; }
a:hover { color: var(--sn-link-hover); }
a:visited { color: var(--sn-link-visited); }
/* ── Redlinks (a páginas inexistentes) y :visited ─────────────────
Overrides de MediaWiki:Common.css (heredado de producción), que
trae:
a[href].new { color: rgba(0,0,0,.3) !important; } ← negro en dark
a:visited { color: #681603; } ← rojo carbón
En claro funcionan (faded grey y rojo oscuro sobre cream). En oscuro
son inaccesibles (WCAG <1.5:1 sobre paper, falla tanto en .sn-body
como en .catlinks). Por eso el override sólo aplica en oscuro: en
claro respetamos el aire de producción. Especificidad bumpeada por
`:root[data-…]` (0,1,1,1+) gana al `a:visited` de Common; el
!important de redlinks empata al !important del site CSS, y la
especificidad mayor desempata. */
a.new, a[href].new { color: var(--sn-link-new); }
/* El redlink NO se oscurece al visitarse: mantiene el rosado pálido por
encima de la regla global `a:visited`. */
a.new:visited, a[href].new:visited { color: var(--sn-link-new); }
:root[data-sn-theme="dark"] a.new,
:root[data-sn-theme="dark"] a[href].new {
color: var(--sn-link-new) !important;
}
:root[data-sn-theme="dark"] a:visited {
color: var(--sn-link-visited);
}
@media (prefers-color-scheme: dark) {
:root[data-sn-theme="auto"] a.new,
:root[data-sn-theme="auto"] a[href].new {
color: var(--sn-link-new) !important;
}
:root[data-sn-theme="auto"] a:visited {
color: var(--sn-link-visited);
}
}
::selection { background: var(--sn-nova-wash); color: var(--sn-ink); }
/* Foco: el anillo es la nova. Nunca solo color. */
:where(a, button, input, select, textarea, summary, [tabindex], [contenteditable]):focus-visible {
outline: 2px solid var(--sn-nova);
outline-offset: 2px;
border-radius: var(--sn-radius-s);
}
:focus:not(:focus-visible) { outline: none; }
.sn-vh {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Política global de íconos: nunca negro pleno ni carmín. Tinta al ~70%
en reposo; tinta plena al hover/foco/activo del control que los
contiene. Color propio (no heredan del texto: aunque el enlace se
ponga en acento, el ícono no). */
.sn-i { display: inline-block; flex: none; vertical-align: middle;
fill: none; stroke: currentColor; stroke-width: 1.75;
stroke-linecap: round; stroke-linejoin: round;
color: var(--sn-icon); transition: color var(--sn-dur-1); }
.sn-i use { fill: inherit; stroke: inherit; }
:is(a, button, summary, label, [role="button"]):hover > .sn-i,
:is(a, button, summary, label, [role="button"]):hover .sn-i,
:is(a, button, summary, label, [role="button"]):focus-visible .sn-i,
[data-sn-menu][aria-expanded="true"] .sn-i,
.sn-tabs li.selected a .sn-i, .sn-tabs li.active a .sn-i {
color: var(--sn-icon-active);
}
/* ─────────────────────── Skip links ─────────────────────── */
.sn-skip {
position: fixed; top: var(--sn-s-3); left: var(--sn-s-3);
z-index: var(--sn-z-skip);
transform: translateY(-180%);
background: var(--sn-ink); color: var(--sn-paper);
padding: var(--sn-s-2) var(--sn-s-4);
border-radius: var(--sn-radius); font-weight: 500;
text-decoration: none;
transition: transform var(--sn-dur-2) var(--sn-ease);
}
.sn-skip:focus { transform: translateY(0); color: var(--sn-paper); }
.sn-skip + .sn-skip:focus { left: calc(var(--sn-s-3) + 11rem); }
/* ─────────────────────── App / shell ─────────────────────── */
.sn-app { display: flex; flex-direction: column; min-height: 100vh; }
.sn-header {
position: sticky; top: 0; z-index: var(--sn-z-header);
background: color-mix(in oklab, var(--sn-field) 60%, transparent);
-webkit-backdrop-filter: saturate(1.5) blur(5px);
backdrop-filter: saturate(1.5) blur(5px);
/* Sin filete inferior: la cabecera se separa del cuerpo por el blur y el
fondo translúcido, no por una regla horizontal (doctrina "sin filetes"). */
}
/* CONTAINING-BLOCK TRAP: `backdrop-filter` hace que la cabecera sea el bloque
contenedor de cualquier descendiente `position: fixed` —y todos los menús
modales (.sn-menu-list) y el buscador modal (.sn-search) cuelgan de aquí—.
En móvil eso ancla el modal a la posición de ORIGEN del header sticky (arriba
del documento) en vez del viewport: estando con scroll abajo, el modal se
abre fuera de pantalla mientras el scroll-lock congela la página. Mientras
haya un modal abierto (el JS marca `data-sn-modal` en ), anulamos el
filtro: el modal cubre todo con papel opaco, así que el blur no se ve, y su
`fixed` vuelve a ser relativo al viewport → se abre donde estés. */
html[data-sn-modal] .sn-header {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* Cabecera despejada: isotipo · pestañas de página · buscador · usuario.
La navegación del sitio vive en el pie. */
.sn-header-bar {
display: flex; align-items: center;
justify-content: space-between; /* repartidos de forma homogénea */
gap: var(--sn-s-5);
max-width: var(--sn-shell); margin-inline: auto;
padding: var(--sn-s-3) var(--sn-s-4);
}
/* Marca + navegación juntas a la izquierda (iso pegado a la hamburguesa). */
.sn-brandnav {
display: flex; align-items: center; gap: var(--sn-s-2); flex: none;
}
/* — Isotipo: logotipo "Casiopea" + constelación (SVG colorizable). El
wordmark va EN el SVG; sin texto aparte. Monocromo currentColor →
tematizable (tinta en claro/oscuro; acento sutil al hover). */
/* Mismo color que el resto de íconos/enlaces del toolbar (nunca rojo):
semitransparente en reposo, opaco al hover. */
/* :visited/:link explícitos para ganarle a `a:visited` (que si no, tiñe
el isotipo con el color de enlace visitado — el "rojo"). */
.sn-isotype, .sn-isotype:link, .sn-isotype:visited {
display: inline-flex; align-items: center;
text-decoration: none; color: var(--sn-icon);
flex: none; padding: var(--sn-s-1);
border-radius: var(--sn-radius);
transition: color var(--sn-dur-1);
}
.sn-isotype:hover, .sn-isotype:focus-visible, .sn-isotype:active {
color: var(--sn-icon-active);
}
/* El SVG colorea DIRECTAMENTE con el token de icono, NO `inherit` del .
Motivo: `--sn-icon` lleva alfa (color-mix … transparent), y por privacidad
los navegadores IGNORAN colores con transparencia en `:visited` → el
visitado caía al morado de `--sn-link-visited` y el SVG (color:inherit) lo
heredaba. Coloreando el