/* ==========================================================================
   Customization Integration — Dark Theme (Fase 1)
   Archivo: dark.css
   Descripción:
     - Tema oscuro por inversión + hue-rotate (gama configurable).
     - Usa variables CSS inyectadas desde PHP:
         --ci-font-family
         --ci-hue
         --ci-bright
         --ci-contrast
     - Este CSS NO define esas variables para no sobreescribir valores dinámicos.
     - Se usan fallbacks en var(...) por si aún no existen variables.
   ========================================================================== */

/* =======================
   1) Tipografía global
   ======================= */
html, body, body.admin,
.admin #wrapper,
.customers, .customers #wrapper,
.form-control, .btn, .dropdown-menu, .modal, .panel,
input, button, select, textarea,
.navbar, .popover, .tooltip,
.table, .dataTables_wrapper,
.label, .badge, .list-group,
.panel-heading, .panel-body,
.bootstrap-select .btn, .bootstrap-select .dropdown-menu,
.select2-container, .select2-drop, .select2-choice, .select2-results,
.tt-input, .tt-menu {
  font-family: var(--ci-font-family, "Montserrat", sans-serif) !important;
}

/* =======================
   2) Motor de tema
   ======================= */

/* Fondo base oscuro real en el root (NO se invierte) */
html:not(.light-mode){
  background-color: #0f0f0f !important;
}

/* Invertimos SOLO el body.
   Fondo BLANCO → invertido se ve NEGRO (evita “lámina” blanca detrás). */
html:not(.light-mode) body{
  filter:
    invert(100%)
    hue-rotate(var(--ci-hue, 210deg))
    brightness(var(--ci-bright, 100%))
    contrast(var(--ci-contrast, 90%));
  background-color: #ffffff !important;  /* blanco invertido = negro */
  min-height: 100vh;                      /* que no asome el html detrás */
}

/* Modo claro: sin filtros y fondo blanco normal */
html.light-mode{
  background-color: #ffffff !important;
}
html.light-mode body{
  filter: none !important;
  background-color: #ffffff !important;
}

/* Evita placas claras de wrappers que traen su propio fondo */
html:not(.light-mode) #wrapper,
html:not(.light-mode) .content,
html:not(.light-mode) .page,
html:not(.light-mode) .container,
html:not(.light-mode) .container-fluid{
  background: transparent !important;
}

/* ==============================
   3) Correcciones para medios
   ============================== */
/* Re–invertimos medios para recuperar colores reales */
html:not(.light-mode) img,
html:not(.light-mode) video,
html:not(.light-mode) iframe,
html:not(.light-mode) svg,
html:not(.light-mode) canvas,
html:not(.light-mode) .gm-style img,
html:not(.light-mode) .gm-style iframe,
html:not(.light-mode) .gm-style canvas{
  filter:
    invert(100%)
    hue-rotate(calc(-1 * var(--ci-hue, 210deg)))
    brightness(var(--ci-bright, 100%))
    contrast(var(--ci-contrast, 90%)) !important;
  mix-blend-mode: normal !important;
}

/* ==============================
   4) Ajustes específicos (opcionales)
   ============================== */

/* Kanban headers con buena legibilidad */
html:not(.light-mode) .kan-ban-col-wrapper .panel-heading.tw-bg-neutral-700.tw-text-white{
  filter:
    invert(100%)
    hue-rotate(calc(-1 * var(--ci-hue, 210deg)))
    brightness(100%)
    contrast(100%) !important;
}

/* Login: fondo algo más claro (se invertirá a oscuro agradable) */
html:not(.light-mode) body.login_admin.tw-bg-neutral-100{
  background-color: #e3e3e3 !important;
}

/* Datatables / tablas: fondo transparente para no “parchar” el negro */
html:not(.light-mode) .dataTables_wrapper,
html:not(.light-mode) table.table{
  background: transparent !important;
}

/* Inputs deshabilitados con contraste correcto */
html:not(.light-mode) .form-control[disabled],
html:not(.light-mode) .form-control[readonly]{
  opacity: .85;
}

/* ==============================
   5) A11y (si luego agregas transiciones)
   ============================== */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}

/* ==============================
   6) Notas de carga
   ==============================
   - Carga este CSS ANTES del bloque <style id="ci-dark-vars"> inyectado por PHP,
     para que las variables dinámicas ganen por orden (o agrega !important en ese bloque).
*/