/* ============================================================
   theme.css
   Tokens de diseño (paleta azul/naranja, tipografía, sombras)
   compartidos por toda la aplicación.
   ============================================================ */

:root {
    /* Azules (marca) */
    --color-azul-900: #0A2647;
    --color-azul-700: #0F4C81;
    --color-azul-600: #1668B5;
    --color-azul-500: #2E86D8;
    --color-azul-200: #BBDCF7;
    --color-azul-100: #E8F1FB;

    /* Naranjas (acento) */
    --color-naranja-600: #E07B1A;
    --color-naranja-500: #F2933D;
    --color-naranja-100: #FDEEE0;

    /* Semánticos */
    --color-danger: #DC2626;
    --color-danger-100: #FEE2E2;

    /* Neutros */
    --color-ink: #1F2937;
    --color-muted: #6B7280;
    --color-surface: #FFFFFF;
    --color-bg: #F4F7FB;
    --color-border: #E2E8F0;

    /* Ancho reservado para el sidebar fijo (#menu, ver mainMenu.css). Las
       páginas que corren su contenido para no quedar debajo del menú usan
       este mismo valor en su margin-left. El botón de colapsar/expandir el
       menú (layouts/app.blade.php) redefine --menu-ancho sobre <html> para
       que el sidebar y el contenido de esas páginas queden sincronizados. */
    --menu-ancho: max(12vw, 15rem);
    --menu-ancho-colapsado: 4.5rem;

    /* Geometría y elevación */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;

    /* Sombras sobrias, para uso puntual (flotantes: modales, dropdowns) */
    --shadow-xs: 0 1px 2px #0a26478c;
    --shadow-sm: 1px 1px 3px #0a26478c;
    --shadow-md: 6px 6px 16px #0a26478c;
    --shadow-lg: 16px 16px 32px #0a26478c;

    --transition-base: 150ms ease;
    --transition-slow: 250ms ease;

    /* Tipografía */
    --font-sans: 'Inter', 'Segoe UI', Tahoma, system-ui, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-lg: 1.125rem;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-ink);
    -webkit-font-smoothing: antialiased;
}

/* Utilidades de marca reutilizables en formularios (no dependen de la sintaxis
   de variables arbitrarias de Tailwind, que el CDN vendorizado no soporta) */
.input-focus-azul:focus {
    border-color: var(--color-azul-500);
    box-shadow: 0 0 0 2px var(--color-azul-100);
}

.checkbox-azul {
    accent-color: var(--color-azul-600);
}