/* =============================================================
   theme-apple.css — Estilo "Apple" (Refero Design)
   "Galería de museo blanca al mediodía"

   Capa que se carga DESPUÉS de theme-seline.css y reutiliza su estructura
   (redefine sus tokens y ajusta los componentes que difieren).
   Se activa con "ui_estilo": "apple" en config/system_config.json
   (ver includes/theme_estilo.php). No cambia marcado ni opciones.

   Principios:
   - Lienzo #f5f5f7; tarjetas blancas de 28px SIN borde ni sombra: la
     elevación sale solo del contraste de superficies y de hairlines #d6d6d6.
   - Texto grafito #1d1d1f (nunca negro puro); secundario #707070.
   - Dos arquetipos de botón: píldora AZUL #0071e3 (única acción rellena de
     color) y píldora NEUTRA #e2e2e5 con texto #333336 para todo lo demás.
   - Enlaces #0066cc subrayados. Títulos semibold 600 (nunca más) con
     tracking negativo; el cuerpo en 400.
   - Radios permitidos: 10, 28, 32, 36 y 980px.
   - Colores de acento (verde, violeta, naranja, teal) solo como tinte de
     palabras, nunca como fondos.
   ============================================================= */

:root {
    --ap-canvas:   #f5f5f7;
    --ap-paper:    #ffffff;
    --ap-obsidian: #1d1d1f;
    --ap-iron:     #707070;
    --ap-slate:    #474747;
    --ap-charcoal: #333336;
    --ap-mist:     #e2e2e5;
    --ap-fog:      #d6d6d6;
    --ap-blue:     #0071e3;   /* Signal Blue: acción primaria, selección */
    --ap-blue-2:   #0077ed;   /* hover */
    --ap-link:     #0066cc;   /* Deep Link Blue: enlaces */
    --ap-green:    #03873a;
    --ap-violet:   #8668ff;
    --ap-orange:   #ed6300;
    --ap-teal:     #00a1b3;

    /* Tokens de la capa base (Seline) → Apple */
    --sl-canvas:    var(--ap-canvas);
    --sl-white:     var(--ap-paper);
    --sl-border:    var(--ap-fog);
    --sl-muted:     #c7c7cc;
    --sl-ash:       #8e8e93;
    --sl-warm:      var(--ap-iron);
    --sl-ink:       var(--ap-obsidian);
    --sl-soot:      var(--ap-obsidian);
    --sl-sky:       #e8f2fd;
    --sl-cyan:      var(--ap-blue);
    --sl-cyan-edge: var(--ap-link);

    --indigo-50:  #f0f6fe;
    --indigo-100: #e3eefc;
    --indigo-200: #cfe2fa;
    --indigo-300: #9ec5f4;
    --indigo-400: #4d9af0;
    --indigo-500: #0071e3;
    --indigo-600: #0071e3;
    --indigo-700: #0066cc;
    --indigo-800: #0058b0;
    --indigo-900: #00468c;

    --zinc-50:  #fafafc;
    --zinc-100: #f5f5f7;
    --zinc-200: #e2e2e5;
    --zinc-300: #d6d6d6;
    --zinc-400: #8e8e93;
    --zinc-500: #707070;
    --zinc-600: #474747;
    --zinc-700: #333336;
    --zinc-800: #2c2c2e;
    --zinc-900: #1d1d1f;
    --zinc-950: #000000;

    /* Semánticos (estados de asistencia), con la paleta de acentos Apple */
    --success-50: #eaf6ee;  --success-500: #03aa49; --success-700: #03873a; --success-900: #025c28;
    --warning-50: #fdf0e6;  --warning-500: #ed6300; --warning-700: #b84d00; --warning-900: #7a3300;
    --danger-50:  #fdeceb;  --danger-500:  #e30000; --danger-700:  #b80000; --danger-900:  #7a0000;

    --bg-app:       var(--ap-canvas);
    --bg-surface:   var(--ap-paper);
    --bg-surface-2: var(--ap-canvas);
    --bg-sidebar:   var(--ap-paper);
    --bg-sidebar-active: var(--ap-mist);
    --text-primary:   var(--ap-obsidian);
    --text-secondary: var(--ap-iron);
    --text-tertiary:  var(--ap-iron);
    --text-disabled:  #8e8e93;
    --text-on-sidebar: var(--ap-obsidian);
    --text-on-sidebar-muted: #8e8e93;
    --border-subtle:  #ececf0;
    --border-default: var(--ap-fog);
    --border-strong:  #c7c7cc;

    /* Sin sombras en ningún nivel */
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-2xl: none;
    --shadow-focus: 0 0 0 3px rgba(0, 113, 227, 0.35);

    /* Tipografía: SF Pro en dispositivos Apple; Inter en el resto */
    --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter Variable', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter Variable', 'Inter', 'Helvetica Neue', system-ui, sans-serif;

    --r-lg: 28px;
    --r-xl: 28px;

    --chart-serie-1: #0071e3;
    --chart-serie-2: #8e8e93;
    --chart-grid:    #ececf0;
    --chart-text:    #707070;

    --bs-body-bg: #f5f5f7;
    --bs-body-color: #1d1d1f;
    --bs-primary: #0071e3;
    --bs-primary-rgb: 0, 113, 227;
    --bs-link-color: #0066cc;
    --bs-link-color-rgb: 0, 102, 204;
    --bs-link-hover-color: #0058b0;
    --bs-border-color: #d6d6d6;
    --bs-secondary: #707070;
    --bs-emphasis-color: #1d1d1f;
    --bs-secondary-color: #707070;
    --bs-border-radius: 10px;
    --bs-border-radius-lg: 28px;
}

/* Modo oscuro: el "modo oscuro" de Apple (negro, superficies grafito, azul #0a84ff) */
html[data-theme="dark"] {
    --ap-obsidian: #f5f5f7;
    --ap-blue: #0a84ff;
    --ap-blue-2: #409cff;
    --ap-link: #2997ff;
    --ap-mist: #3a3a3c;
    --ap-charcoal: #f5f5f7;
    --bg-app:       #000000;
    --bg-surface:   #1c1c1e;
    --bg-surface-2: #2c2c2e;
    --bg-sidebar:   #1c1c1e;
    --bg-sidebar-active: #3a3a3c;
    --text-primary:   #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-tertiary:  #a1a1a6;
    --text-on-sidebar: #f5f5f7;
    --text-on-sidebar-muted: #8e8e93;
    --border-subtle:  #2c2c2e;
    --border-default: #38383a;
    --border-strong:  #48484a;
    --sl-canvas: #000000;
    --sl-white:  #1c1c1e;
    --sl-ink:    #f5f5f7;
    --sl-warm:   #a1a1a6;
    --sl-cyan:   #0a84ff;
    --sl-cyan-edge: #2997ff;
    --chart-serie-1: #0a84ff;
    --chart-serie-2: #8e8e93;
    --chart-grid: #2c2c2e;
    --chart-text: #a1a1a6;
    --bs-body-bg: #000000;
    --bs-body-color: #f5f5f7;
}
html[data-theme="dark"] body,
html[data-theme="dark"] body.bg-light { background-color: var(--bg-app) !important; color: var(--text-primary); }
/* Tintes azules claros → versión translúcida en oscuro */
html[data-theme="dark"] {
    --indigo-50:  rgba(10, 132, 255, 0.16);
    --indigo-100: rgba(10, 132, 255, 0.22);
    --sl-sky:     rgba(10, 132, 255, 0.22);
}
html[data-theme="dark"] .app-sidebar__brand,
html[data-theme="dark"] .app-sidebar__brand * { background: #f5f5f7 !important; color: #1d1d1f !important; }
html[data-theme="dark"] .app-sidebar__brand * { background: transparent !important; }
html[data-theme="dark"] .btn-check:checked + .btn, html[data-theme="dark"] .btn.active,
html[data-theme="dark"] .mode-toggle .btn-primary, html[data-theme="dark"] .mode-toggle .btn-secondary,
html[data-theme="dark"] .mode-toggle .btn-info {
    background-color: #0a84ff !important;
    border-color: #0a84ff !important;
    color: #fff !important;
}
html[data-theme="dark"] .mode-toggle .btn-primary .bi, html[data-theme="dark"] .mode-toggle .btn-secondary .bi,
html[data-theme="dark"] .mode-toggle .btn-info .bi { color: #fff !important; }
html[data-theme="dark"] .nav-tabs .nav-link.active { background: #0a84ff !important; color: #fff !important; }
html[data-theme="dark"] .bg-primary:not(.navbar):not(.card-header):not(.btn):not(.progress-bar) { background-color: var(--indigo-50) !important; }

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */
body {
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    line-height: 1.43;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
h1, .h1, h2, .h2, h3, .h3,
.page-header__title, .login-form-card__title, .login-shell__hero-title, .modal-title,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    color: var(--text-primary);
}
h1, .h1 { font-size: 2.125rem !important; line-height: 1.1; letter-spacing: -0.015em; }
h2, .h2 { font-size: 1.75rem !important;  line-height: 1.14; letter-spacing: -0.012em; }
h3, .h3 { font-size: 1.3125rem !important; line-height: 1.24; letter-spacing: 0.005em; }
h4, .h4, h5, .h5, h6, .h6 { font-family: var(--font-sans) !important; font-weight: 600 !important; letter-spacing: -0.01em; }
p { line-height: 1.47; }
strong, b { font-weight: 600; }

/* Iconos de título: tinte de acento (equivalente a la "palabra teñida") */
h1 > .bi, h2 > .bi, .h1 > .bi, .h2 > .bi { color: var(--ap-blue) !important; opacity: 1; }

/* Palabra teñida en titulares: <span class="ap-tint ap-tint--green"> */
.ap-tint { font-weight: inherit; }
.ap-tint--green  { color: #03aa49 !important; }
.ap-tint--blue   { color: var(--ap-link) !important; }
.ap-tint--violet { color: var(--ap-violet) !important; }
.ap-tint--orange { color: var(--ap-orange) !important; }
.ap-tint--teal   { color: var(--ap-teal) !important; }

/* Enlaces: azul profundo subrayado (1px) */
a { color: var(--ap-link); }
main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.list-group-item),
.card-body a:not(.btn):not(.nav-link) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
a:hover { color: var(--indigo-800); }

/* Cifras grandes (KPI): "display numeral" 600 tabular */
.card .card-text, .card .h4, .card .h2, .kpi-card__value {
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    letter-spacing: -0.022em !important;
    font-variant-numeric: tabular-nums;
}
.card p.card-text { font-weight: 400 !important; }
.card .card-title { color: var(--ap-iron) !important; font-weight: 400 !important; font-size: 13px !important; letter-spacing: -0.003em !important; }

/* ============================================================
   NAVEGACIÓN
   ============================================================ */
.navbar.app-header,
.navbar.bg-primary,
.navbar.navbar-dark,
body.dashboard-page .navbar {
    background-color: rgba(255, 255, 255, 0.82) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--ap-fog) !important;
    min-height: 52px;
}
html[data-theme="dark"] .navbar.app-header,
html[data-theme="dark"] body.dashboard-page .navbar { background-color: rgba(28, 28, 30, 0.82) !important; border-bottom-color: #38383a !important; }
.navbar.app-header .navbar-brand, .navbar.app-header .system-name { font-weight: 600 !important; font-size: 13px !important; }
.navbar.app-header .navbar-text { font-size: 12px; color: var(--ap-iron) !important; }

.app-sidebar, .sidebar.bg-light { background-color: var(--bg-sidebar) !important; border-right: 1px solid var(--ap-fog) !important; }
html[data-theme="dark"] .app-sidebar, html[data-theme="dark"] .sidebar.bg-light { border-right-color: #38383a !important; }
.app-sidebar__brand { background: var(--ap-obsidian) !important; border-radius: 10px; color: var(--bg-surface); }
.app-sidebar__title { font-weight: 600; font-size: 14px; }
.app-sidebar__section-title { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: #8e8e93; }
.app-sidebar .nav-link, .sidebar.bg-light .nav-link {
    font-weight: 400 !important;
    color: var(--text-on-sidebar) !important;
    border-radius: 10px !important;
}
.app-sidebar .nav-link i, .sidebar.bg-light .nav-link i { color: #8e8e93; }
.app-sidebar .nav-link.active, .sidebar.bg-light .nav-link.active,
.app-sidebar .collapse .nav-link.active, .sidebar.bg-light .collapse .nav-link.active {
    background-color: var(--bg-sidebar-active) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.app-sidebar .nav-link.active i, .sidebar.bg-light .nav-link.active i { color: var(--ap-blue) !important; }
.app-sidebar__user-avatar { background: var(--ap-mist); box-shadow: none; color: var(--text-primary); font-weight: 600; }

/* ============================================================
   BOTONES — píldora azul (única) y píldora neutra
   ============================================================ */
.btn {
    border-radius: 980px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: -0.01em;
    padding: 0.5rem 1.15rem !important;
    border: none !important;
}
.btn-sm, .btn-group-sm > .btn { font-size: 13px !important; padding: 0.3rem 0.85rem !important; }
.btn-lg { font-size: 17px !important; padding: 0.7rem 1.4rem !important; }

.btn-primary {
    background-color: var(--ap-blue) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--ap-blue-2) !important; color: #fff !important; }

/* Todo lo demás: píldora neutra (Mist) — incluidas las acciones semánticas,
   que conservan el color solo en el icono */
.btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark,
.btn-outline-light, .btn-outline-info, .btn-ghost, .btn-success, .btn-warning, .btn-info, .btn-danger,
.btn-outline-success, .btn-outline-warning, .btn-outline-danger {
    background-color: var(--ap-mist) !important;
    color: var(--ap-charcoal) !important;
    border: none !important;
    font-weight: 600 !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover,
.btn-outline-dark:hover, .btn-outline-light:hover, .btn-outline-info:hover, .btn-ghost:hover,
.btn-success:hover, .btn-warning:hover, .btn-info:hover,
.btn-outline-success:hover, .btn-outline-warning:hover {
    background-color: #d8d8dc !important;
    color: var(--ap-charcoal) !important;
}
html[data-theme="dark"] .btn-secondary:hover, html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-light:hover, html[data-theme="dark"] .btn-success:hover,
html[data-theme="dark"] .btn-warning:hover, html[data-theme="dark"] .btn-info:hover { background-color: #48484a !important; }
/* Texto rojo = acción destructiva (convención Apple), p. ej. "Eliminar" */
.btn-danger, .btn-outline-danger { color: var(--danger-700) !important; }
.btn-danger:hover, .btn-outline-danger:hover { background-color: var(--danger-50) !important; color: var(--danger-700) !important; }
.btn-danger .bi, .btn-outline-danger .bi { color: var(--danger-700) !important; }
/* Botones de exportación que usan btn-danger solo por color (PDF): no son destructivos */
.btn-export.btn-danger, .btn-export.btn-success { color: var(--ap-charcoal) !important; }
.btn-export.btn-danger:hover { background-color: #d8d8dc !important; color: var(--ap-charcoal) !important; }
.btn-success .bi { color: var(--success-700) !important; }
.btn-warning .bi { color: var(--warning-700) !important; }
.btn-info .bi, .btn-outline-info .bi { color: var(--ap-link) !important; }

/* "Editar" y similares repetidos en tarjetas/tablas: neutros con icono azul */
.card-body .btn-primary.btn-sm, .table .btn-primary:not(.mode-toggle .btn),
.list-group .btn-primary.btn-sm, .btn-group:not(.mode-toggle) > .btn-primary {
    background-color: var(--ap-mist) !important;
    color: var(--ap-charcoal) !important;
    border: none !important;
}
.card-body .btn-primary.btn-sm .bi, .table .btn-primary:not(.mode-toggle .btn) .bi,
.list-group .btn-primary.btn-sm .bi, .btn-group:not(.mode-toggle) > .btn-primary .bi { color: var(--ap-blue) !important; }
.card-body .btn-primary.btn-sm:hover, .table .btn-primary:not(.mode-toggle .btn):hover,
.list-group .btn-primary.btn-sm:hover, .btn-group:not(.mode-toggle) > .btn-primary:hover { background-color: #d8d8dc !important; }

/* Grupos de botones: control segmentado sobre Mist */
.btn-group { background: var(--ap-mist); border-radius: 980px; padding: 2px; gap: 2px; }
.btn-group > .btn, .btn-group > .btn:not(:first-child), .btn-group > .btn:not(:last-child) {
    border-radius: 980px !important;
    margin-left: 0 !important;
    background-color: transparent !important;
}
.btn-group > .btn:hover { background-color: rgba(255, 255, 255, 0.6) !important; }
html[data-theme="dark"] .btn-group > .btn:hover { background-color: #48484a !important; }

/* Selección (modo facial activo, botones activos): azul */
.btn-check:checked + .btn, .btn.active,
.mode-toggle .btn-primary, .mode-toggle .btn-secondary, .mode-toggle .btn-info,
.btn-group.mode-toggle > .btn-primary, .btn-group.mode-toggle > .btn-secondary, .btn-group.mode-toggle > .btn-info {
    background-color: var(--ap-blue) !important;
    color: #fff !important;
}
.mode-toggle .btn-primary .bi, .mode-toggle .btn-secondary .bi, .mode-toggle .btn-info .bi { color: #fff !important; }
.mode-toggle .btn[class*="btn-outline-"] { background-color: transparent !important; color: var(--ap-iron) !important; }
.mode-toggle .btn[class*="btn-outline-"] .bi { color: var(--ap-iron) !important; }
.btn-dark { background-color: var(--ap-obsidian) !important; color: var(--bg-surface) !important; }
.btn-link { background: transparent !important; color: var(--ap-link) !important; }

/* ============================================================
   TARJETAS — 28px, sin borde ni sombra (blanco sobre #f5f5f7)
   ============================================================ */
.card, .kpi-card {
    border-radius: 28px !important;
    border: none !important;
    box-shadow: none !important;
    background-color: var(--bg-surface) !important;
}
.card-header {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: 1.1rem 1.75rem !important;
}
.card-body { padding: 1.5rem 1.75rem !important; }
.card-footer { border-top: 1px solid var(--border-subtle) !important; }
.card-header h5, .card-header .h5, .card-header h6, .card-header .card-title {
    font-weight: 600 !important; font-size: 15px !important; color: var(--text-primary) !important;
}
.card .stat-icon, .kpi-card__icon,
.kpi-card__icon--indigo, .kpi-card__icon--success, .kpi-card__icon--warning,
.kpi-card__icon--danger, .kpi-card__icon--info {
    background: var(--ap-canvas) !important;
    border: none !important;
    border-radius: 10px !important;
}
html[data-theme="dark"] .card .stat-icon, html[data-theme="dark"] .kpi-card__icon { background: #2c2c2e !important; }
.card .stat-icon i, .card .stat-icon .bi { color: var(--ap-blue) !important; }
.welcome-hero, .reloj-digital, .clock-display {
    border: none !important;
    box-shadow: none !important;
    border-radius: 28px !important;
}
.reloj-digital, .clock-display { background: var(--ap-canvas) !important; }
.reloj-hora { font-weight: 600 !important; letter-spacing: -0.022em !important; }
.video-container { border-radius: 28px !important; box-shadow: none !important; border: none; }
.stats-card .bi, .stat-card .bi, .card-body > .d-flex > .bi:last-child { color: #d1d1d6 !important; }
html[data-theme="dark"] .stats-card .bi, html[data-theme="dark"] .stat-card .bi { color: #3a3a3c !important; }

/* ============================================================
   FORMULARIOS — radio 10, foco azul
   ============================================================ */
.form-control, .form-select,
.select2-container--bootstrap-5 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: 10px !important;
    border: 1px solid var(--border-default) !important;
    background-color: var(--bg-surface) !important;
}
.form-control:focus, .form-select:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--ap-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.25) !important;
}
.form-label { font-weight: 600 !important; font-size: 13px !important; }
.form-check-input:checked { background-color: var(--ap-blue) !important; border-color: var(--ap-blue) !important; }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.25) !important; border-color: var(--ap-blue) !important; }
.form-switch .form-check-input:checked { background-color: #34c759 !important; border-color: #34c759 !important; }
.select2-container--bootstrap-5 .select2-dropdown { border-radius: 14px !important; box-shadow: none !important; border: 1px solid var(--border-default) !important; }
.select2-container--bootstrap-5 .select2-results__option--selected { background-color: var(--indigo-50) !important; }
.input-group-text { border-radius: 10px; }

/* ============================================================
   TABLAS — densas, hairlines
   ============================================================ */
.table { font-size: 14px; letter-spacing: -0.01em; }
.table > thead > tr > th,
.table > thead.table-dark > tr > th,
.table > thead.table-light > tr > th,
.table > thead.table-primary > tr > th {
    font-weight: 600 !important;
    color: var(--ap-iron) !important;
    font-size: 12px !important;
    border-bottom: 1px solid var(--ap-fog) !important;
}
.table > tbody > tr > td { border-bottom: 1px solid var(--border-subtle) !important; }
.table-hover > tbody > tr:hover > td { background-color: var(--ap-canvas) !important; }
html[data-theme="dark"] .table-hover > tbody > tr:hover > td { background-color: #2c2c2e !important; }
.table-responsive { border-radius: 0; }

/* ============================================================
   BADGES
   ============================================================ */
.badge { font-weight: 600 !important; border: none !important; }
.badge.bg-primary, .bg-primary:not(.navbar):not(.card-header):not(.btn):not(.progress-bar),
.badge.bg-info, .bg-info:not(.btn):not(.card-header),
.status-permiso, .status-vacaciones, .status-licencia {
    background-color: var(--indigo-50) !important;
    color: var(--ap-link) !important;
}
.badge.bg-secondary, .bg-secondary:not(.btn):not(.card-header), .badge.bg-light { background-color: var(--ap-mist) !important; color: var(--ap-charcoal) !important; }
.badge.bg-dark, .bg-dark:not(.btn):not(.card-header) { background-color: var(--ap-obsidian) !important; color: var(--bg-surface) !important; }
.text-primary, .text-info { color: var(--ap-link) !important; }

/* ============================================================
   PESTAÑAS — control segmentado (activo en azul)
   ============================================================ */
.nav-tabs { gap: 4px; }
.nav-tabs .nav-link, .nav-pills .nav-link {
    border-radius: 980px !important;
    border: none !important;
    background: var(--ap-mist) !important;
    color: var(--ap-charcoal) !important;
    font-weight: 600;
    font-size: 13px;
}
.nav-tabs .nav-link .bi { color: var(--ap-iron) !important; }
.nav-tabs .nav-link:hover, .nav-pills .nav-link:hover { background: #d8d8dc !important; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link, .nav-pills .nav-link.active {
    background: var(--ap-blue) !important;
    color: #fff !important;
}
.nav-tabs .nav-link.active .bi { color: #fff !important; }
.page-link { border-radius: 980px !important; border: none !important; background: var(--ap-mist) !important; color: var(--ap-charcoal) !important; }
.page-item.active .page-link { background: var(--ap-blue) !important; color: #fff !important; }

/* ============================================================
   ALERTAS, MODALES, DROPDOWNS
   ============================================================ */
.alert { border-radius: 14px !important; border: none !important; }
.alert-primary, .alert-info { background: var(--indigo-50) !important; color: var(--indigo-900) !important; }
.alert-success { border: none !important; }
.alert-warning { border: none !important; }
.alert-danger  { border: none !important; }
.modal-content { border-radius: 28px !important; border: none !important; box-shadow: none !important; }
.modal-header, .modal-footer { border-color: var(--border-subtle) !important; padding-left: 1.75rem !important; padding-right: 1.75rem !important; }
.modal-backdrop.show { background-color: #000; opacity: 0.4; }
.dropdown-menu { border-radius: 14px !important; box-shadow: none !important; border: 1px solid var(--ap-fog) !important; }
.dropdown-item { border-radius: 10px; }
.dropdown-item.active, .dropdown-item:active { background: var(--ap-blue) !important; color: #fff !important; }
.list-group-item { border-color: var(--border-subtle) !important; }
.list-group-item.active { background: var(--ap-mist) !important; color: var(--text-primary) !important; }
.progress { height: 6px; }
.progress-bar { background-color: var(--ap-blue) !important; }
.spinner-border, .spinner-grow { color: var(--ap-blue) !important; }
.tooltip-inner { background: var(--ap-obsidian); color: var(--bg-surface); border-radius: 10px; }

.swal2-popup { border-radius: 28px !important; box-shadow: none !important; border: none !important; }
.swal2-title { font-weight: 600 !important; }
.swal2-styled { border-radius: 980px !important; font-weight: 600 !important; }
.swal2-styled.swal2-confirm { background: var(--ap-blue) !important; border: none !important; }
.swal2-styled.swal2-cancel { background: var(--ap-mist) !important; color: var(--ap-charcoal) !important; border: none !important; }

.fc .fc-button-primary { border-radius: 980px !important; background: var(--ap-mist) !important; border: none !important; color: var(--ap-charcoal) !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--ap-blue) !important; color: #fff !important; }
.fc .fc-daygrid-day.fc-day-today { background: var(--indigo-50) !important; }
.calendar-event { background-color: var(--ap-blue) !important; }

.apexcharts-gridline { stroke: var(--chart-grid) !important; }
.apexcharts-xaxis-label, .apexcharts-yaxis-label, .apexcharts-legend-text { fill: var(--chart-text) !important; color: var(--chart-text) !important; }

/* ============================================================
   LOGIN Y VISTA DEL EMPLEADO
   ============================================================ */
/* Login: galería blanca, titular grande semibold alineado a la izquierda */
.login-shell { background: var(--bg-surface); }
.login-shell__hero {
    background: var(--ap-canvas) !important;
    color: var(--text-primary) !important;
    border-right: none !important;
}
html[data-theme="dark"] .login-shell__hero { background: #000 !important; }
.login-shell__hero-title {
    font-weight: 600 !important;
    font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.015em !important;
    color: var(--text-primary) !important;
}
.login-shell__hero-subtitle { color: var(--ap-iron) !important; font-size: 17px; line-height: 1.47; }
.login-shell__hero-brand-mark { background: var(--ap-obsidian) !important; border-radius: 10px; }
.login-shell__hero .login-shell__hero-brand-mark, .login-shell__hero .login-shell__hero-brand-mark * { color: var(--bg-surface) !important; }
.login-shell__form { background: var(--bg-surface); }
.login-form-card__title { font-weight: 600 !important; }

/* Franja inferior del empleado: banda del lienzo, sin color */
.motivational-message {
    background: var(--ap-canvas) !important;
    color: var(--ap-iron) !important;
    border-top: 1px solid var(--ap-fog) !important;
    font-weight: 600 !important;
}
.motivational-message * { color: inherit !important; }
html[data-theme="dark"] .motivational-message { background: #1c1c1e !important; border-top-color: #38383a !important; }

/* Foco */
:where(a, button, input, select, textarea, [tabindex]):focus-visible { box-shadow: var(--shadow-focus) !important; }
::selection { background: #b3d7ff; color: #1d1d1f; }