/* =============================================================
   SAP Horizon (Morning Horizon) — MudBlazor Theme Override
   Basado en los design tokens oficiales de SAP Horizon
   Compatible con MudBlazor 6.x+
   =============================================================
   Diferencias clave vs Fiori 3:
     • Colores más vibrantes y saturados (paleta "bold")
     • Bordes más redondeados (0.5rem en lugar de 0.25rem)
     • Tipografía más grande y con mayor jerarquía
     • Shell Bar más claro (#1d2d3e en lugar de #354a5e)
     • Sombras más pronunciadas
     • Espaciado más generoso
   =============================================================
   Uso:
     1. Agrega este archivo en wwwroot/css/
     2. Referencíalo en index.html DESPUÉS de los CSS de MudBlazor:
        <link href="css/horizon-mudblazor.css" rel="stylesheet" />
     3. Carga la fuente SAP 72 (opcional pero recomendado):
        <link href="https://ui5.sap.com/resources/sap/ui/core/themes/sap_horizon/fonts.css" rel="stylesheet" />
   ============================================================= */


/* ─────────────────────────────────────────────
   1. FUENTE — SAP 72 / IBM Plex Sans fallback
   ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
    --horizon-font-family: "72", "72full", "SAP72", "IBM Plex Sans", Arial, Helvetica, sans-serif;
    --horizon-font-size-xs: 0.6875rem; /* 11px */
    --horizon-font-size-sm: 0.75rem; /* 12px */
    --horizon-font-size-md: 0.875rem; /* 14px */
    --horizon-font-size-lg: 1rem; /* 16px */
    --horizon-font-size-xl: 1.25rem; /* 20px */
    --horizon-font-size-2xl: 1.5rem; /* 24px */
    --horizon-font-size-3xl: 2rem; /* 32px */
    --horizon-line-height: 1.5; /* Horizon usa más line-height que Fiori 3 */
}


/* ─────────────────────────────────────────────
   2. TOKENS DE COLOR — SAP Horizon Morning
      Paleta oficial: vibrante, moderna, WCAG AA
   ───────────────────────────────────────────── */
:root {
    /* ── Brand / Accent ── */
    --sap-brand-color: #0070f2; /* Azul primario — mismo que Fiori 3 */
    --sap-highlight-color: #0040b0; /* Hover/active — más oscuro en Horizon */
    --sap-accent-color: #c87b00; /* Amber accent — Horizon exclusive */
    /* ── Shell ── */
    --sap-shell-color: #1d2d3e; /* Más oscuro y profundo que Fiori 3 */
    --sap-shell-hover: #253545;
    --sap-shell-active: #0d1d2d;
    /* ── Backgrounds ── */
    --sap-background-color: #ffffff; /* Fondo blanco */
    --sap-background-color-2: #eaecee;
    --sap-group-content-background: #ffffff;
    --sap-overlay-background: rgba(0,0,0,0.5);
    --sap-list-background: #ffffff;
    --sap-list-hover-background: #eff4fb; /* Azulado en Horizon */
    --sap-list-selected-background: #daeeff; /* Más saturado que Fiori 3 */
    --sap-list-active-background: #c5e3ff;
    /* ── Borders ── */
    --sap-border-color: #d5dadf;
    --sap-border-color-2: #b0b8c1;
    --sap-field-border-color: #7f8c98;
    --sap-border-radius: 0.5rem; /* ← Horizonte usa 8px, Fiori 3 usaba 4px */
    --sap-border-radius-sm: 0.375rem; /* 6px — botones, chips */
    --sap-border-radius-lg: 0.75rem; /* 12px — cards, dialogs */
    --sap-border-radius-pill: 1rem; /* chips tipo pill */
    /* ── Text ── */
    --sap-text-color: #1d2d3e; /* Más oscuro que Fiori 3 */
    --sap-link-color: #0064d9;
    --sap-link-hover-color: #0040b0;
    --sap-disabled-text-color: #8696a9;
    --sap-label-color: #556b82; /* Más azulado que el gris de Fiori 3 */
    --sap-placeholder-color: #8696a9;
    --sap-title-color: #1d2d3e;
    --sap-inverse-text-color: #ffffff;
    /* ── Semantic — más saturados y vibrantes en Horizon ── */
    --sap-positive-color: #188918;
    --sap-positive-bg: #ebf5eb;
    --sap-positive-border: #188918;
    --sap-positive-dark: #0f5f0f;
    --sap-negative-color: #cc1919;
    --sap-negative-bg: #fce8e8;
    --sap-negative-border: #cc1919;
    --sap-negative-dark: #8a0000;
    --sap-critical-color: #c87b00; /* Amber — exclusivo de Horizon */
    --sap-critical-bg: #fef3e0;
    --sap-critical-border: #c87b00;
    --sap-critical-dark: #8f5700;
    --sap-informative-color: #0070f2;
    --sap-informative-bg: #e0effd;
    --sap-informative-border: #0070f2;
    --sap-neutral-color: #556b82;
    --sap-neutral-bg: #f1f3f5;
    --sap-neutral-border: #7f8c98;
    /* ── Shadows — más pronunciadas en Horizon ── */
    --sap-shadow-0: none;
    --sap-shadow-1: 0 2px 6px rgba(0,0,0,0.10), 0 0 1px rgba(0,0,0,0.08);
    --sap-shadow-2: 0 4px 16px rgba(0,0,0,0.14), 0 0 1px rgba(0,0,0,0.10);
    --sap-shadow-3: 0 8px 28px rgba(0,0,0,0.18), 0 0 1px rgba(0,0,0,0.12);
    --sap-shadow-focus: none;
    /* ── Spacing — más generoso en Horizon ── */
    --sap-space-1: 0.25rem; /* 4px */
    --sap-space-2: 0.5rem; /* 8px */
    --sap-space-3: 0.75rem; /* 12px */
    --sap-space-4: 1rem; /* 16px */
    --sap-space-5: 1.25rem; /* 20px */
    --sap-space-6: 1.5rem; /* 24px */
    --sap-space-8: 2rem; /* 32px */
    /* ── Control dimensions ── */
    --sap-control-height: 2.5rem; /* 40px — Horizon es más alto que Fiori 3 */
    --sap-control-height-compact: 1.75rem; /* 28px */
    --sap-control-height-sm: 2rem; /* 32px */
    --sap-shell-height: 3rem; /* 48px */
    --sap-icon-size: 1.125rem; /* 18px — iconos más grandes en Horizon */
}


/* ─────────────────────────────────────────────
   3. MUDBLAZOR CSS VARIABLE OVERRIDES
      Mapeamos los tokens Horizon → variables MudBlazor
   ───────────────────────────────────────────── */
:root {
    /* Paleta principal */
    --mud-palette-primary: var(--sap-brand-color);
    --mud-palette-primary-darken: var(--sap-highlight-color);
    --mud-palette-primary-lighten: var(--sap-informative-bg);
    --mud-palette-primary-text: #ffffff;
    --mud-palette-primary-hover: rgba(0,112,242,0.10);
    --mud-palette-secondary: var(--sap-label-color);
    --mud-palette-secondary-darken: #3a4f63;
    --mud-palette-secondary-lighten: var(--sap-neutral-bg);
    --mud-palette-secondary-text: #ffffff;
    --mud-palette-tertiary: var(--sap-shell-color);
    --mud-palette-tertiary-text: #ffffff;
    /* Semantic */
    --mud-palette-success: var(--sap-positive-color);
    --mud-palette-success-darken: var(--sap-positive-dark);
    --mud-palette-success-lighten: var(--sap-positive-bg);
    --mud-palette-success-text: #ffffff;
    --mud-palette-error: var(--sap-negative-color);
    --mud-palette-error-darken: var(--sap-negative-dark);
    --mud-palette-error-lighten: var(--sap-negative-bg);
    --mud-palette-error-text: #ffffff;
    --mud-palette-warning: var(--sap-critical-color);
    --mud-palette-warning-darken: var(--sap-critical-dark);
    --mud-palette-warning-lighten: var(--sap-critical-bg);
    --mud-palette-warning-text: #ffffff;
    --mud-palette-info: var(--sap-informative-color);
    --mud-palette-info-darken: var(--sap-highlight-color);
    --mud-palette-info-lighten: var(--sap-informative-bg);
    --mud-palette-info-text: #ffffff;
    /* Fondos */
    --mud-palette-background: var(--sap-background-color);
    --mud-palette-background-grey: var(--sap-background-color-2);
    --mud-palette-surface: var(--sap-group-content-background);
    --mud-palette-drawer-background: #ffffff;
    --mud-palette-drawer-text: var(--sap-text-color);
    --mud-palette-drawer-icon: var(--sap-label-color);
    /* Shell */
    --mud-palette-appbar-background: var(--sap-shell-color);
    --mud-palette-appbar-text: #ffffff;
    /* Texto */
    --mud-palette-text-primary: var(--sap-text-color);
    --mud-palette-text-secondary: var(--sap-label-color);
    --mud-palette-text-disabled: var(--sap-disabled-text-color);
    /* Dividers */
    --mud-palette-divider: var(--sap-border-color);
    --mud-palette-divider-light: var(--sap-background-color-2);
    /* Action states */
    --mud-palette-action-default: var(--sap-text-color);
    --mud-palette-action-disabled: var(--sap-disabled-text-color);
    --mud-palette-action-disabled-background: var(--sap-background-color-2);
    --mud-palette-dark: var(--sap-shell-color);
    --mud-palette-dark-text: #ffffff;
    /* Grises */
    --mud-palette-grey-default: #8696a9;
    --mud-palette-grey-light: #d5dadf;
    --mud-palette-grey-lighter: var(--sap-background-color);
    --mud-palette-grey-dark: var(--sap-label-color);
    --mud-palette-grey-darker: var(--sap-text-color);
    /* Tipografía */
    --mud-typography-default-family: var(--horizon-font-family);
    --mud-typography-default-size: var(--horizon-font-size-md);
    --mud-typography-default-weight: 400;
    --mud-typography-default-lineheight: var(--horizon-line-height);
    --mud-typography-body1-family: var(--horizon-font-family);
    --mud-typography-body1-size: var(--horizon-font-size-md);
    --mud-typography-body1-weight: 400;
    --mud-typography-body2-family: var(--horizon-font-family);
    --mud-typography-body2-size: var(--horizon-font-size-sm);
    --mud-typography-body2-weight: 400;
    --mud-typography-button-family: var(--horizon-font-family);
    --mud-typography-button-size: var(--horizon-font-size-md);
    --mud-typography-button-weight: 600;
    --mud-typography-caption-family: var(--horizon-font-family);
    --mud-typography-caption-size: var(--horizon-font-size-sm);
    --mud-typography-h1-size: 2.25rem;
    --mud-typography-h2-size: 2rem;
    --mud-typography-h3-size: 1.75rem;
    --mud-typography-h4-size: 1.5rem;
    --mud-typography-h5-size: 1.25rem;
    --mud-typography-h6-size: 1.125rem;
    --mud-typography-subtitle1-size: var(--horizon-font-size-lg);
    --mud-typography-subtitle2-size: var(--horizon-font-size-md);
    /* Elevaciones */
    --mud-elevation-0: none;
    --mud-elevation-1: var(--sap-shadow-1);
    --mud-elevation-2: var(--sap-shadow-1);
    --mud-elevation-3: var(--sap-shadow-2);
    --mud-elevation-4: var(--sap-shadow-2);
    --mud-elevation-6: var(--sap-shadow-2);
    --mud-elevation-8: var(--sap-shadow-3);
    --mud-elevation-12: var(--sap-shadow-3);
    --mud-elevation-16: var(--sap-shadow-3);
    --mud-elevation-24: var(--sap-shadow-3);
    /* Border radius — ¡clave en Horizon! */
    --mud-default-borderradius: 8px;
}


/* ─────────────────────────────────────────────
   4. RESET BASE
   ───────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    font-family: var(--horizon-font-family);
    font-size: var(--horizon-font-size-md);
    color: var(--sap-text-color);
    background-color: var(--sap-background-color);
    line-height: var(--horizon-line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ─────────────────────────────────────────────
   5. SHELL BAR / MudAppBar
   Horizon: más oscuro, con sombra más dramática
   ───────────────────────────────────────────── */
.mud-appbar {
    background-color: #ffffff !important;
    color: #1D2D3E !important;
    height: 64px !important;
    min-height: 64px !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

    .mud-appbar .mud-toolbar {
        min-height: var(--sap-shell-height);
        padding: 0 var(--sap-space-6);
    }

    .mud-appbar .mud-icon-button,
    .mud-appbar .mud-icon-button:hover {
        color: #1D2D3E !important;
        border-radius: var(--sap-border-radius-sm) !important;
    }

        .mud-appbar .mud-icon-button:hover {
            background-color: #EAECEE !important;
        }

    .mud-appbar .mud-menu .mud-icon-button {
        color: #4CB749 !important;
        font-size: 2rem !important;
    }

    .mud-appbar .mud-menu .mud-icon-button .mud-icon-root {
        font-size: 2rem !important;
    }

    .mud-appbar .mud-button-root {
        color: #1D2D3E !important;
        border-radius: var(--sap-border-radius-sm) !important;
    }

    .mud-appbar .mud-typography {
        color: #1D2D3E;
        font-size: var(--horizon-font-size-lg);
        font-weight: 600;
    }


/* ─────────────────────────────────────────────
   6. DRAWER / SIDE NAVIGATION
   Horizon: bordes redondeados, azul más vivo en active
   ───────────────────────────────────────────── */
.mud-drawer {
    background-color: #ffffff !important;
    border-right: 1px solid var(--sap-border-color) !important;
    box-shadow: none !important;
}

.mud-drawer-open {
    box-shadow: var(--sap-shadow-2) !important;
}

.mud-nav-item .mud-nav-link {
    border-radius: 8px !important;
    margin: 2px 8px !important;
    padding: 0 var(--sap-space-5) !important;
    height: 2.75rem;
    display: flex !important;
    align-items: center !important;
    font-size: var(--horizon-font-size-md);
    font-weight: 400;
    color: var(--sap-text-color);
    border-left: none !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .mud-nav-item .mud-nav-link:hover {
        background-color: var(--sap-list-hover-background) !important;
        color: var(--sap-text-color) !important;
    }

    .mud-nav-item .mud-nav-link .mud-icon-root {
        color: #4CB749 !important;
    }

    .mud-nav-item .mud-nav-link.active {
        background-color: #E2EEB0 !important;
        color: #1D2D3E !important;
        font-weight: 600;
        border-left: none !important;
    }

        .mud-nav-item .mud-nav-link.active .mud-icon-root {
            color: #4CB749 !important;
        }

.mud-nav-group .mud-nav-group-title {
    font-size: var(--horizon-font-size-xs);
    font-weight: 700;
    color: var(--sap-label-color);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--sap-space-4) var(--sap-space-5) var(--sap-space-1);
}


/* ─────────────────────────────────────────────
   7. BOTONES / MudButton
   Horizon: más redondeados, hover con transform sutil
   ───────────────────────────────────────────── */
.mud-button-root {
    font-family: var(--horizon-font-family) !important;
    font-size: var(--horizon-font-size-md) !important;
    font-weight: 600 !important;
    border-radius: var(--sap-border-radius-sm) !important;
    height: var(--sap-control-height);
    min-width: 4rem;
    padding: 0 var(--sap-space-5) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease !important;
}

/* Emphasized — Primary filled */
.mud-button-filled.mud-button-filled-primary,
.mud-button-filled-primary {
    background-color: var(--sap-brand-color) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: var(--sap-shadow-1) !important;
}

    .mud-button-filled.mud-button-filled-primary:hover,
    .mud-button-filled-primary:hover {
        background-color: var(--sap-highlight-color) !important;
        box-shadow: var(--sap-shadow-2) !important;
    }

    .mud-button-filled.mud-button-filled-primary:active,
    .mud-button-filled-primary:active {
        transform: scale(0.98) !important;
        box-shadow: var(--sap-shadow-1) !important;
    }

/* Standard — Outlined */
.mud-button-outlined.mud-button-outlined-primary {
    background-color: #ffffff !important;
    color: var(--sap-brand-color) !important;
    border: 1px solid var(--sap-brand-color) !important;
    box-shadow: none !important;
}

    .mud-button-outlined.mud-button-outlined-primary:hover {
        background-color: var(--mud-palette-primary-hover) !important;
        box-shadow: var(--sap-shadow-1) !important;
    }

/* Ghost — Text */
.mud-button-text.mud-button-text-primary {
    color: var(--sap-brand-color) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
}

    .mud-button-text.mud-button-text-primary:hover {
        background-color: var(--mud-palette-primary-hover) !important;
        border-color: transparent !important;
    }

/* Danger */
.mud-button-filled.mud-button-filled-error {
    background-color: var(--sap-negative-color) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: var(--sap-shadow-1) !important;
}

    .mud-button-filled.mud-button-filled-error:hover {
        background-color: var(--sap-negative-dark) !important;
        box-shadow: var(--sap-shadow-2) !important;
    }

/* Success */
.mud-button-filled.mud-button-filled-success {
    background-color: var(--sap-positive-color) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: var(--sap-shadow-1) !important;
}

    .mud-button-filled.mud-button-filled-success:hover {
        background-color: var(--sap-positive-dark) !important;
        box-shadow: var(--sap-shadow-2) !important;
    }

/* Disabled */
.mud-button-root:disabled,
.mud-button-root.mud-disabled {
    background-color: var(--sap-background-color-2) !important;
    color: var(--sap-disabled-text-color) !important;
    border-color: var(--sap-border-color) !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
}

/* FAB / Icon Button */
.mud-icon-button {
    color: var(--sap-label-color);
    border-radius: var(--sap-border-radius-sm) !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

    .mud-icon-button:hover {
        background-color: var(--sap-list-hover-background) !important;
        color: var(--sap-brand-color) !important;
    }


/* ─────────────────────────────────────────────
   8. INPUTS / MudTextField, MudSelect, etc.
   Horizon: label siempre arriba, bordes redondeados
   ───────────────────────────────────────────── */
.mud-input-label {
    font-family: var(--horizon-font-family) !important;
    font-size: var(--horizon-font-size-sm) !important;
    font-weight: 600 !important; 
    color: var(--sap-label-color) !important;
}

/* Outlined border */
/*.mud-input.mud-input-outlined .mud-input-outlined-border,
.mud-input-outlined .mud-input-slot {
    border-color: var(--sap-field-border-color) !important;
    border-radius: var(--sap-border-radius) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}*/

/*.mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--sap-text-color) !important;
}*/

/*.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border,
.mud-input-outlined.mud-focused .mud-input-slot {
    border-color: var(--sap-brand-color) !important;
    border-width: 2px !important;
    box-shadow: none !important;
}*/

/*.mud-input input,*/
/*.mud-input textarea {
    font-family: var(--horizon-font-family) !important;
    font-size: var(--horizon-font-size-md) !important;
    color: var(--sap-text-color) !important;
    padding: 0 var(--sap-space-3) !important;
    height: var(--sap-control-height) !important;
    line-height: var(--sap-control-height) !important;
}*/

/*.mud-input textarea {
    height: auto !important;
    line-height: var(--horizon-line-height) !important;
    padding: var(--sap-space-3) !important;
}

    .mud-input input::placeholder,
    .mud-input textarea::placeholder {
        color: var(--sap-placeholder-color) !important;
    }*/

/* Filled variant */
/*.mud-input.mud-input-filled .mud-input-filled-bg {
    background-color: var(--sap-background-color-2) !important;
    border-radius: var(--sap-border-radius) var(--sap-border-radius) 0 0 !important;
    border-bottom: 2px solid var(--sap-field-border-color) !important;
}*/

/*.mud-input.mud-input-filled.mud-focused .mud-input-filled-bg {
    border-bottom-color: var(--sap-brand-color) !important;
}*/

/* Helper text */
/*.mud-input-helper-text {
    font-size: var(--horizon-font-size-sm) !important;
    color: var(--sap-label-color) !important;
    margin-top: 3px !important;
}*/

/* Error state */
/*.mud-input-error .mud-input-outlined-border,
.mud-input-error .mud-input-slot {
    border-color: var(--sap-negative-color) !important;
    box-shadow: 0 0 0 3px rgba(204,25,25,0.15) !important;
}

.mud-input-error .mud-input-helper-text,
.mud-input-error .mud-input-label {
    color: var(--sap-negative-color) !important;
}*/

/* Checkbox */
/*.mud-checkbox .mud-icon-root {
    color: var(--sap-field-border-color) !important;
}

.mud-checkbox.mud-checked .mud-icon-root {
    color: var(--sap-brand-color) !important;
}*/

/* Radio */
/*.mud-radio .mud-icon-root {
    color: var(--sap-field-border-color) !important;
}

.mud-radio.mud-checked .mud-icon-root {
    color: var(--sap-brand-color) !important;
}*/

/* Switch — Horizon usa thumb más grande */
/*.mud-switch-thumb {
    background-color: #ffffff !important;
    box-shadow: var(--sap-shadow-1) !important;
}

.mud-switch-track {
    background-color: var(--sap-field-border-color) !important;
    border-radius: var(--sap-border-radius-pill) !important;
}

.mud-switch-input:checked ~ .mud-switch-track {
    background-color: var(--sap-brand-color) !important;
}*/


/* ─────────────────────────────────────────────
   9. CARDS / MudCard
   Horizon: bordes más redondeados, sombra más dramática
   ───────────────────────────────────────────── */
.mud-card {
    background-color: #ffffff !important;
    border: 1px solid var(--sap-border-color) !important;
    border-radius: var(--sap-border-radius-lg) !important;
    box-shadow: var(--sap-shadow-1) !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease !important;
    overflow: hidden;
}

    .mud-card:hover {
        box-shadow: var(--sap-shadow-2) !important;
    }

.mud-card-header {
    padding: var(--sap-space-5) var(--sap-space-5) var(--sap-space-3) !important;
    border-bottom: 1px solid var(--sap-border-color);
}

    .mud-card-header .mud-card-header-title {
        font-size: var(--horizon-font-size-xl) !important;
        font-weight: 700 !important;
        color: var(--sap-title-color) !important;
    }

    .mud-card-header .mud-card-header-subheader {
        font-size: var(--horizon-font-size-sm) !important;
        color: var(--sap-label-color) !important;
        margin-top: 2px !important;
    }

.mud-card-content {
    padding: var(--sap-space-5) !important;
}

.mud-card-actions {
    padding: var(--sap-space-3) var(--sap-space-5) !important;
    border-top: 1px solid var(--sap-border-color);
    gap: var(--sap-space-2);
}


/* ─────────────────────────────────────────────
   10. TABLAS / MudTable, MudDataGrid
   Horizon: filas más altas, header azulado
   ───────────────────────────────────────────── */
.mud-table-container {
    border: 1px solid var(--sap-border-color) !important;
    border-radius: var(--sap-border-radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--sap-shadow-1) !important;
}

.mud-table {
    font-family: var(--horizon-font-family) !important;
    font-size: var(--horizon-font-size-md) !important;
}

.mud-table-head .mud-table-cell {
    background-color: var(--sap-background-color) !important;
    color: var(--sap-label-color) !important;
    font-size: var(--horizon-font-size-xs) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 2px solid var(--sap-border-color-2) !important;
    padding: var(--sap-space-3) var(--sap-space-5) !important;
    height: 2.5rem;
}

.mud-table-body .mud-table-row {
    border-bottom: 1px solid var(--sap-border-color) !important;
    transition: background-color 0.12s ease;
}

    .mud-table-body .mud-table-row:last-child {
        border-bottom: none !important;
    }

    .mud-table-body .mud-table-row:hover {
        background-color: var(--sap-list-hover-background) !important;
    }

    .mud-table-body .mud-table-row.mud-selected-item {
        background-color: var(--sap-list-selected-background) !important;
    }

.mud-table-body .mud-table-cell {
    color: var(--sap-text-color) !important;
    font-size: var(--horizon-font-size-md) !important;
    padding: var(--sap-space-3) var(--sap-space-5) !important;
    height: 3rem; /* Horizon: filas más altas */
    border-bottom: none !important;
}

.mud-table-pagination-toolbar {
    border-top: 1px solid var(--sap-border-color) !important;
    background-color: var(--sap-background-color) !important;
    font-size: var(--horizon-font-size-sm) !important;
    color: var(--sap-label-color) !important;
    min-height: 2.75rem !important;
}

.mud-table-sort-label.mud-active {
    color: var(--sap-brand-color) !important;
}


/* ─────────────────────────────────────────────
   11. TABS / MudTabs
   Horizon: pills redondeados en lugar de underline
   ───────────────────────────────────────────── */
.mud-tabs-tabbar {
    background-color: transparent !important;
    border-bottom: 2px solid var(--sap-border-color) !important;
    box-shadow: none !important;
    padding: 0 var(--sap-space-2);
}

.mud-tab {
    font-family: var(--horizon-font-family) !important;
    font-size: var(--horizon-font-size-md) !important;
    font-weight: 400 !important;
    color: var(--sap-label-color) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    min-height: 3rem !important;
    padding: 0 var(--sap-space-5) !important;
    border-radius: var(--sap-border-radius-sm) var(--sap-border-radius-sm) 0 0 !important;
    transition: color 0.15s ease, background-color 0.15s ease !important;
}

    .mud-tab:hover {
        color: var(--sap-brand-color) !important;
        background-color: var(--sap-list-hover-background) !important;
    }

    .mud-tab.mud-tab-active {
        color: var(--sap-brand-color) !important;
        font-weight: 700 !important;
    }

.mud-tab-slider {
    background-color: var(--sap-brand-color) !important;
    height: 3px !important;
    border-radius: 3px 3px 0 0 !important;
}


/* ─────────────────────────────────────────────
   12. DIALOGS / MudDialog
   Horizon: esquinas más redondeadas, backdrop azulado
   ───────────────────────────────────────────── */
.mud-dialog {
    border-radius: var(--sap-border-radius-lg) !important;
    box-shadow: var(--sap-shadow-3) !important;
    border: none !important;
    overflow: hidden;
}

.mud-dialog-title {
    font-family: var(--horizon-font-family) !important;
    font-size: var(--horizon-font-size-2xl) !important;
    font-weight: 700 !important;
    color: var(--sap-title-color) !important;
    padding: var(--sap-space-6) var(--sap-space-6) var(--sap-space-4) !important;
    border-bottom: 1px solid var(--sap-border-color);
    background-color: #ffffff;
}

.mud-dialog-content {
    padding: var(--sap-space-6) !important;
    background-color: var(--sap-background-color) !important;
}

.mud-dialog-actions {
    padding: var(--sap-space-4) var(--sap-space-6) !important;
    border-top: 1px solid var(--sap-border-color) !important;
    background-color: #ffffff !important;
    gap: var(--sap-space-3);
    justify-content: flex-end;
}

.mud-overlay-scrim {
    background-color: rgba(29,45,62,0.55) !important; /* Azulado en Horizon */
    backdrop-filter: blur(2px);
}


/* ─────────────────────────────────────────────
   13. CHIPS / MudChip
   Horizon: más redondeados, colores más saturados
   ───────────────────────────────────────────── */
.mud-chip {
    font-family: var(--horizon-font-family) !important;
    font-size: var(--horizon-font-size-sm) !important;
    font-weight: 600 !important;
    border-radius: var(--sap-border-radius-pill) !important;
    height: 1.75rem !important;
    padding: 0 var(--sap-space-3) !important;
    background-color: var(--sap-neutral-bg) !important;
    color: var(--sap-text-color) !important;
    border: 1px solid var(--sap-border-color) !important;
    transition: background-color 0.15s ease !important;
}

    .mud-chip:hover {
        background-color: var(--sap-background-color-2) !important;
    }

.mud-chip-color-primary {
    background-color: var(--sap-informative-bg) !important;
    color: var(--sap-brand-color) !important;
    border-color: rgba(0,112,242,0.3) !important;
}

.mud-chip-color-success {
    background-color: var(--sap-positive-bg) !important;
    color: var(--sap-positive-color) !important;
    border-color: rgba(24,137,24,0.3) !important;
}

.mud-chip-color-error {
    background-color: var(--sap-negative-bg) !important;
    color: var(--sap-negative-color) !important;
    border-color: rgba(204,25,25,0.3) !important;
}

.mud-chip-color-warning {
    background-color: var(--sap-critical-bg) !important;
    color: var(--sap-critical-color) !important;
    border-color: rgba(200,123,0,0.3) !important;
}

.mud-chip-color-info {
    background-color: var(--sap-informative-bg) !important;
    color: var(--sap-informative-color) !important;
    border-color: rgba(0,112,242,0.3) !important;
}


/* ─────────────────────────────────────────────
   14. ALERTS / MudAlert — Message Strips
   ───────────────────────────────────────────── */
.mud-alert {
    border-radius: var(--sap-border-radius) !important;
    border: 1px solid !important;
    font-size: var(--horizon-font-size-md) !important;
    padding: var(--sap-space-3) var(--sap-space-5) !important;
}

.mud-alert-filled-success,
.mud-alert-outlined-success,
.mud-alert-standard-success {
    background-color: var(--sap-positive-bg) !important;
    color: var(--sap-positive-color) !important;
    border-color: var(--sap-positive-border) !important;
}

.mud-alert-filled-error,
.mud-alert-outlined-error,
.mud-alert-standard-error {
    background-color: var(--sap-negative-bg) !important;
    color: var(--sap-negative-color) !important;
    border-color: var(--sap-negative-border) !important;
}

.mud-alert-filled-warning,
.mud-alert-outlined-warning,
.mud-alert-standard-warning {
    background-color: var(--sap-critical-bg) !important;
    color: var(--sap-critical-color) !important;
    border-color: var(--sap-critical-border) !important;
}

.mud-alert-filled-info,
.mud-alert-outlined-info,
.mud-alert-standard-info {
    background-color: var(--sap-informative-bg) !important;
    color: var(--sap-informative-color) !important;
    border-color: var(--sap-informative-border) !important;
}


/* ─────────────────────────────────────────────
   15. SNACKBAR / MudSnackbar
   ───────────────────────────────────────────── */
.mud-snackbar {
    border-radius: var(--sap-border-radius) !important;
    font-family: var(--horizon-font-family) !important;
    font-size: var(--horizon-font-size-md) !important;
    box-shadow: var(--sap-shadow-3) !important;
    min-width: 18rem;
    max-width: 30rem;
}


/* ─────────────────────────────────────────────
   16. TOOLTIPS / MudTooltip
   ───────────────────────────────────────────── */
.mud-tooltip {
    font-family: var(--horizon-font-family) !important;
    font-size: var(--horizon-font-size-sm) !important;
    background-color: var(--sap-shell-color) !important;
    color: #ffffff !important;
    border-radius: var(--sap-border-radius-sm) !important;
    padding: var(--sap-space-1) var(--sap-space-3) !important;
    box-shadow: var(--sap-shadow-2) !important;
}


/* ─────────────────────────────────────────────
   17. BADGES / MudBadge
   ───────────────────────────────────────────── */
.mud-badge-badge {
    font-family: var(--horizon-font-family) !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    border-radius: 0.75rem !important;
    min-width: 1.125rem !important;
    height: 1.125rem !important;
    padding: 0 0.3rem !important;
}


/* ─────────────────────────────────────────────
   18. BREADCRUMBS / MudBreadcrumbs
   ───────────────────────────────────────────── */
.mud-breadcrumbs {
    font-size: var(--horizon-font-size-sm) !important;
    color: var(--sap-label-color) !important;
}

.mud-breadcrumb-item a {
    color: var(--sap-label-color) !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

    .mud-breadcrumb-item a:hover {
        color: var(--sap-brand-color) !important;
        text-decoration: underline !important;
    }

.mud-breadcrumb-item:last-child .mud-breadcrumb-item-text {
    color: var(--sap-text-color) !important;
    font-weight: 700;
}

.mud-breadcrumb-separator {
    color: var(--sap-label-color) !important;
}


/* ─────────────────────────────────────────────
   19. MENU / MudMenu, MudPopover
   Horizon: redondeado y con blur en backdrop
   ───────────────────────────────────────────── */
.mud-popover-paper {
    background-color: #ffffff !important;
    border: 1px solid var(--sap-border-color) !important;
    border-radius: var(--sap-border-radius-lg) !important;
    box-shadow: var(--sap-shadow-3) !important;
    padding: var(--sap-space-2) !important;
}

.mud-list-item {
    font-family: var(--horizon-font-family) !important;
    font-size: var(--horizon-font-size-md) !important;
    color: var(--sap-text-color) !important;
    min-height: 3rem !important;
    padding: 0 var(--sap-space-4) !important;
    border-radius: var(--sap-border-radius-sm) !important;
    transition: background-color 0.12s ease !important;
    margin: 1px 0 !important;
}

    .mud-list-item:hover {
        background-color: var(--sap-list-hover-background) !important;
    }

    .mud-list-item.mud-selected-item {
        background-color: var(--sap-list-selected-background) !important;
        color: var(--sap-brand-color) !important;
        font-weight: 600;
    }

    .mud-list-item .mud-list-item-text .mud-typography {
        font-size: var(--horizon-font-size-md) !important;
    }


/* ─────────────────────────────────────────────
   20. STEPPER / MudStepper
   ───────────────────────────────────────────── */
.mud-stepper .mud-step-icon-root {
    background-color: var(--sap-background-color-2) !important;
    border: 2px solid var(--sap-border-color-2) !important;
    color: var(--sap-label-color) !important;
    border-radius: 50% !important;
}

    .mud-stepper .mud-step-icon-root.mud-step-icon-active {
        background-color: var(--sap-brand-color) !important;
        border-color: var(--sap-brand-color) !important;
        color: #ffffff !important;
        box-shadow: var(--sap-shadow-focus) !important;
    }

    .mud-stepper .mud-step-icon-root.mud-step-icon-completed {
        background-color: var(--sap-positive-color) !important;
        border-color: var(--sap-positive-color) !important;
        color: #ffffff !important;
    }

.mud-stepper .mud-step-connector-line {
    border-color: var(--sap-border-color) !important;
}

.mud-stepper .mud-step-label-label {
    font-family: var(--horizon-font-family) !important;
    font-size: var(--horizon-font-size-sm) !important;
}

    .mud-stepper .mud-step-label-label.mud-step-label-active {
        font-weight: 700 !important;
        color: var(--sap-text-color) !important;
    }


/* ─────────────────────────────────────────────
   21. PROGRESS INDICATORS
   ───────────────────────────────────────────── */
.mud-progress-linear .mud-progress-linear-bar {
    background-color: var(--sap-brand-color) !important;
    border-radius: var(--sap-border-radius-pill) !important;
}

.mud-progress-linear .mud-progress-linear-track {
    background-color: var(--sap-background-color-2) !important;
    border-radius: var(--sap-border-radius-pill) !important;
}

.mud-progress-circular {
    color: var(--sap-brand-color) !important;
}


/* ─────────────────────────────────────────────
   22. DIVIDERS
   ───────────────────────────────────────────── */
.mud-divider {
    border-color: var(--sap-border-color) !important;
}


/* ─────────────────────────────────────────────
   23. TIPOGRAFÍA / MudText
   Horizon: jerarquía más marcada, pesos mayores
   ───────────────────────────────────────────── */
.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6 {
    font-family: var(--horizon-font-family) !important;
    font-weight: 700 !important;
    color: var(--sap-title-color) !important;
    line-height: 1.25 !important;
}

.mud-typography-subtitle1 {
    font-family: var(--horizon-font-family) !important;
    font-size: var(--horizon-font-size-lg) !important;
    font-weight: 600 !important;
    color: var(--sap-text-color) !important;
}

.mud-typography-subtitle2 {
    font-family: var(--horizon-font-family) !important;
    font-size: var(--horizon-font-size-md) !important;
    font-weight: 600 !important;
    color: var(--sap-label-color) !important;
}

.mud-typography-body1 {
    font-family: var(--horizon-font-family) !important;
    font-size: var(--horizon-font-size-md) !important;
    color: var(--sap-text-color) !important;
}

.mud-typography-body2 {
    font-family: var(--horizon-font-family) !important;
    font-size: var(--horizon-font-size-sm) !important;
    color: var(--sap-label-color) !important;
}

.mud-typography-caption {
    font-size: var(--horizon-font-size-sm) !important;
    color: var(--sap-label-color) !important;
}

.mud-link {
    color: var(--sap-link-color) !important;
    text-decoration: none !important;
    font-weight: 600;
    transition: color 0.15s ease !important;
}

    .mud-link:hover {
        color: var(--sap-link-hover-color) !important;
        text-decoration: underline !important;
    }


/* ─────────────────────────────────────────────
   24. PAGE HEADER — Object Page Horizon style
   ───────────────────────────────────────────── */
.horizon-page-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--sap-border-color);
    padding: var(--sap-space-6) var(--sap-space-8);
    display: flex;
    flex-direction: column;
    gap: var(--sap-space-1);
    border-radius: 0 0 var(--sap-border-radius-lg) var(--sap-border-radius-lg);
    box-shadow: var(--sap-shadow-1);
}

.horizon-page-header__breadcrumb {
    font-size: var(--horizon-font-size-sm);
    color: var(--sap-label-color);
}

.horizon-page-header__title {
    font-family: var(--horizon-font-family);
    font-size: var(--horizon-font-size-3xl);
    font-weight: 700;
    color: var(--sap-title-color);
    margin: 0;
    line-height: 1.2;
}

.horizon-page-header__subtitle {
    font-family: var(--horizon-font-family);
    font-size: var(--horizon-font-size-lg);
    color: var(--sap-label-color);
    margin: 0;
}

.horizon-page-header__toolbar {
    display: flex;
    align-items: center;
    gap: var(--sap-space-3);
    margin-top: var(--sap-space-4);
    flex-wrap: wrap;
}

/* Section header */
.horizon-section-header {
    font-family: var(--horizon-font-family);
    font-size: var(--horizon-font-size-lg);
    font-weight: 700;
    color: var(--sap-title-color);
    padding: var(--sap-space-3) 0;
    border-bottom: 2px solid var(--sap-border-color);
    margin-bottom: var(--sap-space-5);
}

/* Content area / page body */
.horizon-page-content {
    padding: var(--sap-space-6) var(--sap-space-8);
    background-color: var(--sap-background-color);
    min-height: calc(100vh - 3rem);
}


/* ─────────────────────────────────────────────
   25. STATUS INDICATORS (Object Status)
   Horizon: con fondo coloreado, más visual
   ───────────────────────────────────────────── */
.horizon-status {
    display: inline-flex;
    align-items: center;
    gap: var(--sap-space-1);
    font-family: var(--horizon-font-family);
    font-size: var(--horizon-font-size-sm);
    font-weight: 700;
    padding: 2px var(--sap-space-2);
    border-radius: var(--sap-border-radius-pill);
}

.horizon-status--positive {
    color: var(--sap-positive-color);
    background-color: var(--sap-positive-bg);
}

.horizon-status--negative {
    color: var(--sap-negative-color);
    background-color: var(--sap-negative-bg);
}

.horizon-status--critical {
    color: var(--sap-critical-color);
    background-color: var(--sap-critical-bg);
}

.horizon-status--informative {
    color: var(--sap-informative-color);
    background-color: var(--sap-informative-bg);
}

.horizon-status--neutral {
    color: var(--sap-neutral-color);
    background-color: var(--sap-neutral-bg);
}

.horizon-status::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}


/* ─────────────────────────────────────────────
   26. AVATAR / MudAvatar
   Horizon: colores de acento más saturados
   ───────────────────────────────────────────── */
.mud-avatar {
    border-radius: var(--sap-border-radius) !important; /* Cuadrado redondeado, no círculo */
    font-family: var(--horizon-font-family) !important;
    font-weight: 700 !important;
}

.mud-avatar-color-primary {
    background-color: var(--sap-brand-color) !important;
    color: #ffffff !important;
}

.mud-avatar-color-secondary {
    background-color: var(--sap-label-color) !important;
    color: #ffffff !important;
}


/* ─────────────────────────────────────────────
   27. SCROLLBAR — estilo Horizon moderno
   ───────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: var(--sap-border-radius-pill);
}

::-webkit-scrollbar-thumb {
    background: var(--sap-border-color-2);
    border-radius: var(--sap-border-radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--sap-field-border-color);
        background-clip: content-box;
    }


/* ─────────────────────────────────────────────
   28. FOCUS RING — accesibilidad Horizon WCAG AA
   ───────────────────────────────────────────── */
:focus-visible {
    outline: none !important;
    box-shadow: var(--sap-shadow-focus) !important;
    border-radius: var(--sap-border-radius-sm) !important;
}

.mud-button-root:focus-visible {
    box-shadow: var(--sap-shadow-focus) !important;
}

.mud-input.mud-focused {
    box-shadow: none !important;
}

.mud-input-control:focus-within {
    box-shadow: none !important;
}

.mud-input-control:focus-within .mud-input-outlined-border,
.mud-input-control:focus-within fieldset {
    border-color: #D5DADF !important;
    border-width: 1px !important;
    box-shadow: none !important;
}

*:focus {
    outline: none !important;
}

.mud-input-slot:focus,
.mud-input-slot:focus-within,
.mud-input input:focus,
.mud-input textarea:focus {
    box-shadow: none !important;
    outline: none !important;
}

.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: #D5DADF !important;
    border-width: 1px !important;
    box-shadow: none !important;
}
}

.mud-input-underline:after {
    border-bottom-color: #D5DADF !important;
    transform: scaleX(0) !important;
}

.mud-input.mud-focused .mud-input-slot,
.mud-input.mud-focused .mud-input-outlined-border {
    border-color: #D5DADF !important;
}

.mud-input-label.mud-input-label-animated.mud-input-label-inputcontrol {
    color: var(--sap-label-color) !important;
}

.mud-picker .mud-input-slot,
.mud-select .mud-input-slot {
    border-color: #D5DADF !important;
}


    .mud-input-underline:before {
        border-bottom-color: #D5DADF !important;
    }

    .mud-input.mud-input-underline.mud-focused:after {
        border-bottom-color: #D5DADF !important;
        transform: scaleX(0) !important;
    }

    .mud-selected-item {
        color: inherit !important;
    }

    .mud-input-adorner-end .mud-icon-root,
    .mud-input-adorner-start .mud-icon-root {
        color: #556B82 !important;
    }
    /* Picker header - quitar fondo azul */
    .mud-picker-toolbar {
        background-color: #ffffff !important;
        color: #1D2D3E !important;
    }

        .mud-picker-toolbar .mud-typography {
            color: #1D2D3E !important;
        }
    /* Input outlined focus - quitar borde azul */
    .mud-input-outlined .mud-input-outlined-border {
        border-color: #D5DADF !important;
    }

    .mud-input-outlined.mud-focused .mud-input-outlined-border,
    .mud-input-outlined:focus-within .mud-input-outlined-border {
        border-color: #D5DADF !important;
        border-width: 1px !important;
    }
    .mud-picker {
        width: 100% !important;
        max-width: none !important;
    }

    .mud-picker-input-text {
        width: 100% !important;
    }

    .mud-collapse-wrapper,
    .mud-collapse-body {
        overflow: visible !important;
    }

    .mud-paper {
        overflow: visible !important;
    }

    .mud-picker-calendar .mud-picker-calendar-day.mud-selected {
        background-color: #0057d2 !important;
    }

   
    .mud-popover-provider {
        overflow: visible !important;
    }

    .mud-popover,
    .mud-popover-open,
    .mud-popover-paper,
    .mud-popover-cascading-value,
    .mud-picker,
    .mud-picker-inline,
    .mud-picker-inline-paper,
    .mud-picker-container,
    .mud-picker-content,
    .mud-picker-view,
    .mud-picker-calendar-container,
    .mud-picker-calendar-content,
    .mud-picker-calendar-transition {
        max-height: unset !important;
        height: auto !important;
        overflow: visible !important;
    }

    .mud-popover.mud-popover-open {
        max-height: unset !important;
        overflow: visible !important;
    }

    .mud-popover .mud-paper,
    .mud-popover > .mud-paper,
    .mud-popover-paper.mud-paper {
        max-height: unset !important;
        height: auto !important;
        overflow: visible !important;
    }

    .mud-picker-calendar {
        min-width: 280px !important;
        min-height: 320px !important;
    }

    .mud-picker-calendar-content,
    .mud-picker-calendar-header {
        min-width: fit-content !important;
    }

    .mud-picker-datepicker-toolbar ~ .mud-picker-content {
        min-height: 450px !important;
    }

    .mud-picker-calendar-row {
        min-height: 36px !important;
    }
    }
    /* ─────────────────────────────────────────────
   29. ANIMACIONES SUTILES — Horizon feel moderno
   ───────────────────────────────────────────── */
    @media (prefers-reduced-motion: no-preference) {
        .mud-card,
        .mud-button-root,
        .mud-nav-link,
        .mud-list-item,
        .mud-chip {
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            transition-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
        }
    }
    /* ─────────────────────────────────────────────
   30. RESPONSIVE — Compact mode mobile
   ───────────────────────────────────────────── */
    @media (max-width: 600px) {
        :root {
            --sap-control-height: var(--sap-control-height-sm);
            --sap-shell-height: 2.75rem;
        }

        .horizon-page-header {
            padding: var(--sap-space-4) var(--sap-space-4);
        }

        .horizon-page-content {
            padding: var(--sap-space-4);
        }

        .horizon-page-header__title {
            font-size: var(--horizon-font-size-2xl);
        }

        .mud-table-body .mud-table-cell,
        .mud-table-head .mud-table-cell {
            padding: var(--sap-space-2) var(--sap-space-3) !important;
            height: 2.5rem;
        }
    }