/* ── Graphik font ─────────────────────────────────────────────────────────── */

@font-face {
    font-family: 'Graphik';
    src: url('/fonts/Graphik-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('/fonts/Graphik-Medium.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}

/* ── Reset / base ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Graphik', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    background: var(--ds-bg-page);
    color: var(--ds-text-primary);
    -webkit-font-smoothing: antialiased;
}

/* ── Dark mode overrides ──────────────────────────────────────────────────── */

.ds-shell[data-theme="dark"] {
    --ds-bg-page:          #0f1419;
    --ds-bg-surface:       #1a1f2e;
    --ds-bg-surface-2:     #252b3d;
    --ds-border:           #2d3548;
    --ds-border-light:     #252b3d;
    --ds-text-primary:     #e5e9f0;
    --ds-text-secondary:   #94a3b8;
    --ds-text-muted:       #64748b;
    --ds-shadow-sm:        0 1px 4px rgba(0,0,0,.4);
    --ds-shadow-md:        0 2px 12px rgba(0,0,0,.5);
    --ds-shadow-lg:        0 4px 24px rgba(0,0,0,.6);

    /* MudBlazor palette overrides */
    --mud-palette-background:           #0f1419;
    --mud-palette-background-grey:      #252b3d;
    --mud-palette-surface:              #1a1f2e;
    --mud-palette-appbar-background:    #1a1f2e;
    --mud-palette-appbar-text:          #e5e9f0;
    --mud-palette-text-primary:         #e5e9f0;
    --mud-palette-text-secondary:       #94a3b8;
    --mud-palette-text-disabled:        #64748b;
    --mud-palette-lines-default:        #2d3548;
    --mud-palette-lines-inputs:         #2d3548;
    --mud-palette-action-default:       rgba(229,233,240,.7);
    --mud-palette-action-disabled:      rgba(229,233,240,.3);
    --mud-palette-action-disabled-background: rgba(229,233,240,.12);
    --mud-palette-drawer-background:    #1a1f2e;
    --mud-palette-drawer-text:          #e5e9f0;
    --mud-palette-divider:              #2d3548;
    --mud-palette-table-lines:          #2d3548;
    --mud-palette-table-striped:        rgba(255,255,255,.02);
    --mud-palette-table-hover:          rgba(255,255,255,.04);
    --mud-palette-tertiary-text:        #94a3b8;
    --mud-palette-overlay-light:        rgba(0,0,0,.5);
    --mud-palette-overlay-dark:         rgba(0,0,0,.7);
}

@media (prefers-color-scheme: dark) {
    .ds-shell[data-theme="auto"] {
        --ds-bg-page:          #0f1419;
        --ds-bg-surface:       #1a1f2e;
        --ds-bg-surface-2:     #252b3d;
        --ds-border:           #2d3548;
        --ds-border-light:     #252b3d;
        --ds-text-primary:     #e5e9f0;
        --ds-text-secondary:   #94a3b8;
        --ds-text-muted:       #64748b;
        --mud-palette-background:           #0f1419;
        --mud-palette-background-grey:      #252b3d;
        --mud-palette-surface:              #1a1f2e;
        --mud-palette-appbar-background:    #1a1f2e;
        --mud-palette-text-primary:         #e5e9f0;
        --mud-palette-text-secondary:       #94a3b8;
        --mud-palette-lines-default:        #2d3548;
        --mud-palette-lines-inputs:         #2d3548;
        --mud-palette-divider:              #2d3548;
        --mud-palette-table-lines:          #2d3548;
    }
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; }

/* ── Design tokens ────────────────────────────────────────────────────────── */

:root {
    --ds-primary:          #1a56db;
    --ds-primary-dark:     #1245b0;
    --ds-primary-bg:       #e8effd;
    --ds-bg-page:          #f0f3f8;
    --ds-bg-surface:       #ffffff;
    --ds-border:           #e5e9f0;
    --ds-border-light:     #f0f2f7;
    --ds-text-primary:     #1a2035;
    --ds-text-secondary:   #6b7a99;
    --ds-text-muted:       #a0aec0;
    --ds-shadow-sm:        0 1px 4px rgba(26,32,64,.05);
    --ds-shadow-md:        0 2px 12px rgba(26,32,64,.08);
    --ds-shadow-lg:        0 4px 24px rgba(26,32,64,.12);
    --ds-radius-sm:        6px;
    --ds-radius-md:        10px;
    --ds-radius-lg:        14px;
    --ds-sidebar-w:        240px;
    --ds-topbar-h:         60px;

    /* MudBlazor palette */
    --mud-palette-primary:              #1a56db;
    --mud-palette-primary-rgb:          26,86,219;
    --mud-palette-primary-darken:       #1245b0;
    --mud-palette-primary-lighten:      #4a80f0;
    --mud-palette-primary-hover:        rgba(26,86,219,.06);
    --mud-palette-primary-selected:     rgba(26,86,219,.12);
    --mud-palette-primary-text:         #ffffff;
    --mud-palette-background:           #f0f3f8;
    --mud-palette-background-grey:      #f5f7fc;
    --mud-palette-surface:              #ffffff;
    --mud-palette-appbar-background:    #ffffff;
    --mud-palette-appbar-text:          #1a2035;
    --mud-palette-text-primary:         #1a2035;
    --mud-palette-text-secondary:       #6b7a99;
    --mud-palette-lines-default:        #e5e9f0;
    --mud-palette-lines-inputs:         #e5e9f0;
    --mud-default-borderradius:         6px;
    --mud-elevation-1:                  0 1px 4px rgba(26,32,64,.05);
    --mud-elevation-2:                  0 1px 4px rgba(26,32,64,.05);
    --mud-elevation-4:                  0 2px 12px rgba(26,32,64,.08);
    --mud-elevation-8:                  0 2px 12px rgba(26,32,64,.08);
    --mud-typography-default-family:    'Graphik','Segoe UI',system-ui,sans-serif;
    --mud-typography-body1-family:      'Graphik','Segoe UI',system-ui,sans-serif;
    --mud-typography-body2-family:      'Graphik','Segoe UI',system-ui,sans-serif;
    --mud-typography-button-family:     'Graphik','Segoe UI',system-ui,sans-serif;
    --mud-typography-h5-family:         'Graphik','Segoe UI',system-ui,sans-serif;
    --mud-typography-h6-family:         'Graphik','Segoe UI',system-ui,sans-serif;
    --mud-typography-subtitle1-family:  'Graphik','Segoe UI',system-ui,sans-serif;
    --mud-typography-subtitle2-family:  'Graphik','Segoe UI',system-ui,sans-serif;
    --mud-typography-caption-family:    'Graphik','Segoe UI',system-ui,sans-serif;
}

/* ── Scrollbars ───────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d0d7e8; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #b0bcd4; }

/* ══════════════════════════════════════════════════════════════════════════
   MUDBLAZOR OVERRIDES
   ══════════════════════════════════════════════════════════════════════════ */

/* Cards & Paper */
.mud-card,
.mud-paper {
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(26,32,64,.08) !important;
    border: none !important;
    background: var(--ds-bg-surface) !important;
}

.mud-paper-outlined {
    border: 1px solid var(--ds-border) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
}

.mud-elevation-0 { box-shadow: none !important; }

/* Tables */
.mud-table-root {
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid var(--ds-border) !important;
    box-shadow: none !important;
}

.mud-table-head .mud-table-row .mud-table-cell {
    background: var(--mud-palette-background-grey) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--ds-text-secondary) !important;
    border-bottom: 1px solid var(--ds-border) !important;
    padding: 10px 16px !important;
}

.mud-table-body .mud-table-row .mud-table-cell {
    border-bottom: 1px solid var(--ds-border-light) !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    color: var(--ds-text-primary) !important;
}

.mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: none !important; }
.mud-table-body .mud-table-row:hover { background: var(--mud-palette-background-grey) !important; }

/* Buttons */
.mud-button-root {
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    font-size: 13px !important;
}

.mud-button-filled-primary,
.mud-button-filled.mud-button-color-primary {
    background: #1a56db !important;
    box-shadow: 0 2px 8px rgba(26,86,219,.25) !important;
}

.mud-button-filled-primary:hover,
.mud-button-filled.mud-button-color-primary:hover {
    background: #1245b0 !important;
    box-shadow: 0 4px 12px rgba(26,86,219,.32) !important;
}

.mud-button-root.mud-button-size-small {
    height: 30px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
    min-width: 0 !important;
}

.mud-icon-button.mud-button-size-small {
    padding: 4px !important;
    height: 30px !important;
    width: 30px !important;
}

/* Inputs */
.mud-input-root { border-radius: 6px !important; font-size: 13px !important; }

/* Dialogs */
.mud-dialog { border-radius: 14px !important; box-shadow: 0 4px 24px rgba(26,32,64,.12) !important; overflow: hidden !important; }
.mud-dialog-title { font-size: 15px !important; font-weight: 600 !important; color: var(--ds-text-primary) !important; padding: 20px 24px 0 !important; }
.mud-dialog-content { padding: 16px 24px !important; }
.mud-dialog-actions { padding: 12px 20px 16px !important; border-top: 1px solid var(--ds-border-light) !important; }

/* Tabs */
.mud-tabs-tabbar { border-bottom: 1px solid var(--ds-border) !important; background: transparent !important; }
.mud-tab { font-size: 13px !important; font-weight: 500 !important; color: var(--ds-text-secondary) !important; text-transform: none !important; letter-spacing: 0 !important; }
.mud-tab.mud-tab-active { color: #1a56db !important; font-weight: 600 !important; }
.mud-tab-slider { background: #1a56db !important; height: 2px !important; }

/* Chips */
.mud-chip { border-radius: 20px !important; font-size: 12px !important; font-weight: 600 !important; height: 24px !important; }

/* Typography */
.mud-typography-h6 { font-size: 15px !important; font-weight: 600 !important; color: var(--ds-text-primary) !important; letter-spacing: -0.01em !important; }
.mud-typography-subtitle2 { font-size: 12px !important; color: var(--ds-text-secondary) !important; }

/* Alerts */
.mud-alert { border-radius: 10px !important; font-size: 13px !important; }

/* Primary helpers */
.mud-primary-text { color: #1a56db !important; }
.mud-primary { background-color: #1a56db !important; }

/* Hide LeptonX leftover UI */
.lpx-language-switch,
.abp-language-switch { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE — patches para asegurar legibilidad en todas las páginas
   ══════════════════════════════════════════════════════════════════════════ */

.ds-shell[data-theme="dark"] h1,
.ds-shell[data-theme="dark"] h2,
.ds-shell[data-theme="dark"] h3,
.ds-shell[data-theme="dark"] h4,
.ds-shell[data-theme="dark"] h5,
.ds-shell[data-theme="dark"] h6,
.ds-shell[data-theme="dark"] .mud-typography,
.ds-shell[data-theme="dark"] .mud-typography-h1,
.ds-shell[data-theme="dark"] .mud-typography-h2,
.ds-shell[data-theme="dark"] .mud-typography-h3,
.ds-shell[data-theme="dark"] .mud-typography-h4,
.ds-shell[data-theme="dark"] .mud-typography-h5,
.ds-shell[data-theme="dark"] .mud-typography-h6,
.ds-shell[data-theme="dark"] .mud-typography-body1,
.ds-shell[data-theme="dark"] .mud-typography-body2,
.ds-shell[data-theme="dark"] .mud-typography-subtitle1,
.ds-shell[data-theme="dark"] label {
    color: var(--ds-text-primary);
}

.ds-shell[data-theme="dark"] .mud-text-secondary,
.ds-shell[data-theme="dark"] .mud-typography-subtitle2,
.ds-shell[data-theme="dark"] .mud-typography-caption {
    color: var(--ds-text-secondary) !important;
}

/* Inputs: borders y placeholder en dark */
.ds-shell[data-theme="dark"] .mud-input-outlined-border {
    border-color: var(--ds-border) !important;
}
.ds-shell[data-theme="dark"] .mud-input input,
.ds-shell[data-theme="dark"] .mud-input textarea,
.ds-shell[data-theme="dark"] .mud-input-slot {
    color: var(--ds-text-primary) !important;
}
.ds-shell[data-theme="dark"] .mud-input-label {
    color: var(--ds-text-secondary) !important;
}

/* MudTable filas alternas y bordes en dark */
.ds-shell[data-theme="dark"] .mud-table-body .mud-table-row:hover {
    background: rgba(255,255,255,.04) !important;
}

/* MudMenu / popovers fondo dark */
.ds-shell[data-theme="dark"] .mud-popover,
.ds-shell[data-theme="dark"] .mud-list,
.ds-shell[data-theme="dark"] .mud-menu-list {
    background: var(--ds-bg-surface) !important;
    color: var(--ds-text-primary) !important;
}

/* MudSelect dropdown */
.ds-shell[data-theme="dark"] .mud-list-item:hover {
    background: rgba(255,255,255,.06) !important;
}

/* MudAlert variantes en dark — solo el background si es default */
.ds-shell[data-theme="dark"] .mud-alert-filled-info {
    background: rgba(26,86,219,.18) !important;
    color: var(--ds-text-primary) !important;
}

/* MudIcon default dentro de typography */
.ds-shell[data-theme="dark"] .mud-typography .mud-icon-default {
    color: var(--ds-text-primary);
}

/* Switch / Checkbox borde */
.ds-shell[data-theme="dark"] .mud-switch-track,
.ds-shell[data-theme="dark"] .mud-checkbox-track {
    border-color: var(--ds-border) !important;
}

/* MudIconButton hover background */
.ds-shell[data-theme="dark"] .mud-icon-button:hover {
    background: rgba(255,255,255,.06) !important;
}