/* Modo oscuro. 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).
   El sidebar (.pcoded-navbar) ya es oscuro por defecto en este template, asi
   que el foco esta en el header y el contenido principal (que son claros por
   defecto): cards, tablas (kartik-grid renderiza Bootstrap 3 estandar,
   bsVersion 3.4.1 segun config/params.php), formularios, modales, popovers
   (PopoverX, muy usado en las alertas) y Select2. Puede haber vistas puntuales
   sin cubrir todavia; se van agregando a medida que aparezcan.
*/

html.dark-mode {
  color-scheme: dark;
  /* --text-title/--text-no-active (definidas en :root, web/css/new_style.css:11-12) son
     los colores de texto de las solapas (li.active .nav-link-text / .nav-tabs > li > a),
     pensados para fondo claro (#3d444a, #87a2bf). Sin redefinirlas para modo oscuro, la
     solapa activa quedaba con texto gris oscuro casi invisible sobre el fondo oscuro de
     la solapa (ver .nav-tabs > li.active > a mas abajo). */
  --text-title: #f0f0f0;
  --text-no-active: #9aa8b8;
}

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

/* Header */
html.dark-mode .pcoded-header {
  background-color: #1f2124 !important;
  color: #d6d6d6;
}
html.dark-mode .pcoded-header a,
html.dark-mode .pcoded-header .dropdown-toggle {
  color: #d6d6d6;
}
html.dark-mode .pcoded-header a:hover {
  color: #fff;
}
html.dark-mode .content-header h1 {
  color: #e6e6e6;
}

/* Cards (usadas en casi todas las pantallas) */
html.dark-mode .card {
  background-color: #212325;
  border-color: #2a2c2f;
  color: #d6d6d6;
}
/* .card-title (new_style.css:63, ej. "Requerimientos <mes>-<año>" en Inicio) trae
   color:#3d444a fijo, pensado para el fondo blanco de una card en modo claro. Sin
   esto queda casi ilegible sobre el fondo oscuro que le pone la regla de arriba. */
html.dark-mode .card-title {
  color: #e6e6e6 !important;
}
html.dark-mode .card .card-header {
  background-color: #1c1e20;
  border-color: #2a2c2f;
  color: #e6e6e6;
}
html.dark-mode .card .card-footer {
  background-color: #1c1e20;
  border-color: #2a2c2f;
}
html.dark-mode .custom-card,
html.dark-mode .custom-card-2 {
  background-color: #212325 !important;
  border-color: #2a2c2f !important;
  color: #d6d6d6;
}
html.dark-mode .small-box {
  background-color: #212325 !important;
}

/* kartik\grid\GridView envuelve la grilla en .panel.panel-default (Bootstrap 3,
   distinto de .card). !important porque kv-grid.css puede ganarle segun el
   orden de carga de los asset bundles. */
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 .well {
  background-color: #1c1e20;
  border-color: #2a2c2f;
  color: #d6d6d6;
}

/* Tablas */
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;
}
/* Encabezado de dia feriado en el calendario de diagrama (esquema_servicio_periodo.php) --
   mismo problema que el semaforo del cuerpo: el th trae background-color inline (#F9A5A5)
   que la regla de arriba pisaba con !important. Se agrego class="th-feriado" en la vista
   para poder reafirmarlo aca. */
html.dark-mode .table thead th.th-feriado {
  background-color: #F9A5A5 !important;
  color: #1c1e20 !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;
}
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;
}
/* Fondo por defecto de filas/celdas del body de cualquier tabla: sin esto
   las filas "pares" (o cualquier fila sin clase de striping/contexto)
   quedaban en el blanco por defecto del navegador. Las reglas de mas abajo
   (striped, contextuales success/warning/etc, rowData) son mas especificas
   y le ganan a esta donde corresponda, asi que no se pisan entre si. */
html.dark-mode .table > tbody > tr,
html.dark-mode .table > tbody > tr > td,
html.dark-mode .table > tbody > tr > th {
  background-color: transparent !important;
}
/* Calendario de diagrama (esquema.php, esquema_servicio.php, esquema_servicio_periodo.php,
   reporte_servicio.php, reporte_servicio_periodo.php): .F/.TH/.T/.N/.S traen su propio
   background-color (ver web/css/site.css) para el semaforo de categorias del calendario
   (Franco/Parte Cargado/Trabaja/Novedad). La regla de arriba los pisaba con
   transparent !important, perdiendose los colores en modo oscuro. Se reafirman aca (mayor
   especificidad que la regla de arriba, gana el empate de !important) con texto oscuro
   legible sobre el pastel de fondo, ya que el texto claro por defecto de .table en modo
   oscuro quedaria ilegible sobre esos fondos claros. */
html.dark-mode .table > tbody > tr > td.F,
html.dark-mode .table > tbody > tr > td.TH,
html.dark-mode .table > tbody > tr > td.T,
html.dark-mode .table > tbody > tr > td.N,
html.dark-mode .table > tbody > tr > td.S {
  color: #1c1e20 !important;
}
html.dark-mode .table > tbody > tr > td.F {
  background-color: #F9A5A5 !important;
}
html.dark-mode .table > tbody > tr > td.TH {
  background-color: #90ed7d !important;
}
html.dark-mode .table > tbody > tr > td.T {
  background-color: #F8F1AE !important;
}
html.dark-mode .table > tbody > tr > td.N {
  background-color: #92C2DD !important;
}
html.dark-mode .table > tbody > tr > td.S {
  background-color: #F1B476 !important;
}
/* Filas de "estado" (comprado/pendiente/diferente/total) pintadas con
   background-color puesto directo en el <tr> por JS (web/js/modals.js:
   items solicitados, items de OC, movimientos, habilitaciones, IDA) -- no
   tienen clase propia como el semaforo del calendario de arriba, asi que la
   regla de mas arriba (linea ~157) tambien se las pisaba con
   transparent!important y se perdia el color en modo oscuro (ver captura:
   "Resumen de Solicitud de Materiales" sin verde/rosa). El color esta puesto
   en el <tr>, pero el <td> de adentro (sin su propio background) es el que
   efectivamente se termina pintando encima -- se reafirma el color ahi
   tambien, por atributo ya que no hay clase para engancharse, con texto
   oscuro legible arriba del pastel. */
html.dark-mode .table > tbody > tr[style*="background-color:#90ed7d"],
html.dark-mode .table > tbody > tr[style*="background-color:#90ed7d"] > td,
html.dark-mode .table > tbody > tr[style*="background-color:#F9A5A5"],
html.dark-mode .table > tbody > tr[style*="background-color:#F9A5A5"] > td,
html.dark-mode .table > tbody > tr[style*="background-color:#FFFF95"],
html.dark-mode .table > tbody > tr[style*="background-color:#FFFF95"] > td,
html.dark-mode .table > tbody > tr[style*="background-color:gainsboro"],
html.dark-mode .table > tbody > tr[style*="background-color:gainsboro"] > td {
  color: #1c1e20 !important;
}
html.dark-mode .table > tbody > tr[style*="background-color:#90ed7d"],
html.dark-mode .table > tbody > tr[style*="background-color:#90ed7d"] > td {
  background-color: #90ed7d !important;
}
html.dark-mode .table > tbody > tr[style*="background-color:#F9A5A5"],
html.dark-mode .table > tbody > tr[style*="background-color:#F9A5A5"] > td {
  background-color: #F9A5A5 !important;
}
html.dark-mode .table > tbody > tr[style*="background-color:#FFFF95"],
html.dark-mode .table > tbody > tr[style*="background-color:#FFFF95"] > td {
  background-color: #FFFF95 !important;
}
html.dark-mode .table > tbody > tr[style*="background-color:gainsboro"],
html.dark-mode .table > tbody > tr[style*="background-color:gainsboro"] > td {
  background-color: gainsboro !important;
}
/* site/habilitaciones.php, columna "Afectación": el color de "vigente /
   por vencer / vencido" se pone via 'contentOptions' directo en el <td>
   (SiteController -- $style calculado en la vista segun fecha_vencimiento),
   no en el <tr> como los modales de arriba, asi que ninguna de esas reglas
   lo alcanzaba y en modo oscuro quedaba sin pintar. Mismo criterio, por
   atributo sobre el <td> en vez del <tr>. #90ed7d/#F9A5A5 se repiten aca
   porque en este caso especifico estan en el <td>, no en el <tr> (las reglas
   de arriba exigen que el <tr> tenga el estilo, y aca no lo tiene). */
html.dark-mode .table > tbody > tr > td[style*="background-color:#FFDD73"],
html.dark-mode .table > tbody > tr > td[style*="background-color:#90ed7d"],
html.dark-mode .table > tbody > tr > td[style*="background-color:#F9A5A5"] {
  color: #1c1e20 !important;
}
html.dark-mode .table > tbody > tr > td[style*="background-color:#FFDD73"] {
  background-color: #FFDD73 !important;
}
html.dark-mode .table > tbody > tr > td[style*="background-color:#90ed7d"] {
  background-color: #90ed7d !important;
}
html.dark-mode .table > tbody > tr > td[style*="background-color:#F9A5A5"] {
  background-color: #F9A5A5 !important;
}
html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #26282a !important;
}
html.dark-mode .table-hover > tbody > tr:hover {
  background-color: #2e3134 !important;
}
/* El color de texto de la fila en hover no quedaba fijado en ningun lado (a
   diferencia de .rowData:hover mas abajo, que si lo tenia resuelto) y el navegador
   terminaba heredando un color oscuro de alguna otra regla de mayor especificidad
   (ej. Bootstrap), casi invisible sobre el fondo oscuro de arriba. */
html.dark-mode .table-hover > tbody > tr:hover > td,
html.dark-mode .table-hover > tbody > tr:hover > th {
  color: #f2f2f2 !important;
}
/* Tablas jQuery DataTables (class="display", ej. resumen_general.php, resumen_categorias.php,
   resumen_materiales.php, equipo/index_agrupado.php, etc.) -- no llevan la clase .table de
   Bootstrap, asi que ninguna regla de arriba las alcanzaba. jquery.dataTables.min.css les pone
   background-color:#fff fijo en tbody tr (incluida la fila de "Ningun dato disponible..."),
   por eso quedaban en una caja blanca sobre el fondo oscuro. */
html.dark-mode table.dataTable {
  color: #d6d6d6;
  border-color: #2a2c2f !important;
}
html.dark-mode table.dataTable thead th,
html.dark-mode table.dataTable thead td {
  background-color: #1c1e20 !important;
  color: #e6e6e6 !important;
  border-color: #2a2c2f !important;
}
html.dark-mode table.dataTable tbody tr,
html.dark-mode table.dataTable tbody tr.odd,
html.dark-mode table.dataTable tbody tr.even,
html.dark-mode table.dataTable tbody tr > td {
  background-color: transparent !important;
  color: #d6d6d6 !important;
  border-color: #2a2c2f !important;
}
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.hover tbody tr:hover,
html.dark-mode table.dataTable.display tbody tr:hover {
  background-color: #2e3134 !important;
}
html.dark-mode .dataTables_empty {
  color: #9aa0a6 !important;
}
/* .rowData: clase propia del proyecto, puesta via 'rowOptions' en casi todas
   las grillas (incluidas las de alertas). site.css la define con
   background-color:lightgray !important en :hover -- sobre texto ya claro
   queda ilegible sin este override. */
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;
}
html.dark-mode .kv-panel-before,
html.dark-mode .kv-grid-toolbar,
html.dark-mode .btn-toolbar {
  background-color: #212325 !important;
  border-bottom-color: #2a2c2f !important;
  color: #d6d6d6;
}
/* Varias vistas (habilitaciones y ~10 mas) envuelven el panel de filtros del
   'before' del GridView en un <div style="background-color:#f5f5f5;border:5px
   solid #ddd"> puesto asi, inline, directo en el PHP -- sin clase propia que
   se pueda apuntar por nombre. Como es un hijo directo de .kv-panel-before,
   alcanza con pisarle el fondo a ESE nivel (no *, para no tocar los
   controles de adentro). El !important local le gana al inline porque el
   inline no tiene el suyo propio. */
html.dark-mode .kv-panel-before > div {
  background-color: #212325 !important;
  border-color: #2a2c2f !important;
}
/* La misma caja de filtro con fondo claro inline, pero puesta SUELTA en el PHP
   en vez de via panel.before (reporte_ocs_sin_adjuntos.php y varias vistas mas
   de diagrama/, solicitud-trabajo/index.php, etc.) -- no cuelga de
   .kv-panel-before, asi que la regla de arriba no la alcanza. Sin clase propia
   tampoco, entonces selector por atributo sobre el inline style. Mismos
   valores que la regla de arriba para que se vean iguales. */
html.dark-mode div[style*="background-color:#f5f5f5"] {
  background-color: #212325 !important;
  border-color: #2a2c2f !important;
}
html.dark-mode .kv-panel-after {
  background-color: #212325 !important;
  border-top-color: #2a2c2f !important;
}
html.dark-mode .kv-table-header,
html.dark-mode .thead-top {
  background-color: #26282a !important;
}
/* Panes de tabs (kartik\tabs\TabsX, usado en Inicio para Mano de
   Obra/Materiales/Adicionales) heredan el fondo blanco de Bootstrap si nadie
   lo pisa. */
html.dark-mode .tab-content,
html.dark-mode .tab-pane {
  background-color: transparent;
}
html.dark-mode .nav-tabs + .tab-content,
html.dark-mode .tabs-container {
  background-color: #181a1b;
}
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. Sin box-shadow inset (Bootstrap 3 le pone sombra interior a
   .form-control, que sobre fondo ya oscuro se ve como un hueco marcado). */
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: #04a9f5 !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,
html.dark-mode .input-group-text {
  /* !important -- sin esto, el .input-group-addon base de Bootstrap (o el de site.css)
     ganaba la cascada segun el orden de carga y el addon quedaba blanco (calendario/X de
     los DatePicker de kartik, TouchSpin, etc. en todas las pantallas que los usan) */
  background-color: #2c2f33 !important;
  border-color: #565a61 !important;
  color: #d6d6d6 !important;
}

/* Select2 (usado en casi todos los filtros de las grillas) */
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: #04a9f5 !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 (PopoverX, muy usado en las alertas), 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 !important;
  border-color: #565a61 !important;
  color: #d6d6d6;
}
/* PopoverX (kartik-v) le pone AMBAS clases al titulo -- popover-title (BS3)
   y popover-header (BS4, agregada para compatibilidad) -- y el bundle BS4
   del proyecto (yii\bootstrap4\BootstrapAsset) trae su propio fondo blanco
   para .popover-header que le ganaba a esta regla sin !important. */
html.dark-mode .popover-title,
html.dark-mode .popover-header,
html.dark-mode .header_popoverx {
  background-color: #1c1e20 !important;
  border-color: #565a61 !important;
  color: #e6e6e6 !important;
}
html.dark-mode .dropdown-menu {
  background-color: #26282a;
  border-color: #565a61;
}
html.dark-mode .dropdown-menu > li > a,
html.dark-mode .dropdown-item {
  color: #d6d6d6 !important;
  background-color: transparent !important;
}
/* El menu de "Exportar" del GridView (kartik-grid, bsVersion 3 -> renderiza
   <li><a>, no <a class="dropdown-item">) se veia raro en modo oscuro: site.css:843-865
   (tema base) pinta el hover/active/focus en el <li> (background:#3949ab) y deja
   el <a> de adentro a proposito con background:transparent, para que se vea ese
   color a traves. La primera version de este fix le puso un background-color
   opaco al <a> en hover -- eso tapaba el "hueco" transparente con gris, pero el
   padding del <li> (15px a cada lado, site.css:825-828, fuera de la caja del
   <a>) seguia quedando del azul original sin nada que lo pise: quedaba un
   bloque azul en cada costado, separado del centro. La forma correcta es pintar
   el <li> (como hace el tema) y dejar el <a> transparente, igual que el
   original, para que el highlight se vea de un solo color y de punta a punta. */
html.dark-mode .dropdown-menu > li.active,
html.dark-mode .dropdown-menu > li:active,
html.dark-mode .dropdown-menu > li:focus,
html.dark-mode .dropdown-menu > li:hover {
  background: #2e3134 !important;
  color: #fff !important;
}
html.dark-mode .dropdown-menu > li.active > a,
html.dark-mode .dropdown-menu > li:active > a,
html.dark-mode .dropdown-menu > li:focus > a,
html.dark-mode .dropdown-menu > li:hover > a,
html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus,
html.dark-mode .dropdown-item.active {
  background-color: transparent !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}
html.dark-mode .dropdown-menu .divider,
html.dark-mode .dropdown-divider {
  background-color: #3a3d41;
  border-color: #3a3d41;
}
html.dark-mode .profile-notification {
  background-color: #26282a !important;
}
html.dark-mode .profile-notification .pro-head {
  background-color: #1c1e20 !important;
}

/* Botones, tabs, paginacion */
html.dark-mode .btn-default {
  background-color: #2c2f33;
  border-color: #565a61;
  color: #d6d6d6;
}
html.dark-mode .btn-default:hover {
  background-color: #34383c;
  color: #fff;
}
/* .btn-outline-secondary (site.css:9111): color y borde #748892 fijo, pensado
   para fondo claro. Son los botones "Todo"/"Pagina" (toggleData) y el toggle
   de "Exportar" del toolbar de kartik GridView -- en modo oscuro quedaban casi
   invisibles (borde/texto casi del mismo tono que el fondo de la card). */
html.dark-mode .btn-outline-secondary {
  color: #a9b6bd;
  border-color: #6b7a82;
}
html.dark-mode .btn-outline-secondary:hover,
html.dark-mode .btn-outline-secondary:not(:disabled):not(.disabled).active,
html.dark-mode .btn-outline-secondary:not(:disabled):not(.disabled):active,
html.dark-mode .show > .btn-outline-secondary.dropdown-toggle {
  color: #fff;
  background-color: #4a5860;
  border-color: #4a5860;
}
html.dark-mode .nav-tabs {
  border-bottom-color: #2a2c2f;
}
html.dark-mode .nav-tabs > li > a,
html.dark-mode .nav-tabs .nav-link {
  color: #b7bdc6;
}
html.dark-mode .nav-tabs > li.active > a,
html.dark-mode .nav-tabs .nav-link.active {
  background-color: #212325;
  color: #fff;
  border-color: #2a2c2f #2a2c2f transparent;
}
html.dark-mode .pagination > li > a,
html.dark-mode .pagination > li > span,
html.dark-mode .page-link {
  background-color: #26282a;
  border-color: #2a2c2f;
  color: #d6d6d6;
}
html.dark-mode .pagination > li.active > a,
html.dark-mode .pagination > li.active > span,
html.dark-mode .page-item.active .page-link {
  background-color: #04a9f5;
  border-color: #04a9f5;
  color: #fff;
}

/* .formato_montos_certificacion(_x2): unicas variantes claras de este
   proyecto (las demas .formato_montos* ya son oscuras de por si). */
html.dark-mode .formato_montos_certificacion,
html.dark-mode .formato_montos_certificacion_x2 {
  background: #3a3d2a !important;
  color: #ecebd6 !important;
  border-color: #565a61 !important;
}

/* Filas/celdas contextuales de Bootstrap */
html.dark-mode .table > tbody > tr.active > td,
html.dark-mode .table > tbody > 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;
}
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 hr {
  border-top-color: #2a2c2f;
}

/* kartik\date\DatePicker en modo inline (calendarios de Inicio) envuelve
   bootstrap-datepicker, que no trae dark mode propio. */
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;
}
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;
}
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;
}

#dark-mode-toggle {
  cursor: pointer;
}