/*
 * Capa de overrides para el modo noche. Ver docs/rediseno-ui-dark-mode-plan.md
 * para la decisión de arquitectura (por qué esta capa aditiva y no reescribir
 * Style.css/Estilo.css in-place) y el checklist de lo cubierto/pendiente.
 *
 * Regla del archivo: TODO acá va scopeado bajo [data-theme="dark"]. Nunca se
 * toca el CSS existente (modo día) desde este archivo.
 *
 * El sidebar (#354151, simple-sidebar.css) y el navbar superior
 * (.background-alpha, #446ef0) ya son oscuros en modo día por diseño de
 * marca y NO se tocan acá — este archivo cubre el área de contenido.
 */

/* ---------- Fondo general del área de contenido ---------- */
[data-theme="dark"] body,
[data-theme="dark"] .bg-white,
[data-theme="dark"] #wrapper-content {
    background-color: var(--pw-page-bg) !important;
    color: var(--pw-text);
}

[data-theme="dark"] .color-alpha,
[data-theme="dark"] dl,
[data-theme="dark"] #soporte {
    color: var(--pw-text);
}

/* ---------- Tarjetas / paneles ---------- */
[data-theme="dark"] .card,
[data-theme="dark"] .tablaBlanca {
    background-color: var(--pw-surface);
    color: var(--pw-text);
    border-color: var(--pw-border);
}

[data-theme="dark"] .fieldset,
[data-theme="dark"] fieldset.fieldset {
    border-color: var(--pw-border);
}

/* ---------- Tablas ---------- */
[data-theme="dark"] .table {
    background-color: var(--pw-surface-alt);
    color: var(--pw-text);
}
[data-theme="dark"] .table thead th {
    background-color: var(--pw-surface-alt);
    color: var(--pw-text);
    border-bottom-color: var(--pw-border);
}
[data-theme="dark"] .table tbody tr {
    background-color: var(--pw-surface);
    color: var(--pw-text);
}
[data-theme="dark"] .table tbody tr:hover {
    background-color: var(--pw-surface-alt);
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    border-color: var(--pw-border);
}

/* ---------- Modales y dropdowns (Bootstrap) ---------- */
[data-theme="dark"] .modal-content {
    background-color: var(--pw-surface);
    color: var(--pw-text);
}
[data-theme="dark"] .dropdown-menu:not(.dropdown-menu-dark) {
    background-color: var(--pw-surface);
    color: var(--pw-text);
    border-color: var(--pw-border);
}
[data-theme="dark"] .dropdown-menu:not(.dropdown-menu-dark) .dropdown-item {
    color: var(--pw-text);
}
[data-theme="dark"] .dropdown-menu:not(.dropdown-menu-dark) .dropdown-item:hover,
[data-theme="dark"] .dropdown-menu:not(.dropdown-menu-dark) .dropdown-item:focus {
    background-color: var(--pw-surface-alt);
    color: var(--pw-text);
}
[data-theme="dark"] .dropdown-divider {
    border-color: var(--pw-border);
}

/* ---------- Formularios ---------- */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--pw-surface-alt);
    color: var(--pw-text);
    border-color: var(--pw-border);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--pw-surface-alt);
    color: var(--pw-text);
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
    background-color: var(--pw-border) !important;
    color: var(--pw-text);
}
[data-theme="dark"] label {
    color: var(--pw-text);
}

/* ---------- Badges y alertas (Bootstrap) ---------- */
[data-theme="dark"] .alert-warning {
    background-color: #4A3B14;
    color: #F4E7C1;
    border-color: #6B5A22;
}
[data-theme="dark"] .alert-danger {
    background-color: #4A1B21;
    color: #F5C6CB;
    border-color: #6B2A32;
}
[data-theme="dark"] .alert-success {
    background-color: #16351F;
    color: #C3E6CB;
    border-color: #234D2E;
}
[data-theme="dark"] .alert-info {
    background-color: #123A4A;
    color: #BEE5EB;
    border-color: #1D5A70;
}
/* .bg-info (26 vistas): mismo patrón de caja "IMPORTANTE" que .alert-info,
   pero armado a mano con un <div class="bg-info col-...">/<h4> en vez del
   componente .alert -- mismo tratamiento de color. */
[data-theme="dark"] .bg-info {
    background-color: #123A4A;
    color: #BEE5EB;
}

/* ---------- Estilo.css: cajas con fondo claro fijo (auditoría sesión 2) ---------- */
[data-theme="dark"] .contenedorComentario {
    background-color: var(--pw-surface);
    color: var(--pw-text);
    box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, .3);
}
[data-theme="dark"] .contenedorComentario:after {
    border-color: var(--pw-surface) transparent;
}
[data-theme="dark"] .contenedorPlomo {
    background-color: var(--pw-surface-alt);
    border-color: var(--pw-border);
}
[data-theme="dark"] .itemTema {
    background-color: var(--pw-surface);
    color: var(--pw-text);
}
[data-theme="dark"] .tablaDetalles,
[data-theme="dark"] .tablaDinamica {
    background-color: var(--pw-surface);
}
[data-theme="dark"] .StepsContainer {
    background-color: var(--pw-surface-alt);
}
[data-theme="dark"] .loadingBackground {
    background-color: var(--pw-surface-alt) !important;
}
[data-theme="dark"] .theadTablePrevisualizador > tr {
    background-color: var(--pw-surface-alt);
}
[data-theme="dark"] .ContenedorAnexoListar {
    background-color: var(--pw-surface-alt);
}

/* ---------- Estilo.css: texto oscuro fijo sin contraste sobre fondo oscuro ---------- */
[data-theme="dark"] #ContenedorFormulaCRUD {
    color: var(--pw-text);
}
[data-theme="dark"] .textoRojo,
[data-theme="dark"] .RCHEstadoDTE {
    color: #E57373;
}

/* ---------- Marca de agua de logo en _PwHomeCard (.pw-home-card--logo) ---------- */
[data-theme="dark"] .pw-home-card--logo::before {
    opacity: .13;
}

/* ---------- Select2 (selector "Empresa Activa" del sidebar, #cboCambiarEmpresa) ----------
   Es un plugin jQuery que arma su propio DOM (select2-selection, select2-dropdown,
   etc.), no un <select> nativo -- por eso [data-theme="dark"] .form-select de
   arriba no lo cubre. El estilo base (fondo blanco, texto azul) vive hardcodeado
   en el <style> inline de _LayoutV4.cshtml (".select2-container--default...");
   acá solo se agrega la capa oscura, sin tocar ese bloque. */
[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--pw-surface-alt);
    border-color: var(--pw-border);
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--pw-muted) transparent transparent transparent;
}
[data-theme="dark"] .select2-dropdown {
    background-color: var(--pw-surface);
    border-color: var(--pw-border);
}
[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: var(--pw-surface-alt);
    color: var(--pw-text);
    border-color: var(--pw-border);
}
[data-theme="dark"] .select2-container--default .select2-results__option {
    color: var(--pw-text);
}
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--pw-secondary);
    color: var(--pw-secondary-fg);
}

/* ---------- Selectize (ej. "Jefe Directo" en Fichas/Form.cshtml, 23 vistas) ----------
   Igual que Select2: un plugin jQuery con su propio DOM (.selectize-control,
   .selectize-input, .selectize-dropdown), no un <select> nativo -- por eso
   [data-theme="dark"] .form-control/.form-select no lo cubre. */
[data-theme="dark"] .selectize-control .selectize-input {
    background-color: var(--pw-surface-alt);
    color: var(--pw-text);
    border-color: var(--pw-border);
}
[data-theme="dark"] .selectize-input,
[data-theme="dark"] .selectize-input input {
    color: var(--pw-text);
}
[data-theme="dark"] .selectize-input.full {
    background-color: var(--pw-surface-alt);
}
[data-theme="dark"] .selectize-input.disabled,
[data-theme="dark"] .selectize-input.disabled * {
    background-color: var(--pw-border);
    color: var(--pw-muted);
}
[data-theme="dark"] .selectize-dropdown,
[data-theme="dark"] .selectize-dropdown.form-control {
    background-color: var(--pw-surface);
    color: var(--pw-text);
    border-color: var(--pw-border);
}
[data-theme="dark"] .selectize-dropdown-content .option,
[data-theme="dark"] .selectize-dropdown [data-selectable] {
    color: var(--pw-text);
}
[data-theme="dark"] .selectize-dropdown .active {
    background-color: var(--pw-surface-alt);
    color: var(--pw-text);
}
[data-theme="dark"] .selectize-control.single .selectize-input:after {
    border-color: var(--pw-muted) transparent transparent transparent;
}
[data-theme="dark"] .selectize-control.single .selectize-input.dropdown-active:after {
    border-color: transparent transparent var(--pw-muted) transparent;
}
[data-theme="dark"] .selectize-control.multi .selectize-input > div {
    background-color: var(--pw-surface-alt);
    color: var(--pw-text);
    border-color: var(--pw-border);
}

/* ---------- Pestañas Bootstrap (.nav-tabs, ej. Fichas/Form.cshtml) ----------
   Sin esto, en modo noche las pestañas inactivas quedan con el mismo tono
   oscuro del fondo y no se distinguen entre sí ni de la pestaña activa. */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--pw-border);
}
[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--pw-muted);
    border-color: transparent;
    background-color: transparent;
}
[data-theme="dark"] .nav-tabs .nav-link:hover {
    color: var(--pw-text);
    border-color: var(--pw-border) var(--pw-border) transparent;
    isolation: isolate;
}
[data-theme="dark"] .nav-tabs .nav-link.active,
[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
    color: var(--pw-secondary);
    background-color: var(--pw-surface);
    border-color: var(--pw-border) var(--pw-border) var(--pw-surface);
}

/* ---------- Select2 en modo múltiple (ej. "Seleccione una Ficha/Contrato"
   en Shared/_FILTRO_FICHA.cshtml -- partial reusado en LRE, NominaPago/*,
   Previred, InformeF30-1, Digitacion, etc.) ----------
   La sesión previa (2026-08-25) solo cubrió select2-selection--single: el
   modo --multiple tiene un DOM completamente distinto (selection__choice
   por cada tag seleccionado) y quedó con el fondo blanco fijo del plugin,
   la causa real de las vistas "muy blancas" reportadas por Jose. */
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--pw-surface-alt);
    border-color: var(--pw-border);
}
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--pw-surface);
    border-color: var(--pw-border);
    color: var(--pw-text);
}
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--pw-muted);
}
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--pw-error);
}
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: var(--pw-muted);
}
[data-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field {
    color: var(--pw-text);
}
[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--pw-border);
}

/* ---------- Acordeón Bootstrap (cajas "IMPORTANTE", ~70 vistas) ----------
   Bootstrap 5.0.2 no expone estas reglas como custom properties (recién se
   agregaron en 5.2), así que hay que pisar cada declaración a mano en vez
   de redefinir variables --bs-accordion-*. Incluye el ícono chevron, que
   es un SVG embebido con el fill codificado en la URL -- no puede tomar
   var(), se hardcodea el hex equivalente a --pw-text/--pw-secondary. */
[data-theme="dark"] .accordion-item {
    background-color: var(--pw-surface);
    border-color: var(--pw-border);
}
[data-theme="dark"] .accordion-button {
    color: var(--pw-text);
    background-color: var(--pw-surface);
}
[data-theme="dark"] .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E5E9F0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
    color: var(--pw-secondary);
    background-color: var(--pw-surface-alt);
    box-shadow: inset 0 -1px 0 var(--pw-border);
}
[data-theme="dark"] .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23446EEE'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
[data-theme="dark"] .accordion-button:focus {
    border-color: var(--pw-secondary);
    box-shadow: 0 0 0 .2rem rgba(68, 110, 238, .25);
}

/* ---------- Fondo claro fijo inline en .tab-content (19 vistas: LRE,
   NominaPago/*, Previred/Index, InformeF30, Contratos/_CONTRATO_DETALLE,
   etc.) ----------
   El fondo viene de style="background: #fcfcfc" escrito directo en el
   markup de cada vista, no de una clase -- hace falta !important para
   ganarle a un inline style regular sin tener que tocar los 19 archivos. */
[data-theme="dark"] .tab-content {
    background-color: var(--pw-page-bg) !important;
}

/* ---------- Íconos de acción de fila casi invisibles (_PwTableActions.cshtml) ----------
   El estado idle usa var(--pw-base) (#0A2542, navy oscuro pensado para
   fondo claro) -- sobre --pw-surface oscuro casi no hay contraste ("el
   icono de editar no se ve", reportado por Jose). Se resuelve acá, scopeado
   al componente, en vez de redefinir --pw-base global (ese token también
   se usa como fondo sólido de .pw-btn--base, donde sí funciona en oscuro). */
[data-theme="dark"] .pw-table-actions a {
    color: var(--pw-muted);
}

/* ---------- bootstrap4-toggle (switches tipo pill, ej. "Ascendente" en
   Shared/_FILTRO_FICHA.cshtml y "Sin Goce de Sueldo"/"Solicitud de Días"
   en DiasGoceSueldo/Form.cshtml -- 8 vistas) ----------
   El estado "off" usa por defecto data-offstyle="light" (Bootstrap
   .btn-light: fondo casi blanco, texto negro). No hay otro uso real de
   .btn-light en el proyecto fuera de este plugin (verificado por grep),
   así que se pisa directo sin arriesgar otros componentes. */
[data-theme="dark"] .toggle.btn-light,
[data-theme="dark"] .toggle-off.btn-light,
[data-theme="dark"] .toggle-handle.btn-light {
    background-color: var(--pw-surface-alt);
    color: var(--pw-text);
    border-color: var(--pw-border);
}

/* ---------- TinyMCE 4 (editor "lightgray" skin, ~13 vistas con tinymce.init()) ----------
   Solo se distribuye el skin "lightgray" (blanco fijo), no hay un skin oscuro instalado.
   El chrome del editor (toolbar, menús, status bar) vive en el DOM de la página normal y
   se puede pisar acá con un solo bloque. El área de texto en sí vive en un <iframe> aparte
   (documento propio) y no es alcanzable por este CSS -- ese lado se resuelve por instancia
   con la opción `content_style` agregada directo en cada tinymce.init(). */
[data-theme="dark"] .mce-tinymce,
[data-theme="dark"] .mce-panel,
[data-theme="dark"] .mce-toolbar-grp,
[data-theme="dark"] .mce-statusbar,
[data-theme="dark"] .mce-floatpanel {
    background-color: var(--pw-surface) !important;
    border-color: var(--pw-border) !important;
}
[data-theme="dark"] .mce-btn {
    background: transparent !important;
    border-color: transparent !important;
}
[data-theme="dark"] .mce-btn:hover,
[data-theme="dark"] .mce-btn.mce-active {
    background-color: var(--pw-surface-alt) !important;
    border-color: var(--pw-border) !important;
}
[data-theme="dark"] .mce-ico,
[data-theme="dark"] .mce-txt,
[data-theme="dark"] .mce-path-item,
[data-theme="dark"] .mce-menu-item .mce-text,
[data-theme="dark"] .mce-menu-item .mce-ico {
    color: var(--pw-text) !important;
}
[data-theme="dark"] .mce-menu-item:hover,
[data-theme="dark"] .mce-menu-item.mce-selected {
    background-color: var(--pw-surface-alt) !important;
}
[data-theme="dark"] .mce-menu-item-separator {
    border-color: var(--pw-border) !important;
}
[data-theme="dark"] .mce-caret {
    border-top-color: var(--pw-text) !important;
}
[data-theme="dark"] .mce-textbox {
    background-color: var(--pw-surface-alt) !important;
    color: var(--pw-text) !important;
    border-color: var(--pw-border) !important;
}

/* ---------- Scrollbar (coherencia visual, ver .laretalShadow en Style.css) ---------- */
[data-theme="dark"] .laretalShadow::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .18);
}
[data-theme="dark"] .laretalShadow::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .3);
}