@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,500;0,700;1,500;1,700&family=Poppins:wght@400;600;700;800;900&display=swap');

:root {
    /* === Fuentes === */
    --font-heading: 'Poppins', 'Montserrat', sans-serif;
    --font-body: 'Lato', 'Nunito', sans-serif;

    /* === Colores Primarios === */
    --primary-100: #FF3E32; /* Rojo corporativo */
    --primary-200: #003C6F; /* Azul corporativo */
    --primary-300: #000000; /* Negro sólido */
    --primary-400: #F3F5F7; /* Blanco/gris claro fondo principal */

    /* === Colores Secundarios === */
    --secondary-100: #F15B40; /* Rojo anaranjado */
    --secondary-200: #FBB03B; /* Amarillo intenso */
    --secondary-300: #FBBF6D; /* Amarillo pastel */
    --secondary-400: #0F6E8C; /* Azul océano */
    --secondary-500: #148C9A; /* Verde-azulado */
    --secondary-600: #6EAAA0; /* Verde suave */
    --secondary-700: #B0C2CB; /* Gris azulado */
    --secondary-800: #C5D5DF; /* Gris claro */
    --secondary-900: #DAEBF5; /* Gris muy claro */

    /* === Estados === */
    --status-red: #FF3E32; /* Estado crítico */
    --status-green: #2ec75c; /* Estado correcto */
    --status-yellow: #FBB03B; /* Estado en atención */

    /* === Texto === */
    --text-100: #000000; /* Texto principal */
    --text-200: #313d44; /* Texto secundario */

    /* === Fondos === */
    --bg-100: #FFFFFF; /* Fondo base */
    --bg-200: #dbdbdb; /* Fondo secciones */
    --bg-300: #919191; /* Bordes y tarjetas */

    /* === Canales RGB para transparencias ===
       Usar: rgb(var(--primary-200-rgb) / .12) */
    --primary-100-rgb: 255 62 50;
    --primary-200-rgb: 0 60 111;
    --primary-300-rgb: 0 0 0;
    --primary-400-rgb: 243 245 247;
    --secondary-100-rgb: 241 91 64;
    --secondary-200-rgb: 251 176 59;
    --secondary-300-rgb: 251 191 109;
    --secondary-400-rgb: 15 110 140;
    --secondary-500-rgb: 20 140 154;
    --secondary-600-rgb: 110 170 160;
    --secondary-700-rgb: 176 194 203;
    --secondary-800-rgb: 197 213 223;
    --secondary-900-rgb: 218 235 245;
    --status-red-rgb: 255 62 50;
    --status-green-rgb: 46 199 92;
    --status-yellow-rgb: 251 176 59;
    --text-100-rgb: 0 0 0;
    --text-200-rgb: 49 61 68;
    --bg-100-rgb: 255 255 255;
    --bg-200-rgb: 219 219 219;
    --bg-300-rgb: 145 145 145;

    /* === Alias semánticos === */
    --color-brand-primary: var(--primary-200);
    --color-brand-accent: var(--secondary-200);
    --color-brand-danger: var(--primary-100);
    --color-brand-ocean: var(--secondary-400);
    --color-page: var(--primary-400);
    --color-surface: var(--bg-100);
    --color-surface-muted: var(--secondary-900);
    --color-surface-subtle: color-mix(in srgb, var(--secondary-900) 42%, var(--bg-100));
    --color-border: var(--secondary-800);
    --color-border-strong: var(--secondary-700);
    --color-text: var(--text-100);
    --color-text-muted: var(--text-200);
    --color-text-inverse: var(--bg-100);
    --color-focus: var(--primary-200);
    --color-overlay: rgb(var(--primary-300-rgb) / .48);

    /* === Estados semánticos === */
    --color-success: var(--status-green);
    --color-warning: var(--status-yellow);
    --color-danger: var(--status-red);
    --color-info: var(--secondary-400);
    --color-success-soft: color-mix(in srgb, var(--status-green) 12%, var(--bg-100));
    --color-warning-soft: color-mix(in srgb, var(--status-yellow) 16%, var(--bg-100));
    --color-danger-soft: color-mix(in srgb, var(--status-red) 10%, var(--bg-100));
    --color-info-soft: color-mix(in srgb, var(--secondary-400) 10%, var(--bg-100));

    /* === Tipografía === */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --font-size-2xs: .68rem;
    --font-size-xs: .75rem;
    --font-size-sm: .85rem;
    --font-size-md: .95rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.35rem;
    --font-size-2xl: 1.65rem;
    --font-size-3xl: 2.1rem;
    --font-size-4xl: 2.6rem;
    --line-height-tight: 1.15;
    --line-height-snug: 1.25;
    --line-height-normal: 1.45;
    --line-height-relaxed: 1.65;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: .02em;
    --letter-spacing-uppercase: .04em;

    /* === Espaciado === */
    --space-0: 0;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --gap-xs: var(--space-1);
    --gap-sm: var(--space-2);
    --gap-md: var(--space-3);
    --gap-lg: var(--space-4);
    --gap-xl: var(--space-6);

    /* === Radios === */
    --radius-none: 0;
    --radius-2xs: .18rem;
    --radius-xs: .25rem;
    --radius-sm: .35rem;
    --radius-md: .45rem;
    --radius-lg: .6rem;
    --radius-xl: .8rem;
    --radius-2xl: 1rem;
    --radius-pill: 999px;
    --radius-circle: 50%;
    --radius-card: var(--radius-md);
    --radius-button: var(--radius-md);
    --radius-input: var(--radius-md);
    --radius-modal: var(--radius-lg);

    /* === Bordes === */
    --border-width-hairline: 1px;
    --border-width-thin: 2px;
    --border-width-accent: 3px;
    --border-subtle: var(--border-width-hairline) solid var(--secondary-800);
    --border-strong: var(--border-width-hairline) solid var(--secondary-700);
    --border-brand: var(--border-width-hairline) solid var(--primary-200);
    --border-danger: var(--border-width-hairline) solid var(--status-red);
    --border-dashed: var(--border-width-hairline) dashed var(--secondary-700);

    /* === Sombras === */
    --shadow-none: none;
    --shadow-xs: 0 .12rem .28rem rgb(var(--primary-300-rgb) / .08);
    --shadow-sm: 0 .35rem .9rem rgb(var(--primary-300-rgb) / .08);
    --shadow-md: 0 .65rem 1.35rem rgb(var(--primary-300-rgb) / .10);
    --shadow-lg: 0 1rem 2.4rem rgb(var(--primary-300-rgb) / .16);
    --shadow-xl: 0 1.5rem 3rem rgb(var(--primary-300-rgb) / .22);
    --shadow-card: var(--shadow-sm);
    --shadow-card-hover: var(--shadow-md);
    --shadow-modal: var(--shadow-xl);
    --shadow-dropdown: 0 .65rem 1.5rem rgb(var(--primary-300-rgb) / .14);
    --shadow-focus: 0 0 0 .18rem rgb(var(--primary-200-rgb) / .16);
    --shadow-focus-danger: 0 0 0 .18rem rgb(var(--status-red-rgb) / .16);
    --shadow-inset-accent: inset .25rem 0 0 var(--secondary-200);

    /* === Transparencias y overlays === */
    --opacity-disabled: .48;
    --opacity-muted: .68;
    --opacity-hover: .88;
    --overlay-light: rgb(var(--bg-100-rgb) / .76);
    --overlay-medium: rgb(var(--primary-300-rgb) / .35);
    --overlay-dark: rgb(var(--primary-300-rgb) / .58);
    --backdrop-modal: rgb(var(--primary-300-rgb) / .48);
    --glass-bg: rgb(var(--bg-100-rgb) / .9);
    --glass-bg-strong: rgb(var(--bg-100-rgb) / .96);
    --glass-border: rgb(var(--bg-100-rgb) / .38);
    --glass-shadow: 0 1rem 2.4rem rgb(var(--primary-300-rgb) / .16);

    /* === Blur === */
    --blur-none: 0;
    --blur-sm: 6px;
    --blur-md: 12px;
    --blur-lg: 20px;
    --blur-xl: 28px;
    --blur-glass: var(--blur-lg);

    /* === Movimiento === */
    --duration-fast: .12s;
    --duration-normal: .18s;
    --duration-slow: .3s;
    --duration-slower: .45s;
    --ease-standard: ease;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --transition-fast: var(--duration-fast) var(--ease-standard);
    --transition-normal: var(--duration-normal) var(--ease-standard);
    --transition-slow: var(--duration-slow) var(--ease-in-out);
    --transition-interactive: background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal), transform var(--transition-normal);

    /* === Layout === */
    --header-height: 3.5em;
    --sidebar-width: 280px;
    --content-max-width: 1400px;
    --content-padding-x: clamp(1rem, 3vw, 3rem);
    --content-padding-y: 1.5rem;
    --page-min-height: calc(100vh - var(--header-height));
    --modal-max-width-sm: 32rem;
    --modal-max-width-md: 46rem;
    --modal-max-width-lg: 62rem;
    --modal-max-width-xl: 72rem;

    /* === Controles === */
    --control-height-xs: 1.85rem;
    --control-height-sm: 2.15rem;
    --control-height-md: 2.5rem;
    --control-height-lg: 3rem;
    --control-padding-x-sm: .55rem;
    --control-padding-x-md: .75rem;
    --control-padding-x-lg: 1rem;
    --control-padding-y-sm: .35rem;
    --control-padding-y-md: .55rem;
    --control-padding-y-lg: .75rem;
    --input-bg: var(--bg-100);
    --input-border: var(--secondary-800);
    --input-border-focus: var(--primary-200);
    --input-placeholder: rgb(var(--text-200-rgb) / .68);
    --button-primary-bg: var(--primary-200);
    --button-primary-text: var(--bg-100);
    --button-accent-bg: var(--secondary-200);
    --button-accent-text: var(--primary-200);
    --button-danger-bg: var(--status-red);
    --button-danger-text: var(--bg-100);

    /* === Componentes base === */
    --card-bg: var(--bg-100);
    --card-border: var(--secondary-800);
    --card-radius: var(--radius-card);
    --card-padding: .95rem;
    --card-shadow: var(--shadow-card);
    --card-shadow-hover: var(--shadow-card-hover);
    --panel-bg: var(--bg-100);
    --panel-border: var(--secondary-800);
    --panel-radius: var(--radius-lg);
    --table-header-bg: color-mix(in srgb, var(--secondary-900) 36%, var(--bg-100));
    --table-row-hover-bg: color-mix(in srgb, var(--secondary-900) 22%, var(--bg-100));
    --tooltip-bg: var(--primary-300);
    --tooltip-text: var(--bg-100);
    --sidebar-bg: var(--primary-200);
    --sidebar-text: var(--bg-100);
    --sidebar-active-bg: color-mix(in srgb, var(--primary-200) 76%, var(--secondary-400));
    --sidebar-active-accent: var(--secondary-200);

    /* === Iconos e imágenes === */
    --icon-size-xs: .85rem;
    --icon-size-sm: 1rem;
    --icon-size-md: 1.2rem;
    --icon-size-lg: 1.5rem;
    --icon-size-xl: 2rem;
    --avatar-size-sm: 2rem;
    --avatar-size-md: 2.55rem;
    --avatar-size-lg: 3.25rem;
    --flag-width-sm: 1.35rem;
    --flag-height-sm: 1rem;
    --flag-width-md: 1.7rem;
    --flag-height-md: 1.25rem;

    /* === Z-index === */
    --z-base: 1;
    --z-sticky: 10;
    --z-dropdown: 100;
    --z-header: 500;
    --z-sidebar: 600;
    --z-overlay: 900;
    --z-modal: 1000;
    --z-popover: 1100;
    --z-toast: 1200;
    --z-tooltip: 1300;

    /* === Scrollbars === */
    --scrollbar-size: 6px;
    --scrollbar-thumb: rgb(var(--primary-200-rgb) / .26);
    --scrollbar-thumb-strong: rgb(var(--primary-200-rgb) / .42);
    --scrollbar-track: transparent;
}

body{
    font-family: var(--font-body);
}

h1,
h2{
    font-family: var(--font-heading);
    font-weight: 700;
}

h3{
    font-family: var(--font-body);
    font-weight: 500;
}

h4{
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 500;
}

h5{
    font-family: var(--font-body);
    font-weight: 700;
}

h6{
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 700;
}