/* ---------------------------------------------------------------
Anti-FOUC.
`dark-boot` lo pone el snippet del antes del primer paint y
SOLO declara color-scheme (scrollbars y controles nativos oscuros).
Deliberadamente NO pinta fondo ni color de texto:
· Un `background-color` en corta la propagación del fondo de
al root. Cuando eso pasa, pinta su propio fondo opaco
y tapa el canvas de #hyperdrive, que vive en z-index: -1.
· Un `color` aquí puede quedar desparejado del fondo si `active_dark`
todavía no está en : texto blanco sobre superficie clara.
El fondo y el texto son responsabilidad exclusiva de `body.active_dark`,
que se aplica de forma síncrona con el script que hay justo debajo de
la etiqueta . Así nunca existe un estado a medias.
--------------------------------------------------------------- */
/* El tema lo manda la cookie del sitio, NO el sistema operativo, así que
color-scheme se declara por estado. Un `content="light dark"` global en
un rompe justo el caso mixto (SO en oscuro + sitio en claro): el
navegador pone su texto por defecto en blanco y todo lo que hereda color
—el y los de sección— desaparece sobre fondo claro. */
:root {
color-scheme: light;
}
html.dark-boot {
color-scheme: dark;
}
/* ---------------------------------------------------------------
Barra de controles reutilizable (tema + accesibilidad).
Autocontenida: no depende de los selectores [data-astro-cid-*]
del index, así se puede pegar en cualquier página.
--------------------------------------------------------------- */
.page-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.page-controls {
display: flex;
align-items: center;
gap: 8px;
}
.page-controls .toggle,
.page-controls .a11y-btn {
background: transparent;
border: 1px solid #ddd;
color: #777;
border-radius: 6px;
width: 32px;
height: 32px;
display: grid;
place-items: center;
cursor: pointer;
line-height: 1;
padding: 0;
box-sizing: border-box;
transition: all 0.3s ease;
}
.page-controls .toggle:hover,
.page-controls .a11y-btn:hover {
background: #eee;
border-color: #ccc;
}
.page-controls .input_dark {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.page-controls .icon {
grid-column: 1 / 1;
grid-row: 1 / 1;
transition: transform 500ms;
}
body.active_dark .page-controls .toggle,
body.active_dark .page-controls .a11y-btn {
border-color: #333;
color: #bebebe;
}
body.active_dark .page-controls .toggle:hover,
body.active_dark .page-controls .a11y-btn:hover {
background: #1e1e1e;
border-color: #444;
}
/* ---------------------------------------------------------------
Selector de idioma.
Son enlaces reales a URLs distintas (/ y /en/), no un cambio de
texto en caliente: es lo único que Google puede indexar por
separado. El idioma activo se marca desde .
--------------------------------------------------------------- */
.lang-switch {
display: inline-flex;
align-items: center;
border: 1px solid #ddd;
border-radius: 6px;
overflow: hidden;
height: 32px;
}
.lang-switch button {
display: grid;
place-items: center;
padding: 0 9px;
height: 100%;
margin: 0;
font-family: inherit;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
color: #777;
background: transparent;
border: none;
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease;
}
.lang-switch button + button {
border-left: 1px solid #ddd;
}
.lang-switch button:hover {
background: #eee;
color: #111;
}
/* El idioma activo usa el mismo acento que el resto del sitio: negro en
claro, su inverso claro en oscuro. Nada de color nuevo.
Lo marca js/i18n.js con .is-activo, porque el idioma vive en el estado
y no en la URL. */
.lang-switch button.is-activo {
background: #1c1c1c;
color: #ffffff;
cursor: default;
}
body.active_dark .lang-switch {
border-color: #333;
}
body.active_dark .lang-switch button {
color: #bebebe;
}
body.active_dark .lang-switch button + button {
border-left-color: #333;
}
body.active_dark .lang-switch button:hover {
background: #1e1e1e;
color: #fff;
}
body.active_dark .lang-switch button.is-activo {
background: #e6e6e6;
color: #0e0e0e;
}