/* =====================================================================
   materio-theme.css — Orbis Mentor ERP
   Biblioteca global de estilos inspirada en Materio Admin Template
   Fuente: Inter · Primary: #696CFF (Violet) · Bootstrap 5.3 compatible
   ===================================================================== */

/* ================================================================
   1. DESIGN TOKENS — CSS Custom Properties
   ================================================================ */
:root {
    /* ── Tipografía ──────────────────────────────────────────── */
    --mt-font:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', sans-serif;
    --mt-font-mono:        'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --mt-font-size-root:   16px;
    --mt-font-size-base:   0.9375rem;   /* 15px */
    --mt-font-size-sm:     0.8125rem;   /* 13px */
    --mt-font-size-xs:     0.75rem;     /* 12px */
    --mt-font-size-lg:     1.0625rem;   /* 17px */
    --mt-font-weight:      400;
    --mt-font-weight-md:   500;
    --mt-font-weight-sb:   600;
    --mt-font-weight-bold: 700;
    --mt-line-height:      1.375;
    --mt-line-height-sm:   1.25;
    --mt-line-height-lg:   1.5;

    /* ── Colores primarios ───────────────────────────────────── */
    --mt-primary:          #696CFF;
    --mt-primary-rgb:      105, 108, 255;
    --mt-primary-hover:    #5B5EE6;
    --mt-primary-active:   #4D50CC;
    --mt-primary-light:    rgba(105, 108, 255, 0.16);
    --mt-primary-subtle:   rgba(105, 108, 255, 0.08);

    --mt-secondary:        #8a8d93;
    --mt-secondary-rgb:    138, 141, 147;
    --mt-secondary-light:  rgba(138, 141, 147, 0.16);
    --mt-secondary-subtle: rgba(138, 141, 147, 0.08);

    /* ── Colores semánticos ──────────────────────────────────── */
    --mt-success:          #56ca00;
    --mt-success-rgb:      86, 202, 0;
    --mt-success-hover:    #4db800;
    --mt-success-light:    rgba(86, 202, 0, 0.16);
    --mt-success-subtle:   rgba(86, 202, 0, 0.08);

    --mt-info:             #16b1ff;
    --mt-info-rgb:         22, 177, 255;
    --mt-info-hover:       #149fe6;
    --mt-info-light:       rgba(22, 177, 255, 0.16);
    --mt-info-subtle:      rgba(22, 177, 255, 0.08);

    --mt-warning:          #ffb400;
    --mt-warning-rgb:      255, 180, 0;
    --mt-warning-hover:    #e6a200;
    --mt-warning-light:    rgba(255, 180, 0, 0.16);
    --mt-warning-subtle:   rgba(255, 180, 0, 0.08);

    --mt-danger:           #ff4c51;
    --mt-danger-rgb:       255, 76, 81;
    --mt-danger-hover:     #e64449;
    --mt-danger-light:     rgba(255, 76, 81, 0.16);
    --mt-danger-subtle:    rgba(255, 76, 81, 0.08);

    /* ── Colores base ────────────────────────────────────────── */
    --mt-dark:             #312d4b;
    --mt-dark-rgb:         49, 45, 75;
    --mt-black:            #2e263d;
    --mt-white:            #fff;
    --mt-light:            #dfdfe3;
    --mt-light-rgb:        223, 223, 227;

    /* ── Escala de grises (dark theme) ───────────────────────── */
    --mt-gray-25:          #2a2e42;
    --mt-gray-50:          #2f3349;
    --mt-gray-100:         #363a50;
    --mt-gray-200:         #3e4258;
    --mt-gray-300:         #484c64;
    --mt-gray-400:         #535770;
    --mt-gray-500:         #6b6f84;
    --mt-gray-600:         #7e829a;
    --mt-gray-700:         #a3a7be;
    --mt-gray-800:         #c8cce0;
    --mt-gray-900:         #e7e9f0;

    /* ── Superficies y fondos (dark theme) ───────────────────── */
    --mt-body-bg:          #25293C;
    --mt-body-color:       #a3a7be;
    --mt-paper-bg:         #2F3349;
    --mt-heading-color:    #CFD3EC;
    --mt-muted-color:      #6b6f84;
    --mt-border-color:     #3e4258;
    --mt-border-color-translucent: rgba(231, 227, 252, 0.14);
    --mt-divider-color:    var(--mt-gray-200);

    /* ── Border radius ───────────────────────────────────────── */
    --mt-radius-xs:        0.1875rem;  /* 3px  */
    --mt-radius-sm:        0.25rem;    /* 4px  */
    --mt-radius:           0.375rem;   /* 6px  */
    --mt-radius-lg:        0.5rem;     /* 8px  */
    --mt-radius-xl:        0.625rem;   /* 10px */
    --mt-radius-xxl:       1rem;       /* 16px */
    --mt-radius-pill:      50rem;
    --mt-radius-circle:    50%;

    /* ── Sombras (dark theme) ────────────────────────────────── */
    --mt-shadow-xs:        0 0.125rem 0.25rem 0 rgba(15, 17, 26, 0.3);
    --mt-shadow-sm:        0 0.1875rem 0.375rem 0 rgba(15, 17, 26, 0.35);
    --mt-shadow:           0 0.25rem 0.625rem 0 rgba(15, 17, 26, 0.4);
    --mt-shadow-lg:        0 0.375rem 1rem 0 rgba(15, 17, 26, 0.45);
    --mt-shadow-xl:        0 0.5rem 1.5rem 0 rgba(15, 17, 26, 0.5);
    --mt-shadow-inset:     inset 0 1px 2px rgba(15, 17, 26, 0.2);

    /* ── Transiciones ────────────────────────────────────────── */
    --mt-transition:       0.2s ease-in-out;
    --mt-transition-fast:  0.15s ease-in-out;
    --mt-transition-slow:  0.3s ease-in-out;

    /* ── Layout / Espaciado ──────────────────────────────────── */
    --mt-sidebar-width:    16.25rem;   /* 260px */
    --mt-sidebar-collapsed:4.25rem;    /* 68px  */
    --mt-navbar-height:    4rem;       /* 64px  */
    --mt-content-padding:  1.5rem;
    --mt-card-spacer-y:    1.5rem;
    --mt-card-spacer-x:    1.5rem;

    /* ── Z-Index scale ───────────────────────────────────────── */
    --mt-z-dropdown:       1000;
    --mt-z-sticky:         1020;
    --mt-z-fixed:          1030;
    --mt-z-offcanvas:      1045;
    --mt-z-modal-backdrop: 1050;
    --mt-z-modal:          1055;
    --mt-z-popover:        1070;
    --mt-z-tooltip:        1080;
    --mt-z-toast:          1090;

    /* ── Sidebar / Layout (Materio dark menu) ────────────────── */
    --mt-sidebar-bg:       #2B2C40;
    --mt-sidebar-bg2:      #25263A;
    --mt-sidebar-text:     rgba(231, 227, 252, 0.68);
    --mt-sidebar-text-hover: rgba(231, 227, 252, 0.95);
    --mt-sidebar-active:   var(--mt-primary);
    --mt-sidebar-active-bg: rgba(105, 108, 255, 0.16);
    --mt-sidebar-divider:  rgba(231, 227, 252, 0.2);
    --mt-sidebar-icon:     rgba(231, 227, 252, 0.5);
    --mt-topbar-bg:        var(--mt-paper-bg);
    --mt-topbar-text:      var(--mt-heading-color);
    --mt-topbar-border:    var(--mt-border-color);

    /* ================================================================
       COMPATIBILITY BRIDGE
       Mapea todas las variables legacy al sistema Materio.
       Esto permite que los CSS existentes funcionen sin cambios
       mientras se migran progresivamente a --mt-*.
       ================================================================ */

    /* ── MainLayout (--ml-*) ─────────────────────────────────── */
    --ml-font:             var(--mt-font);
    --ml-sidebar:          var(--mt-sidebar-bg);
    --ml-sidebar2:         var(--mt-sidebar-bg2);
    --ml-accent:           var(--mt-primary);
    --ml-accent2:          var(--mt-primary-hover);
    --ml-primary:          var(--mt-primary);
    --ml-topbar:           var(--mt-topbar-bg);
    --ml-topbar-border:    var(--mt-topbar-border);
    --ml-content:          var(--mt-body-bg);
    --ml-border:           var(--mt-border-color);
    --ml-text:             var(--mt-heading-color);
    --ml-text-sec:         var(--mt-body-color);
    --ml-text-muted:       var(--mt-muted-color);
    --ml-danger:           var(--mt-danger);
    --ml-success:          var(--mt-success);
    --ml-sidebar-w:        260px;
    --ml-sidebar-cw:       68px;
    --ml-topbar-h:         64px;
    --ml-mobile-nav-h:     88px;
    --ml-mobile-tab-h:     38px;
    --ml-t:                var(--mt-transition);
    --ml-shadow-sm:        var(--mt-shadow-sm);
    --ml-shadow-md:        var(--mt-shadow);
    --ml-shadow-lg:        var(--mt-shadow-lg);

    /* ── Auth (--c-*) ────────────────────────────────────────── */
    --auth-font:           var(--mt-font);
    --c-brand-bg:          var(--mt-sidebar-bg);
    --c-brand-bg2:         var(--mt-sidebar-bg2);
    --c-brand-accent:      rgba(105, 108, 255, 0.6);
    --c-brand-dim:         rgba(105, 108, 255, 0.45);
    --c-form-bg:           var(--mt-body-bg);
    --c-primary:           var(--mt-primary);
    --c-primary-dk:        var(--mt-primary-hover);
    --c-primary-lt:        var(--mt-primary-light);
    --c-text:              var(--mt-heading-color);
    --c-text-sec:          var(--mt-body-color);
    --c-text-muted:        var(--mt-muted-color);
    --c-input-bg:          var(--mt-paper-bg);
    --c-border:            var(--mt-border-color);
    --c-border-focus:      var(--mt-primary);
    --c-error:             var(--mt-danger);
    --c-error-bg:          var(--mt-danger-subtle);
    --c-error-bd:          rgba(var(--mt-danger-rgb), 0.3);
    --r:                   var(--mt-radius);

    /* ── Bandejas (--bj-*) ───────────────────────────────────── */
    --bj-font:             var(--mt-font);
    --bj-navy:             var(--mt-dark);
    --bj-navy-2:           var(--mt-heading-color);
    --bj-navy-3:           var(--mt-sidebar-bg2);
    --bj-navy-glow:        rgba(var(--mt-primary-rgb), 0.22);
    --bj-accent:           var(--mt-primary);
    --bj-accent-light:     var(--mt-primary-light);
    --bj-accent-dark:      var(--mt-primary-hover);
    --bj-danger:           var(--mt-danger);
    --bj-danger-light:     var(--mt-danger-subtle);
    --bj-danger-border:    rgba(var(--mt-danger-rgb), 0.3);
    --bj-success:          var(--mt-success);
    --bj-success-light:    var(--mt-success-subtle);
    --bj-success-border:   rgba(var(--mt-success-rgb), 0.3);
    --bj-warn:             var(--mt-warning);
    --bj-warn-light:       var(--mt-warning-subtle);
    --bj-warn-border:      rgba(var(--mt-warning-rgb), 0.3);
    --bj-info:             var(--mt-info);
    --bj-info-light:       var(--mt-info-subtle);
    --bj-info-border:      rgba(var(--mt-info-rgb), 0.3);
    --bj-bg:               var(--mt-body-bg);
    --bj-surface:          var(--mt-paper-bg);
    --bj-border:           var(--mt-border-color);
    --bj-border-2:         var(--mt-gray-100);
    --bj-text:             var(--mt-heading-color);
    --bj-text-2:           var(--mt-body-color);
    --bj-text-muted:       var(--mt-muted-color);
    --bj-radius-sm:        var(--mt-radius-sm);
    --bj-radius:           var(--mt-radius);
    --bj-radius-lg:        var(--mt-radius-lg);
    --bj-shadow-sm:        var(--mt-shadow-xs);
    --bj-shadow:           var(--mt-shadow);
    --bj-shadow-lg:        var(--mt-shadow-lg);
    --bj-transition:       var(--mt-transition-fast);

    /* ── Login (--lp-*) ──────────────────────────────────────── */
    --lp-dark:             var(--mt-sidebar-bg);
    --lp-gold:             var(--mt-primary);
    --lp-parch:            var(--mt-body-bg);
    --lp-border:           var(--mt-border-color);
    --lp-muted:            var(--mt-muted-color);
    --lp-danger:           var(--mt-danger);
    --lp-green:            var(--mt-success);

    /* ── Tareas (--ta-* / cyan theme) ────────────────────────── */
    --ta-cyan:             var(--mt-primary);
    --ta-amber:            var(--mt-warning);
    --ta-green:            var(--mt-success);
    --ta-red:              var(--mt-danger);
    --ta-purple:           #a78bfa;
    --ta-muted:            var(--mt-muted-color);
    --ta-navy:             var(--mt-sidebar-bg2);

    /* ── Calendar (--cal-*) ──────────────────────────────────── */
    --cal-primary:         var(--mt-heading-color);
    --cal-accent:          var(--mt-primary);
    --cal-accent-light:    var(--mt-primary-light);
    --cal-accent-dark:     var(--mt-primary-hover);
    --cal-bg:              var(--mt-body-bg);
    --cal-surface:         var(--mt-paper-bg);
    --cal-border:          var(--mt-border-color);
    --cal-text:            var(--mt-heading-color);
    --cal-text-2:          var(--mt-body-color);
    --cal-muted:           var(--mt-muted-color);
    --cal-danger:          var(--mt-danger);

    /* ── Proyecto/Cliente dialog (--pd-*) ────────────────────── */
    --pd-primary:          var(--mt-heading-color);
    --pd-accent:           var(--mt-primary);
    --pd-accent-light:     var(--mt-primary-light);
    --pd-accent-dark:      var(--mt-primary-hover);
    --pd-bg:               var(--mt-body-bg);
    --pd-surface:          var(--mt-paper-bg);
    --pd-border:           var(--mt-border-color);
    --pd-text:             var(--mt-heading-color);
    --pd-text-2:           var(--mt-body-color);
    --pd-muted:            var(--mt-muted-color);
    --pd-danger:           var(--mt-danger);
    --pd-danger-light:     var(--mt-danger-light);
    --pd-success:          var(--mt-success);

    /* ── Dashboard / Consulta asistencias (--dash-*) ─────────── */
    --dash-navy:           var(--mt-dark);
    --dash-navy2:          var(--mt-heading-color);
    --dash-blue:           var(--mt-primary);
    --dash-text:           var(--mt-heading-color);
    --dash-text2:          var(--mt-body-color);
    --dash-muted:          var(--mt-muted-color);
    --dash-border:         var(--mt-border-color);
    --dash-border2:        var(--mt-gray-100);
    --dash-bg:             var(--mt-body-bg);
    --dash-surface:        var(--mt-paper-bg);

    /* ── Gantt (--gt-*) ──────────────────────────────────────── */
    --gt-bg:               var(--mt-sidebar-bg);
    --gt-bg-head:          var(--mt-sidebar-bg2);
    --gt-bg-even:          rgba(231, 227, 252, 0.025);
    --gt-bg-emp:           rgba(231, 227, 252, 0.035);
    --gt-border:           rgba(var(--mt-primary-rgb), 0.1);
    --gt-border-soft:      rgba(var(--mt-primary-rgb), 0.06);
    --gt-grid-line:        rgba(var(--mt-primary-rgb), 0.07);
    --gt-text-hi:          rgba(231, 227, 252, 0.92);
    --gt-text-mid:         rgba(231, 227, 252, 0.55);
    --gt-text-lo:          rgba(231, 227, 252, 0.35);
    --gt-accent:           var(--mt-primary);
    --gt-hover:            rgba(var(--mt-primary-rgb), 0.05);
}


/* ================================================================
   2. BASE / RESET
   ================================================================ */
.mt-root {
    font-family: var(--mt-font);
    font-size: var(--mt-font-size-base);
    font-weight: var(--mt-font-weight);
    line-height: var(--mt-line-height);
    color: var(--mt-body-color);
    background-color: var(--mt-body-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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


/* ================================================================
   3. TYPOGRAPHY
   ================================================================ */
.mt-h1, .mt-h2, .mt-h3, .mt-h4, .mt-h5, .mt-h6 {
    color: var(--mt-heading-color);
    font-weight: var(--mt-font-weight-md);
    line-height: var(--mt-line-height-sm);
    margin-bottom: 0.5rem;
}
.mt-h1 { font-size: 2.375rem; }    /* 38px */
.mt-h2 { font-size: 2rem; }        /* 32px */
.mt-h3 { font-size: 1.625rem; }    /* 26px */
.mt-h4 { font-size: 1.375rem; }    /* 22px */
.mt-h5 { font-size: 1.125rem; }    /* 18px */
.mt-h6 { font-size: var(--mt-font-size-base); }

.mt-text-primary   { color: var(--mt-primary) !important; }
.mt-text-secondary  { color: var(--mt-secondary) !important; }
.mt-text-success    { color: var(--mt-success) !important; }
.mt-text-info       { color: var(--mt-info) !important; }
.mt-text-warning    { color: var(--mt-warning) !important; }
.mt-text-danger     { color: var(--mt-danger) !important; }
.mt-text-heading    { color: var(--mt-heading-color) !important; }
.mt-text-body       { color: var(--mt-body-color) !important; }
.mt-text-muted      { color: var(--mt-muted-color) !important; }

.mt-text-sm         { font-size: var(--mt-font-size-sm) !important; }
.mt-text-xs         { font-size: var(--mt-font-size-xs) !important; }
.mt-text-lg         { font-size: var(--mt-font-size-lg) !important; }

.mt-fw-normal       { font-weight: var(--mt-font-weight) !important; }
.mt-fw-medium       { font-weight: var(--mt-font-weight-md) !important; }
.mt-fw-semibold     { font-weight: var(--mt-font-weight-sb) !important; }
.mt-fw-bold         { font-weight: var(--mt-font-weight-bold) !important; }


/* ================================================================
   4. CARDS
   ================================================================ */
.mt-card {
    background: var(--mt-paper-bg);
    border: 0;
    border-radius: var(--mt-radius);
    box-shadow: var(--mt-shadow-xs);
    color: var(--mt-body-color);
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    transition: box-shadow var(--mt-transition);
}
.mt-card:hover {
    box-shadow: var(--mt-shadow-sm);
}

.mt-card-header {
    padding: var(--mt-card-spacer-y) var(--mt-card-spacer-x);
    border-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.mt-card-header-title {
    font-size: 1.125rem;
    font-weight: var(--mt-font-weight-md);
    color: var(--mt-heading-color);
    margin: 0;
}
.mt-card-header-subtitle {
    font-size: var(--mt-font-size-sm);
    color: var(--mt-muted-color);
    margin: 0;
}

.mt-card-body {
    padding: var(--mt-card-spacer-y) var(--mt-card-spacer-x);
    flex: 1 1 auto;
}
.mt-card-body:first-child {
    padding-top: var(--mt-card-spacer-y);
}

.mt-card-footer {
    padding: var(--mt-card-spacer-y) var(--mt-card-spacer-x);
    border-top: 1px solid var(--mt-border-color);
}

/* Card con estadísticas */
.mt-card-stats {
    text-align: center;
    padding: 1.5rem;
}
.mt-card-stats .mt-stats-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--mt-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}
.mt-card-stats .mt-stats-value {
    font-size: 1.375rem;
    font-weight: var(--mt-font-weight-sb);
    color: var(--mt-heading-color);
    margin-bottom: 0.25rem;
}
.mt-card-stats .mt-stats-label {
    font-size: var(--mt-font-size-sm);
    color: var(--mt-muted-color);
}

/* Card sin sombra / bordeada */
.mt-card-bordered {
    box-shadow: none;
    border: 1px solid var(--mt-border-color);
}
.mt-card-bordered:hover {
    box-shadow: none;
    border-color: var(--mt-gray-300);
}

/* Card elevada */
.mt-card-elevated {
    box-shadow: var(--mt-shadow);
}
.mt-card-elevated:hover {
    box-shadow: var(--mt-shadow-lg);
}


/* ================================================================
   5. BUTTONS
   ================================================================ */
.mt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--mt-font);
    font-size: var(--mt-font-size-base);
    font-weight: var(--mt-font-weight-md);
    line-height: 1;
    padding: 0.4806rem 1.125rem;
    border-radius: var(--mt-radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--mt-transition);
    user-select: none;
    vertical-align: middle;
}
.mt-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--mt-primary-rgb), 0.25);
}
.mt-btn:disabled,
.mt-btn.disabled {
    opacity: 0.65;
    pointer-events: none;
}

/* Filled variants */
.mt-btn-primary {
    background: var(--mt-primary);
    color: var(--mt-white);
    box-shadow: 0 0.125rem 0.375rem 0 rgba(var(--mt-primary-rgb), 0.3);
}
.mt-btn-primary:hover {
    background: var(--mt-primary-hover);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(var(--mt-primary-rgb), 0.4);
    transform: translateY(-1px);
}
.mt-btn-primary:active {
    background: var(--mt-primary-active);
    transform: translateY(0);
}

.mt-btn-secondary {
    background: var(--mt-secondary);
    color: var(--mt-white);
    box-shadow: 0 0.125rem 0.375rem 0 rgba(var(--mt-secondary-rgb), 0.3);
}
.mt-btn-secondary:hover {
    background: #7c7f85;
    box-shadow: 0 0.25rem 0.625rem 0 rgba(var(--mt-secondary-rgb), 0.4);
    transform: translateY(-1px);
}

.mt-btn-success {
    background: var(--mt-success);
    color: var(--mt-white);
    box-shadow: 0 0.125rem 0.375rem 0 rgba(var(--mt-success-rgb), 0.3);
}
.mt-btn-success:hover {
    background: var(--mt-success-hover);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(var(--mt-success-rgb), 0.4);
    transform: translateY(-1px);
}

.mt-btn-danger {
    background: var(--mt-danger);
    color: var(--mt-white);
    box-shadow: 0 0.125rem 0.375rem 0 rgba(var(--mt-danger-rgb), 0.3);
}
.mt-btn-danger:hover {
    background: var(--mt-danger-hover);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(var(--mt-danger-rgb), 0.4);
    transform: translateY(-1px);
}

.mt-btn-info {
    background: var(--mt-info);
    color: var(--mt-white);
    box-shadow: 0 0.125rem 0.375rem 0 rgba(var(--mt-info-rgb), 0.3);
}
.mt-btn-info:hover {
    background: var(--mt-info-hover);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(var(--mt-info-rgb), 0.4);
    transform: translateY(-1px);
}

.mt-btn-warning {
    background: var(--mt-warning);
    color: var(--mt-white);
    box-shadow: 0 0.125rem 0.375rem 0 rgba(var(--mt-warning-rgb), 0.3);
}
.mt-btn-warning:hover {
    background: var(--mt-warning-hover);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(var(--mt-warning-rgb), 0.4);
    transform: translateY(-1px);
}

/* Outlined variants */
.mt-btn-outline-primary {
    color: var(--mt-primary);
    border-color: var(--mt-primary);
    background: transparent;
}
.mt-btn-outline-primary:hover {
    background: var(--mt-primary);
    color: var(--mt-white);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(var(--mt-primary-rgb), 0.4);
    transform: translateY(-1px);
}

.mt-btn-outline-secondary {
    color: var(--mt-secondary);
    border-color: var(--mt-secondary);
    background: transparent;
}
.mt-btn-outline-secondary:hover {
    background: var(--mt-secondary);
    color: var(--mt-white);
}

.mt-btn-outline-success {
    color: var(--mt-success);
    border-color: var(--mt-success);
    background: transparent;
}
.mt-btn-outline-success:hover {
    background: var(--mt-success);
    color: var(--mt-white);
}

.mt-btn-outline-danger {
    color: var(--mt-danger);
    border-color: var(--mt-danger);
    background: transparent;
}
.mt-btn-outline-danger:hover {
    background: var(--mt-danger);
    color: var(--mt-white);
}

.mt-btn-outline-info {
    color: var(--mt-info);
    border-color: var(--mt-info);
    background: transparent;
}
.mt-btn-outline-info:hover {
    background: var(--mt-info);
    color: var(--mt-white);
}

.mt-btn-outline-warning {
    color: var(--mt-warning);
    border-color: var(--mt-warning);
    background: transparent;
}
.mt-btn-outline-warning:hover {
    background: var(--mt-warning);
    color: var(--mt-white);
}

/* Label / Tinted variants (fondo suave + texto de color) */
.mt-btn-label-primary {
    background: var(--mt-primary-light);
    color: var(--mt-primary);
    border-color: transparent;
}
.mt-btn-label-primary:hover {
    background: var(--mt-primary);
    color: var(--mt-white);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(var(--mt-primary-rgb), 0.4);
}

.mt-btn-label-success {
    background: var(--mt-success-light);
    color: var(--mt-success);
    border-color: transparent;
}
.mt-btn-label-success:hover {
    background: var(--mt-success);
    color: var(--mt-white);
}

.mt-btn-label-danger {
    background: var(--mt-danger-light);
    color: var(--mt-danger);
    border-color: transparent;
}
.mt-btn-label-danger:hover {
    background: var(--mt-danger);
    color: var(--mt-white);
}

.mt-btn-label-info {
    background: var(--mt-info-light);
    color: var(--mt-info);
    border-color: transparent;
}
.mt-btn-label-info:hover {
    background: var(--mt-info);
    color: var(--mt-white);
}

.mt-btn-label-warning {
    background: var(--mt-warning-light);
    color: var(--mt-warning);
    border-color: transparent;
}
.mt-btn-label-warning:hover {
    background: var(--mt-warning);
    color: var(--mt-white);
}

.mt-btn-label-secondary {
    background: var(--mt-secondary-light);
    color: var(--mt-secondary);
    border-color: transparent;
}
.mt-btn-label-secondary:hover {
    background: var(--mt-secondary);
    color: var(--mt-white);
}

/* Text-only variant (sin borde ni fondo) */
.mt-btn-text-primary {
    background: transparent;
    color: var(--mt-primary);
    border: none;
    padding: 0.4806rem 0.75rem;
}
.mt-btn-text-primary:hover {
    background: var(--mt-primary-subtle);
}

.mt-btn-text-secondary {
    background: transparent;
    color: var(--mt-secondary);
    border: none;
    padding: 0.4806rem 0.75rem;
}
.mt-btn-text-secondary:hover {
    background: var(--mt-secondary-subtle);
}

/* Sizes */
.mt-btn-sm {
    font-size: var(--mt-font-size-sm);
    padding: 0.3rem 0.875rem;
    border-radius: var(--mt-radius-sm);
}
.mt-btn-lg {
    font-size: var(--mt-font-size-lg);
    padding: 0.59rem 1.375rem;
    border-radius: var(--mt-radius-lg);
}
.mt-btn-icon {
    width: 2.375rem;
    height: 2.375rem;
    padding: 0;
    border-radius: var(--mt-radius);
}
.mt-btn-icon.mt-btn-sm {
    width: 1.875rem;
    height: 1.875rem;
}
.mt-btn-icon.mt-btn-lg {
    width: 2.875rem;
    height: 2.875rem;
}


/* ================================================================
   6. FORMS / INPUTS
   ================================================================ */
.mt-form-label {
    font-size: var(--mt-font-size-sm);
    font-weight: var(--mt-font-weight-md);
    color: var(--mt-heading-color);
    margin-bottom: 0.375rem;
    display: inline-block;
}

.mt-form-control {
    display: block;
    width: 100%;
    font-family: var(--mt-font);
    font-size: var(--mt-font-size-base);
    font-weight: var(--mt-font-weight);
    line-height: var(--mt-line-height);
    color: var(--mt-heading-color);
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    padding: 0.422rem 0.875rem;
    transition: border-color var(--mt-transition-fast), box-shadow var(--mt-transition-fast);
    appearance: none;
}
.mt-form-control::placeholder {
    color: var(--mt-muted-color);
    opacity: 1;
}
.mt-form-control:hover {
    border-color: var(--mt-gray-400);
}
.mt-form-control:focus {
    border-color: var(--mt-primary);
    box-shadow: 0 0.125rem 0.25rem rgba(var(--mt-primary-rgb), 0.1);
    outline: 0;
}
.mt-form-control:disabled,
.mt-form-control[readonly] {
    background: var(--mt-gray-50);
    color: var(--mt-muted-color);
    opacity: 1;
}

/* Floating label style (Materio signature) */
.mt-form-floating {
    position: relative;
}
.mt-form-floating > .mt-form-control {
    padding: 1.25rem 0.875rem 0.375rem;
    height: 3.125rem;
}
.mt-form-floating > .mt-form-floating-label {
    position: absolute;
    top: 0;
    left: 0.875rem;
    height: 100%;
    padding: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    font-size: var(--mt-font-size-base);
    color: var(--mt-muted-color);
    transition: all var(--mt-transition-fast);
    transform-origin: left top;
}
.mt-form-floating > .mt-form-control:focus ~ .mt-form-floating-label,
.mt-form-floating > .mt-form-control:not(:placeholder-shown) ~ .mt-form-floating-label {
    transform: translateY(-0.6rem) scale(0.8);
    color: var(--mt-primary);
}

/* Validation states */
.mt-form-control.mt-is-valid {
    border-color: var(--mt-success);
}
.mt-form-control.mt-is-valid:focus {
    box-shadow: 0 0.125rem 0.25rem rgba(var(--mt-success-rgb), 0.1);
}
.mt-form-control.mt-is-invalid {
    border-color: var(--mt-danger);
}
.mt-form-control.mt-is-invalid:focus {
    box-shadow: 0 0.125rem 0.25rem rgba(var(--mt-danger-rgb), 0.1);
}
.mt-invalid-feedback {
    font-size: var(--mt-font-size-xs);
    color: var(--mt-danger);
    margin-top: 0.25rem;
}
.mt-valid-feedback {
    font-size: var(--mt-font-size-xs);
    color: var(--mt-success);
    margin-top: 0.25rem;
}

/* Select */
.mt-form-select {
    display: block;
    width: 100%;
    font-family: var(--mt-font);
    font-size: var(--mt-font-size-base);
    color: var(--mt-heading-color);
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    padding: 0.422rem 2.25rem 0.422rem 0.875rem;
    transition: border-color var(--mt-transition-fast), box-shadow var(--mt-transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b6779' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 1em 0.75em;
}
.mt-form-select:hover {
    border-color: var(--mt-gray-400);
}
.mt-form-select:focus {
    border-color: var(--mt-primary);
    box-shadow: 0 0.125rem 0.25rem rgba(var(--mt-primary-rgb), 0.1);
    outline: 0;
}

/* Checkbox / Radio */
.mt-form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.375rem;
    padding: 0;
}
.mt-form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid var(--mt-gray-400);
    border-radius: var(--mt-radius-xs);
    appearance: none;
    cursor: pointer;
    transition: all var(--mt-transition-fast);
    flex-shrink: 0;
}
.mt-form-check-input[type="radio"] {
    border-radius: var(--mt-radius-circle);
}
.mt-form-check-input:checked {
    background-color: var(--mt-primary);
    border-color: var(--mt-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-size: 0.75em;
    background-position: center;
    background-repeat: no-repeat;
}
.mt-form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.mt-form-check-label {
    font-size: var(--mt-font-size-base);
    color: var(--mt-body-color);
    cursor: pointer;
}

/* Switch */
.mt-form-switch {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.mt-form-switch-input {
    width: 2.5rem;
    height: 1.35rem;
    border-radius: var(--mt-radius-pill);
    background: var(--mt-gray-300);
    border: none;
    appearance: none;
    cursor: pointer;
    position: relative;
    transition: background var(--mt-transition-fast);
    flex-shrink: 0;
}
.mt-form-switch-input::after {
    content: '';
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: var(--mt-radius-circle);
    background: var(--mt-white);
    box-shadow: var(--mt-shadow-xs);
    transition: transform var(--mt-transition-fast);
}
.mt-form-switch-input:checked {
    background: var(--mt-primary);
}
.mt-form-switch-input:checked::after {
    transform: translateX(1.15rem);
}

/* Input group */
.mt-input-group {
    display: flex;
    position: relative;
    width: 100%;
}
.mt-input-group > .mt-form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
.mt-input-group > .mt-form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.mt-input-group > .mt-form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.mt-input-group-text {
    display: flex;
    align-items: center;
    padding: 0.422rem 0.875rem;
    font-size: var(--mt-font-size-base);
    color: var(--mt-body-color);
    background: var(--mt-gray-50);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    white-space: nowrap;
}
.mt-input-group-text:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}
.mt-input-group-text:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
}


/* ================================================================
   7. TABLES
   ================================================================ */
.mt-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--mt-font);
    font-size: var(--mt-font-size-base);
    color: var(--mt-body-color);
}
.mt-table thead th {
    font-size: var(--mt-font-size-xs);
    font-weight: var(--mt-font-weight-sb);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mt-muted-color);
    background: transparent;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--mt-border-color);
    white-space: nowrap;
    text-align: left;
}
.mt-table tbody td {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--mt-border-color);
    vertical-align: middle;
}
.mt-table tbody tr {
    transition: background var(--mt-transition-fast);
}
.mt-table tbody tr:hover {
    background: var(--mt-gray-25);
}
.mt-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Table inside card (no extra borders) */
.mt-card > .mt-table,
.mt-card > .mt-card-body > .mt-table {
    margin-bottom: 0;
}
.mt-card > .mt-table thead th:first-child,
.mt-card > .mt-table tbody td:first-child {
    padding-left: var(--mt-card-spacer-x);
}
.mt-card > .mt-table thead th:last-child,
.mt-card > .mt-table tbody td:last-child {
    padding-right: var(--mt-card-spacer-x);
}

/* Striped */
.mt-table-striped tbody tr:nth-child(odd) {
    background: var(--mt-gray-25);
}
.mt-table-striped tbody tr:nth-child(odd):hover {
    background: var(--mt-gray-50);
}

/* Compact */
.mt-table-sm thead th,
.mt-table-sm tbody td {
    padding: 0.5rem 1rem;
}


/* ================================================================
   8. BADGES / CHIPS
   ================================================================ */
.mt-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-family: var(--mt-font);
    font-size: 0.8125em;
    font-weight: var(--mt-font-weight-md);
    line-height: 1;
    padding: 0.35em 0.65em;
    border-radius: var(--mt-radius-sm);
    white-space: nowrap;
    vertical-align: baseline;
}

/* Filled badges */
.mt-badge-primary   { background: var(--mt-primary);   color: var(--mt-white); }
.mt-badge-secondary { background: var(--mt-secondary); color: var(--mt-white); }
.mt-badge-success   { background: var(--mt-success);   color: var(--mt-white); }
.mt-badge-info      { background: var(--mt-info);      color: var(--mt-white); }
.mt-badge-warning   { background: var(--mt-warning);   color: var(--mt-white); }
.mt-badge-danger    { background: var(--mt-danger);     color: var(--mt-white); }
.mt-badge-dark      { background: var(--mt-dark);      color: var(--mt-white); }
.mt-badge-light     { background: var(--mt-light);     color: var(--mt-heading-color); }

/* Label / Tinted badges (signature Materio style) */
.mt-badge-label-primary   { background: var(--mt-primary-light);   color: var(--mt-primary); }
.mt-badge-label-secondary { background: var(--mt-secondary-light); color: var(--mt-secondary); }
.mt-badge-label-success   { background: var(--mt-success-light);   color: var(--mt-success); }
.mt-badge-label-info      { background: var(--mt-info-light);      color: var(--mt-info); }
.mt-badge-label-warning   { background: var(--mt-warning-light);   color: var(--mt-warning); }
.mt-badge-label-danger    { background: var(--mt-danger-light);     color: var(--mt-danger); }

/* Pill badge */
.mt-badge-pill {
    border-radius: var(--mt-radius-pill);
    padding: 0.35em 0.85em;
}

/* Dot badge (notification dot) */
.mt-badge-dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border-radius: var(--mt-radius-circle);
    font-size: 0;
}


/* ================================================================
   9. ALERTS
   ================================================================ */
.mt-alert {
    padding: 0.875rem 1rem;
    border-radius: var(--mt-radius);
    font-size: var(--mt-font-size-base);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.mt-alert-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.mt-alert-content {
    flex: 1;
}
.mt-alert-title {
    font-weight: var(--mt-font-weight-sb);
    margin-bottom: 0.25rem;
}

.mt-alert-primary {
    background: var(--mt-primary-light);
    color: var(--mt-primary);
    border: 1px solid rgba(var(--mt-primary-rgb), 0.24);
}
.mt-alert-success {
    background: var(--mt-success-light);
    color: var(--mt-success);
    border: 1px solid rgba(var(--mt-success-rgb), 0.24);
}
.mt-alert-info {
    background: var(--mt-info-light);
    color: var(--mt-info);
    border: 1px solid rgba(var(--mt-info-rgb), 0.24);
}
.mt-alert-warning {
    background: var(--mt-warning-light);
    color: var(--mt-warning);
    border: 1px solid rgba(var(--mt-warning-rgb), 0.24);
}
.mt-alert-danger {
    background: var(--mt-danger-light);
    color: var(--mt-danger);
    border: 1px solid rgba(var(--mt-danger-rgb), 0.24);
}


/* ================================================================
   10. AVATARS
   ================================================================ */
.mt-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--mt-radius-circle);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--mt-font-weight-sb);
    font-size: 0.9375rem;
    flex-shrink: 0;
}
.mt-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mt-avatar-xs  { width: 1.5rem;  height: 1.5rem;  font-size: 0.625rem; }
.mt-avatar-sm  { width: 2rem;    height: 2rem;     font-size: 0.75rem; }
.mt-avatar-md  { width: 3rem;    height: 3rem;     font-size: 1.125rem; }
.mt-avatar-lg  { width: 3.5rem;  height: 3.5rem;   font-size: 1.5rem; }
.mt-avatar-xl  { width: 4rem;    height: 4rem;     font-size: 1.875rem; }

/* Initial avatar (letter) */
.mt-avatar-initial {
    background: var(--mt-gray-200, #3e4258);
    color: var(--mt-heading-color);
}
.mt-avatar-primary   { background: var(--mt-primary-light);   color: var(--mt-primary); }
.mt-avatar-success   { background: var(--mt-success-light);   color: var(--mt-success); }
.mt-avatar-danger    { background: var(--mt-danger-light);     color: var(--mt-danger); }
.mt-avatar-warning   { background: var(--mt-warning-light);   color: var(--mt-warning); }
.mt-avatar-info      { background: var(--mt-info-light);      color: var(--mt-info); }

/* Avatar group */
.mt-avatar-group {
    display: flex;
}
.mt-avatar-group .mt-avatar {
    border: 2px solid var(--mt-paper-bg);
}
.mt-avatar-group .mt-avatar + .mt-avatar {
    margin-left: -0.75rem;
}


/* ================================================================
   11. PROGRESS
   ================================================================ */
.mt-progress {
    height: 0.375rem;
    background: var(--mt-gray-100);
    border-radius: var(--mt-radius-pill);
    overflow: hidden;
}
.mt-progress-bar {
    height: 100%;
    border-radius: var(--mt-radius-pill);
    transition: width 0.6s ease;
}
.mt-progress-bar-primary { background: var(--mt-primary); }
.mt-progress-bar-success { background: var(--mt-success); }
.mt-progress-bar-info    { background: var(--mt-info); }
.mt-progress-bar-warning { background: var(--mt-warning); }
.mt-progress-bar-danger  { background: var(--mt-danger); }

.mt-progress-lg { height: 0.625rem; }
.mt-progress-sm { height: 0.25rem; }


/* ================================================================
   12. DROPDOWN / MENU
   ================================================================ */
.mt-dropdown-menu {
    background: var(--mt-paper-bg);
    border: 0;
    border-radius: var(--mt-radius);
    box-shadow: var(--mt-shadow-lg);
    padding: 0.375rem 0;
    min-width: 12rem;
    z-index: var(--mt-z-dropdown);
}
.mt-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1.25rem;
    font-size: var(--mt-font-size-base);
    color: var(--mt-body-color);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--mt-transition-fast), color var(--mt-transition-fast);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}
.mt-dropdown-item:hover {
    background: var(--mt-primary-subtle);
    color: var(--mt-primary);
}
.mt-dropdown-item.active,
.mt-dropdown-item:active {
    background: var(--mt-primary-light);
    color: var(--mt-primary);
}
.mt-dropdown-divider {
    border-top: 1px solid var(--mt-border-color);
    margin: 0.375rem 0;
}
.mt-dropdown-header {
    padding: 0.375rem 1.25rem;
    font-size: var(--mt-font-size-xs);
    font-weight: var(--mt-font-weight-sb);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mt-muted-color);
}


/* ================================================================
   13. PAGINATION
   ================================================================ */
.mt-pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.25rem;
}
.mt-page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    font-size: var(--mt-font-size-base);
    font-weight: var(--mt-font-weight-md);
    color: var(--mt-heading-color);
    background: transparent;
    border: none;
    border-radius: var(--mt-radius);
    cursor: pointer;
    transition: all var(--mt-transition-fast);
    text-decoration: none;
}
.mt-page-link:hover {
    background: var(--mt-gray-100);
}
.mt-page-link.active {
    background: var(--mt-primary);
    color: var(--mt-white);
    box-shadow: 0 0.125rem 0.375rem rgba(var(--mt-primary-rgb), 0.4);
}
.mt-page-link:disabled {
    opacity: 0.5;
    pointer-events: none;
}


/* ================================================================
   14. TOOLTIPS / POPOVERS (base styles for JS integration)
   ================================================================ */
.mt-tooltip {
    background: var(--mt-dark);
    color: var(--mt-white);
    font-size: var(--mt-font-size-sm);
    padding: 0.25rem 0.625rem;
    border-radius: var(--mt-radius-sm);
    box-shadow: var(--mt-shadow);
    z-index: var(--mt-z-tooltip);
    max-width: 200px;
}

.mt-popover {
    background: var(--mt-paper-bg);
    border: 0;
    border-radius: var(--mt-radius);
    box-shadow: var(--mt-shadow-lg);
    z-index: var(--mt-z-popover);
}
.mt-popover-header {
    padding: 0.75rem 1rem;
    font-weight: var(--mt-font-weight-sb);
    color: var(--mt-heading-color);
    border-bottom: 1px solid var(--mt-border-color);
}
.mt-popover-body {
    padding: 0.75rem 1rem;
    color: var(--mt-body-color);
}


/* ================================================================
   15. LIST GROUP
   ================================================================ */
.mt-list-group {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
    border-radius: var(--mt-radius);
}
.mt-list-group-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--mt-border-color);
    color: var(--mt-body-color);
    background: var(--mt-paper-bg);
    transition: background var(--mt-transition-fast);
}
.mt-list-group-item:first-child {
    border-top-left-radius: var(--mt-radius);
    border-top-right-radius: var(--mt-radius);
}
.mt-list-group-item:last-child {
    border-bottom: 0;
    border-bottom-left-radius: var(--mt-radius);
    border-bottom-right-radius: var(--mt-radius);
}
.mt-list-group-item:hover {
    background: var(--mt-gray-25);
}
.mt-list-group-item.active {
    background: var(--mt-primary-subtle);
    color: var(--mt-primary);
}


/* ================================================================
   16. TABS
   ================================================================ */
.mt-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--mt-border-color);
    padding: 0;
    margin: 0;
    list-style: none;
}
.mt-tab {
    padding: 0.75rem 1.25rem;
    font-size: var(--mt-font-size-base);
    font-weight: var(--mt-font-weight-md);
    color: var(--mt-muted-color);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--mt-transition-fast);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}
.mt-tab:hover {
    color: var(--mt-heading-color);
}
.mt-tab.active {
    color: var(--mt-primary);
    border-bottom-color: var(--mt-primary);
}

/* Pill tabs (Materio alternate style) */
.mt-tabs-pill {
    border-bottom: none;
    gap: 0.5rem;
}
.mt-tabs-pill .mt-tab {
    border-bottom: none;
    border-radius: var(--mt-radius);
    padding: 0.5rem 1.125rem;
}
.mt-tabs-pill .mt-tab.active {
    background: var(--mt-primary);
    color: var(--mt-white);
    box-shadow: 0 0.125rem 0.375rem rgba(var(--mt-primary-rgb), 0.4);
}


/* ================================================================
   17. MODALS / DIALOGS
   ================================================================ */
.mt-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(46, 38, 61, 0.5);
    z-index: var(--mt-z-modal-backdrop);
}
.mt-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--mt-z-modal);
    padding: 1rem;
}
.mt-modal-dialog {
    background: var(--mt-paper-bg);
    border-radius: var(--mt-radius-lg);
    box-shadow: var(--mt-shadow-xl);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.mt-modal-header {
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--mt-border-color);
}
.mt-modal-title {
    font-size: 1.125rem;
    font-weight: var(--mt-font-weight-sb);
    color: var(--mt-heading-color);
    margin: 0;
}
.mt-modal-close {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--mt-radius);
    color: var(--mt-body-color);
    cursor: pointer;
    font-size: 1.25rem;
    transition: background var(--mt-transition-fast);
}
.mt-modal-close:hover {
    background: var(--mt-gray-100);
}
.mt-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}
.mt-modal-footer {
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    border-top: 1px solid var(--mt-border-color);
}


/* ================================================================
   18. UTILITY CLASSES
   ================================================================ */

/* Background */
.mt-bg-body         { background-color: var(--mt-body-bg) !important; }
.mt-bg-paper        { background-color: var(--mt-paper-bg) !important; }
.mt-bg-primary      { background-color: var(--mt-primary) !important; }
.mt-bg-primary-subtle { background-color: var(--mt-primary-subtle) !important; }
.mt-bg-primary-light  { background-color: var(--mt-primary-light) !important; }
.mt-bg-secondary    { background-color: var(--mt-secondary) !important; }
.mt-bg-success      { background-color: var(--mt-success) !important; }
.mt-bg-success-light  { background-color: var(--mt-success-light) !important; }
.mt-bg-info         { background-color: var(--mt-info) !important; }
.mt-bg-info-light   { background-color: var(--mt-info-light) !important; }
.mt-bg-warning      { background-color: var(--mt-warning) !important; }
.mt-bg-warning-light  { background-color: var(--mt-warning-light) !important; }
.mt-bg-danger       { background-color: var(--mt-danger) !important; }
.mt-bg-danger-light { background-color: var(--mt-danger-light) !important; }

/* Shadows */
.mt-shadow-none     { box-shadow: none !important; }
.mt-shadow-xs       { box-shadow: var(--mt-shadow-xs) !important; }
.mt-shadow-sm       { box-shadow: var(--mt-shadow-sm) !important; }
.mt-shadow          { box-shadow: var(--mt-shadow) !important; }
.mt-shadow-lg       { box-shadow: var(--mt-shadow-lg) !important; }
.mt-shadow-xl       { box-shadow: var(--mt-shadow-xl) !important; }

/* Border radius */
.mt-rounded-none    { border-radius: 0 !important; }
.mt-rounded-sm      { border-radius: var(--mt-radius-sm) !important; }
.mt-rounded         { border-radius: var(--mt-radius) !important; }
.mt-rounded-lg      { border-radius: var(--mt-radius-lg) !important; }
.mt-rounded-xl      { border-radius: var(--mt-radius-xl) !important; }
.mt-rounded-xxl     { border-radius: var(--mt-radius-xxl) !important; }
.mt-rounded-pill    { border-radius: var(--mt-radius-pill) !important; }
.mt-rounded-circle  { border-radius: var(--mt-radius-circle) !important; }

/* Borders */
.mt-border          { border: 1px solid var(--mt-border-color) !important; }
.mt-border-top      { border-top: 1px solid var(--mt-border-color) !important; }
.mt-border-bottom   { border-bottom: 1px solid var(--mt-border-color) !important; }
.mt-border-start    { border-left: 1px solid var(--mt-border-color) !important; }
.mt-border-end      { border-right: 1px solid var(--mt-border-color) !important; }
.mt-border-primary  { border-color: var(--mt-primary) !important; }
.mt-border-success  { border-color: var(--mt-success) !important; }
.mt-border-danger   { border-color: var(--mt-danger) !important; }
.mt-border-warning  { border-color: var(--mt-warning) !important; }

/* Divider */
.mt-divider {
    border: 0;
    border-top: 1px solid var(--mt-divider-color);
    margin: 1rem 0;
}

/* Spacing (Materio 0.25rem base) */
.mt-gap-1 { gap: 0.25rem !important; }
.mt-gap-2 { gap: 0.5rem !important; }
.mt-gap-3 { gap: 0.75rem !important; }
.mt-gap-4 { gap: 1rem !important; }
.mt-gap-5 { gap: 1.5rem !important; }
.mt-gap-6 { gap: 2rem !important; }

/* Display helpers */
.mt-flex          { display: flex !important; }
.mt-inline-flex   { display: inline-flex !important; }
.mt-grid          { display: grid !important; }
.mt-block         { display: block !important; }
.mt-inline-block  { display: inline-block !important; }
.mt-none          { display: none !important; }

.mt-items-center    { align-items: center !important; }
.mt-items-start     { align-items: flex-start !important; }
.mt-items-end       { align-items: flex-end !important; }
.mt-justify-center  { justify-content: center !important; }
.mt-justify-between { justify-content: space-between !important; }
.mt-justify-end     { justify-content: flex-end !important; }
.mt-flex-wrap       { flex-wrap: wrap !important; }
.mt-flex-1          { flex: 1 1 0% !important; }
.mt-flex-col        { flex-direction: column !important; }
.mt-flex-shrink-0   { flex-shrink: 0 !important; }

/* Overflow */
.mt-overflow-auto    { overflow: auto !important; }
.mt-overflow-hidden  { overflow: hidden !important; }
.mt-overflow-y-auto  { overflow-y: auto !important; }

/* Cursor */
.mt-cursor-pointer  { cursor: pointer !important; }

/* Truncate */
.mt-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Transition */
.mt-transition {
    transition: all var(--mt-transition) !important;
}


/* ================================================================
   19. RESPONSIVE BREAKPOINTS (Materio grid)
   ================================================================ */
@media (max-width: 575.98px) {
    :root {
        --mt-content-padding: 1rem;
        --mt-card-spacer-y:   1rem;
        --mt-card-spacer-x:   1rem;
    }
    .mt-hide-mobile { display: none !important; }
}

@media (min-width: 576px) {
    .mt-hide-sm-up { display: none !important; }
}

@media (max-width: 767.98px) {
    .mt-hide-tablet { display: none !important; }
}

@media (min-width: 768px) {
    .mt-hide-md-up { display: none !important; }
}

@media (max-width: 991.98px) {
    .mt-stack-mobile {
        flex-direction: column !important;
    }
    .mt-modal-dialog {
        max-width: 95%;
    }
}

@media (min-width: 992px) {
    .mt-hide-lg-up { display: none !important; }
}

@media (min-width: 1200px) {
    .mt-hide-xl-up { display: none !important; }
}

/* ================================================================
   DARK THEME GLOBAL OVERRIDES
   ================================================================ */

/* FluentUI Dialog — penetrate shadow DOM via CSS custom properties */
fluent-dialog {
    --dialog-width: auto;
    --dialog-height: auto;
}

/* FluentUI uses ::part() for shadow DOM elements */
fluent-dialog::part(control) {
    background: var(--mt-paper-bg) !important;
    color: var(--mt-heading-color) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-radius: var(--mt-radius-lg) !important;
    box-shadow: var(--mt-shadow-xl) !important;
}

/* Dialog title inside shadow DOM */
fluent-dialog::part(title) {
    color: var(--mt-gray-900) !important;
}

/* Overlay backdrop */
fluent-dialog::part(overlay) {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
}

/* Light DOM fallbacks for dialog content */
.fluent-dialog-main,
fluent-dialog .fluent-dialog-main,
div[role="dialog"],
.dialog-body,
.dlg-body {
    background: var(--mt-paper-bg) !important;
    color: var(--mt-heading-color) !important;
}

/* FluentUI dialog title — light DOM selectors */
fluent-dialog [slot="title"],
fluent-dialog .fluent-dialog-title,
.fluent-dialog-title,
[typo="pane-header"],
.fluent-typography[typo="pane-header"],
fluent-dialog h4.fluent-typography {
    color: var(--mt-gray-900) !important;
}

/* Dialog titles */
div[role="dialog"] h1,
div[role="dialog"] h2,
div[role="dialog"] h3,
div[role="dialog"] h4,
div[role="dialog"] h5,
div[role="dialog"] h6,
.dialog-body h1, .dialog-body h2, .dialog-body h3,
.dlg-body h1, .dlg-body h2, .dlg-body h3,
fluent-dialog h1, fluent-dialog h2, fluent-dialog h3 {
    color: var(--mt-gray-900) !important;
}

/* FluentUI design tokens override — affects all FluentUI components */
:root {
    --neutral-fill-rest: var(--mt-gray-50);
    --neutral-fill-hover: var(--mt-gray-100);
    --neutral-fill-active: var(--mt-gray-200);
    --neutral-fill-stealth-rest: transparent;
    --neutral-fill-stealth-hover: var(--mt-gray-100);
    --neutral-fill-input-rest: var(--mt-gray-50);
    --neutral-fill-layer-rest: var(--mt-paper-bg);
    --neutral-layer-floating: var(--mt-paper-bg);
    --neutral-layer-1: var(--mt-body-bg);
    --neutral-layer-2: var(--mt-paper-bg);
    --neutral-layer-3: var(--mt-gray-50);
    --neutral-layer-4: var(--mt-gray-100);
    --neutral-stroke-rest: var(--mt-border-color);
    --neutral-stroke-hover: var(--mt-gray-300);
    --neutral-foreground-rest: var(--mt-heading-color);
    --neutral-foreground-hint: var(--mt-muted-color);
    --accent-fill-rest: var(--mt-primary);
    --accent-fill-hover: var(--mt-primary-hover);
    --accent-foreground-rest: var(--mt-primary);
    --fill-color: var(--mt-paper-bg);
    --neutral-fill-secondary-rest: var(--mt-gray-50);
}

/* Generic inputs dark */
input, textarea, select,
.form-control, .form-select {
    background-color: var(--mt-gray-50) !important;
    color: var(--mt-heading-color) !important;
    border-color: var(--mt-border-color) !important;
}
input::placeholder, textarea::placeholder {
    color: var(--mt-muted-color) !important;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--mt-primary) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(105, 108, 255, 0.15) !important;
}

/* Tables */
table, .table {
    color: var(--mt-body-color);
}
th {
    color: var(--mt-muted-color) !important;
}

/* Cards and panels */
.card, .modal-content {
    background-color: var(--mt-paper-bg) !important;
    color: var(--mt-heading-color) !important;
    border-color: var(--mt-border-color) !important;
}

/* Checkboxes dark */
input[type="checkbox"] {
    accent-color: var(--mt-primary);
}
input[type="checkbox"]:not(:checked) {
    filter: brightness(0.7) invert(0.1);
}

/* Labels and badges */
label {
    color: var(--mt-heading-color);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--mt-body-bg); }
::-webkit-scrollbar-thumb { background: var(--mt-gray-300); border-radius: 3px; }

/* ================================================================
   BANDEJA OVERRIDES — force Materio style even if old bandejas.css
   is cached by Cloudflare/CDN
   ================================================================ */
.bj-wrapper {
    background: var(--mt-body-bg) !important;
    font-family: var(--mt-font) !important;
    padding: 1.5rem !important;
    margin: 0 !important;
}
.bj-header {
    background: transparent !important;
    padding: 0 0 0.25rem !important;
    overflow: visible !important;
}
.bj-header::before,
.bj-header::after {
    display: none !important;
}
.bj-header-label {
    color: var(--mt-muted-color) !important;
    font-size: var(--mt-font-size-xs) !important;
    letter-spacing: .08em !important;
    font-weight: 500 !important;
}
.bj-header-title {
    color: var(--mt-heading-color) !important;
    font-size: clamp(1.25rem, 3vw, 1.5rem) !important;
    font-weight: var(--mt-font-weight-sb) !important;
}
.bj-header-count {
    background: var(--mt-primary-light) !important;
    color: var(--mt-primary) !important;
    border: none !important;
    backdrop-filter: none !important;
}
.bj-table-card {
    background: var(--mt-paper-bg) !important;
    border: 0 !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: var(--mt-shadow-xs) !important;
}
.bj-table thead {
    background: transparent !important;
    border-bottom: 1px solid var(--mt-border-color) !important;
}
.bj-table thead th {
    color: var(--mt-muted-color) !important;
    font-size: var(--mt-font-size-xs) !important;
}
.bj-table tbody tr {
    border-bottom: 1px solid var(--mt-border-color) !important;
}
.bj-table tbody tr:hover {
    background: var(--mt-gray-25) !important;
}
.bj-table td {
    color: var(--mt-body-color) !important;
}
.bj-cell-primary {
    color: var(--mt-heading-color) !important;
}
.bj-cell-secondary {
    color: var(--mt-muted-color) !important;
}
.bj-badge {
    border: none !important;
    border-radius: var(--mt-radius-sm) !important;
    font-family: var(--mt-font) !important;
    font-weight: var(--mt-font-weight-md) !important;
    font-size: 0.8125em !important;
    letter-spacing: normal !important;
}
.bj-badge::before {
    display: none !important;
}
.bj-badge--success {
    background: var(--mt-success-light) !important;
    color: var(--mt-success) !important;
    border: none !important;
}
.bj-badge--danger {
    background: var(--mt-danger-light) !important;
    color: var(--mt-danger) !important;
    border: none !important;
}
.bj-badge--pending {
    background: var(--mt-warning-light) !important;
    color: var(--mt-warning) !important;
    border: none !important;
}
.bj-badge--info {
    background: var(--mt-info-light) !important;
    color: var(--mt-info) !important;
    border: none !important;
}
.bj-badge--primary {
    background: var(--mt-primary-light) !important;
    color: var(--mt-primary) !important;
    border: none !important;
}
.bj-btn-new {
    background: var(--mt-primary) !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: 0 0.125rem 0.375rem 0 rgba(var(--mt-primary-rgb), 0.3) !important;
    border: 1px solid transparent !important;
}
.bj-btn-detail {
    color: var(--mt-primary) !important;
    border: 1px solid var(--mt-primary) !important;
    background: transparent !important;
    border-radius: var(--mt-radius) !important;
}
.bj-search {
    background: var(--mt-paper-bg) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: none !important;
}
.bj-card {
    background: var(--mt-paper-bg) !important;
    border: 0 !important;
    box-shadow: var(--mt-shadow-xs) !important;
}

/* Areas page — leader name visibility */
.ba-lead {
    color: var(--mt-heading-color) !important;
}
.ba-muted {
    color: var(--mt-muted-color) !important;
}

/* Mobile cards — ensure text readability */
.bj-card-value {
    color: var(--mt-heading-color) !important;
}
.bj-card-label {
    color: var(--mt-muted-color) !important;
}
.asb-date-value {
    color: var(--mt-heading-color) !important;
}
.asb-dist-alert {
    color: var(--mt-danger) !important;
    background: var(--mt-danger-subtle) !important;
    border-color: rgba(var(--mt-danger-rgb), 0.3) !important;
}

/* Asistencias filter card — Cloudflare override */
.asb-filter-card {
    background: var(--mt-paper-bg) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: var(--mt-shadow-xs) !important;
}
.asb-label {
    color: var(--mt-muted-color) !important;
}
.asb-date-input {
    background: var(--mt-gray-50) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-radius: var(--mt-radius) !important;
    color: var(--mt-heading-color) !important;
}
.asb-date-input:focus {
    border-color: var(--mt-primary) !important;
}
.asb-hint {
    color: var(--mt-muted-color) !important;
}
.asb-code {
    background: var(--mt-gray-50) !important;
    border: 1px solid var(--mt-border-color) !important;
    color: var(--mt-heading-color) !important;
    border-radius: var(--mt-radius-sm) !important;
}
.asb-ubicacion-ok {
    color: var(--mt-success) !important;
}

/* ================================================================
   THEME TRANSITION — smooth swap between dark/light
   ================================================================ */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ================================================================
   LIGHT THEME OVERRIDE
   When <html data-theme="light">, swap all dark tokens to light.
   The default :root is dark. This block overrides only when light.
   ================================================================ */
html[data-theme="light"] {
    /* ── Grises (light — tono lavanda pastel) ────────────────── */
    --mt-gray-25:          #F8F7FA;
    --mt-gray-50:          #F1F0F5;
    --mt-gray-100:         #E6E5EB;
    --mt-gray-200:         #D2D1DA;
    --mt-gray-300:         #BDBCC7;
    --mt-gray-400:         #A8A7B4;
    --mt-gray-500:         #9392A1;
    --mt-gray-600:         #7F7D8E;
    --mt-gray-700:         #686779;
    --mt-gray-800:         #555164;
    --mt-gray-900:         #413B51;

    /* ── Superficies (light — pastel cálido) ─────────────────── */
    --mt-body-bg:          #F4F5FA;
    --mt-body-color:       #686779;
    --mt-paper-bg:         #FAFAFF;
    --mt-heading-color:    #2E2946;
    --mt-muted-color:      #A8A7B4;
    --mt-border-color:     #E2E1EA;
    --mt-border-color-translucent: rgba(46, 38, 61, 0.12);
    --mt-divider-color:    #D2D1DA;

    /* ── Sombras (light — suaves) ────────────────────────────── */
    --mt-shadow-xs:        0 0.125rem 0.25rem 0 rgba(46, 38, 81, 0.08);
    --mt-shadow-sm:        0 0.1875rem 0.5rem 0 rgba(46, 38, 81, 0.1);
    --mt-shadow:           0 0.25rem 0.75rem 0 rgba(46, 38, 81, 0.12);
    --mt-shadow-lg:        0 0.375rem 1.25rem 0 rgba(46, 38, 81, 0.14);
    --mt-shadow-xl:        0 0.5rem 2rem 0 rgba(46, 38, 81, 0.16);
    --mt-shadow-inset:     inset 0 1px 2px rgba(46, 38, 81, 0.06);

    /* ── Sidebar (light — off-white con tinte lavanda) ──────── */
    --mt-sidebar-bg:       #F8F7FC;
    --mt-sidebar-bg2:      #F8F7FC;
    --mt-sidebar-text:     #686779;
    --mt-sidebar-text-hover: #2E2946;
    --mt-sidebar-active-bg: rgba(105, 108, 255, 0.1);
    --mt-sidebar-divider:  #BDBCC7;
    --mt-sidebar-icon:     #A8A7B4;
}

/* Light theme: undo dark overrides */
html[data-theme="light"] input[type="checkbox"]:not(:checked) {
    filter: none;
}

/* Light theme: sidebar needs border for separation */
html[data-theme="light"] .ml-sidebar {
    border-right: 1px solid var(--mt-border-color);
}

/* Light theme: nav hover uses light gray, not dark gray */
html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-group-btn:hover,
html[data-theme="light"] .nav-leaf--root:hover,
html[data-theme="light"] .nav-leaf--child:hover {
    background: var(--mt-gray-50);
}

/* Light theme: scrollbar in sidebar */
html[data-theme="light"] .ml-nav::-webkit-scrollbar-thumb {
    background: var(--mt-gray-200);
}

/* Theme toggle button animation */
.ml-theme-toggle {
    position: relative;
    overflow: hidden;
}
.ml-theme-toggle i {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
.ml-theme-toggle:active i {
    transform: rotate(30deg) scale(0.85);
}