/* HSC Panel - estilos personalizados */

/* =========================================================
   Paleta corporativa: reemplaza el azul Bootstrap brillante
   por un navy formal (#1c3d6e)
   ========================================================= */
:root {
    --bs-primary:             #1c3d6e;
    --bs-primary-rgb:         28, 61, 110;
    --bs-link-color:          #1c3d6e;
    --bs-link-hover-color:    #16315a;
    --bs-link-color-rgb:      28, 61, 110;
    --bs-link-hover-color-rgb:22, 49, 90;
}

.btn-primary {
    --bs-btn-bg:              #1c3d6e;
    --bs-btn-border-color:    #1c3d6e;
    --bs-btn-hover-bg:        #16315a;
    --bs-btn-hover-border-color: #16315a;
    --bs-btn-active-bg:       #112749;
    --bs-btn-active-border-color: #112749;
    --bs-btn-focus-shadow-rgb: 28, 61, 110;
}

.btn-outline-primary {
    --bs-btn-color:           #1c3d6e;
    --bs-btn-border-color:    #1c3d6e;
    --bs-btn-hover-bg:        #1c3d6e;
    --bs-btn-hover-border-color: #1c3d6e;
    --bs-btn-focus-shadow-rgb: 28, 61, 110;
}

.text-primary  { color: #1c3d6e !important; }
.bg-primary    { background-color: #1c3d6e !important; }
.border-primary { border-color: #1c3d6e !important; }

/* =========================================================
   Base
   ========================================================= */
body {
    background-color: #f4f6f9;
    font-size: 0.92rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: "cv02","cv03","cv04","cv11";
    -webkit-font-smoothing: antialiased;
}

/* Navbar */
.navbar-brand {
    letter-spacing: 0.02em;
}

.nav-link.active {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 0.375rem;
}

/* Cards */
.card {
    border-radius: 0.6rem;
}

/* Tablas */
.table th {
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
}

/* Badges de estado */
.badge {
    font-weight: 500;
}

/* Badges estilo "soft": borde + fuente en color pleno, fondo tenue */
.badge.bg-primary   { background-color: #dce8f7 !important; color: #1c3d6e !important; border: 1px solid #1c3d6e; }
.badge.bg-secondary { background-color: #e9ecef !important; color: #495057 !important; border: 1px solid #6c757d; }
.badge.bg-success   { background-color: #d1e7dd !important; color: #0a5c36 !important; border: 1px solid #198754; }
.badge.bg-warning   { background-color: #fff3cd !important; color: #664d03 !important; border: 1px solid #e0a800; }
.badge.bg-danger    { background-color: #f8d7da !important; color: #842029 !important; border: 1px solid #dc3545; }
.badge.bg-info      { background-color: #cff4fc !important; color: #0a6374 !important; border: 1px solid #0dcaf0; }
.badge.bg-dark      { background-color: #d3d3d4 !important; color: #141619 !important; border: 1px solid #343a40; }
.badge.bg-light,
.badge.bg-white     { background-color: #f8f9fa !important; color: #495057 !important; border: 1px solid #adb5bd !important; }

/* Login */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1c3d6e22 0%, #f4f6f9 60%);
}

.login-card {
    width: 100%;
    max-width: 400px;
}

/* Dashboard stat cards */
.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Filtros */
.filtros-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0.6rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.filtros-card .form-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

/* Encabezado tabla OsdepymPedidos: color corporativo */
#tablaOsdepym_wrapper .dataTables_scroll {
    margin-top: 0.4rem;
}
/* Estilo visual: aplica al header visible y al thead mobile (responsive sin scrollY) */
#tablaOsdepym_wrapper .dataTables_scrollHead thead th,
#tablaOsdepym thead th {
    background-color: #f5f5f5 !important;
    color: #495057 !important;
    border-color: #dee2e6 !important;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Padding alto solo en el header visible (evita afectar el <thead> oculto de sizing en el scrollBody) */
#tablaOsdepym_wrapper .dataTables_scrollHead thead th {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* Tabla de temas */
.table td { vertical-align: middle; }
.table .col-codigo { width: 90px; white-space: nowrap; }
.table .col-nombre { min-width: 200px; }
.table .col-badge  { width: 100px; }
.table .col-acciones { width: 80px; text-align: center; }

/* Timeline de seguimiento */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before {
    content: '';
    position: absolute;
    left: 0.45rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}
.timeline-item { position: relative; margin-bottom: 1.25rem; }
.timeline-dot {
    position: absolute;
    left: -1.5rem;
    top: 0.2rem;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: #1c3d6e;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #1c3d6e;
}
.timeline-dot.dot-secondary { background: #6c757d; box-shadow: 0 0 0 2px #6c757d; }
.timeline-dot.dot-success   { background: #198754; box-shadow: 0 0 0 2px #198754; }
.timeline-dot.dot-danger    { background: #dc3545; box-shadow: 0 0 0 2px #dc3545; }
.timeline-item .card { border-radius: 0.4rem; }

/* Campos de texto largo (Comentarios, etc.) */
.texto-largo {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.6;
    max-height: 400px;
    overflow-y: auto;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
}

/* Dato-label en la ficha de un tema */
.dato-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
    margin-bottom: 0.15rem;
}
.dato-valor { font-size: 0.9rem; }

/* Horas total chip */
.horas-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #e5ecf5;
    color: #1c3d6e;
    border-radius: 2rem;
    padding: 0.25rem 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
}


/* =========================================================
   Barra fija inferior (Carga de Pedidos y Horas)
   ========================================================= */
.carga-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: #1c3d6e;
    border-top: 3px solid #14305a;
    box-shadow: 0 -2px 12px rgba(0,0,0,.25);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
/* Texto label en la barra */
.carga-bottom-bar .text-muted {
    color: rgba(255,255,255,0.75) !important;
}
/* btn-primary (navy) → se invierte a blanco sobre fondo navy */
.carga-bottom-bar .btn-primary {
    background-color: #fff;
    color: #1c3d6e;
    border-color: #fff;
}
.carga-bottom-bar .btn-primary:hover,
.carga-bottom-bar .btn-primary:focus {
    background-color: #e8edf5;
    border-color: #e8edf5;
    color: #1c3d6e;
}
/* btn-outline-primary → contorno blanco */
.carga-bottom-bar .btn-outline-primary {
    color: #fff;
    border-color: rgba(255,255,255,0.7);
}
.carga-bottom-bar .btn-outline-primary:hover {
    background-color: rgba(255,255,255,0.15);
    color: #fff;
    border-color: #fff;
}
/* btn-outline-secondary → contorno blanco semi-transparente */
.carga-bottom-bar .btn-outline-secondary {
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.5);
}
.carga-bottom-bar .btn-outline-secondary:hover {
    background-color: rgba(255,255,255,0.1);
    color: #fff;
    border-color: rgba(255,255,255,0.8);
}

/* =========================================================
   Responsive / Mobile
   ========================================================= */

/* ── Tira de badges de estado (dashboard) ──────────────── */
.badges-estados-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #dee2e6 transparent;
    padding-bottom: 1px;
}
.badges-estados-strip::-webkit-scrollbar        { height: 3px; }
.badges-estados-strip::-webkit-scrollbar-track  { background: transparent; }
.badges-estados-strip::-webkit-scrollbar-thumb  { background: #dee2e6; border-radius: 2px; }

@media (max-width: 575.98px) {
    /* En mobile: badges bajan a segunda línea, título + botón quedan en la primera */
    .badges-estados-strip {
        order: 3;
        flex: 0 0 100%;
        margin-top: 0.2rem;
    }
}

/* Badges del strip: un poco más grandes que los inline */
.badges-estados-strip .badge {
    font-size: 0.8rem;
    padding: 0.38em 0.65em;
}

/* Contador circular dentro del badge */
.badge .badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    background-color: rgba(255,255,255,0.45);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    padding: 0 0.2em;
    margin-left: 0.35em;
    vertical-align: middle;
    letter-spacing: 0;
}

/* ── DataTables: Mostrar + Buscar en una sola línea ─────── */
@media (max-width: 767.98px) {
    /* La fila de controles usa Bootstrap col-sm-12 que apila por defecto */
    #tablaOsdepym_wrapper > .row:first-child {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }
    #tablaOsdepym_wrapper > .row:first-child > div {
        flex: 1 1 auto;
        width: auto !important;
        padding: 0;
    }
    /* "Mostrar N" no necesita crecer tanto */
    #tablaOsdepym_wrapper > .row:first-child > div:first-child {
        flex: 0 0 auto;
    }
    #tablaOsdepym_wrapper .dataTables_length label,
    #tablaOsdepym_wrapper .dataTables_filter label {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        margin: 0;
        white-space: nowrap;
        font-size: 0.8rem;
    }
    #tablaOsdepym_wrapper .dataTables_filter input {
        width: 100% !important;
        min-width: 0;
    }
    /* Fila de info + paginación: compactar */
    #tablaOsdepym_wrapper > .row:last-child {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
    }
    #tablaOsdepym_wrapper > .row:last-child > div {
        width: auto !important;
        padding: 0;
        flex: 1 1 auto;
    }
    #tablaOsdepym_wrapper .dataTables_info { font-size: 0.78rem; }
    #tablaOsdepym_wrapper .pagination { margin: 0; }
    #tablaOsdepym_wrapper .pagination .page-link {
        padding: 0.2rem 0.5rem;
        font-size: 0.8rem;
    }
}

/* Barra inferior: más compacta en mobile */
@media (max-width: 767.98px) {
    .carga-bottom-bar {
        padding: 0.5rem 0.75rem;
        gap: 0.4rem;
    }
    .carga-bottom-bar .btn {
        font-size: 0.82rem;
        padding: 0.3rem 0.65rem;
    }
}

@media (max-width: 575.98px) {
    /* Reducir tipografía base en mobile */
    body { font-size: 0.875rem; }

    /* Encabezados de páginas más pequeños */
    h4.fw-semibold { font-size: 1.1rem; }
    h5.fw-semibold { font-size: 1rem; }

    /* Barra inferior: botones al 100% en pantallas muy pequeñas */
    .carga-bottom-bar {
        justify-content: center;
        padding: 0.5rem;
    }
    .carga-bottom-bar .btn {
        flex: 1 1 auto;
        text-align: center;
        font-size: 0.8rem;
    }

    /* Cards sin padding lateral extra en mobile */
    .card-body.p-4 { padding: 1rem !important; }

    /* Filtros: colapsar en columna */
    .filtros-card .row > * { margin-bottom: 0.4rem; }

    /* Tablas: reducir padding de celdas */
    .table td, .table th { padding: 0.4rem 0.5rem; }
}

@media (max-width: 767.98px) {
    /* DataTables: search y length más pequeños */
    .dataTables_wrapper .dataTables_filter input {
        width: 120px;
    }
    .dataTables_wrapper .dataTables_length select {
        width: 60px;
    }

    /* Spacer para barra fija menos alto en mobile */
    .spacer-barra-bottom { height: 80px; }
}

/* =========================================================
   Flatpickr — integración con paleta corporativa HSC
   ========================================================= */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #1c3d6e;
    border-color: #1c3d6e;
}
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus {
    background: #1c3d6e;
    border-color: #1c3d6e;
}
.flatpickr-day:hover {
    background: #e8edf5;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #1c3d6e;
}
/* El altInput debe verse igual que un form-control Bootstrap */
.flatpickr-input.form-control[readonly],
.flatpickr-input.form-control-sm[readonly] {
    background-color: #fff;
    cursor: pointer;
}
/* En mobile, el range picker no puede tener ancho fijo (flatpickr pone 220px inline) */
@media (max-width: 575.98px) {
    .flatpickr-input.form-control { width: 100% !important; }
}

/* =========================================================
   DataTables — fuente y paginación
   ========================================================= */
/* Pequeño respiro entre el borde superior del wrapper y la barra de controles */
.dataTables_wrapper > .row:first-child {
    padding-top: 0.4rem;
}
.dataTables_wrapper,
.dataTables_wrapper table,
.dataTables_wrapper input,
.dataTables_wrapper select,
.dataTables_wrapper label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.dataTables_wrapper .pagination .page-link {
    color: #1c3d6e;
    border-color: #dee2e6;
}
.dataTables_wrapper .pagination .page-link:hover {
    color: #fff;
    background-color: #1c3d6e;
    border-color: #1c3d6e;
}
.dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: #1c3d6e;
    border-color: #1c3d6e;
    color: #fff;
}
.dataTables_wrapper .pagination .page-item.disabled .page-link {
    color: #adb5bd;
    border-color: #dee2e6;
}

/* =========================================================
   Thead fijo con fondo gris suave
   ========================================================= */
.thead-sticky th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #e9ecef;
    border-bottom: 2px solid #ced4da;
}

/* =========================================================
   Colores de filas — Temas (ControlVersiones)
   ========================================================= */
/* Estado G (A Entregar) → magenta claro */
tr.fila-magenta td { background-color: #f0d0ff !important; }
tr.fila-magenta:hover td { background-color: #e8c0ff !important; }
/* Estado O (Observado) → teal claro */
tr.fila-teal td { background-color: #d0f0ef !important; }
tr.fila-teal:hover td { background-color: #b8e8e6 !important; }
/* Horas reales > estimación → rojo */
.horas-excedidas { color: #dc3545; font-weight: 600; }

/* =========================================================
   Botón toggle dark/light mode
   ========================================================= */
.btn-toggle-tema {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: color 0.2s;
}
.btn-toggle-tema:hover,
.btn-toggle-tema:focus {
    color: #fff;
    box-shadow: none;
}

/* =========================================================
   Dark Mode  —  [data-theme="dark"]

   Paleta:
     Body bg          #16192b  (fondo profundo, no negro puro)
     Surface (cards)  #1f2540  (capa elevada, claramente visible)
     Header/raised    #263058  (cabeceras más claras = jerarquía)
     Border           #3b4f72  (bordes visibles pero suaves)
     Text primary     #e6eeff  (casi blanco, contraste ~12:1)
     Text secondary   #8fb3e8  (azul claro, contraste ~5:1)
     Text muted       #6a90c0  (para texto de apoyo)
     Accent / Link    #7db4f8  (azul brillante para enlaces)
   ========================================================= */

/* ── 1. Override de variables CSS de Bootstrap ─────────────
   SIN ESTO Bootstrap ignora nuestro color y usa #212529     */
[data-theme="dark"] {
    color-scheme: dark;

    /* Variables de cuerpo */
    --bs-body-color:              #e6eeff;
    --bs-body-color-rgb:          230, 238, 255;
    --bs-body-bg:                 #16192b;
    --bs-body-bg-rgb:             22, 25, 43;
    --bs-secondary-color:         #8fb3e8;
    --bs-secondary-color-rgb:     143, 179, 232;
    --bs-secondary-bg:            #1f2540;
    --bs-tertiary-bg:             #263058;
    --bs-emphasis-color:          #ffffff;
    --bs-heading-color:           #e6eeff;

    /* Bordes */
    --bs-border-color:            #3b4f72;
    --bs-border-color-translucent: rgba(59, 79, 114, 0.4);

    /* Tablas — clave para que el texto sea blanco */
    --bs-table-color:             #e6eeff;
    --bs-table-bg:                transparent;
    --bs-table-border-color:      #3b4f72;
    --bs-table-striped-color:     #e6eeff;
    --bs-table-striped-bg:        rgba(255,255,255,0.03);
    --bs-table-active-color:      #e6eeff;
    --bs-table-active-bg:         rgba(255,255,255,0.06);
    --bs-table-hover-color:       #e6eeff;
    --bs-table-hover-bg:          rgba(255,255,255,0.06);

    /* Cards */
    --bs-card-color:              #e6eeff;
    --bs-card-bg:                 #1f2540;
    --bs-card-border-color:       #3b4f72;
    --bs-card-cap-bg:             rgba(38, 48, 88, 0.8);
    --bs-card-cap-color:          #e6eeff;

    /* Modales */
    --bs-modal-bg:                #1f2540;
    --bs-modal-border-color:      #3b4f72;
    --bs-modal-color:             #e6eeff;

    /* Dropdowns */
    --bs-dropdown-bg:             #1f2540;
    --bs-dropdown-border-color:   #3b4f72;
    --bs-dropdown-color:          #e6eeff;
    --bs-dropdown-link-color:     #d0dcf5;
    --bs-dropdown-link-hover-bg:  #263058;
    --bs-dropdown-link-hover-color: #ffffff;
    --bs-dropdown-divider-bg:     #3b4f72;

    /* Links */
    --bs-link-color:              #7db4f8;
    --bs-link-hover-color:        #a0c8ff;
    --bs-link-color-rgb:          125, 180, 248;
}

/* ── 2. Cuerpo ─────────────────────────────────────────── */
[data-theme="dark"] body {
    background-color: #16192b;
    color: #e6eeff;
}

/* ── 3. Navbar ─────────────────────────────────────────── */
[data-theme="dark"] .navbar.bg-primary {
    background-color: #0d1020 !important;
    border-bottom: 2px solid #1c3060;
}

/* ── 4. Cards ───────────────────────────────────────────── */
[data-theme="dark"] .card {
    background-color: #1f2540;
    border-color: #3b4f72 !important;
}
[data-theme="dark"] .card-header {
    background-color: #263058 !important;
    border-bottom-color: #3b4f72 !important;
    color: #e6eeff;
}
[data-theme="dark"] .card-body  { background-color: #1f2540; color: #e6eeff; }
[data-theme="dark"] .card-footer { background-color: #1f2540; border-top-color: #3b4f72; }
[data-theme="dark"] .shadow-sm  { box-shadow: 0 2px 8px rgba(0,0,0,.6) !important; }

/* ── 5. Tablas ───────────────────────────────────────────
   --bs-table-color ya viene de la sección de variables,
   pero forzamos también con color: directamente para
   máxima compatibilidad con selectores de Bootstrap.      */
[data-theme="dark"] .table,
[data-theme="dark"] .table > :not(caption) > * > * {
    color: #e6eeff;
    border-color: #3b4f72;
}
[data-theme="dark"] .table > thead > tr > th {
    color: #8fb3e8;
    background-color: #263058;
    border-bottom: 2px solid #4a62a0 !important;
}
[data-theme="dark"] .table-hover tbody tr:hover > td,
[data-theme="dark"] .table-hover tbody tr:hover > th {
    background-color: rgba(255,255,255,.07);
    color: #e6eeff;
}
/* tfoot totales */
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > td,
[data-theme="dark"] .table-light > th,
[data-theme="dark"] tr.table-light > td,
[data-theme="dark"] tr.table-light > th {
    --bs-table-bg: #263058;
    background-color: #263058 !important;
    color: #e6eeff !important;
    border-color: #3b4f72 !important;
}

/* ── 6. Formularios ──────────────────────────────────────── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea.form-control {
    background-color: #1c2240;
    border-color: #3b4f72;
    color: #e6eeff;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: #1c2240;
    border-color: #5a7ec0;
    color: #e6eeff;
    box-shadow: 0 0 0 0.2rem rgba(28,61,110,.4);
}
[data-theme="dark"] .form-control::placeholder  { color: #4a6090; }
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .flatpickr-input[readonly]  {
    background-color: #161b30;
    color: #e6eeff;
    cursor: pointer;
}
[data-theme="dark"] .form-check-input           { background-color: #1c2240; border-color: #3b4f72; }
[data-theme="dark"] .form-check-input:checked   { background-color: #2a5cc4; border-color: #2a5cc4; }
[data-theme="dark"] .form-label                 { color: #c0d0f0; }
[data-theme="dark"] .form-check-label           { color: #c0d0f0; }
[data-theme="dark"] .input-group-text           {
    background-color: #263058;
    border-color: #3b4f72;
    color: #8fb3e8;
}

/* ── 7. Filtros card ──────────────────────────────────────── */
[data-theme="dark"] .filtros-card               { background: #1f2540; border-color: #3b4f72; }
[data-theme="dark"] .filtros-card .form-label   { color: #8fb3e8; }
[data-theme="dark"] .bg-light                   { background-color: #1a1e38 !important; }
[data-theme="dark"] .bg-white                   { background-color: #1f2540 !important; }
[data-theme="dark"] .bg-body                    { background-color: #16192b !important; }

/* ── 8. Modales ───────────────────────────────────────────── */
[data-theme="dark"] .modal-content  { background-color: #1f2540; border-color: #3b4f72; color: #e6eeff; }
[data-theme="dark"] .modal-header   { background-color: #263058; border-bottom-color: #3b4f72; }
[data-theme="dark"] .modal-footer   { background-color: #263058; border-top-color: #3b4f72; }
[data-theme="dark"] .modal-body     { background-color: #1f2540; color: #e6eeff; }
[data-theme="dark"] .btn-close      { filter: invert(1) grayscale(1) brightness(1.5); }

/* ── 9. Dropdowns ─────────────────────────────────────────── */
[data-theme="dark"] .dropdown-menu              { background-color: #1f2540; border-color: #3b4f72; }
[data-theme="dark"] .dropdown-item              { color: #d0dcf5; }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus        { background-color: #263058; color: #fff; }
[data-theme="dark"] .dropdown-item i.text-muted { color: #5a7ab0 !important; }
[data-theme="dark"] .dropdown-divider           { border-color: #3b4f72; }

/* ── 10. Nav-tabs ─────────────────────────────────────────── */
[data-theme="dark"] .nav-tabs                   { border-bottom-color: #3b4f72; }
[data-theme="dark"] .nav-tabs .nav-link         { color: #8fb3e8; border-color: transparent; }
[data-theme="dark"] .nav-tabs .nav-link:hover   {
    color: #e6eeff;
    border-color: #3b4f72 #3b4f72 transparent;
    background-color: rgba(255,255,255,.05);
}
[data-theme="dark"] .nav-tabs .nav-link.active  {
    background-color: #1f2540;
    border-color: #3b4f72 #3b4f72 #1f2540;
    color: #e6eeff;
}

/* ── 11. Breadcrumb ───────────────────────────────────────── */
[data-theme="dark"] .breadcrumb-item.active             { color: #8fb3e8; }
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: #5a7ab0; }
[data-theme="dark"] .breadcrumb-item a                  { color: #7db4f8; }

/* ── 12. Alerts ───────────────────────────────────────────── */
[data-theme="dark"] .alert-danger   { background-color: #3a1020; border-color: #8f2030; color: #ffb0ba; }
[data-theme="dark"] .alert-success  { background-color: #0e2c1c; border-color: #1e6040; color: #86efac; }
[data-theme="dark"] .alert-warning  { background-color: #2e2008; border-color: #7a5010; color: #fde68a; }
[data-theme="dark"] .alert-info     { background-color: #0e2038; border-color: #1a4878; color: #93d5ff; }

/* ── 13. Botones ──────────────────────────────────────────── */
[data-theme="dark"] .btn-outline-secondary {
    color: #8fb3e8; border-color: #3b4f72;
}
[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #263058; color: #e6eeff; border-color: #5a7ab0;
}
[data-theme="dark"] .btn-outline-danger  { color: #ff8090; border-color: #ff8090; }
[data-theme="dark"] .btn-outline-danger:hover { background-color: #c0304a; color: #fff; border-color: #c0304a; }
[data-theme="dark"] .btn-outline-warning { color: #fbbf24; border-color: #fbbf24; }
[data-theme="dark"] .btn-outline-warning:hover { background-color: #c08000; color: #fff; border-color: #c08000; }
[data-theme="dark"] .btn-secondary       { background-color: #263058; border-color: #3b4f72; color: #e6eeff; }
[data-theme="dark"] .btn-secondary:hover { background-color: #3b4f72; border-color: #4a62a0; }

/* ── 14. Texto / utilidades ───────────────────────────────── */
[data-theme="dark"] .text-muted           { color: #6a90c0 !important; }
[data-theme="dark"] .text-dark            { color: #e6eeff !important; }
[data-theme="dark"] .text-warning-emphasis { color: #ffd050 !important; }
[data-theme="dark"] small.text-muted,
[data-theme="dark"] .card small           { color: #6a90c0 !important; }

/* ── 15. Bordes ───────────────────────────────────────────── */
[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-end,
[data-theme="dark"] .border-start         { border-color: #3b4f72 !important; }
[data-theme="dark"] .border-warning       { border-color: #a06010 !important; }

/* Contador circular: en dark mode fondo oscuro para que el número claro resalte */
[data-theme="dark"] .badge .badge-count {
    background-color: rgba(0,0,0,0.30);
}

/* ── 16. Badges soft — dark mode ─────────────────────────── */
[data-theme="dark"] .badge.bg-primary   { background-color: rgba(110,168,254,0.15) !important; color: #6ea8fe !important; border-color: #6ea8fe; }
[data-theme="dark"] .badge.bg-secondary { background-color: rgba(173,181,189,0.15) !important; color: #9ba8b5 !important; border-color: #9ba8b5; }
[data-theme="dark"] .badge.bg-success   { background-color: rgba(117,183,152,0.15) !important; color: #75b798 !important; border-color: #75b798; }
[data-theme="dark"] .badge.bg-warning   { background-color: rgba(255,193,7,0.15)   !important; color: #ffc107 !important; border-color: #ffc107; }
[data-theme="dark"] .badge.bg-danger    { background-color: rgba(234,134,143,0.15) !important; color: #ea868f !important; border-color: #ea868f; }
[data-theme="dark"] .badge.bg-info      { background-color: rgba(61,213,243,0.15)  !important; color: #3dd5f3 !important; border-color: #3dd5f3; }
[data-theme="dark"] .badge.bg-dark      { background-color: rgba(222,226,230,0.15) !important; color: #dee2e6 !important; border-color: #dee2e6; }
[data-theme="dark"] .badge.bg-light,
[data-theme="dark"] .badge.bg-white     { background-color: rgba(173,181,189,0.12) !important; color: #adb5bd  !important; border-color: #adb5bd !important; }

/* ── 17. DataTables ───────────────────────────────────────── */
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: #1c2240;
    border-color: #3b4f72;
    color: #e6eeff;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter label,
[data-theme="dark"] .dataTables_wrapper .dataTables_length label {
    color: #8fb3e8;
}
/* Paginación */
[data-theme="dark"] .dataTables_wrapper .pagination .page-link {
    background-color: #1f2540;
    border-color: #3b4f72;
    color: #7db4f8;
}
[data-theme="dark"] .dataTables_wrapper .pagination .page-link:hover {
    background-color: #1c3d6e;
    border-color: #1c3d6e;
    color: #fff;
}
[data-theme="dark"] .dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: #1c3d6e;
    border-color: #1c3d6e;
    color: #fff;
}
[data-theme="dark"] .dataTables_wrapper .pagination .page-item.disabled .page-link {
    background-color: #16192b;
    color: #3b4f72;
    border-color: #3b4f72;
}
/* Scroll head/body — crítico para grillas con scrollY */
[data-theme="dark"] .dataTables_scrollHead          { background-color: #263058 !important; }
[data-theme="dark"] .dataTables_scrollHead table    { background-color: #263058 !important; }
[data-theme="dark"] #tablaOsdepym thead th,
[data-theme="dark"] #tablaOsdepym_wrapper .dataTables_scrollHead thead th {
    background-color: #242d52 !important;
    color: #8fb3e8 !important;
    border-bottom: 1px solid #3b4f72 !important;
}
[data-theme="dark"] .dataTables_scrollBody          { background-color: #1f2540; }
[data-theme="dark"] .dataTables_scrollBody table    { background-color: transparent; }
[data-theme="dark"] .dataTables_scrollBody td,
[data-theme="dark"] .dataTables_scrollBody th       { color: #e6eeff; border-color: #3b4f72; }
[data-theme="dark"] .dataTables_processing          { background-color: #1f2540; color: #e6eeff; }

/* ── 18. Thead fijo ───────────────────────────────────────── */
[data-theme="dark"] .thead-sticky th {
    background-color: #263058;
    border-bottom-color: #4a62a0;
    color: #8fb3e8;
}

/* ── 19. Colores de filas (ControlVersiones) ─────────────── */
[data-theme="dark"] tr.fila-magenta td      { background-color: #3a1650 !important; color: #f0c0ff !important; }
[data-theme="dark"] tr.fila-magenta:hover td { background-color: #481c60 !important; color: #f0c0ff !important; }
[data-theme="dark"] tr.fila-teal td         { background-color: #0c2e2e !important; color: #80e8e4 !important; }
[data-theme="dark"] tr.fila-teal:hover td   { background-color: #103838 !important; color: #80e8e4 !important; }

/* ── 20. Fila vencida (FechaAEntregar < hoy) ─────────────── */
tr.fila-vencida td                           { color: #cc1a1a !important; font-weight: 500; }
[data-theme="dark"] tr.fila-vencida td       { color: #ff7070 !important; font-weight: 500; }

/* ── 21. Chips y textos especiales ───────────────────────── */
[data-theme="dark"] .horas-chip  { background: #1a3560; color: #7db4f8; }
[data-theme="dark"] .texto-largo { background: #161b30; border-color: #3b4f72; color: #e6eeff; }
[data-theme="dark"] .dato-label  { color: #8fb3e8; }
[data-theme="dark"] .dato-valor  { color: #e6eeff; }
[data-theme="dark"] code         { background-color: #161b30; color: #82cfff; padding: 0.1em 0.35em; border-radius: 0.25rem; }

/* ── 22. Timeline ─────────────────────────────────────────── */
[data-theme="dark"] .timeline::before { background: #3b4f72; }
[data-theme="dark"] .timeline-dot     { border-color: #1f2540; }

/* ── 23. Login ────────────────────────────────────────────── */
[data-theme="dark"] .login-wrapper { background: linear-gradient(135deg, #1c3d6e66 0%, #16192b 60%); }
[data-theme="dark"] .login-card    { background-color: #1f2540; border-color: #3b4f72; }

/* ── 24. Flatpickr ────────────────────────────────────────── */
[data-theme="dark"] .flatpickr-calendar {
    background: #1f2540;
    border-color: #3b4f72;
    box-shadow: 0 6px 24px rgba(0,0,0,.7);
    color: #e6eeff;
}
[data-theme="dark"] .flatpickr-months,
[data-theme="dark"] .flatpickr-month            { background: #263058; color: #e6eeff; fill: #e6eeff; }
[data-theme="dark"] .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-next-month       { color: #8fb3e8; fill: #8fb3e8; }
[data-theme="dark"] .flatpickr-prev-month:hover,
[data-theme="dark"] .flatpickr-next-month:hover { fill: #e6eeff; }
[data-theme="dark"] span.flatpickr-weekday,
[data-theme="dark"] .flatpickr-weekday          { background: #263058; color: #8fb3e8; }
[data-theme="dark"] .flatpickr-day              { color: #e6eeff; }
[data-theme="dark"] .flatpickr-day:hover        { background: #3b4f72; border-color: #3b4f72; }
[data-theme="dark"] .flatpickr-day.today        { border-color: #5a7ec0; color: #fff; }
[data-theme="dark"] .flatpickr-day.today:hover  { background: #1c3d6e; border-color: #1c3d6e; }
[data-theme="dark"] .flatpickr-day.inRange      { background: #1c3d6e; border-color: #1c3d6e; box-shadow: -5px 0 0 #1c3d6e, 5px 0 0 #1c3d6e; }
[data-theme="dark"] .flatpickr-day.flatDisabled,
[data-theme="dark"] .flatpickr-day.disabled     { color: #3b4f72; }
[data-theme="dark"] .flatpickr-time input,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm { background: #1f2540; color: #e6eeff; }
[data-theme="dark"] .flatpickr-time input:focus       { background: #263058; }
[data-theme="dark"] .numInputWrapper:hover             { background: #263058; }
[data-theme="dark"] .cur-year                          { color: #e6eeff; }

/* ── 25. Barra inferior — mantiene navy en ambos modos ──── */
/* La barra bottom-bar mantiene su color navy en ambos modos */

/* =========================================================
   Tom Select — dark mode
   ========================================================= */
[data-theme="dark"] .ts-control,
[data-theme="dark"] .ts-wrapper.single .ts-control {
    background-color: #1c2240;
    border-color: #3b4f72;
    color: #e6eeff;
}
[data-theme="dark"] .ts-control input::placeholder { color: #4a6090; }
[data-theme="dark"] .ts-dropdown {
    background-color: #1f2540;
    border-color: #3b4f72;
    color: #e6eeff;
}
[data-theme="dark"] .ts-dropdown .option { color: #d0dcf5; }
[data-theme="dark"] .ts-dropdown .option:hover,
[data-theme="dark"] .ts-dropdown .option.active {
    background-color: #263058;
    color: #ffffff;
}
[data-theme="dark"] .ts-dropdown .selected { background-color: #1c3d6e; color: #fff; }
[data-theme="dark"] .ts-wrapper.plugin-remove_button .item { background: #263058; color: #e6eeff; border-color: #3b4f72; }
[data-theme="dark"] .ts-wrapper .ts-control .item { background: #263058; color: #e6eeff; border-color: #3b4f72; }