/* =============================================================
   FACILITYGES - LOOK & FEEL v2
   Variables de color (paleta del relook).
   ============================================================= */

/* ---- Tipografia global: Inter (autohospedada) ----
   Variable font (peso 100-900) en un solo archivo woff2, subset
   "latin" (cubre tildes y enie del espanol). ---- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('Fonts/Inter/Inter-Variable.woff2') format('woff2');
}

:root {
    /* ---- Tipografia ---- */
    --fg-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI" !important;

    /* ---- Colores principales ---- */
    --fg-primary: #162839;
    --fg-primary-light: #2c3e50;
    --fg-primary-hover: #36485b;
    --fg-accent: #37F2FF;
    --fg-secondary: #006397;
    --fg-secondary-dark: #004b73;

    /* ---- Texto sobre fondo oscuro ---- */
    --fg-on-primary: #ffffff;
    --fg-on-primary-muted: #96a9be;
    --fg-on-primary-border: rgba(255, 255, 255, 0.08);
    --fg-on-secondary: #ffffff;

    /* ---- Estados ---- */
    --fg-success: #3cbe6e;
    --fg-success-dark: #2f9a58;
    --fg-on-success: #ffffff;
    --fg-danger: #ba1a1a;
    --fg-danger-dark: #93000a;
    --fg-on-danger: #ffffff;
    --fg-warning: #cfbb20;
    --fg-warning-dark: #a89a1a;
    --fg-on-warning: #ffffff;

    /* ---- Superficie / contenido ---- */
    --fg-surface: #f7faf9;
    --fg-surface-variant: #e0e3e2;
    --fg-outline: #c4c6cd;

    /* ---- Forma ---- */
    --fg-radius: 0.25rem;

    /* =========================================================
       PALETA "M3 EXPRESSIVE" (alineada a DESIGN.md de la app
       movil hermana FacilityGes / AgendamientosControlGate).
       Se usa en botones, inputs, checkbox, combos y ventanas
       modales para dar un look mas grande/redondeado tipo
       Material 3 Expressive. Convive con la paleta v2 anterior
       (no la reemplaza).
       ========================================================= */
    --fg-m3-primary: #004A85;
    --fg-m3-primary-hover: #003A68;
    --fg-m3-primary-container: #CDE5FF;
    --fg-m3-on-primary: #ffffff;
    --fg-m3-on-primary-container: #001D36;

    --fg-m3-secondary: #00696B;
    --fg-m3-secondary-hover: #00504F;
    --fg-m3-secondary-container: #9CF1F2;
    --fg-m3-on-secondary: #ffffff;
    --fg-m3-on-secondary-container: #004F51;

    --fg-m3-success: #166534;
    --fg-m3-success-hover: #104D27;
    --fg-m3-success-container: #AAF0AB;
    --fg-m3-on-success: #ffffff;
    --fg-m3-on-success-container: #002108;

    --fg-m3-error: #BA1A1A;
    --fg-m3-error-hover: #93000A;
    --fg-m3-error-container: #FFDAD6;
    --fg-m3-on-error: #ffffff;
    --fg-m3-on-error-container: #410002;

    --fg-m3-surface: #F7F9FF;
    --fg-m3-chip-bg: #F1F5F9;
    --fg-m3-outline: #BFC7D1;
    --fg-m3-outline-variant: #E0E3E2;

    --fg-m3-text-primary: #181C20;
    --fg-m3-text-secondary: #404850;
    --fg-m3-text-hint: #9CA3AF;

    /* ---- Forma M3 Expressive ---- */
    --fg-m3-radius: 12px;
    --fg-m3-radius-lg: 16px;
    --fg-m3-radius-pill: 999px;
}