/**
 * OKTIME Desk - Paleta y Reglas de Modo Oscuro (Slate Dark Theme)
 * Basado en tokens de color de Bootstrap 5.3 y Tailwind Slate
 */

/* Transición suave al alternar temas */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease !important;
}

/* ==========================================================================
   Variables y Estilos Globales para Modo Oscuro
   ========================================================================== */
[data-bs-theme="dark"] {
    --ok-bg-app: #0b0f19;
    --ok-bg-surface: #1e293b;
    --ok-bg-elevated: #283548;
    --ok-bg-input: #0f172a;
    --ok-border: #334155;
    --ok-border-subtle: #1e293b;
    --ok-text-main: #f8fafc;
    --ok-text-muted: #94a3b8;
    --ok-text-subtle: #64748b;
    
    color-scheme: dark;
    background-color: var(--ok-bg-app) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] body {
    background-color: var(--ok-bg-app) !important;
    color: var(--ok-text-main) !important;
}

/* ==========================================================================
   Barra Superior (sb-topnav)
   ========================================================================== */
[data-bs-theme="dark"] .sb-topnav {
    background-color: var(--ok-bg-surface) !important;
    border-color: var(--ok-border) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .sb-topnav .navbar-brand,
[data-bs-theme="dark"] .sb-topnav #mensaje-usuario {
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] .sb-topnav #sidebarToggle {
    color: var(--ok-text-muted) !important;
}
[data-bs-theme="dark"] .sb-topnav #sidebarToggle:hover {
    color: #38bdf8 !important;
}

/* Widget Reloj en Navbar */
[data-bs-theme="dark"] .sb-topnav .reloj {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
}
[data-bs-theme="dark"] .sb-topnav .reloj #hora {
    color: #38bdf8 !important;
}

/* Perfil Dropdown en Navbar */
[data-bs-theme="dark"] .sb-topnav #navbarDropdown {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text-main) !important;
}
[data-bs-theme="dark"] .sb-topnav #navbarDropdown:hover {
    background-color: var(--ok-bg-elevated) !important;
    border-color: #475569 !important;
}

/* ==========================================================================
   Barra Lateral de Navegación (sb-sidenav)
   ========================================================================== */
[data-bs-theme="dark"] #layoutSidenav_nav,
[data-bs-theme="dark"] .sb-sidenav-light {
    background-color: var(--ok-bg-app) !important;
    border-right: 1px solid var(--ok-border) !important;
}

[data-bs-theme="dark"] .sb-sidenav-light .sb-sidenav-menu .nav-link {
    color: var(--ok-text-muted) !important;
    border-radius: 8px;
    margin: 2px 10px;
    padding: 10px 14px;
    transition: all 0.2s ease;
}

[data-bs-theme="dark"] .sb-sidenav-light .sb-sidenav-menu .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] .sb-sidenav-light .sb-sidenav-menu .nav-link.active {
    background-color: rgba(79, 70, 229, 0.18) !important;
    color: #818cf8 !important;
    font-weight: 600 !important;
    border-left: 3px solid #6366f1;
}

[data-bs-theme="dark"] .sb-sidenav-footer {
    background-color: #060911 !important;
    border-top: 1px solid var(--ok-border) !important;
    color: var(--ok-text-muted) !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   Área Principal de Contenido
   ========================================================================== */
[data-bs-theme="dark"] #layoutSidenav_content {
    background-color: var(--ok-bg-app) !important;
}

[data-bs-theme="dark"] main {
    background-color: var(--ok-bg-app) !important;
}

/* ==========================================================================
   Tarjetas (Cards) y Contenedores
   ========================================================================== */
[data-bs-theme="dark"] .card {
    background-color: var(--ok-bg-surface) !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text-main) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme="dark"] .card-header {
    background-color: rgba(15, 23, 42, 0.4) !important;
    border-bottom-color: var(--ok-border) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] .card-footer {
    background-color: rgba(15, 23, 42, 0.4) !important;
    border-top-color: var(--ok-border) !important;
    color: var(--ok-text-muted) !important;
}

/* ==========================================================================
   Sobrescritura de Clases Utilitarias Claras
   ========================================================================== */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--ok-bg-surface) !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--ok-bg-input) !important;
}

[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-slate-800,
[data-bs-theme="dark"] .text-slate-700 {
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] .text-slate-600,
[data-bs-theme="dark"] .text-slate-500,
[data-bs-theme="dark"] .text-muted {
    color: var(--ok-text-muted) !important;
}

[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end {
    border-color: var(--ok-border) !important;
}

/* ==========================================================================
   Tablas y DataTables
   ========================================================================== */
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    --bs-table-color: var(--ok-text-main);
    --bs-table-border-color: var(--ok-border);
    color: var(--ok-text-main) !important;
    border-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] .table thead th {
    background-color: var(--ok-bg-input) !important;
    color: #94a3b8 !important;
    border-bottom: 2px solid var(--ok-border) !important;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
}

[data-bs-theme="dark"] .table tbody td {
    color: var(--ok-text-main) !important;
    border-bottom-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

[data-bs-theme="dark"] .table-hover>tbody>tr:hover>* {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Buscador y Paginador de DataTables */
[data-bs-theme="dark"] .dt-container .dt-search input {
    background-color: var(--ok-bg-input) !important;
    border: 1px solid var(--ok-border) !important;
    color: var(--ok-text-main) !important;
    border-radius: 6px;
}

[data-bs-theme="dark"] .dt-container .dt-length select {
    background-color: var(--ok-bg-input) !important;
    border: 1px solid var(--ok-border) !important;
    color: var(--ok-text-main) !important;
    border-radius: 6px;
}

[data-bs-theme="dark"] .dt-paging-button {
    color: var(--ok-text-main) !important;
    font-weight: 600 !important;
}

[data-bs-theme="dark"] .dt-paging-button.current {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #6366f1 !important;
}

/* ==========================================================================
   Formularios, Inputs y Selects
   ========================================================================== */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--ok-bg-input) !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--ok-text-subtle) !important;
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
    background-color: rgba(15, 23, 42, 0.6) !important;
    color: var(--ok-text-muted) !important;
    border-color: var(--ok-border-subtle) !important;
}

[data-bs-theme="dark"] .input-group-text {
    background-color: #1e293b !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text-muted) !important;
}

/* Switches y Form Checks en modo oscuro */
[data-bs-theme="dark"] .form-check-label {
    color: #f8fafc !important;
}
[data-bs-theme="dark"] .form-check.form-switch {
    color: #f8fafc !important;
}
[data-bs-theme="dark"] .form-switch .form-check-input {
    background-color: #334155;
    border-color: #475569;
}
[data-bs-theme="dark"] .form-switch .form-check-input:checked {
    background-color: #4f46e5 !important;
    border-color: #6366f1 !important;
}
[data-bs-theme="dark"] .form-check-input:disabled ~ .form-check-label,
[data-bs-theme="dark"] .form-check-input[disabled] ~ .form-check-label {
    opacity: 0.95 !important;
    color: #e2e8f0 !important;
}

/* ==========================================================================
   Modales y Desplegables
   ========================================================================== */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--ok-bg-surface) !important;
    border-color: var(--ok-border) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    background-color: rgba(15, 23, 42, 0.4) !important;
    border-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--ok-bg-surface) !important;
    border-color: var(--ok-border) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--ok-border) !important;
}

/* ==========================================================================
   Alertas y Notificaciones
   ========================================================================== */
[data-bs-theme="dark"] .alert-info {
    background-color: rgba(14, 165, 233, 0.15) !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
    color: #7dd3fc !important;
}

[data-bs-theme="dark"] .alert-success {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #6ee7b7 !important;
}

[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fcd34d !important;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}

/* ==========================================================================
   Pestañas (Tabs)
   ========================================================================== */
[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--ok-text-muted) !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--ok-bg-surface) !important;
    color: #818cf8 !important;
    border-color: var(--ok-border) var(--ok-border) transparent !important;
}

/* ==========================================================================
   Botón Toggle de Tema (Navbar)
   ========================================================================== */
#btn-theme-toggle {
    transition: all 0.2s ease;
    cursor: pointer;
}

#btn-theme-toggle:hover {
    transform: scale(1.05);
}

[data-bs-theme="dark"] #btn-theme-toggle {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: #facc15 !important; /* Amarillo sol vivo */
}

[data-bs-theme="dark"] #btn-theme-toggle i,
[data-bs-theme="dark"] #icon-theme-toggle,
[data-bs-theme="dark"] .fa-sun {
    color: #facc15 !important; /* Amarillo sol vivo */
}

[data-bs-theme="dark"] #btn-theme-toggle:hover {
    background-color: var(--ok-bg-elevated) !important;
    border-color: #facc15 !important;
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.4) !important;
}

[data-bs-theme="light"] #btn-theme-toggle {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #4b5563 !important; /* Azul gris luna */
}

[data-bs-theme="light"] #btn-theme-toggle:hover {
    background-color: #e5e7eb !important;
    color: #1f2937 !important;
}

/* Controles de Zoom en Navbar (Tema Oscuro) */
[data-bs-theme="dark"] .zoom-controls-wrapper {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] .zoom-controls-wrapper:hover {
    border-color: #475569 !important;
}

[data-bs-theme="dark"] .zoom-controls-wrapper button {
    color: var(--ok-text-muted) !important;
}

[data-bs-theme="dark"] .zoom-controls-wrapper button:hover:not(:disabled) {
    color: #38bdf8 !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .zoom-controls-wrapper .zoom-display-value {
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] .zoom-controls-wrapper .zoom-display-value:hover {
    color: #38bdf8 !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .dropdown-menu .zoom-display-value {
    color: var(--ok-text-main) !important;
}

/* Leyenda de Puntualidad y Control de Avisos en Dark Mode */
[data-bs-theme="dark"] .leyenda-puntualidad-container,
[data-bs-theme="dark"] .control-avisos-wrapper {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] .leyenda-puntualidad-container .text-muted,
[data-bs-theme="dark"] .control-avisos-wrapper .text-secondary {
    color: var(--ok-text-muted) !important;
}

[data-bs-theme="dark"] #btn-mostrar-leyenda-puntualidad {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] #btn-mostrar-leyenda-puntualidad:hover {
    background-color: var(--ok-bg-surface-hover) !important;
}

/* ==========================================================================
   Tarjetas KPI del Dashboard (Entradas, Pausas, Salidas, Ausencias)
   ========================================================================== */
[data-bs-theme="dark"] .kpi-card,
[data-bs-theme="dark"] .card-resumen,
[data-bs-theme="dark"] .card-resumen-entradas,
[data-bs-theme="dark"] .card-resumen-descansos,
[data-bs-theme="dark"] .card-resumen-salidas,
[data-bs-theme="dark"] .card-resumen-ausencias {
    background: var(--ok-bg-surface) !important;
    background-color: var(--ok-bg-surface) !important;
    border: 1px solid var(--ok-border) !important;
    color: var(--ok-text-main) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

[data-bs-theme="dark"] .kpi-card:hover,
[data-bs-theme="dark"] .card-resumen:hover {
    background: var(--ok-bg-elevated) !important;
    background-color: var(--ok-bg-elevated) !important;
    border-color: #475569 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

[data-bs-theme="dark"] .kpi-title {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .kpi-subtext {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .kpi-value-badge {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .kpi-value-badge.text-danger {
    color: #f87171 !important;
}

[data-bs-theme="dark"] .kpi-progress {
    background-color: var(--ok-bg-input) !important;
}

[data-bs-theme="dark"] .kpi-link {
    color: #818cf8 !important;
}

[data-bs-theme="dark"] .kpi-link:hover {
    color: #a5b4fc !important;
}

/* ==========================================================================
   Tarjetas de Acción de Fichaje (Entrada, Descanso, Salida)
   ========================================================================== */
[data-bs-theme="dark"] .panel-container {
    background-color: var(--ok-bg-surface) !important;
    border-color: var(--ok-border) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] #span-estado {
    background: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text-muted) !important;
}

[data-bs-theme="dark"] .card.panel-fichaje {
    background-color: var(--ok-bg-surface) !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text-main) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme="dark"] .card.panel-fichaje:hover {
    background-color: var(--ok-bg-elevated) !important;
    border-color: #475569 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .card.panel-fichaje .fichaje-title {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .card.panel-fichaje .fichaje-subtitle {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .card.panel-fichaje .card-footer {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .card.panel-fichaje .timer-display {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .card.panel-fichaje.card-entrada.fichaje-activo {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid #059669 !important;
}

[data-bs-theme="dark"] .card.panel-fichaje.card-descanso.fichaje-activo {
    background-color: rgba(59, 130, 246, 0.15) !important;
    border: 1px solid #2563eb !important;
}

/* ==========================================================================
   Tablas Principales y Contenedores (Empleados, Fichajes, Informes)
   ========================================================================== */
[data-bs-theme="dark"] .card.mb-4 {
    background-color: var(--ok-bg-surface) !important;
    border: 1px solid var(--ok-border) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .card.mb-4 .card-header,
[data-bs-theme="dark"] .card-header {
    background-color: #162032 !important;
    border-bottom: 1px solid var(--ok-border) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .table-body {
    background-color: var(--ok-bg-surface) !important;
}

/* Tabla Empleados */
[data-bs-theme="dark"] #tabla-empleados {
    background-color: var(--ok-bg-surface) !important;
    color: #f1f5f9 !important;
    border-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] #tabla-empleados thead th,
[data-bs-theme="dark"] #tabla-fichajes thead th {
    background-color: var(--ok-bg-input) !important;
    color: #94a3b8 !important;
    border-bottom: 2px solid var(--ok-border) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

[data-bs-theme="dark"] #tabla-empleados tbody td,
[data-bs-theme="dark"] #tabla-fichajes tbody td {
    background-color: transparent !important;
    color: #f1f5f9 !important;
    border-bottom: 1px solid #283548 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

[data-bs-theme="dark"] #tabla-empleados tbody tr:hover,
[data-bs-theme="dark"] #tabla-empleados tbody tr:hover td,
[data-bs-theme="dark"] #tabla-fichajes tbody tr:hover td {
    background-color: #283548 !important;
    color: #ffffff !important;
}

/* Columna Último Fichaje con alto contraste en modo oscuro */
[data-bs-theme="dark"] #tabla-empleados tbody td:nth-child(4),
[data-bs-theme="dark"] #tabla-empleados tbody td:nth-child(4) span,
[data-bs-theme="dark"] #tabla-empleados tbody td:nth-child(4) .text-secondary,
[data-bs-theme="dark"] #tabla-empleados tbody td .span-ultimo-fichaje,
[data-bs-theme="dark"] #tabla-empleados tbody td .col-ultimo-fichaje {
    color: #F1F5F9 !important;
}

[data-bs-theme="dark"] #tabla-empleados tbody td .ver-historial-hoy {
    color: #60A5FA !important;
    transition: transform 0.15s ease, color 0.15s ease;
}

[data-bs-theme="dark"] #tabla-empleados tbody td .ver-historial-hoy:hover {
    color: #93C5FD !important;
    transform: scale(1.15);
}

/* Bordes de estado izquierdo en tabla empleados */
[data-bs-theme="dark"] tr.row-ausente td:first-child {
    border-left: 5px solid #f59e0b !important;
}
[data-bs-theme="dark"] tr.row-dia-libre td:first-child {
    border-left: 5px solid #0284c7 !important;
}
[data-bs-theme="dark"] tr.row-pendiente td:first-child {
    border-left: 5px solid #6366f1 !important;
}

/* Badges de estado en tabla empleados en modo oscuro */
[data-bs-theme="dark"] .badge-working {
    background-color: rgba(16, 185, 129, 0.18) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

[data-bs-theme="dark"] .badge-descanso {
    background-color: rgba(59, 130, 246, 0.18) !important;
    color: #60a5fa !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}

[data-bs-theme="dark"] .badge-salida {
    background-color: rgba(148, 163, 184, 0.15) !important;
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
}

[data-bs-theme="dark"] .badge-ausente {
    background-color: rgba(245, 158, 11, 0.18) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}

[data-bs-theme="dark"] .status-indicator-badge.badge-dia-libre {
    background-color: rgba(2, 132, 199, 0.18) !important;
    color: #38bdf8 !important;
    border-color: rgba(2, 132, 199, 0.35) !important;
}

[data-bs-theme="dark"] .status-indicator-badge.badge-pendiente {
    background-color: rgba(99, 102, 241, 0.18) !important;
    color: #a5b4fc !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
}

[data-bs-theme="dark"] .status-indicator-badge.badge-vacaciones {
    background-color: rgba(13, 148, 136, 0.2) !important;
    color: #2dd4bf !important;
    border-color: rgba(13, 148, 136, 0.35) !important;
}

/* Badges de puntualidad y avisos de turno en modo oscuro (Estilo homogéneo con badges de estado) */
[data-bs-theme="dark"] .badge-puntual {
    background-color: rgba(16, 185, 129, 0.18) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .badge-retraso {
    background-color: rgba(245, 158, 11, 0.18) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .badge-salida-puntual {
    background-color: rgba(59, 130, 246, 0.18) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.35) !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .badge-salida-anticipada {
    background-color: rgba(249, 115, 22, 0.18) !important;
    color: #fb923c !important;
    border: 1px solid rgba(249, 115, 22, 0.35) !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .badge-horas-extra {
    background-color: rgba(99, 102, 241, 0.18) !important;
    color: #a5b4fc !important;
    border: 1px solid rgba(99, 102, 241, 0.35) !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .badge-sin-salida {
    background-color: rgba(239, 68, 68, 0.18) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .badge-dia-libre {
    background-color: rgba(2, 132, 199, 0.18) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(2, 132, 199, 0.35) !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .badge-vacaciones {
    background-color: rgba(13, 148, 136, 0.2) !important;
    color: #2dd4bf !important;
    border: 1px solid rgba(13, 148, 136, 0.35) !important;
    box-shadow: none !important;
}

/* Badge de Administrador General */
.badge-admin {
    background-color: #EDE9FE !important;
    color: #5B21B6 !important;
    border: 1px solid #C4B5FD !important;
    display: inline-flex !important;
    align-items: center !important;
    font-weight: 700 !important;
}

[data-bs-theme="dark"] .badge-admin {
    background-color: rgba(124, 58, 237, 0.22) !important;
    color: #C4B5FD !important;
    border: 1px solid rgba(167, 139, 250, 0.5) !important;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    font-weight: 700 !important;
}

[data-bs-theme="dark"] .badge-admin i {
    color: #FBBF24 !important;
}

/* Badge de Encargado en Modo Oscuro */
.badge-encargado {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
    border: 1px solid #FCD34D !important;
    display: inline-flex !important;
    align-items: center !important;
    font-weight: 700 !important;
}

[data-bs-theme="dark"] .badge-encargado {
    background-color: rgba(245, 158, 11, 0.22) !important;
    color: #FDE047 !important;
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.15) !important;
    display: inline-flex !important;
    align-items: center !important;
    font-weight: 700 !important;
}

[data-bs-theme="dark"] .badge-encargado i {
    color: #FBBF24 !important;
}

/* Badge de Centro / Local en Modo Oscuro */
.badge-centro-pill {
    background-color: #F1F5F9 !important;
    color: #475569 !important;
    border: 1px solid #CBD5E1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

[data-bs-theme="dark"] .badge-centro-pill {
    background-color: rgba(51, 65, 85, 0.6) !important;
    color: #E2E8F0 !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
}

[data-bs-theme="dark"] .badge-centro-pill i {
    color: #38BDF8 !important;
}

/* Soporte Bootstrap warning en modo oscuro */
[data-bs-theme="dark"] .bg-warning-subtle {
    background-color: rgba(245, 158, 11, 0.2) !important;
}
[data-bs-theme="dark"] .text-warning-emphasis {
    color: #FDE047 !important;
}
[data-bs-theme="dark"] .border-warning-subtle {
    border-color: rgba(245, 158, 11, 0.45) !important;
}
[data-bs-theme="dark"] .border-success-subtle {
    border-color: rgba(34, 197, 94, 0.55) !important;
}
[data-bs-theme="dark"] .border-danger-subtle {
    border-color: rgba(239, 68, 68, 0.55) !important;
}
[data-bs-theme="dark"] .border-primary-subtle {
    border-color: rgba(59, 130, 246, 0.55) !important;
}
[data-bs-theme="dark"] .border-teal-subtle {
    border-color: rgba(20, 184, 166, 0.55) !important;
}
[data-bs-theme="dark"] .border-info-subtle {
    border-color: rgba(6, 182, 212, 0.55) !important;
}

[data-bs-theme="dark"] .badge-puntual i,
[data-bs-theme="dark"] .badge-retraso i,
[data-bs-theme="dark"] .badge-salida-puntual i,
[data-bs-theme="dark"] .badge-salida-anticipada i,
[data-bs-theme="dark"] .badge-horas-extra i,
[data-bs-theme="dark"] .badge-sin-salida i,
[data-bs-theme="dark"] .badge-dia-libre i,
[data-bs-theme="dark"] .badge-vacaciones i {
    color: inherit !important;
}

/* Avatar del empleado */
[data-bs-theme="dark"] .employee-avatar {
    box-shadow: 0 0 0 2px var(--ok-bg-surface), 0 0 0 3px #475569 !important;
}

/* Botón Ver Perfil */
[data-bs-theme="dark"] .btn-ver-perfil {
    color: #818cf8 !important;
}
[data-bs-theme="dark"] .btn-ver-perfil:hover {
    background-color: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
}

/* Buscador y Controles DataTables para tabla empleados */
[data-bs-theme="dark"] #tabla-empleados_wrapper .dt-length select,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--ok-bg-input) !important;
    border: 1px solid var(--ok-border) !important;
    color: var(--ok-text-main) !important;
    height: 30px !important;
    border-radius: 6px !important;
    font-size: 0.82rem !important;
    padding: 0 28px 0 10px !important;
    min-width: 62px !important;
    cursor: pointer !important;
}

[data-bs-theme="dark"] #tabla-empleados_wrapper .dt-search input,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input {
    background-color: var(--ok-bg-input) !important;
    border: 1px solid var(--ok-border) !important;
    color: var(--ok-text-main) !important;
    height: 30px !important;
    border-radius: 6px !important;
    font-size: 0.82rem !important;
    padding: 0 10px !important;
}

[data-bs-theme="dark"] #tabla-empleados_wrapper .dt-length select:focus,
[data-bs-theme="dark"] #tabla-empleados_wrapper .dt-search input:focus,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25) !important;
}

[data-bs-theme="dark"] #tabla-empleados_wrapper .dt-length label,
[data-bs-theme="dark"] #tabla-empleados_wrapper .dt-search label,
[data-bs-theme="dark"] #tabla-empleados_wrapper .dt-info,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length label,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter label {
    color: var(--ok-text-muted) !important;
    font-size: 0.82rem !important;
}

/* ==========================================================================
   Paginación DataTables en Modo Oscuro (Misma estética que inputs y selects)
   ========================================================================== */
[data-bs-theme="dark"] .dt-paging,
[data-bs-theme="dark"] #tabla-empleados_wrapper .dt-paging,
[data-bs-theme="dark"] #report-table_wrapper .dt-paging,
[data-bs-theme="dark"] .dataTables_paginate {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

[data-bs-theme="dark"] .dt-paging nav,
[data-bs-theme="dark"] .dt-paging ul.pagination {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

[data-bs-theme="dark"] .dt-paging ul.pagination li.page-item,
[data-bs-theme="dark"] .dt-paging li.dt-paging-button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
}

[data-bs-theme="dark"] .dt-paging .page-link,
[data-bs-theme="dark"] #tabla-empleados_wrapper .dt-paging .dt-paging-button,
[data-bs-theme="dark"] #tabla-empleados_wrapper .dt-paging-button,
[data-bs-theme="dark"] #report-table_wrapper .dt-paging .dt-paging-button,
[data-bs-theme="dark"] .dt-paging .dt-paging-button,
[data-bs-theme="dark"] .paginate_button {
    height: 32px !important;
    min-height: 32px !important;
    line-height: 30px !important;
    width: auto !important;
    min-width: 32px !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    border: 1px solid var(--ok-border) !important;
    background-color: var(--ok-bg-input) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--ok-text-main) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out, color 0.15s ease-in-out !important;
    box-shadow: none !important;
    margin: 0 !important;
    margin-left: 0 !important;
    cursor: pointer !important;
    outline: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-decoration: none !important;
}

/* Botones de navegación (Primero, Anterior, Siguiente, Último) en modo oscuro */
[data-bs-theme="dark"] .dt-paging ul.pagination li.dt-paging-nav-btn .page-link,
[data-bs-theme="dark"] .dt-paging .dt-paging-nav-btn .page-link,
[data-bs-theme="dark"] .dt-paging .dt-paging-button {
    min-width: 48px !important;
    padding: 0 12px !important;
}

/* Números de página en modo oscuro: cuadrados compactos 32x32 */
[data-bs-theme="dark"] .dt-paging ul.pagination li.dt-paging-page-num .page-link,
[data-bs-theme="dark"] .dt-paging .dt-paging-page-num .page-link {
    width: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    font-weight: 600 !important;
    text-align: center !important;
}

[data-bs-theme="dark"] .dt-paging ul.pagination li.page-item:not(.disabled):not(.active) .page-link:hover,
[data-bs-theme="dark"] .dt-paging .page-link:hover:not(.disabled):not(.active),
[data-bs-theme="dark"] #tabla-empleados_wrapper .dt-paging .dt-paging-button:hover:not(.disabled):not(.current),
[data-bs-theme="dark"] #report-table_wrapper .dt-paging .dt-paging-button:hover:not(.disabled):not(.current),
[data-bs-theme="dark"] .dt-paging .dt-paging-button:hover:not(.disabled):not(.current),
[data-bs-theme="dark"] .paginate_button:hover:not(.disabled):not(.current) {
    border-color: #6366f1 !important;
    background-color: var(--ok-bg-elevated) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .dt-paging ul.pagination li.page-item.active .page-link,
[data-bs-theme="dark"] .dt-paging .page-link.active,
[data-bs-theme="dark"] #tabla-empleados_wrapper .dt-paging .dt-paging-button.current,
[data-bs-theme="dark"] #tabla-empleados_wrapper .dt-paging .dt-paging-button.current:hover,
[data-bs-theme="dark"] #report-table_wrapper .dt-paging .dt-paging-button.current,
[data-bs-theme="dark"] #report-table_wrapper .dt-paging .dt-paging-button.current:hover,
[data-bs-theme="dark"] .dt-paging .dt-paging-button.current,
[data-bs-theme="dark"] .dt-paging .dt-paging-button.current:hover,
[data-bs-theme="dark"] .paginate_button.current,
[data-bs-theme="dark"] .paginate_button.current:hover {
    background-color: rgba(99, 102, 241, 0.20) !important;
    border: 1.5px solid #6366f1 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.28) !important;
}

[data-bs-theme="dark"] .dt-paging ul.pagination li.page-item.disabled .page-link,
[data-bs-theme="dark"] .dt-paging .page-link:disabled,
[data-bs-theme="dark"] #tabla-empleados_wrapper .dt-paging .dt-paging-button.disabled,
[data-bs-theme="dark"] #tabla-empleados_wrapper .dt-paging .dt-paging-button:disabled,
[data-bs-theme="dark"] #tabla-empleados_wrapper .dt-paging .dt-paging-button.disabled:hover,
[data-bs-theme="dark"] #tabla-empleados_wrapper .dt-paging .dt-paging-button:disabled:hover,
[data-bs-theme="dark"] #report-table_wrapper .dt-paging .dt-paging-button.disabled,
[data-bs-theme="dark"] #report-table_wrapper .dt-paging .dt-paging-button:disabled,
[data-bs-theme="dark"] #report-table_wrapper .dt-paging .dt-paging-button.disabled:hover,
[data-bs-theme="dark"] #report-table_wrapper .dt-paging .dt-paging-button:disabled:hover,
[data-bs-theme="dark"] .dt-paging .dt-paging-button.disabled,
[data-bs-theme="dark"] .dt-paging .dt-paging-button:disabled,
[data-bs-theme="dark"] .dt-paging .dt-paging-button.disabled:hover,
[data-bs-theme="dark"] .dt-paging .dt-paging-button:disabled:hover,
[data-bs-theme="dark"] .paginate_button.disabled,
[data-bs-theme="dark"] .paginate_button.disabled:hover {
    border: 1px solid var(--ok-border) !important;
    background-color: var(--ok-bg-input) !important;
    color: #94A3B8 !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ==========================================================================
   Cuadrante Semanal: Matriz, Casillas de Horario y Controles
   ========================================================================== */
[data-bs-theme="dark"] #seccion-cuadrante .card {
    background-color: var(--ok-bg-surface) !important;
    border: 1px solid var(--ok-border) !important;
}

[data-bs-theme="dark"] #seccion-cuadrante .card-header {
    background-color: #162032 !important;
    border-bottom: 1px solid var(--ok-border) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] #seccion-cuadrante .card-header span,
[data-bs-theme="dark"] #seccion-cuadrante .card-header .fs-6 {
    color: #ffffff !important;
}

[data-bs-theme="dark"] #seccion-cuadrante .card-header .badge.bg-light {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: #cbd5e1 !important;
}

/* Tabla del Cuadrante y Facturas */
[data-bs-theme="dark"] #tabla-cuadrante-matrix,
[data-bs-theme="dark"] #invoices-table {
    background-color: var(--ok-bg-surface) !important;
    color: var(--ok-text-main) !important;
    border-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] #tabla-cuadrante-matrix thead,
[data-bs-theme="dark"] #tabla-cuadrante-matrix thead th,
[data-bs-theme="dark"] #invoices-table thead,
[data-bs-theme="dark"] #invoices-table thead th {
    background-color: #162032 !important;
    color: #ffffff !important;
    border-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] #tabla-cuadrante-matrix tbody td,
[data-bs-theme="dark"] #invoices-table tbody td {
    background-color: var(--ok-bg-surface) !important;
    color: var(--ok-text-main) !important;
    border-color: #283548 !important;
}

[data-bs-theme="dark"] #tabla-cuadrante-matrix tbody tr:hover td,
[data-bs-theme="dark"] #invoices-table tbody tr:hover td {
    background-color: #283548 !important;
}

/* Casillas de Horarios en Cuadrante (.cuadrante-shift-box) */
[data-bs-theme="dark"] .cuadrante-shift-box {
    background-color: var(--ok-bg-input) !important;
    border: 1px solid var(--ok-border) !important;
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .cuadrante-shift-box:hover {
    background-color: var(--ok-bg-elevated) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}

/* Casilla Jornada Continua */
[data-bs-theme="dark"] .cuadrante-shift-box.shift-continuo {
    background-color: rgba(2, 132, 199, 0.15) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
    color: #38bdf8 !important;
}

[data-bs-theme="dark"] .cuadrante-shift-box.shift-continuo:hover {
    background-color: rgba(2, 132, 199, 0.25) !important;
    border-color: #38bdf8 !important;
}

[data-bs-theme="dark"] .cuadrante-shift-box.shift-continuo .cuadrante-time-text {
    color: #e0f2fe !important;
}

/* Casilla Jornada Partida */
[data-bs-theme="dark"] .cuadrante-shift-box.shift-partido {
    background-color: rgba(124, 58, 237, 0.15) !important;
    border-color: rgba(168, 85, 247, 0.35) !important;
    color: #c084fc !important;
}

[data-bs-theme="dark"] .cuadrante-shift-box.shift-partido:hover {
    background-color: rgba(124, 58, 237, 0.25) !important;
    border-color: #c084fc !important;
}

[data-bs-theme="dark"] .cuadrante-shift-box.shift-partido .cuadrante-time-text {
    color: #f3e8ff !important;
}

/* Casilla Día Libre */
[data-bs-theme="dark"] .cuadrante-shift-box.shift-libre {
    background-color: rgba(30, 41, 59, 0.6) !important;
    border-color: var(--ok-border) !important;
    color: #64748b !important;
}

[data-bs-theme="dark"] .cuadrante-shift-box.shift-libre .text-muted {
    color: #64748b !important;
}

[data-bs-theme="dark"] .cuadrante-shift-box.shift-libre:hover {
    background-color: rgba(51, 65, 85, 0.6) !important;
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .cuadrante-shift-box.shift-libre:hover .text-muted {
    color: #94a3b8 !important;
}

/* Badge de Horas dentro de la Casilla */
[data-bs-theme="dark"] .cuadrante-hours-badge {
    background-color: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .cuadrante-shift-box.cuadrante-dia-editable:hover {
    border-color: #60a5fa !important;
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.25) !important;
}

[data-bs-theme="dark"] .cuadrante-shift-box.cuadrante-dia-editable::after {
    color: #60a5fa !important;
}

[data-bs-theme="dark"] #modalEditarHorarioDia .modal-content {
    background-color: var(--ok-bg-card) !important;
    color: var(--ok-text-primary) !important;
}

[data-bs-theme="dark"] #modalEditarHorarioDia .modal-footer,
[data-bs-theme="dark"] #modalEditarHorarioDia .bg-light {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] #modalEditarHorarioDia .bg-white {
    background-color: var(--ok-bg-elevated) !important;
    border-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] #modalEditarHorarioDia input[type="time"] {
    color-scheme: dark !important;
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] #modalEditarHorarioDia input[type="time"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(0.9) !important;
    cursor: pointer !important;
    opacity: 0.85 !important;
}

[data-bs-theme="dark"] #modalEditarHorarioDia input[type="time"]:hover::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

[data-bs-theme="dark"] #modalEditarHorarioDia .fa-clock,
[data-bs-theme="dark"] #modalEditarHorarioDia .fa-business-time {
    color: #38bdf8 !important;
}

[data-bs-theme="dark"] #modalEditarHorarioDia #edit-dia-nombre {
    color: #ffffff !important;
}

[data-bs-theme="dark"] #box-resumen-horas-dia {
    background-color: rgba(2, 132, 199, 0.15) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
}

[data-bs-theme="dark"] #box-resumen-horas-dia .text-dark,
[data-bs-theme="dark"] #box-resumen-horas-dia .box-resumen-label {
    color: #e0f2fe !important;
}

/* Etiqueta de Horario Específico */
[data-bs-theme="dark"] .cuadrante-especifico-tag {
    background-color: rgba(217, 119, 6, 0.25) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

/* Badge de Total de Horas Semanales del Empleado */
[data-bs-theme="dark"] .cuadrante-total-hours {
    background-color: var(--ok-bg-input) !important;
    border: 1px solid var(--ok-border) !important;
    color: #38bdf8 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto !important;
}

/* Resaltado de la Columna del Día Actual (Hoy) */
[data-bs-theme="dark"] td.col-cuadrante-hoy {
    background-color: rgba(99, 102, 241, 0.08) !important;
    border-left: 2px solid #6366f1 !important;
    border-right: 2px solid #6366f1 !important;
}

[data-bs-theme="dark"] th.col-cuadrante-hoy {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
    border-left: 2px solid #6366f1 !important;
    border-right: 2px solid #6366f1 !important;
}

/* Cabeceras de Días y Fechas del Cuadrante en Modo Oscuro */
[data-bs-theme="dark"] .cuadrante-th-nombre {
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .cuadrante-th-fecha {
    color: #cbd5e1 !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-bs-theme="dark"] th.col-cuadrante-hoy .cuadrante-th-nombre {
    color: #ffffff !important;
}

[data-bs-theme="dark"] th.col-cuadrante-hoy .cuadrante-th-fecha {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}

[data-bs-theme="dark"] #th-cuadrante-total,
[data-bs-theme="dark"] .col-cuadrante-total {
    background-color: #162032 !important;
    color: #ffffff !important;
    text-align: center !important;
    vertical-align: middle !important;
}

[data-bs-theme="dark"] #tabla-cuadrante-matrix td.col-cuadrante-total > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* Selector de Fecha en Cabecera */
[data-bs-theme="dark"] #selector-fecha,
[data-bs-theme="dark"] .header-date-input {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text-main) !important;
    color-scheme: dark !important;
    padding: 6px 8px 6px 12px !important;
    height: 36px !important;
    width: 142px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
}

[data-bs-theme="dark"] #selector-fecha::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] .header-date-input::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(1) !important;
    cursor: pointer !important;
    opacity: 0.85 !important;
    padding: 3px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

[data-bs-theme="dark"] #selector-fecha:hover::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] .header-date-input:hover::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] #selector-fecha:focus::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] .header-date-input:focus::-webkit-calendar-picker-indicator {
    opacity: 1 !important;
    filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(56, 189, 248, 0.6)) !important;
}

[data-bs-theme="dark"] #selector-fecha:focus,
[data-bs-theme="dark"] .header-date-input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

/* ==========================================================================
   Sección de Informes (Catálogo, Vista Detallada y Tabla DataTables)
   ========================================================================== */
[data-bs-theme="dark"] #reports {
    color: #ffffff !important;
}

[data-bs-theme="dark"] #reports h2 {
    color: #ffffff !important;
}

[data-bs-theme="dark"] #report-container {
    background-color: var(--ok-bg-surface) !important;
    border: 1px solid var(--ok-border) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25) !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    align-items: stretch !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 24px !important;
    gap: 20px !important;
    border-radius: 16px !important;
}

[data-bs-theme="dark"] .report-card {
    background-color: #162032 !important;
    border: 1px solid var(--ok-border) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important;
    height: 100% !important;
    min-height: 180px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    border-radius: 14px !important;
    padding: 20px !important;
}

[data-bs-theme="dark"] .report-card:hover {
    background-color: var(--ok-bg-elevated) !important;
    border-color: #f472b6 !important;
    box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.4), 0 0 12px rgba(244, 114, 182, 0.2) !important;
    transform: translateY(-4px);
}

[data-bs-theme="dark"] .report-title {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .report-desc {
    color: var(--ok-text-muted) !important;
    flex-grow: 1 !important;
}

[data-bs-theme="dark"] .report-icon {
    background-color: rgba(99, 102, 241, 0.18) !important;
}

[data-bs-theme="dark"] .report-icon i {
    color: #818cf8 !important;
    -webkit-text-stroke: 0 !important;
}

[data-bs-theme="dark"] #loading-gif {
    color: #818cf8 !important;
}

/* Vista Detallada de Informes (#report-details) */
[data-bs-theme="dark"] #report-details .modal-content {
    background-color: var(--ok-bg-surface) !important;
    border: 1px solid var(--ok-border) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

[data-bs-theme="dark"] #report-details .modal-header {
    background: #162032 !important;
    background-color: #162032 !important;
    border-bottom: 1px solid var(--ok-border) !important;
}

[data-bs-theme="dark"] #report-details .modal-body {
    background: var(--ok-bg-surface) !important;
    background-color: var(--ok-bg-surface) !important;
}

[data-bs-theme="dark"] #reportModalLabel {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .close-report {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .close-report i {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .close-report:hover {
    background-color: var(--ok-bg-elevated) !important;
    border-color: #64748b !important;
    color: #ffffff !important;
    transform: translateX(-2px);
}

[data-bs-theme="dark"] .close-report:hover i {
    color: #ffffff !important;
}

/* Dropdown selector de empleados en informes */
[data-bs-theme="dark"] #btn-dropdown-empleados {
    background: var(--ok-bg-input) !important;
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] #btn-dropdown-empleados:hover {
    background-color: var(--ok-bg-elevated) !important;
    border-color: #64748b !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] #report-details .dropdown-menu {
    background-color: var(--ok-bg-surface) !important;
    border: 1px solid var(--ok-border) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6) !important;
}

[data-bs-theme="dark"] #report-details .dropdown-menu .form-check-label,
[data-bs-theme="dark"] #report-details .dropdown-menu label {
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] #report-details .dropdown-menu li.border-bottom {
    border-bottom-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] #lista-empleados-checkboxes label,
[data-bs-theme="dark"] #lista-empleados-checkboxes .text-slate-700 {
    color: #cbd5e1 !important;
}

/* Filtros de período y fecha en la barra de herramientas de informes */
[data-bs-theme="dark"] #selector-periodo-informes,
[data-bs-theme="dark"] #selector-fecha-informes,
[data-bs-theme="dark"] #contenedor-fecha-informes input,
[data-bs-theme="dark"] #contenedor-fecha-informes select {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: #ffffff !important;
    color-scheme: dark !important;
}

/* Icono del selector de fecha en informes (máximo contraste y visibilidad en modo oscuro) */
[data-bs-theme="dark"] #selector-fecha-informes::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] #contenedor-fecha-informes input::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(1) !important;
    cursor: pointer !important;
    opacity: 0.95 !important;
    padding: 3px 5px !important;
    border-radius: 4px !important;
    transition: opacity 0.2s ease, filter 0.2s ease, background-color 0.2s ease, transform 0.15s ease !important;
}

[data-bs-theme="dark"] #selector-fecha-informes:hover::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] #contenedor-fecha-informes input:hover::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] #selector-fecha-informes:focus::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] #contenedor-fecha-informes input:focus::-webkit-calendar-picker-indicator {
    opacity: 1 !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    filter: brightness(0) invert(1) drop-shadow(0 0 3px rgba(56, 189, 248, 0.85)) !important;
    transform: scale(1.08);
}

/* Flecha de los selectores desplegables en informes (selector de período y selector de año) */
[data-bs-theme="dark"] #selector-periodo-informes,
[data-bs-theme="dark"] #contenedor-fecha-informes select.form-select,
[data-bs-theme="dark"] select#selector-fecha-informes {
    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='%23f8fafc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

[data-bs-theme="dark"] #label-selector-fecha {
    color: #cbd5e1 !important;
}

/* ==========================================================================
   Tabla de Informes (#report-table) y Cabeceras
   ========================================================================== */
[data-bs-theme="dark"] #report-table {
    background-color: var(--ok-bg-surface) !important;
    border-color: var(--ok-border) !important;
    color: #f1f5f9 !important;
}

/* Cabecera de la tabla de informes */
[data-bs-theme="dark"] #report-table thead th {
    background-color: #162032 !important;
    color: #ffffff !important;
    border: 1px solid #334155 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    font-size: 0.78rem !important;
}

[data-bs-theme="dark"] #report-table thead th .dt-column-order,
[data-bs-theme="dark"] #report-table thead th .dt-column-title,
[data-bs-theme="dark"] #report-table thead th span {
    color: #ffffff !important;
}

/* Filas del cuerpo de la tabla de informes */
[data-bs-theme="dark"] #report-table tbody td {
    padding: 10px 14px !important;
    border: 1px solid #283548 !important;
    color: #f1f5f9 !important;
    background-color: var(--ok-bg-surface) !important;
}

[data-bs-theme="dark"] #report-table tbody tr:nth-child(even) td {
    background-color: var(--ok-bg-surface) !important;
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] #report-table tbody tr:nth-child(odd) td {
    background-color: #162032 !important;
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] #report-table tbody tr:hover td {
    background-color: var(--ok-bg-elevated) !important;
    color: #ffffff !important;
}

/* Elementos auxiliares en la tabla de informes */
[data-bs-theme="dark"] #report-table td.dt-empty,
[data-bs-theme="dark"] #report-table td.text-muted {
    background-color: var(--ok-bg-surface) !important;
    color: var(--ok-text-muted) !important;
}

[data-bs-theme="dark"] #report-table .badge.bg-light {
    background-color: var(--ok-bg-input) !important;
    color: #ffffff !important;
    border-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] #report-table .text-secondary {
    color: #cbd5e1 !important;
}

/* ==========================================================================
   Controles DataTables en Informes (Buscador, Longitud, Paginación)
   ========================================================================== */
[data-bs-theme="dark"] #report-table_wrapper .dt-search input,
[data-bs-theme="dark"] .dt-search input {
    background-color: var(--ok-bg-input) !important;
    border: 1px solid var(--ok-border) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] #report-table_wrapper .dt-search input:focus,
[data-bs-theme="dark"] .dt-search input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

[data-bs-theme="dark"] #report-table_wrapper .dt-search label,
[data-bs-theme="dark"] .dt-search label {
    color: var(--ok-text-muted) !important;
}

[data-bs-theme="dark"] #report-table_wrapper .dt-length select,
[data-bs-theme="dark"] .dt-length select {
    background-color: var(--ok-bg-input) !important;
    border: 1px solid var(--ok-border) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] #report-table_wrapper .dt-length label,
[data-bs-theme="dark"] .dt-length label,
[data-bs-theme="dark"] #report-table_wrapper .dt-info,
[data-bs-theme="dark"] .dt-info {
    color: var(--ok-text-muted) !important;
}


/* ==========================================================================
   Modo Kiosco / Terminal Táctil (index.blade.php)
   ========================================================================== */
[data-bs-theme="dark"] header {
    background: var(--ok-bg-surface) !important;
    border-bottom: 1px solid var(--ok-border) !important;
}

[data-bs-theme="dark"] .logotipo h3 {
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] .zoom-controls-wrapper {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] .zoom-controls-wrapper button,
[data-bs-theme="dark"] .zoom-controls-wrapper span,
[data-bs-theme="dark"] .zoom-controls-wrapper .zoom-display-value {
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] #btn-theme-toggle {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: #facc15 !important;
}

[data-bs-theme="dark"] #login .card-body {
    background-color: var(--ok-bg-surface) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] #login .form-control {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] #login .form-label {
    color: var(--ok-text-muted) !important;
}

[data-bs-theme="dark"] .main-wrapper {
    background-color: var(--ok-bg-app) !important;
}

[data-bs-theme="dark"] .kiosk-executive-card {
    background-color: var(--ok-bg-surface) !important;
    border: 1px solid var(--ok-border) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .kiosk-executive-card .card-header {
    display: block !important;
    background: linear-gradient(135deg, #1E293B, #334155) !important;
    border: none !important;
    color: #FFFFFF !important;
    text-align: center !important;
    padding: 1.5rem 1.5rem 1rem 1.5rem !important;
}

[data-bs-theme="dark"] .kiosk-executive-card .kiosk-clock-display {
    text-align: center !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

[data-bs-theme="dark"] .kiosk-executive-card .card-body {
    background-color: var(--ok-bg-surface) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] #pin-prompt {
    color: var(--ok-text-muted) !important;
}

[data-bs-theme="dark"] .btn-keypad {
    background-color: var(--ok-bg-input) !important;
    border: 1px solid var(--ok-border) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] .btn-keypad:hover {
    background-color: var(--ok-bg-elevated) !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .btn-keypad-clear {
    color: #f87171 !important;
}

[data-bs-theme="dark"] .btn-keypad-delete {
    color: #fbbf24 !important;
}

[data-bs-theme="dark"] .pin-dot {
    background-color: var(--ok-bg-input) !important;
    border: 2px solid var(--ok-border) !important;
}

[data-bs-theme="dark"] .pin-dot.filled {
    background-color: #6366f1 !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.6) !important;
}

[data-bs-theme="dark"] #kiosk-user-name {
    color: #ffffff !important;
}

[data-bs-theme="dark"] #kiosk-user-summary {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] #kiosk-user-summary .bg-white {
    background-color: var(--ok-bg-surface) !important;
    border-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] #kiosk-total-trabajado,
[data-bs-theme="dark"] #kiosk-total-descanso {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .btn-kiosk,
[data-bs-theme="dark"] #btn-kiosk-entrada,
[data-bs-theme="dark"] #btn-kiosk-descanso,
[data-bs-theme="dark"] #btn-kiosk-salida,
[data-bs-theme="dark"] #btn-kiosk-personal,
[data-bs-theme="dark"] #btn-kiosk-cancelar {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] .btn-kiosk:hover,
[data-bs-theme="dark"] #btn-kiosk-entrada:hover,
[data-bs-theme="dark"] #btn-kiosk-descanso:hover,
[data-bs-theme="dark"] #btn-kiosk-salida:hover,
[data-bs-theme="dark"] #btn-kiosk-personal:hover,
[data-bs-theme="dark"] #btn-kiosk-cancelar:hover {
    background-color: var(--ok-bg-elevated) !important;
    border-color: #475569 !important;
}

/* ==========================================================================
   Modal Detalles KPI y Búsqueda
   ========================================================================== */
[data-bs-theme="dark"] #detallesKpiModal .modal-body {
    background-color: var(--ok-bg-input) !important;
}

[data-bs-theme="dark"] #detallesKpiModal .modal-footer {
    background-color: var(--ok-bg-surface) !important;
    border-top-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] #buscar-kpi-modal {
    background-color: var(--ok-bg-surface) !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] #buscar-kpi-modal::placeholder {
    color: var(--ok-text-subtle) !important;
}

[data-bs-theme="dark"] #detallesKpiModal .input-group-text {
    background-color: var(--ok-bg-surface) !important;
    border-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] #contenedor-registros-kpi > div,
[data-bs-theme="dark"] #contenedor-registros-kpi .card {
    background-color: var(--ok-bg-surface) !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text-main) !important;
}

/* ==========================================================================
   Cabeceras de Modales, Títulos y Contenido (Inactivos, Añadir Empleado, etc.)
   ========================================================================== */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--ok-bg-surface) !important;
    border: 1px solid var(--ok-border) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] .modal-header {
    background-color: #162032 !important;
    border-bottom: 1px solid var(--ok-border) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .modal-header.bg-light,
[data-bs-theme="dark"] .modal-header.bg-white {
    background-color: #162032 !important;
}

[data-bs-theme="dark"] .modal-title,
[data-bs-theme="dark"] .modal-header h5,
[data-bs-theme="dark"] .modal-header h4,
[data-bs-theme="dark"] .modal-header h6,
[data-bs-theme="dark"] #solicitudesModalLabel,
[data-bs-theme="dark"] #confirmModalLabel,
[data-bs-theme="dark"] #historialHoyModalLabel,
[data-bs-theme="dark"] #modalConfigAnvizLabel,
[data-bs-theme="dark"] #modalImportCrosschexLabel,
[data-bs-theme="dark"] #modalPropagarHorarioLabel,
[data-bs-theme="dark"] #subscriptionModalLabel {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .modal-body {
    background-color: var(--ok-bg-surface) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] .modal-footer {
    background-color: #162032 !important;
    border-top: 1px solid var(--ok-border) !important;
    color: var(--ok-text-muted) !important;
}

[data-bs-theme="dark"] .modal-footer.bg-light,
[data-bs-theme="dark"] .modal-footer.bg-white {
    background-color: #162032 !important;
}

/* Formularios dentro de modales (Añadir Empleado, etc.) */
[data-bs-theme="dark"] .modal-body .form-label,
[data-bs-theme="dark"] #form-alta-empleado .form-label {
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .modal-body .form-check-label,
[data-bs-theme="dark"] #form-alta-empleado .form-check-label,
[data-bs-theme="dark"] .permiso-switch-label {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] #form-alta-empleado .permisos-alta-box,
[data-bs-theme="dark"] #form-alta-empleado .bg-body-tertiary {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

[data-bs-theme="dark"] #form-alta-empleado .permisos-delegados-header {
    color: #818cf8 !important;
}

[data-bs-theme="dark"] #form-alta-empleado .permiso-switch-card,
[data-bs-theme="dark"] #form-alta-empleado .bg-body {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] #form-alta-empleado .permiso-switch-card.permiso-switch-active {
    background-color: #1e2a42 !important;
}

[data-bs-theme="dark"] .modal-body input.form-control,
[data-bs-theme="dark"] .modal-body select.form-select,
[data-bs-theme="dark"] #form-alta-empleado input.form-control {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .modal-body input.form-control:focus,
[data-bs-theme="dark"] #form-alta-empleado input.form-control:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

/* Lista de Empleados Inactivos (Elementos .solicitud) */
[data-bs-theme="dark"] .solicitud {
    background: var(--ok-bg-input) !important;
    background-color: var(--ok-bg-input) !important;
    border: 1px solid var(--ok-border) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] .solicitud .solicitud-nombre,
[data-bs-theme="dark"] .solicitud p {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .solicitud p.text-muted {
    color: var(--ok-text-muted) !important;
}

[data-bs-theme="dark"] .solicitud .btn-perfil-exc {
    color: #818cf8 !important;
    border-color: #6366f1 !important;
}

[data-bs-theme="dark"] .solicitud .btn-perfil-exc:hover {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Modales de Confirmación (Acciones de Fichaje, Eliminaciones, Alertas)
   ========================================================================== */
[data-bs-theme="dark"] #confirmModal .modal-content {
    background-color: var(--ok-bg-surface) !important;
    border: 1px solid var(--ok-border) !important;
}

[data-bs-theme="dark"] #confirmModal #confirmMessage {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] #confirmModal .modal-confirm-icon-box {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

[data-bs-theme="dark"] #confirmModal #cancelButton {
    background-color: transparent !important;
    border: 1px solid var(--ok-border) !important;
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] #confirmModal #cancelButton:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] #confirmModal #confirmButton {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

/* Modales flotantes de confirmación (.confirmar-accion) */
[data-bs-theme="dark"] .confirmar-accion,
[data-bs-theme="dark"] #div-registro-ubicacion {
    background-color: rgba(30, 41, 59, 0.98) !important;
    border: 1px solid var(--ok-border) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] .confirmar-accion p,
[data-bs-theme="dark"] #div-registro-ubicacion p {
    color: #ffffff !important;
}

/* ==========================================================================
   Pie de Página (Footer) del Panel de Administración y Kiosco
   ========================================================================== */
[data-bs-theme="dark"] .footer,
[data-bs-theme="dark"] #footer,
[data-bs-theme="dark"] #layoutSidenav_content > footer,
[data-bs-theme="dark"] #layoutSidenav_content #footer,
[data-bs-theme="dark"] .footer.bg-white {
    background: var(--ok-bg-app) !important;
    background-color: var(--ok-bg-app) !important;
    border-top: 1px solid var(--ok-border) !important;
    color: var(--ok-text-muted) !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[data-bs-theme="dark"] .kiosk-footer,
[data-bs-theme="dark"] #footer.kiosk-footer {
    background: transparent !important;
    background-color: transparent !important;
    border-top: 1px solid var(--ok-border) !important;
    color: var(--ok-text-muted) !important;
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
    padding: 10px 0 14px 0 !important;
    margin-top: auto !important;
}

[data-bs-theme="dark"] .footer .copyright,
[data-bs-theme="dark"] .footer .copyright *,
[data-bs-theme="dark"] #footer .copyright,
[data-bs-theme="dark"] #footer .copyright *,
[data-bs-theme="dark"] .footer .credits {
    color: var(--ok-text-muted) !important;
}

[data-bs-theme="dark"] .footer strong span,
[data-bs-theme="dark"] #footer strong span {
    color: var(--ok-text-muted) !important;
}

[data-bs-theme="dark"] .footer .credits a {
    color: #818cf8 !important;
}

/* ==========================================================================
   Cabecera del Dashboard y Nombre de Empresa
   ========================================================================== */
[data-bs-theme="dark"] .header-dashboard {
    background: var(--ok-bg-surface) !important;
    background-color: var(--ok-bg-surface) !important;
    border: 1px solid var(--ok-border) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] .header-company-title,
[data-bs-theme="dark"] #nombre-empresa {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .header-subtext {
    color: var(--ok-text-muted) !important;
}

[data-bs-theme="dark"] .header-time-box {
    background: var(--ok-bg-input) !important;
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] .header-clock-time {
    color: #38bdf8 !important;
}

[data-bs-theme="dark"] .header-clock-date {
    color: var(--ok-text-muted) !important;
}

[data-bs-theme="dark"] #btn-hoy {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] #btn-hoy:hover {
    background-color: var(--ok-bg-elevated) !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Botón Buscar Actualizaciones y Modal Acerca de
   ========================================================================== */
[data-bs-theme="dark"] #btn-about-check-updates,
[data-bs-theme="dark"] #btn-check-updates-manual {
    color: #38bdf8 !important;
    border-color: #0284c7 !important;
    background-color: rgba(2, 132, 199, 0.18) !important;
}

[data-bs-theme="dark"] #btn-about-check-updates:hover,
[data-bs-theme="dark"] #btn-check-updates-manual:hover {
    color: #ffffff !important;
    background-color: #0284c7 !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.4) !important;
}

[data-bs-theme="dark"] #modalAboutOKTime .about-info-card,
[data-bs-theme="dark"] #modalAboutOKTime .modal-body > div {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] #modalAboutOKTime h4,
[data-bs-theme="dark"] #modalAboutOKTime h6 {
    color: #ffffff !important;
}

/* ==========================================================================
   Ficha de Empleado (Perfil, Editar Datos, Horarios, Permisos)
   ========================================================================== */
/* Sobrescribir labels azules oscuros de style.css (.profile .profile-edit label) */
[data-bs-theme="dark"] .profile .profile-edit label,
[data-bs-theme="dark"] .profile .profile-overview .label,
[data-bs-theme="dark"] .profile label,
[data-bs-theme="dark"] #profile-edit label,
[data-bs-theme="dark"] #profile-overview label,
[data-bs-theme="dark"] .profile-info-row label,
[data-bs-theme="dark"] .col-form-label {
    color: #e2e8f0 !important;
    font-weight: 600 !important;
}

[data-bs-theme="dark"] .profile .profile-edit .form-control,
[data-bs-theme="dark"] .profile .profile-edit .form-select,
[data-bs-theme="dark"] #profile-edit .form-control,
[data-bs-theme="dark"] #profile-edit .form-select {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] #profile-card-title,
[data-bs-theme="dark"] #profile-overview .text-dark,
[data-bs-theme="dark"] .profile-info-row .text-dark,
[data-bs-theme="dark"] #profile-name,
[data-bs-theme="dark"] #profile-surname,
[data-bs-theme="dark"] #profile-dni,
[data-bs-theme="dark"] #profile-email,
[data-bs-theme="dark"] #profile-phone,
[data-bs-theme="dark"] #profile-role,
[data-bs-theme="dark"] #profile-hora-cierre,
[data-bs-theme="dark"] #profile-joindate {
    color: #ffffff !important;
}

/* Bloque PIN de Kiosco en perfil */
[data-bs-theme="dark"] #bloque-pin-kiosco {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
}
[data-bs-theme="dark"] #bloque-pin-kiosco label {
    color: #ffffff !important;
}

/* Pestaña Horarios en Perfil */
[data-bs-theme="dark"] #profile-schedule .bg-light,
[data-bs-theme="dark"] #profile-schedule .bg-white {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text-main) !important;
}
[data-bs-theme="dark"] #profile-schedule .text-dark,
[data-bs-theme="dark"] #profile-schedule h5 {
    color: #ffffff !important;
}

/* Botones de navegación y acción en horario */
[data-bs-theme="dark"] #btn-copiar-horario-lunes {
    color: #38bdf8 !important;
    border-color: #0284c7 !important;
    background-color: rgba(2, 132, 199, 0.15) !important;
}
[data-bs-theme="dark"] #btn-copiar-horario-lunes:hover {
    color: #ffffff !important;
    background-color: #0284c7 !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3) !important;
}

[data-bs-theme="dark"] #btn-semana-anterior,
[data-bs-theme="dark"] #btn-semana-siguiente {
    color: #e2e8f0 !important;
    border-color: #475569 !important;
    background-color: var(--ok-bg-input) !important;
}
[data-bs-theme="dark"] #btn-semana-anterior:hover,
[data-bs-theme="dark"] #btn-semana-siguiente:hover {
    color: #ffffff !important;
    border-color: #64748b !important;
    background-color: var(--ok-bg-elevated) !important;
}

[data-bs-theme="dark"] #btn-semana-actual {
    color: #a5b4fc !important;
    border-color: #6366f1 !important;
    background-color: rgba(99, 102, 241, 0.15) !important;
}
[data-bs-theme="dark"] #btn-semana-actual:hover {
    color: #ffffff !important;
    border-color: #a5b4fc !important;
    background-color: #6366f1 !important;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.35) !important;
}

[data-bs-theme="dark"] #btn-guardar-como-base {
    color: #fbbf24 !important;
    border-color: #d97706 !important;
    background-color: rgba(217, 119, 6, 0.15) !important;
}
[data-bs-theme="dark"] #btn-guardar-como-base:hover {
    color: #ffffff !important;
    border-color: #fbbf24 !important;
    background-color: #d97706 !important;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.3) !important;
}

[data-bs-theme="dark"] #btn-abrir-modal-propagar {
    color: #c084fc !important;
    border-color: #7c3aed !important;
    background-color: rgba(124, 58, 237, 0.15) !important;
}
[data-bs-theme="dark"] #btn-abrir-modal-propagar:hover {
    color: #ffffff !important;
    border-color: #c084fc !important;
    background-color: #7c3aed !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.35) !important;
}

[data-bs-theme="dark"] #btn-restablecer-semana {
    color: #f87171 !important;
    border-color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.15) !important;
}
[data-bs-theme="dark"] #btn-restablecer-semana:hover {
    color: #ffffff !important;
    border-color: #f87171 !important;
    background-color: #ef4444 !important;
}

/* Modal Propagar Horario */
.propagar-option-card {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #1e293b;
    transition: all 0.2s ease;
}
.propagar-option-card:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}
.propagar-option-card.active-propagacion {
    background-color: #eff6ff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 1px #0284c7;
}

[data-bs-theme="dark"] #modalPropagarHorario .modal-content {
    background-color: var(--ok-bg-surface) !important;
    border: 1px solid var(--ok-border) !important;
}
[data-bs-theme="dark"] .propagar-option-card,
[data-bs-theme="dark"] #modalPropagarHorario .form-check {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
[data-bs-theme="dark"] .propagar-option-card:hover,
[data-bs-theme="dark"] #modalPropagarHorario .form-check:hover {
    background-color: #27354a !important;
    border-color: #475569 !important;
}
[data-bs-theme="dark"] .propagar-option-card.active-propagacion,
[data-bs-theme="dark"] #modalPropagarHorario .form-check.border-primary {
    background-color: rgba(2, 132, 199, 0.22) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.25) !important;
}
[data-bs-theme="dark"] #modalPropagarHorario .text-dark,
[data-bs-theme="dark"] #modalPropagarHorario .text-body,
[data-bs-theme="dark"] #modalPropagarHorario strong,
[data-bs-theme="dark"] #modalPropagarHorario span,
[data-bs-theme="dark"] #modalPropagarHorario .form-check-label {
    color: #f8fafc !important;
}
[data-bs-theme="dark"] #modalPropagarHorario .text-primary,
[data-bs-theme="dark"] #modalPropagarHorario .option-base-label,
[data-bs-theme="dark"] #modalPropagarHorario .option-base-label strong {
    color: #38bdf8 !important;
}
[data-bs-theme="dark"] #modalPropagarHorario .btn-light {
    background-color: var(--ok-bg-input) !important;
    border: 1px solid var(--ok-border) !important;
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] #modalPropagarHorario .btn-light:hover {
    background-color: var(--ok-bg-elevated) !important;
    color: #ffffff !important;
}

/* Botones outline-secondary genéricos en modo oscuro */
[data-bs-theme="dark"] .btn-outline-secondary {
    color: #cbd5e1 !important;
    border-color: #475569 !important;
}
[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:focus,
[data-bs-theme="dark"] .btn-outline-secondary:active {
    color: #ffffff !important;
    background-color: var(--ok-bg-elevated) !important;
    border-color: #64748b !important;
}

/* Tabla de Horarios Semanal */
[data-bs-theme="dark"] #tabla-horarios-semanal thead th {
    background-color: var(--ok-bg-input) !important;
    color: var(--ok-text-muted) !important;
    border-color: var(--ok-border) !important;
}
[data-bs-theme="dark"] #tabla-horarios-semanal tbody td {
    background-color: transparent !important;
    color: var(--ok-text-main) !important;
    border-color: var(--ok-border) !important;
}
[data-bs-theme="dark"] #tabla-horarios-semanal tbody tr:hover td {
    background-color: var(--ok-bg-elevated) !important;
}
[data-bs-theme="dark"] #tabla-horarios-semanal .badge-fecha-dia {
    background-color: var(--ok-bg-elevated) !important;
    color: #cbd5e1 !important;
    border-color: var(--ok-border) !important;
}
[data-bs-theme="dark"] #tabla-horarios-semanal span.text-dark {
    color: #ffffff !important;
}
[data-bs-theme="dark"] #tabla-horarios-semanal .form-check-label {
    color: #e2e8f0 !important;
}
/* Selector de tipo de jornada (Continua / Partido) y selects de horario */
[data-bs-theme="dark"] select.sel-dia-partido,
[data-bs-theme="dark"] #tabla-horarios-semanal select.form-select,
[data-bs-theme="dark"] #profile-schedule select.form-select,
[data-bs-theme="dark"] select.form-select {
    color-scheme: dark !important;
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: #f8fafc !important;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    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='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 16px 12px !important;
}

[data-bs-theme="dark"] select.sel-dia-partido:focus,
[data-bs-theme="dark"] #tabla-horarios-semanal select.form-select:focus,
[data-bs-theme="dark"] #profile-schedule select.form-select:focus,
[data-bs-theme="dark"] select.form-select:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.25) !important;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2338bdf8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    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='%2338bdf8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

[data-bs-theme="dark"] select.sel-dia-partido:disabled,
[data-bs-theme="dark"] #tabla-horarios-semanal select.form-select:disabled {
    background-color: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(51, 65, 85, 0.5) !important;
    color: #64748b !important;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    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='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    opacity: 0.65;
}

[data-bs-theme="dark"] select.form-select option {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

/* Campos de Hora (input[type="time"]) e Iconos de Reloj */
[data-bs-theme="dark"] input[type="time"],
[data-bs-theme="dark"] .input-hora {
    color-scheme: dark !important;
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: #ffffff !important;
    width: 104px !important;
    min-width: 102px !important;
}

[data-bs-theme="dark"] input[type="time"]:focus,
[data-bs-theme="dark"] .input-hora:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.25) !important;
    background-color: #0b1120 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] input[type="time"]:disabled,
[data-bs-theme="dark"] .input-hora:disabled {
    background-color: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(51, 65, 85, 0.5) !important;
    color: #64748b !important;
    opacity: 0.65;
}

/* Iconos de reloj y calendario en selectores (Chromium / WebKit) */
[data-bs-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] .input-hora::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(0.95) !important;
    cursor: pointer !important;
    opacity: 0.9 !important;
    padding: 0 2px !important;
    transition: opacity 0.15s ease, filter 0.15s ease;
}

[data-bs-theme="dark"] input[type="time"]:hover::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="date"]:hover::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="week"]:hover::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="month"]:hover::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] .input-hora:hover::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="time"]:focus::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="date"]:focus::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="week"]:focus::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="month"]:focus::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] .input-hora:focus::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

[data-bs-theme="dark"] input[type="time"]:disabled::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="date"]:disabled::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="week"]:disabled::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="month"]:disabled::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] .input-hora:disabled::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(0.4) !important;
    cursor: not-allowed !important;
    opacity: 0.4 !important;
}

/* Indicadores de tramos en horario */
[data-bs-theme="dark"] #tabla-horarios-semanal .badge.bg-secondary.bg-opacity-10 {
    background-color: rgba(148, 163, 184, 0.15) !important;
    color: #94a3b8 !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
}
[data-bs-theme="dark"] #tabla-horarios-semanal .badge.bg-warning.bg-opacity-10 {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

/* Barra de resumen inferior de horario */
[data-bs-theme="dark"] #lbl-rango-semana-activa {
    color: #ffffff !important;
}
[data-bs-theme="dark"] #resumen-distribucion-dias {
    background-color: var(--ok-bg-input) !important;
    color: #e2e8f0 !important;
    border-color: var(--ok-border) !important;
}
[data-bs-theme="dark"] #input-tolerancia-minutos,
[data-bs-theme="dark"] #sel-tipo-libranza,
[data-bs-theme="dark"] #input-fecha-inicio-rotacion {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: #ffffff !important;
}
[data-bs-theme="dark"] #profile-schedule .input-group-text {
    background-color: var(--ok-bg-elevated) !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text-muted) !important;
}

/* Resumen General de Empleado (Filas y hover) */
[data-bs-theme="dark"] .profile-info-row {
    border-bottom: 1px dashed var(--ok-border) !important;
}
[data-bs-theme="dark"] .profile-info-row:hover {
    background-color: var(--ok-bg-elevated) !important;
    border-radius: 8px;
}
[data-bs-theme="dark"] .profile-info-row:hover .text-dark,
[data-bs-theme="dark"] .profile-info-row:hover #profile-name,
[data-bs-theme="dark"] .profile-info-row:hover #profile-surname,
[data-bs-theme="dark"] .profile-info-row:hover #profile-dni,
[data-bs-theme="dark"] .profile-info-row:hover #profile-email,
[data-bs-theme="dark"] .profile-info-row:hover #profile-phone,
[data-bs-theme="dark"] .profile-info-row:hover #profile-role,
[data-bs-theme="dark"] .profile-info-row:hover #profile-hora-cierre,
[data-bs-theme="dark"] .profile-info-row:hover #profile-joindate {
    color: #ffffff !important;
}
[data-bs-theme="dark"] .profile-info-row:hover .text-muted,
[data-bs-theme="dark"] .profile-info-row:hover [id^="lb-profile-"] {
    color: #94a3b8 !important;
}

/* Estilos Base para Asignación de Permisos (Light & Dark) */
.permiso-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease-in-out;
}
.permiso-card:hover {
    border-color: #cbd5e1;
}
.permiso-card.permiso-card-active {
    background-color: #f8fafc;
}
.permiso-card .permiso-title {
    color: #0f172a;
    font-size: 0.95rem;
}
.permiso-card .permiso-desc {
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.35;
}
.permiso-switch-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    transition: all 0.15s ease-in-out;
}
.permiso-switch-card.permiso-switch-active {
    background-color: #f8fafc;
}
.permiso-switch-card .permiso-switch-label {
    color: #1e293b;
}

/* Pestaña Estado & Permisos en Perfil (Modo Oscuro) */
[data-bs-theme="dark"] #profile-status-change .bg-light {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
}
[data-bs-theme="dark"] #profile-status-change label.form-label,
[data-bs-theme="dark"] #profile-status-change .form-label {
    color: #ffffff !important;
}
[data-bs-theme="dark"] #profile-status-change .form-check {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
[data-bs-theme="dark"] #profile-status-change .form-check-label {
    color: #f8fafc !important;
}

/* Contenedor y Tarjetas de Permisos Granulares de Encargado (AdminProfile) */
[data-bs-theme="dark"] #permisos-granulares-box {
    background-color: #0b1120 !important;
    border-color: #334155 !important;
}
[data-bs-theme="dark"] #permisos-granulares-box .border-bottom {
    border-bottom-color: #334155 !important;
}
[data-bs-theme="dark"] .permiso-card {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}
[data-bs-theme="dark"] .permiso-card:hover {
    border-color: #475569 !important;
    background-color: #243248 !important;
}
[data-bs-theme="dark"] .permiso-card.permiso-card-active {
    background-color: #1a253c !important;
}
[data-bs-theme="dark"] .permiso-card .permiso-title,
[data-bs-theme="dark"] .permiso-title {
    color: #ffffff !important;
    font-weight: 700 !important;
}
[data-bs-theme="dark"] .permiso-card .permiso-desc,
[data-bs-theme="dark"] .permiso-desc {
    color: #cbd5e1 !important;
    font-size: 0.82rem;
    line-height: 1.35;
}
[data-bs-theme="dark"] .permiso-card .form-check-input:disabled ~ .form-check-label,
[data-bs-theme="dark"] .permiso-card .form-check-input[disabled] ~ .form-check-label,
[data-bs-theme="dark"] #profile-status-change .form-check-input:disabled ~ .form-check-label {
    opacity: 1 !important;
    color: #ffffff !important;
}

/* Tabs de navegación en perfil */
[data-bs-theme="dark"] .profile-nav-pills .nav-link {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border: 1px solid #334155 !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

[data-bs-theme="dark"] .profile-nav-pills .nav-link:hover {
    background-color: #27354a !important;
    border-color: #0284c7 !important;
    color: #38bdf8 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .profile-nav-pills .nav-link.active {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.45) !important;
}

[data-bs-theme="dark"] .profile-nav-pills .nav-link-danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #f87171 !important;
}

[data-bs-theme="dark"] .profile-nav-pills .nav-link-danger:hover {
    background-color: rgba(239, 68, 68, 0.22) !important;
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
    transform: translateY(-1px);
}

[data-bs-theme="dark"] .profile-nav-pills .nav-link-danger.active {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    border-color: #f87171 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4) !important;
}

[data-bs-theme="dark"] .profile-header-action-btn {
    background-color: #334155 !important;
    border: 1px solid #475569 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .profile-header-action-btn:hover {
    background-color: #475569 !important;
    color: #38bdf8 !important;
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   CUADRANTE ANUAL DE VACACIONES & MODO OSCURO
   ═══════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .cuadrante-shift-box.shift-vacaciones {
    background-color: rgba(13, 148, 136, 0.18) !important;
    border-color: rgba(45, 212, 191, 0.35) !important;
    color: #2dd4bf !important;
}

[data-bs-theme="dark"] .tabla-vacaciones-anual th {
    background-color: #0b1120 !important;
    border-color: #1e293b !important;
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .tabla-vacaciones-anual th.col-vac-mes,
[data-bs-theme="dark"] .tabla-vacaciones-anual td.col-vac-mes {
    text-align: center !important;
}

[data-bs-theme="dark"] .tabla-vacaciones-anual td {
    background-color: var(--ok-bg-card, #1e293b) !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .tabla-vacaciones-anual tbody tr:hover td {
    background-color: #283548 !important;
}

[data-bs-theme="dark"] .col-vac-empleado {
    background-color: #1a2234 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .col-vac-mes.mes-actual {
    background-color: rgba(13, 148, 136, 0.12) !important;
    border-left: 2px solid #2dd4bf !important;
    border-right: 2px solid #2dd4bf !important;
}

[data-bs-theme="dark"] .vacacion-pill.vacacion-aprobada {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
    border-color: rgba(52, 211, 153, 0.4) !important;
}

[data-bs-theme="dark"] .vacacion-pill.vacacion-pendiente {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
}

[data-bs-theme="dark"] .vacacion-cell-empty:hover {
    background-color: rgba(45, 212, 191, 0.15) !important;
    color: #2dd4bf !important;
}

[data-bs-theme="dark"] .vacacion-bolsa-badge {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

[data-bs-theme="dark"] .btn-outline-teal {
    color: #2dd4bf !important;
    border-color: #2dd4bf !important;
}

[data-bs-theme="dark"] .btn-outline-teal:hover {
    color: #042f2e !important;
    background-color: #2dd4bf !important;
    border-color: #2dd4bf !important;
}

[data-bs-theme="dark"] #profile-vacations .card.bg-light,
[data-bs-theme="dark"] #profile-vacations .p-3.bg-white,
[data-bs-theme="dark"] #vacacion-calculo-box.bg-light {
    background-color: var(--ok-bg-card, #1e293b) !important;
    border-color: #334155 !important;
}

[data-bs-theme="dark"] #profile-vacations label,
[data-bs-theme="dark"] #profile-vacations h6,
[data-bs-theme="dark"] #vacacion-dias-texto {
    color: #ffffff !important;
}

[data-bs-theme="dark"] tr.row-vacaciones td:first-child {
    border-left: 5px solid #14b8a6 !important;
}

[data-bs-theme="dark"] .badge-vacaciones {
    background-color: rgba(20, 184, 166, 0.2) !important;
    color: #2dd4bf !important;
    border: 1px solid rgba(20, 184, 166, 0.4) !important;
}

[data-bs-theme="dark"] .badge-reincorporacion {
    background-color: rgba(15, 118, 110, 0.25) !important;
    color: #5eead4 !important;
    border: 1px solid rgba(45, 212, 191, 0.35) !important;
}

/* Modal de Vacaciones */
[data-bs-theme="dark"] #modalVacacion .modal-header {
    background: linear-gradient(135deg, #115e59, #0f766e) !important;
    color: #ffffff !important;
}
[data-bs-theme="dark"] #modalVacacion .modal-footer {
    background-color: #1e293b !important;
    border-top: 1px solid #334155 !important;
}
[data-bs-theme="dark"] #modalVacacion #vacacion-calculo-box,
[data-bs-theme="dark"] #modalVacacion #vacacion-resumen-saldo,
[data-bs-theme="dark"] #modalVacacion #vacacion-empleado-fijo-card {
    background-color: #1a2234 !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}
[data-bs-theme="dark"] #modalVacacion #vacacion-empleado-fijo-nombre {
    color: #ffffff !important;
}

/* ==========================================================================
   Gráfica Semanal de Fichajes en Ficha de Empleado (Modo Oscuro)
   ========================================================================== */
[data-bs-theme="dark"] #card-nav-grafica-semana {
    background-color: var(--ok-bg-surface) !important;
    border-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] #card-nav-grafica-semana .bg-light {
    background-color: var(--ok-bg-input) !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] #grafica-semanal-kpis .bg-white {
    background-color: var(--ok-bg-surface) !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] #grafica-semanal-kpis .text-muted {
    color: var(--ok-text-muted) !important;
}

[data-bs-theme="dark"] #card-canvas-grafica-fichajes {
    background-color: var(--ok-bg-surface) !important;
    border-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] #card-tabla-desglose-semana {
    background-color: var(--ok-bg-surface) !important;
    border-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] #card-tabla-desglose-semana .card-header {
    background-color: var(--ok-bg-surface) !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] #card-tabla-desglose-semana .card-header span {
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] #tabla-grafica-desglose-dias thead {
    background-color: var(--ok-bg-input) !important;
}

[data-bs-theme="dark"] #tabla-grafica-desglose-dias thead th {
    background-color: var(--ok-bg-input) !important;
    color: var(--ok-text-muted) !important;
    border-color: var(--ok-border) !important;
}

[data-bs-theme="dark"] #tabla-grafica-desglose-dias tbody tr {
    border-color: var(--ok-border) !important;
    background-color: transparent !important;
}

[data-bs-theme="dark"] #tabla-grafica-desglose-dias tbody tr:hover {
    background-color: var(--ok-bg-elevated) !important;
}

[data-bs-theme="dark"] #tabla-grafica-desglose-dias tbody tr.table-active {
    background-color: rgba(56, 189, 248, 0.08) !important;
}

[data-bs-theme="dark"] #tabla-grafica-desglose-dias tbody td {
    border-color: var(--ok-border) !important;
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] #tabla-grafica-desglose-dias tbody td .text-dark {
    color: var(--ok-text-main) !important;
}

[data-bs-theme="dark"] #tabla-grafica-desglose-dias .badge-desglose-fecha {
    background-color: var(--ok-bg-elevated) !important;
    color: var(--ok-text-main) !important;
    border-color: var(--ok-border) !important;
}

/* ==========================================================================
   Badges e Indicadores de Fichajes (Alta Legibilidad y Contraste)
   ========================================================================== */
.badge-fichaje-entrada {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #10b981 !important;
    font-weight: 700 !important;
    font-size: 0.84rem !important;
    padding: 5px 11px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    letter-spacing: 0.2px;
}
.badge-fichaje-entrada i {
    color: #059669 !important;
    margin-right: 7px !important;
}

.badge-fichaje-descanso-ini {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #f59e0b !important;
    font-weight: 700 !important;
    font-size: 0.84rem !important;
    padding: 5px 11px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    letter-spacing: 0.2px;
}
.badge-fichaje-descanso-ini i {
    color: #d97706 !important;
    margin-right: 7px !important;
}

.badge-fichaje-descanso-fin {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #0284c7 !important;
    font-weight: 700 !important;
    font-size: 0.84rem !important;
    padding: 5px 11px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    letter-spacing: 0.2px;
}
.badge-fichaje-descanso-fin i {
    color: #0284c7 !important;
    margin-right: 7px !important;
}

.badge-fichaje-salida {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #ef4444 !important;
    font-weight: 700 !important;
    font-size: 0.84rem !important;
    padding: 5px 11px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    letter-spacing: 0.2px;
}
.badge-fichaje-salida i {
    color: #dc2626 !important;
    margin-right: 7px !important;
}

.badge-fichaje-fecha {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Modo Oscuro para badges de fichajes */
[data-bs-theme="dark"] .badge-fichaje-entrada {
    background-color: rgba(16, 185, 129, 0.24) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.6) !important;
}
[data-bs-theme="dark"] .badge-fichaje-entrada i {
    color: #34d399 !important;
}

[data-bs-theme="dark"] .badge-fichaje-descanso-ini {
    background-color: rgba(245, 158, 11, 0.24) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.6) !important;
}
[data-bs-theme="dark"] .badge-fichaje-descanso-ini i {
    color: #fbbf24 !important;
}

[data-bs-theme="dark"] .badge-fichaje-descanso-fin {
    background-color: rgba(14, 165, 233, 0.24) !important;
    color: #38bdf8 !important;
    border-color: rgba(14, 165, 233, 0.6) !important;
}
[data-bs-theme="dark"] .badge-fichaje-descanso-fin i {
    color: #38bdf8 !important;
}

[data-bs-theme="dark"] .badge-fichaje-salida {
    background-color: rgba(239, 68, 68, 0.24) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
}
[data-bs-theme="dark"] .badge-fichaje-salida i {
    color: #f87171 !important;
}

[data-bs-theme="dark"] .badge-fichaje-fecha {
    background-color: var(--ok-bg-elevated, #283548) !important;
    color: #f8fafc !important;
    border-color: var(--ok-border, #334155) !important;
}

/* ==========================================================================
   Contraste de Nombres en Modal de Asignar Vacaciones (Modo Oscuro)
   ========================================================================== */
[data-bs-theme="dark"] .vacacion-empleados-container {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

[data-bs-theme="dark"] .vacacion-emp-item {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .vacacion-emp-item:hover {
    background-color: #283548 !important;
    border-color: #475569 !important;
}

[data-bs-theme="dark"] .vacacion-emp-item .emp-nombre {
    color: #f8fafc !important;
    font-weight: 600;
}

[data-bs-theme="dark"] .vacacion-emp-item .emp-cargo {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .vacacion-emp-item.border-teal {
    border-color: #2dd4bf !important;
    background-color: rgba(13, 148, 136, 0.2) !important;
}