/* ═══════════════════════════════════════════════════════════════════════
   styles.css — Hoja de estilos unificada del sistema.
   Última reorganización: 2026-05-07
   Estructura por secciones (ver índice abajo). Histórico: las secciones que
   dicen "(override styles_extra)" / "(gana versión styles_extra)" indican qué
   versión ganó cuando se fusionó la hoja antigua — el archivo styles_extra.css
   ya no existe y nada lo carga.
   ═══════════════════════════════════════════════════════════════════════ */

/* ÍNDICE
   01. VARIABLES Y RESET
   02. BASE / TIPOGRAFÍA
   03. LAYOUT
   04. BRAND Y NAVEGACIÓN
   05. COMPONENTES BASE
   06. FORMULARIOS Y CONTROLES
   07. TABLAS
   08. PÁGINAS — ORDERS / CATÁLOGO / PROVEEDORES / PERSONAL
   09. PÁGINA — CREAR ORDEN
   10. PÁGINA — ADMIN
   11. PÁGINA — LOGIN
   12. PÁGINA — SIN ACCESO
   13. MODAL Y DETALLE
   14. CHIPS DE USUARIO
   15. TOOLTIP CUSTOM
   16. FX DE FONDO
   17. UTILIDADES Y ESTADOS
   18. RESPONSIVE
   19. ACCESIBILIDAD
*/


/* ═════════════════════════════════════════════════════════════════════════
   01. VARIABLES Y RESET
   ═════════════════════════════════════════════════════════════════════════ */
:root{
  /* Curvas de easing (Emil Kowalski): más "punch" que las built-in/Material.
     --ease-out para entradas/hover (arranca rápido = se siente responsivo),
     --ease-in-out para movimiento on-screen, --ease-drawer estilo iOS. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  /* Escala z-index semántica (impeccable): capas con nombre en vez de números
     mágicos. Valores = los actuales para NO reordenar el stacking ya probado.
     Orden: dropdown < backdrop de modal < overlay < popover < banner < crítico. */
  --z-dropdown: 1200;       /* desplegables flotantes (campanita) */
  --z-modal-backdrop: 9999; /* fondo de modales */
  --z-overlay: 10000;       /* overlays de login/confirmación */
  --z-popover: 10500;       /* date picker (abre sobre modales) */
  --z-tooltip: 10600;       /* burbuja de tooltip — SOBRE modales y popovers: es una
                               ayuda sobre lo que ya está arriba. Estaba en 3000, o
                               sea DEBAJO del backdrop (9999): dentro de un modal la
                               burbuja se dibujaba detrás y no se veía nunca. */
  --z-banner: 99999;        /* banner de actualización */
  --z-critical: 100000;     /* aviso de sesión por expirar — sobre TODO */
  --bg:#050816;
  --bg-soft:#0a1225;
  --panel:#0b1428;
  --panel-2:#101c34;
  --panel-3:#13223d;
  --stroke:rgba(173, 216, 255, .12);
  --stroke-strong:rgba(154, 212, 255, .22);
  --text:#eef4ff;
  --muted:#9fb1d1;
  --muted-2:#7e8eab;
  --brand1:#35c2ff;
  --brand2:#42d6b3;
  --brand3:#7c88ff;
  --danger:#ff8f8f;
  --shadow:0 24px 70px rgba(0,0,0,.42);
  --shadow-soft:0 16px 40px rgba(0,0,0,.28);
  --radius:22px;
  --sidebarW:280px;
  --sidebarWCollapsed:88px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}

/* — body base (override del fondo por aurora corporativa va en sección 16) — */
body {
  margin: 0;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    /* Halo cyan muy sutil centrado arriba (simétrico horizontalmente). */
    radial-gradient(ellipse 1200px 700px at 50% -10%, rgba(53,194,255,.08), transparent 65%),
    /* Halo violeta muy sutil centrado abajo. */
    radial-gradient(ellipse 1100px 600px at 50% 110%, rgba(124,136,255,.06), transparent 65%),
    /* Fondo base: vertical, sin variación lateral. */
    linear-gradient(180deg, #06101f 0%, #050b18 52%, #040815 100%);
  background-attachment: fixed; /* Evita que el fondo se repita al hacer scroll */
  overflow-x: hidden;
  position: relative;
}

/* — Tap highlight global para móvil — */
* {
  -webkit-tap-highlight-color: rgba(53, 194, 255, .14);
}


/* ═════════════════════════════════════════════════════════════════════════
   02. BASE / TIPOGRAFÍA
   ═════════════════════════════════════════════════════════════════════════ */
a{color:inherit; text-decoration:none}
small{color:var(--muted)}
img{max-width:100%; height:auto; display:block}

/* — Mejoras de legibilidad — */
p, li, td, th {
  line-height: 1.65;
}
h1, h2, h3, h4 {
  letter-spacing: -.3px;
  line-height: 1.3;
}

/* — Code inline (gana versión styles_extra) — */
code {
  color: var(--text);
  font-size: .85em;
  background: rgba(53,194,255,.1);
  border: 1px solid rgba(53,194,255,.2);
  padding: 2px 6px;
  border-radius: 5px;
  font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
}

/* — Scrollbars globales (versión styles_extra: 6px más sutil) — */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(173, 216, 255, .18);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(173, 216, 255, .32);
}

/* — Scrollbar Firefox — */
*{ scrollbar-width: thin; scrollbar-color: rgba(173,216,255,.28) rgba(0,0,0,.18); }

/* — Selección de texto — */
::selection {
  background: rgba(53, 194, 255, .28);
  color: #fff;
}


/* ═════════════════════════════════════════════════════════════════════════
   03. LAYOUT
   ═════════════════════════════════════════════════════════════════════════ */
.app{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: var(--sidebarW) 1fr;
  min-height:100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 16px;
  /* Costura del sidebar: eliminar la hairline que parte el aurora */
  border-right: 0 !important;
  /* Fondo totalmente transparente */
  background: transparent !important;
  backdrop-filter: none !important;
  overflow: hidden;
  /* Transición suave al colapsar */
  transition: width 240ms var(--ease-out) !important;
  will-change: width;
  /* Contención estricta del sidebar: nada se desborda hacia el main */
  min-width: 0;
}
.sidebar > * { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* Bloque ::before del sidebar histórico desactivado */
.sidebar::before {
  display: none !important;
}

.main {
  position: relative;
  z-index: 1;
  padding: 0 18px 28px;
  /* La columna 1fr del grid .app debe poder encogerse a la ventana: sin esto, un
     elemento ancho (tabla/grilla al cargar data) expande la columna más allá del
     viewport y, con body{overflow-x:hidden}, se corta el lado derecho (nombre y
     parte de la pantalla). */
  min-width: 0;
}
.container{
  width:min(1820px, 100%);
  margin:0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 81;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0 3px;
  background: transparent !important;
  /* SIN backdrop-filter: el blur difuminaba las burbujas detrás del topbar. */
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-bottom: none;
}
/* Tipografía del topbar compacta — el header no roba espacio visual al
   contenido principal. */
.topbar .left > div > div:first-child {
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}
.topbar .left > div > small {
  font-size: 11px !important;
  opacity: .7;
  line-height: 1.2;
}

/* Main: padding-top mínimo (4px) — sube el topbar cerca del borde sin que
   quede totalmente pegado. */
.main {
  padding-top: 4px !important;
}
.topbar .left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar .right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 220px;
  /* Cuando el ancho aprieta, los hijos (pill de fecha/hora + bloque de usuario)
     se apilan en vez de aplastar el nombre hasta cortarlo con "…". */
  flex-wrap: wrap;
  row-gap: 6px;
}
/* Ajuste para que las letras grandes no empujen el diseño */
.topbar .left div {
  line-height: 1.2;
}

/* — Sidebar collapsed — */
.sidebar-collapsed .app{grid-template-columns:var(--sidebarWCollapsed) 1fr}
.sidebar-collapsed .brand .text{display:none}
.sidebar-collapsed .nav a span.label{display:none}
.sidebar-collapsed .nav a{justify-content:center}
.sidebar-collapsed .nav a .badge{width:40px; height:40px; border-radius:14px}
.sidebar-collapsed .sidebar { overflow: hidden; }
.sidebar-collapsed .sidebar .brand .text { display: none; }

/* — sidebar-collapsed: badges centrados con grid (a prueba de balas) — */
.sidebar-collapsed .sidebar .nav a {
  display: grid !important;
  place-items: center !important;
  padding: 10px 0 !important;
  width: 100%;
  text-align: center;
}
.sidebar-collapsed .sidebar .nav a .badge {
  margin: 0 !important;
  flex: 0 0 auto;
}
/* Garantizar que labels permanezcan ocultos en colapsado */
.sidebar-collapsed .sidebar .nav a .label,
.sidebar-collapsed .sidebar .nav a span.label {
  display: none !important;
}
/* Sin accent-bar lateral cuando no hay label que enmarcar */
.sidebar-collapsed .sidebar .nav a.is-active::before {
  display: none !important;
}
/* Gradiente activo simétrico (en vez de 145deg cargado al top-left) */
.sidebar-collapsed .sidebar .nav a.is-active {
  background: radial-gradient(circle at center,
    rgba(14, 165, 233, .22) 0%,
    rgba(14, 165, 233, .06) 70%,
    transparent 100%) !important;
}

/* — Sidebar metrics / footer — */
.sidebar-footer{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sidebar-metrics{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-top:14px;
}
.metric-card{
  border:1px solid rgba(173,216,255,.10);
  background:linear-gradient(180deg, rgba(7,13,27,.92), rgba(10,16,31,.88));
  border-radius:16px;
  padding:12px 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.metric-k{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.2px;
}
.metric-v{
  margin-top:6px;
  font-weight:900;
  font-size:14px;
}
.sidebar .sidebar-metrics,
.sidebar .sidebar-footer { min-width: 0; max-width: 100%; }
.sidebar .metric-card,
.sidebar .side-pill { min-width: 0; max-width: 100%; overflow: hidden; }


/* ═════════════════════════════════════════════════════════════════════════
   04. BRAND Y NAVEGACIÓN
   ═════════════════════════════════════════════════════════════════════════ */
.brand,
.nav a,
.card,
.kpi,
.pill,
input,
select,
textarea,
.btn,
.pager-btn,
.status{
  position:relative;
  overflow:hidden;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid rgba(173,216,255,.12);
  border-radius:20px;
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  box-shadow:var(--shadow-soft);
}
.brand::after,
.card::after,
.nav a::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.07) 48%, transparent 100%);
  opacity:0;
  transition:opacity .25s ease;
}
.brand:hover::after,
.card:hover::after,
.nav a:hover::after{opacity:1}

/* — Brand del sidebar: libre (sin recuadro) y clickeable — */
.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 4px 14px;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  overflow: visible;
}
.sidebar .brand::after { content: none; }
.sidebar .brand:hover .t1 { color: var(--brand1); }
.sidebar .brand:focus-visible { outline: 2px solid var(--brand1); outline-offset: 4px; border-radius: 8px; }

/* Logo libre: sin recuadro, sin fondo, sin sombra. */
.sidebar .brand .logo {
  width: 64px; height: 64px;
  flex: 0 0 auto;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sidebar .brand .logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 0;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}
.sidebar .brand .text { min-width: 0; flex: 1 1 auto; }
.sidebar .brand .t1 { font-size: 1rem; line-height: 1.2; white-space: normal; word-break: break-word; }
.sidebar .brand .t2 { margin-top: 4px; font-size: 11.5px; line-height: 1.35; white-space: normal; word-break: break-word; }

/* — Logo genérico (no-sidebar) — */
.logo{
  width:64px;
  height:64px;
  border-radius:18px;
  border:1px solid rgba(173,216,255,.18);
  background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 14px 30px rgba(0,0,0,.18);
}
.logo img{
  width:88%;
  height:88%;
  object-fit:contain;
  padding:4px;
}
.brand .t1{font-weight:900; font-size:1.04rem; line-height:1.05; letter-spacing:.2px}
.brand .t2{margin-top:3px; font-size:12px; line-height:1.35; color:var(--muted)}

/* — Nav — */
.nav{
  flex:1 1 auto;
  min-height:0;            /* permite que el flex item se encoja y haga scroll */
  overflow-y:auto;
  overflow-x:hidden;
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(123,182,255,.35) transparent;
}
.nav::-webkit-scrollbar{ width:8px; }
.nav::-webkit-scrollbar-thumb{
  background:rgba(123,182,255,.30);
  border-radius:999px;
}
.nav::-webkit-scrollbar-track{ background:transparent; }
.nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 13px;
  border-radius:16px;
  border:1px solid transparent;
  color:var(--muted);
  background:linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  transition:transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  position:relative;
}
/* Badge numérico al final de un nav-item (ej: documentos no leídos). */
.nav-badge {
  margin-left:auto;
  background:#ff3860;
  color:#fff;
  font-size:11px;
  font-weight:800;
  padding:2px 8px;
  border-radius:999px;
  min-width:22px;
  text-align:center;
  box-shadow:0 0 0 2px rgba(255,56,96,.25);
}
/* Tabs estilo nav-pill (usado en /documentos para Recibidos/Enviados). */
.tab-btn {
  background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.10);
  color:var(--muted);
  padding:10px 18px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  display:inline-flex;align-items:center;gap:6px;
}
.tab-btn:hover { color:var(--text); border-color:rgba(154,212,255,.25); }
.tab-btn.is-active {
  background:linear-gradient(145deg, rgba(53,194,255,.16), rgba(66,214,179,.12));
  color:#fff;
  border-color:rgba(53,194,255,.35);
  box-shadow:0 12px 28px rgba(53,194,255,.15);
}
.tab-panel[hidden] { display:none !important; }
.nav a:hover{
  transform:translateY(-1px);
  color:var(--text);
  border-color:rgba(154,212,255,.18);
  background:linear-gradient(145deg, rgba(20,70,104,.26), rgba(255,255,255,.05));
  box-shadow:0 18px 32px rgba(0,0,0,.16);
}

/* — Sidebar nav: override styles_extra (se pinta por encima del nav genérico) — */
.sidebar .nav a {
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease !important;
  border-radius: 14px;
  margin-bottom: 4px;
  min-width: 0;
}
.sidebar .nav a:hover {
  background: rgba(53,194,255,.09) !important;
  color: var(--brand1) !important;
}
.sidebar .nav a .label,
.sidebar .nav a span.label {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  vertical-align: middle;
}
.sidebar .nav a .badge { flex: 0 0 auto; background: none; border: 0; box-shadow: none; }
/* El activo ya se resalta por la fila (fondo + barrita lateral + texto), así que
   el recuadro del ícono sobra: lo quitamos también en el activo. */
.sidebar .nav a.is-active .badge { background: none; border: 0; box-shadow: none; }

/* — Estilo profesional para enlace ACTIVO — */
.nav a.is-active {
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.15), rgba(14, 165, 233, 0.02));
  border-color: rgba(14, 165, 233, 0.4);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Indicador visual izquierdo (barrita lateral SaaS) */
.nav a.is-active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 15%;
  height: 70%;
  width: 4px;
  background: #0ea5e9;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}
/* Icono dentro del enlace activo */
.nav a.is-active .badge {
  border-color: rgba(14, 165, 233, 0.5);
  background: rgba(14, 165, 233, 0.1);
}

/* — Badges genéricos — */
.badge{
  width:36px;
  height:36px;
  border-radius:13px;
  display:grid;
  place-items:center;
  border:1px solid rgba(173,216,255,.16);
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.badge-icon-img{
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}
/* En el sidebar el recuadro (.badge 36px) es más grande: el ícono se agranda
   para llenarlo mejor (antes 20px dejaba mucho aire alrededor). */
.sidebar .nav a .badge .badge-icon-img { width: 38px; height: 38px; }
.sidebar-collapsed .sidebar .nav a .badge .badge-icon-img { width: 40px; height: 40px; }


/* ═════════════════════════════════════════════════════════════════════════
   05. COMPONENTES BASE
   ═════════════════════════════════════════════════════════════════════════ */

/* — Card — */
.card {
  border: 1px solid rgba(173, 216, 255, .10);
  background: rgba(11, 20, 40, 0.2) !important;
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 28px;
  backdrop-filter: blur(10px);
  /* hover lift profesional */
  transition: transform 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out),
              border-color 200ms ease !important;
}
.card::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  /* Animación pulseLine quitada: hacía que TODAS las cards latieran al
     unísono creando la sensación de que "todos los recuadros respiran". */
  pointer-events:none;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 32px 80px rgba(0,0,0,.52), 0 0 0 1px rgba(53,194,255,.1);
  border-color: rgba(173, 216, 255, .22) !important;
}
.card h2{margin:0 0 8px; font-size:1.1rem}
.card p{margin:0; color:var(--muted); line-height:1.6}

/* Card de planillas (Informes): sin brillo ni elevación al pasar el mouse */
.planillas-card::before{ display:none; }
.planillas-card:hover{
  transform:none;
  box-shadow:var(--shadow);
  border-color:rgba(173, 216, 255, .10) !important;
}
.planillas-card:hover::after{ opacity:0; }

/* Tabla de trabajadores en el detalle de planilla: la cabecera NO debe ser sticky
   (en un modal sin scroll propio taparía la 1ª fila del trabajador). */
.pg-detail-table thead th{
  position:static;
  top:auto;
  box-shadow:none;
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
}

/* — Grid utilities — */
.grid{display:grid; gap:14px}
.grid-2{grid-template-columns:1.1fr .9fr}
.grid-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
@media (max-width:1080px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}

/* — KPIs — */
.kpis{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap:14px;
  margin-top:18px;
}
.kpi{
  padding:18px 18px 16px;
  border-radius:18px;
  border:1px solid rgba(173,216,255,.10);
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:0 16px 28px rgba(0,0,0,.18);
}
.kpi .v{
  font-size:1.45rem;
  font-weight:900;
  line-height:1.05;
}
.kpi .t{
  margin-top:8px;
  color:var(--muted);
  font-size:.92rem;
}

/* — Pills (gana versión styles_extra para .pill base con tipografía compacta) — */
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: var(--text, #c8dff0);
  white-space: nowrap;
}
.pill-soft   { background: rgba(120, 160, 200, .14); color: #c8dff0;
               border-color: rgba(120, 160, 200, .25); }
.pill-strong { background: rgba(0, 180, 255, .15);   color: #ffffff;
               border-color: rgba(0, 180, 255, .30); }
.pill-warn   { background: rgba(255, 159, 28, .18);  color: #ffd166;
               border-color: rgba(255, 159, 28, .35); }
.pill-danger { background: rgba(255, 56, 96, .18);   color: #ff8c9c;
               border-color: rgba(255, 56, 96, .35); }
/* Tipo (Informe/Acta) SIN marco: quita borde Y fondo → solo el texto (lo que
   se veía como "recuadro" era el fondo tenue del chip, no solo el borde).
   Doble clase (.pill.pill-plain) para ganar en especificidad a cualquier .pill. */
.pill.pill-plain { border-color: transparent; background: transparent; padding-left: 0; padding-right: 0; }
/* Badge circular de solo-ícono (ej. 👤 creador, ✏️ editor) en la cabecera del
   detalle: compacto y redondo, a juego con el botón ✕. El dato va en el tooltip. */
.pill.pill-icon {
  padding: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  cursor: default;
  flex-shrink: 0;
}
/* 👤 del creador coloreado por el estado del empleado en Personal:
   verde = ACTIVO, rojo = INACTIVO. Sin clase = persona desconocida (neutro). */
.pill.pill-icon.is-on  { background: rgba(0,255,136,.14); border-color: rgba(0,255,136,.45); color: #00ff88; }
.pill.pill-icon.is-off { background: rgba(255,56,96,.14); border-color: rgba(255,56,96,.45); color: #ff7188; }
/* ==========================================================================
   ÍCONOS SVG del sistema — embebidos como data-URI vía CSS `mask` (toman el
   color del texto con currentColor). Viven TODOS acá, juntos. NO se mezclan
   con web/assets (que es solo PNG de interfaz). Para afinar/agregar un ícono,
   hacerlo en esta sección.
   ========================================================================== */
.ic-eye { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1%2012s4-7%2011-7%2011%207%2011%207-4%207-11%207-11-7-11-7z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1%2012s4-7%2011-7%2011%207%2011%207-4%207-11%207-11-7-11-7z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E") center / contain no-repeat; }
.ic-download{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:4px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4'%2F%3E%3Cpolyline%20points%3D'7%2010%2012%2015%2017%2010'%2F%3E%3Cline%20x1%3D'12'%20y1%3D'15'%20x2%3D'12'%20y2%3D'3'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4'%2F%3E%3Cpolyline%20points%3D'7%2010%2012%2015%2017%2010'%2F%3E%3Cline%20x1%3D'12'%20y1%3D'15'%20x2%3D'12'%20y2%3D'3'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;}
.ic-edit{display:inline-block;width:15px;height:15px;vertical-align:-2px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M17%203a2.828%202.828%200%201%201%204%204L7.5%2020.5%202%2022l1.5-5.5L17%203z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M17%203a2.828%202.828%200%201%201%204%204L7.5%2020.5%202%2022l1.5-5.5L17%203z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;}
.ic-trash{display:inline-block;width:15px;height:15px;vertical-align:-2px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolyline%20points%3D'3%206%205%206%2021%206'%2F%3E%3Cpath%20d%3D'M19%206v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6m3%200V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2'%2F%3E%3Cline%20x1%3D'10'%20y1%3D'11'%20x2%3D'10'%20y2%3D'17'%2F%3E%3Cline%20x1%3D'14'%20y1%3D'11'%20x2%3D'14'%20y2%3D'17'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolyline%20points%3D'3%206%205%206%2021%206'%2F%3E%3Cpath%20d%3D'M19%206v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6m3%200V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2'%2F%3E%3Cline%20x1%3D'10'%20y1%3D'11'%20x2%3D'10'%20y2%3D'17'%2F%3E%3Cline%20x1%3D'14'%20y1%3D'11'%20x2%3D'14'%20y2%3D'17'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;}
.ic-user{display:inline-block;width:15px;height:15px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%2021v-2a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v2'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'7'%20r%3D'4'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%2021v-2a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v2'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'7'%20r%3D'4'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;}

/* Pill, status: layout de chip (legacy con flex/justify) — coexiste con .pill display:inline-block
   gracias a re-set en sub-selectores donde aplica. */
.status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(123,182,255,.22);
  background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  color:var(--text);
  font-size:12px;
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  min-width:34px;
}
a.pill:hover{
  border-color:rgba(140,210,255,.32);
  background:linear-gradient(145deg, rgba(17,68,98,.65), rgba(9,26,46,.82));
}
/* Pills con icono / link */
.pill a, a.pill {
  color: inherit;
  text-decoration: none;
}
/* Etiqueta central de la página */
.page-pill{
  min-width:130px;
  height:32px; 
  font-size:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-variant-numeric:tabular-nums;
  border-radius:999px; /* Totalmente redondeado */
}

/* Compatibilidad: bajada de especificidad para .pill (font-family) */
:where(.pill) { font-family: var(--font-body, system-ui), sans-serif; }

/* Tipografía global pills + status badges */
.pill, [class*="badge-status"] {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 3px 10px;
  border-radius: 99px;
}

/* — Botones — */
button,
.btn{
  width:auto;
  min-height:42px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(173,216,255,.12);
  background:linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
  transition: transform 120ms ease, box-shadow 120ms ease, background 160ms ease !important;
}
.btn {
  position: relative;
  overflow: hidden;
  font-weight: 600;
  letter-spacing: .3px;
}
button:hover,
.btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
  border-color:rgba(154,212,255,.22);
}
button:disabled,
.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  filter:none;
}
.btn:active {
  transform: scale(.97) !important;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.08);
  opacity: 0;
  transition: opacity 140ms ease;
}
.btn:hover::after {
  opacity: 1;
}
.btn-ghost{
  background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
}
.btn-danger{
  background:rgba(255,107,107,.14);
  border-color:rgba(255,107,107,.28);
}

/* — Botón primario translúcido dark-glass (override styles_extra) — */
.btn-primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 50%, rgba(0,12,30,.10) 100%),
    linear-gradient(135deg, rgba(53, 194, 255, .32) 0%, rgba(31, 111, 235, .52) 100%) !important;
  border: 1px solid rgba(107, 208, 255, .38) !important;
  color: #f3faff !important;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .35px;
  padding: 12px 24px;
  text-shadow: 0 1px 2px rgba(0, 12, 30, .42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -1px 0 rgba(0, 12, 30, .18),
    0 0 0 1px rgba(53, 194, 255, .10),
    0 10px 24px rgba(31, 111, 235, .20),
    0 16px 34px rgba(0, 0, 0, .30) !important;
}
.btn-primary:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 50%, rgba(0,12,30,.08) 100%),
    linear-gradient(135deg, rgba(53, 194, 255, .46) 0%, rgba(31, 111, 235, .64) 100%) !important;
  border-color: rgba(140, 220, 255, .56) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(0, 12, 30, .18),
    0 0 0 1px rgba(53, 194, 255, .18),
    0 14px 30px rgba(53, 194, 255, .28),
    0 20px 42px rgba(0, 0, 0, .35) !important;
}
.btn-primary:active {
  transform: translateY(0) scale(.985);
  box-shadow:
    inset 0 2px 5px rgba(0, 12, 30, .22),
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 6px 14px rgba(53, 194, 255, .20),
    0 6px 16px rgba(0, 0, 0, .26) !important;
}
.btn-primary:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 3px rgba(53, 194, 255, .32),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -1px 0 rgba(0, 12, 30, .18),
    0 10px 24px rgba(31, 111, 235, .22),
    0 16px 34px rgba(0, 0, 0, .30) !important;
}
.btn-primary:disabled,
.btn-primary[disabled] {
  background: linear-gradient(135deg, rgba(53, 194, 255, .12) 0%, rgba(31, 111, 235, .18) 100%) !important;
  border-color: rgba(107, 208, 255, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 12px rgba(0,0,0,.22) !important;
  opacity: .55;
  transform: none;
}

/* — Botón icono — */
.btn-icon{
  width:44px;
  height:44px;
  border-radius:15px;
  border:1px solid rgba(173,216,255,.14);
  background:linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow:var(--shadow-soft);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.btn-icon:hover{
  transform:translateY(-1px);
  border-color:rgba(154,212,255,.24);
  background:linear-gradient(145deg, rgba(53,194,255,.16), rgba(66,214,179,.12));
}

.btn-sm{
  min-height:38px;
  padding:8px 12px;
  font-size:12px;
}

/* — Pager — */
.pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px;
}

/* Forzamos los botones para que coincidan con la píldora central */
.pager-btn,
.pager-go .btn {
  min-width: 90px;
  height: 32px !important;
  min-height: 32px !important; /* MATAMOS el 42px del botón base */
  padding: 0 14px !important; /* MATAMOS el padding del botón base */
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  flex: 0 0 auto;
  display: inline-flex !important; 
  align-items: center !important;
  justify-content: center !important;
}

.pager-btn.small,
.pager-go .btn {
  min-width: 44px;
  padding: 0 10px !important;
}

.pager-go{
  display:flex;
  align-items:center;
  gap:6px;
}

/* Forzamos el input para que coincida con la píldora central */
.pager-go input{
  width: 46px;
  min-width: 46px;
  height: 28px !important;
  min-height: 28px !important; /* MATAMOS el 46px del input base */
  padding: 0 6px !important;
  text-align: center;
  font-size: 12px !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border-radius: 999px !important;
  /* Spinners nativos quitados: el input se veía gigante con las flechas
     arriba/abajo del browser. El usuario escribe el número directamente. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.pager-go input::-webkit-outer-spin-button,
.pager-go input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
}

/* Etiqueta central de la página (el tamaño que te gusta) */
.page-pill{
  min-width: 130px;
  height: 32px !important; 
  min-height: 32px !important;
  font-size: 12px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-radius: 999px !important;
  line-height: 1;
}

/* Limpieza del spinner del input numérico */
.pager-go input::-webkit-outer-spin-button,
.pager-go input::-webkit-inner-spin-button{
  margin:0;
}
.pager.pager-inline{
  margin-top:0;
  justify-content:flex-end;
}
/* Paginación: alterna (.pagination, no en uso intensivo) */
.pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.pagination button {
  min-width: 34px;
  min-height: 34px;
  font-size: .8rem;
}
.pagination .page-current {
  background: rgba(53,194,255,.15);
  border-color: rgba(53,194,255,.3) !important;
  color: var(--brand1) !important;
  font-weight: 700;
}

/* — Status — */
tr.clickable{cursor:pointer}
td.status-cell{
  font-weight:900;
  letter-spacing:.6px;
}

/* — Progressbar — */
.progressbar{
  margin-top:14px;
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(173,216,255,.12);
}
.progressbar__fill{
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(39,144,255,.9), rgba(84,214,255,.95));
  box-shadow:0 0 22px rgba(74,179,255,.35);
  transition:width .28s ease;
}

/* — Hero logo — */
.hero-logo{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:28px 0 18px;
}
.hero-logo img{
  width:min(420px, 80vw);
  max-height:420px;
  object-fit:contain;
  border-radius:24px;
  border:1px solid rgba(173,216,255,.12);
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:14px;
  box-shadow:var(--shadow);
}

/* — Footers — discretos, semi-transparentes ("no presumir"). */
.footer,
.app-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px 10px;
  flex-wrap:wrap;
  align-content:flex-start;
  margin-top:16px;
  padding:2px 2px 0;
  color:rgba(234,241,255,.40);
  font-size:11.5px;
  opacity:.7;
  transition:opacity .2s ease;
}
.footer:hover,
.app-footer:hover{ opacity:1; }
.footer .footer-right,
.app-footer .right{
  opacity:.85;
}
/* Email: cobertura para las 3 variantes de clase usadas en los htmls
   (.right, .footer-right, .login-footer__right). Mismo color tenue que
   el resto del footer — sin destacar, transparente, prolijo. */
.footer .email,
.app-footer .email,
.app-footer strong,
.footer-right .email,
.login-footer__right .email{
  color:rgba(125,211,252,.55);
  font-weight:normal;
  letter-spacing:normal;
}
.app-footer .right{text-align:right}
/* Cookie note: misma línea horizontal que copyright/email, mismo estilo.
   Centrado entre los 2 con order:2 (copyright order:1, email order:3).
   Mismo font/color/opacity para que se vea uniforme. */
.footer .footer-cookie-note,
.app-footer .footer-cookie-note{
  text-align:center;
  font-size:11.5px;
  opacity:1;       /* hereda el .7 del footer padre */
  color:inherit;
  flex:0 1 auto;
  order:2;
}
/* Orden de los items del footer: copyright (izq) · cookie (centro) · email (der) */
.footer > div:first-child,
.app-footer > div:first-child{ order:1; }
.footer .right,
.app-footer .right{ order:3; }
/* Detalle pro: candado en cyan tenue (mismo accent que el branding). El
   resto del texto se mantiene en el color del footer. */
.footer .footer-cookie-note span,
.app-footer .footer-cookie-note span{
  margin-right:4px;
  color:rgba(125,211,252,.85);
  font-size:12px;
}

/* — Alerts — */
.alert{
  border-radius:16px;
  padding:14px 16px;
  line-height:1.6;
  font-weight:700;
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,.22);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.alert-ok{
  border:1px solid rgba(86,255,168,.22);
  background:linear-gradient(180deg, rgba(15,70,46,.85), rgba(10,38,27,.92));
  color:#dfffee;
}
.alert-error{
  border:1px solid rgba(255,114,149,.22);
  background:linear-gradient(180deg, rgba(82,22,41,.86), rgba(45,10,21,.94));
  color:#ffe3ea;
  white-space:normal;
  word-break:break-word;
}
.alert-title{
  font-weight: 700;
  margin-bottom: 6px;
}
.alert-extra{
  color: var(--muted);
  font-size: .95em;
}

/* — Panel de error específico para Turnstile (hostname no autorizado) — */
.turnstile-fix{
  text-align:left;
  font-weight:500;
}
.turnstile-fix__title{
  font-weight:800;
  font-size:15px;
  margin-bottom:6px;
}
.turnstile-fix__subtitle{
  margin:0 0 10px;
  font-size:13px;
  line-height:1.5;
  color:#ffe3ea;
}
.turnstile-fix code{
  background: rgba(255,255,255,.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .92em;
  font-weight: 600;
}
.turnstile-fix__steps{
  margin: 0 0 6px;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.65;
  color:#fff;
}
.turnstile-fix__steps li{
  margin-bottom: 6px;
}
.turnstile-fix__steps a{
  color: #ffd8e2;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}
.turnstile-fix__steps a:hover{
  color: #fff;
}
.turnstile-fix__hosts{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin: 8px 0 4px;
}
.turnstile-fix__host{
  display:flex;
  align-items:center;
  gap:8px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 6px 10px;
}
.turnstile-fix__host code{
  flex: 1;
  background: transparent;
  padding: 0;
  font-size: 12.5px;
}
.turnstile-fix__copy{
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}
.turnstile-fix__copy:hover{
  background: rgba(255,255,255,.18);
}
.turnstile-fix__note{
  margin: 8px 0 0;
  font-size: 12px;
  color: rgba(255,227,234,.78);
  line-height: 1.5;
}

/* ============================================================================
   Banner flotante "Hay una nueva versión disponible"
   Inyectado por web/update_check.js. Diseño:
   - Esquina inferior derecha, sobre todo el contenido.
   - Animación de entrada (slide + fade).
   - Pulso sutil en el ícono ↻ mientras está visible para captar atención sin
     ser molesto. Respeta prefers-reduced-motion.
   ========================================================================= */
.app-update-banner{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: var(--z-banner);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 16px;
  max-width: calc(100vw - 36px);
  background: linear-gradient(180deg, #1d3a5f, #14253c);
  color: #eaf3ff;
  border: 1px solid rgba(120, 180, 255, .35);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04) inset;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .26s ease, opacity .26s ease;
  font-family: inherit;
}
.app-update-banner--show{
  transform: translateY(0);
  opacity: 1;
}
.app-update-banner__icon{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #0d1f33;
  background: linear-gradient(180deg, #7ec6ff, #4a9eff);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(74, 158, 255, .45);
  animation: app-update-pulse 2.4s ease-in-out infinite;
}
.app-update-banner__text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.app-update-banner__text strong{
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .1px;
}
.app-update-banner__text span{
  font-size: 12px;
  color: rgba(234, 243, 255, .72);
  line-height: 1.45;
}
.app-update-banner__btn{
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .15px;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.app-update-banner__btn:active{ transform: scale(.97); }
.app-update-banner__btn--primary{
  background: linear-gradient(180deg, #4a9eff, #2f7fe0);
  color: #fff;
  box-shadow: 0 4px 14px rgba(47, 127, 224, .45);
}
.app-update-banner__btn--primary:hover{
  background: linear-gradient(180deg, #62acff, #3f8eee);
}
.app-update-banner__btn--ghost{
  background: transparent;
  color: rgba(234, 243, 255, .82);
  border-color: rgba(255, 255, 255, .15);
}
.app-update-banner__btn--ghost:hover{
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

@keyframes app-update-pulse{
  0%, 100% { transform: scale(1);   box-shadow: 0 4px 12px rgba(74, 158, 255, .45); }
  50%      { transform: scale(1.07); box-shadow: 0 4px 18px rgba(74, 158, 255, .75); }
}

@media (prefers-reduced-motion: reduce){
  .app-update-banner{ transition: none; }
  .app-update-banner__icon{ animation: none; }
}

@media (max-width: 540px){
  .app-update-banner{
    left: 12px;
    right: 12px;
    bottom: 12px;
    flex-wrap: wrap;
  }
  .app-update-banner__text{ flex: 1 1 100%; order: 2; }
  .app-update-banner__icon{ order: 1; }
  .app-update-banner__btn{ flex: 1 1 auto; order: 3; }
}

/* — Side pill (sidebar footer) — */
.side-pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(173, 216, 255, .14);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 12px 30px rgba(0,0,0,.26);
}
.side-pill .k{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.2px;
}
.side-pill strong{
  font-variant-numeric:tabular-nums;
}

/* — Chip genérico (modal detalle) — */
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(173,216,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--text);
  font-size:12px;
}
.chip b{ font-weight:900; }
.chip-status{
  border-color: rgba(154, 212, 255, .22);
}
.chip-status.status-devengada{ border-color: rgba(66,214,179,.35); }
.chip-status.status-comprometida{ border-color: rgba(124,136,255,.35); }
.chip-status.status-anulada,
.chip-status.status-cancelada{ border-color: rgba(255,143,143,.35); }


/* ═════════════════════════════════════════════════════════════════════════
   06. FORMULARIOS Y CONTROLES
   ═════════════════════════════════════════════════════════════════════════ */
input,
select,
textarea{
  width:100%;
  min-height:46px;
  padding:11px 13px;
  border-radius:15px;
  border:1px solid rgba(173,216,255,.12);
  background:linear-gradient(180deg, rgba(7,13,27,.92), rgba(10,16,31,.88));
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
textarea{
  min-height:140px;
  resize:vertical;
}
input::placeholder,
textarea::placeholder{
  color:rgba(231,239,255,.42);
}
input:focus,
select:focus,
textarea:focus{
  border-color:rgba(100,189,255,.55);
  box-shadow:0 0 0 4px rgba(53,194,255,.10), inset 0 1px 0 rgba(255,255,255,.06);
}
input[type="date"]{color-scheme:dark}
select{
  appearance:none;
  /* Flechita ▾ pintada con dos gradientes — centrada verticalmente (50%) en
     CUALQUIER altura del select. Antes estaba anclada al top con
     `calc(1.05em + 1px)` → al cambiar el alto (modales vs filtros) la
     flecha quedaba en posición distinta. Esta es la única regla global,
     así que la consistencia visual se mantiene en TODOS los HTMLs. */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.68) 50%),
    linear-gradient(135deg, rgba(255,255,255,.68) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:34px;
}
option{
  background:#0b1220;
  color:var(--text);
}

/* Reset para checkbox/radio */
input[type="checkbox"],
input[type="radio"]{
  width:auto;
  min-height:auto;
  padding:0;
  border-radius:6px;
  background:none;
  border:1px solid rgba(173,216,255,.18);
  accent-color: rgba(53,194,255,.95);
}

/* — Inputs con focus ring claro (override styles_extra) — */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
select,
textarea {
  transition: border-color 160ms ease, box-shadow 160ms ease !important;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  border-color: var(--brand1) !important;
  box-shadow: 0 0 0 3px rgba(53,194,255,.18) !important;
  outline: none !important;
}

/* — Controls grid — */
.controls{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:12px;
}

/* — Actions — */
.actions,
.actions-row,
.actions-inline{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.actions-inline{
  justify-content:flex-end;
  grid-column:span 2;
}
.actions-inline .btn{min-width:132px}
#export{min-width:132}

.controls-vertical{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.actions-vertical{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.actions-vertical .btn{
  width:100%;
}

/* — Filters panel — */
.page-orders .filters-panel{
  position:sticky;
  top:14px;
  max-height:calc(100vh - 28px);
  /* Solo scroll vertical: la barra horizontal aparecía si algún hijo se
     desbordaba aunque sea 1-2 px (padding, sombra, etc.) y no aportaba nada. */
  overflow-y:auto;
  overflow-x:hidden;
}
.page-orders .filters-footer{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:sticky;
  bottom:0;
  padding-top:12px;
  padding-bottom:6px;
  background:linear-gradient(180deg, rgba(4,8,18,0) 0%, rgba(4,8,18,.78) 30%, rgba(4,8,18,.92) 100%);
}
.page-orders .filters-footer .pill{
  width:100%;
  justify-content:space-between;
}
.page-orders .filters-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.page-orders .mini-label{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
}
.filters-collapsed .page-orders .orders-layout{
  grid-template-columns: 0 1fr;
}
.filters-collapsed .page-orders .filters-panel{
  width:0;
  padding:0;
  border:none;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}

.filter-actions{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

/* Cards scrollables (filtros / crear-orden): scroll interno con scrollbar discreta */
.page-orders .filters-panel,
.page-crear-orden .crear-orden-form {
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(173, 216, 255, .22) transparent;
  padding-bottom: 22px;
}
.page-orders .filters-panel::-webkit-scrollbar,
.page-crear-orden .crear-orden-form::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.page-orders .filters-panel::-webkit-scrollbar-track,
.page-crear-orden .crear-orden-form::-webkit-scrollbar-track {
  background: transparent;
  margin: 14px 0;
}
.page-orders .filters-panel::-webkit-scrollbar-thumb,
.page-crear-orden .crear-orden-form::-webkit-scrollbar-thumb {
  background: rgba(173, 216, 255, .22);
  border-radius: 999px;
  transition: background 160ms ease;
}
.page-orders .filters-panel::-webkit-scrollbar-thumb:hover,
.page-crear-orden .crear-orden-form::-webkit-scrollbar-thumb:hover {
  background: rgba(173, 216, 255, .42);
}
.page-orders .filters-panel::-webkit-scrollbar-corner,
.page-crear-orden .crear-orden-form::-webkit-scrollbar-corner {
  background: transparent;
}

/* — Search hint — */
.search-hint{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed rgba(173,216,255,.18);
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
  background:rgba(255,255,255,.03);
}

/* — Checkbox row + cols box — */
.checkbox-row{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--muted);
  padding:8px 0;
}
.checkbox-row input{ transform:scale(1.05); }

.cols-box{
  margin-top:10px;
  border:1px solid rgba(173,216,255,.10);
  border-radius:14px;
  background:rgba(10,17,33,.40);
  padding:10px 10px;
}
.cols-box > summary{
  cursor:pointer;
  font-weight:900;
  color:var(--text);
  list-style:none;
}
.cols-box > summary::-webkit-details-marker{display:none}
.columns-panel{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}
.col-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(173,216,255,.08);
  background:rgba(0,0,0,.12);
}
.col-item .col-name{ font-weight:800; color:#d7e6ff; font-size:13px; }
.col-item .col-btns{ display:flex; gap:6px; }
.col-item .mini{
  padding:6px 8px;
  border-radius:10px;
  border:1px solid rgba(173,216,255,.18);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
}
.col-item .mini:disabled{ opacity:.45; cursor:not-allowed; }

/* — Password toggle (login) — */
.password-field{
  position: relative;
}
.password-field input{
  padding-right: 52px;
}
.password-toggle{
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  min-height: 32px;
  border: 0;
  background: transparent;
  color: #9fb0cf;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  box-shadow: none;
  filter: none;
  transition: color .2s ease, background-color .2s ease, opacity .2s ease;
}
.password-toggle:hover{
  transform: translateY(-50%);
  color: #eef4ff;
  background: rgba(255,255,255,.06);
  border: 0;
  box-shadow: none;
  filter: none;
}
.password-toggle:focus-visible{
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}
.password-toggle__icon{
  width: 18px;
  height: 18px;
  pointer-events: none;
}


/* ═════════════════════════════════════════════════════════════════════════
   07. TABLAS
   ═════════════════════════════════════════════════════════════════════════ */
.tablewrap{
  margin-top:14px;
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(173,216,255,.08);
  background:linear-gradient(180deg, rgba(4,8,18,.68), rgba(4,8,18,.48));
  scrollbar-width:thin;
  scrollbar-color:rgba(123,182,255,.45) transparent;
}
.tablewrap::-webkit-scrollbar{height:10px; width:10px}
.tablewrap::-webkit-scrollbar-thumb{
  background:rgba(123,182,255,.30);
  border-radius:999px;
}
.tablewrap::-webkit-scrollbar-track{background:transparent}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:transparent;
}
th,td{
  padding:12px 12px;
  border-bottom:1px solid rgba(173,216,255,.10);
  font-size:13px;
  vertical-align:middle;
  white-space:nowrap;
}
th{
  text-align:center;
  color:#c6d4ef;
  font-weight:800;
  letter-spacing:.2px;
  background:rgba(10,17,33,.94);
}

/* thead sticky + override styles_extra (centrado vertical + text-align !important) */
thead th{
  position:sticky;
  top: var(--table-sticky-top, 0px);
  z-index:30;
  /* Fondo SÓLIDO (antes rgba .96 + blur): así las filas que suben por detrás quedan
     TAPADAS y el encabezado sticky se ve limpio, con los títulos siempre visibles. */
  background: #0a1121;
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  vertical-align: middle;
  text-align: center !important; /* override del inline-style que pone el JS por columna */
}

/* Tablas con scroll INTERNO (.orders-tablewrap / .tablewrap): el encabezado sticky
   va SIEMPRE pegado arriba (top:0) y por encima de las filas (z-index alto).
   IMPORTANTE — `position: sticky !important`: los encabezados ORDENABLES llevan
   title="Ordenar" → layout.js los vuelve [data-tooltip], y la regla
   `[data-tooltip]{position:relative}` (más específica) les PISABA el sticky → esas
   columnas (ej. Producto/Stock/Teléfono) perdían la fijación y la fila las tapaba.
   Este !important restaura el sticky en TODOS los th, tengan tooltip o no. */
.orders-tablewrap thead th,
.tablewrap thead th{
  position: sticky !important;
  top: 0 !important;
  z-index: 60;
}

/* Cabeceras de tabla generadas por JS (.th-sort/.th-label/.th-arrow) */
thead th.th-sort {
  cursor: pointer;
  user-select: none;
}
.th-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: 1.35;
  color: var(--text, #c8dff0);
}
.th-arrow {
  display: block;
  font-size: 9px;
  color: var(--muted, #5a7a96);
  margin-top: 3px;
  line-height: 1;
  letter-spacing: .3px;
}

/* — Tbody hover (override styles_extra: !important) — */
tbody tr{
  animation:rowFade .22s ease;
  transition: background 120ms ease !important;
}
tbody tr:hover{
  background: rgba(53,194,255,.06) !important;
}
tbody tr:hover td{
  background:rgba(53,194,255,.05);
  color: var(--text) !important;
}

/* Filas clickeables — hover más notorio: fondo + anillo interior, curva fuerte. */
.row-clickable        { cursor: pointer; transition: background-color .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.row-clickable:hover  { background-color: rgba(0, 220, 255, .12); box-shadow: inset 0 0 0 1px rgba(125,211,252,.28); }
.row-clickable:active { background-color: rgba(0, 220, 255, .18); }

td.wrap{
  min-width:320px;
  max-width:440px;
  white-space:normal;
}

/* Columnas 1 a 4 */
table th:nth-child(1), table td:nth-child(1){
  min-width:96px;
  text-align:center;
}
table th:nth-child(2), table td:nth-child(2){
  min-width:72px;
  text-align:center;
}
table th:nth-child(3), table td:nth-child(3){
  min-width:92px;
  text-align:center;
}
table th:nth-child(4), table td:nth-child(4){
  min-width:118px;
  text-align:center;
}

/* Columna 5: Razón Social */
table th:nth-child(5){
  min-width:360px;
  text-align:center;
}
table td:nth-child(5){
  min-width:360px;
  text-align:left;
  white-space:normal;
}

/* Columna 6: Oficina */
table th:nth-child(6){
  min-width:400px;
  text-align:center;
}
table td:nth-child(6){
  min-width:400px;
  text-align:left;
  white-space:normal;
}

/* Columna 7: Total */
table th:nth-child(7){
  min-width:150px;
  text-align:center;
}
table td:nth-child(7){
  min-width:150px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Columna 8: Estado */
table th:nth-child(8), table td:nth-child(8){
  min-width:72px;
  text-align:center;
}

/* Columna 9: Archivo */
table th:nth-child(9), table td:nth-child(9){
  min-width:156px;
  text-align:center;
}

/* — Sortable headers — */
th[data-sort]{
  cursor:pointer;
  user-select:none;
}
th[data-sort]:hover{
  background:rgba(14, 28, 52, .95);
}
th[data-sort] .sort-icon{
  display:inline-block;
  margin-left:6px;
  opacity:.75;
  font-weight:900;
}
th[data-sort].is-sorted .sort-icon{
  opacity:1;
}
th .sort-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(173,216,255,.20);
  background:rgba(255,255,255,.06);
  margin-left:6px;
}

/* Ocultar columnas por data-col */
th[data-col].is-hidden,
td[data-col].is-hidden{
  display:none !important;
}

/* — Etiqueta de ordenamiento profesional — */
.sort-status {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 4px 10px;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(14, 165, 233, 0.25);
  border-radius: 8px;
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.sort-status b {
  color: #ffffff;
  margin-left: 4px;
}

/* — Empty table — */
.empty-table{
  text-align:center;
  color:var(--muted);
  padding:28px 12px;
}

/* — Data stack — */
.data-stack{
  display:grid;
  gap:4px;
  min-width:0;
}
.data-primary,
.data-secondary{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.data-primary{
  font-weight:900;
  color:var(--text);
}
.data-secondary{
  color:var(--muted);
  font-size:12px;
}
.data-primary.clamp,
.data-secondary.clamp{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
}


/* ═════════════════════════════════════════════════════════════════════════
   08. PÁGINAS — ORDERS / CATÁLOGO / PROVEEDORES / PERSONAL
   ═════════════════════════════════════════════════════════════════════════ */
/* — Órdenes: layout con filtros a la izquierda — */
.page-orders .orders-layout{
  display:grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap:10px;
  align-items:start;
  margin-top:6px;
}

.orders-list-card{
  display:flex;
  flex-direction:column;
  min-height:clamp(220px, 30vh, 360px);
  border-radius: 25px;
  overflow: hidden;
}
.orders-tablewrap{
  flex:1;
  min-height:0;
  --table-sticky-top: 0px;
  border-radius: 18px;
  overflow: auto;
}
/* — Esquinas redondeadas internas: primera/última celda de thead/tbody — */
.orders-tablewrap > table thead tr:first-child th:first-child,
.tablewrap        > table thead tr:first-child th:first-child {
  border-top-left-radius: 14px;
}
.orders-tablewrap > table thead tr:first-child th:last-child,
.tablewrap        > table thead tr:first-child th:last-child {
  border-top-right-radius: 14px;
}
.orders-tablewrap > table tbody tr:last-child td:first-child,
.tablewrap        > table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 14px;
  border-bottom: 0;
}
.orders-tablewrap > table tbody tr:last-child td:last-child,
.tablewrap        > table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 14px;
  border-bottom: 0;
}
.orders-tablewrap.is-loading{
  opacity:.78;
}
.page-orders .orders-list-card{
  margin-bottom:0;
}
.page-orders .footer{
  margin-top:10px;
}

/* Header de "Listado" con pager a la derecha */
.listado-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

/* Table toolbar */
.table-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0;
  flex-wrap:wrap;
}
.table-toolbar__text{
  color:#bcd2f5;
  font-size:13px;
  font-weight:600;
}
.table-toolbar__state{
  margin-left:auto;            /* empuja el estado a la derecha, junto al botón ↻ */
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.25px;
  /* Estado idle ("Listo") = verde, formato status-on del sistema. */
  background:rgba(0,255,136,.12);
  color:#00ff88;
  border:1px solid rgba(0,255,136,.30);
}
.table-toolbar__state.is-busy{
  /* Mientras carga = ámbar, formato status-warn. */
  background:rgba(255,159,28,.14);
  color:#ffd166;
  border-color:rgba(255,159,28,.35);
  box-shadow:none;
}

/* — Personal / Proveedores nombres con elipsis — */
.personal-name,
.proveedor-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* — Personal: Cargo / Oficina compacto — */
.personal-cargo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
  min-width: 0;
}
.personal-cargo__top {
  font-weight: 700;
  color: var(--text, #e0f0ff);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.personal-cargo__bot {
  font-size: 11.5px;
  color: var(--muted, #88a9c6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.personal-cargo__more {
  margin-left: 4px;
  font-size: 9.5px;
  padding: 1px 6px;
  vertical-align: middle;
}

/* — Catálogo SIGA tabla — */
.catalogo-siga-wrap{
  overflow:auto;
}
.catalogo-siga-table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}
.catalogo-siga-table th,
.catalogo-siga-table td{
  /* La altura de fila uniforme (40px) la fija la regla general
     .page-orders .orders-tablewrap td — ver sección final del archivo. */
  vertical-align:top;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}
/* 1 = TIPO */
.catalogo-siga-table th:nth-child(1),
.catalogo-siga-table td:nth-child(1){
  width:8%;
  min-width:8%;
  max-width:8%;
  text-align:center;
  vertical-align:middle;
}
/* 2 = CODIGO */
.catalogo-siga-table th:nth-child(2),
.catalogo-siga-table td:nth-child(2){
  width:12%;
  min-width:12%;
  max-width:12%;
  text-align:center;
  vertical-align:middle;
}
/* 3 = DESCRIPCION */
.catalogo-siga-table th:nth-child(3),
.catalogo-siga-table td:nth-child(3){
  width:34%;
  min-width:34%;
  max-width:34%;
  text-align:center;
  vertical-align:middle;
}
.catalogo-siga-table th:nth-child(3){
  text-align:center;
}
.catalogo-siga-table td:nth-child(3){
  text-align:left !important;
  vertical-align:top;
  padding-left:16px;
  padding-right:16px;
}
/* 4 = UNIDAD */
.catalogo-siga-table th:nth-child(4),
.catalogo-siga-table td:nth-child(4){
  width:10%;
  min-width:10%;
  max-width:10%;
  text-align:center;
  vertical-align:middle;
}
/* 5 = TIPO DE USO */
.catalogo-siga-table th:nth-child(5),
.catalogo-siga-table td:nth-child(5){
  width:11%;
  min-width:11%;
  max-width:11%;
  text-align:center;
  vertical-align:middle;
}
/* 6 = TIPO DE ITEM */
.catalogo-siga-table th:nth-child(6),
.catalogo-siga-table td:nth-child(6){
  width:11%;
  min-width:11%;
  max-width:11%;
  text-align:center;
  vertical-align:middle;
}
/* 7 = PRECIO UNITARIO */
.catalogo-siga-table th:nth-child(7),
.catalogo-siga-table td:nth-child(7){
  width:9%;
  min-width:9%;
  max-width:9%;
  text-align:center;
  vertical-align:middle;
}
/* 8 = ACCIONES (ojito) */
.catalogo-siga-table th:nth-child(8),
.catalogo-siga-table td:nth-child(8){
  width:5%;
  min-width:5%;
  max-width:5%;
  text-align:center;
  vertical-align:middle;
}
.catalogo-cell--tipo,
.catalogo-cell--codigo,
.catalogo-cell--unidad_medida,
.catalogo-cell--precio_unitario{
  text-align:center;
}
.catalogo-cell--descripcion{
  text-align:left !important;
}
.catalogo-desc{
  display:block;
  width:100%;
  text-align:left;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
  line-height:1.38;
}


/* ═════════════════════════════════════════════════════════════════════════
   09. PÁGINA — CREAR ORDEN
   ═════════════════════════════════════════════════════════════════════════
   (Reglas específicas del formulario de creación se aplican vía
   .page-crear-orden .crear-orden-form en sección 06 Filters/Scrollable cards.
   No hay clases adicionales únicas en los CSS para esta sección por ahora.)
*/


/* ═════════════════════════════════════════════════════════════════════════
   10. PÁGINA — ADMIN
   ═════════════════════════════════════════════════════════════════════════ */
/* — Admin section head — */
.admin-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

/* — Admin tablewrap — */
.admin-tablewrap table th,
.admin-tablewrap table td{
  white-space:normal;
  vertical-align:top;
}
.admin-tablewrap{
  overflow-x:auto;
  overflow-y:hidden;
}
.admin-grid-table{
  min-width:1320px;
}
.admin-tablewrap thead th{
  position:static;
  top:auto;
  z-index:1;
  white-space:nowrap;
  vertical-align:middle;
  background:linear-gradient(180deg, rgba(8,14,28,.98), rgba(6,11,23,.98));
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);
  backdrop-filter:none;
}
.admin-tablewrap tbody td{
  vertical-align:middle;
  line-height:1.45;
}
.admin-tablewrap table th,
.admin-tablewrap table td{
  padding:14px 16px;
}
.admin-tablewrap tbody tr:nth-child(even) td{
  background:rgba(255,255,255,.018);
}
.admin-tablewrap tbody tr:hover td{
  background:rgba(53,194,255,.06);
}

/* Sessions table cols */
.admin-sessions-table th:nth-child(1),
.admin-sessions-table td:nth-child(1){min-width:130px; text-align:center;}
.admin-sessions-table th:nth-child(2),
.admin-sessions-table td:nth-child(2){min-width:220px; text-align:left;}
.admin-sessions-table th:nth-child(3),
.admin-sessions-table td:nth-child(3){min-width:110px; text-align:center;}
.admin-sessions-table th:nth-child(4),
.admin-sessions-table td:nth-child(4){min-width:130px; text-align:center;}
.admin-sessions-table th:nth-child(5),
.admin-sessions-table td:nth-child(5){min-width:190px; text-align:left;}
.admin-sessions-table th:nth-child(6),
.admin-sessions-table td:nth-child(6){min-width:130px; text-align:center;}
.admin-sessions-table th:nth-child(7),
.admin-sessions-table td:nth-child(7){min-width:170px; text-align:left;}
.admin-sessions-table th:nth-child(8),
.admin-sessions-table td:nth-child(8){min-width:130px; text-align:left;}
.admin-sessions-table th:nth-child(9),
.admin-sessions-table td:nth-child(9){min-width:180px; text-align:left;}
.admin-sessions-table th:nth-child(10),
.admin-sessions-table td:nth-child(10){min-width:120px; text-align:center;}
/* Audit table cols */
/* 8 columnas: Hora · Evento · Estado · Usuario · Detalle · Página · Dispositivo · IP */
.admin-audit-table th:nth-child(1),
.admin-audit-table td:nth-child(1){min-width:130px; text-align:left;}    /* Hora */
.admin-audit-table th:nth-child(2),
.admin-audit-table td:nth-child(2){min-width:110px; text-align:center;}  /* Evento */
.admin-audit-table th:nth-child(3),
.admin-audit-table td:nth-child(3){min-width:95px;  text-align:center;}  /* Estado */
.admin-audit-table th:nth-child(4),
.admin-audit-table td:nth-child(4){min-width:190px; text-align:left;}    /* Usuario */
.admin-audit-table th:nth-child(5),
.admin-audit-table td:nth-child(5){min-width:260px; text-align:left;}    /* Detalle */
.admin-audit-table th:nth-child(6),
.admin-audit-table td:nth-child(6){min-width:130px; text-align:left;}    /* Página */
.admin-audit-table th:nth-child(7),
.admin-audit-table td:nth-child(7){min-width:130px; text-align:center;}  /* Dispositivo */
.admin-audit-table th:nth-child(8),
.admin-audit-table td:nth-child(8){min-width:130px; text-align:center;}  /* IP */

/* — Admin subnav — */
.admin-subnav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.admin-subnav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}
.admin-subnav a.is-active {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}

/* — Admin grid links — */
.admin-grid-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.admin-link-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-soft);
}
.admin-link-card:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
}
.admin-link-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}
.admin-link-card h3 {
  margin: 0 0 6px;
}
.admin-link-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

/* — Admin user form — */
.admin-user-form{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.admin-user-form__actions{
  grid-column:1 / -1;
  display:flex;
  justify-content:flex-end;
}

.users-admin-wrap{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.user-admin-card{
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(173,216,255,.10);
  background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}
.user-admin-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.user-admin-card__head h3{
  margin:0 0 6px;
  font-size:18px;
}
.user-admin-card__head p{
  margin:0;
  color:var(--muted);
  line-height:1.45;
}
.user-admin-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.user-admin-grid label{
  display:grid;
  gap:8px;
}
.user-admin-grid label span{
  font-size:12px;
  color:#d7e6ff;
  font-weight:700;
}
.user-admin-grid__full{
  grid-column:1 / -1;
}
.toggle-field{
  align-content:end;
}
.toggle-field input{
  justify-self:start;
  transform:scale(1.05);
}
.user-admin-card__foot{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.user-admin-card__foot small{
  color:var(--muted);
}
.user-admin-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}
.user-admin-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* — Admin: lista de usuarios compacta con expansión — */
.users-admin-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px 0;
  flex-wrap: wrap;
}
.users-admin-toolbar #usersFilter {
  flex: 1;
  min-width: 220px;
  background: var(--card2, #0b1c2e);
  color: var(--text, #c8dff0);
  border: 1px solid var(--stroke2, #143552);
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit;
}
.users-admin-toolbar #usersFilter:focus {
  outline: none;
  border-color: var(--cyan, #00dcff);
  box-shadow: 0 0 0 2px rgba(0, 220, 255, 0.18);
}
.user-row {
  background: var(--card, #091525);
  border: 1px solid var(--stroke2, #143552);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .15s ease;
}
.user-row:hover {
  border-color: rgba(0, 220, 255, 0.35);
}
.user-row__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.user-row__main {
  min-width: 0;
}
.user-row__name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text, #c8dff0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-row__meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted, #5a7a96);
}
.user-row__dni strong { color: var(--text, #c8dff0); font-weight: 600; }
.user-row__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* ──────────────────────────────────────────────────────────────────────────
   CHIPS DE ESTADO (genéricas, reutilizables)
   Usalas en cualquier listado: personal, proveedores, catalogo, ordenes...
     <span class="status-pill status-on">Activo</span>
     <span class="status-pill status-off">Inactivo</span>
   .user-state / .user-state--on/off se mantienen como aliases legacy.
   ────────────────────────────────────────────────────────────────────────── */
.status-pill,
.user-state {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .3px;
  white-space: nowrap;
}
.status-on,
.user-state--on {
  background: rgba(0, 255, 136, 0.12);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.3);
}
.status-off,
.user-state--off {
  background: rgba(255, 56, 96, 0.10);
  color: #ff7188;
  border: 1px solid rgba(255, 56, 96, 0.3);
}
/* Variantes adicionales con el mismo estilo visual. */
.status-warn {
  background: rgba(255, 159, 28, 0.14);
  color: #ffd166;
  border: 1px solid rgba(255, 159, 28, 0.35);
}
.status-info {
  background: rgba(0, 180, 255, 0.14);
  color: #ffffff;
  border: 1px solid rgba(0, 180, 255, 0.30);
}
.status-neutral {
  background: rgba(120, 160, 200, 0.14);
  color: #c8dff0;
  border: 1px solid rgba(120, 160, 200, 0.25);
}
.user-row__toggle {
  min-width: 90px;
  padding: 6px 14px;
  font-size: 12px;
}
/* Cuerpo: oculto cuando data-collapsed="1" */
.user-row__body {
  border-top: 1px solid var(--stroke2, #143552);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.user-row[data-collapsed="1"] .user-row__body { display: none; }
.user-row__quickfacts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.user-row__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px dashed rgba(20, 53, 82, 0.6);
  margin-top: 6px;
}

/* — Permisos por usuario — */
.permissions-panel{
  grid-column:1 / -1;
}
.permissions-box{
  margin-top:6px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(173,216,255,.12);
  background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.permissions-box__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.permissions-box__head strong{
  display:block;
  font-size:14px;
}
.permissions-box__head p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.permission-presets{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.permissions-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.permission-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(173,216,255,.10);
  background:rgba(255,255,255,.035);
}
.permission-item input{
  margin-top:3px;
  transform:scale(1.05);
}
.permission-item strong{
  display:block;
  font-size:13px;
}
.permission-item span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}
.permission-item--admin{
  border-color:rgba(255,199,87,.18);
  background:linear-gradient(145deg, rgba(255,199,87,.09), rgba(255,255,255,.025));
}

/* — Admin import — */
.admin-import-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.admin-import-shell{
  display:grid;
  grid-template-columns:minmax(300px, 420px) minmax(420px, 1fr);
  gap:20px;
  align-items:start;
}
.admin-import-shell__left,
.admin-import-shell__right{
  display:grid;
  gap:14px;
}
.admin-import-lead{
  color:var(--muted);
  line-height:1.7;
}
.import-help-list{
  margin:0;
  padding-left:18px;
  color:var(--text);
  display:grid;
  gap:10px;
}
.import-help-list li::marker{
  color:var(--accent);
  font-weight:900;
}
.import-file-card{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:96px;
  border:1px solid rgba(173,216,255,.12);
  border-radius:18px;
  padding:16px;
  background:linear-gradient(180deg, rgba(7,13,27,.92), rgba(10,16,31,.88));
  box-shadow:var(--shadow);
}
.import-file-card__type{
  min-width:64px;
  height:64px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:.8px;
  border:1px solid rgba(123,182,255,.20);
  background:linear-gradient(145deg, rgba(22,120,190,.34), rgba(14,38,68,.88));
}
.import-file-card__body{
  display:grid;
  gap:6px;
  min-width:0;
}
.import-file-card__body strong{
  font-size:15px;
  word-break:break-word;
}
.import-file-card__body span,
.muted{
  color:var(--muted);
}
.import-target-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
.import-target-card{
  border:1px solid rgba(173,216,255,.10);
  border-radius:16px;
  padding:14px;
  background:linear-gradient(180deg, rgba(7,13,27,.92), rgba(10,16,31,.88));
  display:grid;
  gap:6px;
}
.import-target-card strong{
  font-size:14px;
}
.import-target-card span{
  color:var(--muted);
  line-height:1.5;
  font-size:13px;
}
.badge-siga{
  width: 44px;
  height: 30px;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #0c63e7 0%, #0a3f9f 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 16px rgba(12,99,231,.22);
}
.badge-siga-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.import-progress-card{
  border:1px solid rgba(173,216,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-radius:20px;
  padding:16px;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}
.import-progress-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.import-progress-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
.mini-stat{
  border:1px solid rgba(173,216,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.mini-stat span{
  color:var(--muted);
  font-size:12px;
}
.mini-stat strong{
  font-weight:900;
  font-size:15px;
}
.import-mode-note{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(173,216,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  color:var(--muted);
  line-height:1.45;
}

/* — Admin import: importación SQLite — */
.import-sqlite-card {
  margin-top: 14px;
  border: 1px solid var(--stroke2, rgba(0, 220, 255, .22));
  border-radius: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg,
    rgba(0, 220, 255, .04),
    rgba(0, 220, 255, .01));
}
.import-sqlite-card h3 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .3px;
}
.import-sqlite-card .lead {
  font-size: 12.5px;
  color: var(--muted, #5a7a96);
  margin-bottom: 10px;
}
.import-sqlite-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
}
.import-sqlite-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 10px;
}
.import-sqlite-actions .btn {
  flex: 1 1 200px;
  min-height: 38px;
}

/* — Admin import unificada (drag-drop) — */
.import-unified {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.import-dropzone {
  background: var(--card2, #0b1c2e);
  border: 2px dashed var(--stroke2, #143552);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out), transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.import-dropzone:hover,
.import-dropzone.is-dragover {
  border-color: var(--cyan, #00dcff);
  background: rgba(0, 220, 255, 0.05);
}
.import-dropzone__icon {
  font-size: 36px;
  margin-bottom: 8px;
  color: var(--cyan, #00dcff);
}
.import-dropzone__title {
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--text, #c8dff0);
}
.import-dropzone__sub {
  color: var(--muted, #5a7a96);
  font-size: 12px;
}
.import-dropzone__formats {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.import-dropzone__formats .pill { font-size: 11px; }

.import-detection {
  background: var(--card, #091525);
  border: 1px solid var(--stroke2, #143552);
  border-radius: 10px;
  padding: 14px;
  font-size: 13px;
}
.import-detection__row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  padding: 6px 0;
  align-items: center;
}
.import-detection__row + .import-detection__row {
  border-top: 1px dashed rgba(20, 53, 82, 0.6);
}
.import-detection__label {
  color: var(--muted, #5a7a96);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 700;
}
.import-detection__value {
  color: var(--text, #c8dff0);
  word-break: break-all;
}
.import-detection__value--strong {
  color: var(--cyan, #00dcff);
  font-weight: 700;
}
.import-detection__select {
  width: 100%;
  background: var(--card2, #0b1c2e);
  color: var(--text, #c8dff0);
  border: 1px solid var(--stroke2, #143552);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
}
.import-detection__hint {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255, 209, 102, 0.08);
  border: 1px solid rgba(255, 209, 102, 0.22);
  border-radius: 8px;
  color: var(--text, #c8dff0);
  font-size: 12px;
}
.import-unified-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.import-unified-actions .btn { flex: 1; }

/* — Importación unificada — cabecera de sección e inbox selector — */
.import-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.import-section-lead {
  font-size: 13px;
  color: var(--muted, #5a7a96);
  margin: 4px 0 0 0;
  line-height: 1.55;
}
.import-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.import-inbox-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.import-inbox-selector {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.import-inbox-label {
  font-size: 11.5px;
  color: var(--muted, #5a7a96);
  font-weight: 600;
  letter-spacing: .2px;
}
.import-inbox-select {
  width: 100%;
  background: var(--card2, #0b1c2e);
  color: var(--text, #c8dff0);
  border: 1px solid var(--stroke2, #143552);
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
  font-size: 13px;
  transition: border-color .15s ease;
}
.import-inbox-select:focus {
  outline: none;
  border-color: var(--cyan, #00dcff);
  box-shadow: 0 0 0 2px rgba(0, 220, 255, .18);
}
.import-inbox-reload {
  white-space: nowrap;
  flex-shrink: 0;
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
}


/* ═════════════════════════════════════════════════════════════════════════
   11. PÁGINA — LOGIN
   ─────────────────────────────────────────────────────────────────────────
   Rediseño 2026-05-17 v5 (basado en mockup del usuario con 3 columnas):
   - Header full-width arriba (branding izquierda + hero centrado).
   - SHELL en 3 columnas: features izquierda | card centro | descripción
     derecha. Todo a la misma altura, centrado verticalmente.
   - Footer al final, en flow normal.
   - SIN líneas/dividers horizontales: solo el fondo con burbujas separa.
   ═════════════════════════════════════════════════════════════════════════ */
body.page-login{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.page-login::before,
.page-login::after{
  opacity:.5;
}

/* ── TOP: branding + hero ───────────────────────────────────────────────── */
.login-top{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  padding:22px 36px;
  position:relative;
  z-index:1;
  /* SIN border-bottom: el aire del fondo separa, no necesitamos líneas. */
}
/* Mismo patrón que .sidebar .brand: libre (sin recuadro/borde/sombra/bg).
   Al hover solo el texto principal cambia a cyan. */
.login-top__brand{
  grid-column:1;
  justify-self:start;
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:inherit;
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  padding:0;
  margin:0;
}
.login-top__brand:hover .login-top__brand-t1{
  color:var(--brand1);
}
.login-top__brand:focus-visible{
  outline:2px solid var(--brand1);
  outline-offset:4px;
  border-radius:8px;
}
.login-top__logo{
  width:54px;
  height:54px;
  object-fit:contain;
  filter:drop-shadow(0 6px 18px rgba(125,211,252,.32));
}
.login-top__brand-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.login-top__brand-t1{
  margin:0;
  font-size:15px;
  font-weight:700;
  color:#eaf3ff;
  letter-spacing:.15px;
}
.login-top__brand-t2{
  margin:0;
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
  letter-spacing:.15px;
}
.login-top__hero{
  grid-column:2;
  margin:0;
  text-align:center;
  font-size:clamp(26px, 3vw, 38px);
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.05;
  color:#eaf2ff;
}

/* ── CUERPO: 3 columnas (features | card | descripción) ──────────────────
   Las columnas laterales están PEGADAS a los bordes de la viewport (padding
   mínimo del shell). El card mantiene su ancho fijo en el centro.
   Features izquierda alineadas left. Descripción derecha alineada right.
   ───────────────────────────────────────────────────────────────────────── */
.login-shell{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(360px, 440px) minmax(0, 1fr);
  align-items:center;
  gap:28px;
  padding:40px 24px;
  position:relative;
  z-index:1;
}

/* Columnas laterales — texto sobre el fondo, pegado al borde. */
.login-side{
  width:100%;
  max-width:260px;
}
.login-side--left{
  justify-self:start;
  text-align:left;
}
.login-side--right{
  justify-self:end;
  text-align:right;
}
/* Descripción derecha: cuando se alinea derecha, los iconos de las features
   se quedan a la izquierda del texto. Esa columna no usa iconos, solo texto. */
.login-side--right .login-side__about{
  text-align:right;
}
.login-side__features{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.login-side__features li{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.login-side__icon{
  flex:0 0 auto;
  font-size:20px;
  line-height:1.2;
  margin-top:1px;
  filter:drop-shadow(0 2px 6px rgba(125,211,252,.35));
}
.login-side__features li > span:last-child{
  color:var(--muted);
  line-height:1.55;
  font-size:13px;
}
.login-side__features strong{
  color:#dbeafe;
  font-weight:600;
  margin-right:4px;
}
.login-side__about{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
}
.login-side__about strong{
  color:#dbeafe;
  font-weight:600;
}
/* Módulo de descripción (columna derecha) — mismo layout que features:
   icono a la izquierda + texto a la derecha. Como toda la columna está
   text-align:right, forzamos text-align:left dentro del módulo para que
   el texto se lea natural y el icono quede pegado al texto. */
.login-side--right .login-side__module{
  display:flex;
  align-items:flex-start;
  gap:12px;
  text-align:left;
}
.login-side__module > span:last-child{
  color:var(--muted);
  line-height:1.55;
  font-size:13px;
}
.login-side__module strong{
  color:#dbeafe;
  font-weight:600;
  margin-right:4px;
}

/* ── Form (columna central) ──────────────────────────────────────────────
   SIN recuadro: el "card" es solo un contenedor con padding. Los recuadros
   visibles son los de cada input (DNI, Contraseña) y el botón Ingresar.
   Título, subtítulo y ayuda quedan como texto sobre el fondo. */
.login-card{
  position:relative;
  width:100%;
  max-width:480px;
  padding:0;
  background:none;
  border:none;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.login-card__title{
  margin:0 0 8px;
  font-size:30px;
  font-weight:800;
  letter-spacing:-.015em;
  line-height:1.1;
  color:#eaf2ff;
}
.login-card__subtitle{
  margin:0 0 24px;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}
/* Captcha slot: ocultar cuando está vacío para no dejar hueco innecesario. */
.captcha-slot:empty{ display:none; }
/* Bloque "¿No tienes acceso? + link" — TODO en una línea, SIN divider. */
.login-card__help{
  margin:18px 0 0;
  padding:0;
  border:none;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.5;
}
.login-card__help-text{
  color:var(--muted);
}
.login-card__help-link{
  display:inline;
  margin:0;
  padding:0;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  color:#7dd3fc;
  font:inherit;
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
  letter-spacing:.2px;
  cursor:pointer;
  transition:color .15s ease;
  -webkit-appearance:none;
          appearance:none;
}
.login-card__help-link:hover,
.login-card__help-link:focus{
  color:#bae6fd;
  text-decoration:underline;
  text-underline-offset:3px;
  outline:none;
}
.login-card__help-link:focus-visible{
  outline:2px solid rgba(125,211,252,.55);
  outline-offset:3px;
  border-radius:4px;
}

/* Indicador "Conexión segura" — touch pro al pie del card. */
.login-card__secure{
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(159,177,209,.65);
  font-size:11.5px;
  letter-spacing:.15px;
}
.login-card__secure-icon{
  width:14px;
  height:14px;
  flex:0 0 auto;
  color:#86efac;
  filter:drop-shadow(0 0 6px rgba(134,239,172,.35));
}

/* Form más generoso: inputs altos, labels claros, botón prominente. */
.auth-form{
  gap:14px !important;
  margin-top:22px !important;
}
.auth-form label span{
  font-size:13px !important;
  font-weight:700 !important;
  text-transform:uppercase;
  letter-spacing:.7px;
}
.auth-form input[type="text"],
.auth-form input[type="password"],
.auth-form input[type="email"]{
  min-height:52px !important;
  padding:0 16px !important;
  font-size:16px !important;
  border-radius:14px !important;
}
.auth-form .input-help{
  font-size:12px !important;
}
.login-submit{
  min-height:54px !important;
  font-size:16px !important;
  font-weight:700;
  letter-spacing:.5px;
  border-radius:14px !important;
  margin-top:12px !important;
}

/* Footer del login: en flow normal, sin border-top, semi-transparente
   (presencia discreta — "no ser tan presumido"). */
.login-footer{
  padding:14px 36px 18px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  color:rgba(159,177,209,.45);
  font-size:11.5px;
  position:relative;
  z-index:1;
  opacity:.7;
  transition:opacity .2s ease;
}
.login-footer:hover{ opacity:1; }
.login-footer .email{ color:rgba(125,211,252,.55); }
.login-footer__right{ text-align:right; }

/* ── Animación de entrada — fade + slide up ─────────────────────────────── */
@keyframes loginAnimIn{
  from{ opacity:0; transform:translateY(14px); filter:blur(2px); }
  to  { opacity:1; transform:translateY(0);    filter:blur(0); }
}
.login-anim-in{
  animation:loginAnimIn .55s cubic-bezier(.22,.8,.32,1) both;
}
.login-anim-in--delay{
  animation-delay:.12s;
}
@media (prefers-reduced-motion: reduce){
  .login-anim-in{ animation:none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   MODAL DE CONTACTO — Gmail / Hotmail / Outlook / WhatsApp
   ═════════════════════════════════════════════════════════════════════════ */
.contact-backdrop{
  position:fixed;
  inset:0;
  background:rgba(4,8,22,.65);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  z-index: var(--z-overlay);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:contactFadeIn .22s ease-out;
}
@keyframes contactFadeIn{
  from{ opacity:0; }
  to  { opacity:1; }
}
.contact-modal{
  width:100%;
  max-width:420px;
  border-radius:20px;
  border:1px solid rgba(173,216,255,.18);
  background:linear-gradient(165deg, rgba(20,32,56,.92), rgba(10,18,36,.96));
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.07);
  padding:22px;
  position:relative;
  animation:contactSlideIn .28s cubic-bezier(.22,.8,.32,1);
}
@keyframes contactSlideIn{
  from{ opacity:0; transform:translateY(12px) scale(.98); }
  to  { opacity:1; transform:translateY(0)   scale(1); }
}
.contact-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.contact-modal__title{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:#eaf3ff;
}
.contact-modal__close{
  flex:0 0 auto;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:transparent;
  border:1px solid rgba(173,216,255,.14);
  color:#cde3ff;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.contact-modal__close:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(173,216,255,.28);
  color:#fff;
}
.contact-modal__subtitle{
  margin:0 0 16px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.5;
}
.contact-modal__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.contact-option{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(173,216,255,.12);
  background:rgba(255,255,255,.025);
  text-decoration:none;
  color:inherit;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.contact-option:hover{
  transform:translateY(-2px);
  border-color:rgba(125,211,252,.45);
  background:rgba(255,255,255,.05);
}
.contact-option__icon{
  flex:0 0 auto;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  color:#fff;
}
.contact-option--gmail    .contact-option__icon{ background:linear-gradient(135deg, #ea4335, #c4302b); }
.contact-option--hotmail  .contact-option__icon{ background:linear-gradient(135deg, #0072c6, #005a9e); }
.contact-option--outlook  .contact-option__icon{ background:linear-gradient(135deg, #0078d4, #106ebe); }
.contact-option--whatsapp .contact-option__icon{ background:linear-gradient(135deg, #25d366, #128c7e); }
.contact-option__icon svg{ width:20px; height:20px; }
.contact-option__name{
  font-size:14px;
  font-weight:700;
  color:#eaf3ff;
  letter-spacing:.2px;
}
@media (max-width:480px){
  .contact-modal__grid{ grid-template-columns:1fr; }
}
.login-tabs{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.login-tabs button{
  min-height:44px;
  border-radius:16px;
}
.login-tabs button.is-active{
  background:linear-gradient(135deg, rgba(39,152,204,.58), rgba(29,122,141,.42));
  border-color:rgba(107,208,255,.22);
}
.login-card-pro__head{
  margin-top:18px;
  margin-bottom:10px;
}
.login-card-pro__head h2{
  margin:0 0 6px;
  font-size:28px;
}
.login-card-pro__head p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}
.login-card-pro__head--compact{
  margin-top:0;
}
.login-form-note{
  margin-top:18px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(173,216,255,.10);
  background:rgba(255,255,255,.025);
  color:var(--muted);
  line-height:1.55;
  font-size:12.5px;
}
.login-form-note__link{
  display:block;
  margin-top:8px;
  color:#7dd3fc;
  font-weight:600;
  text-decoration:none;
  letter-spacing:.2px;
  transition:color .15s ease, transform .15s ease;
}
.login-form-note__link:hover{
  color:#bae6fd;
  transform:translateX(3px);
}
.auth-form{
  display:grid;
  gap:12px;
  margin-top:18px;
}
.auth-form label{
  display:grid;
  gap:6px;
}
.auth-form label span{
  font-size:12px;
  color:#d7e6ff;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.auth-form__label-row{
  grid-template-columns:1fr auto;
  align-items:center;
}
.auth-form__counter{
  font-size:11px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  transition:color .15s ease;
}
.auth-form__counter.is-complete{
  color:#86efac;
}
.auth-form__caps{
  font-size:11px;
  font-weight:700;
  color:#fbbf24;
  letter-spacing:.3px;
  animation:capsPulse 1.4s ease-in-out infinite;
}
@keyframes capsPulse{
  0%, 100% { opacity:.75; }
  50%      { opacity:1; }
}
.auth-form__two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* ── Inputs del login: focus ring elegante ──────────────────────────────── */
.auth-form input[type="text"],
.auth-form input[type="password"],
.auth-form input[type="email"]{
  width:100%;
  min-height:46px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(173,216,255,.16);
  background:rgba(4,10,24,.55);
  color:#eaf3ff;
  font:inherit;
  font-size:15px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.auth-form input::placeholder{
  color:rgba(190,210,240,.35);
  letter-spacing:.5px;
}
.auth-form input:hover{
  border-color:rgba(173,216,255,.28);
}
.auth-form input:focus{
  outline:none;
  border-color:rgba(125,211,252,.65);
  background:rgba(4,10,24,.7);
  box-shadow:
    0 0 0 4px rgba(56,142,247,.18),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.auth-form .input-help{
  color:var(--muted);
  font-size:11.5px;
  letter-spacing:.1px;
}

/* ── Password field: input + ojo DENTRO del recuadro del input ────────────
   El input reserva padding-right de 44px para que el ojo quepa adentro.
   El botón está absoluto sobre el lado derecho del input. z-index alto
   para asegurar que no quede tapado por el background del input. */
.password-field{
  position:relative !important;
  display:block !important;
  width:100% !important;
}
.password-field > input{
  padding-right:46px !important;
  width:100% !important;
}
.password-toggle{
  position:absolute !important;
  top:50% !important;
  right:8px !important;
  bottom:auto !important;
  left:auto !important;
  transform:translateY(-50%) !important;
  z-index:5 !important;
  width:32px !important;
  height:32px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:8px !important;
  border:none !important;
  background:transparent !important;
  color:#bfd5f0 !important;
  cursor:pointer !important;
  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;
  box-shadow:none !important;
  transition:color .15s ease, background .15s ease;
}
.password-toggle:hover{
  color:#ffffff !important;
  background:rgba(125,211,252,.16) !important;
}
.password-toggle:focus-visible{
  outline:2px solid rgba(125,211,252,.6);
  outline-offset:1px;
}
.password-toggle__icon{
  width:18px;
  height:18px;
  display:block;
  pointer-events:none;
}

/* ── Botón submit con loading state ─────────────────────────────────────── */
.login-submit{
  margin-top:8px;
  min-height:48px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.4px;
  position:relative;
  overflow:hidden;
}
.login-submit__spinner{
  display:none;
  width:18px;
  height:18px;
  border-radius:50%;
  border:2.5px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  animation:loginSpin .7s linear infinite;
  margin-left:10px;
  vertical-align:middle;
}
.login-submit.is-loading{
  cursor:wait;
  pointer-events:none;
}
.login-submit.is-loading .login-submit__label{
  opacity:.75;
}
.login-submit.is-loading .login-submit__spinner{
  display:inline-block;
}
@keyframes loginSpin{
  to{ transform:rotate(360deg); }
}

/* — Auth pending: ocultar el body hasta que JS aplique las reglas de
   visibilidad por permiso/rol. Usamos un selector DECLARATIVO basado en el
   atributo data-require-auth del HTML para que el ocultamiento se aplique
   inmediatamente al parsear el body, ANTES de que cargue cualquier script.
   Eso evita el flash donde un operador ve momentáneamente enlaces como
   "Admin" que no tiene permiso para usar. JS quita la clase auth-pending
   y agrega .auth-ready en <body> tras aplicar applyVisibilityRules(). */
body[data-require-auth="true"]:not(.auth-ready),
html.auth-pending body:not(.page-login) {
  opacity: 0;
  pointer-events: none;
}

.page-login .footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px 36px;
  margin: 0;
  box-sizing: border-box;
  z-index: 10;
}

/* — Cloudflare Turnstile (login) — */
.captcha-slot { margin: 12px 0 4px; min-height: 0; display: flex; justify-content: center; }
.captcha-slot:empty { display: none; }


/* ═════════════════════════════════════════════════════════════════════════
   12. PÁGINA — SIN ACCESO
   ═════════════════════════════════════════════════════════════════════════ */
.empty-state-card{
  display:grid;
  place-items:center;
  text-align:center;
  min-height:360px;
  gap:12px;
}
.empty-state-icon{
  width:84px;
  height:84px;
  display:grid;
  place-items:center;
  font-size:36px;
  border-radius:26px;
  border:1px solid rgba(173,216,255,.14);
  background:linear-gradient(145deg, rgba(53,194,255,.18), rgba(66,214,179,.10));
  box-shadow:var(--shadow-soft);
}
.empty-state-card p{
  max-width:700px;
  line-height:1.7;
}
.empty-state-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

/* Empty state genérico (otra variante) */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 24px;
  color: var(--muted);
  text-align: center;
}
.empty-state svg, .empty-state .icon {
  opacity: .35;
  width: 48px;
  height: 48px;
}
.empty-state p {
  margin: 0;
  font-size: .9rem;
  max-width: 320px;
  line-height: 1.6;
}


/* ═════════════════════════════════════════════════════════════════════════
   13. MODAL Y DETALLE
   ═════════════════════════════════════════════════════════════════════════ */
/* — Modal backdrop (gana versión styles_extra: blur, padding) — */
/* Entrada/salida animada del modal SIN @starting-style → anda en TODO navegador.
   El backdrop nunca usa display:none (se oculta con visibility+opacity), así la
   transición dispara siempre al togglear .is-open. Enter Y exit animados. */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(2, 5, 9, .74);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms var(--ease-out), visibility 0s linear 240ms;
}
.modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 240ms var(--ease-out), visibility 0s;
}
/* Contenido: escala desde .9 + sube 12px + fade. Pronunciado para que SE NOTE.
   Modales = origin centro (no anclados a un trigger, a diferencia de popovers). */
.modal-backdrop > .modal {
  transform: scale(.9) translateY(12px);
  opacity: 0;
  transition: transform 300ms var(--ease-out), opacity 240ms var(--ease-out);
  will-change: transform, opacity;
}
.modal-backdrop.is-open > .modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}
/* Override profesional: blur + saturación; fondo semi-transparente */
.modal-backdrop, [class*="modal-overlay"] {
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  background: rgba(4, 8, 22, .72) !important;
}

/* — Modal (gana versión styles_extra: layout flex, max-height, etc) — */
.modal {
  background: var(--bg-card, #091525);
  border: 1px solid var(--stroke2, rgba(0, 220, 255, .22));
  border-radius: 14px;
  width: min(900px, 96vw);
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 32px rgba(0, 220, 255, .12);
  /* Padding interno modal PRO */
  padding: 22px;
}
.modal .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* — Modal head (gana versión styles_extra) — */
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  gap: 14px;
  flex-shrink: 0;
}
.modal-head h2 {
  font-size: 16px; font-weight: 800;
  letter-spacing: .3px; color: var(--text, #c8dff0);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* — Modal body — */
.modal-body {
  padding: 16px 18px 22px 18px;
  overflow-y: auto;
  /* Sin esto el eje X queda en `auto` (regla CSS: si un eje es auto, el otro
     deja de ser `visible`), y aparece una barra horizontal ESPURIA con cualquier
     desborde de 1px. El modal no debe scrollear en horizontal: el contenido ancho
     (tablas) ya trae su propio scroll en .orders-tablewrap. */
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
}

/* — Modal detail grid + field — */
.modal-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px 18px;
}
.modal-field {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  background: rgba(255,255,255,.025);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.04);
}
.modal-field__label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted, #5a7a96);
}
.modal-field__value {
  font-size: 13px;
  color: var(--text, #c8dff0);
  word-break: break-word;
}
.modal-field--wide {
  grid-column: 1 / -1;
}
.modal-field--wide .modal-field__value {
  white-space: pre-wrap;
}

/* — Modal section (agrupador) — */
.modal-section {
  margin-bottom: 18px;
}
.modal-section:last-child {
  margin-bottom: 0;
}
.modal-section__title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--cyan, #00dcff);
  padding: 8px 0 6px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(0, 220, 255, .15);
}

/* — Modal headbar / title / sub (legacy original) — */
.modal-headbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.modal-title{
  margin: 0;
  font-size:20px;
  font-weight:950;
  letter-spacing:.2px;
}
.modal-sub{
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}
.modal-table{margin-top:14px; display:flex; flex-direction:column; gap:10px}
.modal-row{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(173,216,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.modal-k{color:#b8c7e8; font-weight:800; font-size:13px}
.modal-v{min-width:0}
.modal-v .pill{max-width:100%; display:inline-block; overflow:hidden; text-overflow:ellipsis}

/* — Modal compacto profesional (row-compact) — */
.modal .row.row-compact{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
.modal .row.row-compact .kv{
  padding:10px 12px;
}
.modal .row.row-compact .k{
  font-size:11px;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.modal .row.row-compact .v{
  font-size:13px;
}
.modal .row.row-compact .v.mono{
  font-variant-numeric: tabular-nums;
  letter-spacing:.4px;
}
.modal .row.row-compact .span-2{ grid-column: span 2; }
.modal .row.row-compact .span-3{ grid-column: span 3; }
.modal .row.row-compact .span-4{ grid-column: 1 / -1; }

/* — KV — */
.kv{
  position: relative;
  border:1px solid rgba(173,216,255,.10);
  background:linear-gradient(180deg, rgba(7,13,27,.94), rgba(10,16,31,.90));
  border-radius:16px;
  padding:12px;
}
.kv .k{
  color:var(--muted);
  font-size:12px;
  display:flex; align-items:center; gap:8px;
}
.kv .v{
  margin-top:6px;
  font-weight:800;
  white-space:normal;
  word-break:break-word;
  line-height:1.35;
}
.kv .v.big{ font-size:18px; font-weight:950; }
.kv .kv-split{ height:10px; }
.kv-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.copy-btn{
  border:1px solid rgba(173,216,255,.16);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:12px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
}
.copy-btn:hover{ border-color: rgba(154, 212, 255, .28); }

/* — Modal meta + more — */
.modal-meta{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.modal-grid{ margin-top:14px; display:flex; flex-direction:column; gap:12px; }
.modal-grid .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.modal-more{
  border:1px solid rgba(173,216,255,.10);
  background:linear-gradient(180deg, rgba(7,13,27,.94), rgba(10,16,31,.90));
  border-radius:16px;
  padding:12px;
}
.modal-more summary{
  cursor:pointer;
  color:var(--muted);
  font-weight:800;
}
.modal-more .more-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

/* — Modal-plazas (Personal) — */
.modal-plazas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-plaza {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border: 1px solid rgba(0, 220, 255, .15);
  border-radius: 8px;
  background: rgba(0, 220, 255, .04);
}
.modal-plaza__num {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--cyan, #00dcff);
  padding-top: 2px;
}
.modal-plaza__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.modal-plaza__cargo {
  font-weight: 700;
  color: var(--text, #e6f3ff);
  font-size: 13px;
  line-height: 1.3;
}
.modal-plaza__dep {
  color: var(--muted, #88a9c6);
  font-size: 12px;
  font-style: italic;
  line-height: 1.3;
}


/* ═════════════════════════════════════════════════════════════════════════
   14. CHIPS DE USUARIO
   ═════════════════════════════════════════════════════════════════════════ */
.topbar-user{
  display:flex;
  align-items:center;
  gap:8px;
  padding:2px 6px;
  border:none;
  background:transparent;
  box-shadow:none;
}
.topbar-user__meta{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0;
  max-width:240px;
  line-height:1.15;
}
/* El nombre es clickeable → abre "Mi cuenta" (modal). Usa el tooltip estilizado
   del sistema (data-tooltip), igual que Chat/Notificaciones. Solo el nombre se
   aclara al hover; sin borde ni tooltip nativo. */
.topbar-user__meta[role="button"]{ cursor:pointer; }
.topbar-user__meta[role="button"]:hover strong{ color:#cdeeff; }
.topbar-user__meta[role="button"]:focus-visible{ outline:none; }
.topbar-user__meta strong{
  font-size:11.5px;
  font-weight:700;
  text-align:center;
  /* El nombre envuelve a 2 líneas si el ancho aprieta (en vez de cortarse con
     "…"): siempre se ve completo y nunca empuja el layout. */
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.15;
  max-width:240px;
}
.topbar-user__meta span{
  font-size:10.5px;
  color:var(--muted);
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:240px;
}

/* — Vistas rápidas globales: íconos del topbar + ventana flotante — */
.qv-btn{ font-size:20px; line-height:1; border:none !important; background:transparent !important; box-shadow:none !important; padding:2px !important; min-width:0 !important; min-height:0 !important; width:auto; height:auto; }
.qv-btn:hover{ filter:brightness(1.2) drop-shadow(0 1px 4px rgba(0,0,0,.4)); transform:translateY(-1px); background:transparent !important; }
/* Quickviews (campanita): mismo chasis que los modales del sistema (.modal +
   modal-head + modal-body). El .modal ya aporta fondo, borde y flex-column;
   aquí solo se ajusta el ancho y se deja el cuerpo (tabla) scrolleable. */
.qv-pop{ width:min(940px,96vw); max-width:940px; max-height:88vh; padding:0; }
.qv-pop .qv-section{ display:flex; flex-direction:column; min-height:0; flex:1 1 auto; }
.qv-pop .modal-head{ flex-shrink:0; }
.qv-pop .qv-actions{ margin-left:auto; }
.qv-pop .qv-body{ padding:0; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.qv-pop .qv-body .qv-scroll{ flex:1 1 auto; min-height:0; overflow:auto; border-radius:0; margin:0; }
/* Encabezado (thead) y fila TOTAL (tfoot) fijos al hacer scroll. */
.qv-scroll thead th{ position:sticky; top:0; z-index:3; background:#0e1a2f; }
.qv-scroll tfoot td{ position:sticky; bottom:0; z-index:3; background:#141d31; }
/* Recorta con "…" el texto largo (cargo, dependencia, nombre) para que las
   columnas no se desborden ni se encimen. El texto completo va en el title. */
.qv-pop .qv-clip{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; text-align:left; }
.qv-pop .orders-table-fixed td{ overflow:hidden; }
/* La tabla del modal (cumpleaños/documentos/saldos) DEBE caber sin scroll
   horizontal. `table-layout:fixed` reparte por los anchos del <thead> y deja que
   .qv-clip recorte con "…" las celdas largas (Cargo, Oficina, Proveedor). Sin esto
   heredaba layout `auto` (fixed solo se aplica en body.page-orders) y se desbordaba.
   Las celdas de texto quedan a la IZQUIERDA; las centradas/derechas mantienen su
   alineación por el style inline del render (mayor especificidad). */
.qv-pop .orders-table-fixed{ table-layout:fixed; width:100%; }
.qv-pop .orders-table-fixed th,
.qv-pop .orders-table-fixed td{ text-align:left; }
/* El thead sticky global lleva un box-shadow amplio (0 10px 22px) para separarse
   al scrollear; con border-collapse:separate la sombra de la PRIMERA y ÚLTIMA
   celda sobresale por los lados y se ve como "cajas" en las esquinas del modal.
   Aquí el thead ya se separa por su fondo + border-bottom → se quita la sombra. */
.qv-pop .orders-table-fixed thead th{ box-shadow:none; }

/* Mismo caso que .qv-pop, pero para los modales de CUALQUIER página: la tabla
   DEBE caber sin scroll horizontal. `table-layout:fixed` y el padding compacto
   solo se aplican bajo body.page-orders; en el resto (ej. el desglose por año
   del Inicio, que es .page-dashboard) la tabla heredaba layout `auto`, dimensionaba
   por contenido y se desbordaba: barra horizontal y columnas cortadas.
   El ancho lo reparten los <th> del thead (width inline del render).
   NO se toca el wrap (overflow/border-radius): con la tabla ya cabiendo no aparece
   barra, y hacerlo le borraría las esquinas redondeadas a los demás modales.
   En body.page-orders esto es no-op: allí las reglas de página van con !important. */
.modal .orders-table-fixed{ table-layout:fixed; width:100%; }
.modal .orders-table-fixed th,
.modal .orders-table-fixed td{ padding:6px 8px; font-size:12px; line-height:1.3; }
.modal .orders-table-fixed thead th{ box-shadow:none; }

/* — Campanita de notificaciones (badge + desplegable) — */
.notif-bell{ position:relative; display:inline-grid; place-items:center; width:34px; height:34px; font-size:19px; }
.notif-badge{ position:absolute; top:-2px; right:-2px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:#ff3b5c; color:#fff; font:800 10px/17px system-ui,sans-serif; text-align:center; box-shadow:0 0 0 2px rgba(7,12,24,.92); pointer-events:none; }
.notif-badge[hidden]{ display:none; }
.notif-dropdown{ position:fixed; z-index:var(--z-dropdown); width:min(340px,92vw); max-height:70vh; overflow:auto; background:linear-gradient(160deg, rgba(13,53,77,.99), rgba(7,22,38,.99)); border:1px solid rgba(140,210,255,.3); border-radius:14px; box-shadow:0 18px 44px rgba(0,0,0,.5); padding:8px;
  /* Entrada origin-aware (Emil): el popover escala DESDE su esquina (cerca de la
     campanita, arriba-derecha), no del centro ni de golpe. Enter+exit con opacity. */
  opacity:0; transform:scale(.9) translateY(-8px); transform-origin:top right; pointer-events:none;
  transition:opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
.notif-dropdown.is-open{ opacity:1; transform:scale(1) translateY(0); pointer-events:auto; }
.notif-head{ font-size:12px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:#9fb6cf; padding:6px 10px 8px; }
.notif-item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 10px; border-radius:10px; border:none; background:transparent; color:#e9f1fb; font-size:13px; font-weight:600; text-decoration:none; cursor:pointer; transition:background .12s ease; }
.notif-item:hover{ background:rgba(125,211,252,.10); }
.notif-ic{ flex:0 0 auto; width:32px; height:32px; display:grid; place-items:center; font-size:23px; line-height:1; background:none; }
.notif-txt{ flex:1; min-width:0; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* Notificación NUEVA (la que suma al badge): resaltada + punto rojo a la derecha,
   para que el usuario sepa a cuál prestar atención al abrir la campanita. */
.notif-item--new{ background:rgba(255,90,118,.08); }
.notif-dot{ width:8px; height:8px; border-radius:50%; background:#ff5a76; flex:none; align-self:center; box-shadow:0 0 0 3px rgba(255,90,118,.18); }
.notif-empty{ padding:22px 12px; text-align:center; color:#9fb6cf; font-size:13px; }


/* — Topbar right pills uniformes (override styles_extra) — */
.topbar .right .pill {
  background: linear-gradient(145deg, rgba(13, 53, 77, .78), rgba(11, 35, 58, .72));
  border: 1px solid rgba(140, 210, 255, .28);
  color: var(--text);
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .3px;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}
/* Los pills del topbar (Total, O/C, O/S, Informes…) son SOLO informativos: no
   deben reaccionar al hover ni parecer clickeables. Hover = igual que el estado
   normal. (Los elementos realmente interactivos —chip de usuario, botones— sí
   conservan su hover propio.) */
.topbar .right .pill:hover {
  border-color: rgba(140, 210, 255, .28);
  filter: none;
}

/* Chip de usuario en topbar: sin marcos */
.topbar .right .topbar-user {
  background: transparent !important;
  border: none !important;
  box-shadow: none;
  transition: filter 160ms ease;
}
.topbar .right .topbar-user:hover {
  border: none !important;
  filter: brightness(1.06);
}
/* Botones del topbar derecho ("+ Nuevo documento", "Salir", etc.) compactos
   para que estén acordes a las pills (font 11.5px) y no se vean enormes. */
.topbar .right .btn,
.topbar .right .topbar-user #logoutBtnTop {
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  min-height: 26px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
}
/* Min-width del .right desactivado: en órdenes ya hay 4 pills + chip user. */
.page-orders .topbar .right { min-width: 0; flex-wrap: wrap; row-gap: 4px; }

/* El override GLOBAL de .btn-icon que vivía aquí (copiado del difunto
   styles_extra.css) se eliminó: pisaba la definición canónica en TODOS los
   modales. En su lugar, el botón ✕ de la CABECERA de modal va PLANO y limpio
   —sin caja, borde ni sombra (la sombra se veía como una "caja" bajo el ✕)—
   con un hover sutil. Scopeado a la cabecera para NO tocar los icon-btn del
   topbar, que sí llevan su recuadro 44×44. */
.modal-head .btn-icon,
.qv-actions .btn-icon {
  width: 34px; height: 34px;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 10px;
  color: var(--muted, #9fb1d1);
}
.modal-head .btn-icon:hover,
.qv-actions .btn-icon:hover {
  background: rgba(255,255,255,.08);
  border: none;
  transform: none;
  color: var(--text, #e9f1fb);
}
/* El ✕ de cerrar NO necesita tooltip "Cerrar" (es universal): su burbuja
   (`[data-tooltip]::after`) aparecía DEBAJO al pasar el mouse, tapando la tabla
   y viéndose como una "caja" azulada remarcada. Se suprime en la cabecera. */
.modal-head .btn-icon::after,
.modal-head .btn-icon::before,
.qv-actions .btn-icon::after,
.qv-actions .btn-icon::before { content: none !important; }


/* ═════════════════════════════════════════════════════════════════════════
   15. TOOLTIP CUSTOM
   ═════════════════════════════════════════════════════════════════════════ */
[data-tooltip] {
  position: relative;
  overflow: visible !important; /* anula overflow:hidden de .pill/.btn */
}
[data-tooltip]::after,
[data-tooltip]::before {
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 1000;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  white-space: pre-line;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  color: #f3faff;
  padding: 9px 14px;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(13, 53, 77, .98), rgba(7, 22, 38, .98));
  border: 1px solid rgba(140, 210, 255, .35);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
  min-width: max-content;
  max-width: 280px;
  backdrop-filter: blur(6px);
}
[data-tooltip]::before {
  content: "";
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  border: 6px solid transparent;
  border-bottom-color: rgba(13, 53, 77, .98);
  filter: drop-shadow(0 -1px 0 rgba(140, 210, 255, .35));
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Mientras un control con popup abierto (campanita, etc.) tiene .tip-off, su tooltip
   no debe mostrarse (si no, queda asomando junto al desplegable). */
[data-tooltip].tip-off::after,
[data-tooltip].tip-off::before { opacity: 0 !important; visibility: hidden !important; }

/* Dentro de tablas, el tooltip lo dibuja layout.js con position:fixed (escapa el
   overflow de la tabla, que si no lo RECORTA en los bordes — 1ª/última columna, ojito).
   Ocultamos el ::after/::before CSS ahí para que no aparezca cortado ni doble. */
.tablewrap [data-tooltip]::after,
.tablewrap [data-tooltip]::before,
.orders-tablewrap [data-tooltip]::after,
.orders-tablewrap [data-tooltip]::before { content: none !important; display: none !important; }

/* Tooltip por JS para celdas RECORTADAS (concepto, proveedor…): esas usan
   overflow:hidden para el "…" y el ::after CSS se recortaría. Este va pegado al
   <body> con position:fixed, con ANCHO LIMITADO y wrap → el texto largo se lee en
   varias líneas, con el mismo estilo del tema. Lo posiciona layout.js. */
.js-cell-tip {
  position: fixed;
  z-index: var(--z-tooltip);
  pointer-events: none;
  max-width: 380px;
  white-space: pre-line;   /* respeta los saltos de línea reales (ej. varios cargos), sin afectar texto normal */
  overflow-wrap: anywhere;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: #f3faff;
  background: linear-gradient(160deg, rgba(13, 53, 77, .98), rgba(7, 22, 38, .98));
  border: 1px solid rgba(140, 210, 255, .35);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 140ms ease;
}
.js-cell-tip.show { opacity: 1; }

/* El ⚙ de filtros (#filtersToggle) vive DENTRO del panel de filtros, que tiene
   overflow recortado, y está pegado al borde derecho: su tooltip centrado se
   cortaba por la mitad ("no se deja ver bien"). Lo anclamos a la derecha para
   que se despliegue hacia la IZQUIERDA, dentro del panel, y quede completo.
   Aplica a todas las páginas con panel de filtros. */
/* El ⚙ (z-index auto) no creaba contexto propio, así que los inputs del panel
   pintaban ENCIMA de su tooltip ("se ve atrás de EXP SIAF"). Le damos su propio
   z-index alto para que el botón —y su tooltip— queden por encima de los campos.
   El panel es sticky (contexto de apilamiento), así que esto NO escapa hacia la
   tabla ni la barra superior. */
#filtersToggle {
  position: relative;
  z-index: 1001;
}
#filtersToggle[data-tooltip]::after {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(-4px);
}
#filtersToggle[data-tooltip]::before {
  left: auto;
  right: 9px;
  transform: translateX(0) translateY(-4px);
}
#filtersToggle[data-tooltip]:hover::after,
#filtersToggle[data-tooltip]:focus-visible::after,
#filtersToggle[data-tooltip]:hover::before,
#filtersToggle[data-tooltip]:focus-visible::before {
  transform: translateX(0) translateY(0);
}

/* El botón "actualizar lista" (#refreshList) está pegado a la tabla: su tooltip
   por defecto saldría ABAJO y quedaría tapado por la tabla. Lo mostramos ARRIBA,
   igual que el user-chip. */
#refreshList[data-tooltip]::after{
  top:auto;
  bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(4px);
}
#refreshList[data-tooltip]::before{
  top:auto;
  bottom:calc(100% + 4px);
  border-bottom-color:transparent;
  border-top-color:rgba(13,53,77,.98);
  filter:drop-shadow(0 1px 0 rgba(140,210,255,.35));
}
#refreshList[data-tooltip]:hover::after,
#refreshList[data-tooltip]:focus-visible::after,
#refreshList[data-tooltip]:hover::before,
#refreshList[data-tooltip]:focus-visible::before{
  transform:translateX(-50%) translateY(0);
}
/* El "⟳ Actualizar" del cuerpo del informe (#gen_o_cuerpo_refresh): sin contexto
   propio, el textarea/secciones de abajo pintaban ENCIMA de su tooltip ("sale por
   detrás del texto"). Le damos z-index propio y lo mostramos ARRIBA. */
#gen_o_cuerpo_refresh { position: relative; z-index: 1001; }
#gen_o_cuerpo_refresh[data-tooltip]::after{
  top:auto;
  bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(4px);
}
#gen_o_cuerpo_refresh[data-tooltip]::before{
  top:auto;
  bottom:calc(100% + 4px);
  border-bottom-color:transparent;
  border-top-color:rgba(13,53,77,.98);
  filter:drop-shadow(0 1px 0 rgba(140,210,255,.35));
}
#gen_o_cuerpo_refresh[data-tooltip]:hover::after,
#gen_o_cuerpo_refresh[data-tooltip]:focus-visible::after,
#gen_o_cuerpo_refresh[data-tooltip]:hover::before,
#gen_o_cuerpo_refresh[data-tooltip]:focus-visible::before{
  transform:translateX(-50%) translateY(0);
}
/* Giro del botón "actualizar lista" al refrescar. Solo gira el ÍCONO (span
   interno), no el botón completo — así el tooltip (::after) no rota con él. */
@keyframes refreshSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Unificado para TODOS los botones de "actualizar" del sistema. Antes la
   animación solo aplicaba a #refreshList y #refreshReport hardcodeados →
   cuando se agregaba un nuevo botón (#refreshSaldos, #refreshInbox, etc)
   no giraba. Ahora con el selector [id^="refresh"] cualquier botón nuevo
   funciona sin tocar CSS. */
[id^="refresh"] .refresh-icon { display:inline-block; }
[id^="refresh"].spinning .refresh-icon { animation: refreshSpin .6s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
  [id^="refresh"].spinning .refresh-icon { animation: none; }
}
#refreshReport[data-tooltip]::after{ top:auto; bottom:calc(100% + 10px); transform:translateX(-50%) translateY(4px); }
#refreshReport[data-tooltip]::before{ top:auto; bottom:calc(100% + 4px); border-bottom-color:transparent; border-top-color:rgba(13,53,77,.98); filter:drop-shadow(0 1px 0 rgba(140,210,255,.35)); }
#refreshReport[data-tooltip]:hover::after,
#refreshReport[data-tooltip]:focus-visible::after,
#refreshReport[data-tooltip]:hover::before,
#refreshReport[data-tooltip]:focus-visible::before{ transform:translateX(-50%) translateY(0); }

/* Pestañas Listado / Reporte dentro de Órdenes. */
.view-tabs { display:flex; gap:6px; align-items:center; }

/* Modo Reporte: MISMO layout que Listado (filtros a la izquierda + tarjeta con la
   tabla en su recuadro). Solo ocultamos la paginación, que no aplica a un resumen
   (el reporte no se pagina; los totales viven en su fila TOTAL GENERAL). */
body.orders-report-mode #pagerTop { display:none !important; }

/* — Tooltip nativo: cursor help — */
[title] {
  cursor: help;
}


/* ═════════════════════════════════════════════════════════════════════════
   16. FX DE FONDO
   ═════════════════════════════════════════════════════════════════════════ */
/* Body — Aurora corporativa (override del background base) */
body {
  background:
    /* Aurora 1 — azul cobalto */
    radial-gradient(1200px 700px at 18% 10%, rgba(31,111,235,.28), transparent 60%),
    /* Aurora 2 — azul cielo */
    radial-gradient(1000px 620px at 82% 18%, rgba(58,160,255,.22), transparent 62%),
    /* Aurora 3 — azul electrico tenue inferior */
    radial-gradient(1100px 700px at 50% 110%, rgba(80,150,255,.18), transparent 65%),
    /* base */
    linear-gradient(180deg, #06101f 0%, #050b18 52%, #040815 100%) !important;
  background-attachment: fixed !important;
  position: relative;
}

/* Capas decorativas legacy DESACTIVADAS. Antes había una banda diagonal de
   luz (body::before) y un blob radial inferior-derecho (body::after) que
   creaban un "doble azul" muy visible. Las burbujas + el body.background
   ya proveen el ambiente; estas capas extra solo ensuciaban el resultado. */
body::before { content: none !important; }
body::after  { content: none !important; }

/* — Indicador de carga superior (body.is-loading) — */
@keyframes topbar-progress {
  0%   { width: 0%; opacity: 1 }
  80%  { width: 90%; opacity: 1 }
  100% { width: 100%; opacity: 0 }
}
body.is-loading::before {
  animation: topbar-progress 1.2s ease-out forwards;
}

/* — Aurora keyframes — */
@keyframes auroraSweepA {
  0%   { transform: translate3d(-6vw, -2vh, 0) rotate(0deg);   opacity: .75; }
  50%  { transform: translate3d( 4vw,  2vh, 0) rotate(2deg);   opacity: .95; }
  100% { transform: translate3d( 8vw,  4vh, 0) rotate(-1deg);  opacity: .80; }
}
@keyframes auroraBreatheB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);    opacity: .80; }
  50%      { transform: translate3d(-3vw, -2vh, 0) scale(1.06); opacity: .95; }
}

/* — Keyframes legacy (orb, pulse, rowFade) — */
@keyframes orbFloatA{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4vw, 3vh, 0) scale(1.08)}
}
@keyframes orbFloatB{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-4vw,-3vh,0) scale(1.06)}
}
@keyframes pulseLine{
  0%,100%{opacity:.42}
  50%{opacity:.82}
}
@keyframes rowFade{
  from{opacity:0; transform:translateY(5px)}
  to{opacity:1; transform:translateY(0)}
}

/* ════════════════════════════════════════════════════════════════════════════
   Fondo dinámico — Aurora líquida (estilo Vercel/Linear/Stripe).
   Diseño:
     • Glow ambiental sutil (capa 1) que respira muy lento.
     • 5 orbes grandes (capa 2) con blur intenso que se mueven en
       trayectorias orgánicas independientes. Usan mix-blend-mode: screen
       para mezclarse entre sí creando degradados que cambian con el tiempo.
     • Capa de "grain" sutil (capa 3) que rompe el banding del blur y le
       da textura premium estilo display OLED.
     • Compatible con prefers-reduced-motion.
     • En móvil reducimos a 3 orbes y bajamos el blur para no quemar batería.
   Peso: ~0 KB de assets, todo el render es transform/opacity en GPU.
   ════════════════════════════════════════════════════════════════════════════ */
.bg-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  contain: strict;
  /* SIN background propio: el body ya provee el fondo. Esta capa solo aloja
     burbujas y el grain, evitando "doble fondo" sobre el del body. */
}

/* .bg-fx__glow eliminado: la elipse animada (translate 2vw / -2vh) creaba
   una zona de luz que se movía vertical y horizontalmente, perceptible como
   un "rectángulo" sobre el fondo dark. Si en el futuro se quisiera reactivar,
   conviene NO usar mix-blend: screen + transform sobre una zona grande. */

/* Contenedor de burbujas. Burbujas pequeñas, suaves, ascendentes — el fondo
   apenas las nota, NO compiten con el contenido. */
.bg-fx__aurora {
  position: absolute;
  inset: 0;
  display: block;
}

/* Burbuja base — look REALISTA con radial-gradient:
   · Highlight blanco arriba a la izquierda (la fuente de luz).
   · Centro transparente (se ve a través, como burbuja real).
   · Borde apenas insinuado, difuminado (no es un anillo dibujado).
   · Sin filtros pesados. Solo transform + opacity se animan → GPU. */
.bg-fx__aurora span {
  position: absolute;
  left: var(--start-x, 50%);
  top: 100%;
  width: var(--s, 14px);
  height: var(--s, 14px);
  border-radius: 50%;
  background:
    /* Highlight superior izquierdo (la mancha de luz típica de una burbuja). */
    radial-gradient(circle at 28% 26%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 22%),
    /* Cuerpo: muy sutil cyan que se desvanece al centro y al borde. */
    radial-gradient(circle at 50% 50%, rgba(180, 215, 255, 0) 30%, rgba(160, 200, 240, .22) 78%, rgba(140, 190, 240, 0) 100%);
  /* No usamos mask: el degradado YA hace el "look burbuja" sin anillos duros. */
  animation: bgBubbleRise var(--dur, 18s) linear var(--delay, 0s) infinite;
  opacity: 0;
  /* will-change SOLO en lo que se anima (no en background): permite que el
     navegador promueva la capa al GPU sin desperdiciar memoria. */
  will-change: transform, opacity;
}

/* Ascenso continuo: la burbuja nace en el borde inferior y sube hasta salir
   por arriba. translateX con sin/cos da un zigzag MUY leve (~2-3vw) para que
   no suba en línea recta — eso es lo que las hace ver naturales.
   Fade in en los primeros %, fade out al final. */
@keyframes bgBubbleRise {
  0%   { transform: translate3d(0, 0vh, 0)    scale(.85); opacity: 0; }
  12%  { opacity: var(--op, .35); }
  30%  { transform: translate3d(var(--dx1,  1.5vw), -28vh, 0) scale(1); }
  55%  { transform: translate3d(var(--dx2, -1.2vw), -55vh, 0) scale(1.02); }
  80%  { transform: translate3d(var(--dx3,  1vw),   -80vh, 0) scale(1); opacity: var(--op, .35); }
  100% { transform: translate3d(var(--dx4, -.8vw), -110vh, 0) scale(.92); opacity: 0; }
}

/* 50 burbujas pequeñas. Columnas distintas (--start-x), tamaños MUY variados
   (mayoría de 4-14px, algunas medianas hasta 28px), velocidades distintas,
   delays negativos para que al cargar la página ya haya burbujas a mitad
   de subida (sin "vacío inicial"). Mantener BUBBLE_COUNT en bg-fx.js
   sincronizado con la cantidad de reglas aquí. */
.bg-fx__aurora span:nth-child(1)  { --start-x:  4%;  --s:  6px; --op:.45; --dur:16s; --delay:  -1s; --dx1:  .8vw; --dx2: -.6vw; --dx3:  .5vw; --dx4: -.4vw; }
.bg-fx__aurora span:nth-child(2)  { --start-x: 11%;  --s: 12px; --op:.32; --dur:22s; --delay:  -6s; --dx1: -1.2vw; --dx2: 1vw;  --dx3: -.7vw; --dx4:  .9vw; }
.bg-fx__aurora span:nth-child(3)  { --start-x: 17%;  --s:  4px; --op:.55; --dur:13s; --delay: -10s; --dx1:  .5vw; --dx2: -.4vw; --dx3:  .3vw; --dx4: -.2vw; }
.bg-fx__aurora span:nth-child(4)  { --start-x: 23%;  --s: 20px; --op:.25; --dur:28s; --delay:  -3s; --dx1: -2vw;  --dx2: 1.5vw; --dx3: -1.2vw; --dx4: 1.8vw; }
.bg-fx__aurora span:nth-child(5)  { --start-x: 29%;  --s:  8px; --op:.40; --dur:18s; --delay: -14s; --dx1:  1vw;  --dx2: -.8vw; --dx3:  .6vw; --dx4: -.5vw; }
.bg-fx__aurora span:nth-child(6)  { --start-x: 35%;  --s: 28px; --op:.20; --dur:32s; --delay:  -8s; --dx1: -1.8vw; --dx2: 2vw;  --dx3: -1.5vw; --dx4: 1vw; }
.bg-fx__aurora span:nth-child(7)  { --start-x: 41%;  --s:  5px; --op:.50; --dur:14s; --delay: -12s; --dx1:  .4vw; --dx2: -.3vw; --dx3:  .5vw; --dx4: -.3vw; }
.bg-fx__aurora span:nth-child(8)  { --start-x: 47%;  --s: 14px; --op:.30; --dur:24s; --delay:  -4s; --dx1: -1.5vw; --dx2: 1.2vw; --dx3: -.9vw; --dx4: 1.1vw; }
.bg-fx__aurora span:nth-child(9)  { --start-x: 53%;  --s:  7px; --op:.42; --dur:17s; --delay: -16s; --dx1:  .9vw; --dx2: -.7vw; --dx3:  .8vw; --dx4: -.6vw; }
.bg-fx__aurora span:nth-child(10) { --start-x: 59%;  --s: 10px; --op:.36; --dur:20s; --delay:  -2s; --dx1: -1vw;  --dx2:  .8vw; --dx3: -.7vw; --dx4: 1vw; }
.bg-fx__aurora span:nth-child(11) { --start-x: 65%;  --s: 22px; --op:.22; --dur:30s; --delay: -11s; --dx1:  1.8vw; --dx2: -2vw; --dx3: 1.4vw; --dx4: -1.6vw; }
.bg-fx__aurora span:nth-child(12) { --start-x: 71%;  --s:  6px; --op:.48; --dur:15s; --delay:  -7s; --dx1: -.6vw; --dx2:  .5vw; --dx3: -.4vw; --dx4:  .3vw; }
.bg-fx__aurora span:nth-child(13) { --start-x: 77%;  --s: 16px; --op:.28; --dur:26s; --delay: -18s; --dx1:  1.3vw; --dx2: -1vw; --dx3:  .8vw; --dx4: -1.2vw; }
.bg-fx__aurora span:nth-child(14) { --start-x: 83%;  --s:  9px; --op:.38; --dur:19s; --delay:  -5s; --dx1: -.7vw; --dx2:  .9vw; --dx3: -.5vw; --dx4:  .8vw; }
.bg-fx__aurora span:nth-child(15) { --start-x: 89%;  --s: 12px; --op:.30; --dur:23s; --delay: -13s; --dx1:  1vw;  --dx2: -1.1vw; --dx3:  .9vw; --dx4: -.7vw; }
.bg-fx__aurora span:nth-child(16) { --start-x: 95%;  --s:  5px; --op:.52; --dur:14s; --delay:  -9s; --dx1: -.4vw; --dx2:  .3vw; --dx3: -.2vw; --dx4:  .3vw; }
.bg-fx__aurora span:nth-child(17) { --start-x:  8%;  --s: 18px; --op:.24; --dur:27s; --delay: -15s; --dx1:  1.5vw; --dx2: -1.3vw; --dx3: 1vw;  --dx4: -1.4vw; }
.bg-fx__aurora span:nth-child(18) { --start-x: 38%;  --s:  4px; --op:.55; --dur:12s; --delay:  -3s; --dx1: -.3vw; --dx2:  .4vw; --dx3: -.2vw; --dx4:  .3vw; }
.bg-fx__aurora span:nth-child(19) { --start-x: 56%;  --s: 24px; --op:.18; --dur:34s; --delay: -19s; --dx1: -1.7vw; --dx2: 1.9vw; --dx3: -1.4vw; --dx4: 1.5vw; }
.bg-fx__aurora span:nth-child(20) { --start-x: 86%;  --s:  6px; --op:.44; --dur:16s; --delay: -10s; --dx1:  .5vw; --dx2: -.6vw; --dx3:  .4vw; --dx4: -.3vw; }
.bg-fx__aurora span:nth-child(21) { --start-x:  2%;  --s: 14px; --op:.30; --dur:25s; --delay: -17s; --dx1: -1.1vw; --dx2: 1.3vw; --dx3: -.9vw; --dx4: 1vw; }
.bg-fx__aurora span:nth-child(22) { --start-x: 14%;  --s:  8px; --op:.46; --dur:18s; --delay:  -4s; --dx1:  .7vw; --dx2: -.9vw; --dx3:  .6vw; --dx4: -.5vw; }
.bg-fx__aurora span:nth-child(23) { --start-x: 20%;  --s: 11px; --op:.34; --dur:21s; --delay: -11s; --dx1: -1vw;  --dx2:  .8vw; --dx3: -.6vw; --dx4:  .7vw; }
.bg-fx__aurora span:nth-child(24) { --start-x: 26%;  --s:  5px; --op:.50; --dur:15s; --delay:  -7s; --dx1:  .4vw; --dx2: -.3vw; --dx3:  .5vw; --dx4: -.4vw; }
.bg-fx__aurora span:nth-child(25) { --start-x: 32%;  --s: 17px; --op:.26; --dur:29s; --delay:  -2s; --dx1: -1.4vw; --dx2: 1.6vw; --dx3: -1.1vw; --dx4: 1.3vw; }
.bg-fx__aurora span:nth-child(26) { --start-x: 44%;  --s: 10px; --op:.36; --dur:20s; --delay: -14s; --dx1:  1.1vw; --dx2: -.9vw; --dx3:  .7vw; --dx4: -.8vw; }
.bg-fx__aurora span:nth-child(27) { --start-x: 50%;  --s: 26px; --op:.18; --dur:33s; --delay:  -6s; --dx1: -1.9vw; --dx2: 2.1vw; --dx3: -1.6vw; --dx4: 1.7vw; }
.bg-fx__aurora span:nth-child(28) { --start-x: 62%;  --s:  7px; --op:.42; --dur:17s; --delay: -12s; --dx1:  .8vw; --dx2: -.6vw; --dx3:  .5vw; --dx4: -.4vw; }
.bg-fx__aurora span:nth-child(29) { --start-x: 68%;  --s: 13px; --op:.32; --dur:24s; --delay:  -8s; --dx1: -1.2vw; --dx2: 1vw;  --dx3: -.8vw; --dx4:  .9vw; }
.bg-fx__aurora span:nth-child(30) { --start-x: 74%;  --s:  4px; --op:.55; --dur:11s; --delay: -16s; --dx1:  .3vw; --dx2: -.4vw; --dx3:  .3vw; --dx4: -.2vw; }
.bg-fx__aurora span:nth-child(31) { --start-x: 80%;  --s: 19px; --op:.24; --dur:28s; --delay:  -1s; --dx1: -1.5vw; --dx2: 1.7vw; --dx3: -1.2vw; --dx4: 1.4vw; }
.bg-fx__aurora span:nth-child(32) { --start-x: 92%;  --s:  8px; --op:.40; --dur:19s; --delay: -13s; --dx1:  .9vw; --dx2: -.7vw; --dx3:  .6vw; --dx4: -.5vw; }
.bg-fx__aurora span:nth-child(33) { --start-x:  6%;  --s: 15px; --op:.28; --dur:25s; --delay: -10s; --dx1: -1.3vw; --dx2: 1.1vw; --dx3: -.9vw; --dx4: 1vw; }
.bg-fx__aurora span:nth-child(34) { --start-x: 18%;  --s:  6px; --op:.48; --dur:14s; --delay:  -5s; --dx1:  .5vw; --dx2: -.4vw; --dx3:  .4vw; --dx4: -.3vw; }
.bg-fx__aurora span:nth-child(35) { --start-x: 30%;  --s: 21px; --op:.20; --dur:31s; --delay: -18s; --dx1: -1.8vw; --dx2: 2vw;  --dx3: -1.5vw; --dx4: 1.6vw; }
.bg-fx__aurora span:nth-child(36) { --start-x: 42%;  --s:  9px; --op:.38; --dur:18s; --delay:  -3s; --dx1:  1vw;  --dx2: -.8vw; --dx3:  .7vw; --dx4: -.6vw; }
.bg-fx__aurora span:nth-child(37) { --start-x: 54%;  --s: 12px; --op:.32; --dur:22s; --delay: -15s; --dx1: -1.1vw; --dx2:  .9vw; --dx3: -.7vw; --dx4:  .8vw; }
.bg-fx__aurora span:nth-child(38) { --start-x: 66%;  --s:  5px; --op:.52; --dur:13s; --delay:  -9s; --dx1:  .4vw; --dx2: -.3vw; --dx3:  .3vw; --dx4: -.2vw; }
.bg-fx__aurora span:nth-child(39) { --start-x: 78%;  --s: 16px; --op:.26; --dur:26s; --delay: -19s; --dx1: -1.4vw; --dx2: 1.2vw; --dx3: -1vw;  --dx4: 1.1vw; }
.bg-fx__aurora span:nth-child(40) { --start-x: 90%;  --s:  7px; --op:.44; --dur:17s; --delay:  -7s; --dx1:  .7vw; --dx2: -.6vw; --dx3:  .5vw; --dx4: -.4vw; }
.bg-fx__aurora span:nth-child(41) { --start-x:  9%;  --s: 11px; --op:.34; --dur:21s; --delay: -12s; --dx1: -.9vw; --dx2: 1vw;  --dx3: -.7vw; --dx4:  .8vw; }
.bg-fx__aurora span:nth-child(42) { --start-x: 21%;  --s: 23px; --op:.20; --dur:30s; --delay:  -4s; --dx1:  1.7vw; --dx2: -1.9vw; --dx3: 1.4vw; --dx4: -1.5vw; }
.bg-fx__aurora span:nth-child(43) { --start-x: 33%;  --s:  4px; --op:.55; --dur:12s; --delay: -16s; --dx1: -.3vw; --dx2:  .4vw; --dx3: -.2vw; --dx4:  .3vw; }
.bg-fx__aurora span:nth-child(44) { --start-x: 45%;  --s: 13px; --op:.30; --dur:23s; --delay:  -8s; --dx1:  1.2vw; --dx2: -1vw; --dx3:  .8vw; --dx4: -.9vw; }
.bg-fx__aurora span:nth-child(45) { --start-x: 57%;  --s:  8px; --op:.40; --dur:18s; --delay: -11s; --dx1: -.8vw; --dx2:  .9vw; --dx3: -.6vw; --dx4:  .7vw; }
.bg-fx__aurora span:nth-child(46) { --start-x: 69%;  --s: 27px; --op:.18; --dur:34s; --delay:  -2s; --dx1: -2vw;  --dx2: 2.2vw; --dx3: -1.7vw; --dx4: 1.8vw; }
.bg-fx__aurora span:nth-child(47) { --start-x: 81%;  --s:  6px; --op:.46; --dur:15s; --delay: -14s; --dx1:  .6vw; --dx2: -.5vw; --dx3:  .4vw; --dx4: -.3vw; }
.bg-fx__aurora span:nth-child(48) { --start-x: 93%;  --s: 14px; --op:.28; --dur:24s; --delay:  -6s; --dx1: -1.2vw; --dx2: 1.1vw; --dx3: -.9vw; --dx4: 1vw; }
.bg-fx__aurora span:nth-child(49) { --start-x: 12%;  --s: 10px; --op:.36; --dur:20s; --delay: -17s; --dx1:  .9vw; --dx2: -.8vw; --dx3:  .7vw; --dx4: -.6vw; }
.bg-fx__aurora span:nth-child(50) { --start-x: 48%;  --s:  5px; --op:.50; --dur:13s; --delay:  -3s; --dx1: -.4vw; --dx2:  .5vw; --dx3: -.3vw; --dx4:  .4vw; }

/* Grain sutil — rompe el banding del blur y agrega textura premium.
   Usamos un SVG inline como data URI (no requiere request HTTP). */
.bg-fx__grain {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  /* Animación bgGrainShift quitada: el desplazamiento del ruido en 6 pasos
     cada 6s sumaba al efecto "respiración" del fondo. Grain estático es
     invisible al ojo, que era el objetivo original. */
}

/* Móvil: ocultamos las burbujas pares (queda la mitad, ~10) para batería/GPU. */
@media (max-width: 768px) {
  .bg-fx__aurora span:nth-child(2n) {
    display: none;
  }
  .bg-fx__grain { opacity: .02; }
}

/* ═════════════════════════════════════════════════════════════════════════
   CURSOR CUSTOM — flecha y mano con estilo del proyecto.
   ─────────────────────────────────────────────────────────────────────────
   100% CSS, cero JS, cero overhead de runtime. SVG inline en data-URI →
   no hay request HTTP. Hotspot definido tras la URL (X Y).

   · Default (flecha): puntiaguda blanca con outline cian + sombra sutil.
     Hotspot (2, 2) — la punta de la flecha.
   · Pointer (hover en clickables): círculo cian translúcido con punto blanco
     al centro. Hotspot (13, 13) — el centro del círculo.
   · Text (inputs/textarea): caret nativo del OS (mejor accesibilidad).
   · Disabled: not-allowed nativo (consistente con expectativa).

   Touch devices ignoran `cursor: url()` automáticamente — el cursor no
   existe en pantallas táctiles. Sin guards extra.
   ═════════════════════════════════════════════════════════════════════════ */
:root {
  --cursor-default: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><filter id='s' x='-50%25' y='-50%25' width='200%25' height='200%25'><feDropShadow dx='0' dy='1' stdDeviation='1' flood-color='%23000' flood-opacity='.45'/></filter><path filter='url(%23s)' d='M2 2 L2 16 L6.5 12.5 L9.5 19 L11.7 18 L8.7 11.5 L14 11.5 Z' fill='%23ffffff' stroke='%237dd3fc' stroke-width='1.2' stroke-linejoin='round'/></svg>") 2 2;

  --cursor-pointer: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'><filter id='s' x='-50%25' y='-50%25' width='200%25' height='200%25'><feDropShadow dx='0' dy='1' stdDeviation='1' flood-color='%23000' flood-opacity='.45'/></filter><path filter='url(%23s)' d='M12 3a1.5 1.5 0 0 0-1.5 1.5V12H8a2 2 0 0 0-1.93 2.51l1.5 5.6A4 4 0 0 0 11.43 23h3.07A6.5 6.5 0 0 0 21 16.5V12a1.5 1.5 0 0 0-3 0v-1a1.5 1.5 0 0 0-3 0v-1a1.5 1.5 0 0 0-3 0V4.5A1.5 1.5 0 0 0 12 3z' fill='%23ffffff' stroke='%237dd3fc' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'/></svg>") 12 3;
}

html, body {
  cursor: var(--cursor-default), default;
}

/* Pointer custom: mano blanca con outline cian + sombra, mismo estilo que
   la flecha default. El `pointer` al final es fallback si el SVG falla. */
a,
button,
summary,
label[for],
select,
[role="button"],
input[type="checkbox"],
input[type="radio"],
input[type="submit"],
input[type="button"],
input[type="file"],
.clickable,
.row-clickable,
a.pill,
.btn,
.btn-icon,
.pager-btn,
.nav a,
.admin-link-card,
.admin-subnav a,
.audit-chip,
.audit-day-header,
.col-item .mini,
.password-toggle,
[data-sidebar-toggle],
[data-filters-toggle],
[data-cancel],
[data-idx],
[onclick],
tr.clickable{
  cursor: var(--cursor-pointer), pointer;
}

/* Inputs de texto: dejamos el caret nativo del OS (text cursor `I-beam`). */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
[contenteditable="true"]{
  cursor: text;
}

/* Estados deshabilitados: no-allowed nativo para no engañar al usuario. */
[disabled],
.is-disabled,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled{
  cursor: not-allowed;
}

/* Accesibilidad: si el SO pide menos movimiento, congelamos todo. */
@media (prefers-reduced-motion: reduce) {
  .bg-fx__aurora span,
  .bg-fx__grain {
    animation: none;
  }
}


/* ═════════════════════════════════════════════════════════════════════════
   17. UTILIDADES Y ESTADOS
   ═════════════════════════════════════════════════════════════════════════ */

/* — Micro-animaciones globales — */
*, *::before, *::after {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: 160ms;
  transition-timing-function: var(--ease-out);
}
/* Excluir elementos que no deben animarse */
input, textarea, select, [data-no-transition] {
  transition: none;
}

/* — Touch targets — */
a, button, .btn, .nav a, .pill, .pager-btn, .btn-icon, [role="button"] {
  touch-action: manipulation;
}

/* — Loading / skeleton shimmer — */
@keyframes shimmer {
  0%   { background-position: -400px 0 }
  100% { background-position: 400px 0 }
}
.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.09) 50%,
    rgba(255,255,255,.04) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: 8px;
}

/* — Toast / notificaciones — */
@keyframes toast-in {
  from { transform: translateY(20px); opacity: 0 }
  to   { transform: translateY(0);    opacity: 1 }
}
.toast {
  animation: toast-in 240ms var(--ease-out) forwards;
}

/* — Números / montos: fuente monoespaciada — */
.amount, [class*="amount"], td.col-amount, td.col-total {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -.2px;
}

/* — Estado en órdenes (desktop muestra la inicial; móvil texto completo) — */
.status-cell .status-full { display: none; }
.status-cell .status-short { display: inline; }


/* ═════════════════════════════════════════════════════════════════════════
   18. RESPONSIVE
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .btn, nav { display: none !important }
  .main { margin: 0 !important; padding: 0 !important }
  body { background: white !important; color: black !important }
}

/* ── Hover device-detection (sin hover-lift en touch) ───────────────────── */
@media (hover: none) {
  .card:hover {
    transform: none !important;
    box-shadow: var(--shadow, 0 24px 70px rgba(0,0,0,.42)) !important;
    border-color: rgba(173,216,255,.10) !important;
  }
  .admin-link-card:hover,
  .nav a:hover,
  .btn:hover,
  .btn-icon:hover,
  .pager-btn:hover {
    transform: none !important;
    filter: none !important;
  }
  /* Active state táctil: respuesta visual inmediata */
  .btn:active,
  .btn-primary:active {
    transform: scale(.97) !important;
    filter: brightness(.9) !important;
  }
  .card:active {
    transform: scale(.995) !important;
  }
  .admin-link-card:active {
    transform: scale(.98) !important;
    opacity: .9;
  }
}

/* ── ≤ 1280px ───────────────────────────────────────────────────────────── */
@media (max-width:1280px){
  .controls{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .actions-inline{grid-column:span 3; justify-content:flex-start}
}

/* ── ≤ 1180px ───────────────────────────────────────────────────────────── */
@media (max-width: 1180px){
  .login-shell{
    grid-template-columns:1fr;
  }
  .login-panel{
    min-height:auto;
  }
}

/* ── ≤ 1080px ───────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .admin-import-shell{
    grid-template-columns:1fr;
  }
}

/* ── ≤ 1024px (iOS Safari background-attachment fix) ────────────────────── */
@media (max-width: 1024px) {
  body { background-attachment: scroll; }
}

/* ── ≤ 980px ────────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .modal .row{grid-template-columns:1fr}
  .modal .row.row-compact{ grid-template-columns: 1fr 1fr; }
  .modal .row.row-compact .span-2{ grid-column: 1 / -1; }
  .modal .row.row-compact .span-3{ grid-column: 1 / -1; }
  .topbar{flex-wrap:wrap}
  .topbar .right{min-width:unset; width:100%; justify-content:flex-start}
  .page-orders .orders-layout{
    grid-template-columns: 1fr;
  }
  .page-orders .filters-panel{
    position:relative;
    top:auto;
    max-height:none;
  }
  .filters-collapsed .page-orders .orders-layout{
    grid-template-columns: 1fr;
  }
  .filters-collapsed .page-orders .filters-panel{
    width:auto;
    padding:18px;
    border:1px solid rgba(173,216,255,.10);
    opacity:1;
    pointer-events:auto;
    display:none;
  }
  .import-unified { grid-template-columns: 1fr; }
}

/* ── ≤ 920px landscape (orientación horizontal en móvil) ────────────────── */
@media (max-width: 920px) and (orientation: landscape) and (max-height: 500px) {
  .modal { max-height: 96vh !important; border-radius: 18px !important; }
  .page-orders .filters-panel { max-height: 92vh !important; }
}

/* ── ≤ 900px ────────────────────────────────────────────────────────────── */
@media (max-width: 900px){
  .admin-import-actions{flex-direction:column}
  .import-progress-grid{grid-template-columns:1fr 1fr;}
}

/* ── ≤ 860px ────────────────────────────────────────────────────────────── */
@media (max-width: 860px){
  .auth-form__two,
  .admin-user-form,
  .user-admin-grid{
    grid-template-columns:1fr;
  }
  .admin-section-head{
    flex-direction:column;
    align-items:stretch;
  }
  .user-admin-actions{
    width:100%;
  }
  .user-admin-actions .btn{
    flex:1;
  }
  .modal-grid .row{ grid-template-columns:1fr; }
  .modal-more .more-grid{ grid-template-columns:1fr; }
  .permissions-grid{
    grid-template-columns:1fr;
  }
  .page-login .footer {
    position: relative;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    gap: 8px;
  }
}

/* ── ≤ 768px (DRAWER + MOBILE-FIRST PROFESIONAL) ────────────────────────── */
@media (max-width: 768px) {

  /* Tipografía fluida en títulos */
  h1 { font-size: clamp(20px, 5.4vw, 28px); }
  h2 { font-size: clamp(16px, 4.4vw, 20px); }
  h3 { font-size: clamp(14px, 4vw, 17px); }

  /* Inputs: tamaño 16px para evitar el zoom automático de iOS */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Grid principal: sin columna de sidebar */
  .app,
  html.sidebar-collapsed .app {
    grid-template-columns: 1fr !important;
  }

  /* Sidebar como drawer lateral */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    width: min(300px, 88vw) !important;
    z-index: 900 !important;
    border-right: 1px solid rgba(173,216,255,.16) !important;
    border-bottom: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Fondo 100% opaco y SIN backdrop-filter: en móvil un backdrop-filter
       pesado sobre un elemento animado con transform hace que el navegador
       rasterice la capa a baja calidad y el menú se vea borroso. El panel ya
       es prácticamente sólido y el #sidebar-overlay oscurece el fondo, así
       que el blur no aportaba nada visible — solo el defecto. */
    background: #04091a !important;
    transform: translateX(-100%) !important;
    transition: transform 280ms var(--ease-out) !important;
    padding: 20px 16px !important;
    box-shadow: none !important;
  }
  /* Drawer visible cuando NO está colapsado */
  html:not(.sidebar-collapsed) .sidebar {
    transform: translateX(0) !important;
    box-shadow: 6px 0 48px rgba(0,0,0,.7) !important;
  }
  /* El drawer siempre muestra labels completos */
  .sidebar .brand .text    { display: flex !important; }
  .sidebar .nav a span.label { display: inline !important; }
  .sidebar .nav a          { justify-content: flex-start !important; }
  .sidebar .nav a .badge   { width: 36px !important; height: 36px !important; border-radius: 13px !important; }

  /* Brand del sidebar en drawer móvil */
  .sidebar .brand .t2 { font-size: 11px; line-height: 1.3; }

  /* Overlay oscuro detrás del drawer */
  #sidebar-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 4, 16, 0.72) !important;
    z-index: 899 !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 280ms ease !important;
  }
  html:not(.sidebar-collapsed) #sidebar-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Área principal: ocupa todo el ancho */
  .main {
    margin-left: 0 !important;
    padding: 12px 14px 24px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Topbar */
  .topbar {
    /* En móvil el topbar NO es sticky: su fondo es transparente (para dejar
       ver el aurora de fondo) y, al quedarse fijo, el contenido pasaba por
       detrás al hacer scroll y se veía "encimado". Estático = se desplaza
       junto con la página y nada se solapa. */
    position: static !important;
    padding: 8px 0 8px !important;
    gap: 8px 10px !important;
    flex-wrap: wrap !important;
  }
  .topbar .left {
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .topbar .right {
    order: 3;
    min-width: unset !important;
    width: 100%;
    justify-content: flex-start !important;
    gap: 6px;
    flex-wrap: wrap;
  }
  .topbar-user__meta { min-width: 0; }
  .topbar-user { width: 100%; }

  /* ── Dashboard móvil: usuario + Salir arriba a la derecha; hora oculta ──
     La hora del servidor (#serverTime) no aporta en móvil y se cortaba; el
     bloque de usuario iba en una fila aparte a todo el ancho, muy abajo.
     Aquí va a la misma fila del ☰/título, alineado a la derecha. */
  .page-dashboard #serverTime { display: none !important; }
  .page-dashboard .topbar .right {
    order: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
  }
  .page-dashboard .topbar-user { width: auto !important; }
  .page-dashboard .topbar-user__meta strong,
  .page-dashboard .topbar-user__meta span {
    max-width: 40vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Topbar: título truncado, subtítulo oculto */
  .topbar .left > div:last-child {
    min-width: 0;
    overflow: hidden;
  }
  .topbar .left > div:last-child > div:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px !important;
    font-weight: 900 !important;
  }
  .topbar .left > div:last-child > small {
    display: none !important;
  }
  .topbar .right .pill {
    font-size: 11px !important;
    padding: 3px 9px !important;
    font-weight: 700;
  }
  .topbar .left .btn-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 13px !important;
  }

  /* Cards */
  .card {
    padding: 18px 16px !important;
    border-radius: 18px !important;
  }

  /* Container full width */
  .container { width: 100% !important; }

  /* Grids */
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr !important;
  }
  .kpis {
    grid-template-columns: 1fr 1fr !important;
  }
  .kpi { padding: 14px 14px 12px !important; border-radius: 14px !important; }
  .kpi .v { font-size: 1.18rem !important; }
  .kpi .t { font-size: .82rem !important; }
  .controls {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Botones de acciones */
  .actions-inline {
    grid-column: 1 / -1 !important;
    justify-content: stretch;
  }
  .actions-inline .btn { flex: 1 1 auto; }
  .actions.actions-vertical { gap: 8px !important; }
  .actions.actions-vertical .btn { min-height: 46px; font-size: 14px; }

  /* Paginador */
  .pager {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .pager.pager-inline {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .pager-btn {
    min-width: 72px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }
  .page-pill {
    min-width: auto !important;
    flex: 1 1 auto;
    max-width: 180px;
    text-align: center !important;
    font-size: 11.5px !important;
    padding: 5px 10px !important;
  }
  .pager-go {
    display: none !important;
    width: 100%;
    justify-content: center;
  }
  .listado-header {
    flex-direction: column;
    gap: 8px !important;
    margin-bottom: 6px !important;
  }
  .listado-header h2 {
    font-size: .96rem !important;
    margin: 0 !important;
  }
  .pager.pager-inline { justify-content: flex-start; }

  /* Paginador inferior fijo (sticky en órdenes) */
  .page-orders .listado-header .pager.pager-inline {
    position: sticky;
    top: 0;
    background: rgba(7,12,24,.86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 6px 0;
    border-radius: 12px;
    z-index: 5;
  }

  /* Modales: bottom-sheet */
  .modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 92vh !important;
    border-radius: 22px 22px 0 0 !important;
    margin: 0 !important;
    padding: 14px 12px 20px !important;
  }
  /* Asa visual del modal bottom sheet */
  .modal::before {
    content: "";
    display: block;
    width: 44px; height: 4px;
    border-radius: 999px;
    background: rgba(173,216,255,.28);
    margin: -2px auto 12px;
  }
  .modal .row,
  .modal .row.row-compact {
    grid-template-columns: 1fr !important;
  }
  .modal .row.row-compact .span-2,
  .modal .row.row-compact .span-3,
  .modal .row.row-compact .span-4 {
    grid-column: 1 / -1 !important;
  }
  .modal-detail-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .modal-field--wide,
  .modal-field.wide {
    grid-column: 1 / -1 !important;
  }
  .modal-section__title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--muted, #9fb1d1);
    margin: 14px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(173,216,255,.10);
  }
  .modal-field {
    padding: 8px 10px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.025) !important;
    border: 1px solid rgba(173,216,255,.08) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  .modal-field__label {
    font-size: 10.5px !important;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--muted, #9fb1d1) !important;
    font-weight: 700;
  }
  .modal-field__value {
    font-size: 13px !important;
    font-weight: 700;
    word-break: break-word;
  }
  .modal-more .more-grid { grid-template-columns: 1fr !important; }

  /* Tablas: scroll horizontal contenido */
  .tablewrap, .admin-tablewrap {
    border-radius: 14px;
  }
  /* Scroll affordance: gradiente lateral */
  .tablewrap,
  .admin-tablewrap {
    position: relative !important;
  }
  .tablewrap::after,
  .admin-tablewrap::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 28px !important;
    background: linear-gradient(to right, transparent, rgba(4,8,20,.55)) !important;
    pointer-events: none !important;
    border-radius: 0 14px 14px 0 !important;
    z-index: 5 !important;
  }

  /* Admin import */
  .admin-import-shell { grid-template-columns: 1fr !important; }
  .import-target-cards { grid-template-columns: 1fr !important; }
  .import-unified { grid-template-columns: 1fr !important; }
  .import-progress-grid { grid-template-columns: 1fr 1fr !important; }
  .import-section-head {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .import-unified-actions { flex-direction: column !important; }
  .import-unified-actions .btn { width: 100% !important; }

  /* Layout de órdenes */
  .page-orders .orders-layout {
    grid-template-columns: 1fr !important;
  }

  /* Filtros como bottom sheet en móvil */
  .page-orders .filters-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 850 !important;
    width: 100% !important;
    max-height: 86vh !important;
    overflow-y: auto !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -20px 60px rgba(0,0,0,.55) !important;
    transform: translateY(0);
    transition: transform 280ms var(--ease-out) !important;
    padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
    /* Fondo opaco y SIN backdrop-filter — mismo motivo que el sidebar móvil:
       el blur sobre un bottom-sheet animado con transform se rasteriza
       borroso en Android. El panel ya era casi sólido (.98/.99). */
    background: linear-gradient(180deg, #0b1428, #070c18) !important;
  }
  html.filters-collapsed .page-orders .filters-panel {
    transform: translateY(110%) !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
  /* Asa visual del bottom sheet */
  .page-orders .filters-panel::before {
    content: "";
    display: block;
    width: 44px; height: 4px;
    border-radius: 999px;
    background: rgba(173,216,255,.25);
    margin: 2px auto 12px;
  }
  /* Backdrop del bottom sheet */
  #filters-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 18, .62);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 840;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
  }
  html:not(.filters-collapsed) #filters-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  .filters-collapsed .page-orders .orders-layout {
    grid-template-columns: 1fr !important;
  }
  /* Filtros - cabecera compacta */
  .filters-head h2 {
    font-size: .96rem !important;
  }

  /* Admin user grid */
  .user-admin-grid { grid-template-columns: 1fr !important; }
  .admin-user-form { grid-template-columns: 1fr !important; }
  .permissions-grid { grid-template-columns: 1fr !important; }

  /* Admin subnav: scroll horizontal */
  .admin-subnav {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  .admin-subnav::-webkit-scrollbar { display: none !important; }
  .admin-subnav a {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
  }

  /* Admin link cards: 1 columna */
  .admin-grid-links {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .admin-link-card {
    padding: 14px 16px !important;
    border-radius: 18px !important;
    gap: 12px !important;
    grid-template-columns: 46px 1fr !important;
    align-items: center !important;
  }
  .admin-link-card__icon {
    width: 46px !important;
    height: 46px !important;
    font-size: 22px !important;
    border-radius: 14px !important;
    flex-shrink: 0;
  }
  .admin-link-card h3 {
    font-size: 15px !important;
    margin-bottom: 3px !important;
  }
  .admin-link-card p {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  /* Botón primario (override móvil) */
  .btn-primary {
    font-size: 15px !important;
    padding: 11px 20px !important;
    letter-spacing: .3px !important;
  }

  /* Search hint */
  .search-hint {
    font-size: 12px;
    opacity: .85;
    padding: 7px 10px !important;
    margin-top: 4px !important;
  }

  /* Table toolbar apilado */
  .table-toolbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
    margin: 0 0 8px !important;
  }
  .table-toolbar__text { font-size: 12px !important; }
  .table-toolbar__state { font-size: 11px !important; padding: 3px 9px !important; }

  /* Footer */
  .app-footer,
  .footer {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
    gap: 2px !important;
    font-size: 11px !important;
    margin-top: 10px !important;
  }
  .app-footer .right,
  .footer .footer-right { text-align: center !important; }

  /* Usuarios admin toolbar */
  .users-admin-toolbar {
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  .users-admin-toolbar #usersFilter { width: 100% !important; }
  .users-admin-toolbar .btn { width: 100% !important; }

  /* User row compactos */
  .user-row__head { padding: 10px 12px !important; }
  .user-row__body { padding: 12px !important; }
  .user-row__actions { justify-content: stretch !important; }
  .user-row__actions .btn {
    flex: 1 !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Estado en órdenes: texto completo en móvil */
  .status-cell .status-short { display: none !important; }
  .status-cell .status-full { display: inline !important; }

  /* TABLAS COMO TARJETAS — diseño profesional móvil */
  .tablewrap > table,
  .orders-tablewrap > table,
  .admin-tablewrap > table {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 0 !important;
    background: transparent !important;
    min-width: 0 !important;
  }
  .tablewrap, .orders-tablewrap, .admin-tablewrap {
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
  }
  /* Quitar gradiente lateral cuando son cards (lo desactivamos sobre el wrap card-style) */
  .tablewrap::after, .orders-tablewrap::after, .admin-tablewrap::after { display: none !important; }

  .tablewrap thead,
  .orders-tablewrap thead,
  .admin-tablewrap thead {
    display: none !important;
  }
  .tablewrap tbody,
  .orders-tablewrap tbody,
  .admin-tablewrap tbody {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .tablewrap tbody tr,
  .orders-tablewrap tbody tr,
  .admin-tablewrap tbody tr {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 3px !important;
    margin: 0 0 12px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(173,216,255,.16) !important;
    background: linear-gradient(180deg, rgba(14,26,50,.96), rgba(9,15,30,.98)) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.32) !important;
  }
  .tablewrap tbody tr:hover td,
  .orders-tablewrap tbody tr:hover td,
  .admin-tablewrap tbody tr:hover td {
    background: transparent !important;
  }
  .tablewrap tbody tr.row-clickable,
  .orders-tablewrap tbody tr.row-clickable,
  .admin-tablewrap tbody tr.row-clickable {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(53, 194, 255, .14);
  }
  .tablewrap tbody tr.row-clickable:active,
  .orders-tablewrap tbody tr.row-clickable:active,
  .admin-tablewrap tbody tr.row-clickable:active {
    transform: scale(.992);
    border-color: rgba(53,194,255,.32) !important;
  }
  .tablewrap tbody td,
  .orders-tablewrap tbody td,
  .admin-tablewrap tbody td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 5px 0 !important;
    border: 0 !important;
    border-bottom: 1px dashed rgba(173,216,255,.10) !important;
    text-align: right !important;
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  .tablewrap tbody td:last-child,
  .orders-tablewrap tbody td:last-child,
  .admin-tablewrap tbody td:last-child {
    border-bottom: 0 !important;
    padding-bottom: 2px !important;
  }
  .tablewrap tbody td:first-child,
  .orders-tablewrap tbody td:first-child,
  .admin-tablewrap tbody td:first-child {
    padding-top: 2px !important;
  }
  .tablewrap tbody td[data-label]::before,
  .orders-tablewrap tbody td[data-label]::before,
  .admin-tablewrap tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 38%;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .3px;
    font-size: 10px !important;
    font-weight: 800;
    color: var(--muted, #9fb1d1);
    word-break: break-word;
  }
  /* Celdas sin etiqueta (acciones/PDF): centradas, sin hueco de etiqueta */
  .tablewrap tbody td:not([data-label]),
  .orders-tablewrap tbody td:not([data-label]),
  .admin-tablewrap tbody td:not([data-label]) {
    justify-content: center !important;
    text-align: center !important;
  }
  .tablewrap tbody td.empty-table,
  .orders-tablewrap tbody td.empty-table,
  .admin-tablewrap tbody td.empty-table {
    display: block !important;
    text-align: center !important;
    padding: 22px 12px !important;
    color: var(--muted, #9fb1d1) !important;
  }
  .tablewrap tbody td.empty-table::before,
  .orders-tablewrap tbody td.empty-table::before,
  .admin-tablewrap tbody td.empty-table::before {
    content: none !important;
  }
  .tablewrap td .data-stack,
  .orders-tablewrap td .data-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 2px !important;
    text-align: right !important;
    width: auto !important;
    max-width: 60% !important;
  }
  .tablewrap td .data-primary,
  .tablewrap td .data-secondary,
  .orders-tablewrap td .data-primary,
  .orders-tablewrap td .data-secondary {
    -webkit-line-clamp: unset !important;
    white-space: normal !important;
    text-overflow: unset !important;
    overflow: visible !important;
  }
  .tablewrap td.status-cell,
  .orders-tablewrap td.status-cell {
    font-weight: 800 !important;
    letter-spacing: .4px !important;
  }
  .tablewrap table th,
  .tablewrap table td,
  .orders-tablewrap table th,
  .orders-tablewrap table td,
  .admin-tablewrap table th,
  .admin-tablewrap table td {
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
  }
  /* Catálogo SIGA: descripción ocupa toda la fila */
  .catalogo-siga-table td.catalogo-cell--descripcion {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .catalogo-siga-table td.catalogo-cell--descripcion::before {
    max-width: 100% !important;
    margin-bottom: 4px;
  }
  .catalogo-siga-table td .catalogo-desc {
    text-align: left !important;
    width: 100%;
  }
  .tablewrap td a.pill,
  .orders-tablewrap td a.pill {
    flex: 0 0 auto !important;
    max-width: 60%;
  }

  /* FX de fondo: aligerar móvil */
  .bg-fx__beam { display: none; }
  .bg-fx__mesh { opacity: .6; }
  .bg-fx__particles { opacity: .45; }

  /* ── Login mobile (v5 layout: top + 3-col shell + footer) ────────────── */
  .login-top{
    grid-template-columns:1fr !important;
    padding:16px 18px !important;
    gap:12px !important;
    text-align:center;
  }
  .login-top__brand{
    grid-column:1 !important;
    justify-self:center !important;
    flex-direction:column;
    text-align:center;
    gap:8px;
  }
  .login-top__brand-text{ align-items:center; }
  .login-top__logo{ width:48px; height:48px; }
  .login-top__hero{
    grid-column:1 !important;
    font-size:clamp(22px, 6vw, 28px) !important;
  }
  /* Shell colapsa a 1 columna: card primero, side panels apilados debajo. */
  .login-shell{
    grid-template-columns:1fr !important;
    padding:24px 16px !important;
    gap:24px !important;
  }
  .login-side{
    max-width:none !important;
    justify-self:stretch !important;
  }
  .login-side--left{ order:2; }
  .login-card{ order:1; padding:24px 20px 20px !important; border-radius:18px !important; }
  .login-side--right{ order:3; }
  .login-card__title{ font-size:20px !important; }
  .login-footer{
    flex-direction:column !important;
    text-align:center !important;
    gap:4px !important;
    padding:14px 16px 20px !important;
  }
  .login-footer__right{ text-align:center !important; }
}

/* ── ≤ 760px (legacy app collapse) ──────────────────────────────────────── */
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .sidebar{
    display:flex;
    flex-direction:column;
    position:relative;
    height:auto;
    border-right:none;
    border-bottom:1px solid rgba(150, 200, 255, .08);
  }
  .container{width:100%}
  .main{padding:14px}
  .card{padding:20px}
  .kpis{grid-template-columns:1fr}
  .actions-inline{
    grid-column:1 / -1;
    justify-content:stretch;
  }
  .actions-inline .btn{
    flex:1 1 auto;
  }
  .pager-go{
    width:100%;
    justify-content:center;
  }
  .controls{grid-template-columns:1fr}
}

/* ── ≤ 720px ────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .user-row__head { grid-template-columns: 1fr; }
  .user-row__badges { justify-content: flex-start; }
  .import-target-cards{
    grid-template-columns:1fr;
  }
  .kpis { grid-template-columns: 1fr 1fr !important; }
}

/* ── ≤ 640px ────────────────────────────────────────────────────────────── */
@media (max-width: 640px){
  .modal-row{grid-template-columns: 1fr}
  .modal .row{ grid-template-columns:1fr; }
  .login-shell{
    padding:14px;
  }
  .login-brand-card,
  .login-card-pro{
    padding:20px;
  }
  .login-tabs{
    grid-template-columns:1fr;
  }
  .topbar-user{
    width:100%;
    justify-content:space-between;
  }
  .import-progress-grid{grid-template-columns:1fr;}
  /* Sidebar fijo legacy alterno (mobile drawer) */
  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 500;
    transform: translateX(0);
    transition: transform 240ms var(--ease-out) !important;
  }
  .sidebar.collapsed {
    transform: translateX(-100%);
  }
  .main {
    margin-left: 0 !important;
  }
  .modal-head { padding: 12px 14px !important; }
  .modal-body { padding: 12px 14px 18px 14px !important; }
}

/* ── ≤ 540px (login: ocultar panel de marca) ────────────────────────────── */
@media (max-width: 540px) {
  .login-panel--brand { display: none !important; }
  /* (Eliminado) El override de .login-shell con min-height:100dvh +
     justify-content:center era de la maqueta antigua del login. En el layout
     actual el contenido del shell supera la altura de pantalla y centrarlo
     verticalmente lo desborda por arriba y por abajo — encimándose con el
     encabezado y el footer. El .login-shell del @media 768px (grid de 1
     columna, flujo normal) ya resuelve el móvil sin solaparse. */
  .login-panel--form { width: 100%; }
  .login-card-pro {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 24px 18px !important;
  }
  .login-note { font-size: 12px; }
  .login-form-note { font-size: 12px; }
}

/* ── ≤ 480px ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .kpis {
    grid-template-columns: 1fr !important;
  }
  .controls {
    grid-template-columns: 1fr !important;
  }
  .card {
    padding: 14px 12px !important;
    border-radius: 16px !important;
  }
  .main {
    padding: 10px 10px 20px !important;
  }
  #serverTime {
    font-size: 10px !important;
    padding: 4px 8px !important;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Touch targets mínimos */
  .btn, button, .nav a {
    min-height: 44px;
  }
  .pager-btn {
    min-width: 56px !important;
    font-size: 11px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
  }
  .btn-icon {
    width: 44px;
    height: 44px;
  }
  .import-progress-grid {
    grid-template-columns: 1fr !important;
  }
  .page-pill {
    font-size: 10.5px !important;
    padding: 4px 8px !important;
  }
  .topbar .right .pill {
    font-size: 10px !important;
    padding: 2px 7px !important;
  }
  .admin-subnav a {
    padding: 7px 11px !important;
    font-size: 12px !important;
  }
  /* Search hint: oculto */
  .search-hint {
    display: none !important;
  }
  /* Estado de carga: oculto */
  .table-toolbar__state {
    display: none !important;
  }
  .actions-vertical .btn {
    min-height: 46px !important;
    font-size: 14px !important;
  }
  .admin-link-card {
    grid-template-columns: 40px 1fr !important;
    padding: 12px !important;
    gap: 10px !important;
  }
  .admin-link-card__icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    border-radius: 12px !important;
  }
  .admin-link-card h3 {
    font-size: 14px !important;
  }
  .admin-link-card p {
    font-size: 12px !important;
  }
  .app-footer {
    font-size: 10px !important;
    margin-top: 8px !important;
  }
  /* Modal detail grid: 1 col bajo 480 */
  .modal-detail-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── ≤ 380px (pantallas muy pequeñas) ───────────────────────────────────── */
@media (max-width: 380px) {
  .main { padding: 10px 10px 22px !important; }
  .card { padding: 14px 12px !important; }
  .topbar .left > div:last-child > div:first-child { font-size: 13px !important; }
  .topbar .right .pill { font-size: 10.5px !important; padding: 3px 8px !important; }
  .topbar .left .btn-icon { width: 38px !important; height: 38px !important; }
  .tablewrap tbody tr,
  .orders-tablewrap tbody tr { padding: 10px 12px !important; }
  .tablewrap tbody td,
  .orders-tablewrap tbody td { font-size: 12.5px !important; }
  .kpis { grid-template-columns: 1fr !important; }
}


/* ═════════════════════════════════════════════════════════════════════════
   19. ACCESIBILIDAD
   ═════════════════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--brand1);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Anular animaciones si el usuario lo pidió */
@media (prefers-reduced-motion: reduce) {
  .bg-fx__particles,
  .bg-fx__mesh,
  .bg-fx__beam { animation: none !important; }
}

/* ═════════════════════════════════════════════════════════════════════════
   20. MOBILE / TABLET — FIXES DE RESPONSIVE (2026-05-17 v6)
   ─────────────────────────────────────────────────────────────────────────
   Pulido fino tras auditoría. P0 + P1 + P2 consolidados.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── iOS Safari: inputs con font-size ≥16px evitan el "zoom in" automático
   al hacer foco. Aplicar SIEMPRE (no solo en mobile), porque el zoom es
   por foco no por viewport. */
@media (hover: none), (pointer: coarse) {
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ── Modales: respetar safe-area-inset del notch (iPhone X+). */
.modal-backdrop {
  padding:
    max(20px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
}
.modal {
  max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);
}

/* ── Mobile (≤768px): tap targets, tipografía, layout ──────────────────── */
@media (max-width: 768px) {

  /* Tap targets mínimos 44×44 (Apple HIG / Material). */
  .btn,
  .btn-primary,
  .btn-ghost,
  .btn-icon,
  .pager-btn,
  .audit-chip {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  .pager-btn {
    padding: 0 14px !important;
  }

  /* Modal: ancho 100% con respeto a safe-area. NO usar 100vw (genera scroll
     horizontal en pantallas con notch). */
  .modal {
    width: 100% !important;
    max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px) !important;
    margin: 0 auto;
  }

  /* Modal detail grid: colapsar a 1 columna en pantallas <480px (en 480-768
     mantener 2 cols si entran). */
  .modal-detail-grid {
    grid-template-columns: 1fr !important;
  }

  /* Topbar pill font-size mínimo 12px para legibilidad. */
  .topbar .right .pill {
    font-size: 12px !important;
  }

  /* Listado header h2 más legible. */
  .listado-header h2 {
    font-size: clamp(15px, 4vw, 17px) !important;
  }

  /* Admin subnav: shadow lateral derecho que indica "hay más a la derecha"
     cuando hay overflow horizontal. */
  .admin-subnav {
    position: relative;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
            mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
  }
  .admin-subnav a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Inputs táctiles: padding cómodo + altura mínima. */
  input,
  select,
  textarea {
    min-height: 44px;
  }

  /* Botón de ojo de password sigue siendo 32×32 — pero tap target extendido
     via padding del input (44px de alto), entonces se mantiene la posición. */
}

/* ── Mobile small (≤380px): preservar info crítica ────────────────────── */
@media (max-width: 380px) {

  /* KPI cards: 2 columnas hasta 320px, no colapsar a 1 (pierde contexto). */
  .kpis {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }
  .kpi .v {
    font-size: clamp(16px, 5vw, 20px) !important;
  }

  /* Botones de topbar nunca <44px (overrides al !important previo). */
  .topbar .left .btn-icon {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ── Sidebar drawer: backdrop oscuro cuando está abierto en mobile,
   confirmar 100dvh y safe-area. */
@media (max-width: 768px) {
  .sidebar {
    /* dvh = dynamic viewport height — respeta cambios de chrome UI en mobile */
    height: 100dvh !important;
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  /* Cuando el drawer está abierto, el overlay oscurece + cierra al tocar fuera */
  #sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 22, .55);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  html:not(.sidebar-collapsed) #sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ── Active state visual feedback en touch (no hover) ──────────────────── */
@media (hover: none) {
  .btn:active,
  .btn-icon:active,
  .pill:active,
  .nav a:active,
  .admin-link-card:active,
  .row-clickable:active,
  tr.clickable:active {
    transform: scale(.97);
    transition: transform .08s ease;
  }
}

/* ── Footer del login: respetar safe-area-inset en mobile (notch/home bar). */
@media (max-width: 768px) {
  .login-footer {
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   PAGE-DASHBOARD — TODO flotante sobre las burbujas, sin recuadros ni líneas.
   ─────────────────────────────────────────────────────────────────────────
   El usuario quiere que las burbujas del bg-fx se vean PASAR por detrás de
   los números/textos sin disipar (sin que ningún fondo opaco las tape) y
   sin líneas horizontales separadoras.
   ═════════════════════════════════════════════════════════════════════════ */

/* Cards externos (Indicadores / Última importación): invisibles.
   IMPORTANTE: `backdrop-filter: blur(10px)` del .card base difumina las
   burbujas detrás aunque el background sea transparente. Hay que quitarlo
   explícitamente. También quitamos el `::before` que pinta una hairline
   decorativa arriba de cada card. */
.page-dashboard .card,
.page-dashboard .card:hover {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  padding: 8px 4px !important;
  transform: none !important;
}
.page-dashboard .card::before,
.page-dashboard .card::after {
  content: none !important;
  background: none !important;
  display: none !important;
}

/* KPIs internos: MANTIENEN su estilo glass original (background + border +
   shadow) — el usuario los quiere así. Lo único que no debe tapar burbujas
   es el "wrapper" de Indicadores/Última importación, ya hecho arriba. */
.page-dashboard .kpi::before,
.page-dashboard .kpi::after { content: none !important; }

/* Eliminar TODA línea horizontal en la página dashboard: borders top/bottom
   de cualquier elemento, hr, divisores de topbar/footer, etc. */
.page-dashboard .topbar,
.page-dashboard .topbar *,
.page-dashboard .container,
.page-dashboard .container > *,
.page-dashboard .footer,
.page-dashboard .app-footer,
.page-dashboard hr {
  border-top: none !important;
  border-bottom: none !important;
}

/* Pills del dashboard (Documentos / Órdenes / etc. y los de Última
   importación): SIN fondo opaco, solo border. Las burbujas pasan por
   detrás sin difuminarse — mismo efecto que los iconos del sidebar. */
.page-dashboard .pill {
  background: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  border: 1px solid rgba(173,216,255,.18) !important;
  box-shadow: none !important;
}
/* Hover sutil para mantener feedback al pasar el mouse. */
.page-dashboard .pill:hover {
  background: rgba(125,211,252,.08) !important;
  border-color: rgba(125,211,252,.35) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   FLOATING WRAPPERS — cards de listado sin recuadro (efecto burbuja).
   ─────────────────────────────────────────────────────────────────────────
   Aplica a las páginas de listado (ordenes, catálogo, personal, proveedores,
   documentos). El card-wrapper "Listado" no aporta más que un recuadro —
   lo hacemos invisible para que las burbujas se vean y el listado ocupe
   más espacio visual. La tabla interna mantiene su contraste propio.

   Los FILTROS sí mantienen card opaco porque agrupan controles relacionados
   y se benefician del fondo para legibilidad.
   ═════════════════════════════════════════════════════════════════════════ */
.page-orders .orders-list-card,
.page-orders .orders-list-card:hover {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  padding: 10px 8px 0 !important;
  transform: none !important;
}
.page-orders .orders-list-card::before,
.page-orders .orders-list-card::after {
  content: none !important;
  display: none !important;
}

/* Filtros: SIN fondo, SIN hover lift (no eleva ni ilumina). Los inputs/
   selects/buttons internos son los que tienen recuadros independientes;
   el wrapper no debe competir con ellos visualmente. */
.page-orders .filters-panel.card,
.page-orders .filters-panel.card:hover {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  transform: none !important;     /* anula el translateY del .card:hover */
  filter: none !important;
}
.page-orders .filters-panel.card::before,
.page-orders .filters-panel.card::after {
  content: none !important;
  display: none !important;
}

/* Listado header (h2 + pager): sin fondo opaco — el listado "respira".
   Como el card padre tiene padding: 0 !important, el h2 quedaba pegado al
   borde superior y los ascenders (B, d, j, R) se recortaban. Damos aire
   con padding-top + line-height holgado. */
.page-orders .listado-header {
  background: transparent !important;
  padding-top: 6px;
}
.page-orders .listado-header h2 {
  line-height: 1.4;
  padding: 2px 0;
  margin: 0;
  overflow: visible;
}

/* Mantener la tabla con su propio fondo legible (no la tocamos). */

/* ═════════════════════════════════════════════════════════════════════════
   ADMIN — cards de secciones internas mantienen su fondo (es información
   estructurada y conviene tener cajas claras). Los KPIs sí los hacemos
   sutiles. No tocamos admin por ahora salvo casos puntuales.
   ═════════════════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════════════════
   COMPACTACIONES ESPECÍFICAS (2026-05-17 v7)
   - Topbar .btn-primary más chico (era enorme con padding base + min-height)
   - Filtros de .page-orders más compactos (caben en 1 pantalla sin scroll)
   - Listado se extiende usando el viewport disponible hacia abajo
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Botones del TOPBAR — compactos ─────────────────────────────────────── */
.topbar .btn,
.topbar .btn-primary,
.topbar .btn-ghost {
  min-height: 34px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.18) !important;
}
.topbar a.btn,
.topbar a.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

/* ── Filtros .page-orders — anchos cómodos, tipografía legible, sin hover lift ─ */
.page-orders .filters-panel .filters-head {
  margin-bottom: 6px !important;
}
.page-orders .filters-panel .filters-head h2 {
  font-size: 13.5px !important;
  margin: 0 !important;
}
/* Compacto pero con tipografía proporcional al alto de los controles. */
.page-orders .filters-panel.card {
  padding: 14px !important;
}
.page-orders .filters-panel .controls-vertical {
  gap: 6px !important;
}
/* Fondo, borde y tipografía unificados para TODOS los controles del panel
   (inputs de texto, selects, date-display generados por date-picker.js). */
.page-orders .filters-panel input,
.page-orders .filters-panel select,
.page-orders .filters-panel [data-dp-display] {
  min-height: 36px !important;
  padding: 6px 11px !important;
  font-size: 12px !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, rgba(7,13,27,.92), rgba(10,16,31,.88)) !important;
  border: 1px solid rgba(173,216,255,.12) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
/* Mantener las flechas custom del select por encima del bg unificado. */
.page-orders .filters-panel select {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.68) 50%),
    linear-gradient(135deg, rgba(255,255,255,.68) 50%, transparent 50%),
    linear-gradient(180deg, rgba(7,13,27,.92), rgba(10,16,31,.88)) !important;
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%,
    0 0 !important;
  background-size: 5px 5px, 5px 5px, 100% 100% !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  padding-right: 30px !important;
}
.page-orders .filters-panel .mini-label {
  font-size: 10.5px !important;
  margin-top: 2px !important;
  margin-bottom: 0 !important;
  text-transform: uppercase;
  letter-spacing: .4px;
}
/* Las etiquetas del filtro de fecha van en Title Case (Desde/Hasta), no MAYÚSCULA.
   Especificidad mayor ([for]) → gana a la regla de arriba, sin tocar otros labels. */
.page-orders .filters-panel .mini-label[for="from"],
.page-orders .filters-panel .mini-label[for="to"] { text-transform: none; letter-spacing: normal; }
.page-orders .filters-panel .actions-vertical {
  gap: 6px !important;
  margin-top: 9px !important;
}
.page-orders .filters-panel .actions-vertical .btn {
  min-height: 36px !important;
  padding: 7px 13px !important;
  font-size: 12px !important;
  border-radius: 9px !important;
}
.page-orders .filters-panel .search-hint {
  font-size: 10.5px !important;
  margin-top: 5px !important;
  padding: 6px 10px !important;
  line-height: 1.35 !important;
}
/* Bandeja buttons (Recibidos/Enviados/Archivados) */
.page-orders .filters-panel [id^="bandeja"],
.page-orders .filters-panel .btn[id^="bandeja"] {
  min-height: 36px !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  border-radius: 9px !important;
  flex: 1 1 70px !important;
}
/* Hover de los inputs/selects: solo cambia borde (sin elevación/sombra). */
.page-orders .filters-panel input:hover,
.page-orders .filters-panel select:hover,
.page-orders .filters-panel .btn:hover {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* ── Listado header (h2 + pager): más compacto y prolijo ──────────────── */
.page-orders .listado-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  /* padding-top da aire para los ascenders del h2 (Ba, di, j, Re); sin esto
     se recortan porque .orders-list-card tiene overflow: hidden. */
  padding: 4px 0 2px !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
}
.page-orders .listado-header h2 {
  font-size: 14px !important;
  margin: 0 !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  padding: 2px 0 !important;
  overflow: visible !important;
}
/* El card mantiene overflow:hidden VERTICAL para que el contenido (tabla
   con muchas filas) no se desborde fuera del card y empuje el footer →
   eso causaba barra de scroll de la página. El scroll vive en el
   .orders-tablewrap interno (overflow-y:auto).
   IMPORTANTE: overflow-x DEBE ser hidden, NO visible. Si un eje es `visible`
   y el otro no, el navegador convierte el `visible` en `auto` → aparecía una
   barra horizontal sobrante en el card (bug reportado). Con ambos hidden no
   hay barra. (Los ascenders del h2 son verticales → no se ven afectados.) */
.page-orders .orders-list-card {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}
.page-orders .pager.pager-inline {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 6px !important;
}
.page-orders .pager-btn {
  min-height: 28px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  border-radius: 7px !important;
}
/* Inputs del filters-panel: focus con solo borde cyan (sin halo de 4px que
   se veía como "doble marco"). Los selects ya quedaban bien porque su
   apariencia nativa absorbía el halo de otra forma. */
.page-orders .filters-panel input:focus,
.page-orders .filters-panel input:focus-visible {
  outline: none !important;
  border-color: rgba(125,211,252,.65) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.page-orders .page-pill {
  font-size: 11.5px !important;
  padding: 4px 10px !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ── Table toolbar (info + estado "Listo"): mínimo y discreto ────────── */
.page-orders .table-toolbar {
  padding: 4px 2px !important;
  font-size: 11px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
}
.page-orders .table-toolbar__text {
  font-size: 12px !important;
  color: #bcd2f5 !important;
  font-weight: 600 !important;
}
.page-orders .table-toolbar__state {
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  /* Estado idle "Listo" = verde (formato status-on del sistema). */
  background: rgba(0,255,136,.12) !important;
  color: #00ff88 !important;
  border: 1px solid rgba(0,255,136,.30) !important;
}
.page-orders .table-toolbar__state.is-busy {
  /* Mientras carga = ámbar (formato status-warn). */
  background: rgba(255,159,28,.14) !important;
  color: #ffd166 !important;
  border-color: rgba(255,159,28,.35) !important;
  opacity: 1 !important;
}

/* ── Listado: altura ADAPTATIVA al contenido (no desperdicia espacio).
   Si hay pocos items la tabla mide lo necesario; si hay muchos crece hasta
   max-height con scroll interno. */
/* Card con altura FIJA al viewport — garantiza que la página no exceda
   100vh ni dependa de si los filtros están visibles. Antes con max-height
   el grid recalculaba y la página crecía → body scrolleaba. NO usamos
   overflow: hidden en body/main porque recorta los tooltips. */
/* Rango de fechas en 2 columnas: DESDE / HASTA lado a lado en el filtros.
   Reduce de 4 filas (label + input + label + input) a 2 filas. */
.page-orders .filters-panel .date-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
  margin-top: 4px;
}
.page-orders .filters-panel .date-range > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.page-orders .filters-panel .date-range input[type="date"] {
  width: 100%;
  min-width: 0;
}

/* Card con altura FIJA IDÉNTICA en todos los htmls. Buffer 70px reserva
   apenas lo necesario para topbar y un margen mínimo del footer — la lista
   se extiende casi hasta el fondo del viewport. */
@media (min-width: 769px) {
  .page-orders .orders-list-card,
  .page-admin-list .orders-list-card {
    height: calc(100vh - 100px) !important;
    min-height: calc(100vh - 100px) !important;
    max-height: calc(100vh - 100px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }
  .page-orders .orders-list-card .orders-tablewrap,
  .page-admin-list .orders-list-card .orders-tablewrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}
body.page-orders .main {
  padding-bottom: 8px !important;
}

/* ── Filtros: panel ancho cómodo (270px). ────────────────────────────── */
.page-orders .orders-layout {
  /* 210px era 270 — los filtros ya están compactados, no necesitan tanto
     ancho y le robaban espacio a la tabla que terminaba cortándose. */
  grid-template-columns: 210px minmax(0, 1fr) !important;
  gap: 10px !important;
}
/* Cuando el usuario oculta los filtros (clase .filters-collapsed en <html>),
   el listado ocupa todo el ancho — preservamos la dinámica original. */
html.filters-collapsed .page-orders .orders-layout {
  grid-template-columns: 0 1fr !important;
  gap: 0 !important;
}
html.filters-collapsed .page-orders .filters-panel {
  width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   FOOTER FIJO AL PIE — independiente de filtros, orders-layout, etc.
   Antes vivía dentro del flujo y su posición horizontal "saltaba" cuando
   se mostraban/ocultaban los filtros (porque algún ancestro re-layouteaba).
   Lo sacamos del flujo: izquierda anclada al borde del sidebar, derecha
   al borde derecho del viewport. Vale para TODAS las páginas con sidebar.
   ═════════════════════════════════════════════════════════════════════════ */
.app .app-footer,
.app .footer {
  position: fixed !important;
  left: var(--sidebarW);
  right: 0;
  bottom: 0;
  margin: 0 !important;
  padding: 6px 22px !important;
  z-index: 70;
  /* SIN fondo: el footer va translúcido sobre las burbujas. */
  background: transparent !important;
  pointer-events: none;
}
.app .app-footer > *,
.app .footer > * { pointer-events: auto; }
html.sidebar-collapsed .app .app-footer,
html.sidebar-collapsed .app .footer {
  left: var(--sidebarWCollapsed);
}
/* El contenido no debe quedar oculto detrás del footer. */
.app .main {
  padding-bottom: 44px !important;
}
/* En móvil el sidebar es overlay y el footer vuelve al flujo (más natural
   en pantallas pequeñas; el centrado vertical ya está manejado en 5187). */
@media (max-width: 768px) {
  .app .app-footer,
  .app .footer {
    position: static !important;
    left: auto !important;
    right: auto !important;
    background: transparent !important;
    padding: 8px 4px 0 !important;
  }
  .app .main { padding-bottom: 24px !important; }
}

/* Tabla siempre al ancho del wrap. CON scroll vertical INTERNO: el card
   tiene altura fija (calc(100vh - 180px)) y el wrap es flex item que
   ocupa el espacio restante. Si la tabla excede, el wrap scrollea por
   dentro — no la página entera. */
.page-orders .orders-tablewrap {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.page-orders .orders-tablewrap table {
  width: 100%;
  table-layout: auto;
}
/* personal / proveedores: sus columnas llevan anchos en % fijados desde JS
   (th.style.width). Con table-layout:fixed esos % se respetan y la tabla
   comprime/expande limpiamente al mostrar u ocultar los filtros — igual que
   catálogo SIGA. Sin esto, table-layout:auto ignora los % y la tabla se
   desborda del card cuando se angosta. */
.page-orders .orders-tablewrap table.orders-table-fixed {
  table-layout: fixed !important;
}
.page-orders .orders-tablewrap th,
.page-orders .orders-tablewrap td {
  padding: 4px 8px !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
}
/* Altura de fila uniforme para TODAS las listas (ordenes, catálogo, personal,
   proveedores): en ordenes cada celda lleva un .data-stack de 2 líneas (~40px);
   personal/proveedores tienen celdas de 1 línea, así que esta altura mínima
   las iguala. `height` en <td> actúa como mínimo: si el contenido es mayor,
   la fila crece. */
.page-orders .orders-tablewrap td {
  height: 40px !important;
}
.page-orders .orders-tablewrap th {
  font-size: 10.5px !important;
  letter-spacing: .2px !important;
}
/* data-stack: contenedor con razón social/RUC, oficina/descripción.
   Sin esto las líneas largas estiraban la columna y desbordaba la tabla. */
.page-orders .orders-tablewrap td .data-stack,
.page-orders .orders-tablewrap td .data-primary,
.page-orders .orders-tablewrap td .data-secondary {
  white-space: normal;
  word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINAS ADMIN CON LAYOUT DE ÓRDENES (.page-admin-list)
   admin_documentos / admin_audit / admin_monitor / admin_users reutilizan el
   .orders-layout de las páginas de datos. Como las páginas admin tienen una
   .admin-subnav entre el topbar y el contenido, el card de listado (altura
   fija al viewport) debe descontar esa franja extra para no exceder 100vh.
   ═══════════════════════════════════════════════════════════════════════════ */
.page-admin-list .orders-layout {
  margin-top: 2px !important;
}
.page-admin-list .orders-list-card {
  height: calc(100vh - 130px) !important;
  max-height: calc(100vh - 130px) !important;
}
/* Tablas admin (audit / sesiones / usuarios) conservan su .admin-tablewrap
   nativo; dentro del orders-list-card deben estirarse y hacer scroll interno. */
.page-admin-list .orders-list-card .admin-tablewrap,
.page-admin-list .orders-list-card .users-admin-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;   /* scroll vertical interno: la base .admin-tablewrap lo tenía
                                    en hidden y recortaba las filas de abajo del card fijo */
}
/* La lista de usuarios son tarjetas (no tabla): scroll vertical interno. */
.page-admin-list .orders-list-card .users-admin-wrap {
  overflow-y: auto !important;
  padding-right: 2px;
}

/* admin_users: el formulario de creación va sobre el listado, así que el card
   de usuarios crece con su contenido en lugar de fijarse al viewport. */
.page-admin-users .orders-layout { margin-top: 12px !important; }
.page-admin-users .orders-list-card {
  height: auto !important;
  max-height: none !important;
  min-height: clamp(240px, 42vh, 560px) !important;
}
/* KPIs de monitoreo dentro del panel lateral: más compactos para caber en 210px */
.page-admin-list .filters-panel .kpi {
  padding: 11px 13px 9px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.page-admin-list .filters-panel .kpi .v { font-size: 1.2rem !important; }
.page-admin-list .filters-panel .kpi .t { margin-top: 4px !important; font-size: .82rem !important; }
/* El footer fijo de .page-orders depende de .app-footer; las páginas admin
   que usan <footer class="footer"> ya quedan cubiertas por la regla global
   .app .footer. No se necesita ajuste extra aquí. */
@media (max-width: 768px) {
  .page-admin-list .orders-list-card {
    height: auto !important;
    max-height: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   DATE/TIME INPUTS — calendario nativo en modo OSCURO acorde al tema.
   ─────────────────────────────────────────────────────────────────────────
   Chrome 81+ y Edge respetan `color-scheme: dark` y renderizan el popup
   del date picker en modo oscuro nativo (sin necesidad de librería JS).
   ═════════════════════════════════════════════════════════════════════════ */
:root,
html, body {
  color-scheme: dark;
}

/* Inputs de fecha/hora: forzar esquema oscuro (heredan del root pero los
   marcamos explícitos por si algún reset lo pierde). */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  color-scheme: dark;
}

/* Icono del calendario dentro del input: tinte cyan acorde a la paleta. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(78%) sepia(45%) saturate(600%) hue-rotate(170deg) brightness(110%) contrast(95%);
  cursor: pointer;
  opacity: .75;
  padding: 2px;
  border-radius: 4px;
  transition: opacity .15s ease, background .15s ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: rgba(125, 211, 252, .14);
}

/* Texto interno (dd/mm/yyyy) con color claro. */
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field {
  color: #eaf3ff;
}

/* Placeholder cuando no hay fecha seleccionada. */
input[type="date"]:not(:focus):invalid::-webkit-datetime-edit {
  color: rgba(190, 210, 240, .35);
}

/* ═════════════════════════════════════════════════════════════════════════
   DATE PICKER CUSTOM — glass-cyan acorde al tema (reemplaza nativo).
   Activado por web/date-picker.js sobre cualquier <input type="date">.
   ═════════════════════════════════════════════════════════════════════════ */
.datepicker-popup {
  position: absolute;
  z-index: var(--z-popover);
  width: 268px;
  padding: 10px;
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(20,32,56,.94), rgba(10,18,36,.97));
  border: 1px solid rgba(173,216,255,.22);
  box-shadow:
    0 24px 70px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
          backdrop-filter: blur(22px) saturate(160%);
  color: #eaf3ff;
  font-family: inherit;
  animation: dpFadeIn .15s cubic-bezier(.22,.8,.32,1);
}
@keyframes dpFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.datepicker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  margin-bottom: 8px;
}
.datepicker__nav {
  width: 24px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 6px;
  border: 1px solid rgba(173,216,255,.18);
  background: rgba(255,255,255,.04);
  color: #cde3ff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  font-family: inherit;
}
.datepicker__nav:hover {
  background: rgba(125,211,252,.14);
  border-color: rgba(125,211,252,.45);
  color: #ffffff;
}
.datepicker__title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.datepicker__title-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #eaf3ff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 3px 7px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.datepicker__title-btn:hover {
  background: rgba(125,211,252,.14);
  border-color: rgba(125,211,252,.35);
  color: #ffffff;
}
.datepicker__title-btn::after {
  content: " ▾";
  font-size: 8px;
  opacity: .6;
  margin-left: 1px;
}
.datepicker__title-btn--year {
  color: #7dd3fc;
}
/* Submenú (selector de mes o año) — overlay dentro del popup. */
.datepicker__submenu {
  position: absolute;
  inset: 48px 10px 10px 10px;
  z-index: 2;
  background: linear-gradient(165deg, rgba(20,32,56,.98), rgba(10,18,36,.99));
  border: 1px solid rgba(125,211,252,.32);
  border-radius: 10px;
  overflow-y: auto;
  padding: 6px;
  display: grid;
  align-content: start;
}
.datepicker__submenu--months {
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.datepicker__submenu--years {
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.datepicker__sub-item {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(173,216,255,.10);
  color: #cde3ff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.datepicker__sub-item:hover {
  background: rgba(125,211,252,.16);
  border-color: rgba(125,211,252,.45);
  color: #ffffff;
}
.datepicker__sub-item.is-active {
  background: linear-gradient(135deg, rgba(53,194,255,.45), rgba(29,122,141,.32));
  border-color: rgba(125,211,252,.65);
  color: #ffffff;
  font-weight: 800;
}
.datepicker__week-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 5px;
}
.datepicker__weekday {
  font-size: 10px;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 3px 0;
}
.datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
/* Día con sutil fondo + borde para que no parezca "flotante". */
.datepicker__day {
  height: 28px;
  width: 100%;
  border: 1px solid rgba(173,216,255,.08);
  background: rgba(255,255,255,.025);
  border-radius: 6px;
  color: #cde3ff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  font-family: inherit;
}
.datepicker__day:hover:not(:disabled) {
  background: rgba(125,211,252,.18);
  border-color: rgba(125,211,252,.45);
  color: #ffffff;
}
.datepicker__day.is-outside {
  color: rgba(159,177,209,.28);
  background: transparent;
  border-color: transparent;
}
.datepicker__day.is-today {
  border-color: rgba(125,211,252,.6);
  color: #ffffff;
  font-weight: 700;
}
.datepicker__day.is-selected {
  background: linear-gradient(135deg, rgba(53,194,255,.45), rgba(29,122,141,.32));
  border-color: rgba(125,211,252,.7);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 3px 12px rgba(53,194,255,.25);
}
.datepicker__day.is-selected:hover {
  background: linear-gradient(135deg, rgba(53,194,255,.58), rgba(29,122,141,.42));
}
.datepicker__day.is-disabled,
.datepicker__day:disabled {
  opacity: .25;
  cursor: not-allowed;
}
.datepicker__foot {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(173,216,255,.10);
}
.datepicker__action {
  flex: 1;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(125,211,252,.35);
  background: linear-gradient(135deg, rgba(53,194,255,.18), rgba(29,122,141,.10));
  color: #cde3ff;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  font-family: inherit;
}
.datepicker__action:hover {
  background: linear-gradient(135deg, rgba(53,194,255,.28), rgba(29,122,141,.16));
  color: #ffffff;
  border-color: rgba(125,211,252,.55);
}
.datepicker__action--ghost {
  background: transparent;
  border-color: rgba(173,216,255,.18);
}
.datepicker__action--ghost:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(173,216,255,.32);
}
/* Bloquea por completo el calendar picker indicator nativo en cualquier
   <input type="date"> — defensa extra por si el JS no convirtió el input. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none !important;
          appearance: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CIERRE DE SESIÓN POR INACTIVIDAD
   Modal de aviso con cuenta regresiva + banner en el login. Lo monta auth.js
   (web/auth.js). Tono ámbar para distinguirlo de error (rojo) / éxito (verde).
   ═══════════════════════════════════════════════════════════════════════════ */
.idle-warn-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-critical);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 8, 22, .74);
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  animation: idleWarnFade .16s ease;
}
@keyframes idleWarnFade { from { opacity: 0; } to { opacity: 1; } }

.idle-warn {
  width: min(420px, 96vw);
  background: var(--bg-card, #091525);
  border: 1px solid rgba(255, 196, 84, .38);
  border-radius: 18px;
  padding: 26px 26px 22px;
  text-align: center;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .55);
}
.idle-warn__icon { font-size: 38px; line-height: 1; margin-bottom: 8px; }
.idle-warn__title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .2px;
}
.idle-warn__text {
  margin: 0 0 18px;
  color: var(--muted, #9fb3c8);
  font-size: 14px;
  line-height: 1.55;
}
.idle-warn__count {
  display: inline-block;
  min-width: 2.2em;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 196, 84, .16);
  border: 1px solid rgba(255, 196, 84, .40);
  color: #ffd483;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.idle-warn__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.idle-warn__actions .btn { min-width: 130px; }

/* Banner en el login cuando el cierre fue por inactividad */
.login-idle-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 196, 84, .30);
  background: linear-gradient(180deg, rgba(74, 56, 18, .55), rgba(40, 30, 10, .72));
  color: #ffe9c4;
  font-size: 13px;
  line-height: 1.45;
}
.login-idle-notice__icon { font-size: 17px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL CENTRAL — Main.html (directorio de municipalidades en muni-digital.com)
   ═══════════════════════════════════════════════════════════════════════════ */
.hub-shell {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 32px 20px 48px;
  position: relative;
  z-index: 1;
  text-align: center;
}
.hub-title {
  margin: 0;
  font-size: clamp(20px, 3.4vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
}
.hub-subtitle {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
}
.hub-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(560px, 100%);
}
.hub-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(125,211,252,.40);
  background: linear-gradient(160deg, rgba(125,211,252,.10), rgba(255,255,255,.035));
  box-shadow: 0 18px 40px rgba(0,0,0,.30),
              inset 0 1px 0 rgba(255,255,255,.10);
  text-decoration: none;
  color: inherit;
  transition: transform .16s var(--ease-out),
              border-color .16s ease, box-shadow .16s ease;
}
.hub-card:hover {
  transform: translateY(-3px);
  border-color: rgba(125,211,252,.70);
  box-shadow: 0 24px 54px rgba(0,0,0,.4),
              0 0 0 1px rgba(125,211,252,.25),
              inset 0 1px 0 rgba(255,255,255,.14);
}
/* Feedback de presión (consistencia con el app): la tarjeta se hunde al click. */
.hub-card:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { .hub-card:active { transform: none; } }
.hub-card:focus-visible {
  outline: 2px solid var(--brand1, #7dd3fc);
  outline-offset: 3px;
}
.hub-card__crest {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 12px rgba(125,211,252,.28));
}
.hub-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}
.hub-card__name {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  color: #eaf3ff;
}
.hub-card__sub {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .2px;
}
.hub-card__arrow {
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 700;
  color: var(--brand1, #7dd3fc);
  transition: transform .16s ease;
}
.hub-card:hover .hub-card__arrow { transform: translateX(4px); }

@media (max-width: 540px) {
  .hub-card { padding: 14px 16px; gap: 12px; border-radius: 16px; }
  .hub-card__crest { width: 44px; height: 44px; }
  .hub-card__name { font-size: 14px; }
}

/* El contenido institucional del panel (.hub-about / .hub-pillar / .hub-values)
   tiene sus estilos embebidos en web/Main.html — ver el <style> de esa página.
   Se hace así porque Cloudflare cachea este styles.css de forma agresiva. */

/* ═════════════════════════════════════════════════════════════════════════
   AJUSTES MÓVIL FINALES (2026-05-26)
   Van al final del archivo para ganar en ORDEN DE CASCADA a las reglas
   "flotantes" de escritorio (que son más específicas o posteriores).
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* (1) El panel de filtros en móvil es un bottom-sheet superpuesto al contenido:
     DEBE ser opaco. La regla de escritorio `.page-orders .filters-panel.card{
     background:transparent}` (efecto flotante) lo dejaba transparente. */
  .page-orders .filters-panel.card,
  .page-orders .filters-panel.card:hover {
    background: linear-gradient(180deg, #0b1428, #070c18) !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }

  /* (2) FIX CRÍTICO — listas en móvil no se veían. En escritorio el card de listado
     tiene altura FIJA (height:calc(100vh-100px)) + overflow:hidden para scroll interno.
     En móvil las filas son TARJETAS apiladas (altas) y esa altura fija las RECORTABA
     → la lista quedaba invisible. En móvil el card debe CRECER con su contenido y que
     la PÁGINA haga scroll. Cubre listas normales y admin (ambas son .page-orders). */
  .page-orders .orders-list-card {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .page-orders .orders-tablewrap {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   TÁCTIL (celular/tablet) — 2026-05-27. ESTA es la regla que faltaba para que
   se vean las listas en el celular. A diferencia de @media (max-width:768px),
   (hover:none)/(pointer:coarse) sí aplica también cuando el usuario activa el
   "modo escritorio" del navegador (que ensancha el viewport pero NO cambia que
   la pantalla sea táctil). El card de listado de altura fija (calc(100vh-100px))
   recortaba TODAS las listas en pantallas cortas y no había scroll. En táctil el
   card CRECE con su contenido y la PÁGINA hace scroll → las listas se ven y se
   pueden desplazar. Cubre listas normales y admin.
   ═════════════════════════════════════════════════════════════════════════ */
/* OJO: este bloque usa (max-width:768px) — NO (hover/pointer) — porque algunos
   navegadores móviles viejos (Huawei) NO soportan las media features hover/pointer
   y entonces IGNORABAN todo el bloque (la tabla quedaba aplastada). max-width sí lo
   soportan todos. Añadimos (pointer:coarse) como respaldo para el "modo escritorio". */
@media (max-width: 768px), (pointer: coarse) {
  .page-orders .orders-list-card,
  .page-admin-list .orders-list-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .page-orders .orders-tablewrap {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    /* Red de seguridad: si el navegador ignora display:block en la tabla (como ignoró
       flex), la tabla queda content-sized y se DESPLAZA horizontal (legible) en vez de
       aplastarse. Si las tarjetas SÍ se forman, no hay desbordamiento → sin barra. */
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Los velos (#sidebar-overlay / #filters-overlay) en este navegador quedaban
     ENCIMA del menú/filtros por apilado cruzado (overlay en body/.app vs paneles
     dentro de .main que tiene z-index:1) → cubrían y bloqueaban los toques. Se
     DESACTIVAN en móvil. El cierre "al tocar afuera" lo maneja un listener en
     layout.js; el menú/filtros también se cierran con sus botones ☰/⚙. */
  #sidebar-overlay, #filters-overlay {
    display: none !important;
  }

  /* "Borroso" del menú/filtros: los navegadores móviles viejos (Huawei) renderizan
     backdrop-filter de forma borrosa/glitch. Lo desactivamos en táctil apuntando a los
     elementos reales que lo usan (los overlays son por ID, ganan a `*`). Los fondos ya
     son sólidos/semisólidos, así que no se pierde legibilidad. */
  #sidebar-overlay, #filters-overlay,
  .sidebar, .filters-panel, .filters-panel.card,
  .card, .modal, .modal-backdrop, .topbar,
  .page-orders .listado-header .pager.pager-inline {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* La vista de TARJETAS (flex) de la sección ~5369 es la que se usa en móvil:
     el navegador SÍ las dibuja (confirmado: filas de ~252px con datos). Aquí NO
     se vuelve a tocar el display de la tabla para no romperlas. */
}

/* ═════════════════════════════════════════════════════════════════════════
   TABLET PRO (769-1024px) — 2026-05-30
   Entre el bloque mobile (≤768px = drawer + mcards) y el desktop (≥1025px =
   sidebar fija + filtros lateral), antes el rango tablet quedaba a mitad de
   camino: filtros lateral muy angostos, tabla apretada. Acá ajustamos cosas
   específicas para que tablet portrait y landscape se vean PRO.
   ═════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Filtros lateral angostos pero usables (200px en vez del default ~240px)
     → más espacio para la tabla, que es lo importante. */
  .page-orders .orders-layout {
    grid-template-columns: 200px 1fr !important;
    gap: 12px !important;
  }
  /* Sidebar más compacta en tablet — labels más cortos, badges más chicos. */
  html:not(.sidebar-collapsed) .sidebar {
    width: 200px !important;
  }
  /* Touch targets ≥44px en TODOS los controles tocables (lineamiento WCAG).
     Apple HIG mínimo 44pt, Android 48dp. En tablet importan porque suele
     usarse a dedo (no mouse). */
  button, .btn, .btn-icon, .pager-btn, .pill, a.pill,
  .nav a, .view-tabs button, .audit-chip {
    min-height: 44px !important;
  }
  .btn-sm {
    min-height: 38px !important;  /* sm pero igual decente para dedo */
  }
  /* Inputs/selects también +grandes para dedo. */
  input, select, textarea {
    min-height: 42px !important;
  }
  /* Topbar más compacta en tablet portrait — los KPIs se apilan abajo. */
  .topbar {
    padding: 10px 0 !important;
  }
  .topbar .right {
    gap: 6px !important;
  }
  /* Banner de Inicio: padding moderado, texto un poco más chico. */
  #alertOverdueBanner {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  /* Modal: más ancho aprovechando tablet pero no full-screen. */
  .modal {
    max-width: 92vw !important;
  }
  /* Cards de Inicio: tabla con padding más compacto para que entre más data. */
  #saldosPendientesCard table td,
  #docsPendientesCard table td,
  #birthdaysCard table td {
    padding: 10px 8px !important;
    font-size: 12.5px !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   MOBILE PRO — refinamientos 2026-05-30 a las features nuevas.
   Se aplica en TODO viewport <=768px sin tocar lo que ya funciona.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Banner de vencidas: en mobile se apila vertical, el botón "Atender ahora"
     queda full-width para click cómodo con dedo. */
  #alertOverdueBanner {
    padding: 14px 14px !important;
    gap: 10px !important;
    flex-direction: row !important;
    align-items: flex-start !important;
  }
  #alertOverdueBanner > span:last-child {
    width: 100% !important;
    text-align: center !important;
    margin-top: 6px !important;
  }
  /* Cards de Inicio: header con título+KPIs apilados en mobile. */
  #saldosPendientesCard > div:first-child,
  #docsPendientesCard > div:first-child,
  #birthdaysCard > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  /* El "Total a pagar / Sin leer / N cumpleañeros" + link queda en su fila. */
  #saldosPendientesCard > div:first-child > div:last-child,
  #docsPendientesCard > div:first-child > div:last-child,
  #birthdaysCard > div:first-child > div:last-child {
    width: 100% !important;
  }
  /* Toolbar de Saldos: en mobile los KPIs (Monto/Pagado/Saldo) van apilados
     full-width — antes se cortaban con scroll horizontal incómodo. */
  #saldosView .table-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #saldosView .table-toolbar .pill {
    flex: 1 1 100% !important;
    text-align: center !important;
  }
  /* La 4ª pestaña "Por Proveedor" debe seguir cabiendo — las pestañas
     se hacen scrollables horizontal si no caben. */
  .view-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
    scrollbar-width: thin !important;
  }
  .view-tabs button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  /* Touch target mínimo para botón ↻ refresh y similares. */
  .btn-icon {
    min-width: 40px !important;
    min-height: 40px !important;
  }
  /* Tooltips nativos (title="") se ven mejor con tap-and-hold en mobile —
     pero los pills con tooltip largos quedaban con cursor:help que en
     touch no aplica. Normalizamos. */
  [title] {
    cursor: pointer !important;
  }
  /* Selects nuevos (Solicitante/Oficina/MinAge) heredan el styling móvil. */
  #personal, #oficina, #minAge {
    width: 100% !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   TABLET LANDSCAPE pro (1025-1180px) — desktop chico
   Sidebar fija pero más estrecha, filtros normales. Sin reducir touch targets
   porque puede ser un iPad/Android grande tocable o un laptop chico con mouse.
   ═════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1180px) {
  .page-orders .orders-layout {
    grid-template-columns: 220px 1fr !important;
    gap: 14px !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   MOBILE: TABLA NATIVA CON SCROLL HORIZONTAL — 2026-05-30 (refactor)
   Decisión: el usuario prefirió que las listas en móvil se vean COMO EN PC
   (misma tabla, mismo orden de columnas), con scroll horizontal para
   columnas que no entran. Más simple, más predecible, funciona en cualquier
   navegador. Reemplaza la vista de "tarjetas mcards" anterior.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px), (pointer: coarse) {

  /* CONTENEDORES: liberar TODO (display, altura, overflow) — esta es la
     versión que el usuario CONFIRMÓ que funcionaba para mostrar las listas.
     Los selectores con html.filters-collapsed Y html:not(...) ganan en
     especificidad sobre `.page-orders .orders-list-card` con altura fija. */
  html.filters-collapsed .page-orders .orders-list-card,
  html:not(.filters-collapsed) .page-orders .orders-list-card,
  html.filters-collapsed .page-admin-list .orders-list-card,
  html:not(.filters-collapsed) .page-admin-list .orders-list-card,
  .page-orders .orders-list-card,
  .page-admin-list .orders-list-card {
    display: block !important;
    height: auto !important;
    min-height: 240px !important;
    max-height: none !important;
    overflow: visible !important;
    flex: none !important;
  }
  html.filters-collapsed .page-orders .orders-layout,
  html:not(.filters-collapsed) .page-orders .orders-layout,
  .page-orders .orders-layout {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }
  /* .main y .container también deben fluir. Sin esto el contenido se
     recortaba a la altura del viewport y la lista quedaba debajo del fold. */
  body.page-orders .main,
  body.page-admin-list .main {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .container {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* WRAPPER DE TABLA: scroll horizontal touch. Si las columnas no caben,
     el usuario desliza con el dedo. -webkit-overflow-scrolling para iOS.
     IMPORTANTE: necesitamos los selectores específicos `.page-orders` y
     `.page-admin-list` para pisar `.page-orders .orders-tablewrap` que
     tiene `overflow:hidden !important` SIN media query (línea ~6346) —
     ese era el bug exacto: la regla más específica con !important ganaba
     y RECORTABA las filas en mobile. */
  .orders-tablewrap,
  .tablewrap,
  .page-orders .orders-tablewrap,
  .page-admin-list .orders-tablewrap,
  .page-admin-list .admin-tablewrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    display: block !important;
    flex: none !important;
  }

  /* TABLA: se permite ancho mayor que la pantalla (table-layout:auto deja
     columnas al contenido). min-width garantiza columnas legibles incluso
     cuando hay 8+ columnas. */
  .orders-tablewrap > table,
  .orders-table-fixed,
  .catalogo-siga-table,
  .admin-grid-table {
    display: table !important;
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
  }
  .orders-tablewrap > table thead,
  .admin-tablewrap > table thead {
    display: table-header-group !important;
  }
  .orders-tablewrap > table tbody,
  .admin-tablewrap > table tbody {
    display: table-row-group !important;
  }
  .orders-tablewrap > table tr,
  .admin-tablewrap > table tr {
    display: table-row !important;
  }
  /* Padding y font tal cual los usa el escritorio — la tabla mobile se ve
     IGUAL que en PC, solo que con scroll horizontal cuando no entran todas
     las columnas. Sin sticky header, sin compactación distinta. */
  .orders-tablewrap > table td,
  .orders-tablewrap > table th,
  .admin-tablewrap > table td,
  .admin-tablewrap > table th {
    display: table-cell !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    /* FORZAR orden HTML (no flex order). El modo "tarjetas" antiguo dejaba
       reglas de flex que podían reordenar columnas. Esto garantiza que
       el orden visual sea el del DOM. */
    order: 0 !important;
    flex: none !important;
    float: none !important;
  }
  /* Para todos los hijos directos de cada fila (incluye colgroup si lo hubiera). */
  .orders-tablewrap > table tr > *,
  .admin-tablewrap > table tr > * {
    order: 0 !important;
  }

  /* QUITAR el ::before que duplicaba el label dentro de la celda. La regla
     anterior (~5472) servía para la vista de tarjetas; ahora con tabla
     nativa el thead muestra los títulos, no hace falta repetirlos en cada
     celda como prefijo "EXP. SIAF00278" → solo "00278". */
  .orders-tablewrap tbody td[data-label]::before,
  .admin-tablewrap tbody td[data-label]::before,
  .tablewrap tbody td[data-label]::before {
    content: none !important;
    display: none !important;
  }

  /* NEUTRALIZAR estilos del modo "tarjetas" antiguo que aún pisan las
     celdas: display:flex, width:100%, text-align:right, border dashed.
     Sin esto, todas las celdas salen con texto pegado a la derecha y
     border feo abajo de cada una. */
  .orders-tablewrap > table tbody td,
  .admin-tablewrap > table tbody td,
  .tablewrap > table tbody td {
    justify-content: initial !important;
    align-items: initial !important;
    gap: 0 !important;
    width: auto !important;
    border-bottom: 1px solid rgba(173,216,255,.06) !important;
  }
  /* Alineación SEMÁNTICA por nombre de columna (data-label). Esto pisa el
     `text-align: right !important` antiguo que dejaba todas las celdas a
     la derecha. Más robusto que depender del inline del JS. */
  .orders-tablewrap > table tbody td,
  .admin-tablewrap > table tbody td,
  .tablewrap > table tbody td {
    text-align: center !important;
  }
  /* Match parcial sin tildes para que funcione en cualquier encoding.
     "Raz" matchea "Razón Social"/"Razon Social". "Ofi" matchea "Oficina".
     "Prov" matchea "Proveedor". Especificidad máxima con tbody tr td
     para vencer cualquier regla anterior. */
  html .page-orders .orders-tablewrap > table tbody tr td[data-label*="Prov"],
  html .page-orders .orders-tablewrap > table tbody tr td[data-label*="Raz"],
  html .page-orders .orders-tablewrap > table tbody tr td[data-label*="Ofi"],
  html .page-orders .orders-tablewrap > table tbody tr td[data-label*="Concep"],
  html .page-orders .orders-tablewrap > table tbody tr td[data-label*="Asunto"],
  html .page-orders .orders-tablewrap > table tbody tr td[data-label*="Solicit"],
  html .page-orders .orders-tablewrap > table tbody tr td[data-label*="Empleado"],
  html .page-orders .orders-tablewrap > table tbody tr td[data-label*="Descripci"],
  html .page-orders .orders-tablewrap > table tbody tr td[data-label*="Detalle"],
  html .page-orders .orders-tablewrap > table tbody tr td[data-label*="Cargo"],
  html .page-orders .orders-tablewrap > table tbody tr td[data-label*="Direcci"],
  html .page-orders .orders-tablewrap > table tbody tr td[data-label*="Remit"],
  html .page-orders .orders-tablewrap > table tbody tr td[data-label*="Recept"],
  html .page-admin-list .admin-tablewrap > table tbody tr td[data-label*="Detalle"],
  html .page-admin-list .admin-tablewrap > table tbody tr td[data-label*="Usuario"] {
    text-align: left !important;
    white-space: normal !important;
    word-break: break-word !important;
    min-width: 160px !important;
    max-width: 240px !important;
    padding-right: 16px !important;     /* separación de la columna siguiente */
  }
  /* Oficina: MÁS espacio que las demás (era la queja del usuario "muy pegado"). */
  html .page-orders .orders-tablewrap > table tbody tr td[data-label*="Ofi"] {
    min-width: 220px !important;
    max-width: 320px !important;
    padding-left: 14px !important;
    padding-right: 18px !important;
  }
  /* Mismo aire para el header de Oficina y Razón. */
  html .page-orders .orders-tablewrap > table thead tr th[data-label*="Ofi"],
  html .page-orders .orders-tablewrap > table thead tr th[data-label*="Raz"] {
    text-align: left !important;
    padding-right: 16px !important;
  }

  /* FALLBACK por posición de columna — en ordenes.html el orden es:
     1=SIAF · 2=Tipo · 3=N°Orden · 4=Fecha · 5=RazónSocial · 6=Oficina ·
     7=Total · 8=Estado · 9=Archivo.
     Esto aplica AUNQUE el data-label no esté setteado o no matchee — es
     red de seguridad para que la columna 5 y 6 siempre salgan a la izquierda.
     Solo aplica a `body.page-orders` con tabla `.orders-table-fixed` (la del
     Listado de Órdenes específicamente). */
  html body.page-orders .orders-tablewrap > table.orders-table-fixed tbody tr td:nth-child(5),
  html body.page-orders .orders-tablewrap > table.orders-table-fixed tbody tr td:nth-child(6) {
    text-align: left !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  html body.page-orders .orders-tablewrap > table.orders-table-fixed tbody tr td:nth-child(5) {
    min-width: 180px !important;
    max-width: 260px !important;
    padding-right: 16px !important;
  }
  html body.page-orders .orders-tablewrap > table.orders-table-fixed tbody tr td:nth-child(6) {
    min-width: 220px !important;
    max-width: 320px !important;
    padding-left: 14px !important;
    padding-right: 18px !important;
  }
  /* Headers respectivos también */
  html body.page-orders .orders-tablewrap > table.orders-table-fixed thead tr th:nth-child(5),
  html body.page-orders .orders-tablewrap > table.orders-table-fixed thead tr th:nth-child(6) {
    text-align: left !important;
    padding-right: 16px !important;
  }
  /* "Archivo" / "Ver PDF" / "Acciones": ancho mínimo para que el botón
     no quede recortado en mobile. */
  .orders-tablewrap > table tbody td[data-label*="Archivo"],
  .orders-tablewrap > table tbody td[data-label*="PDF"],
  .orders-tablewrap > table tbody td[data-label*="Acci"],
  .admin-tablewrap > table tbody td[data-label*="Acci"] {
    text-align: center !important;
    min-width: 90px !important;
    white-space: nowrap !important;
  }
  .orders-tablewrap > table tbody td[data-label*="Monto"],
  .orders-tablewrap > table tbody td[data-label*="Pagado"],
  .orders-tablewrap > table tbody td[data-label*="Saldo"],
  .orders-tablewrap > table tbody td[data-label*="Total"],
  .orders-tablewrap > table tbody td[data-label*="Precio"],
  .orders-tablewrap > table tbody td[data-label*="Remuneraci"] {
    text-align: right !important;
  }

  /* MODAL: forzar que se vea centrado en viewport (no al fondo del scroll).
     En mobile la página puede tener mucho scroll y el modal aparecía abajo
     del contenido. Position:fixed + flex centering del backdrop garantiza
     que aparezca siempre en el centro de la pantalla. */
  .modal-backdrop.is-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 12px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .modal-backdrop.is-open .modal {
    margin: 8px auto !important;
    max-width: calc(100vw - 24px) !important;
    width: 100% !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
    position: relative !important;
    top: auto !important;
    transform: none !important;
  }

  /* ── TOPBAR USUARIO arriba a la derecha (como en PC) ─────────────────── */
  /* El bloque por defecto ponía el usuario en una fila aparte abajo.
     Ahora va en la misma fila del ☰/título, alineado a la derecha. */
  .page-orders .topbar .right,
  .page-admin-list .topbar .right {
    order: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  .page-orders .topbar-user,
  .page-admin-list .topbar-user {
    width: auto !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  .page-orders .topbar-user__meta,
  .page-admin-list .topbar-user__meta {
    align-items: flex-end !important;
    max-width: 50vw !important;
  }
  .page-orders .topbar-user__meta strong,
  .page-admin-list .topbar-user__meta strong {
    text-align: right !important;
    font-size: 11.5px !important;
    max-width: 50vw !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .page-orders .topbar-user__meta span,
  .page-admin-list .topbar-user__meta span {
    text-align: right !important;
    font-size: 10px !important;
    opacity: .75 !important;
    max-width: 50vw !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Botón Salir compacto al lado del usuario. */
  .page-orders .topbar .right #logoutBtnTop,
  .page-admin-list .topbar .right #logoutBtnTop {
    padding: 6px 10px !important;
    font-size: 11px !important;
    min-height: 32px !important;
    white-space: nowrap !important;
  }
  /* KPIs (O/C, O/S, Total): van en una fila aparte porque no caben con el usuario. */
  .page-orders .topbar,
  .page-admin-list .topbar {
    flex-wrap: wrap !important;
  }

  /* Asegurar que el .mcards (si por alguna razón un layout.js viejo cacheado
     lo genera) sea visible — no oculta nada del flujo. */
  .mcards {
    display: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   ACCESIBILIDAD: respetar preferencia de "reducir movimiento"
   Si el usuario tiene activado prefers-reduced-motion (Windows: "Mostrar
   animaciones en Windows" OFF), desactivamos todas las animaciones.
   ═════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   Frame motion — micro-animaciones (CSS puro, GPU: solo opacity/transform).
   Anadido 2026-06-12. El bloque prefers-reduced-motion de arriba las
   neutraliza para quien lo pida. Sin dependencias, sin reflow.
   ========================================================================= */
@keyframes mdcBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mdcModalPopIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes mdcSectionIn  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.modal-backdrop.is-open { animation: mdcBackdropIn .18s ease-out both; }
.modal-backdrop.is-open .modal { animation: mdcModalPopIn .24s cubic-bezier(.22,1,.36,1) both; }
.modal-backdrop.is-open .modal-section { animation: mdcSectionIn .26s ease-out both; }
.modal-backdrop.is-open .modal-section:nth-child(2) { animation-delay: .03s; }
.modal-backdrop.is-open .modal-section:nth-child(3) { animation-delay: .06s; }
.modal-backdrop.is-open .modal-section:nth-child(4) { animation-delay: .09s; }
.modal-backdrop.is-open .modal-section:nth-child(n+5) { animation-delay: .12s; }

.btn:active, .btn-icon:active, a.pill:active, .pager-btn:active, .gen-ord:active { transform: scale(.97); }
.btn, .btn-icon, a.pill, .pager-btn { transition: transform .08s ease, background-color .15s ease, border-color .15s ease, color .15s ease; }
.row-clickable { transition: background-color .15s ease; }

/* Login por-entidad — entrada en cascada (CSS puro, GPU, sin GSAP). Scopeado a
   :not(.page-hub) para no pisar la animación GSAP del hub. La tarjeta ya entra
   con .login-anim-in; acá sumo barra superior, features y módulos escalonados. */
@keyframes mdcLoginUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.page-login:not(.page-hub) .login-top { animation: mdcLoginUp .6s ease-out both; }
.page-login:not(.page-hub) .login-side__features li { animation: mdcLoginUp .55s ease-out both; }
.page-login:not(.page-hub) .login-side__features li:nth-child(1) { animation-delay: .18s; }
.page-login:not(.page-hub) .login-side__features li:nth-child(2) { animation-delay: .30s; }
.page-login:not(.page-hub) .login-side__features li:nth-child(n+3) { animation-delay: .42s; }
.page-login:not(.page-hub) .login-side__module { animation: mdcLoginUp .55s ease-out both; }
.page-login:not(.page-hub) .login-side__module:nth-child(1) { animation-delay: .26s; }
.page-login:not(.page-hub) .login-side__module:nth-child(2) { animation-delay: .36s; }
.page-login:not(.page-hub) .login-side__module:nth-child(n+3) { animation-delay: .46s; }
/* Micro-interacciones del login (hover) — sin reflow. */
.page-login:not(.page-hub) .login-side__module { transition: transform .2s ease; }
.page-login:not(.page-hub) .login-side__module:hover { transform: translateX(3px); }

/* ═══════════════════════════════════════════════════════════════════════════
   PULIDO DE MOTION GLOBAL (Emil) — curvas fuertes + entrada de página + presión.
   Regla de oro: el estado por defecto SIEMPRE es visible; la animación es realce.
   Respeta prefers-reduced-motion. Sin `forwards`/`both` → si algo no corre, se ve.
   ═══════════════════════════════════════════════════════════════════════════ */

/* (1) Entrada de página ESCALONADA (cascada) — consistente con el reveal del hub
   (que lo hace con GSAP). Cada sección del contenido entra una tras otra con fade +
   subida. `backwards` mantiene el estado inicial durante el delay. Reduced-motion lo
   apaga (entonces todo visible al instante). */
@keyframes pageContentIn { from { opacity: 0; transform: translateY(14px); } }
.app .main .container > * { animation: pageContentIn .5s var(--ease-out) backwards; }
.app .main .container > *:nth-child(1) { animation-delay: .04s; }
.app .main .container > *:nth-child(2) { animation-delay: .10s; }
.app .main .container > *:nth-child(3) { animation-delay: .17s; }
.app .main .container > *:nth-child(4) { animation-delay: .24s; }
.app .main .container > *:nth-child(5) { animation-delay: .31s; }
.app .main .container > *:nth-child(n+6) { animation-delay: .38s; }

/* (2) Curva fuerte de Emil en TODOS los hovers/transiciones de elementos
   interactivos, sin reescribir cada regla: solo el timing-function (no cambia qué
   ni cuánto animan — solo el "cómo", más intencional y responsivo). */
/* Cobertura CASI UNIVERSAL: como solo cambia el timing-function de las TRANSICIONES
   (no toca @keyframes → spinners siguen linear), es seguro aplicarlo amplio. */
a, button, summary, label, input, select, textarea,
[role="button"], [data-tooltip], [class*="btn"], [class*="chip"], [class*="pill"],
.nav a, .card, .home-kpi, .home-sub, .admin-link-card, .row-clickable,
.tab-btn, .badge, .password-toggle, .toggle-field, .checkbox-row, .cols-box > summary {
  transition-timing-function: var(--ease-out) !important;
}

/* (3) Feedback de presión universal: elementos presionables se hunden un toque al
   click. Sutil pero hace que la UI "responda" al tacto. */
.btn-icon:active, .pill:active, .dash-chip:active, .nav a:active, .home-kpi:active,
.admin-link-card:active, .tab-btn:active, .password-toggle:active, [role="button"]:active,
.cols-box > summary:active { transform: scale(.96); }

/* (4) Hover de chips/KPIs un poco más vivo (elevación + borde), curva fuerte. */
@media (hover: hover) and (pointer: fine) {
  .dash-chip:hover, .home-kpi:hover { box-shadow: 0 8px 22px rgba(0,0,0,.28); }
}

/* (5) Reduced-motion: apaga la entrada de página y cualquier presión por escala. */
@media (prefers-reduced-motion: reduce) {
  .app .main .container > * { animation: none !important; }
  .btn-icon:active, .pill:active, .dash-chip:active, .nav a:active, .home-kpi:active,
  .admin-link-card:active, .tab-btn:active, .password-toggle:active, [role="button"]:active,
  .cols-box > summary:active { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHAT INTERNO 1-a-1 (estilo WhatsApp) — globos + palomitas + burbuja flotante.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ícono SVG de Chat en el sidebar (alternativa al <img> de los otros módulos). */
.badge .badge-icon-svg { display: inline-flex; align-items: center; justify-content: center; }
.badge .badge-icon-svg svg { width: 24px; height: 24px; }

/* Layout de dos paneles: lista de conversaciones + hilo. */
.chat-layout {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 14px;
  height: calc(100vh - 215px);
  height: calc(100dvh - 215px);
  min-height: 440px;
  max-height: 860px;
}
.chat-pane {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Lista de conversaciones ─────────────────────────────────────────────── */
.chat-list__head { padding: 12px; border-bottom: 1px solid rgba(173, 216, 255, .08); }
.chat-search { width: 100%; }
.chat-conv { flex: 1; overflow-y: auto; min-height: 0; }
.chat-conv__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; padding: 10px 12px; color: inherit;
  background: transparent; border: 0;
  border-bottom: 1px solid rgba(173, 216, 255, .06);
  cursor: pointer; transition: background-color .15s var(--ease-out);
}
.chat-conv__item:hover { background: rgba(0, 220, 255, .06); }
.chat-conv__item.is-active { background: rgba(0, 220, 255, .12); }
/* Resaltado al arrastrar un archivo encima de una conversación de la lista. */
.chat-conv__item.is-dragtarget { background: rgba(0, 220, 255, .18); outline: 1px dashed rgba(125, 211, 252, .6); outline-offset: -3px; }
.chat-avatar {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: #cdeeff;
  background: linear-gradient(135deg, rgba(125, 211, 252, .28), rgba(125, 211, 252, .08));
  border: 1px solid rgba(125, 211, 252, .3);
}
.chat-conv__body { flex: 1; min-width: 0; }
.chat-conv__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-conv__name { font-weight: 700; color: #eaf2ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-conv__time { flex: 0 0 auto; font-size: 11px; color: var(--muted); }
.chat-conv__last {
  font-size: 12.5px; color: var(--muted); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 4px;
}
.chat-conv__badge {
  flex: 0 0 auto; background: #16b364; color: #fff; font-size: 11px; font-weight: 800;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
.chat-empty { padding: 24px 16px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* ── Hilo ─────────────────────────────────────────────────────────────────── */
.chat-pane--thread { position: relative; }
.chat-placeholder {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--muted); text-align: center; padding: 20px;
}
/* Sin esta regla, .chat-placeholder{display:flex} pisa al atributo hidden del JS y
   el placeholder queda visible (estirado por flex:1) incluso con un hilo abierto. */
.chat-placeholder[hidden] { display: none; }
.chat-placeholder__ic { font-size: 28px; opacity: .55; }
.chat-placeholder p { max-width: 260px; font-size: 12.5px; line-height: 1.45; margin: 0; }
.chat-thread { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }
.chat-thread[hidden] { display: none; }
/* Zona de "soltá el archivo" al arrastrar uno encima de la conversación. */
.chat-thread.is-dragover::after {
  content: "📎  Soltá el archivo para enviarlo";
  position: absolute; inset: 8px; z-index: 6; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #cdeeff; text-align: center;
  background: rgba(11, 110, 138, .32); backdrop-filter: blur(2px);
  border: 2px dashed rgba(125, 211, 252, .65); border-radius: 12px;
}
.chat-thread__head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid rgba(173, 216, 255, .08);
}
.chat-back { display: none; }
.chat-close { margin-left: auto; flex: 0 0 auto; }   /* cerrar el hilo (escritorio) */
.chat-peer { min-width: 0; }
.chat-peer__name { font-weight: 800; color: #eaf2ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-peer__sub { font-size: 12px; color: var(--muted); }
.chat-peer__sub.is-online { color: #53d08a; }
.chat-peer__sub.is-typing { color: #7dd3fc; font-style: italic; }

/* Reacciones */
.chat-b__react { color: #ffd166; }
.chat-b__reacts { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.chat-react {
  display: inline-flex; align-items: center; gap: 2px; font-size: 13px; line-height: 1;
  padding: 1px 5px; border-radius: 10px; background: rgba(2, 6, 12, .45); border: 1px solid rgba(173, 216, 255, .14);
}
.chat-react__n { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chat-react-picker {
  position: fixed; z-index: var(--z-popover, 10500); display: none; gap: 2px; padding: 5px 7px;
  background: linear-gradient(160deg, rgba(13, 53, 77, .98), rgba(7, 22, 38, .98));
  border: 1px solid rgba(140, 210, 255, .35); border-radius: 22px; box-shadow: 0 14px 32px rgba(0, 0, 0, .45);
}
.chat-react-picker.is-open { display: inline-flex; }
.chat-react-picker button {
  background: none; border: 0; cursor: pointer; font-size: 20px; line-height: 1; padding: 3px;
  border-radius: 50%; transition: transform .12s var(--ease-out);
}
.chat-react-picker button:hover { transform: scale(1.25); }

/* Selector de emojis para escribir (grilla, en el composer) */
.chat-emoji-btn { font-size: 18px; }
.chat-emoji-panel {
  position: fixed; z-index: var(--z-popover, 10500); display: none;
  width: 300px; max-height: 230px; overflow-y: auto; overflow-x: hidden; padding: 8px;
  scrollbar-gutter: stable;   /* reserva el espacio del scroll → no tapa la última columna */
  grid-template-columns: repeat(7, 1fr); gap: 2px; box-sizing: border-box;
  background: linear-gradient(160deg, rgba(13, 53, 77, .98), rgba(7, 22, 38, .98));
  border: 1px solid rgba(140, 210, 255, .35); border-radius: 12px; box-shadow: 0 14px 32px rgba(0, 0, 0, .45);
}
.chat-emoji-panel.is-open { display: grid; }
.chat-emoji-panel button {
  background: none; border: 0; cursor: pointer; font-size: 19px; line-height: 1; padding: 4px 2px; border-radius: 6px;
  min-width: 0; width: 100%;
}
.chat-emoji-panel button:hover { background: rgba(125, 211, 252, .15); }

/* Búsqueda en la conversación */
.chat-searchbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 7;
  background: linear-gradient(180deg, rgba(7, 22, 38, .99), rgba(7, 22, 38, .96));
  border-bottom: 1px solid rgba(125, 211, 252, .2); padding: 8px 12px;
}
.chat-searchbar[hidden] { display: none; }
.chat-searchbar__top { display: flex; align-items: center; gap: 8px; }
.chat-searchbar__top .chat-search { flex: 1; }
.chat-search-results { max-height: 220px; overflow-y: auto; margin-top: 6px; }
.chat-search-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  text-align: left; padding: 7px 8px; background: transparent; border: 0; cursor: pointer; color: inherit;
  border-bottom: 1px solid rgba(173, 216, 255, .07);
}
.chat-search-item:hover { background: rgba(0, 220, 255, .07); }
.chat-search-item__txt { color: #cde3ff; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-search-item__time { color: var(--muted); font-size: 11px; flex: 0 0 auto; }
.chat-b.is-highlight { animation: chatHighlight 1.8s ease-out; }
@keyframes chatHighlight { 0%, 40% { box-shadow: 0 0 0 2px rgba(125, 211, 252, .7); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* overflow-x: hidden EXPLÍCITO: con solo overflow-y:auto el navegador vuelve el eje X
   a "auto" y la barra de acciones (✎/✕), al asomar en hover, dispara un scroll
   horizontal y recorta los íconos. Fijándolo en hidden, el scroll es solo vertical
   y los íconos (que van hacia el centro, zona libre) se ven completos. */
.chat-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; padding: 16px; display: flex; flex-direction: column; }
.chat-msgs { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.chat-loadmore {
  align-self: center; margin: 0 0 12px; padding: 5px 14px; font-size: 12px;
  color: #cde3ff; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(173, 216, 255, .14); border-radius: 12px; cursor: pointer;
}
.chat-loadmore:hover { background: rgba(0, 220, 255, .1); }
.chat-daysep { text-align: center; margin: 12px 0 6px; }
.chat-daysep span {
  font-size: 11px; color: var(--muted);
  background: rgba(255, 255, 255, .05); padding: 3px 12px; border-radius: 10px;
}

/* Globos */
.chat-b {
  max-width: 74%; padding: 7px 11px 5px; border-radius: 14px; position: relative;
  overflow-wrap: anywhere; animation: chatPop .18s var(--ease-out);
}
@keyframes chatPop { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.chat-b--in {
  align-self: flex-start; background: #1b2740;
  border: 1px solid rgba(173, 216, 255, .10); border-bottom-left-radius: 5px;
}
.chat-b--out {
  align-self: flex-end; background: linear-gradient(135deg, #0e7490, #0b5e74);
  border: 1px solid rgba(125, 211, 252, .25); border-bottom-right-radius: 5px;
}
.chat-b__txt { color: #eaf2ff; font-size: 14px; line-height: 1.4; white-space: pre-wrap; }

/* Adjuntos en el globo */
.chat-attach { flex: 0 0 auto; font-size: 18px; }
.chat-att { display: block; margin-bottom: 4px; text-decoration: none; }
.chat-att--img img {
  display: block; max-width: 170px; max-height: 190px; width: auto; height: auto;
  border-radius: 10px; border: 1px solid rgba(173, 216, 255, .12);
}
.chat-att--file {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-width: 180px; max-width: 280px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(173, 216, 255, .14); border-radius: 10px;
  transition: background-color .15s var(--ease-out);
}
.chat-att--file:hover { background: rgba(0, 220, 255, .1); }
.chat-att__ic { font-size: 22px; flex: 0 0 auto; }
.chat-att__info { display: flex; flex-direction: column; min-width: 0; }
.chat-att__name { color: #eaf2ff; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-att__size { color: var(--muted); font-size: 11px; }

/* Vista previa de archivos elegidos/arrastrados (arriba del composer), antes de enviar.
   Fila de tarjetas (una por archivo), con scroll horizontal si hay muchas. */
.chat-filepreview {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto;
  padding: 8px 12px; margin: 0 12px; border-radius: 8px 8px 0 0;
  background: rgba(125, 211, 252, .1); border: 1px solid rgba(125, 211, 252, .25); border-bottom: 0;
}
.chat-fp__item {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto; max-width: 200px;
  padding: 5px 8px; border-radius: 8px; position: relative; overflow: hidden;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(173, 216, 255, .12);
}
.chat-fp__img { width: 40px; height: 40px; object-fit: cover; border-radius: 5px; flex: 0 0 auto; }
.chat-fp__ic { font-size: 24px; flex: 0 0 auto; }
.chat-fp__meta { display: flex; flex-direction: column; min-width: 0; }
.chat-fp__name { color: #eaf2ff; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.chat-fp__size { color: var(--muted); font-size: 10.5px; }
.chat-fp__x {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0, 0, 0, .4); color: #ffd0d8; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
}
.chat-fp__x:hover { background: rgba(160, 30, 50, .7); }
.chat-fp__badge { flex: 0 0 auto; font-size: 13px; line-height: 1; }
.chat-fp__pct { font-size: 11px; color: #9fd9ff; font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; flex: 0 0 auto; }
.chat-fp__ok { color: #53d08a; }
.chat-fp__err { color: #ffb04a; }
/* Barra de progreso de subida (en el borde inferior de la tarjeta). */
.chat-fp__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #53bdeb; transition: width .12s linear; }
.chat-fp__item.is-error { border-color: rgba(255, 140, 90, .4); }
.chat-fp__item.is-error .chat-fp__size { color: #ffb04a; }
.chat-b__meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 2px; }
.chat-b__time { font-size: 10.5px; color: rgba(226, 240, 255, .6); }
.chat-tick { display: inline-flex; align-items: center; }
.chat-tick .chk { width: 16px; height: 11px; fill: none; stroke: rgba(226, 240, 255, .6); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-tick.is-read .chk { stroke: #53bdeb; }   /* azul "leído" estilo WhatsApp */

/* Acciones del globo propio (✎ editar / ✕ borrar): aparecen al pasar el mouse. */
/* Al costado del globo (hacia el centro del chat): nunca lo tapa el composer ni
   se corta contra el borde derecho, en cualquier posición incluido el último. */
/* Al costado del globo (hacia el centro), centradas verticalmente. */
.chat-b__actions {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: inline-flex; gap: 4px; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none;
  /* Sin retardo: solo se ve en el globo bajo el cursor, nunca en varios a la vez. */
  transition: opacity .12s var(--ease-out), visibility 0s linear .12s;
}
/* El toolbar va PEGADO al globo (padding, no margin): el hueco queda dentro de su
   área de hover, así no hay zona muerta y no necesita retardo para alcanzar los botones. */
.chat-b--out .chat-b__actions { right: 100%; padding-right: 6px; }  /* mío (derecha): toolbar a la izquierda */
.chat-b--in  .chat-b__actions { left: 100%;  padding-left: 6px; }   /* ajeno (izquierda): toolbar a la derecha */
.chat-b:hover .chat-b__actions, .chat-b__actions:hover {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .12s var(--ease-out), visibility 0s;          /* aparece ya */
}
@media (hover: none) { .chat-b__actions { opacity: 1; visibility: visible; pointer-events: auto; } }  /* touch: siempre visible */

/* Tooltip de los íconos HACIA ARRIBA (el default sale abajo y se recortaba/desbordaba
   contra el composer). Mismo patrón que #refreshReport. */
.chat-b__edit[data-tooltip]::after,
.chat-b__del[data-tooltip]::after,
.chat-b__react[data-tooltip]::after,
.chat-attach[data-tooltip]::after,
.chat-emoji-btn[data-tooltip]::after {
  top: auto; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px);
}
.chat-b__edit[data-tooltip]::before,
.chat-b__del[data-tooltip]::before,
.chat-b__react[data-tooltip]::before,
.chat-attach[data-tooltip]::before,
.chat-emoji-btn[data-tooltip]::before {
  top: auto; bottom: calc(100% + 4px); transform: translateX(-50%) translateY(4px);
  border-bottom-color: transparent; border-top-color: rgba(13, 53, 77, .98);
  filter: drop-shadow(0 1px 0 rgba(140, 210, 255, .35));
}
/* 📎 y 😀 están al borde izquierdo: el tooltip se ancla a la IZQUIERDA y se extiende
   a la derecha (si no, centrado se corta contra el borde del panel). La flechita queda
   centrada en el botón. */
.chat-attach[data-tooltip]::after,
.chat-emoji-btn[data-tooltip]::after { left: 0; right: auto; transform: translateY(4px); }
.chat-attach[data-tooltip]:hover::after,
.chat-emoji-btn[data-tooltip]:hover::after { transform: translateY(0); }
/* Mientras el picker de reacción está abierto, ocultar el tooltip del botón (no asoma detrás). */
.chat-b__react.picking[data-tooltip]::after,
.chat-b__react.picking[data-tooltip]::before { display: none !important; }
.chat-b__react, .chat-b__edit, .chat-b__del {
  width: 22px; height: 22px; border: 0; background: none; cursor: pointer;
  border-radius: 50%; line-height: 1; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s var(--ease-out), background-color .12s var(--ease-out);
}
.chat-b__edit { color: #7dd3fc; }
.chat-b__del { color: #ff8aa0; }
.chat-b__react:hover, .chat-b__edit:hover, .chat-b__del:hover { background: rgba(255, 255, 255, .12); transform: scale(1.15); }
.chat-b--del { opacity: .85; }
.chat-b__deleted { font-style: italic; color: rgba(226, 240, 255, .55); }
.chat-b__edited { font-size: 9.5px; font-style: italic; color: rgba(226, 240, 255, .5); margin-right: 2px; }

/* Banner "Editando mensaje" arriba del composer. */
.chat-editbanner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 12px; margin: 0 12px; border-radius: 8px 8px 0 0; font-size: 12px; color: #cde3ff;
  background: rgba(125, 211, 252, .12); border: 1px solid rgba(125, 211, 252, .25); border-bottom: 0;
}
.chat-editbanner[hidden] { display: none; }
.chat-editbanner__x { background: none; border: 0; color: #ff8aa0; cursor: pointer; font-size: 12px; }

/* Confirmación on-theme (reemplaza al confirm() nativo). Reusa .modal-backdrop/.modal. */
.chat-confirm { align-items: center; justify-content: center; }
.chat-confirm .modal { max-width: 360px; text-align: center; padding: 22px; }
.chat-confirm__msg { color: #eaf2ff; font-size: 15px; line-height: 1.45; margin: 4px 0 20px; }
.chat-confirm__actions { display: flex; gap: 10px; justify-content: center; }
.chat-confirm__stack { display: flex; flex-direction: column; gap: 8px; }
.chat-confirm__stack .btn { width: 100%; }
.chat-confirm__yes {
  background: linear-gradient(135deg, #d24b5a, #a32330);
  border: 1px solid rgba(255, 130, 150, .4); color: #fff;
}
.chat-confirm__yes:hover { filter: brightness(1.08); }

/* Composer */
.chat-composer { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid rgba(173, 216, 255, .08); }
.chat-input { flex: 1; resize: none; min-height: 42px; max-height: 140px; line-height: 1.4; }
.chat-send {
  flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
}

/* Aviso flotante (errores de envío) */
.chat-flash {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #3a1d24; border: 1px solid rgba(255, 120, 120, .4); color: #ffd9d9;
  padding: 10px 16px; border-radius: 10px; opacity: 0; pointer-events: none;
  z-index: var(--z-banner, 99999); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.chat-flash.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Burbuja flotante (launcher global) ──────────────────────────────────── */
.chat-fab {
  position: fixed; right: 22px; bottom: 22px; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  color: #eaf6ff; background: linear-gradient(135deg, #0ea5b7, #0b6e8a);
  border: 1px solid rgba(125, 211, 252, .35); box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
  z-index: var(--z-overlay, 10000);
  /* Bastante transparente en reposo para leer el contenido de abajo (p. ej. la
     fila TOTAL GENERAL del reporte) a través de ella; opaca al pasar el mouse. */
  opacity: .32;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), opacity .18s var(--ease-out);
}
.chat-fab:hover, .chat-fab:focus-visible { opacity: 1; transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 32px rgba(0, 0, 0, .5); }
.chat-fab:active { transform: scale(.95); }
.chat-fab[hidden] { display: none !important; }
.chat-fab svg { width: 26px; height: 26px; }
.chat-fab__badge {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: #ff3b5c; color: #fff; font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; border: 2px solid #050816;
}
.chat-fab__badge[hidden] { display: none; }
/* Pequeño respiro al final del reporte (sin banda vacía grande). El despeje de la
   burbuja de chat lo aporta su transparencia: se lee el TOTAL GENERAL a través. */
.report-tablewrap { padding-bottom: 14px; }

/* ── Responsive: en móvil se ve un panel a la vez (lista ↔ hilo) ─────────── */
@media (max-width: 820px) {
  .chat-layout { grid-template-columns: 1fr; height: calc(100vh - 165px); height: calc(100dvh - 165px); }
  .chat-pane--thread { display: none; }
  .chat-layout.is-thread-open .chat-pane--list { display: none; }
  .chat-layout.is-thread-open .chat-pane--thread { display: flex; }
  .chat-back { display: inline-flex; }
  .chat-close { display: none; }   /* en móvil cierra el ← */
  .chat-fab { right: 16px; bottom: 84px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   SALUDO DE CUMPLEAÑOS (modal festivo con confeti). Coherente con el dark del
   sistema; acento dorado (#ffd166). Respeta prefers-reduced-motion.
   ═════════════════════════════════════════════════════════════════════════ */
.bday-backdrop{
  position:fixed; inset:0; z-index:1200;
  display:grid; place-items:center; padding:20px;
  background:rgba(4,8,20,.66); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .28s ease;
}
.bday-backdrop.is-open{ opacity:1; }
.bday-card{
  position:relative; overflow:hidden;
  width:min(460px,94vw); padding:34px 30px 28px;
  text-align:center; border-radius:20px;
  background:linear-gradient(165deg, rgba(18,28,48,.98), rgba(9,15,28,.98));
  border:1px solid rgba(255,209,102,.32);
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 4px rgba(255,209,102,.06);
  transform:translateY(16px) scale(.9); opacity:0;
  transition:transform .42s cubic-bezier(.16,1,.3,1), opacity .3s ease;   /* ease-out suave, sin rebote */
  z-index:1;
}
.bday-backdrop.is-open .bday-card{ transform:none; opacity:1; }
.bday-emoji{ font-size:52px; line-height:1; margin-bottom:8px; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.bday-title{ font-size:20px; font-weight:800; color:#eaf2ff; margin:0 0 12px; letter-spacing:.2px; line-height:1.3; text-wrap:balance; }
.bday-title span{ color:#ffd166; }
.bday-msg{ font-size:14px; line-height:1.6; color:#c8d8ee; margin:0 0 10px; text-wrap:pretty; }
.bday-sub{ font-size:13.5px; line-height:1.55; color:#9fd9ff; margin:0 0 20px; font-weight:600; }
/* Bloque del signo zodiacal (rasgos positivos + frase motivadora). */
.bday-sign{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; margin:0 0 18px; padding:12px 16px; border-radius:14px; background:rgba(255,209,102,.07); border:1px solid rgba(255,209,102,.22); }
.bday-sign__head{ display:flex; align-items:center; gap:8px; }
.bday-sign__emoji{ font-size:20px; line-height:1; color:#ffd166; }   /* símbolo en dorado, estilo texto (sin marco) */
.bday-sign__name{ font-size:14px; font-weight:800; color:#ffd166; letter-spacing:.3px; }
.bday-sign__txt{ font-size:13px; line-height:1.55; color:#dce8f7; }
.bday-ok{ min-width:150px; }
/* Confeti: 42 piezas repartidas por el ancho, cayendo con giro y retardo escalonado. */
/* Confeti en <canvas> a pantalla completa, por delante de la tarjeta. */
.bday-confetti{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }
@media (prefers-reduced-motion: reduce){
  .bday-confetti{ display:none; }
  .bday-card{ transition:opacity .2s ease; transform:none; }
}