/* FORZAR DARK/LIGHT EN EL SIDEBAR AUNQUE LEGACY USE !important */
#sidebar,
#sidebar * {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* LIGHT */
html:not(.dark) #sidebar {
  background: #fff !important;
  border-color: #e2e8f0 !important;
}
html:not(.dark) #sidebar a,
html:not(.dark) #sidebar span,
html:not(.dark) #sidebar p,
html:not(.dark) #sidebar i {
  color: #1f1f1f !important;
}
html:not(.dark) #sidebar .active .sidebar-text, html:not(.dark) #sidebar .active i{
  color: #ffffff !important;
}
html:not(.dark) #sidebar a:hover {
  background: #f1f5f9 !important;
}

/* DARK */
html.dark #sidebar, html.dark .bg-white {
  background: #1f1f1f !important;
  border-color: rgba(255,255,255,.12) !important;
}
.bar-mb,.drawer-mb{
  background: rgba(255, 255, 255, 0.8) !important;
}
html.dark .bar-mb, html.dark .drawer-mb{
  background: rgba(0, 0, 0, 0.8) !important;
}
html.dark .bg-slate-50, html.dark .bg-slate-100{
  background: #424242 !important;
}
html.dark .text-slate-900, html.dark .text-neutral-900{
  color: #fff !important;
}
html.dark .text-slate-700, html.dark .text-slate-500, html.dark{
  color: #F7F7F7 !important;
}
html.dark .bg-neutral-950{
  background: #ffffff !important;
}
html.dark .border-r-slate-50{
  border-right-color: #424242;
}
html.dark .border-slate-200{
  border-color: #424242 !important;
}
html.dark #sidebar a,
html.dark #sidebar span,
html.dark #sidebar p,
html.dark #sidebar i {
  color: rgba(255,255,255,.92) !important;
}
html.dark #sidebar a:hover {
  background: rgba(255,255,255,.08) !important;
}

/* Tarjetas internas (logo / user card) */
html.dark #sidebar .ring-1,
html.dark #sidebar .ring-2 {
  border-color: rgba(255,255,255,.12) !important;
}

/* El item activo (siempre con el accent) */
#sidebar a.bg-\[rgb\(var\(--accent\)\)\] {
  color: #fff !important;
}

.cont-pre-loader{
  position: fixed;
  inset: 0;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity .25s ease, visibility .25s ease;
}
html.dark .cont-pre-loader{
  background: rgba(66,66,66,.92);
  transition: opacity .25s ease, visibility .25s ease;
}

.cont-pre-loader.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-dots{
  display: flex;
  align-items: center;
  gap: 10px;
}

.loader-dots span{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgb(var(--accent)); /* usa tu acento del sistema */
  opacity: .35;
  transform: translateY(0) scale(.9);
  animation: dotWave 900ms ease-in-out infinite;
}

.loader-dots span:nth-child(2){ animation-delay: 120ms; }
.loader-dots span:nth-child(3){ animation-delay: 240ms; }
.loader-dots span:nth-child(4){ animation-delay: 360ms; }

@keyframes dotWave{
  0%, 100% { transform: translateY(0) scale(.9); opacity: .35; }
  50%      { transform: translateY(-10px) scale(1.05); opacity: 1; }
}

/* ==============================
   ESCRITORIO: FIX CLARO/OSCURO
   ============================== */


/* =========================
   1) KPI CARDS (las de arriba)
   Selector por estructura:
   section.mb-2 > .fade-up > (cada card)
   ========================= */


/* texto secundario (oscuro) */
html.dark #view-escritorio section.mb-2 > div.fade-up > div p.text-white\/80{
  color: rgba(255,255,255,.78) !important;
}

/* =========================
   2) CONTENEDORES DE CHARTS (los paneles grandes)
   section.grid ... > div (panel)
   ========================= */

html.dark #view-escritorio section.grid > div.fade-up{
  background: #171717 !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.25) !important;
}


/* =========================
   3) GOOGLE CHARTS TOOLTIP
   ========================= */
html.dark .google-visualization-tooltip{
  background: #0b1220 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.35) !important;
}
html:not(.dark) .google-visualization-tooltip{
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.12) !important;
}


/* ============================================
   FIX ESCRITORIO: Texto invisible en MODO CLARO
   (porque el HTML trae text-white fijo)
   ============================================ */

html:not(.dark) #view-escritorio .text-white{
  color: #0f172a !important; /* slate-900 */
}

html:not(.dark) #view-escritorio .text-white\/80{
  color: rgba(15, 23, 42, .70) !important; /* slate-900 70% */
}

/* títulos grandes que están con text-white */
html:not(.dark) #view-escritorio h1.text-white,
html:not(.dark) #view-escritorio h2.text-white,
html:not(.dark) #view-escritorio h3.text-white,
html:not(.dark) #view-escritorio p.text-white{
  color: #0f172a !important;
}

/* Si algún contenedor trae "text-white" y afecta todo */
html:not(.dark) #view-escritorio [class*="text-white"]{
  color: #0f172a; /* sin !important para no romper otros */
}

/* ============================================
   MODO OSCURO: asegura que siga viéndose blanco
   (por si el legacy lo pisa)
   ============================================ */
html.dark body{
  background: #353535 !important;
}
html.dark #view-escritorio .text-white{
  color: #ffffff !important;
}
html.dark #view-escritorio .text-white\/80{
  color: rgba(255,255,255,.78) !important;
}

/* =========================================================
   DATATABLES + BOOTSTRAP: modo claro/oscuro por html.dark
   (NO cambia estructura; solo colores)
   ========================================================= */

/* --- Base (para que DataTables no herede raro) --- */
.js-datatable,
table.js-datatable.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* -------------------------
   MODO CLARO (html:not(.dark))
   ------------------------- */

html:not(.dark) table.js-datatable.dataTable,
html:not(.dark) table.js-datatable.dataTable tbody td,
html:not(.dark) table.js-datatable.dataTable thead th {
  color: #0f172a !important; /* slate-900 */
}

html:not(.dark) table.js-datatable.dataTable {
  background: #ffffff !important;
}

html:not(.dark) table.js-datatable.dataTable thead th {
  background: #f1f5f9 !important; /* slate-100 */
  border-bottom: 1px solid rgba(2,6,23,.10) !important;
}

html:not(.dark) table.js-datatable.dataTable tbody tr {
  background: #ffffff !important;
}

html:not(.dark) table.js-datatable.dataTable tbody tr:hover {
  background: #f8fafc !important;
}

html:not(.dark) table.js-datatable.dataTable tbody td {
  border-top: 1px solid rgba(2,6,23,.08) !important;
}

/* controles DataTables */
html:not(.dark) .dataTables_wrapper,
html:not(.dark) .dataTables_wrapper label,
html:not(.dark) .dataTables_wrapper .dataTables_info {
  color: #0f172a !important;
}
.dataTables_wrapper label{
  display: flex;
  gap: 5px;
}

html:not(.dark) .dataTables_wrapper .dataTables_filter input,
html:not(.dark) .dataTables_wrapper .dataTables_length select {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(2,6,23,.18) !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  outline: none !important;
}

/* paginación */
html:not(.dark) .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #0f172a !important;
  border-radius: 10px !important;
}
html:not(.dark) .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: rgba(14,165,233,.15) !important; /* accent suave */
  border: 1px solid rgba(14,165,233,.35) !important;
  color: #0f172a !important;
}
html:not(.dark) .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(2,6,23,.06) !important;
  border: 1px solid rgba(2,6,23,.12) !important;
}

/* -------------------------
   MODO OSCURO (html.dark)
   ------------------------- */

html.dark table.js-datatable.dataTable,
html.dark table.js-datatable.dataTable tbody td,
html.dark table.js-datatable.dataTable thead th {
  color: #e5e7eb !important; /* slate-200 */
}

html.dark table.js-datatable.dataTable {
  background: rgba(255,255,255,.03) !important;
}

html.dark table.js-datatable.dataTable thead th {
  background: rgba(255,255,255,.06) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

html.dark table.js-datatable.dataTable tbody tr {
  background: transparent !important;
}

html.dark table.js-datatable.dataTable tbody tr:hover {
  background: rgba(255,255,255,.05) !important;
}

html.dark table.js-datatable.dataTable tbody td {
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* controles DataTables */
html.dark .dataTables_wrapper,
html.dark .dataTables_wrapper label,
html.dark .dataTables_wrapper .dataTables_info {
  color: #e5e7eb !important;
}

html.dark .dataTables_wrapper .dataTables_filter input,
html.dark .dataTables_wrapper .dataTables_length select {
  background: rgba(255,255,255,.06) !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  outline: none !important;
}

html.dark .dataTables_wrapper .dataTables_filter input::placeholder {
  color: rgba(229,231,235,.65) !important;
}

/* paginación */
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #e5e7eb !important;
  border-radius: 10px !important;
}
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: rgba(14,165,233,.25) !important;
  border: 1px solid rgba(14,165,233,.40) !important;
  color: #ffffff !important;
}
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* =========================================================
   Bootstrap table helper (por si DataTables se mezcla con BS)
   ========================================================= */
html.dark .table,
html.dark .table td,
html.dark .table th {
  color: #e5e7eb !important;
}

/* animación (idéntico look, solo entrada suave) */
  #view-escritorio .fade-up{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .6s ease}
  #view-escritorio .fade-up.fade-up--in{opacity:1; transform:translateY(0)}

  /*
    ✅ FIX IMPORTANTE:
    Cuando cargas style-invert.min.css por JS, a veces quedan reglas legacy que "lavan" el texto en modo claro
    o dejan texto blanco donde no corresponde.
    Este override es mínimo y SOLO afecta al escritorio.
  */
  html:not(.dark) #view-escritorio .kpi-card{
  	background: #fff !important;
  }

  html:not(.dark) #view-escritorio .kpi-title,
  html:not(.dark) #view-escritorio .kpi-value,
  html:not(.dark) #view-escritorio .chart-title{
    color:#0f172a !important;
  }
  html:not(.dark) #view-escritorio .kpi-sub,
  html:not(.dark) #view-escritorio .chart-sub{
    color:#64748b !important;
  }

  html.dark #view-escritorio .kpi-title,
  html.dark #view-escritorio .kpi-value,
  html.dark #view-escritorio .chart-title{
    color:#ffffff !important;
  }
  html.dark #view-escritorio .kpi-card{
  	background: #64748b !important;
  }
  html.dark #view-escritorio .kpi-sub,
  html.dark #view-escritorio .chart-sub{
    color:rgba(255,255,255,.70) !important;
  }

  /* ===== Sidebar layout animation ===== */
:root{
  --sidebarW: 280px; /* fallback */
}

/* anima el contenedor del aside y el main */


#appMain{
  width: calc(100vw - var(--sidebarW));
  transition: width 280ms ease;
  will-change: width;
}
@media (max-width: 768px) {
  #appMain{
    width: 100% !important;
    padding-bottom: 80px !important;
  }
  .cont-pre-loader{
    width: 100% !important;
  }
  #appSidebarWrap{
    width: 0 !important;
    padding: 0 !important;
  }
}

@media (min-width: 768px) {
  #appMain { width: calc(100vw - var(--sidebarW)) !important; }
  #appSidebarWrap{
    width: var(--sidebarW);
    transition: width 280ms ease;
    will-change: width;
  }
}

/* anima lo interno del aside también (por si cambia padding/elementos) */
#sidebar{
  transition: padding 280ms ease, background-color 280ms ease;
}

/* ===== Collapsed behavior (labels + logos) ===== */
#sidebar .sidebar-text{
  transition: opacity 200ms ease, transform 200ms ease;
  white-space: nowrap;
}

/* Estado colapsado */
#sidebar[data-collapsed="1"] .sidebar-text{
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
  width: 0;
  overflow: hidden;
}

/* Logo swap */
#sidebar .sidebar-logo-small{ display: none; }
#sidebar .sidebar-logo-large{ display: block; }

#sidebar[data-collapsed="1"] .sidebar-logo-small{ display: block; }
#sidebar[data-collapsed="1"] .sidebar-logo-large{ display: none; }

/* En colapsado: centra íconos y reduce espacios */
#sidebar[data-collapsed="1"] a,
#sidebar[data-collapsed="1"] button{
  justify-content: center;
}

#sidebar[data-collapsed="1"] a{
  padding-left: 12px !important;
  padding-right: 12px !important;
  margin-right: 0 !important;
}

#sidebar[data-collapsed="1"] ul.space-y-1 > li a i,
#sidebar[data-collapsed="1"] ul.space-y-1 > li a span.fa-solid{
  font-size: 18px;
}

/* ===== Nav height responsive to collapsed ===== */
#sidebar nav{
  height: calc(100vh - 180px);
  transition: height 280ms ease;
}

/* colapsado: como el bloque de usuario y bottom cambian visualmente, recorta un poco */
#sidebar[data-collapsed="1"] nav{
  height: calc(100vh - 210px);
}

.dataTables_wrapper .row{
  margin-bottom: 5px !important;
}

/* ===========================
   Select2 "Tailwind look"
   =========================== */

.select2-container { width: 100% !important; }

.select2-container .select2-selection--single {
  height: 44px !important;
  border-radius: 12px !important;
  border: 1px solid rgb(226 232 240) !important; /* slate-200 */
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
}

.select2-container .select2-selection__rendered {
  padding: 0 !important;
  line-height: 1.1 !important;
  color: rgb(15 23 42) !important; /* slate-900 */
  font-weight: 600 !important;
}

.select2-container .select2-selection__arrow {
  height: 44px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder{
  color: rgb(100 116 139) !important; /* slate-500 */
  font-weight: 500 !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
  background: rgb(var(--accent)) !important;
  color: #fff !important;
}

.select2-dropdown {
  border-radius: 12px !important;
  border: 1px solid rgb(226 232 240) !important;
  overflow: hidden !important;
}

.select2-search--dropdown .select2-search__field{
  border: 1px solid rgb(226 232 240) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  outline: none !important;
}

.select2-container--open .select2-selection--single{
  box-shadow: 0 0 0 3px rgba(0, 158, 226, .22) !important; /* similar focus ring */
  border-color: rgba(0, 158, 226, .35) !important;
}

.select2-container--open { z-index: 99999 !important; }
.select2-dropdown { z-index: 99999 !important; }



/* =========================
   FIX Select2 dentro de modales (Bootstrap)
   - Evita dropdown "inactivo" por z-index/backdrop
   ========================= */

/* Bootstrap: backdrop 1050, modal 1055 (aprox). Pon Select2 arriba */
.select2-container { z-index: 9999 !important; }
.select2-container--open { z-index: 9999 !important; }
.select2-dropdown { z-index: 10000 !important; }

/* Por si algún contenedor mete pointer-events */
.select2-container,
.select2-dropdown,
.select2-results,
.select2-results__options,
.select2-search,
.select2-search__field {
  pointer-events: auto !important;
}

/* Select2 encima de AppModal y SubModal */
#appmodal .select2-container,
#submodal .select2-container {
  z-index: 99999 !important;
}

#appmodal-panel .select2-dropdown,
#submodal-panel .select2-dropdown {
  z-index: 999999 !important;
}

#appmodal-panel .select2-container--open,
#submodal-panel .select2-container--open {
  z-index: 999999 !important;
}


/* A veces el modal tiene transform y crea stacking context raro.
   Esto ayuda a que el dropdown no quede "detrás" */
.modal,
.modal-dialog,
.modal-content {
  transform: none;
}

/* ===== Tailwind modal animations: slide desde abajo (sheet) ===== */
.tw-modal {
  display: none;
}
.tw-modal.is-open {
  display: flex;
}

/* overlay */
.tw-modal .tw-overlay {
  opacity: 0;
  transition: opacity 260ms cubic-bezier(.22, 1, .36, 1);
}
.tw-modal.is-open .tw-overlay {
  opacity: 1;
}

/* panel: entra desde abajo */
.tw-modal .tw-panel {
  opacity: 0;
  transform: translateY(48px); /* viene desde abajo */
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1), opacity 260ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity;
}
.tw-modal.is-open .tw-panel {
  opacity: 1;
  transform: translateY(0);
}

/* salida: vuelve hacia abajo */
.tw-modal.is-closing .tw-overlay {
  opacity: 0;
}
.tw-modal.is-closing .tw-panel {
  opacity: 0;
  transform: translateY(48px);
}