:root {
    --color-primary: #234162;
    --color-primary-dark: #1c3552;
    --color-primary-light: #5f758e;

    --color-background: #f6f9fd;
    --color-surface: #ffffff;

    --color-text: #1c2636;
    --color-text-secondary: #5f758e;
    --color-text-on-primary: #ffffff;

    --color-border: #d7dee7;

    --color-error: #dc2626;
    --color-success: #2e7d32;
    --color-warning: #ed6c02;
    --color-info: #0288d1;

    /* Escala tipográfica (rem; 1rem = 16px) */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    --line-height-tight: 1.15;
    --line-height-base: 1.5;

    /* Escala de espaciado (base 4px) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
}

/* Adapter MudBlazor */
:root {
    --mud-palette-primary: var(--color-primary) !important;
    --mud-palette-primary-text: var(--color-text-on-primary) !important;
    --mud-palette-primary-darken: var(--color-primary-dark) !important;
    --mud-palette-primary-lighten: var(--color-primary-light) !important;

    --mud-palette-background: var(--color-background) !important;
    --mud-palette-surface: var(--color-surface) !important;

    --mud-palette-text-primary: var(--color-text) !important;
    --mud-palette-text-secondary: var(--color-text-secondary) !important;

    --mud-palette-divider: var(--color-border) !important;

    --mud-palette-error: var(--color-error) !important;
    --mud-palette-success: var(--color-success) !important;
    --mud-palette-warning: var(--color-warning) !important;
    --mud-palette-info: var(--color-info) !important;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

/* ---------------------------------------------------------------------------
   Menús desplegables de la barra de tabs (AppTabs.razor).

   El panel del menú lo renderiza <MudPopoverProvider /> (MainLayout), fuera
   del árbol de AppTabs, por lo que los estilos scoped de AppTabs.razor.css
   no pueden alcanzarlo aunque se use ::deep. Por eso cada MudMenu lleva
   PopoverClass="app-tab-menu-popover" y estos estilos van en un CSS global.
   --------------------------------------------------------------------------- */
.app-tab-menu-popover {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: #333333;
    font-size: 1rem;
}

.app-tab-menu-popover .mud-menu-item-text {
    color: #333333;
    font-size: 1rem;
}

.app-tab-menu-popover .mud-list-item-clickable:hover {
    background-color: #f0f3f8;
}

.app-tab-menu-popover .mud-list-item-clickable.mud-disabled:hover {
    background-color: transparent;
}