/* =========================================================
   DARK MODE (overrides)
   Soporta: body.theme-dark y html[data-theme="dark"]
   ========================================================= */

html[data-theme="dark"],
body.theme-dark{
  /* Tokens base */
  --bg: #212529;
  --surface: #23272b;
  --surface-2: #2b3036;
  --border: rgba(255,255,255,.10);

  --text: #e8edf2;
  --muted: #aab4bf;
  --link: #8ab4ff;
  --primary: #7bcf9b;

  /* Alias legacy */
  --text-color: var(--text);
}

/* =========================
   Fondo / texto general
   ========================= */
html[data-theme="dark"] body,
body.theme-dark{
  background: var(--bg) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] a:not(.btn):not(.btn-ac):not(.btn-actions),
body.theme-dark a:not(.btn):not(.btn-ac):not(.btn-actions){
  color: var(--primary) !important;
}
/* =========================
   Cards / contenedores
   ========================= */
html[data-theme="dark"] .table-card,
body.theme-dark .table-card{
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: none;
}

/* =========================
   TABLAS GENERALES (.tabla-ac)
   ========================= */
html[data-theme="dark"] .tabla-ac thead,
body.theme-dark .tabla-ac thead{
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

html[data-theme="dark"] .tabla-ac th,
body.theme-dark .tabla-ac th{
  color: var(--text) !important;
}

html[data-theme="dark"] .tabla-ac td,
body.theme-dark .tabla-ac td{
  color: rgba(255,255,255,.80);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

html[data-theme="dark"] .tabla-ac tbody tr:hover,
body.theme-dark .tabla-ac tbody tr:hover{
  background: rgba(255,255,255,.06) !important;
}

/* =========================
   Filas con background inline (pastel)
   ========================= */
html[data-theme="dark"] .tabla-ac tbody tr[style*="background"] td,
body.theme-dark .tabla-ac tbody tr[style*="background"] td,
html[data-theme="dark"] .tabla-ac tbody tr[style*="background"] a,
body.theme-dark .tabla-ac tbody tr[style*="background"] a,
html[data-theme="dark"] .tabla-ac tbody tr[style*="background"] i,
body.theme-dark .tabla-ac tbody tr[style*="background"] i{
  color: rgba(74,74,74,.80) !important;
}


/* Filas pastel – hover SOLO para tablas normales (no contratos) */
html[data-theme="dark"] .tabla-ac:not(.tabla-contratos-color) tbody tr[style*="background"]:hover,
body.theme-dark .tabla-ac:not(.tabla-contratos-color) tbody tr[style*="background"]:hover{
  background: inherit !important;
  outline: 1px solid rgba(0,0,0,.12);
}

/* =========================
   TABLA CONTRATOS COLOREADA
   Hover BLANCO
   ========================= */
html[data-theme="dark"] .tabla-contratos-color .tabla-ac tbody tr:hover > td,
body.theme-dark .tabla-contratos-color .tabla-ac tbody tr:hover > td{
  background: #acabab !important;
  color: #111827 !important;
}

html[data-theme="dark"] .tabla-contratos-color tbody tr:hover td,
html[data-theme="dark"] .tabla-contratos-color tbody tr:hover a,
html[data-theme="dark"] .tabla-contratos-color tbody tr:hover span,
body.theme-dark .tabla-contratos-color tbody tr:hover td,
body.theme-dark .tabla-contratos-color tbody tr:hover a,
body.theme-dark .tabla-contratos-color tbody tr:hover span{
  color: #111827 !important;
}

/* =========================
   Botón acciones (3 puntos)
   ========================= */
html[data-theme="dark"] .btn-actions,
body.theme-dark .btn-actions{
  background: var(--primary) !important;
  border-color: transparent !important;
  color: #111827 !important;
}

html[data-theme="dark"] .btn-actions i,
body.theme-dark .btn-actions i{
  color: #111827 !important;
}

html[data-theme="dark"] .btn-actions:hover,
body.theme-dark .btn-actions:hover{
  filter: brightness(1.05);
}

/* =========================
   Dropdown acciones
   ========================= */
html[data-theme="dark"] .dropdown-menu,
body.theme-dark .dropdown-menu{
  background: var(--bg) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
}

html[data-theme="dark"] .dropdown-item,
body.theme-dark .dropdown-item{
  color: var(--primary) !important;
}



/* =========================
   Headers de bloques
   ========================= */
html[data-theme="dark"] .card-header-ac,
body.theme-dark .card-header-ac,
html[data-theme="dark"] .bloque-header,
body.theme-dark .bloque-header{
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border);
}

/* =========================
   Bloque "Cambios detectados"
   ========================= */
html[data-theme="dark"] .cambios-card,
body.theme-dark .cambios-card{
  background: var(--bg) !important;
  border-color: rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .cambios-card-title,
html[data-theme="dark"] .cambios-link,
body.theme-dark .cambios-card-title,
body.theme-dark .cambios-link{
  color: #e8edf2 !important;
}

html[data-theme="dark"] .cambios-preview,
html[data-theme="dark"] .cambios-time,
body.theme-dark .cambios-preview,
body.theme-dark .cambios-time{
  color: rgba(255,255,255,.70) !important;
}

/* =========================
   SELECT2 (single + multiple)
   ========================= */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
body.theme-dark .select2-container--default .select2-selection--single,
body.theme-dark .select2-container--default .select2-selection--multiple{
  background: #111418 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection__rendered,
body.theme-dark .select2-container--default .select2-selection__rendered{
  color: var(--text) !important;
}

html[data-theme="dark"] .select2-dropdown,
body.theme-dark .select2-dropdown{
  background: #111418 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option,
body.theme-dark .select2-container--default .select2-results__option{
  color: var(--text) !important;
}

html[data-theme="dark"] .select2-container--default
.select2-results__option--highlighted.select2-results__option--selectable,
body.theme-dark .select2-container--default
.select2-results__option--highlighted.select2-results__option--selectable{
  background: rgba(138,180,255,.25) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .filtros-container {
    background: #1b1f22;              /* gris claro, no blanco puro */
    border: 1px solid #adb5bd;         /* borde más suave */
    border-radius: 12px;
    padding: 1rem 1rem .5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    margin-bottom: 12px;
    color: var(--text);                    /* texto oscuro legible */
}   

html[data-theme="dark"] .form-filtros .form-group label {
    font-size: .85rem;
    color: var(--text);        /* blanco suave Bootstrap */
    font-weight: 600;
    margin-bottom: 0;
}





/* =========================
   Dropdown – sin fondo activo (dark)
   ========================= */

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .dropdown-item.active,
html[data-theme="dark"] .dropdown-item:active {
    background-color: transparent !important;
    box-shadow: none;
}

html[data-theme="dark"] .form-control {
    background-color: #1b1f22;
    color: #f8f9fa;
    border: 1px solid #adb5bd;
}


html[data-theme="dark"] .form-wrapper h5 {
    background-color: var(--bg) !important; /* negro / gris Bootstrap dark */
    color: #f8f9fa;                       /* texto claro */
}

html[data-theme="dark"] .form-control:focus {
    background-color: #1b1f22;
    color: #ffffff;
    border-color: #9ec5fe; /* azul bootstrap suave */
    box-shadow: 0 0 0 .15rem rgba(13, 110, 253, .25);
}

html[data-theme="dark"] .form-control::placeholder {
    color: rgba(248, 249, 250, 0.6);
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
    background-color: #161a1d;
    color: rgba(248, 249, 250, 0.5);
    border-color: #6c757d;
}

/* =========================
   Select2 – Dark mode
   ========================= */

/* Contenedor */
html[data-theme="dark"] .select2-container .select2-selection {
  background-color: #1b1f22 !important;
  border: 1px solid #adb5bd !important;
  color: #f8f9fa !important;
  min-height: 38px;
}

/* Texto seleccionado */
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #f8f9fa !important;
  line-height: 36px;
}

/* Flechita */
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #adb5bd transparent transparent transparent !important;
}

/* Placeholder */
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: rgba(248, 249, 250, 0.6) !important;
}

/* Dropdown (lista) */
html[data-theme="dark"] .select2-container--default .select2-dropdown {
  background-color: #2b3035 !important;
  border: 1px solid #adb5bd !important;
}

/* Input de búsqueda dentro del dropdown */
html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #1b1f22 !important;
  border: 1px solid #adb5bd !important;
  color: #f8f9fa !important;
}

/* Opciones */
html[data-theme="dark"] .select2-container--default .select2-results__option {
  color: #f8f9fa !important;
}

/* Hover / seleccionado */
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #f8f9fa !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option--selected {
  background-color: rgba(255, 255, 255, 0.10) !important;
  color: #f8f9fa !important;
}

/* Multiple: chips */
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f8f9fa !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: rgba(248, 249, 250, 0.75) !important;
}

/* =========================
   Badges – Dark mode
   ========================= */

html[data-theme="dark"] .badge.bg-success {
    background-color: rgba(25, 135, 84, 0.75) !important;
    color: #e6f4ea;
}

html[data-theme="dark"] .badge.bg-warning {
    background-color: rgba(255, 193, 7, 0.75) !important;
    color: #fff3cd;
}

/* =========================
   CAMBIOS DETECTADOS – DARK
   ========================= */

.theme-dark .cambios-titlebar{
  background: #1f2327;        /* gris oscuro elegante */
  border-color: #2c3238;
}

.theme-dark .cambios-titlebar-title{
  color: #f1f3f5;
}

.theme-dark .cambios-titlebar-sub{
  color: #adb5bd;
}

/* icono */
.theme-dark .cambios-titlebar-icon{
  background: #2a3036;
  color: #ced4da;
}

/* pill derecha (Ventana: 60 días) */
.theme-dark .cambios-titlebar-pill{
  background: #1c2126;
  border-color: #2c3238;
  color: #dee2e6;
}

.theme-dark .cambios-titlebar{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}



html[data-theme="dark"] .badge-estado{
  color: rgba(17,24,39,.85);     /* texto oscuro */
  font-weight: 600;
  border: 1px solid rgba(0,0,0,.20);
  
}

html[data-theme="dark"] .badge.bg-dark{
  background-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(255,255,255,.10);
}

html[data-theme="dark"] .footer-actions,
body.theme-dark .footer-actions{
  background-color: var(--surface);       /* mismo tono que cards */
  border-color: var(--border);
}


/* Tagify placeholder en dark mode */
html[data-theme="dark"] .tagify__input::before,
body.theme-dark .tagify__input::before{
  color: rgba(248, 249, 250, 0.55) !important; /* placeholder visible */
}

/* Cuando está enfocado, un poco más visible */
html[data-theme="dark"] .tagify--focus .tagify__input::before,
body.theme-dark .tagify--focus .tagify__input::before{
  color: rgba(248, 249, 250, 0.70) !important;
}

html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.85;
  cursor: pointer;
}

html[data-theme="dark"] .form-grid .grupo-campo > small.form-text,
html[data-theme="dark"] .form-grid .grupo-campo > .form-text,
html[data-theme="dark"] .form-grid .grupo-campo > .helptext,
html[data-theme="dark"] small.form-text.text-muted.d-block{
  background: transparent !important;
  background-color: transparent !important;
}

/* Help text (Django/Bootstrap) - Dark mode */
html[data-theme="dark"] .grupo-campo > small.form-text,
html[data-theme="dark"] .grupo-campo > .form-text,
html[data-theme="dark"] .grupo-campo > .helptext{
  display: block;
  margin-top: .4rem;
  margin-bottom: .6rem;
  color: #9aa4ad !important;
  font-size: .85rem;
  background: transparent !important;
}

/* Si el texto queda seleccionado, que no se vea azul chillón */
html[data-theme="dark"] .grupo-campo > small.form-text::selection,
html[data-theme="dark"] .grupo-campo > .form-text::selection,
html[data-theme="dark"] .grupo-campo > .helptext::selection{
  background: rgba(173, 181, 189, .25);
  color: #e9ecef;
}

/* =========================
   Botón Volver – Dark mode
   ========================= */

.theme-dark .btn-ac-secondary,
.theme-dark .btn-ac-secondary:hover,
.theme-dark .btn-ac-secondary:focus {
      background: #ffffff;
    color: black;
}



/* GHOST – Dark */
.theme-dark .btn-ac-ghost {
  background: var(--bg);
  color: #e5e7eb;                 /* gris claro, no blanco puro */
  border: 1px solid rgba(255,255,255,0.25);
}

.theme-dark .btn-ac-ghost:hover {
  background: var(--bg);
  color: var(--primary);          /* verde acción en hover */
}