/* theme.css — the light theme, in ONE place.
*
* Why this is a real stylesheet and not injected by pwa.js: a in
* blocks first paint, so the page renders in the right theme immediately. When
* these rules were injected by a deferred script the browser painted the DARK
* theme first and flipped afterwards — a visible flash on every single tab
* click, which is exactly what "the theme should follow me while navigating"
* means in practice.
*
* Paired with a one-line inline script in each page's that sets
* data-theme from localStorage before anything renders. Both halves are needed:
* the attribute alone with late CSS still paints dark, and the CSS alone with a
* late attribute does too.
*
* The design system is token-based, so overriding the tokens flips almost
* everything at once. The rules under it are the exceptions: gradients and
* alpha washes that cannot be expressed as a single token. They live here
* rather than in each page's own CSS because that is how four pages (crm,
* estados, promo, portadas) ended up with a black sidebar on a white page.
* A rule whose class is absent on a page simply does nothing.
*/
/* ---- barras de desplazamiento ------------------------------------------
* Salían BLANCAS sobre el panel oscuro por una razón concreta: el tema oscuro
* nunca declaraba `color-scheme`, así que el navegador dibujaba sus controles
* nativos en claro. Declararlo es el arreglo de fondo — vale para las barras,
* y también para los desplegables y los selectores de fecha nativos.
* El color explícito va después para que la barra sea discreta y de la paleta,
* en vez del gris del sistema. */
:root, :root[data-theme="dark"] { color-scheme: dark; }
/* El pulgar va TEÑIDO DE ORO a baja opacidad, no en --ink-line. Ese token es el
* color de los bordes: sobre el fondo (#0E0A07) queda más CLARO que la página,
* así que la barra se leía como una tira gris pálida — que es exactamente lo que
* se quería quitar. Con el oro del sol al 22% se ve que pertenece a la interfaz
* y nunca se confunde con la barra blanca del sistema.
* Comprobado que este motor SÍ honra scrollbar-color: al forzarlo en rojo/verde,
* la barra cambió. */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 200, 61, .22) transparent; }
*:hover { scrollbar-color: rgba(255, 200, 61, .42) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(255, 200, 61, .22); border-radius: 999px;
border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 200, 61, .42); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* En tema claro el oro sobre blanco no se ve: ahí manda el tono de tinta. */
:root[data-theme="light"] * { scrollbar-color: rgba(33, 26, 18, .30) transparent; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(33, 26, 18, .30); background-clip: padding-box; }
:root[data-theme="light"] {
--ink: #FAF6EF;
--ink-raised: #FFFFFF;
--ink-line: #E8E0D2;
--text: #211A12;
--muted: #736A5B;
--up: #1F9D57;
color-scheme: light;
}
/* the sidebar is a gradient, so it cannot ride on --ink alone */
:root[data-theme="light"] .side { background: linear-gradient(180deg, #FFFFFF, #FAF6EF); }
:root[data-theme="light"] .nav a:hover { background: rgba(0, 0, 0, .05); }
/* white-alpha washes read as "slightly lighter than the dark ground";
on a white ground they are invisible, so they invert */
:root[data-theme="light"] .bar .track-b,
:root[data-theme="light"] .eco-row .eco-bar { background: rgba(0, 0, 0, .06); }
:root[data-theme="light"] a.feed-row:hover,
:root[data-theme="light"] tr.ss-tr:hover td,
:root[data-theme="light"] .row:hover,
:root[data-theme="light"] .st-row:hover,
:root[data-theme="light"] .top-row:hover { background: rgba(0, 0, 0, .04); }
/* inputs sit DARKER than their panel in dark mode; on a white panel that reads
as a hole, so they go white and lean on the border instead */
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field textarea,
:root[data-theme="light"] .field select,
:root[data-theme="light"] .frm input,
:root[data-theme="light"] .frm textarea,
:root[data-theme="light"] .frm select { background: #FFFFFF; }
/* ═══════════════════════════════════════════════════════════════════════
* LAYOUT RESPONSIVE — una sola capa para las 25 páginas del portal.
*
* POR QUÉ AQUÍ Y NO EN CADA PÁGINA: las reglas responsive estaban copiadas
* y pegadas página a página, y habían derivado. `proyectos` sólo apilaba la
* rejilla y dejaba la barra lateral en columna, así que se salía de la
* pantalla en el móvil; `estados` hacía el bloque completo; `lanzamientos`
* cortaba a 980 y el resto a 900. De ahí que las cosas se recolocaran
* distinto según la pestaña.
*
* POR QUÉ CADA REGLA LLEVA `body` DELANTE: esta hoja se enlaza en el
* y el