/* Modo oscuro (replicado del proyecto OC, ver al final los ajustes propios de
   RH). Se activa con la clase 'dark-mode' en <html> (ver toggle en
   views/layouts/header.php y el script anti-flash en
   views/layouts/main.php). Cubre el chrome de AdminLTE 2, tablas/grids
   (kartik-grid renderiza tablas Bootstrap 3 estándar), formularios, modales,
   dropdowns y Select2 -- que es lo que se repite en casi todas las vistas de
   la app. Puede haber widgets puntuales sin cubrir todavía; se van agregando
   a medida que aparezcan. */

html.dark-mode {
  color-scheme: dark;
}

html.dark-mode body,
html.dark-mode .wrapper,
html.dark-mode .content-wrapper,
html.dark-mode .content {
  background-color: #181a1b;
  color: #d6d6d6;
}

/* Header */
html.dark-mode .main-header .navbar {
  background-color: #1f2124;
}
html.dark-mode .main-header .logo {
  background-color: #16181a !important;
}
html.dark-mode .main-header .navbar .nav > li > a {
  color: #d6d6d6;
}
html.dark-mode .main-header .navbar .nav > li > a:hover,
html.dark-mode .main-header .navbar .nav > li > a:focus {
  background-color: #2a2d31;
  color: #fff;
}
html.dark-mode .main-header .sidebar-toggle {
  color: #d6d6d6;
}

/* Sidebar */
html.dark-mode .main-sidebar,
html.dark-mode .sidebar {
  background-color: #1a1c1e;
}
html.dark-mode .sidebar-menu > li > a {
  color: #c2c7d0;
  border-left: 3px solid transparent;
}
html.dark-mode .sidebar-menu > li:hover > a,
html.dark-mode .sidebar-menu > li.active > a {
  background-color: #262a2e;
  color: #fff;
  border-left-color: #3c8dbc;
}
html.dark-mode .sidebar-menu > li.treeview.active > a,
html.dark-mode .sidebar-menu .treeview-menu > li > a {
  background-color: #16181a;
  color: #b7bdc6;
}
html.dark-mode .sidebar-menu .treeview-menu > li > a:hover,
html.dark-mode .sidebar-menu .treeview-menu > li.active > a {
  color: #fff;
  background-color: #262a2e;
}
html.dark-mode .sidebar-form input[type="text"] {
  background-color: #262a2e;
  border-color: #2a2c2f;
  color: #d6d6d6;
}
html.dark-mode .user-panel .info,
html.dark-mode .user-panel .info a {
  color: #d6d6d6;
}

/* Boxes / paneles (usados en casi todas las grillas) */
html.dark-mode .box {
  background-color: #212325;
  border-top-color: #2a2c2f;
  color: #d6d6d6;
}
html.dark-mode .box-header {
  color: #e6e6e6;
}
html.dark-mode .box-header.with-border {
  border-bottom-color: #2a2c2f;
}
html.dark-mode .box-footer {
  background-color: #1c1e20;
  border-top-color: #2a2c2f;
}

/* kartik\grid\GridView envuelve la grilla en un .panel.panel-default propio
   (distinto de .box de AdminLTE) -- el .panel-heading quedaba en blanco
   porque nunca se habia cubierto este widget. !important + selector de
   .panel-heading sin depender de que sea hijo directo de .panel-default
   (por si la libreria cambia el anidamiento entre versiones): confirmado
   con captura real que esto seguia sin aplicar con el selector anidado. */
html.dark-mode .panel,
html.dark-mode .panel-default {
  background-color: #212325 !important;
  border-color: #2a2c2f !important;
}
html.dark-mode .panel-heading {
  background-color: #1c1e20 !important;
  border-color: #2a2c2f !important;
  color: #e6e6e6 !important;
}
html.dark-mode .panel-heading * {
  color: #e6e6e6 !important;
}
html.dark-mode .panel-body {
  color: #d6d6d6 !important;
}
html.dark-mode .panel-footer {
  background-color: #1c1e20 !important;
  border-color: #2a2c2f !important;
  color: #d6d6d6 !important;
}
html.dark-mode .callout,
html.dark-mode .well {
  background-color: #1c1e20;
  border-color: #2a2c2f;
  color: #d6d6d6;
}

/* Tablas / grids (kartik-grid renderiza tablas Bootstrap 3 estandar).
   !important en fondo/color/borde de thead-tfoot: kartik-grid y su propio
   CSS (kv-grid.css) pueden ganarle a un selector "normal" segun el orden de
   carga de los asset bundles, que no depende del orden en que escribimos
   este archivo -- se fuerza el resultado en vez de perseguir la cascada. */
html.dark-mode .table {
  color: #d6d6d6;
}
html.dark-mode .table > thead > tr > th,
html.dark-mode .table thead th {
  background-color: #1c1e20 !important;
  color: #e6e6e6 !important;
  border-color: #2a2c2f !important;
}
html.dark-mode .table > tfoot > tr > td,
html.dark-mode .table > tfoot > tr > th,
html.dark-mode .table tfoot td,
html.dark-mode .table tfoot th,
html.dark-mode .kv-table-footer,
html.dark-mode .kv-table-footer td,
html.dark-mode .kv-table-footer th {
  background-color: #1c1e20 !important;
  color: #e6e6e6 !important;
  border-color: #2a2c2f !important;
}
html.dark-mode .table > tbody > tr > td,
html.dark-mode .table > tbody > tr > th {
  border-color: #2a2c2f !important;
}
html.dark-mode .table-bordered {
  border: 1px solid #2a2c2f !important;
}
/* Mismo selector (las 6 combinaciones thead/tbody/tfoot x th/td) y misma
   propiedad (border shorthand, no border-color) que usa AdminLTE.css en su
   regla base para .table-bordered -- verificado contra el fuente real
   (border: 1px solid #f4f4f4, sin !important, pero el usuario confirmo con
   el inspector que era la regla ganando igual). Se usa combinador
   descendiente (space) en vez de hijo directo (>) para no depender de que
   el anidamiento thead/tr/th sea exactamente el asumido. */
html.dark-mode .table-bordered thead th,
html.dark-mode .table-bordered tbody th,
html.dark-mode .table-bordered tfoot th,
html.dark-mode .table-bordered thead td,
html.dark-mode .table-bordered tbody td,
html.dark-mode .table-bordered tfoot td {
  border: 1px solid #2a2c2f !important;
}
html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #26282a;
}
html.dark-mode .table-hover > tbody > tr:hover {
  background-color: #2e3134;
}
/* .rowData: clase propia del proyecto (no de Bootstrap/kartik), puesta via
   'rowOptions' en varias grillas -- site.css la define con
   background-color:lightgray !important en :hover. Sobre texto ya claro
   (#d6d6d6 en dark mode) un fondo gris claro deja la fila ilegible. */
html.dark-mode .rowData:hover {
  background-color: #2e3134 !important;
  color: #f2f2f2 !important;
}
html.dark-mode .rowData:hover td {
  color: #f2f2f2 !important;
}
html.dark-mode .kv-grid-container,
html.dark-mode .kv-panel-heading,
html.dark-mode .kv-panel-footer {
  background-color: #212325;
  border-color: #2a2c2f;
  color: #d6d6d6;
}
/* kv-grid.css (CSS propio de kartik-grid) define .kv-panel-before/-after con
   border-bottom/border-top: 1px solid #ddd fijo -- son los separadores que
   aparecen arriba y abajo de la tabla dentro del panel, por fuera de las
   reglas de .table-bordered/.panel-heading que ya estaban cubiertas. */
html.dark-mode .kv-panel-before {
  border-bottom-color: #2a2c2f !important;
}
html.dark-mode .kv-panel-after {
  border-top-color: #2a2c2f !important;
}
html.dark-mode .kv-table-header,
html.dark-mode .thead-top {
  background-color: #26282a !important;
}
/* Fila de filtros (inputs/Select2 debajo del header de cada columna). La
   clase real es 'filters' (default de yii\grid\GridView::$filterRowOptions
   en el core de Yii2, kartik-grid solo le agrega 'skip-export') -- verificado
   contra el codigo fuente real. 'kv-filter-row'/'filter-row' que se usaba
   antes no existen en el DOM, por eso el fondo de esas celdas seguia blanco
   pese al !important: apuntaba a clases que nunca estuvieron ahi. */
html.dark-mode tr.filters > td,
html.dark-mode tr.filters > th {
  background-color: #1c1e20 !important;
}
html.dark-mode tr.filters .form-control,
html.dark-mode tr.filters select,
html.dark-mode tr.filters input {
  background-color: #26282a !important;
  color: #e6e6e6 !important;
  border-color: #565a61 !important;
}

/* Formularios. !important por el mismo motivo que en las tablas: kartik y
   select2 registran su propio CSS con un orden de carga que no controlamos
   desde este archivo.
   Pedido explicito: nada de look "hundido" -- Bootstrap 3 le pone a todo
   .form-control un box-shadow inset (sombra interior oscura) que sobre un
   fondo YA oscuro se nota como un hueco/relieve marcado. Se lo saca del
   todo y se deja un borde parejo, suave y mas claro que el fondo (no un
   gris casi invisible), tipo outline minimalista. Mismo tratamiento para
   los inputs readonly (fecha, date-range) que antes se quedaban sin este
   ajuste y mantenian el box-shadow default. */
html.dark-mode .form-control,
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode input[type="text"],
html.dark-mode input[type="number"],
html.dark-mode input[type="password"] {
  background-color: #26282a !important;
  border: 1px solid #565a61 !important;
  box-shadow: none !important;
  color: #e6e6e6 !important;
}
html.dark-mode .form-control:focus {
  border-color: #3c8dbc !important;
  background-color: #2c2f33 !important;
  box-shadow: none !important;
}
html.dark-mode .form-control[disabled],
html.dark-mode .form-control[readonly] {
  background-color: #1c1e20 !important;
  border-color: #4a4d52 !important;
  box-shadow: none !important;
  color: #b9bdc4 !important;
}
html.dark-mode label,
html.dark-mode .control-label {
  color: #d6d6d6;
}
html.dark-mode .input-group-addon {
  background-color: #2c2f33;
  border-color: #565a61;
  color: #d6d6d6;
}

/* Select2 (usado en casi todos los filtros de las grillas, GridView::FILTER_SELECT2).
   Se dejo de perseguir el nombre exacto del tema activo (default/krajee):
   el select2.css base (theme-agnostic) ya trae background-color:#fff propio
   en .select2-selection--single/--multiple sin sufijo de tema, y krajee
   ademas define el suyo en .select2-selection (sin split single/multiple) --
   entre ambos quedaban huecos. Se apunta directo a las clases internas
   (select2-selection, select2-selection--single, select2-selection--multiple,
   select2-selection__rendered, etc.) SIN requerir un ancestro
   .select2-container--XXX especifico: existen sea cual sea el tema activo. */
html.dark-mode .select2-selection,
html.dark-mode .select2-selection--single,
html.dark-mode .select2-selection--multiple {
  background-color: #26282a !important;
  border-color: #565a61 !important;
  color: #e6e6e6 !important;
}
html.dark-mode .select2-selection__rendered,
html.dark-mode .select2-selection__placeholder {
  color: #e6e6e6 !important;
}
html.dark-mode .select2-selection__arrow b {
  border-color: #e6e6e6 transparent transparent transparent !important;
}
html.dark-mode .select2-dropdown {
  background-color: #26282a !important;
  border-color: #565a61 !important;
  color: #e6e6e6 !important;
}
html.dark-mode .select2-results__option,
html.dark-mode li.select2-results__option {
  background-color: #26282a !important;
  color: #d6d6d6 !important;
}
html.dark-mode .select2-results__option--highlighted[aria-selected],
html.dark-mode .select2-results__option[aria-selected="true"] {
  background-color: #3c8dbc !important;
  color: #fff !important;
}
html.dark-mode .select2-search--dropdown .select2-search__field,
html.dark-mode .select2-search__field {
  background-color: #1c1e20 !important;
  border-color: #565a61 !important;
  color: #e6e6e6 !important;
}
html.dark-mode .select2-selection__choice {
  background-color: #2e3134 !important;
  border-color: #565a61 !important;
  color: #d6d6d6 !important;
}

/* Modales, popovers, dropdowns */
html.dark-mode .modal-content {
  background-color: #212325;
  color: #d6d6d6;
  border-color: #2a2c2f;
}
html.dark-mode .modal-header,
html.dark-mode .modal-footer {
  border-color: #2a2c2f;
}
html.dark-mode .close {
  color: #e6e6e6;
  opacity: 0.7;
}
html.dark-mode .popover {
  background-color: #26282a;
  border-color: #565a61;
  color: #d6d6d6;
}
html.dark-mode .popover-title {
  background-color: #1c1e20;
  border-color: #565a61;
}
html.dark-mode .dropdown-menu {
  background-color: #26282a;
  border-color: #565a61;
}
html.dark-mode .dropdown-menu > li > a {
  color: #d6d6d6;
}
html.dark-mode .dropdown-menu > li > a:hover,
html.dark-mode .dropdown-menu > li > a:focus {
  background-color: #2e3134;
  color: #fff;
}
html.dark-mode .dropdown-menu .divider {
  background-color: #3a3d41;
}
/* AdminLTE.css define .navbar-nav > .user-menu > .dropdown-menu > .user-footer
   con background-color:#f9f9f9 propio (specificidad 0,0,4,0), le gana a la
   regla general de arriba (.dropdown-menu, 0,0,2,1) -- confirmado leyendo el
   selector real. Es el contenedor de "Perfil"/"Cerrar sesion" del menu de
   usuario, quedaba blanco en dark mode. */
html.dark-mode .user-footer {
  background-color: #1c1e20 !important;
}
html.dark-mode .user-footer .btn-default {
  background-color: #2c2f33 !important;
  border-color: #565a61 !important;
  color: #d6d6d6 !important;
}

/* Botones, tabs, paginacion, alertas */
html.dark-mode .btn-default {
  background-color: #2c2f33;
  border-color: #565a61;
  color: #d6d6d6;
}
html.dark-mode .btn-default:hover {
  background-color: #34383c;
  color: #fff;
}
html.dark-mode .nav-tabs {
  border-bottom-color: #2a2c2f;
}
html.dark-mode .nav-tabs > li > a {
  color: #b7bdc6;
}
html.dark-mode .nav-tabs > li.active > a,
html.dark-mode .nav-tabs > li.active > a:hover,
html.dark-mode .nav-tabs > li.active > a:focus {
  background-color: #212325;
  color: #fff;
  border-color: #2a2c2f #2a2c2f transparent;
}
html.dark-mode .pagination > li > a,
html.dark-mode .pagination > li > span {
  background-color: #26282a;
  border-color: #2a2c2f;
  color: #d6d6d6;
}
html.dark-mode .pagination > li.active > a,
html.dark-mode .pagination > li.active > span {
  background-color: #3c8dbc;
  border-color: #3c8dbc;
  color: #fff;
}

/* .formato_montos: clase propia del proyecto (no de Bootstrap/kartik), usada
   en varias grillas para resaltar totales ($ ARS / $ USD). style.css la
   define con fondo celeste claro fijo -- nunca se habia cubierto acá. */
html.dark-mode .formato_montos {
  background: #2c5f66 !important;
  color: #eafaf7 !important;
  border-color: #565a61 !important;
}

/* Filas/celdas contextuales de Bootstrap (active/success/warning/info/danger),
   usadas tipicamente en la fila de resumen (showPageSummary) y en filas
   destacadas de algunas grillas -- tenian su color claro propio de Bootstrap
   sin ningun override. */
html.dark-mode .table > tbody > tr.active > td,
html.dark-mode .table > tbody > tr > td.active,
html.dark-mode .table > tfoot > tr.active > td,
html.dark-mode .table > tfoot > tr > td.active {
  background-color: #2c2f33 !important;
  color: #e6e6e6 !important;
}
html.dark-mode .table > tbody > tr.success > td,
html.dark-mode .table > tbody > tr > td.success {
  background-color: #1f3a2a !important;
  color: #d6f5e0 !important;
}
html.dark-mode .table > tbody > tr.warning > td,
html.dark-mode .table > tbody > tr > td.warning {
  background-color: #4a3a1a !important;
  color: #f7e6c4 !important;
}
html.dark-mode .table > tbody > tr.danger > td,
html.dark-mode .table > tbody > tr > td.danger {
  background-color: #4a1f22 !important;
  color: #f7d6d6 !important;
}
html.dark-mode .table > tbody > tr.info > td,
html.dark-mode .table > tbody > tr > td.info {
  background-color: #1c3a42 !important;
  color: #cfeff5 !important;
}
/* :not(.btn) es clave: sin esto, esta regla le ganaba en especificidad al
   color de texto blanco de Bootstrap en los <a class="btn btn-success">
   (y los otros btn-* de color), dejando texto celeste ilegible sobre fondos
   de color. Los botones .btn-default no son <a> con color de texto propio
   fuerte, asi que no necesitan la exclusion. */
html.dark-mode a:not(.btn) {
  color: #6fb3e0;
}
html.dark-mode a:not(.btn):hover,
html.dark-mode a:not(.btn):focus {
  color: #8fc6ea;
}
html.dark-mode .btn-success,
html.dark-mode .btn-primary,
html.dark-mode .btn-info,
html.dark-mode .btn-warning,
html.dark-mode .btn-danger {
  color: #fff;
}
html.dark-mode hr {
  border-top-color: #2a2c2f;
}

/* Toggle de modo oscuro en el navbar -- pedido explicito (3ra vuelta): en vez
   de mantener un estilo propio (primero circulo blanco semitransparente,
   despues circulo solido ambar), ahora reutiliza las mismas clases que el
   boton de refresh de al lado (button-update icon-wrapper icon-wrapper-alt,
   definidas en style.css/main.css): circulo de 35px con borde fino #677e9b
   sin relleno, minimalista. Con esas clases puestas en el <a> del layout no
   hace falta CSS propio -- el que ya usa el boton de refresh (no cubierto en
   este archivo) ya se ve bien en dark-mode, asi que se deja igual. */
#dark-mode-toggle {
  cursor: pointer;
}

/* Footer con el logo de Sofisticapp -- clase real de AdminLTE (.main-footer),
   nunca cubierta. La skin solo tocaba el border, el fondo vino siempre del
   CSS base de AdminLTE. */
html.dark-mode .main-footer {
  background-color: #181a1b !important;
  color: #d6d6d6 !important;
  border-top-color: #2a2c2f !important;
}

/* .custom-card/.custom-card-2: clases propias del proyecto (main.css), no de
   Bootstrap/AdminLTE, usadas para envolver secciones del dashboard de Inicio
   (ej. el calendario de SMs). Tenian background-color:white fijo. */
html.dark-mode .custom-card,
html.dark-mode .custom-card-2 {
  background-color: #212325 !important;
  border-color: #2a2c2f !important;
  color: #d6d6d6;
}
html.dark-mode .tabla-dia-calendario {
  border-left-color: #2a2c2f;
}

/* .small-box (widget de estadisticas de AdminLTE, ej. "Cantidad de Obras" en
   Inicio): varias instancias tienen background-color:white por style inline
   directo en la vista -- !important es necesario para ganarle a un inline. */
html.dark-mode .small-box {
  background-color: #212325 !important;
}

/* kartik\date\DatePicker en modo inline (calendario de SMs/Entregas
   Previstas/Fin Alquiler en Inicio) envuelve bootstrap-datepicker, que no
   trae dark mode. El contenedor no tiene fondo propio (hereda del padre),
   pero las celdas de dia si tienen texto oscuro fijo -- invisible sobre un
   fondo oscuro heredado. */
html.dark-mode .datepicker,
html.dark-mode .datepicker-inline {
  background-color: #212325 !important;
  color: #d6d6d6;
}
html.dark-mode .datepicker table tr td,
html.dark-mode .datepicker table tr th {
  color: #d6d6d6 !important;
}
/* .today (el dia actual) SI tiene fondo claro propio (#ffdb99, naranja) del
   CSS base de bootstrap-datepicker -- pero la regla generica de arriba
   (color:#d6d6d6 !important en TODOS los td) le gana con la misma
   especificidad + !important + orden de carga, dejando texto gris claro
   sobre fondo claro: practicamente invisible. Antes se asumia que
   "today/highlighted/active ya son legibles en cualquier tema" sin haber
   verificado -- el usuario confirmo que no. Selector con .today agregado
   (mas especifico que el de arriba) para ganarle. */
html.dark-mode .datepicker table tr td.today {
  color: #000 !important;
}
html.dark-mode .datepicker table tr td.old,
html.dark-mode .datepicker table tr td.new {
  color: #6b6f76 !important;
}
/* :not(.active): en RH los dias con registros (.active) se pintan con fondo
   semaforo inline (ver site/index_1.php); el hover oscuro los tapaba. */
html.dark-mode .datepicker table tr td.day:not(.active):hover,
html.dark-mode .datepicker table tr td.focused {
  background: #2e3134 !important;
  color: #fff !important;
}
html.dark-mode .datepicker table tr td.disabled,
html.dark-mode .datepicker table tr td.disabled:hover {
  color: #55585c !important;
}
html.dark-mode .datepicker .prev,
html.dark-mode .datepicker .next,
html.dark-mode .datepicker .datepicker-switch,
html.dark-mode .datepicker .dow {
  color: #d6d6d6 !important;
}
html.dark-mode .datepicker .prev:hover,
html.dark-mode .datepicker .next:hover,
html.dark-mode .datepicker .datepicker-switch:hover {
  background-color: #2e3134 !important;
}

/* ===== Ajustes propios de RH ===== */

/* Skin skin-yellow-light: los submenus del sidebar tienen fondo claro propio
   en el <ul> (no en los <a>, que ya estan cubiertos arriba). */
html.dark-mode .sidebar-menu .treeview-menu,
html.dark-mode .sidebar-menu > li > .treeview-menu {
  background-color: #16181a !important;
}
html.dark-mode .sidebar-menu > li.header {
  background-color: #16181a;
  color: #8a8f94;
}

/* main.css fuerza color:black !important en los links del header ("Ayuda",
   usuario) y en el boton del menu (.skin-yellow-light ... .nav>li>a) -- sin
   !important aca quedaban negros sobre el header oscuro. */
html.dark-mode .main-header .navbar .nav > li > a,
html.dark-mode .main-header .navbar .sidebar-toggle {
  color: #d6d6d6 !important;
}
html.dark-mode .main-header .navbar .nav > li > a:hover,
html.dark-mode .main-header .navbar .nav > li > a:focus,
html.dark-mode .main-header .navbar .sidebar-toggle:hover {
  color: #fff !important;
}

/* El logo RH tiene la "R" gris oscura: sobre el fondo oscuro del header
   desaparece, asi que la celda del logo conserva un fondo claro. */
html.dark-mode .main-header .logo {
  background-color: #e9ecef !important;
}

/* Filas/celdas pintadas con colores pastel por style inline (vencidos /
   por vencer en Inicio, habilitaciones, documentos, planillas): el fondo
   sigue claro, asi que el texto tiene que ser oscuro. */
html.dark-mode tr[style*="background-color"],
html.dark-mode tr[style*="background-color"] > td,
html.dark-mode td[style*="background-color"],
html.dark-mode th[style*="background-color"] {
  color: #222 !important;
}
html.dark-mode tr[style*="background-color"] a:not(.btn),
html.dark-mode td[style*="background-color"] a:not(.btn) {
  color: #0b4f7c;
}

/* Planilla horaria (form de carga en PlanillaHorariaController, view y
   reportes): los dias se pintan inline con lila (feriado), amarillo
   (novedad) o gris (franco/fin de semana). En modo oscuro esos pasteles
   chocaban con los inputs oscuros, asi que se reemplazan por versiones
   oscuras del mismo tono (mas especifico que la regla generica de arriba,
   que deja texto oscuro). Incluye los cuadraditos de la leyenda (.caja). */
html.dark-mode td[style*="background-color"][style*="#dabee2" i],
html.dark-mode th[style*="background-color"][style*="#dabee2" i],
html.dark-mode td[style*="background-color"][style*="#c1a6c9" i],
html.dark-mode th[style*="background-color"][style*="#c1a6c9" i],
html.dark-mode .caja[style*="#c1a6c9" i] {
  background-color: #3e2f47 !important;
  color: #ece3f0 !important;
}
html.dark-mode td[style*="background-color"][style*="#ffffa7" i],
html.dark-mode th[style*="background-color"][style*="#ffffa7" i],
html.dark-mode td[style*="background-color"][style*="#ffff9b" i],
html.dark-mode th[style*="background-color"][style*="#ffff9b" i],
html.dark-mode td[style*="background-color"][style*="#ffff5c" i],
html.dark-mode th[style*="background-color"][style*="#ffff5c" i],
html.dark-mode .caja[style*="#ffff9b" i],
html.dark-mode .caja[style*="#ffff5c" i] {
  background-color: #47421c !important;
  color: #f5f0cf !important;
}
html.dark-mode td[style*="background-color"][style*="gainsboro" i],
html.dark-mode th[style*="background-color"][style*="gainsboro" i],
html.dark-mode td[style*="background-color"][style*="#ebebeb" i],
html.dark-mode th[style*="background-color"][style*="#ebebeb" i],
html.dark-mode .caja[style*="#ebebeb" i] {
  background-color: #34373b !important;
  color: #e6e6e6 !important;
}

/* Encabezados/totales grises inline de la planilla (#D9D9D9 en el pie
   "TOTALES 1°/2° QUINCENA" del form, #b7b7b7 en las vistas): mismo tono que
   los encabezados de tabla en modo oscuro. */
html.dark-mode td[style*="background-color"][style*="#d9d9d9" i],
html.dark-mode th[style*="background-color"][style*="#d9d9d9" i],
html.dark-mode td[style*="background-color"][style*="#b7b7b7" i],
html.dark-mode th[style*="background-color"][style*="#b7b7b7" i] {
  background-color: #1c1e20 !important;
  color: #e6e6e6 !important;
}

/* Inicio: dias con registros del calendario (fondo semaforo inline). */
html.dark-mode .datepicker table tr td.active.day {
  color: #222 !important;
}

/* Inicio: tarjetas del encabezado y recuadro de registros del dia. */
html.dark-mode .tarjeta-inicio {
  background-color: #212325;
  box-shadow: none;
}
html.dark-mode .tabla-dia-panel {
  background-color: #212325;
  border-color: #2a2c2f;
}
html.dark-mode .tabla-dia-titulo {
  background-color: #1c1e20;
  border-bottom-color: #2a2c2f;
  color: #e6e6e6;
}
html.dark-mode .tabla-dia-vacio {
  color: #8a8f94;
}
html.dark-mode .tabla-dia-scroll .table > thead > tr > th {
  box-shadow: inset 0 -2px 0 #2a2c2f;
}

/* Barras de progreso de Bootstrap (Control Operativo / Control Adminis. en
   el listado de planillas horarias): el riel tiene fondo claro propio y el
   texto "0/31" viene con color:black inline en la vista -- !important para
   ganarle al inline. */
html.dark-mode .progress {
  background-color: #2e3134 !important;
  box-shadow: none !important;
}
html.dark-mode .progress .progress-bar span,
html.dark-mode .progress .progress-bar h7 {
  color: #f2f2f2 !important;
}

/* Columnas agrupadas de kartik-grid ('group' => true, ej. Categoria en
   Documentos de la vista de persona): kv-grid.css les pone fondos casi
   blancos con !important (kv-group-even/odd) y una fila de grupo rosada. */
html.dark-mode td.kv-group-even {
  background-color: #23262e !important;
  color: #e6e6e6 !important;
}
html.dark-mode td.kv-group-odd {
  background-color: #262a2e !important;
  color: #e6e6e6 !important;
}
html.dark-mode .table-hover td.kv-group-even:hover,
html.dark-mode .table-hover td.kv-group-odd:hover {
  background-color: #2e3134 !important;
}
html.dark-mode .kv-grouped-row,
html.dark-mode .kv-grouped-row td {
  background-color: #2c2f33 !important;
  color: #e6e6e6 !important;
}

/* kartik SwitchInput (bootstrap-switch, ej. "Conduce" en la vista de
   persona): la etiqueta del medio y el contenedor tienen fondo blanco fijo.
   Los lados de color (SI/NO) ya se leen bien y no se tocan. */
html.dark-mode .bootstrap-switch {
  background-color: #26282a;
  border-color: #565a61;
}
html.dark-mode .bootstrap-switch .bootstrap-switch-label {
  background: #3a3d42;
  color: #e6e6e6;
}
html.dark-mode .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
html.dark-mode .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
  background: #2c2f33;
  color: #e6e6e6;
}

/* Badge gris de Bootstrap/AdminLTE (.label-default, ej. "Edicion de
   Relacion Contractual" / "Inactivo" junto a los toggles del form de
   persona): fondo #d2d6de y la regla de arriba para <label> le aclaraba el
   texto, quedando ilegible. Los label-success/danger/etc. ya traen fondo y
   texto blanco con !important de AdminLTE. */
html.dark-mode .label-default,
html.dark-mode label.label-default {
  background-color: #4a4e54 !important;
  color: #f2f2f2 !important;
}

/* Recuadro de filtros con fondo gris claro inline
   (background-color:#f5f5f5;border:5px solid #ddd) repetido en
   habilitacion/index, index-checks y los reportes de site/ (horas, viandas,
   costo MO, planilla horaria). */
html.dark-mode div[style*="background-color:#f5f5f5" i] {
  background-color: #1c1e20 !important;
  border-color: #2a2c2f !important;
  color: #d6d6d6;
}

/* Form de notificacion (views/notificacion/_form.php): tiene su propio
   <style> con tarjetas blancas para Tipo de Confirmacion y Destinatarios. */
html.dark-mode .checks-card {
  background: #26282a;
  border-color: #3a3d42;
}
html.dark-mode .checks-card:hover {
  background: #2c3040;
  border-color: #4e73df;
}
html.dark-mode .checks-card.selected {
  background: #253055;
  border-color: #4e73df;
}
html.dark-mode .checks-check,
html.dark-mode .empleado-chk-box {
  background: #1c1e20;
  border-color: #6b7280;
}
html.dark-mode .checks-card.selected .checks-check,
html.dark-mode .empleado-row.selected .empleado-chk-box {
  background: #4e73df;
  border-color: #4e73df;
}
html.dark-mode .checks-content strong,
html.dark-mode .empleado-info strong {
  color: #e6e6e6;
}
html.dark-mode .checks-content small,
html.dark-mode .empleado-info small,
html.dark-mode .todos-panel-label,
html.dark-mode #empleados-counter {
  color: #9aa3b5;
}
html.dark-mode .todos-panel,
html.dark-mode .empleados-footer {
  background: #1c1e20;
  border-color: #3a3d42;
  color: #9aa3b5;
}
html.dark-mode .todos-panel-count {
  color: #7d9bf0;
}
html.dark-mode .empleados-panel {
  background: #26282a;
  border-color: #3a3d42;
}
html.dark-mode .empleados-search-wrap,
html.dark-mode .empleados-toolbar,
html.dark-mode .empleado-row {
  border-color: #2f3236;
}
/* El buscador va "embebido" en el panel: sin la caja de input generica. */
html.dark-mode .empleados-search-input {
  background: transparent !important;
  border: none !important;
  color: #e6e6e6 !important;
}
html.dark-mode .empleado-row:hover {
  background: #2c3040;
}
html.dark-mode .empleado-row.selected {
  background: #253055;
}

/* kartik FileInput (bootstrap-fileinput): zona de vista previa y marcos. */
html.dark-mode .file-preview,
html.dark-mode .file-drop-zone,
html.dark-mode .krajee-default.file-preview-frame {
  background-color: #1c1e20;
  border-color: #3a3d42;
}
html.dark-mode .file-drop-zone-title {
  color: #8a8f94;
}

/* Tabs tipo pills (kartik TabsX, ej. listado de planillas horarias). */
html.dark-mode .nav-pills > li > a {
  color: #b7bdc6;
}
html.dark-mode .nav-pills > li > a:hover {
  background-color: #2e3134;
}

/* Toggle del header: mismo circulo que los iconos de alertas de al lado. */
.rounded-circle-gray {
  border: 1px solid #7e7e7e;
  border-radius: 50% !important;
}
#dark-mode-toggle .icon-wrapper {
  cursor: pointer;
}