/* ============================================================
   HILVANA DESIGN SYSTEM — TOKENS
   Carga después de RadzenTheme y antes de site.css.
   Los selectores .rz-theme-* tienen mayor especificidad que
   :root, por lo que estos valores sobreescriben los defaults
   de Radzen Material 3.
   ============================================================ */

/* ── 1. TOKENS INDEPENDIENTES DEL TEMA ────────────────────── */
:root {
    /* Fuentes */
    --h-font-primary:   'Roboto Flex', sans-serif;
    --h-font-secondary: 'Source Sans 3', sans-serif;

    /* Espaciado — base 4px */
    --h-space-1:  0.25rem;   /* 4px  */
    --h-space-2:  0.5rem;    /* 8px  */
    --h-space-3:  0.75rem;   /* 12px */
    --h-space-4:  1rem;      /* 16px */
    --h-space-5:  1.25rem;   /* 20px */
    --h-space-6:  1.5rem;    /* 24px */
    --h-space-8:  2rem;      /* 32px */
    --h-space-10: 2.5rem;    /* 40px */
    --h-space-12: 3rem;      /* 48px */
    --h-space-16: 4rem;      /* 64px */

    /* Border radius */
    --h-radius-sm:   0.375rem;  /* 6px  — badges, inputs */
    --h-radius-md:   0.625rem;  /* 10px — botones, small cards */
    --h-radius-lg:   1rem;      /* 16px — cards */
    --h-radius-xl:   1.5rem;    /* 24px — dialogs */
    --h-radius-full: 9999px;    /* pill */

    /* Sombras con tinte índigo */
    --h-shadow-sm:
        0 1px 3px 0   rgba(79, 70, 229, 0.08),
        0 1px 2px -1px rgba(79, 70, 229, 0.06);
    --h-shadow-md:
        0 4px 6px  -1px rgba(79, 70, 229, 0.10),
        0 2px 4px  -2px rgba(79, 70, 229, 0.08);
    --h-shadow-lg:
        0 10px 15px -3px rgba(79, 70, 229, 0.12),
        0 4px  6px  -4px rgba(79, 70, 229, 0.08);
    --h-shadow-xl:
        0 20px 25px -5px  rgba(79, 70, 229, 0.14),
        0 8px  10px -6px  rgba(79, 70, 229, 0.10);

    /* Transiciones */
    --h-transition:      150ms cubic-bezier(0.4, 0, 0.2, 1);
    --h-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Colores semánticos de estado (compartidos, ambos temas) */
    --h-color-success:       #16A34A;
    --h-color-success-light: #DCFCE7;
    --h-color-success-text:  #14532D;

    --h-color-warning:       #D97706;
    --h-color-warning-light: #FEF3C7;
    --h-color-warning-text:  #78350F;

    --h-color-error:         #DC2626;
    --h-color-error-light:   #FEE2E2;
    --h-color-error-text:    #7F1D1D;

    --h-color-info:          #0284C7;
    --h-color-info-light:    #E0F2FE;
    --h-color-info-text:     #0C4A6E;

    --h-color-neutral:       #64748B;
    --h-color-neutral-light: #F1F5F9;
    --h-color-neutral-text:  #1E293B;
}

/* ── 2. TEMA CLARO ── .rz-theme-material3 ─────────────────── */
.rz-theme-material3 {
    /* Primario — Indigo 600 */
    --rz-primary:              #4F46E5;
    --rz-primary-light:        #6366F1;
    --rz-primary-lighter:      #E0E7FF;
    --rz-primary-dark:         #4338CA;
    --rz-primary-darker:       #3730A3;
    --rz-on-primary:           #FFFFFF;
    --rz-on-primary-light:     #FFFFFF;
    --rz-on-primary-lighter:   #3730A3;
    --rz-on-primary-dark:      #FFFFFF;
    --rz-on-primary-darker:    #FFFFFF;

    /* Secundario — Violet 600 */
    --rz-secondary:            #7C3AED;
    --rz-secondary-light:      #8B5CF6;
    --rz-secondary-lighter:    #EDE9FE;
    --rz-secondary-dark:       #6D28D9;
    --rz-secondary-darker:     #5B21B6;
    --rz-on-secondary:         #FFFFFF;
    --rz-on-secondary-light:   #FFFFFF;
    --rz-on-secondary-lighter: #4C1D95;
    --rz-on-secondary-dark:    #FFFFFF;
    --rz-on-secondary-darker:  #FFFFFF;

    /* Estados semánticos */
    --rz-success:              #16A34A;
    --rz-success-light:        #22C55E;
    --rz-success-lighter:      #DCFCE7;
    --rz-success-dark:         #15803D;
    --rz-success-darker:       #166534;
    --rz-on-success:           #FFFFFF;

    --rz-warning:              #D97706;
    --rz-warning-light:        #F59E0B;
    --rz-warning-lighter:      #FEF3C7;
    --rz-warning-dark:         #B45309;
    --rz-warning-darker:       #92400E;
    --rz-on-warning:           #FFFFFF;

    --rz-danger:               #DC2626;
    --rz-danger-light:         #EF4444;
    --rz-danger-lighter:       #FEE2E2;
    --rz-danger-dark:          #B91C1C;
    --rz-danger-darker:        #991B1B;
    --rz-on-danger:            #FFFFFF;

    --rz-info:                 #0284C7;
    --rz-info-light:           #0EA5E9;
    --rz-info-lighter:         #E0F2FE;
    --rz-info-dark:            #0369A1;
    --rz-info-darker:          #075985;
    --rz-on-info:              #FFFFFF;

    /* Superficies */
    --rz-body-background-color:  #F8FAFC;
    --rz-base-background-color:  #FFFFFF;
    --rz-card-background-color:  #FFFFFF;
    --rz-panel-background-color: #FFFFFF;

    /* Escala neutra base (Radzen). En el tema claro: tonos claros + texto oscuro.
       Componentes y estilos inline pueden usar --rz-base-100/200/300 sin perder contraste. */
    --rz-base-50:  #F8FAFC;
    --rz-base-100: #F1F5F9;
    --rz-base-200: #E2E8F0;
    --rz-base-300: #CBD5E1;

    /* Texto */
    --rz-text-color:           #1E293B;
    --rz-text-contrast-color:  #FFFFFF;
    --rz-text-disabled-color:  #94A3B8;
    --rz-link-color:           #4F46E5;
    --rz-link-hover-color:     #4338CA;

    /* Tipografía */
    --rz-text-font-family:  'Roboto Flex', sans-serif;
    --rz-root-font-size:    16px;
    --rz-body-font-size:    0.9375rem;
    --rz-body-line-height:  1.6;

    /* Border radius — alineados con --h-radius-* */
    --rz-border-radius:   0.625rem;
    --rz-border-radius-1: 0.25rem;
    --rz-border-radius-2: 0.375rem;
    --rz-border-radius-3: 0.5rem;
    --rz-border-radius-4: 0.625rem;
    --rz-border-radius-5: 0.75rem;
    --rz-border-radius-6: 1rem;
    --rz-border-radius-7: 1.25rem;
    --rz-border-radius-8: 1.5rem;
    --rz-border-radius-9: 1.75rem;
    --rz-border-radius-10: 9999px;

    /* Cards */
    --rz-card-border-radius: var(--h-radius-lg);
    --rz-card-shadow:        var(--h-shadow-md);
    --rz-card-padding:       var(--h-space-6);
    --rz-card-border:        1px solid #E2E8F0;

    /* Header */
    --rz-header-background-color: #FFFFFF;
    --rz-header-color:            #1E293B;
    --rz-header-shadow:           var(--h-shadow-sm);

    /* Sidebar */
    --rz-sidebar-background-color:   #FFFFFF;
    --rz-sidebar-color:              #475569;
    --rz-sidebar-border-inline-end:  1px solid #E2E8F0;

    /* Panel menu */
    --rz-panel-menu-item-active-background-color: #EEF2FF;
    --rz-panel-menu-item-active-color:            #4F46E5;
    --rz-panel-menu-icon-color:                   #64748B;

    /* Sombras Radzen */
    --rz-shadow-1: var(--h-shadow-sm);
    --rz-shadow-2: var(--h-shadow-md);
    --rz-shadow-3: var(--h-shadow-lg);
    --rz-shadow-4: var(--h-shadow-xl);

    /* Formularios */
    --rz-form-field-label-color:       #64748B;
    --rz-form-field-label-focus-color: #4F46E5;
    --rz-border-focus:                 2px solid #4F46E5;

    /* Botones */
    --rz-button-border-radius: var(--h-radius-md);

    /* Badges */
    --rz-badge-border-radius: var(--h-radius-sm);

    /* Tokens Hilvana — tema claro */
    --h-surface-page:        #F8FAFC;
    --h-surface-card:        #FFFFFF;
    --h-surface-elevated:    #FFFFFF;
    --h-border-color:        #E2E8F0;
    --h-border-color-strong: #CBD5E1;
    --h-text-primary:        #1E293B;
    --h-text-secondary:      #475569;
    --h-text-muted:          #94A3B8;
    --h-brand-primary:       #4F46E5;
    --h-brand-secondary:     #7C3AED;
    --h-brand-gradient:      linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
}

/* ── 3. TEMA OSCURO ── .rz-theme-material3-dark ───────────── */
.rz-theme-material3-dark {
    /* Primario — Indigo 400 (más claro para fondos oscuros) */
    --rz-primary:              #818CF8;
    --rz-primary-light:        #A5B4FC;
    --rz-primary-lighter:      #1E1B4B;
    --rz-primary-dark:         #6366F1;
    --rz-primary-darker:       #4F46E5;
    --rz-on-primary:           #1E1B4B;
    --rz-on-primary-light:     #1E1B4B;
    --rz-on-primary-lighter:   #A5B4FC;
    --rz-on-primary-dark:      #0F0E2A;
    --rz-on-primary-darker:    #FFFFFF;

    /* Secundario — Violet 400 */
    --rz-secondary:            #A78BFA;
    --rz-secondary-light:      #C4B5FD;
    --rz-secondary-lighter:    #1E1040;
    --rz-secondary-dark:       #8B5CF6;
    --rz-secondary-darker:     #7C3AED;
    --rz-on-secondary:         #1E1040;
    --rz-on-secondary-light:   #1E1040;
    --rz-on-secondary-lighter: #C4B5FD;
    --rz-on-secondary-dark:    #0F0820;
    --rz-on-secondary-darker:  #FFFFFF;

    /* Estados semánticos — ajustados para fondos oscuros */
    --rz-success:              #4ADE80;
    --rz-success-light:        #86EFAC;
    --rz-success-lighter:      #052E16;
    --rz-success-dark:         #22C55E;
    --rz-success-darker:       #16A34A;
    --rz-on-success:           #052E16;

    --rz-warning:              #FCD34D;
    --rz-warning-light:        #FDE68A;
    --rz-warning-lighter:      #1C1200;
    --rz-warning-dark:         #FBBF24;
    --rz-warning-darker:       #F59E0B;
    --rz-on-warning:           #1C1200;

    --rz-danger:               #F87171;
    --rz-danger-light:         #FCA5A5;
    --rz-danger-lighter:       #2D0000;
    --rz-danger-dark:          #EF4444;
    --rz-danger-darker:        #DC2626;
    --rz-on-danger:            #2D0000;

    --rz-info:                 #38BDF8;
    --rz-info-light:           #7DD3FC;
    --rz-info-lighter:         #082F49;
    --rz-info-dark:            #0EA5E9;
    --rz-info-darker:          #0284C7;
    --rz-on-info:              #082F49;

    /* Superficies — Slate 900 con tinte índigo */
    --rz-body-background-color:  #0F172A;
    --rz-base-background-color:  #1E293B;
    --rz-card-background-color:  #1E293B;
    --rz-panel-background-color: #1E293B;

    /* Escala neutra base (Radzen) invertida para tema oscuro. Por defecto Radzen
       mantiene --rz-base-100 como un color CLARO en dark, lo que rompe el contraste
       con el texto claro del tema. Aquí lo remapeamos a superficies oscuras para
       que cualquier uso de --rz-base-100/200/300 siga siendo legible en oscuro. */
    --rz-base-50:  #1E293B;
    --rz-base-100: #273549;
    --rz-base-200: #334155;
    --rz-base-300: #475569;

    /* Texto */
    --rz-text-color:           #E2E8F0;
    --rz-text-contrast-color:  #0F172A;
    --rz-text-disabled-color:  #475569;
    --rz-link-color:           #818CF8;
    --rz-link-hover-color:     #A5B4FC;

    /* Tipografía */
    --rz-text-font-family: 'Roboto Flex', sans-serif;
    --rz-root-font-size:   16px;
    --rz-body-font-size:   0.9375rem;
    --rz-body-line-height: 1.6;

    /* Border radius */
    --rz-border-radius:   0.625rem;
    --rz-border-radius-1: 0.25rem;
    --rz-border-radius-2: 0.375rem;
    --rz-border-radius-3: 0.5rem;
    --rz-border-radius-4: 0.625rem;
    --rz-border-radius-5: 0.75rem;
    --rz-border-radius-6: 1rem;
    --rz-border-radius-7: 1.25rem;
    --rz-border-radius-8: 1.5rem;
    --rz-border-radius-9: 1.75rem;
    --rz-border-radius-10: 9999px;

    /* Cards */
    --rz-card-border-radius: var(--h-radius-lg);
    --rz-card-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.40),
        0 2px 4px -2px rgba(0, 0, 0, 0.30);
    --rz-card-padding: var(--h-space-6);
    --rz-card-border:  1px solid #334155;

    /* Header */
    --rz-header-background-color: #1E293B;
    --rz-header-color:            #E2E8F0;
    --rz-header-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.40),
        0 1px 2px -1px rgba(0, 0, 0, 0.30);

    /* Sidebar */
    --rz-sidebar-background-color:  #1E293B;
    --rz-sidebar-color:             #94A3B8;
    --rz-sidebar-border-inline-end: 1px solid #334155;

    /* Panel menu */
    --rz-panel-menu-item-active-background-color: #1E1B4B;
    --rz-panel-menu-item-active-color:            #818CF8;
    --rz-panel-menu-icon-color:                   #64748B;

    /* Sombras */
    --rz-shadow-1: 0 1px 3px 0 rgba(0,0,0,0.40), 0 1px 2px -1px rgba(0,0,0,0.30);
    --rz-shadow-2: 0 4px 6px -1px rgba(0,0,0,0.45), 0 2px 4px -2px rgba(0,0,0,0.35);
    --rz-shadow-3: 0 10px 15px -3px rgba(0,0,0,0.50), 0 4px 6px -4px rgba(0,0,0,0.35);
    --rz-shadow-4: 0 20px 25px -5px rgba(0,0,0,0.55), 0 8px 10px -6px rgba(0,0,0,0.40);

    /* Formularios */
    --rz-form-field-label-color:       #64748B;
    --rz-form-field-label-focus-color: #818CF8;
    --rz-border-focus:                 2px solid #818CF8;

    /* Botones */
    --rz-button-border-radius: var(--h-radius-md);

    /* Badges */
    --rz-badge-border-radius: var(--h-radius-sm);

    /* Tokens Hilvana — tema oscuro */
    --h-surface-page:        #0F172A;
    --h-surface-card:        #1E293B;
    --h-surface-elevated:    #273549;
    --h-border-color:        #334155;
    --h-border-color-strong: #475569;
    --h-text-primary:        #E2E8F0;
    --h-text-secondary:      #94A3B8;
    --h-text-muted:          #475569;
    --h-brand-primary:       #818CF8;
    --h-brand-secondary:     #A78BFA;
    --h-brand-gradient:      linear-gradient(135deg, #818CF8 0%, #A78BFA 100%);
}

/* ── 4. COMPONENT GLOBAL CLASSES ──────────────────────────────
   These rules are defined here (global) so they work during
   Server-side rendering, bypassing Blazor CSS isolation limits.
   ─────────────────────────────────────────────────────────── */

/* PageHeader */
.h-page-header__title {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--h-text-primary) !important;
}
.h-page-header__subtitle {
    color: var(--h-text-secondary) !important;
    margin-top: var(--h-space-1) !important;
}
@media (max-width: 599px) {
    .h-page-header__main {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/* DataCard */
.h-data-card {
    border-radius: var(--h-radius-lg) !important;
    border: 1px solid var(--h-border-color) !important;
    box-shadow: var(--h-shadow-sm) !important;
    transition: box-shadow var(--h-transition), transform var(--h-transition);
}
.h-data-card:hover {
    box-shadow: var(--h-shadow-md) !important;
    transform: translateY(-1px);
}
.h-data-card--loading {
    pointer-events: none;
    opacity: 0.6;
}
.h-data-card__label {
    color: var(--h-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 var(--h-space-1) 0;
}
.h-data-card__value-row {
    display: flex;
    align-items: baseline;
    gap: var(--h-space-2);
    flex-wrap: wrap;
}
.h-data-card__value {
    color: var(--h-text-primary);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.2;
}
.h-data-card__trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--h-radius-sm);
    padding: 2px 6px;
}
.h-data-card__trend--up    { color: var(--h-color-success-text); background-color: var(--h-color-success-light); }
.h-data-card__trend--down  { color: var(--h-color-error-text);   background-color: var(--h-color-error-light);   }
.h-data-card__trend--flat  { color: var(--h-color-neutral-text); background-color: var(--h-color-neutral-light); }
.h-data-card__trend-icon   { font-size: 0.875rem !important; }
.h-data-card__desc {
    color: var(--h-text-muted);
    font-size: 0.8125rem;
    margin: var(--h-space-1) 0 0 0;
}
.h-data-card__footer {
    font-size: 0.8125rem;
    color: var(--h-text-secondary);
}
@media (max-width: 599px) {
    .h-data-card__value { font-size: 1.5rem; }
}

/* StatusBadge */
.h-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--h-font-primary);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    padding: 3px 8px;
    border-radius: var(--h-radius-sm);
    white-space: nowrap;
}
.h-status-badge--pill      { border-radius: var(--h-radius-full); }
.h-status-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}
.h-status-badge__icon {
    font-size: 0.875rem;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
.h-status-badge--active   { color: var(--h-color-success-text); background-color: var(--h-color-success-light); }
.h-status-badge--inactive { color: var(--h-color-neutral-text); background-color: var(--h-color-neutral-light); }
.h-status-badge--pending  { color: var(--h-color-warning-text); background-color: var(--h-color-warning-light); }
.h-status-badge--error    { color: var(--h-color-error-text);   background-color: var(--h-color-error-light);   }
.h-status-badge--warning  { color: var(--h-color-warning-text); background-color: var(--h-color-warning-light); }
.h-status-badge--info     { color: var(--h-color-info-text);    background-color: var(--h-color-info-light);    }
.h-status-badge--draft {
    color: var(--h-color-neutral-text);
    background-color: var(--h-color-neutral-light);
    border: 1px dashed var(--h-border-color-strong);
}
.h-status-badge--archived { color: var(--h-text-muted); background-color: var(--h-border-color); }

/* HilvanaButton */
.h-btn {
    font-family: var(--h-font-primary);
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--h-radius-md) !important;
    transition: all var(--h-transition) !important;
}
.h-btn--primary:not([disabled]):hover   { box-shadow: 0 4px 14px 0 rgba(79, 70, 229, 0.35) !important; transform: translateY(-1px); }
.h-btn--secondary:not([disabled]):hover { box-shadow: 0 4px 14px 0 rgba(124, 58, 237, 0.35) !important; transform: translateY(-1px); }
.h-btn--success:not([disabled]):hover   { box-shadow: 0 4px 14px 0 rgba(22, 163, 74, 0.35) !important;  transform: translateY(-1px); }
.h-btn--danger:not([disabled]):hover    { box-shadow: 0 4px 14px 0 rgba(220, 38, 38, 0.35) !important;  transform: translateY(-1px); }
.h-btn--ghost {
    border-color: var(--h-border-color-strong) !important;
    color: var(--h-text-secondary) !important;
}
.h-btn--ghost:not([disabled]):hover {
    border-color: var(--rz-primary) !important;
    color: var(--rz-primary) !important;
    background-color: var(--rz-primary-lighter) !important;
}
.h-btn:not([disabled]):active { transform: translateY(0) !important; box-shadow: none !important; }
.h-btn--small { font-size: 0.8125rem !important; }
.h-btn--large { font-size: 1rem !important; padding-block: 0.625rem !important; padding-inline: 1.5rem !important; }
.h-btn-full   { width: 100%; }

/* ─── Login layout ──────────────────────────────────────────── */
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--h-brand-gradient);
    padding: var(--h-space-4);
}

.login-card {
    background: var(--h-surface-card);
    border-radius: var(--h-radius-xl);
    box-shadow: var(--h-shadow-xl);
    padding: var(--h-space-8);
    width: 100%;
    max-width: 420px;
}

.login-header {
    text-align: center;
    margin-bottom: var(--h-space-6);
}

.login-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--h-text-secondary);
    margin-bottom: 0.375rem;
}

.login-input {
    width: 100% !important;
    display: block !important;
}

.login-validation {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--rz-danger);
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--h-text-secondary);
}

.login-submit {
    width: 100%;
    justify-content: center;
    padding-block: 0.75rem !important;
}

/* ── 11. ESTADO DESHABILITADO ────────────────────────────────
   Radzen por defecto aplica opacity ~0.4 a los inputs/dropdowns deshabilitados,
   lo que vuelve el texto prácticamente ilegible. Subimos la opacidad y forzamos
   un color de texto secundario para que el valor se siga leyendo, manteniendo
   la apariencia "no editable" sin perder legibilidad. */
.rz-state-disabled,
.rz-textbox[disabled],
.rz-textarea[disabled],
.rz-dropdown.rz-state-disabled,
.rz-numeric.rz-state-disabled,
.rz-password.rz-state-disabled,
.rz-state-disabled .rz-inputtext,
.rz-state-disabled .rz-dropdown-label,
.rz-state-disabled input,
.rz-state-disabled textarea {
    opacity: 0.85 !important;
    color: var(--h-text-secondary) !important;
    -webkit-text-fill-color: var(--h-text-secondary) !important;
    cursor: not-allowed;
}

/* Labels de RadzenFormField cuando el control hijo está disabled. */
.rz-form-field:has(.rz-state-disabled) .rz-form-field-label,
.rz-form-field:has([disabled]) .rz-form-field-label {
    opacity: 0.85;
}