/* ============================================================
GESACA · Sistema de interfaz (tokens + componentes base)
-----------------------------------------------------------
- Tipografía: Inter variable (auto-alojada en web/fonts/)
- Tema claro/oscuro: automático (prefers-color-scheme) con
override manual mediante [data-theme] en
- Micro-interacciones en CSS puro. Velocidad: --gs-dur (400 ms)
- Los componentes usan prefijo .gs-* para no chocar con
Bootstrap ni con el tema Falcon en páginas aún sin migrar.
============================================================ */
/* ---- Tipografía (Inter variable, subconjunto latin = cubre español;
ejes opsz+wght; opsz mejora la legibilidad en tamaños pequeños) ---- */
@font-face {
font-family: 'Inter var';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-latin-standard-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Inter var';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-latin-standard-italic.woff2') format('woff2');
}
/* ============================================================
1 · TOKENS
============================================================ */
:root {
--gs-font: 'Inter var', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--gs-bg: #F8F9FA;
--gs-surface: #FFFFFF;
--gs-surface-2: #F1F3F5;
--gs-ink: #1C2430;
--gs-ink-strong: #072436; /* petróleo original: titulares */
--gs-muted: #5C6773;
--gs-border: #E3E6EA;
--gs-primary: #0E3A54; /* petróleo aclarado */
--gs-primary-hover: #15496A;
--gs-primary-ink: #FFFFFF;
--gs-accent: #0E7C7B; /* teal: foco, enlaces, activo */
--gs-accent-hover: #0B605F;
--gs-accent-ink: #FFFFFF;
--gs-danger: #DC3545;
--gs-warn-bg: #FFF8E6;
--gs-warn-line: #F0D385;
--gs-warn-ink: #B6820A;
--gs-ok-bg: #E9F5EF;
--gs-ok-line: #A7D3BF;
--gs-ok-ink: #0F6B45;
--gs-field: #EEF1F3;
--gs-field-line: #C4CDD5;
/* Panel de marca del login (se mantiene oscuro en ambos temas) */
--gs-brand-panel: #072436;
--gs-brand-panel-ink: #DCE7EC;
--gs-brand-motif: rgba(255, 255, 255, .05);
--gs-shadow: 0 1px 2px rgba(7, 36, 54, .05), 0 2px 8px -4px rgba(7, 36, 54, .10);
--gs-shadow-pop: 0 4px 12px -2px rgba(7, 36, 54, .12), 0 8px 24px -8px rgba(7, 36, 54, .16);
--gs-ring: var(--gs-accent);
--gs-radius: 10px;
--gs-radius-sm: 8px;
--gs-dur: 400ms; /* label del campo */
--gs-dur-fast: 180ms; /* hovers de botón/enlace */
--gs-ease: cubic-bezier(.4, 0, .2, 1);
}
/* Tema oscuro automático (si el sistema lo pide y no se ha forzado claro) */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--gs-bg: #0A1A24;
--gs-surface: #102E40;
--gs-surface-2: #16384A;
--gs-ink: #E8EDF1;
--gs-ink-strong: #F4F8FB;
--gs-muted: #8DA0AE;
--gs-border: #1E3A4C;
--gs-primary: #2C6E8F;
--gs-primary-hover: #3A82A6;
--gs-primary-ink: #FFFFFF;
--gs-accent: #38BDC9;
--gs-accent-hover: #5FD0DA;
--gs-accent-ink: #04202B;
--gs-danger: #FF6B6B;
--gs-warn-bg: rgba(224, 164, 0, .14);
--gs-warn-line: rgba(224, 164, 0, .40);
--gs-warn-ink: #E6B866;
--gs-ok-bg: rgba(56, 189, 140, .14);
--gs-ok-line: rgba(56, 189, 140, .40);
--gs-ok-ink: #6BCF9E;
--gs-field: #16384A;
--gs-field-line: #2A4C60;
--gs-brand-panel: #05202F;
--gs-brand-panel-ink: #B9CDD6;
--gs-brand-motif: rgba(255, 255, 255, .04);
--gs-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px -4px rgba(0, 0, 0, .45);
--gs-shadow-pop: 0 8px 24px -8px rgba(0, 0, 0, .6);
}
}
/* Tema oscuro forzado manualmente */
:root[data-theme="dark"] {
--gs-bg: #0A1A24;
--gs-surface: #102E40;
--gs-surface-2: #16384A;
--gs-ink: #E8EDF1;
--gs-ink-strong: #F4F8FB;
--gs-muted: #8DA0AE;
--gs-border: #1E3A4C;
--gs-primary: #2C6E8F;
--gs-primary-hover: #3A82A6;
--gs-primary-ink: #FFFFFF;
--gs-accent: #38BDC9;
--gs-accent-hover: #5FD0DA;
--gs-accent-ink: #04202B;
--gs-danger: #FF6B6B;
--gs-warn-bg: rgba(224, 164, 0, .14);
--gs-warn-line: rgba(224, 164, 0, .40);
--gs-warn-ink: #E6B866;
--gs-ok-bg: rgba(56, 189, 140, .14);
--gs-ok-line: rgba(56, 189, 140, .40);
--gs-ok-ink: #6BCF9E;
--gs-field: #16384A;
--gs-field-line: #2A4C60;
--gs-brand-panel: #05202F;
--gs-brand-panel-ink: #B9CDD6;
--gs-brand-motif: rgba(255, 255, 255, .04);
--gs-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px -4px rgba(0, 0, 0, .45);
--gs-shadow-pop: 0 8px 24px -8px rgba(0, 0, 0, .6);
}
/* ============================================================
2 · TEMA (opt-in): envolver una página/zona con class="gs-theme"
============================================================ */
/* Tamaño base del texto: 14px (por defecto el navegador usa 16px).
Se fija en body (no en html) para no alterar la base rem de Bootstrap. */
body {
font-size: 14px;
}
.gs-theme {
color: var(--gs-ink);
font-family: var(--gs-font);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.gs-theme h1, .gs-theme h2, .gs-theme h3 {
color: var(--gs-ink-strong);
letter-spacing: -.01em
}
/* ============================================================
3 · CAMPOS (patrón "Sutil": relleno + subrayado + label variable)
Marcado: seguido INMEDIATAMENTE del