/* Modo oscuro. Se activa con la clase 'dark-mode' en <html> (ver toggle en
   views/layouts/header_con_nuevo_estilo.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;
}
/* La scrollbar nativa de listas con overflow-y:scroll (ej. las grillas
   dentro de los PopoverX de "Alertas" en site/inicio_sin_cliente.php,
   'options'=>['style'=>'overflow-y: scroll;max-height:400px']) seguia
   apareciendo blanca/clara pese al color-scheme:dark de arriba (confirmado
   por el usuario con captura: "este no se ve correctamente" en el popover
   "SMs Pendientes de Aprobación", el unico con filas suficientes para
   activar el scroll) -- color-scheme:dark es la forma recomendada pero no
   siempre alcanza para contenedores con overflow anidados dentro de un
   elemento posicionado (popover), asi que se fuerza explicitamente con
   ::-webkit-scrollbar (Chrome/Edge) y scrollbar-color (Firefox) a nivel
   global para que cubra cualquier contenedor con scroll de la app. */
html.dark-mode ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html.dark-mode ::-webkit-scrollbar-track {
  background: #1c1e20;
}
html.dark-mode ::-webkit-scrollbar-thumb {
  background: #4a4e54;
  border-radius: 5px;
}
html.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #5c6169;
}
html.dark-mode * {
  scrollbar-color: #4a4e54 #1c1e20;
  scrollbar-width: thin;
}

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" (shorthand), no solo "background-color": algunos paneles
     (ej. "FILTROS DE BUSQUEDA" en diagrama/esquema_servicio_periodo_general.php)
     traen su propio style="background: linear-gradient(...)" inline -- forzar
     solo background-color deja el background-image (el degrade) intacto por
     encima, y como el titulo tambien se fuerza a texto claro, quedaba texto
     claro sobre un degrade claro (case real: "FILTROS DE BUSQUEDA" ilegible).
     El shorthand con !important anula tambien el background-image inline. */
  background: #1c1e20 !important;
  border-color: #2a2c2f !important;
  color: #e6e6e6 !important;
}
html.dark-mode .panel-heading * {
  color: #e6e6e6 !important;
}
html.dark-mode .panel-body {
  /* Mismo caso que arriba pero con background-color solo (sin gradiente):
     paneles como el mismo "FILTROS DE BUSQUEDA" traen
     style="background-color:#fafafa" en el body, y antes solo se forzaba el
     texto (no el fondo), quedando texto claro sobre fondo claro. */
  background-color: #212325 !important;
  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;
}
/* Excepcion: filas .rowData que ADEMAS traen su propio background-color de
   estado (verde/rosa/amarillo/etc, ej. site/calendario_tareas.php segun si
   la OT tiene informe cargado o no) -- la regla generica de arriba (mismo
   patron .rowData:hover) les ganaba en :hover y las dejaba con el gris fijo
   #2e3134, mucho mas oscuro que el color propio de la fila (confirmado por
   el usuario: "al pararme sobre las filas, se ven demasiado oscuras", perdian
   el color que indica el estado). NOTA: la primera version de este fix solo
   agregaba "filter: brightness(0.85)" asumiendo que el filter oscurecia el
   background-color inline (#90ed7d) -- pero filter no cambia que regla gana
   la cascada para la propiedad background-color en si: como esta excepcion
   no declaraba background-color, la regla generica de arriba (que SI la
   declara, con !important) seguia ganando esa propiedad especifica y el
   filter terminaba oscureciendo el GRIS de esa regla, no el color real
   (confirmado con Playwright: backgroundColor computado quedaba en
   rgb(46,49,52) = #2e3134 exacto, sin importar el filter). Fix real:
   declarar background-color explicito (mismo hex que el inline) en esta
   misma regla para volver a ganarle a la generica, y recien ahi aplicar el
   filter para oscurecerlo. En site/calendario_tareas.php la clase rowData
   esta en cada <td> (via contentOptions), no en el <tr> (via rowOptions)
   como en otras vistas -- por eso hace falta tambien la variante CON
   espacio del atributo (misma causa que el bloque de mas abajo: el 'style'
   generado por contentOptions no siempre tiene el mismo formato). */
html.dark-mode .rowData[style*="background-color:#90ed7d" i]:hover,
html.dark-mode .rowData[style*="background-color: #90ed7d" i]:hover {
  background-color: #90ed7d !important;
  filter: brightness(0.85);
  color: #1a1a1a !important;
}
html.dark-mode .rowData[style*="background-color:#F9A5A5" i]:hover,
html.dark-mode .rowData[style*="background-color: #F9A5A5" i]:hover {
  background-color: #F9A5A5 !important;
  filter: brightness(0.85);
  color: #1a1a1a !important;
}
html.dark-mode .rowData[style*="background-color:#FFDD73" i]:hover,
html.dark-mode .rowData[style*="background-color: #FFDD73" i]:hover {
  background-color: #FFDD73 !important;
  filter: brightness(0.85);
  color: #1a1a1a !important;
}
html.dark-mode .rowData[style*="background-color:#F8F1AE" i]:hover,
html.dark-mode .rowData[style*="background-color: #F8F1AE" i]:hover {
  background-color: #F8F1AE !important;
  filter: brightness(0.85);
  color: #1a1a1a !important;
}
html.dark-mode .rowData[style*="background-color:#ff9b49" i]:hover,
html.dark-mode .rowData[style*="background-color: #ff9b49" i]:hover {
  background-color: #ff9b49 !important;
  filter: brightness(0.85);
  color: #1a1a1a !important;
}
html.dark-mode .rowData[style*="background-color:#dc4ffb" i]:hover,
html.dark-mode .rowData[style*="background-color: #dc4ffb" i]:hover {
  background-color: #dc4ffb !important;
  filter: brightness(0.85);
  color: #1a1a1a !important;
}
html.dark-mode .rowData[style*="background-color:#92C2DD" i]:hover,
html.dark-mode .rowData[style*="background-color: #92C2DD" i]:hover {
  background-color: #92C2DD !important;
  filter: brightness(0.85);
  color: #1a1a1a !important;
}
html.dark-mode .rowData[style*="background-color:#F1B476" i]:hover,
html.dark-mode .rowData[style*="background-color: #F1B476" i]:hover {
  background-color: #F1B476 !important;
  filter: brightness(0.85);
  color: #1a1a1a !important;
}
html.dark-mode .rowData[style*="background-color:#90ed7d" i]:hover td,
html.dark-mode .rowData[style*="background-color: #90ed7d" i]:hover td,
html.dark-mode .rowData[style*="background-color:#F9A5A5" i]:hover td,
html.dark-mode .rowData[style*="background-color: #F9A5A5" i]:hover td,
html.dark-mode .rowData[style*="background-color:#FFDD73" i]:hover td,
html.dark-mode .rowData[style*="background-color: #FFDD73" i]:hover td,
html.dark-mode .rowData[style*="background-color:#F8F1AE" i]:hover td,
html.dark-mode .rowData[style*="background-color: #F8F1AE" i]:hover td,
html.dark-mode .rowData[style*="background-color:#ff9b49" i]:hover td,
html.dark-mode .rowData[style*="background-color: #ff9b49" i]:hover td,
html.dark-mode .rowData[style*="background-color:#dc4ffb" i]:hover td,
html.dark-mode .rowData[style*="background-color: #dc4ffb" i]:hover td,
html.dark-mode .rowData[style*="background-color:#92C2DD" i]:hover td,
html.dark-mode .rowData[style*="background-color: #92C2DD" i]:hover td,
html.dark-mode .rowData[style*="background-color:#F1B476" i]:hover td,
html.dark-mode .rowData[style*="background-color: #F1B476" i]:hover td {
  color: #1a1a1a !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;
}
/* kv-grid.css tambien define td.kv-group-even/td.kv-group-odd (columnas con
   'group'=>true, usado en 14 vistas -- ej. la columna "Fecha de Asistencia"
   de site/calendario_tareas.php) con background-color:#f0f1ff/#f9fcff
   !important -- gana SIEMPRE, incluso a un contentOptions que pone su propio
   style="background-color:#90ed7d" (verde) o F9A5A5 (rosa) segun el estado
   de la fila (confirmado con Playwright: computedBg quedaba en rgb(240,241,255)
   pese al style inline). Es un comportamiento preexistente de la libreria,
   no algo que dark-mode haya introducido, pero en dark mode ese celeste muy
   claro fijo se ve como un bloque roto en medio de filas oscuras. No se
   puede restaurar el verde/rosa real por CSS (no hay forma de leer el style
   inline condicionalmente), asi que se lleva a un gris oscuro neutro
   consistente con el resto del tema en vez de dejar el celeste claro. */
html.dark-mode td.kv-group-even {
  background-color: #2c2f33 !important;
  color: #d6d6d6 !important;
}
html.dark-mode td.kv-group-odd {
  background-color: #212325 !important;
  color: #d6d6d6 !important;
}
html.dark-mode .table-hover td.kv-group-even:hover {
  background-color: #34383c !important;
}
html.dark-mode .table-hover td.kv-group-odd:hover {
  background-color: #26282a !important;
}
/* Estas mismas celdas .kv-group-even/-odd, cuando ADEMAS traen un
   contentOptions de estado (background-color:#90ed7d/#F9A5A5/etc, como en
   site/calendario_tareas.php: la columna "Fecha de Asistencia" usa el mismo
   $contentOptions que el resto de las columnas de la fila), quedaban con
   texto casi negro (color:#1a1a1a, forzado por el bloque ".table > tbody >
   tr > td[style*=...]" de mas arriba, que tiene mayor especificidad que
   esta regla) sobre el fondo gris oscuro neutro de aqui arriba (#2c2f33):
   combinacion casi ilegible (confirmado por el usuario: "la fecha de la
   fila no se ve bien"). El fondo NO puede restaurarse al color real (ver
   nota de arriba), asi que corresponde texto claro (#d6d6d6, el mismo de
   esta regla) en vez de oscuro -- selector mas especifico que gana ambas
   reglas de arriba para esta combinacion puntual. */
html.dark-mode .table > tbody > tr > td.kv-group-even[style*="background-color"],
html.dark-mode .table > tbody > tr > td.kv-group-odd[style*="background-color"] {
  color: #d6d6d6 !important;
}
/* Al hacer hover sobre una de estas mismas celdas (agrupada + con estado),
   la excepcion ".rowData[style*=...]:hover" de mas arriba (pensada para
   celdas normales, que SI restaura el verde/rosa real con filter) tiene mas
   especificidad que ".table-hover td.kv-group-even:hover" de aqui arriba y
   le ganaba, haciendo que la celda "Fecha de Asistencia" pase de gris
   oscuro neutro (en reposo) a verde/rosa atenuado SOLO mientras esta bajo
   el mouse -- un parpadeo de color inconsistente con el resto de la
   columna (confirmado por el usuario con captura: "el hover para la fecha
   no se ve correctamente"). Como esta celda ya renuncia al color real en
   reposo (ver nota de arriba, no se puede leer el style inline
   condicionalmente), en hover debe mantenerse igual de neutra -- se reusa
   el mismo gris ya definido para el hover de estas columnas
   (.table-hover td.kv-group-even/-odd:hover) con especificidad suficiente
   para ganarle a la excepcion de color real, y se anula el filter que esa
   excepcion aplicaba. */
html.dark-mode .table > tbody > tr > td.kv-group-even[style*="background-color"]:hover {
  background-color: #34383c !important;
  filter: none;
  color: #d6d6d6 !important;
}
html.dark-mode .table > tbody > tr > td.kv-group-odd[style*="background-color"]:hover {
  background-color: #26282a !important;
  filter: none;
  color: #d6d6d6 !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 {
  /* #6b6f76 (valor previo) daba muy poco contraste contra el fondo casi
     negro del datepicker en dark mode (confirmado por el usuario: "los dias
     no se ven correctamente") -- se aclara sin llegar al gris de los dias
     normales (#d6d6d6), para que se note que siguen "atenuados" pero se
     puedan leer. */
  color: #8f96a3 !important;
}
/* site/calendario_tareas.php pinta los dias con OT pendiente/al dia con
   background-color:#F9A5A5 (rosa) o #FFDD73 (amarillo) via JS inline
   ($(this).css(...) en el registerJs de esta vista) y ademas fija
   color:#333333 (oscuro) inline en el mismo elemento -- pero la regla
   generica de arriba (color:#d6d6d6 !important en TODOS los td) tiene mas
   especificidad que un simple style inline (sin !important) y le gana,
   dejando texto gris claro sobre fondo rosa/amarillo pastel: mal contraste
   (confirmado por el usuario: "el color de la letra de los dias a color
   deberia ser mas oscuro"). El atributo style de un elemento pintado via
   jQuery .css() con un hex ("#F9A5A5") queda normalizado por el propio
   navegador a formato rgb() ("background-color: rgb(249, 165, 165)") --
   por eso el selector de atributo debe matchear el rgb(), no el hex
   original (verificado con getAttribute('style') via Playwright: un
   selector [style*="background-color:#F9A5A5"] nunca matchea aqui).
   td.day + atributo para superar la especificidad de la regla generica,
   sin afectar el ".active" celeste por defecto de otros datepickers. */
html.dark-mode .datepicker table tr td.day[style*="background-color: rgb(249, 165, 165)"],
html.dark-mode .datepicker table tr td.day[style*="background-color: rgb(255, 221, 115)"] {
  color: #1a1a1a !important;
}
html.dark-mode .datepicker table tr td.day: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;
}

/* .st-card / .st-datos-st-box: clases propias del proyecto (no de Bootstrap/
   AdminLTE), usadas en el formulario de carga de Solicitud de Trabajo
   (_form_nuevo.php) y en el de creacion de OT desde ST (_form_st.php) para
   las "cards" con header. Ambas declaran su propio <style> con fondo
   blanco/gris claro fijo (background:#fff, background:#eef1f4) sin ningun
   override para dark mode -- quedaban con el fondo oscuro de la pagina
   (.content-wrapper, #181a1b) filtrandose detras de los inputs, dejando toda
   la card practicamente negra. !important porque estas reglas viven en un
   <style> inline dentro de cada vista, cargado despues de este archivo en el
   orden del documento -- sin !important seguirian ganando por orden de
   aparicion aun con la misma especificidad. */
html.dark-mode .st-card,
html.dark-mode .st-datos-st-box,
html.dark-mode .st-subbox {
  background-color: #212325 !important;
  border-color: #2a2c2f !important;
  color: #d6d6d6 !important;
}
html.dark-mode .st-card-header,
html.dark-mode .st-datos-st-box > .box-header,
html.dark-mode .st-datos-titulo,
html.dark-mode .st-subheader,
html.dark-mode .st-subbox > .box-header {
  background-color: #1c1e20 !important;
  border-color: #2a2c2f !important;
  color: #e6e6e6 !important;
}
html.dark-mode .st-card-title,
html.dark-mode .st-datos-st-box .box-title,
html.dark-mode .st-subbox .box-title {
  color: #e6e6e6 !important;
}
html.dark-mode .st-card-body,
html.dark-mode .st-og-body {
  color: #d6d6d6 !important;
}
html.dark-mode .st-datos-label {
  color: #9aa0a8 !important;
}
html.dark-mode .st-datos-valor {
  color: #e6e6e6 !important;
}
html.dark-mode .st-dg-header-right #label_cuadrilla .label-default {
  background-color: #4a4d52 !important;
  color: #e6e6e6 !important;
}

/* .st-tabla-limpia / .st-btn-adjuntar: clases propias del proyecto usadas en
   _form_nuevo.php para las tablas de tareas/materiales y los botones
   "Agregar"/"Importar Lista"/"Adjuntar archivos" dentro de las st-card. No es
   una tabla .table de Bootstrap (por eso las reglas de tabla de mas arriba no
   la alcanzan) y el boton tiene su propio fondo blanco fijo -- ambos quedaban
   en blanco sobre el fondo oscuro de la card. */
html.dark-mode .st-tabla-limpia thead th {
  background-color: #1c1e20 !important;
  color: #9aa0a8 !important;
  border-bottom-color: #2a2c2f !important;
}
html.dark-mode .st-tabla-limpia tbody td {
  color: #d6d6d6 !important;
  border-bottom-color: #2a2c2f !important;
}
html.dark-mode .st-btn-adjuntar {
  background-color: #26282a !important;
  border-color: #3c8dbc !important;
  color: #fff !important;
}
html.dark-mode .st-btn-adjuntar * {
  color: #fff !important;
}
html.dark-mode .st-btn-adjuntar:hover,
html.dark-mode .st-btn-adjuntar:focus {
  background-color: #2c2f33 !important;
  color: #fff !important;
}

/* .tarjeta-st-mini: tarjetas resumen (Generadas/Finalizadas/En Proceso/
   Pendientes) en el index de Solicitudes de Trabajo. Fondo blanco y texto
   del label gris oscuro fijos, definidos en un <style> inline dentro de la
   vista -- el numero/icono usan color inline por tarjeta (acento propio) y
   ya se leen bien en fondo oscuro, no se tocan. */
html.dark-mode .tarjeta-st-mini {
  background-color: #212325 !important;
  box-shadow: none !important;
}
html.dark-mode .tarjeta-st-mini span {
  color: #b7bdc6 !important;
}
html.dark-mode .tarjeta-st-mini span b {
  color: #e6e6e6 !important;
}

/* kartik\widgets\SwitchInput (bootstrap-switch), usado por ej. en la columna
   "Contabilizar" de Rubros Contables. El track on/off ya tiene buen contraste
   (verde/rojo con texto blanco, definidos por color inline via onColor/
   offColor), no se toca. Lo que si tenia el CSS base sin cubrir era el borde
   del switch (#cccccc fijo, gris muy claro) que se volvia practicamente
   invisible contra el fondo oscuro de la pagina, dejando el switch "flotando"
   sin borde definido. */
html.dark-mode .bootstrap-switch {
  border-color: #565a61 !important;
}
/* Badges circulares "Alertas" de site/inicio_sin_cliente.php (Panel de
   Novedades): cada uno tiene un color propio (icon_blue, icon_green, etc.)
   menos el "negro" (SMs Pendientes de Aprobación, ver web/css/main.css
   .icon_black{color:black}/.rounded-circle-black{border:1px solid #010001})
   -- pensado para contrastar contra un fondo CLARO, pero en dark mode el
   icono y el borde del circulo quedan casi negro sobre casi negro,
   practicamente invisibles (confirmado por el usuario con captura: "se
   confunde con el fondo"). El resto de los colores (azul, verde, rojo, etc.)
   siguen siendo vividos sobre fondo oscuro y no necesitan ajuste; este es el
   unico pensado como "negro sobre blanco" que se rompe al invertir el tema. */
html.dark-mode .icon_black {
  color: #d6d6d6;
}
html.dark-mode .rounded-circle-black {
  border-color: #6b6f76;
}
html.dark-mode .icon-wrapper-bg.bg_black {
  background-color: #9aa0a8;
}

/* Convencion recurrente en decenas de vistas/JS del proyecto (movimiento.coffee,
   modals.coffee, movimiento_adicional.coffee, movimiento_ajuste.coffee,
   site/estado_items.php y otras) para marcar ESTADO (colores vivos, con
   significado propio: alerta/exito/pendiente) via style inline: pintan el
   elemento (tr, <div class="caja">, <badge> de checkbox de filtro, etc.) con
   background-color:#F9A5A5 (rosa, rechazado/stock insuficiente), #90ed7d
   (verde, aprobado/ok) o #FFDD73 (amarillo, controlado), sin fijar el color
   de texto -- en dark mode el texto hereda el gris claro global (#d6d6d6) y
   queda casi ilegible. Se mantiene el fondo vivo (es informacion, debe seguir
   distinguiendose) y solo se fuerza texto oscuro legible encima. Selector de
   atributo generico (no solo tr/.caja) para cubrir badges y otros elementos
   con el mismo patron; flag "i" (case-insensitive, CSS Selectors L4) porque
   el mismo color se escribe con distinta capitalizacion segun el archivo.
   "white" se restringe al tag <badge> puntual (checkbox "NO CONTROLADO").
   #F8F1AE/#ff9b49/#dc4ffb/#92C2DD/#FFFF5C/#F1B476: mismos colores vivos de
   leyenda en diagrama/esquema_servicio_periodo_general.php y
   diagrama/esquema.php (PARTE CARGADO NO CONTROLADO/SERVICIO SECUNDARIO/
   SERVICIO PRINCIPAL/NOVEDAD). */
html.dark-mode [style*="background-color:#F9A5A5" i],
html.dark-mode [style*="background-color: #F9A5A5" i],
html.dark-mode [style*="background-color:#90ed7d" i],
html.dark-mode [style*="background-color: #90ed7d" i],
html.dark-mode [style*="background-color:#FFDD73" i],
html.dark-mode [style*="background-color: #FFDD73" i],
html.dark-mode [style*="background-color:#F8F1AE" i],
html.dark-mode [style*="background-color: #F8F1AE" i],
html.dark-mode [style*="background-color:#ff9b49" i],
html.dark-mode [style*="background-color: #ff9b49" i],
html.dark-mode [style*="background-color:#dc4ffb" i],
html.dark-mode [style*="background-color: #dc4ffb" i],
html.dark-mode [style*="background-color:#92C2DD" i],
html.dark-mode [style*="background-color: #92C2DD" i],
html.dark-mode [style*="background-color:#FFFF5C" i],
html.dark-mode [style*="background-color: #FFFF5C" i],
html.dark-mode [style*="background-color:#F1B476" i],
html.dark-mode [style*="background-color: #F1B476" i],
html.dark-mode badge[style*="background-color:white" i] {
  color: #1a1a1a !important;
}
/* Variantes CON espacio despues de ":" (ademas de las de arriba, sin
   espacio): Yii/kartik-grid re-serializa el 'style' string pasado en
   contentOptions y segun el punto exacto del codigo que lo genera queda
   "background-color: #90ed7d" (con espacio, ej. site/resumen.php) o
   "background-color:#90ed7d" (sin espacio) -- confirmado con outerHTML via
   Playwright. Sin esta variante, los <a> (N° ST, N° OT, N° Informe, etc.)
   dentro de estas celdas seguian heredando el celeste de enlace
   (html.dark-mode a:not(.btn)) en vez del texto oscuro forzado (reportado
   por el usuario: "oscurecer los n° de la grilla para que se vean
   correctamente" en site/resumen). */
html.dark-mode [style*="background-color: #F9A5A5" i] *,
html.dark-mode [style*="background-color:#F9A5A5" i] *,
html.dark-mode [style*="background-color: #90ed7d" i] *,
html.dark-mode [style*="background-color:#90ed7d" i] *,
html.dark-mode [style*="background-color: #FFDD73" i] *,
html.dark-mode [style*="background-color:#FFDD73" i] *,
html.dark-mode [style*="background-color: #F8F1AE" i] *,
html.dark-mode [style*="background-color:#F8F1AE" i] *,
html.dark-mode [style*="background-color: #ff9b49" i] *,
html.dark-mode [style*="background-color:#ff9b49" i] *,
html.dark-mode [style*="background-color: #dc4ffb" i] *,
html.dark-mode [style*="background-color:#dc4ffb" i] *,
html.dark-mode [style*="background-color: #92C2DD" i] *,
html.dark-mode [style*="background-color:#92C2DD" i] *,
html.dark-mode [style*="background-color: #FFFF5C" i] *,
html.dark-mode [style*="background-color:#FFFF5C" i] *,
html.dark-mode [style*="background-color: #F1B476" i] *,
html.dark-mode [style*="background-color:#F1B476" i] *,
html.dark-mode badge[style*="background-color:white" i] * {
  color: #1a1a1a !important;
}
/* Cuando estas mismas celdas de estado viven dentro de una tabla Bootstrap
   (class="table", como el grid de site/resumen.php: N° ST/N° OT/Descripcion/
   etc. con contentOptions pintando background-color:#90ed7d/#F9A5A5 por
   celda), la regla ".table > tbody > tr > td { color:#d6d6d6 !important }"
   (mas abajo en este archivo) tiene mayor especificidad que el selector de
   atributo generico de arriba y le gana, dejando el texto propio de la
   celda (no el de sus hijos, que si estaban cubiertos por el bloque de
   arriba) en gris claro sobre fondo verde/rosa: mal contraste (confirmado
   por el usuario: "no se ven correctamente los partes" en site/resumen).
   Mismos selectores de color pero con el prefijo ".table > tbody > tr > td"
   para igualar/superar esa especificidad. Se matchean ambas variantes CON y
   SIN espacio despues de los ":" porque kartik-grid/Yii re-serializa el
   'style' string pasado en contentOptions y en unos casos queda
   "background-color: #90ed7d" (con espacio) y en otros
   "background-color:#90ed7d" (sin espacio) segun el punto del codigo que lo
   genera -- verificado con outerHTML via Playwright, no es solo mayus/minus
   como en el caso anterior de reporte_hrs_viandas_general.php. */
html.dark-mode .table > tbody > tr > td[style*="background-color:#F9A5A5" i],
html.dark-mode .table > tbody > tr > td[style*="background-color: #F9A5A5" i],
html.dark-mode .table > tbody > tr > td[style*="background-color:#90ed7d" i],
html.dark-mode .table > tbody > tr > td[style*="background-color: #90ed7d" i],
html.dark-mode .table > tbody > tr > td[style*="background-color:#FFDD73" i],
html.dark-mode .table > tbody > tr > td[style*="background-color: #FFDD73" i],
html.dark-mode .table > tbody > tr > td[style*="background-color:#F8F1AE" i],
html.dark-mode .table > tbody > tr > td[style*="background-color: #F8F1AE" i],
html.dark-mode .table > tbody > tr > td[style*="background-color:#ff9b49" i],
html.dark-mode .table > tbody > tr > td[style*="background-color: #ff9b49" i],
html.dark-mode .table > tbody > tr > td[style*="background-color:#dc4ffb" i],
html.dark-mode .table > tbody > tr > td[style*="background-color: #dc4ffb" i],
html.dark-mode .table > tbody > tr > td[style*="background-color:#92C2DD" i],
html.dark-mode .table > tbody > tr > td[style*="background-color: #92C2DD" i],
html.dark-mode .table > tbody > tr > td[style*="background-color:#FFFF5C" i],
html.dark-mode .table > tbody > tr > td[style*="background-color: #FFFF5C" i],
html.dark-mode .table > tbody > tr > td[style*="background-color:#F1B476" i],
html.dark-mode .table > tbody > tr > td[style*="background-color: #F1B476" i] {
  color: #1a1a1a !important;
}

/* diagrama/esquema*.php: los labels de leyenda ("PARTE CARGADO...", etc.)
   NO estan dentro del div de color (son <span> hermanos), asi que las reglas
   de arriba no los alcanzan -- fijan su propio color:#495057 (gris oscuro de
   Bootstrap) inline, legible en fondo claro pero invisible sobre el fondo
   oscuro de .panel-body en dark mode. Mismo #495057 usado en 9 lugares del
   proyecto. */
html.dark-mode [style*="color:#495057" i] {
  color: #d6d6d6 !important;
}

/* Grilla de diagrama/esquema_servicio*.php (#table-sticky): a diferencia de
   la leyenda (que pinta con style inline), las celdas de horas de la propia
   grilla usan clases fijas de web/css/site.css -- .F/.TH/.TS/.TP/.PC/.NC/.T/
   .N/.S -- que solo fijan background-color, sin color de texto propio. En
   dark mode el numero de horas (8, 12, etc.) heredaba el gris claro global
   sobre estos fondos pasteles y quedaba casi ilegible (caso real: "12"
   invisible sobre .NC/.T, "8" con mal contraste sobre .PC/.TH). Se escopea a
   #table-sticky (el contenedor real de esta grilla en esquema_servicio.php,
   esquema_servicio_periodo.php y esquema_servicio_periodo_general.php) en
   vez de un selector global .T/.N/.S/.F, porque son nombres de una sola
   letra con alto riesgo de chocar con otras clases del resto de la app.
   SIN !important a proposito: algunas de estas celdas ademas traen su propio
   style="color:#3F72AF" (azul) o "color:#CE1212" (rojo) inline via
   $color_condicion, para marcar horas por debajo de lo esperado -- es
   informacion real que debe seguir viendose, y un inline style sin
   !important ya le gana a una clase sin !important, asi que alcanza con
   esto para las celdas SIN color propio (que son la mayoria) sin pisar las
   que si lo tienen. */
html.dark-mode #table-sticky .F,
html.dark-mode #table-sticky .TH,
html.dark-mode #table-sticky .TS,
html.dark-mode #table-sticky .TP,
html.dark-mode #table-sticky .PC,
html.dark-mode #table-sticky .NC,
html.dark-mode #table-sticky .T,
html.dark-mode #table-sticky .N,
html.dark-mode #table-sticky .S {
  color: #1a1a1a;
}

/* Mismo patron pero con gainsboro/#F5F5F5/#EBEBEB/rgb(255,255,255) -- estos
   NO son colores de alerta, son solo un gris/blanco neutro usado para
   diferenciar sutilmente una fila de otra (ej. "franco"/dia de descanso vs
   fila normal en site/reporte_hrs_viandas_general.php; encabezados de grupo
   y numero de fila en diagrama/esquema_servicio_periodo_general.php;
   "gainsboro" solo aparece ~127 veces en el proyecto). Ahi forzar solo el
   texto oscuro dejaba bloques blancos/grises brillantes en medio de una
   pagina oscura -- se ve fuera de lugar aunque el texto sea legible. Como no
   es informacion que deba mantenerse vivida, se reemplaza directamente por
   dos grises oscuros (distintos entre si, para conservar la distincion entre
   filas/encabezados) en vez de solo ajustar el texto. */
html.dark-mode [style*="background-color:gainsboro" i],
html.dark-mode [style*="background-color:#EBEBEB" i] {
  background-color: #2c2f33 !important;
  color: #d6d6d6 !important;
}
html.dark-mode [style*="background-color:#F5F5F5" i],
html.dark-mode [style*="background-color:rgb(255, 255, 255)" i] {
  background-color: #212325 !important;
  color: #d6d6d6 !important;
}
html.dark-mode [style*="background-color:gainsboro" i] *:not(a),
html.dark-mode [style*="background-color:#EBEBEB" i] *:not(a),
html.dark-mode [style*="background-color:#F5F5F5" i] *:not(a),
html.dark-mode [style*="background-color:rgb(255, 255, 255)" i] *:not(a) {
  color: #d6d6d6 !important;
}

/* jquery.dataTables (web/css/jquery.dataTables.min.css), usado en ~15 vistas
   (site/reporte_servicios.php, site/certificacion*.php, site/index*.php,
   site/panel_novedades*.php, etc. -- tablas con class="display") -- es una
   libreria aparte de kartik-grid/Bootstrap, nunca cubierta en este archivo.
   Su CSS fija fondo blanco en las filas (#fff, y variantes mas claras aun
   para "odd"/columna ordenada/hover) sin que ninguna regla de mas arriba la
   alcance (no usa la clase .table de Bootstrap), y el texto de paginacion
   fija color:#333 !important -- ambos casos quedan casi invisibles en dark
   mode (texto claro heredado sobre fondo blanco, o texto oscuro fijo sobre
   el fondo oscuro de la pagina). */
html.dark-mode table.dataTable tbody tr {
  background-color: #212325 !important;
  color: #d6d6d6;
}
html.dark-mode table.dataTable.display tbody tr.odd,
html.dark-mode table.dataTable.stripe tbody tr.odd {
  background-color: #26282a !important;
}
html.dark-mode table.dataTable.display tbody tr > .sorting_1,
html.dark-mode table.dataTable.display tbody tr > .sorting_2,
html.dark-mode table.dataTable.display tbody tr > .sorting_3,
html.dark-mode table.dataTable.order-column tbody tr > .sorting_1,
html.dark-mode table.dataTable.order-column tbody tr > .sorting_2,
html.dark-mode table.dataTable.order-column tbody tr > .sorting_3 {
  background-color: #2c2f33 !important;
}
html.dark-mode table.dataTable.display tbody tr:hover,
html.dark-mode table.dataTable.hover tbody tr:hover {
  background-color: #2e3134 !important;
}
html.dark-mode table.dataTable thead th,
html.dark-mode table.dataTable thead td,
html.dark-mode table.dataTable tfoot th,
html.dark-mode table.dataTable tfoot td {
  border-color: #2a2c2f;
  color: #e6e6e6;
}
html.dark-mode table.dataTable tbody th,
html.dark-mode table.dataTable tbody td {
  border-color: #2a2c2f !important;
}
html.dark-mode .dataTables_empty {
  color: #9aa0a8 !important;
}
html.dark-mode .dataTables_info,
html.dark-mode .dataTables_length,
html.dark-mode .dataTables_filter {
  color: #d6d6d6;
}
html.dark-mode .paginate_button {
  color: #d6d6d6 !important;
}
html.dark-mode .paginate_button.current,
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #1a1a1a !important;
  border-color: #979797 !important;
}
html.dark-mode .paginate_button.disabled,
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  color: #6b6f76 !important;
}
html.dark-mode .dataTables_filter input,
html.dark-mode .dataTables_length select {
  background-color: #26282a !important;
  border: 1px solid #565a61 !important;
  color: #e6e6e6 !important;
}