/* =========================================================================
   Modo oscuro — se activa con la clase .theme-dark en <html>.
   El modo claro (sin la clase) queda intacto. Ver views/layouts/header.php
   (botón + toggle) y views/layouts/main.php (script anti-parpadeo).
   ========================================================================= */

html.theme-dark {
  --dk-bg:        #1b1f24;  /* fondo de página */
  --dk-surface:   #22272e;  /* cards, header, sidebar */
  --dk-surface-2: #2d333b;  /* hover, encabezados de tabla */
  --dk-inset:     #0d1117;  /* inputs */
  --dk-border:    #30363d;
  --dk-border-2:  #444c56;
  --dk-text:      #c9d1d9;
  --dk-muted:     #8b949e;
  --dk-link:      #58a6ff;
  --dk-accent:    #388bfd;
}

/* ---- base ---- */
html.theme-dark,
html.theme-dark body {
  background: var(--dk-bg);
  color: var(--dk-text);
}
html.theme-dark .wrapper,
html.theme-dark .content-wrapper,
html.theme-dark .content-wrapper > .content,
html.theme-dark .right-side {
  background: var(--dk-bg);
  color: var(--dk-text);
}
html.theme-dark a:not(.btn):not([class*="bg-"])        { color: var(--dk-link); }
html.theme-dark a:not(.btn):not([class*="bg-"]):hover,
html.theme-dark a:not(.btn):not([class*="bg-"]):focus  { color: #79c0ff; }
html.theme-dark hr       { border-top-color: var(--dk-border); }
html.theme-dark .text-muted,
html.theme-dark small,
html.theme-dark .help-block { color: var(--dk-muted); }
html.theme-dark code {
  background: var(--dk-inset);
  color: #ff7b72;
}

/* ---- header ---- */
html.theme-dark .main-header .navbar,
html.theme-dark .main-header > .logo {
  background-color: var(--dk-surface) !important;
  color: var(--dk-text);
}
html.theme-dark .main-header > .logo {
  border-bottom: 1px solid var(--dk-border);
}
html.theme-dark .main-header .navbar .nav > li > a,
html.theme-dark .main-header .navbar .sidebar-toggle {
  color: var(--dk-text) !important;
}
html.theme-dark .main-header .navbar .nav > li > a:hover,
html.theme-dark .main-header .navbar .nav > li.open > a,
html.theme-dark .main-header .navbar .sidebar-toggle:hover {
  background: var(--dk-surface-2) !important;
}
html.theme-dark .main-header .navbar .nav .open > .dropdown-menu {
  background: var(--dk-surface-2) !important;
  border-color: var(--dk-border-2) !important;
}

/* ---- sidebar ---- */
html.theme-dark .main-sidebar,
html.theme-dark .left-side {
  background: var(--dk-surface);
}
html.theme-dark .sidebar-menu > li > a {
  color: var(--dk-text);
  border-left-color: transparent;
}
html.theme-dark .sidebar-menu > li:hover > a,
html.theme-dark .sidebar-menu > li.active > a,
html.theme-dark .sidebar-menu > li.menu-open > a {
  background: var(--dk-surface-2);
  color: #fff;
}
html.theme-dark .sidebar-menu .treeview-menu {
  background: #1c2128;
}
html.theme-dark .sidebar-menu .treeview-menu > li > a {
  color: #adbac7;
}
html.theme-dark .sidebar-menu .treeview-menu > li.active > a,
html.theme-dark .sidebar-menu .treeview-menu > li > a:hover {
  color: #fff;
  background: var(--dk-surface-2);
}
html.theme-dark .sidebar-form,
html.theme-dark #sidebar-search-input {
  background: var(--dk-inset) !important;
  border-color: var(--dk-border) !important;
  color: var(--dk-text) !important;
}
html.theme-dark #sidebar-search-input::placeholder { color: var(--dk-muted); }
html.theme-dark .sidebar-menu.tree.sidebar-searching li.sidebar-search-hit > a {
  background: rgba(56,139,253,.18);
}

/* ---- content header / breadcrumb ---- */
html.theme-dark .content-header > h1,
html.theme-dark .content-header > h1 > small { color: var(--dk-text); }
html.theme-dark .content-header > h1 > small { color: var(--dk-muted); }
html.theme-dark .breadcrumb {
  background: var(--dk-surface);
  border: 1px solid var(--dk-border);
}
html.theme-dark .breadcrumb > li + li:before,
html.theme-dark .breadcrumb > .active { color: var(--dk-muted); }

/* ---- footer ---- */
html.theme-dark .main-footer {
  background: var(--dk-surface);
  border-top-color: var(--dk-border);
  color: var(--dk-muted);
}

/* ---- boxes / panels / tabs ---- */
html.theme-dark .box,
html.theme-dark .panel,
html.theme-dark .nav-tabs-custom,
html.theme-dark .info-box,
html.theme-dark .small-box,
html.theme-dark .well {
  background: var(--dk-surface);
  border-color: var(--dk-border);
  box-shadow: none;
  color: var(--dk-text);
}
html.theme-dark .box-header,
html.theme-dark .box-footer,
html.theme-dark .panel-heading,
html.theme-dark .panel-footer,
html.theme-dark .panel-default > .panel-heading,
html.theme-dark .panel-default > .panel-footer,
html.theme-dark .panel > .panel-heading,
html.theme-dark .panel > .panel-footer {
  color: var(--dk-text);
  border-color: var(--dk-border) !important;
  background-color: var(--dk-surface-2) !important;   /* main.css fuerza white !important */
}
html.theme-dark .box.box-primary  { border-top-color: var(--dk-accent); }
html.theme-dark .nav-tabs { border-bottom-color: var(--dk-border); }
html.theme-dark .nav-tabs > li > a { color: var(--dk-muted); }
html.theme-dark .nav-tabs > li.active > a,
html.theme-dark .nav-tabs > li.active > a:hover,
html.theme-dark .nav-tabs > li.active > a:focus {
  background: var(--dk-surface);
  border-color: var(--dk-border) var(--dk-border) transparent;
  color: var(--dk-text);
}
html.theme-dark .nav-tabs > li > a:hover { background: var(--dk-surface-2); border-color: transparent; }
html.theme-dark .nav > li > a:hover,
html.theme-dark .nav > li > a:focus { background: var(--dk-surface-2); }

/* ---- progress bars ---- */
html.theme-dark .progress {
  background-color: var(--dk-inset);
  box-shadow: none;
}
html.theme-dark .progress-bar { box-shadow: none; }
/* texto "xx/xx" sobre la barra: blanco + sombra, legible sobre verde y sobre el riel oscuro */
html.theme-dark .progress-bar span,
html.theme-dark .progress-bar h7,
html.theme-dark .progress span {
  color: #fff !important;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
}

/* ---- tablas ---- */
html.theme-dark .table,
html.theme-dark table { color: var(--dk-text); }
html.theme-dark .table > thead > tr > th,
html.theme-dark .table > tbody > tr > th,
html.theme-dark .table > tbody > tr > td,
html.theme-dark .table > tfoot > tr > td,
html.theme-dark .table-bordered,
html.theme-dark .table-bordered > thead > tr > th,
html.theme-dark .table-bordered > tbody > tr > td {
  border-color: var(--dk-border);
}
html.theme-dark .table > thead > tr > th { background: var(--dk-surface-2); color: var(--dk-text); }
html.theme-dark .table-striped > tbody > tr:nth-of-type(odd) { background: #1c2128; }
html.theme-dark .table-hover > tbody > tr:hover { background: var(--dk-surface-2); }
html.theme-dark .table > tbody > tr.active > td,
html.theme-dark .table > tbody > tr > td.active { background: rgba(56,139,253,.15); }
html.theme-dark .dataTables_wrapper .dataTables_length,
html.theme-dark .dataTables_wrapper .dataTables_filter,
html.theme-dark .dataTables_wrapper .dataTables_info,
html.theme-dark .dataTables_wrapper .dataTables_paginate { color: var(--dk-muted); }
html.theme-dark .dataTables_wrapper .paginate_button { color: var(--dk-text) !important; }
html.theme-dark .dataTables_wrapper .paginate_button.current,
html.theme-dark .dataTables_wrapper .paginate_button:hover {
  background: var(--dk-surface-2) !important;
  border-color: var(--dk-border-2) !important;
  color: #fff !important;
}

/* ---- kartik grid / grid-view ---- */
html.theme-dark .grid-view,
html.theme-dark .kv-grid-container,
html.theme-dark .table-responsive { background: transparent; }
html.theme-dark .kv-grid-table > thead > tr > th,
html.theme-dark .kv-grid-table > thead > tr > td { background: var(--dk-surface-2); }
html.theme-dark .kv-grid-table > tbody > tr > td { background: transparent; }
html.theme-dark .table.kv-grid-table tr.filters .form-control { background-color: var(--dk-inset); }
html.theme-dark .kv-page-summary { background: var(--dk-surface-2) !important; font-weight: 600; }
html.theme-dark .kv-panel-before,
html.theme-dark .kv-panel-after,
html.theme-dark .summary,
html.theme-dark .grid-view .summary {
  background: var(--dk-surface-2);
  color: var(--dk-muted);
}
html.theme-dark .grid-view td,
html.theme-dark .grid-view th { border-color: var(--dk-border) !important; }
html.theme-dark .kv-grid-loading,
html.theme-dark .kv-grid-hover > tbody > tr:hover > td { background: var(--dk-surface-2) !important; }
/* filas/celdas agrupadas de kartik-grid (kv-grid.css las fuerza con !important) */
html.theme-dark td.kv-group-even { background-color: #1b2436 !important; color: var(--dk-text); }
html.theme-dark td.kv-group-odd  { background-color: #172029 !important; color: var(--dk-text); }
html.theme-dark .table-hover td.kv-group-even:hover { background-color: #26314a !important; }
html.theme-dark .table-hover td.kv-group-odd:hover  { background-color: #22303c !important; }
html.theme-dark .kv-grouped-row { background-color: var(--dk-surface-2) !important; color: var(--dk-text); }
html.theme-dark .table-hover .kv-grouped-row:hover { background-color: #373e47 !important; }

/* overrides de reglas !important del CSS propio de la app (web/css/main.css, site.css) */
html.theme-dark .kv-table-header th { background-color: var(--dk-surface-2) !important; }
html.theme-dark .rowData:hover,
html.theme-dark .rowData:hover > td { background-color: var(--dk-surface-2) !important; }
html.theme-dark tr.rowData:hover { background-color: var(--dk-surface-2) !important; }

/* ---- formularios ---- */
html.theme-dark .form-control,
html.theme-dark .input-group-addon,
html.theme-dark textarea,
html.theme-dark select {
  background-color: var(--dk-inset);
  border-color: var(--dk-border);
  color: var(--dk-text);
  box-shadow: none;
}
html.theme-dark .form-control::placeholder { color: #6e7681; }
html.theme-dark .form-control:focus { border-color: var(--dk-accent); box-shadow: none; }
html.theme-dark .form-control[disabled],
html.theme-dark .form-control[readonly],
html.theme-dark fieldset[disabled] .form-control { background: #161b22; color: var(--dk-muted); }
html.theme-dark .input-group-addon { color: var(--dk-muted); }
html.theme-dark label,
html.theme-dark .control-label { color: var(--dk-text); }
html.theme-dark .form-group.has-error .form-control { border-color: #f85149; }

/* ---- select2 (todos los temas: krajee, bootstrap, default) ---- */
html.theme-dark .select2-selection,
html.theme-dark .select2-dropdown,
html.theme-dark .select2-search__field,
html.theme-dark .select2-search--dropdown .select2-search__field {
  background-color: var(--dk-inset) !important;
  border-color: var(--dk-border) !important;
  color: var(--dk-text) !important;
}
html.theme-dark .select2-selection__rendered,
html.theme-dark .select2-selection__arrow b { color: var(--dk-text) !important; }
html.theme-dark .select2-selection__placeholder { color: var(--dk-muted) !important; }
html.theme-dark .select2-results,
html.theme-dark .select2-results > .select2-results__options,
html.theme-dark ul.select2-results__options,
html.theme-dark .select2-results__option {
  background-color: var(--dk-inset) !important;
  color: var(--dk-text) !important;
}
html.theme-dark .select2-results__option[aria-selected="true"],
html.theme-dark .select2-results__option[data-selected="true"] {
  background-color: var(--dk-surface-2) !important;
}
html.theme-dark .select2-results__option--highlighted,
html.theme-dark .select2-results__option--highlighted[aria-selected] {
  background-color: var(--dk-accent) !important;
  color: #fff !important;
}
html.theme-dark .select2-results__option[role="group"] .select2-results__group { color: var(--dk-muted) !important; }
html.theme-dark .select2-container--krajee .select2-results__option[aria-disabled="true"],
html.theme-dark .select2-results__message { color: var(--dk-muted) !important; }
html.theme-dark .select2-selection__choice { background: var(--dk-surface-2) !important; border-color: var(--dk-border-2) !important; color: var(--dk-text) !important; }
html.theme-dark .select2-selection__clear,
html.theme-dark .select2-container--krajee .select2-selection__clear,
html.theme-dark .select2-selection__choice__remove {
  color: var(--dk-muted) !important;
  opacity: 1;
}
html.theme-dark .select2-selection__clear:hover,
html.theme-dark .select2-selection__choice__remove:hover { color: #f85149 !important; }
html.theme-dark .select2-container--disabled .select2-selection { background-color: #161b22 !important; }
html.theme-dark .select2-container--krajee .select2-dropdown { border-color: var(--dk-border) !important; }

/* ---- botones ---- */
html.theme-dark .btn-default {
  background: var(--dk-surface-2);
  border-color: var(--dk-border-2);
  color: var(--dk-text);
}
html.theme-dark .btn-default:hover,
html.theme-dark .btn-default:focus,
html.theme-dark .btn-default:active { background: #373e47; color: #fff; border-color: var(--dk-border-2); }
html.theme-dark .btn-link { color: var(--dk-link); }
html.theme-dark .pagination > li > a,
html.theme-dark .pagination > li > span {
  background: var(--dk-surface);
  border-color: var(--dk-border);
  color: var(--dk-text);
}
html.theme-dark .pagination > .active > a,
html.theme-dark .pagination > li > a:hover { background: var(--dk-surface-2); border-color: var(--dk-border-2); color: #fff; }
html.theme-dark .pagination > .disabled > span { background: var(--dk-surface); color: var(--dk-muted); }

/* ---- dropdowns ----
   !important porque el skin de AdminLTE (dmstr\web\AdminLteAsset) trae su
   propio selector para el menú de usuario (.user-menu .dropdown-menu) con
   más especificidad que esta regla, y le gana pisando el fondo a blanco. */
html.theme-dark .dropdown-menu {
  background: var(--dk-surface-2) !important;
  border-color: var(--dk-border-2) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
html.theme-dark .dropdown-menu > li > a { color: var(--dk-text) !important; }
html.theme-dark .dropdown-menu > li > a:hover,
html.theme-dark .dropdown-menu > .active > a { background: #373e47 !important; color: #fff !important; }
html.theme-dark .dropdown-menu .divider { background: var(--dk-border) !important; }
html.theme-dark .dropdown-header { color: var(--dk-muted) !important; }
/* user-menu (Perfil/Cerrar sesión): la clase "user-menu" va en el <li> padre,
   no en el .dropdown-menu, y el skin de AdminLTE define fondo propio para
   .user-header/.user-body/.user-footer con bastante especificidad. */
html.theme-dark .user-menu .user-header,
html.theme-dark .user-menu .user-body,
html.theme-dark .user-menu .user-footer {
  background: var(--dk-surface-2) !important;
  border-color: var(--dk-border) !important;
  color: var(--dk-text) !important;
}
/* "Perfil"/"Cerrar sesión": texto más claro/blanco para que resalte más */
html.theme-dark .user-menu .user-footer .btn {
  color: #f5f6f8 !important;
  border-color: var(--dk-border-2) !important;
}
html.theme-dark .user-menu .user-footer .btn:hover {
  color: #ffffff !important;
  background: #373e47 !important;
}

/* ---- modales / popover / tooltip ---- */
html.theme-dark .modal-content { background: var(--dk-surface); color: var(--dk-text); border-color: var(--dk-border-2); }
html.theme-dark .modal-header,
html.theme-dark .modal-footer { border-color: var(--dk-border); }
html.theme-dark .modal-backdrop.in { opacity: .7; }
html.theme-dark .popover,
html.theme-dark .popover-content { background: var(--dk-surface-2); color: var(--dk-text); border-color: var(--dk-border-2); }
html.theme-dark .popover-title { background: var(--dk-surface); border-bottom-color: var(--dk-border); color: var(--dk-text); }
html.theme-dark .popover.top > .arrow:after { border-top-color: var(--dk-surface-2); }
html.theme-dark .popover.bottom > .arrow:after { border-bottom-color: var(--dk-surface); }
html.theme-dark .tooltip-inner { background: #000; }

/* ---- alertas / callouts ---- */
html.theme-dark .alert { border-color: var(--dk-border-2); }
html.theme-dark .alert-info    { background: #17313a; color: #a5d6e6; }
html.theme-dark .alert-success { background: #1b3226; color: #a7d8b8; }
html.theme-dark .alert-warning { background: #3a2f16; color: #e6cf9a; }
html.theme-dark .alert-danger  { background: #3a1c1c; color: #e6a5a5; }
html.theme-dark .callout { box-shadow: none; }

/* ---- date-picker (kartik / bootstrap-datepicker) ---- */
html.theme-dark .datepicker,
html.theme-dark .datepicker table,
html.theme-dark .datepicker-inline,
html.theme-dark .bootstrap-datetimepicker-widget .dropdown-menu {
  background-color: var(--dk-surface-2);
  color: var(--dk-text);
  border-color: var(--dk-border-2);
}
html.theme-dark .datepicker table tr td,
html.theme-dark .datepicker table tr th { color: var(--dk-text); }
html.theme-dark .datepicker table tr td.day:hover,
html.theme-dark .datepicker table tr td span:hover { background: #373e47; }
/* SIN !important: los calendarios inline del dashboard colorean los días con
   estilos inline (rojo/amarillo/verde por JS) y esos tienen que ganar. */
html.theme-dark .datepicker table tr td.active,
html.theme-dark .datepicker table tr td.active.day { background-color: var(--dk-accent); color: #fff; }
html.theme-dark .datepicker table tr td.old,
html.theme-dark .datepicker table tr td.new { color: var(--dk-muted); }
html.theme-dark .datepicker .datepicker-switch,
html.theme-dark .datepicker .prev,
html.theme-dark .datepicker .next { color: var(--dk-text); }
html.theme-dark .datepicker .datepicker-switch:hover,
html.theme-dark .datepicker .prev:hover,
html.theme-dark .datepicker .next:hover { background: #373e47; }

/* ---- calendario del Diagrama / FullCalendar ---- */
html.theme-dark .fc-unthemed td,
html.theme-dark .fc-unthemed th,
html.theme-dark .fc-unthemed .fc-divider,
html.theme-dark .fc-unthemed .fc-row { border-color: var(--dk-border); }
html.theme-dark .fc-unthemed .fc-today { background: rgba(56,139,253,.12); }
html.theme-dark .fc-toolbar h2 { color: var(--dk-text); }

/* ---- dashboard (views/site/index_1.php) ---- */
html.theme-dark .custom-card,
html.theme-dark .custom-card-2 {
  background-color: var(--dk-surface);
  border-color: var(--dk-border);
  box-shadow: none;
}
/* tarjetas de indicadores: mismo color de marca, atenuado para fondo oscuro */
html.theme-dark .small-box.bg-aqua-custom   { background-color: #10545f; }
html.theme-dark .small-box.bg-green-custom  { background-color: #14532d; }
html.theme-dark .small-box.bg-orange-custom { background-color: #7c3a0a; }
html.theme-dark .small-box.bg-red-custom    { background-color: #7f1d1d; }
html.theme-dark .small-box.bg-blue-custom   { background-color: #1e3a8a; }
html.theme-dark .small-box .icon { color: rgba(255,255,255,.13); }
/* botón "Documentación" y otros con .bg-*-custom: texto blanco */
html.theme-dark a.bg-blue-custom,
html.theme-dark a[class*="bg-"],
html.theme-dark .btn[class*="bg-"] { color: #fff; }

/* ---- bootstrap-switch ----
   Solo tocamos el borde, la perilla del medio y los handles SIN color
   (bootstrap-switch-default). Los handles con color (primary/danger/success/…)
   quedan como están para no perder el celeste/rojo del toggle. */
html.theme-dark .bootstrap-switch { border-color: var(--dk-border-2); }
html.theme-dark .bootstrap-switch .bootstrap-switch-label {
  background: var(--dk-surface-2);
  color: var(--dk-text);
}
html.theme-dark .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
html.theme-dark .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
  background: var(--dk-surface);
  color: var(--dk-text);
}

/* ---- apple-switch (toggle Activo/Inactivo de vehículo, persona, etc.) ----
   En claro es blanco/verde puro; en oscuro el "apagado" blanco puro quedaba
   como un blob desconectado del resto del tema. */
html.theme-dark input.apple-switch {
  background-color: var(--dk-surface-2);
  border-color: var(--dk-border-2);
  box-shadow: inset -20px 0 0 0 var(--dk-surface-2);
}
html.theme-dark input.apple-switch:after {
  box-shadow: 2px 4px 6px rgba(0,0,0,.6);
}
html.theme-dark input.apple-switch:checked {
  border-color: #2ea043;
  box-shadow: inset 20px 0 0 0 #2ea043;
}

/* ---- label de estado junto al switch (Bootstrap .label, ej. Activo/Inactivo) ----
   .label-default heredaba el texto claro de "html.theme-dark label" sobre su
   fondo gris medio original, quedando casi ilegible. */
html.theme-dark .label-default {
  background-color: var(--dk-surface-2);
  color: var(--dk-text);
  border: 1px solid var(--dk-border-2);
}
html.theme-dark .label-success {
  color: #ffffff;
}

/* ---- botón del toggle en el header ---- */
#theme-toggle > a { cursor: pointer; }
#theme-toggle .theme-icon-dark  { display: none; }
html.theme-dark #theme-toggle .theme-icon-dark  { display: inline; }
html.theme-dark #theme-toggle .theme-icon-light { display: none; }

/* =========================================================================
   Red de seguridad para estilos inline hardcodeados (fondos blancos /
   gris claro puestos con style="" en las vistas, sobre todo los reportes).
   Un estilo inline le gana a las clases, así que hay que interceptarlo.
   ========================================================================= */
/* OJO: "#fff" a secas matchea también "#ffffa7" (amarillo de novedad), así que
   solo se matchea el blanco con borde de token: #ffffff, o #fff seguido de ; o fin. */
html.theme-dark [style*="background-color:#ffffff"],
html.theme-dark [style*="background-color: #ffffff"],
html.theme-dark [style*="background:#ffffff"],
html.theme-dark [style*="background-color:#fff;"],
html.theme-dark [style*="background-color: #fff;"],
html.theme-dark [style*="background:#fff;"],
html.theme-dark [style$="background-color:#fff"],
html.theme-dark [style$="background-color: #fff"],
html.theme-dark [style$="background:#fff"],
html.theme-dark [style*="background-color:white"],
html.theme-dark [style*="background-color: white"],
html.theme-dark [style*="background:white"],
html.theme-dark [style*="background-color:rgb(255, 255, 255)"],
html.theme-dark [style*="background-color:rgb(255,255,255)"],
html.theme-dark [style*="background-color: rgb(255, 255, 255)"],
html.theme-dark [style*="background-color:#f9fafc"],
html.theme-dark [style*="background-color:#f5f5f5"],
html.theme-dark [style*="background-color: #f5f5f5"],
html.theme-dark [style*="background-color:#fafafa"],
html.theme-dark [style*="background-color:whitesmoke"] {
  background-color: var(--dk-surface) !important;
  color: var(--dk-text);
}
html.theme-dark [style*="background-color:gainsboro"],
html.theme-dark [style*="background-color: gainsboro"],
html.theme-dark [style*="background-color:#ddd"],
html.theme-dark [style*="background-color:#eee"],
html.theme-dark [style*="background-color: #eee"],
html.theme-dark [style*="background-color:lightgray"],
html.theme-dark [style*="background-color:lightgrey"],
html.theme-dark [style*="background-color:#e9ecef"],
html.theme-dark [style*="background-color:#EBEBEB"],
html.theme-dark [style*="background-color:#ebebeb"] {
  background-color: var(--dk-surface-2) !important;
  color: var(--dk-text);
}

/* Vista de la Planilla Horaria (views/planilla-horaria/view_con_excel*.php).
   La tabla marca los días con ~10 colores de fondo claros distintos puestos inline
   en cada <td>/<th> (franco, feriado, novedad, fin de semana, no conformidad…).
   En vez de enumerar cada hex: dentro de .planilla-horaria-view, cualquier celda con
   background inline conserva su color claro y se le fuerza el texto a oscuro. */
html.theme-dark .planilla-horaria-view [style*="background-color:#"]:not(.badge):not(.ph-badge),
html.theme-dark .planilla-horaria-view [style*="background:#"]:not(.badge):not(.ph-badge),
html.theme-dark .planilla-horaria-view [style*="background-color:#"] > span:not(.badge):not(.ph-badge),
html.theme-dark .planilla-horaria-view [style*="background-color:#"] > div,
html.theme-dark .planilla-horaria-view [style*="background-color:#"] > b {
  color: #1c1c1c !important;
}
/* la fecha "clickable" (Partes) va en #1E90FF: la dejo azul oscuro, legible sobre claro */
html.theme-dark .planilla-horaria-view [style*="color:#1E90FF"],
html.theme-dark .planilla-horaria-view [style*="color: #1E90FF"] { color: #0b3d91 !important; }
/* celdas SIN color inline (días trabajados): texto claro y bien visible */
html.theme-dark #test_tabla > tbody > tr > td:not([style*="background"]),
html.theme-dark #test_tabla > tbody > tr > th:not([style*="background"]),
html.theme-dark #test_tabla > tbody > tr > td:not([style*="background"]) *:not(a):not(.badge),
html.theme-dark #test_tabla > tbody > tr > th:not([style*="background"]) *:not(a):not(.badge) {
  color: #e6edf3 !important;
}
/* el <table id=test_tabla> en sí y su thead: superficie oscura */
html.theme-dark #test_tabla { background-color: transparent; }
html.theme-dark #test_tabla > thead > tr > th:not([style*="background"]) { background-color: var(--dk-surface-2); color: var(--dk-text); }
/* badges de la columna EVENTOS con fondo claro (novedad amarillo, franco gris):
   el texto ("AUSENTE", "MUDANZA", "FRANCO"…) va oscuro para que se lea */
html.theme-dark .planilla-horaria-view .badge[style*="color:gray"],
html.theme-dark .planilla-horaria-view .badge[style*="color: gray"],
html.theme-dark .planilla-horaria-view .badge[style*="background-color:#ffff47"],
html.theme-dark .planilla-horaria-view .badge[style*="background-color:#B8B8B8"],
html.theme-dark .planilla-horaria-view .badge[style*="background-color:#b8b8b8"] {
  color: #1c1c1c !important;
  font-weight: 700;
}
/* Colores de fila por estado (franco/feriado/novedad/no conformidad/totales):
   en vez del claro+texto oscuro de la regla genérica de arriba, para estas filas
   completas se oscurece también el fondo (tono oscuro del mismo color, igual
   criterio que .bg-orange-custom etc. más arriba) y el texto pasa a claro. */
html.theme-dark #test_tabla [style*="background-color:#ebebeb" i],
html.theme-dark #test_tabla [style*="background-color:gainsboro" i],
html.theme-dark #test_tabla [style*="background-color:#d9d9d9" i],
html.theme-dark #test_tabla [style*="background-color:#dabee2" i],
html.theme-dark #test_tabla [style*="background-color:#c1a6c9" i],
html.theme-dark #test_tabla [style*="background-color:#b780c6" i],
html.theme-dark #test_tabla [style*="background-color:#ffffa7" i],
html.theme-dark #test_tabla [style*="background-color:#ffff9b" i],
html.theme-dark #test_tabla [style*="background-color:#ffff47" i],
html.theme-dark #test_tabla [style*="background-color:#ffb938" i],
html.theme-dark #test_tabla [style*="background-color:#e09200" i],
html.theme-dark #test_tabla [style*="background-color:#ebebeb" i] *:not(.badge),
html.theme-dark #test_tabla [style*="background-color:gainsboro" i] *:not(.badge),
html.theme-dark #test_tabla [style*="background-color:#d9d9d9" i] *:not(.badge),
html.theme-dark #test_tabla [style*="background-color:#dabee2" i] *:not(.badge),
html.theme-dark #test_tabla [style*="background-color:#c1a6c9" i] *:not(.badge),
html.theme-dark #test_tabla [style*="background-color:#b780c6" i] *:not(.badge),
html.theme-dark #test_tabla [style*="background-color:#ffffa7" i] *:not(.badge),
html.theme-dark #test_tabla [style*="background-color:#ffff9b" i] *:not(.badge),
html.theme-dark #test_tabla [style*="background-color:#ffff47" i] *:not(.badge),
html.theme-dark #test_tabla [style*="background-color:#ffb938" i] *:not(.badge),
html.theme-dark #test_tabla [style*="background-color:#e09200" i] *:not(.badge) {
  color: #f2f2f2 !important;
}
html.theme-dark #test_tabla [style*="background-color:#ebebeb" i],
html.theme-dark #test_tabla [style*="background-color:gainsboro" i],
html.theme-dark #test_tabla [style*="background-color:#d9d9d9" i] {
  background-color: var(--dk-surface-2) !important;
}
html.theme-dark #test_tabla [style*="background-color:#dabee2" i],
html.theme-dark #test_tabla [style*="background-color:#c1a6c9" i],
html.theme-dark #test_tabla [style*="background-color:#b780c6" i] {
  background-color: #4a2e57 !important;
}
html.theme-dark #test_tabla [style*="background-color:#ffffa7" i],
html.theme-dark #test_tabla [style*="background-color:#ffff9b" i],
html.theme-dark #test_tabla [style*="background-color:#ffff47" i] {
  background-color: #4a3f10 !important;
}
html.theme-dark #test_tabla [style*="background-color:#ffb938" i],
html.theme-dark #test_tabla [style*="background-color:#e09200" i] {
  background-color: #7c3a0a !important;
}
/* =========================================================================
   Formulario de creación/edición de Planilla Horaria (.mi-planilla-horaria).
   Los inputs .ph-input/.ph-select son <input>/<select> sueltos (no llevan
   .form-control), así que no heredan nada de la sección "formularios" de
   más arriba; y el estado deshabilitado/"controlado" les pisa el fondo por
   JS/inline con blanco o #F5F5F5/#EBEBE4, que hay que interceptar igual que
   el resto de los fondos claros hardcodeados.
   ========================================================================= */
html.theme-dark .mi-planilla-horaria .ph-input,
html.theme-dark .mi-planilla-horaria .ph-select {
  background-color: var(--dk-inset) !important;
  border-color: var(--dk-border-2);
  color: var(--dk-text) !important;
}
html.theme-dark .mi-planilla-horaria [style*="background:#ffffff" i]:not(.apple-switch),
html.theme-dark .mi-planilla-horaria [style*="background-color:#ffffff" i]:not(.apple-switch) {
  background-color: var(--dk-inset) !important;
  color: var(--dk-text) !important;
}
html.theme-dark .mi-planilla-horaria [style*="background:#f5f5f5" i]:not(.apple-switch),
html.theme-dark .mi-planilla-horaria [style*="background-color:#f5f5f5" i]:not(.apple-switch),
html.theme-dark .mi-planilla-horaria [style*="background-color:#ebebe4" i]:not(.apple-switch) {
  background-color: #161b22 !important;
  color: var(--dk-muted) !important;
}
/* los apple-switch deshabilitados no pierden su estilo de switch por el inline */
html.theme-dark .mi-planilla-horaria input.apple-switch[style*="background:#f5f5f5" i],
html.theme-dark .mi-planilla-horaria input.apple-switch[style*="background:#ffffff" i] {
  background-color: var(--dk-surface-2) !important;
  box-shadow: inset -20px 0 0 0 var(--dk-surface-2) !important;
}
html.theme-dark .mi-planilla-horaria input.apple-switch[style*="background:#f5f5f5" i]:checked,
html.theme-dark .mi-planilla-horaria input.apple-switch[style*="background:#ffffff" i]:checked {
  box-shadow: inset 20px 0 0 0 #2ea043 !important;
}
/* filas por estado: mismo criterio de color que en la vista de solo lectura */
html.theme-dark .mi-planilla-horaria [style*="background-color:#ebebeb" i],
html.theme-dark .mi-planilla-horaria [style*="background-color:gainsboro" i],
html.theme-dark .mi-planilla-horaria [style*="background-color:#d9d9d9" i],
html.theme-dark .mi-planilla-horaria [style*="background-color:#b7b7b7" i] {
  background-color: var(--dk-surface-2) !important;
  color: var(--dk-text) !important;
}
html.theme-dark .mi-planilla-horaria [style*="background-color:#dabee2" i],
html.theme-dark .mi-planilla-horaria [style*="background-color:#c1a6c9" i] {
  background-color: #4a2e57 !important;
  color: #f2f2f2 !important;
}
html.theme-dark .mi-planilla-horaria [style*="background-color:#ffffa7" i],
html.theme-dark .mi-planilla-horaria [style*="background-color:#ffff9b" i] {
  background-color: #4a3f10 !important;
  color: #f2f2f2 !important;
}
html.theme-dark .mi-planilla-horaria [style*="background-color:#ffb938" i] {
  background-color: #7c3a0a !important;
  color: #f2f2f2 !important;
}
/* badge amarillo con texto gris inline: el texto NO debe pasar a claro (quedaría
   blanco sobre amarillo, bajo contraste), se fuerza oscuro como en la vista */
html.theme-dark .mi-planilla-horaria .badge[style*="color:gray" i],
html.theme-dark .mi-planilla-horaria .badge[style*="background-color:#ffff47" i],
html.theme-dark .mi-planilla-horaria .badge[style*="background-color:#b8b8b8" i] {
  color: #1c1c1c !important;
  font-weight: 700;
}
/* dentro de esas filas, los inputs/select conservan su propio contraste
   (fondo oscuro neutro) en vez de heredar el tinte de la fila */
html.theme-dark .mi-planilla-horaria [style*="background-color:#ebebeb" i] .ph-input,
html.theme-dark .mi-planilla-horaria [style*="background-color:gainsboro" i] .ph-input,
html.theme-dark .mi-planilla-horaria [style*="background-color:#dabee2" i] .ph-input,
html.theme-dark .mi-planilla-horaria [style*="background-color:#c1a6c9" i] .ph-input,
html.theme-dark .mi-planilla-horaria [style*="background-color:#ffffa7" i] .ph-input,
html.theme-dark .mi-planilla-horaria [style*="background-color:#ffff9b" i] .ph-input,
html.theme-dark .mi-planilla-horaria [style*="background-color:#ffb938" i] .ph-input,
html.theme-dark .mi-planilla-horaria [style*="background-color:#ebebeb" i] .ph-select,
html.theme-dark .mi-planilla-horaria [style*="background-color:gainsboro" i] .ph-select,
html.theme-dark .mi-planilla-horaria [style*="background-color:#dabee2" i] .ph-select,
html.theme-dark .mi-planilla-horaria [style*="background-color:#c1a6c9" i] .ph-select,
html.theme-dark .mi-planilla-horaria [style*="background-color:#ffffa7" i] .ph-select,
html.theme-dark .mi-planilla-horaria [style*="background-color:#ffff9b" i] .ph-select,
html.theme-dark .mi-planilla-horaria [style*="background-color:#ffb938" i] .ph-select {
  background-color: var(--dk-inset) !important;
  color: var(--dk-text) !important;
}
/* placeholders tipo "Ausente"/"Permiso..." que quedan como inline color:gray */
html.theme-dark .mi-planilla-horaria .ph-input::placeholder,
html.theme-dark .mi-planilla-horaria .ph-select::placeholder { color: #6e7681 !important; }

/* input "Supervisor" del encabezado del formulario: es un <input> suelto sin
   ninguna clase (ni .form-control ni .ph-input), así que no lo agarraba
   ninguna regla anterior y quedaba con el gris claro nativo de <input disabled>. */
html.theme-dark #supervisor {
  background-color: var(--dk-inset) !important;
  border: 1px solid var(--dk-border);
  color: var(--dk-text) !important;
}
html.theme-dark #supervisor:disabled {
  background-color: #161b22 !important;
  color: var(--dk-muted) !important;
}

/* Filas "semáforo" de grids (ej. Habilitaciones: vencida/próx.a vencer/vigente),
   pintadas con background-color inline en el <tr> vía rowOptions del GridView.
   Mismos 3 colores se repiten en las clases sueltas .F/.T/.TH de site.css. */
html.theme-dark tr[style*="background-color:#F9A5A5" i],
html.theme-dark tr[style*="background-color:#F9A5A5" i] > td,
html.theme-dark .F {
  background-color: #5c1f1f !important;
  color: #ffd9d9 !important;
}
html.theme-dark tr[style*="background-color:#FFDD73" i],
html.theme-dark tr[style*="background-color:#FFDD73" i] > td,
html.theme-dark tr[style*="background-color:#F8F1AE" i],
html.theme-dark tr[style*="background-color:#F8F1AE" i] > td,
html.theme-dark .T {
  background-color: #5c4a10 !important;
  color: #ffe9ad !important;
}
html.theme-dark tr[style*="background-color:#90ed7d" i],
html.theme-dark tr[style*="background-color:#90ed7d" i] > td,
html.theme-dark .TH {
  background-color: #1f4d2b !important;
  color: #c8f5d2 !important;
}
html.theme-dark .N {
  background-color: #1f3a4d !important;
  color: #cde6f5 !important;
}
html.theme-dark .S {
  background-color: #5c3a10 !important;
  color: #ffd9ad !important;
}
/* "Hs Desde"/"Hs Hasta" del form de Movimiento de Diagrama: son
   Html::textInput() sueltos, sin 'id' explícito en las options (Yii NO
   autogenera id para el helper Html::textInput plano, a diferencia de
   ActiveField), así que el <input> solo tiene el atributo "name" — el
   id="hr_desde" que existe en el HTML es del <div> que lo envuelve, no
   del input. Por eso hay que apuntar por name, no por id. */
html.theme-dark input[name^="hr_desde"],
html.theme-dark input[name^="hr_hasta"] {
  background-color: var(--dk-inset) !important;
  border: 1px solid var(--dk-border);
  color: var(--dk-text) !important;
}
html.theme-dark input[name^="hr_desde"]:focus,
html.theme-dark input[name^="hr_hasta"]:focus {
  border-color: var(--dk-accent);
  outline: none;
}

/* Red de seguridad general: en varias vistas (Turno, Movimiento de Diagrama,
   Reglas de Variable Laboral...) se usa Html::textInput() suelto, sin id ni
   clase (ni .form-control ni .ph-input), típicamente para campos numéricos
   de horas. En vez de ir agregando un selector por formulario a medida que
   aparecen, se cubre cualquier <input type="number"> sin clase reconocida
   en toda la app. */
html.theme-dark input[type="number"]:not(.form-control):not(.ph-input):not(.apple-switch) {
  background-color: var(--dk-inset) !important;
  border: 1px solid var(--dk-border);
  color: var(--dk-text) !important;
}
html.theme-dark input[type="number"]:not(.form-control):not(.ph-input):not(.apple-switch):focus {
  border-color: var(--dk-accent);
  outline: none;
}

/* Popover "Blanquear Contraseña" de Gestión RHPlus (views/persona/gestion_rhplus.php):
   Html::textInput('password', ...) suelto, sin clase ni id. */
html.theme-dark input[name="password"]:not(.form-control) {
  background-color: var(--dk-inset) !important;
  border: 1px solid var(--dk-border);
  color: var(--dk-text) !important;
}
html.theme-dark input[name="password"]:not(.form-control):focus {
  border-color: var(--dk-accent);
  outline: none;
}

/* Filtro "N°" de Auditoría (views/site/auditoria.php): Html::textInput('nro', ...)
   suelto, con id pero sin clase. */
html.theme-dark #nro {
  background-color: var(--dk-inset) !important;
  border: 1px solid var(--dk-border);
  color: var(--dk-text) !important;
}
html.theme-dark #nro::placeholder { color: #6e7681 !important; }
html.theme-dark #nro:focus {
  border-color: var(--dk-accent);
  outline: none;
}

/* Panel "Reglas" del form de Variable Laboral (#reglas): los <input>/<select>
   de cada fila (Condicionante, Operador, Limite, Hs 50%, ...) están puestos en
   HTML plano sin clase (ni .form-control ni select2), así que no los agarraba
   ninguna regla de arriba. */
html.theme-dark #reglas input,
html.theme-dark #reglas select {
  background-color: var(--dk-inset) !important;
  border: 1px solid var(--dk-border);
  color: var(--dk-text) !important;
}
html.theme-dark #reglas input:focus,
html.theme-dark #reglas select:focus {
  border-color: var(--dk-accent);
  outline: none;
}

/* texto oscuro forzado con inline style (negro y grises oscuros) */
html.theme-dark [style*="color:#000"],
html.theme-dark [style*="color: #000"],
html.theme-dark [style*="color:black"],
html.theme-dark [style*="color: black"],
html.theme-dark [style*="color:#111"],
html.theme-dark [style*="color:#222"],
html.theme-dark [style*="color: #222"],
html.theme-dark [style*="color:#333"],
html.theme-dark [style*="color: #333"],
html.theme-dark [style*="color:#3b3b3b"],
html.theme-dark [style*="color: #3b3b3b"],
html.theme-dark [style*="color:#3d444a"],
html.theme-dark [style*="color:#444"],
html.theme-dark [style*="color: #444"],
html.theme-dark [style*="color:#555"],
html.theme-dark [style*="color: #555"],
html.theme-dark [style*="color:#666"],
html.theme-dark [style*="color: #666"],
html.theme-dark [style*="color:gray"],
html.theme-dark [style*="color: gray"],
html.theme-dark [style*="color:grey"],
html.theme-dark [style*="color:dimgray"],
html.theme-dark [style*="color:darkgray"] {
  color: var(--dk-text) !important;
}

/* =========================================================================
   Diagrama (calendario de turnos): los eventos (franco/trabaja/novedad/...)
   los pinta un plugin JS que fija "color"/"textColor" por inline style; el
   navegador suele normalizar esos hex a rgb() en el DOM, así que se cubren
   ambos formatos. Van al final del archivo para ganarle a la regla genérica
   de "texto oscuro forzado" de arriba (mismo empate de especificidad, gana
   el que está después).
   ========================================================================= */
html.theme-dark [style*="background-color:#F9A5A5" i],
html.theme-dark [style*="background-color: rgb(249, 165, 165)"],
html.theme-dark [style*="background-color:rgb(249, 165, 165)"] {
  background-color: #5c1f1f !important;
  color: #ffd9d9 !important;
}
html.theme-dark [style*="background-color:#90ED7D" i],
html.theme-dark [style*="background-color: rgb(144, 237, 125)"],
html.theme-dark [style*="background-color:rgb(144, 237, 125)"] {
  background-color: #1f4d2b !important;
  color: #c8f5d2 !important;
}
html.theme-dark [style*="background-color:#FFFF95" i],
html.theme-dark [style*="background-color:#F8F1AE" i],
html.theme-dark [style*="background-color:#FFFF5C" i],
html.theme-dark [style*="background-color: rgb(255, 255, 149)"],
html.theme-dark [style*="background-color:rgb(255, 255, 149)"],
html.theme-dark [style*="background-color: rgb(248, 241, 174)"],
html.theme-dark [style*="background-color:rgb(248, 241, 174)"],
html.theme-dark [style*="background-color: rgb(255, 255, 92)"],
html.theme-dark [style*="background-color:rgb(255, 255, 92)"] {
  background-color: #5c4a10 !important;
  color: #ffe9ad !important;
}
html.theme-dark [style*="background-color:#92C2DD" i],
html.theme-dark [style*="background-color: rgb(146, 194, 221)"],
html.theme-dark [style*="background-color:rgb(146, 194, 221)"] {
  background-color: #1f3a4d !important;
  color: #cde6f5 !important;
}
html.theme-dark [style*="background-color:#F1B476" i],
html.theme-dark [style*="background-color: rgb(241, 180, 118)"],
html.theme-dark [style*="background-color:rgb(241, 180, 118)"] {
  background-color: #5c3a10 !important;
  color: #ffd9ad !important;
}