/* ============================================================ Contratos — Modo oscuro (data-theme="dark" en ) Misma mecánica que SOTs. Cargar después de contratos.css ============================================================ */ html[data-theme="dark"] { color-scheme: dark; --wl-heading: #e2e8f0; --wl-primary: #0a2240; --wl-primary-l: #0e3060; --wl-accent: #38bdf8; --wl-accent-dark: #0ea5e9; --wl-bg: #0b1220; --wl-card: #161f30; --wl-text: #e2e8f0; --wl-muted: #94a3b8; --wl-border: #2d3a4f; --wl-input-bg: #1a2438; --wl-table-head: #1a2438; --wl-table-hover: #1e2d45; --wl-surface: #121a28; } /* Barra superior: siempre azul marino */ .contratos-nav { background: #0a2240 !important; } .sots-theme-toggle { color: rgba(255, 255, 255, 0.75); background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.95rem; transition: color 0.15s, background 0.15s, border-color 0.15s; flex-shrink: 0; padding: 0; } .sots-theme-toggle:hover { color: #fff; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); } .contratos-theme-float { position: fixed; top: 16px; right: 16px; z-index: 50; } .contratos-theme-float .sots-theme-toggle { width: 40px; height: 40px; background: rgba(10, 34, 64, 0.55); border-color: rgba(255, 255, 255, 0.25); color: #fff; backdrop-filter: blur(6px); } html[data-theme="dark"] body { background: var(--wl-bg) !important; color: var(--wl-text) !important; } /* ── Cards / superficies ───────────────────────────────────── */ html[data-theme="dark"] .doc-card, html[data-theme="dark"] .card, html[data-theme="dark"] .pf-section, html[data-theme="dark"] .personal-toolbar, html[data-theme="dark"] .table-card, html[data-theme="dark"] .admin-card { background: var(--wl-card) !important; border-color: var(--wl-border) !important; color: var(--wl-text); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important; } /* KPI personal: conservar colores de acento */ html[data-theme="dark"] .personal-metric-card { background: var(--wl-card) !important; border-color: var(--wl-border) !important; border-left-width: 3px !important; border-left-style: solid !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important; color: var(--wl-text); } html[data-theme="dark"] .personal-metric-label { color: var(--wl-muted) !important; } html[data-theme="dark"] .personal-ui-v2 .personal-metric-card:nth-child(1) { border-left-color: #38bdf8 !important; background: linear-gradient(135deg, rgba(24, 95, 165, 0.22), var(--wl-card) 70%) !important; } html[data-theme="dark"] .personal-ui-v2 .personal-metric-card:nth-child(1) .personal-metric-value { color: #38bdf8 !important; } html[data-theme="dark"] .personal-ui-v2 .personal-metric-card:nth-child(2) { border-left-color: #34d399 !important; background: linear-gradient(135deg, rgba(10, 92, 72, 0.28), var(--wl-card) 70%) !important; } html[data-theme="dark"] .personal-ui-v2 .personal-metric-card:nth-child(2) .personal-metric-value { color: #34d399 !important; } html[data-theme="dark"] .personal-ui-v2 .personal-metric-card:nth-child(3) { border-left-color: #fbbf24 !important; background: linear-gradient(135deg, rgba(133, 79, 11, 0.28), var(--wl-card) 70%) !important; } html[data-theme="dark"] .personal-ui-v2 .personal-metric-card:nth-child(3) .personal-metric-value { color: #fbbf24 !important; } html[data-theme="dark"] .personal-ui-v2 .personal-metric-card:nth-child(4) { border-left-color: #7dd3fc !important; background: linear-gradient(135deg, rgba(2, 132, 199, 0.25), var(--wl-card) 70%) !important; } html[data-theme="dark"] .personal-ui-v2 .personal-metric-card:nth-child(4) .personal-metric-value { color: #7dd3fc !important; } html[data-theme="dark"] .personal-ui-v2 .personal-metric-card:nth-child(5) { border-left-color: #fb923c !important; background: linear-gradient(135deg, rgba(217, 119, 6, 0.25), var(--wl-card) 70%) !important; } html[data-theme="dark"] .personal-ui-v2 .personal-metric-card:nth-child(5) .personal-metric-value { color: #fb923c !important; } html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer, html[data-theme="dark"] .personal-listado-card-header, html[data-theme="dark"] .personal-pager-wrap { background: var(--wl-surface) !important; border-color: var(--wl-border) !important; color: var(--wl-text); } html[data-theme="dark"] .card-body, html[data-theme="dark"] .bg-light, html[data-theme="dark"] .thead-light th { background: var(--wl-card) !important; color: var(--wl-text) !important; border-color: var(--wl-border) !important; } /* ── Tipografía ────────────────────────────────────────────── */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .personal-listado-title, html[data-theme="dark"] .page-header h1 { color: var(--wl-heading); } html[data-theme="dark"] .text-muted, html[data-theme="dark"] small, html[data-theme="dark"] .personal-persona-dni { color: var(--wl-muted) !important; } html[data-theme="dark"] .personal-persona-name, html[data-theme="dark"] .personal-vigencia-txt, html[data-theme="dark"] .personal-sede-txt, html[data-theme="dark"] #personal-table .col-sede, html[data-theme="dark"] #personal-table .col-sede small { color: #ffffff !important; } /* ── Formularios ───────────────────────────────────────────── */ html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] .form-control, html[data-theme="dark"] .custom-select { background: var(--wl-input-bg) !important; color: var(--wl-text) !important; border-color: var(--wl-border) !important; } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { border-color: var(--wl-accent) !important; box-shadow: 0 0 0 0.15rem rgba(56, 189, 248, 0.2) !important; background: var(--wl-input-bg) !important; color: var(--wl-text) !important; } html[data-theme="dark"] .input-group-text { background: #1e2d45 !important; border-color: var(--wl-border) !important; color: var(--wl-text) !important; } html[data-theme="dark"] .pf-group label, html[data-theme="dark"] label { color: #cbd5e1 !important; } html[data-theme="dark"] .pf-switch { background: var(--wl-surface) !important; border-color: var(--wl-border) !important; } html[data-theme="dark"] .pf-section-header { background: linear-gradient(180deg, #1a2438, #152033) !important; border-color: var(--wl-border) !important; color: var(--wl-heading) !important; } /* Select2 (default + bootstrap4) — buscador toolbar */ html[data-theme="dark"] .select2-container--default .select2-selection--single, html[data-theme="dark"] .select2-container--bootstrap4 .select2-selection--single, html[data-theme="dark"] .select2-container--default .select2-selection--multiple, html[data-theme="dark"] .select2-container--bootstrap4 .select2-selection--multiple, html[data-theme="dark"] .select2-dropdown { background: var(--wl-input-bg) !important; border-color: var(--wl-border) !important; color: var(--wl-text) !important; } html[data-theme="dark"] .ptool-search > input#buscarPersonal { background: var(--wl-input-bg) !important; border-color: var(--wl-border) !important; color: var(--wl-text) !important; } html[data-theme="dark"] .ptool-search > input#buscarPersonal::placeholder { color: #94a3b8 !important; } html[data-theme="dark"] .select2-container--default .select2-selection__rendered, html[data-theme="dark"] .select2-container--bootstrap4 .select2-selection__rendered, html[data-theme="dark"] .select2-results__option { color: var(--wl-text) !important; } html[data-theme="dark"] .select2-container--default .select2-selection__placeholder, html[data-theme="dark"] .select2-container--bootstrap4 .select2-selection__placeholder { color: #94a3b8 !important; } html[data-theme="dark"] .select2-container--default .select2-selection__arrow b, html[data-theme="dark"] .select2-container--bootstrap4 .select2-selection__arrow b { border-color: #94a3b8 transparent transparent transparent !important; } html[data-theme="dark"] .ptool-search > i.fa-search { color: #94a3b8 !important; } html[data-theme="dark"] .ptool-item label { color: #e2e8f0 !important; } html[data-theme="dark"] .select2-results__option--highlighted, html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected], html[data-theme="dark"] .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] { background: #1e3a5f !important; color: #fff !important; } html[data-theme="dark"] .select2-search--dropdown .select2-search__field { background: var(--wl-surface) !important; border-color: var(--wl-border) !important; color: var(--wl-text) !important; } html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true], html[data-theme="dark"] .select2-container--bootstrap4 .select2-results__option[aria-selected=true] { background: #152238 !important; } /* ── Tablas ────────────────────────────────────────────────── */ html[data-theme="dark"] .table, html[data-theme="dark"] #personal-table, html[data-theme="dark"] .table-hover { color: var(--wl-text) !important; } html[data-theme="dark"] .table thead th, html[data-theme="dark"] #personal-table thead th, html[data-theme="dark"] .thead-light th { background: var(--wl-table-head) !important; color: var(--wl-muted) !important; border-color: var(--wl-border) !important; } html[data-theme="dark"] .table td, html[data-theme="dark"] #personal-table td { border-color: var(--wl-border) !important; background: transparent; } html[data-theme="dark"] .table-hover tbody tr:hover, html[data-theme="dark"] #personal-table.table-hover tbody tr:hover, html[data-theme="dark"] #personal-table tbody tr:hover { background: transparent !important; background-color: transparent !important; } html[data-theme="dark"] #personal-table tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, 0.02) !important; } html[data-theme="dark"] #personal-table tbody tr:nth-child(even) td { background: transparent !important; } html[data-theme="dark"] #personal-table tbody tr:hover td, html[data-theme="dark"] .personal-ui-v2 #personal-table tbody tr:hover td { background: #1e2d45 !important; background-color: #1e2d45 !important; } html[data-theme="dark"] #personal-table tbody tr.personal-row-selected td, html[data-theme="dark"] .personal-ui-v2 #personal-table tbody tr.personal-row-selected td { background: rgba(56, 189, 248, 0.14) !important; } html[data-theme="dark"] #personal-table tbody tr.personal-row-selected:hover td, html[data-theme="dark"] .personal-ui-v2 #personal-table tbody tr.personal-row-selected:hover td { background: rgba(56, 189, 248, 0.22) !important; } html[data-theme="dark"] .personal-ui-v2 #personal-table tbody td { transition: background-color 0.12s ease; } html[data-theme="dark"] #personal-table .col-dni .personal-persona-name { color: var(--wl-text) !important; background: transparent !important; } html[data-theme="dark"] code { color: #7dd3fc; background: rgba(56, 189, 248, 0.1); } /* ── Toolbar personal ──────────────────────────────────────── */ html[data-theme="dark"] .personal-ui-v2 .personal-toolbar { background: var(--wl-card) !important; border-color: var(--wl-border) !important; } html[data-theme="dark"] .ptool-btn-ghost { background: var(--wl-input-bg) !important; color: var(--wl-text) !important; border-color: var(--wl-border) !important; } html[data-theme="dark"] .ptool-btn-ghost:hover:not([disabled]) { background: var(--wl-table-hover) !important; } html[data-theme="dark"] .ptool-sel-info { color: var(--wl-muted); } /* Acciones dropdown */ html[data-theme="dark"] .btn-personal-acciones-toggle { background: var(--wl-input-bg) !important; border-color: var(--wl-border) !important; color: var(--wl-text) !important; } html[data-theme="dark"] .personal-acciones-wrap.is-open .btn-personal-acciones-toggle, html[data-theme="dark"] .btn-personal-acciones-toggle:hover { border-color: var(--wl-accent) !important; background: rgba(56, 189, 248, 0.1) !important; color: #7dd3fc !important; } html[data-theme="dark"] .personal-acciones-pop { background: var(--wl-card) !important; border-color: var(--wl-border) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5) !important; } html[data-theme="dark"] .personal-acciones-item { color: var(--wl-text) !important; } html[data-theme="dark"] .personal-acciones-item:hover { background: var(--wl-table-hover) !important; } html[data-theme="dark"] .personal-acciones-sep { background: var(--wl-border) !important; } /* Status pills */ html[data-theme="dark"] .personal-status-pill--activo { background: rgba(0, 184, 148, 0.15); color: #5eead4; } html[data-theme="dark"] .personal-status-pill--inactivo { background: rgba(243, 156, 18, 0.15); color: #fbbf24; } /* ── Modales ───────────────────────────────────────────────── */ html[data-theme="dark"] #modalPersonalFicha .modal-content, html[data-theme="dark"] #modalPersonalHistorial .modal-content, html[data-theme="dark"] #modalGenerarFirma .modal-content, html[data-theme="dark"] #modalPersonalMasa .modal-content, html[data-theme="dark"] .modal-content { background: var(--wl-bg) !important; color: var(--wl-text) !important; } html[data-theme="dark"] #modalPersonalFicha .pficha-body, html[data-theme="dark"] #modalPersonalFicha .pficha-footer, html[data-theme="dark"] #modalPersonalFicha .pficha-section, html[data-theme="dark"] #modalPersonalFicha .pf-section { background: var(--wl-card) !important; border-color: var(--wl-border) !important; color: var(--wl-text); } html[data-theme="dark"] #modalPersonalFicha .pficha-field label { color: var(--wl-muted) !important; } html[data-theme="dark"] #modalPersonalFicha .pficha-field .val { color: var(--wl-text) !important; } html[data-theme="dark"] #modalPersonalFicha .pficha-section h6 { color: var(--wl-heading) !important; } html[data-theme="dark"] #modalPersonalFicha .btn-pf-cancelar { background: var(--wl-input-bg) !important; border-color: var(--wl-border) !important; color: var(--wl-text) !important; } html[data-theme="dark"] .modal-backdrop.show { opacity: 0.7; } /* ── Alertas / badges Bootstrap ────────────────────────────── */ html[data-theme="dark"] .alert-success { background: rgba(0, 184, 148, 0.15) !important; color: #5eead4 !important; } html[data-theme="dark"] .alert-danger { background: rgba(231, 76, 60, 0.15) !important; color: #fca5a5 !important; } html[data-theme="dark"] .alert-info { background: rgba(56, 189, 248, 0.12) !important; color: #7dd3fc !important; } html[data-theme="dark"] .alert-warning { background: rgba(243, 156, 18, 0.15) !important; color: #fbbf24 !important; } html[data-theme="dark"] .badge-info { background: rgba(56, 189, 248, 0.2) !important; color: #7dd3fc !important; } html[data-theme="dark"] .badge-warning { background: rgba(243, 156, 18, 0.2) !important; color: #fbbf24 !important; } html[data-theme="dark"] .badge-success { background: rgba(0, 184, 148, 0.2) !important; color: #5eead4 !important; } html[data-theme="dark"] .badge-secondary { background: rgba(148, 163, 184, 0.2) !important; color: #cbd5e1 !important; } /* ── Botones outline / secundarios ─────────────────────────── */ html[data-theme="dark"] .btn-outline-secondary, html[data-theme="dark"] .btn-outline-primary, html[data-theme="dark"] .btn-wl-import { background: var(--wl-input-bg) !important; border-color: var(--wl-border) !important; color: var(--wl-text) !important; } html[data-theme="dark"] .btn-outline-secondary:hover, html[data-theme="dark"] .btn-outline-primary:hover { background: var(--wl-table-hover) !important; color: #fff !important; } /* ── Login ─────────────────────────────────────────────────── */ html[data-theme="dark"] .login-card { background: rgba(22, 31, 48, 0.85) !important; border-color: var(--wl-border) !important; } /* ── Misc admin ────────────────────────────────────────────── */ html[data-theme="dark"] .contratos-main, html[data-theme="dark"] .contratos-personal-wrap { color: var(--wl-text); } html[data-theme="dark"] hr, html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom { border-color: var(--wl-border) !important; } html[data-theme="dark"] .dropdown-menu { background: var(--wl-card) !important; border-color: var(--wl-border) !important; } html[data-theme="dark"] .dropdown-item { color: var(--wl-text) !important; } html[data-theme="dark"] .dropdown-item:hover { background: var(--wl-table-hover) !important; } html[data-theme="dark"] .empty-state h4 { color: var(--wl-heading); } /* ── Planilla / admin extras ───────────────────────────────── */ html[data-theme="dark"] .tabs { border-bottom-color: var(--wl-border) !important; } html[data-theme="dark"] .tab-btn { color: var(--wl-muted) !important; } html[data-theme="dark"] .tab-btn.active, html[data-theme="dark"] .tab-btn:hover { color: var(--wl-heading) !important; } html[data-theme="dark"] .audit-table th { background: var(--wl-table-head) !important; color: var(--wl-muted) !important; } html[data-theme="dark"] .audit-table td { border-bottom-color: var(--wl-border) !important; color: var(--wl-text) !important; } html[data-theme="dark"] .audit-table tr:hover td { background: var(--wl-table-hover) !important; } html[data-theme="dark"] .planilla-wrap, html[data-theme="dark"] .pl-card, html[data-theme="dark"] .pl-toolbar, html[data-theme="dark"] .pl-scroll-mirror-wrap { background: var(--wl-card) !important; border-color: var(--wl-border) !important; color: var(--wl-text); } html[data-theme="dark"] .pl-scroll-mirror-wrap { background: var(--wl-surface) !important; } /* Page headers con colores fijos claros: mantener contraste de texto blanco */ html[data-theme="dark"] .page-header p { color: rgba(255, 255, 255, 0.82) !important; }