/* ══════════════════════════════════════════════════════════════════
   theme-light.css — Paleta clara unificada para Xpress Tools
   ------------------------------------------------------------------
   Este archivo centraliza el cambio de tema (oscuro → claro, acento
   azul) para TODAS las herramientas. En vez de repetir el bloque de
   colores en cada página, cada .html solo necesita un:
       <link rel="stylesheet" href="theme-light.css?v=7">
   dentro de <head>, DESPUÉS de su propio <style> interno (para que
   la cascada aplique el tema claro sobre las variables oscuras base).

   IMPORTANTE — NO mover este <link> al final del <body>:
   colocarlo justo antes de </body> fue el error original que causaba
   una pantalla en negro/oscuro visible antes de repintar en claro
   (FOUC). El navegador pinta con las variables oscuras del <style>
   inline mientras parsea el resto del documento, y solo aplica el
   tema claro cuando por fin llega (y descarga) el <link> al final.
   En archivos de miles de líneas (scanner-qr.html, gees.html,
   cobertura-mapa.html, etc.) ese parpadeo es muy notorio.
   Mantenerlo en <head> evita el flash porque el navegador bloquea
   el primer pintado hasta tener todas las hojas de estilo del <head>.

   Ventaja de mantenerlo así (seguridad/escalabilidad):
   - Un solo lugar para ajustar la paleta en el futuro.
   - No se duplica código en 30+ archivos.
   - No toca ningún selector estructural, ID ni clase usada por JS.

   Cubre las distintas convenciones de variables CSS encontradas en
   el proyecto (la mayoría de herramientas comparte el mismo esquema,
   pero algunas páginas más antiguas usan nombres propios).
   ══════════════════════════════════════════════════════════════════ */

/* ── Esquema estándar (usado por la mayoría de páginas:
      index, ingreso, bits, liquidacion, scanner-qr, admin,
      database, gees, tiendas, bodegas, planner, etc.) ── */
:root{
  --bg:#F8F9FA;
  --white:#FFFFFF;
  --border:rgba(0,0,0,0.08);
  --border2:rgba(0,0,0,0.12);
  --text:#1A1A1A;
  --muted:#6B7280;
  --light:#F1F3F5;
  --orange:#4C6EF5;
  --orange-l:rgba(76,110,245,0.08);
  --orange-b:rgba(76,110,245,0.22);
  --green:#2F9E44;
  --green-l:rgba(47,158,68,0.10);
  --green-b:rgba(47,158,68,0.28);
  --red:#E03131;
  --red-l:rgba(224,49,49,0.10);
  --red-b:rgba(224,49,49,0.28);
  --blue:#4C6EF5;
  --blue-l:rgba(76,110,245,0.10);
  --blue-b:rgba(76,110,245,0.28);
  --yellow:#F08C00;
  --yellow-l:rgba(240,140,0,0.10);
  --yellow-b:rgba(240,140,0,0.28);
  --teal:#0CA678;
  --teal-l:rgba(12,166,120,0.10);
  --pink:#E64980;
  --pink-l:rgba(230,73,128,0.10);
  --pink-b:rgba(230,73,128,0.28);
  --purple:#7048E8;
  --purple-l:rgba(112,72,232,0.10);
  --purple-b:rgba(112,72,232,0.28);
  --cyan:#15AABF;
  --cyan-l:rgba(21,170,191,0.10);
  --r:16px;

  /* ── Esquema B (auditoria.html, dashboard_ingresos.html, predata_auditoria.html) ── */
  --bg2:#FFFFFF;
  --bg3:#F1F3F5;
  --bg4:#E9ECEF;
  --text2:#6B7280;
  --text3:#9CA3AF;
  --accent:#4C6EF5;
  --accent-dim:rgba(76,110,245,0.10);
  --green-bg:rgba(47,158,68,0.10);
  --amber:#F08C00;
  --amber-bg:rgba(240,140,0,0.10);
  --red-bg:rgba(224,49,49,0.10);
  --blue-bg:rgba(76,110,245,0.10);
  --purple-bg:rgba(112,72,232,0.10);

  /* ── Esquema C (cobertura-mapa.html) ── */
  --surface:#FFFFFF;
  --surface2:#F1F3F5;
  --accent2:#F08C00;

  /* ── Esquema D (consolidado_predata.html) ── */
  --panel:#FFFFFF;
  --sidebar:#FFFFFF;
  --danger:#E03131;
  --warn:#F08C00;

  /* ── Esquema E (consulta-sistrack-MEJORADO.html, nombres en español) ── */
  --naranja:#4C6EF5;
  --azul:#4C6EF5;
  --card:#FFFFFF;
  --card-2:#F1F3F5;
  --texto:#1A1A1A;
  --texto-sec:#6B7280;
  --verde:#2F9E44;
  --rojo:#E03131;
  --amarillo:#F08C00;

  /* ── Esquema F (gestion_torres.html) ── */
  --panel-2:#F1F3F5;
  --accent-2:#2F9E44;
}

/* ══ Ajustes generales seguros (aplican solo si el elemento existe) ══ */

/* Fondo/texto base, por si alguna página no hereda bien la variable */
body{background:var(--bg) !important;color:var(--text,#1A1A1A) !important;}

/* Orbes / fondos decorativos — desactivados por rendimiento
   (el filtro blur(100px) es costoso para el navegador; al ser solo
   decorativos y quedar casi tapados por el sidebar azul marino, se
   ocultan por completo para aligerar el repintado de la página) */
.hub-orb{display:none !important;}
.hub-grid-lines{display:none !important;}

/* Tarjetas de herramientas (mismo estilo que el hub) */
.htcard{
  border-radius:var(--r) !important;
  border:1.5px solid rgba(76,110,245,.35) !important;
  box-shadow:0 2px 4px rgba(0,0,0,.03) !important;
}
.htcard::before,.htcard::after{display:none !important;content:none !important;}
.htcard:hover{
  border-color:rgba(76,110,245,.65) !important;
  box-shadow:0 12px 24px rgba(76,110,245,.12) !important;
  transform:translateY(-2px) !important;
}
.htcard .hpulse{display:none !important;}
.htcard .hico{
  background:#FFFFFF !important;
  border:1.5px solid #000000 !important;
}
.htcard:hover .hico{transform:none !important;}
.htcard .hname{text-transform:none !important;font-weight:600 !important;}

/* Anula por completo el efecto neón/glow giratorio de versiones anteriores
   (cubre todas las variantes y estados: normal, hover, seleccionada,
   dentro o fuera de #tools-grid) */
.htcard,
.htcard:hover,
.htcard-o,
.htcard-o:hover,
.htcard-t,
.htcard-t:hover,
.htcard-p,
.htcard-p:hover,
.htcard.selected,
.htcard.selected:hover,
#tools-grid .htcard,
#tools-grid .htcard:hover{
  animation:none !important;
  animation-name:none !important;
  animation-duration:0s !important;
  outline:none !important;
  outline-color:transparent !important;
}
.htcard,
.htcard-o,
.htcard-t,
.htcard-p,
#tools-grid .htcard{
  box-shadow:0 2px 4px rgba(0,0,0,.03) !important;
}
.htcard:hover,
.htcard-o:hover,
.htcard-t:hover,
.htcard-p:hover,
#tools-grid .htcard:hover{
  box-shadow:0 12px 24px rgba(0,0,0,.06) !important;
}

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR SIEMPRE EXPANDIDO (ancho fijo, sin colapsar por hover)
   ------------------------------------------------------------------
   El diseño original expandía/colapsaba el sidebar al pasar el mouse,
   sincronizando por separado el ancho del sidebar y el margen del
   contenido (#main) con dos animaciones independientes. Con el uso
   real (recarga de datos "en línea", primera carga de la página,
   etc.) estas dos animaciones se desincronizaban intermitentemente
   y dejaban texto de las tarjetas tapado por el sidebar.
   En vez de seguir parchando esa sincronización, se fija el sidebar
   siempre expandido: elimina esa clase de bug de raíz y de paso deja
   de depender de JavaScript/hover para verse bien. ── */
#sidebar,
#sidebar:hover,
#sidebar:not(:hover){
  width:230px !important;
  min-width:230px !important;
  max-width:230px !important;
  background:#0B1E3D !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-right:1px solid rgba(255,255,255,.08) !important;
  box-shadow:2px 0 16px rgba(0,0,0,.12) !important;
  transition:none !important;
  overflow-y:auto !important;
}
/* IMPORTANTE — el margen izquierdo de 230px SOLO debe aplicarse en
   páginas donde #sidebar está en position:fixed (queda fuera del flujo
   normal y #main necesita ese margen para no quedar tapado).
   En páginas donde el sidebar es un elemento flex normal (body{display:flex},
   #main{flex:1}) el sidebar YA empuja el contenido por sí solo; forzar
   este margen ahí duplica el espacio y deja un hueco en blanco entre el
   sidebar y el contenido (visto en DEP A FK, BITS Masivo, Ingreso Masivo,
   Liquidación Masiva y otras herramientas con ese mismo patrón de layout).
   Por eso esta regla está condicionada a la clase body.sb-fixed, que solo
   llevan las páginas de layout "sidebar fijo". ── */
body.sb-fixed #main,
body.sb-fixed.sb-expanded #main{
  margin-left:230px !important;
  transition:none !important;
}
/* Ítems de navegación: siempre en formato "expandido" (icono + texto) */
#sidebar .nb,
#sidebar:hover .nb,
#sidebar:not(:hover) .nb{
  justify-content:flex-start !important;
  padding:9px 12px !important;
  width:100% !important;
  gap:9px !important;
}
#sidebar .nb-txt,
#sidebar:hover .nb-txt,
#sidebar:not(:hover) .nb-txt{
  display:inline-block !important;
  opacity:1 !important;
}
#sidebar .nav-lbl-txt,
#sidebar:hover .nav-lbl-txt,
#sidebar:not(:hover) .nav-lbl-txt{
  max-height:30px !important;
  opacity:1 !important;
  padding:0 8px 6px !important;
}
#sidebar .conn-btn,
#sidebar:hover .conn-btn,
#sidebar:not(:hover) .conn-btn{
  justify-content:flex-start !important;
  width:100% !important;
  height:auto !important;
  padding:9px 12px !important;
}
#sidebar .conn-btn-txt,
#sidebar:hover .conn-btn-txt,
#sidebar:not(:hover) .conn-btn-txt{
  display:inline-block !important;
  opacity:1 !important;
}
#sidebar .conn-user,
#sidebar:hover .conn-user,
#sidebar:not(:hover) .conn-user{
  max-height:24px !important;
  opacity:1 !important;
  margin-top:4px !important;
}
#sidebar .sb-foot,
#sidebar:hover .sb-foot,
#sidebar:not(:hover) .sb-foot{
  max-height:40px !important;
  opacity:1 !important;
  padding:8px 12px !important;
}
#sidebar .sb-foot-actions,
#sidebar:hover .sb-foot-actions,
#sidebar:not(:hover) .sb-foot-actions{
  padding:4px 8px 0 !important;
}
#sidebar .sb-logo,
#sidebar:hover .sb-logo,
#sidebar:not(:hover) .sb-logo{
  display:flex !important;
}
#sidebar .sb-conn,
#sidebar:hover .sb-conn,
#sidebar:not(:hover) .sb-conn{
  display:block !important;
}
#sidebar #conn-collapsed-btn{display:none !important;}
#sidebar .nav-sec,
#sidebar:hover .nav-sec,
#sidebar:not(:hover) .nav-sec{
  padding:8px 8px 4px !important;
}
#sb-display-name,
#sidebar:hover #sb-display-name{
  opacity:1 !important;
  width:auto !important;
  overflow:visible !important;
  pointer-events:auto !important;
}

#sidebar .sb-logo{border-bottom:1px solid rgba(255,255,255,.08) !important;}
#sidebar .sb-conn{border-bottom:1px solid rgba(255,255,255,.08) !important;}
#sidebar .online-section{border-top:1px solid rgba(255,255,255,.08) !important;}

/* ── Sin espacio extra a la izquierda en ícono/texto ──────────────────
   Pedido explícito: quitar cualquier separación entre el ícono y el
   texto en (1) los botones del menú (Inicio, Ingreso Masivo, etc.) y
   (2) la lista "EN LÍNEA AHORA". El espaciado real entre ícono y texto
   lo pone el "gap" del contenedor flex (.nb, .online-sec-item); esta
   regla solo anula un margin-left que algún elemento heredado/hijo
   pudiera traer de fábrica (line-height, SVG, etc.), SIN tocar los
   margin-left:auto de los badges/etiquetas "MANT." que empujan a la
   derecha a propósito (esos no están incluidos aquí). ── */
#sidebar .nb-ico,
#sidebar .nb-txt,
#sidebar .nb-ico svg,
#sidebar .online-sec-dot,
#sidebar .online-sec-info,
#sidebar .online-sec-name,
#sidebar .online-sec-page,
#sidebar .online-sec-page svg,
#sidebar .online-sec-role{
  margin-left:0 !important;
}

/* En móvil el sidebar sigue siendo un drawer (oculto fuera de pantalla
   hasta abrirlo con el botón hamburguesa) — el contenido no debe tener
   margen extra, ya que el sidebar no empuja el layout ahí */
@media(max-width:768px){
  #sidebar,
  #sidebar:hover,
  #sidebar:not(:hover){
    left:-230px !important;
  }
  #sidebar.open{left:0 !important;}
  /* FIX: antes este selector era solo "#main, body.sb-expanded #main",
     con MENOS especificidad que "body.sb-fixed #main{margin-left:230px}"
     de arriba. Como ambas reglas usan !important, ganaba la de mayor
     especificidad (la de escritorio) incluso dentro de este media query,
     dejando 230px de margen fantasma en el teléfono. Se agregan las
     mismas combinaciones de selector para igualar/superar la especificidad
     y así SÍ ganar en móvil. */
  #main,
  body.sb-fixed #main,
  body.sb-expanded #main,
  body.sb-fixed.sb-expanded #main{
    margin-left:0 !important;
  }
}

/* Texto e iconos del sidebar — tonos claros para contraste sobre el azul marino */
#sidebar,
#sidebar .nb,
#sidebar .nb-txt,
#sidebar .nav-lbl-txt,
#sidebar .sb-app-name,
#sidebar .sb-app-sub,
#sidebar #sb-display-name,
#sidebar #sb-role-label,
#sidebar .conn-user,
#sidebar .sb-foot{
  color:rgba(255,255,255,.75) !important;
}
#sidebar .nb:hover{background:rgba(255,255,255,.08) !important;color:#FFFFFF !important;}
#sidebar .nb.on{background:rgba(255,255,255,.14) !important;color:#FFFFFF !important;font-weight:600;}
#sidebar .sb-app-name,
#sidebar #sb-display-name{color:#FFFFFF !important;}
#sidebar .conn-btn.off{background:rgba(76,110,245,.28) !important;color:#FFFFFF !important;border-color:rgba(76,110,245,.55) !important;}
#sidebar .conn-btn.on{background:rgba(47,158,68,.28) !important;color:#FFFFFF !important;border-color:rgba(47,158,68,.55) !important;}

/* Rendimiento: se quitan animaciones continuas/decorativas que no aportan
   funcionalidad y sí consumen CPU/GPU constantemente en segundo plano */
#sb-role-label,.role-neon{animation:none !important;box-shadow:none !important;}
.nav-sec .nb{animation:none !important;}
.nb.on .nb-ico{animation:none !important;}
.wc-live-dot,.wc-badge-live,#wc-live-badge,#wc-header-live{animation:none !important;}

/* Topbar — sólido en vez de blur (backdrop-filter es costoso en
   renderizado, sobre todo con scroll/animaciones detrás) */
#topbar{
  background:var(--white) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:1px solid var(--border) !important;
}

/* Modales */
.modal-bg{background:rgba(0,0,0,.12) !important;backdrop-filter:blur(8px) !important;}
.modal{box-shadow:0 32px 64px rgba(0,0,0,.14) !important;}

/* Scrollbars claros */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);}
