/* WebSOL — global.css: tokens CSS + reset + fuentes Roboto + blazor-error-ui.
   Cargado en App.razor antes de cualquier hoja de área. */

/* ===== TOKENS ===== */

:root {
    /* === Colores heredados del sistema de capas legado === */
    --hs-fondo-primario: 205 57%;
    --fondo-primario: 205 57% 31%;
    --frente-primario: 0 100% 100%;
    --hs-fondo-secundario: 175 39%;
    --fondo-secundario: 175 39% 70%;
    --frente-secundario: 0 100% 100%;
    --hs-fondo-terciario: 52 65%;
    --fondo-terciario: 52 65% 89%;
    --frente-terciario: 205 57% 31%;
    --hs-fondo-neutro: 0 0%;
    --fondo-neutro: 0 0% 97%;
    --frente-neutro: 0 0% 10%;
    --frente-resaltado: 33 100% 50%;
    --frente-error: 0 100% 50%;
    --borde-neutro: 0 0% 50%;
    --primario-b5: #0d6efd;

    /* === Paleta SOL (única fuente de verdad para todas las áreas) === */
    --sol-navy: #0d325e;
    --sol-navy-light: #1f4e86;
    --sol-orange: #f5a623;
    --sol-orange-18a: rgba(245, 166, 35, 0.18);
    --sol-orange-50a: rgba(245, 166, 35, 0.5);
    --sol-yellow: #ffe36c;
    --sol-yellow-20a: rgba(255, 227, 108, 0.2);
    --sol-acento: #ffcc4d;
    --sol-crema: #fff9e6;
    --sol-beige: #ffe7a1;
    --sol-blanco: #ffffff;
    --sol-texto-navy: #0d325e;
    --sol-texto-suave: rgba(13, 50, 94, 0.82);
    --sol-hero-overlay: linear-gradient(160deg, rgba(13, 50, 94, 0.72) 0%, rgba(13, 50, 94, 0.45) 42%, rgba(13, 50, 94, 0.78) 100%);
    --sol-ancho: min(72rem, calc(100% - 2.5rem));

    /* === Tokens área privada === */
    --privado-color-titulo: var(--sol-navy);
    --privado-color-acento: var(--sol-orange);
    --privado-fondo-activo: var(--sol-yellow-20a);
    --privado-fondo-tabla-cabecera: var(--sol-navy-light);
    --privado-fondo-fila-hover: var(--sol-orange-18a);
    --privado-fondo-fila-seleccion: var(--sol-orange-50a);

    /* === Tokens fichas (ADR 0012) === */
    --ficha-maxw: 72rem;
    --ficha-maxw-dialogo: 46rem;
    --ficha-maxw-compacta: 58rem;
    --ficha-gap-1: 0.35rem;
    --ficha-gap-2: 0.55rem;
    --ficha-gap-3: 0.85rem;
    --ficha-gap-4: 1.1rem;
    --ficha-gap-5: 1.4rem;
    --ficha-radio-sm: 0.35rem;
    --ficha-radio-md: 0.55rem;
    --ficha-radio-lg: 0.7rem;
    --ficha-bg: linear-gradient(180deg, rgba(255, 249, 230, 0.42), #fff 58%);
    --ficha-border: rgba(13, 50, 94, 0.18);
    --ficha-section-bg: rgba(255, 249, 230, 0.28);
    --ficha-section-border: rgba(13, 50, 94, 0.14);
    --ficha-title: hsl(var(--fondo-primario));
    --ficha-muted: rgba(0, 0, 0, 0.62);
    --ficha-focus: hsl(var(--fondo-primario) / 0.52);
    --ficha-error: hsl(var(--frente-error));
    --ficha-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06);

    /* === Tokens campos (ADR 0012) === */
    --campo-ancho-defecto: 16rem;
    --campo-ancho-5: 5rem;
    --campo-ancho-8: 8rem;
    --campo-ancho-10: 10rem;
    --campo-ancho-12: 12rem;
    --campo-ancho-16: 16rem;
    --campo-ancho-20: 20rem;
    --campo-ancho-24: 24rem;
    --campo-ancho-28: 28rem;
    --campo-ancho-36: 36rem;

    /* === Tokens de movimiento === */
    --motion-fast: 120ms;
    --motion-base: 140ms;
    --motion-slow: 160ms;
    --motion-slower: 180ms;
    --motion-ease: ease;
    --motion-ease-out: ease-out;
}

/* Presets de movimiento:
   - Sobrio (por defecto): sensación estable y discreta.
   - Vivo: respuesta más rápida y dinámica.
   Activación: document.documentElement.dataset.motion = "sobrio" | "vivo";
*/
:root[data-motion="sobrio"] {
    --motion-fast: 120ms;
    --motion-base: 140ms;
    --motion-slow: 160ms;
    --motion-slower: 180ms;
    --motion-ease: ease;
    --motion-ease-out: ease-out;
}

:root[data-motion="vivo"] {
    --motion-fast: 100ms;
    --motion-base: 125ms;
    --motion-slow: 145ms;
    --motion-slower: 165ms;
    --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ===== RESET Y BASE ===== */

html { margin: 0; padding: 0; box-sizing: border-box; -webkit-touch-callout: none; user-select: none; cursor: default; overscroll-behavior-y: contain; }
body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow-x: hidden; font-size: .875rem; font-family: Roboto, "Helvetica Neue", Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
*, *:before, *:after { box-sizing: inherit; }

#blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
.blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred." }
.validation-message { color: red; font-style: italic; }

/* ===== FUENTES Roboto (wwwroot/fonts) ===== */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100; src: url('/fonts/Roboto-Thin.woff2') format('woff2'), url('/fonts/Roboto-Thin.woff') format('woff'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: url('/fonts/Roboto-Light.woff2') format('woff2'), url('/fonts/Roboto-Light.woff') format('woff'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('/fonts/Roboto-Regular.woff2') format('woff2'), url('/fonts/Roboto-Regular.woff') format('woff'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url('/fonts/Roboto-Medium.woff2') format('woff2'), url('/fonts/Roboto-Medium.woff') format('woff'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url('/fonts/Roboto-Bold.woff2') format('woff2'), url('/fonts/Roboto-Bold.woff') format('woff'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; src: url('/fonts/Roboto-Black.woff2') format('woff2'), url('/fonts/Roboto-Black.woff') format('woff'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 100; src: url('/fonts/Roboto-ThinItalic.woff2') format('woff2'), url('/fonts/Roboto-ThinItalic.woff') format('woff'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 300; src: url('/fonts/Roboto-LightItalic.woff2') format('woff2'), url('/fonts/Roboto-LightItalic.woff') format('woff'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; src: url('/fonts/Roboto-Italic.woff2') format('woff2'), url('/fonts/Roboto-Italic.woff') format('woff'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 500; src: url('/fonts/Roboto-MediumItalic.woff2') format('woff2'), url('/fonts/Roboto-MediumItalic.woff') format('woff'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 700; src: url('/fonts/Roboto-BoldItalic.woff2') format('woff2'), url('/fonts/Roboto-BoldItalic.woff') format('woff'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 900; src: url('/fonts/Roboto-BlackItalic.woff2') format('woff2'), url('/fonts/Roboto-BlackItalic.woff') format('woff'); }