/* ═══════════════════════════════════════════════════════════════════════
   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{
  --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 cubic-bezier(.4,0,.2,1) !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;
}
.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;
}
/* 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 .user-chip__text,
.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 / userbox — */
.sidebar-userbox{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:0 0 auto;   /* nunca se encoge: queda fijo abajo */
}
.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,
.sidebar .sidebar-userbox { 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; }

/* — 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;
}


/* ═════════════════════════════════════════════════════════════════════════
   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 cubic-bezier(.4,0,.2,1),
              box-shadow 200ms cubic-bezier(.4,0,.2,1),
              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}

/* — 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); }

/* 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: 99999;
  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;
  background: rgba(10,17,33,.96);
  border-bottom: 1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(0,0,0,.18);
  vertical-align: middle;
  text-align: center !important; /* override del inline-style que pone el JS por columna */
}

/* 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 */
.row-clickable        { cursor: pointer; transition: background-color .15s ease; }
.row-clickable:hover  { background-color: rgba(0, 220, 255, .07); }

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:var(--muted);
  font-size:13px;
}
.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:12%;
  min-width:12%;
  max-width:12%;
  text-align:center;
  vertical-align:middle;
}
/* 2 = CODIGO */
.catalogo-siga-table th:nth-child(2),
.catalogo-siga-table td:nth-child(2){
  width:15%;
  min-width:15%;
  max-width:15%;
  text-align:center;
  vertical-align:middle;
}
/* 3 = DESCRIPCION */
.catalogo-siga-table th:nth-child(3),
.catalogo-siga-table td:nth-child(3){
  width:43%;
  min-width:43%;
  max-width:43%;
  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:12%;
  min-width:12%;
  max-width:12%;
  text-align:center;
  vertical-align:middle;
}
/* 5 = PRECIO UNITARIO */
.catalogo-siga-table th:nth-child(5),
.catalogo-siga-table td:nth-child(5){
  width:18%;
  min-width:18%;
  max-width:18%;
  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: all .15s ease;
}
.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-left: 3px solid var(--gold, #ffd166);
  border-radius: 4px;
  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;
  background:linear-gradient(180deg, #ffffff 0%, #cde3ff 85%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ── 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;
  background:linear-gradient(180deg, #ffffff 0%, #cde3ff 85%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.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:10000;
  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) — */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(2, 5, 9, .74);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}
.modal-backdrop.is-open { display: flex; }
/* 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;
  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;
}
.topbar-user__meta strong{
  font-size:11.5px;
  font-weight:700;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  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;
}

/* User chip generic (sidebar) */
.user-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid rgba(173,216,255,.12);
  border-radius:18px;
  background:linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:var(--shadow-soft);
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease;
}
a.user-chip:hover{
  border-color:rgba(56,142,247,.55);
  background:linear-gradient(145deg, rgba(56,142,247,.12), rgba(56,142,247,.05));
}
/* El user-chip está al fondo del sidebar: su tooltip aparece ARRIBA. */
.user-chip[data-tooltip]::after{
  top:auto;
  bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(4px);
}
.user-chip[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));
}
.user-chip[data-tooltip]:hover::after,
.user-chip[data-tooltip]:focus-visible::after,
.user-chip[data-tooltip]:hover::before,
.user-chip[data-tooltip]:focus-visible::before{
  transform:translateX(-50%) translateY(0);
}
.user-chip__avatar{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:900;
  background:linear-gradient(135deg, rgba(53,194,255,.28), rgba(66,214,179,.22));
  border:1px solid rgba(173,216,255,.18);
}
.user-chip__text{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.user-chip__text strong{
  font-size:13px;
  line-height:1.15;
}
.user-chip__text span{
  color:var(--muted);
  font-size:12px;
}

/* — Sidebar user-chip: ellipsis para no invadir el main — */
.sidebar .user-chip { min-width: 0; max-width: 100%; overflow: hidden; }
.sidebar .user-chip__text { min-width: 0; max-width: 100%; overflow: hidden; flex: 1 1 auto; }
.sidebar .user-chip__text strong,
.sidebar .user-chip__text span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* — 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; }

/* — Btn icon override (modal/kv) — versión styles_extra más sutil — */
.btn-icon {
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text, #c8dff0);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.btn-icon:hover {
  background: rgba(0,220,255,.07);
  border-color: rgba(0,220,255,.25);
}


/* ═════════════════════════════════════════════════════════════════════════
   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);
}

/* 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);
}
/* 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: cubic-bezier(.4, 0, .2, 1);
}
/* 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 cubic-bezier(.4,0,.2,1) 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 cubic-bezier(0.4, 0, 0.2, 1) !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 cubic-bezier(.4,0,.2,1) !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 cubic-bezier(.4,0,.2,1) !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;
}
.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: 11px !important;
  color: var(--muted) !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: 10500;
  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: 100000;
  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(173,216,255,.14);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  text-decoration: none;
  color: inherit;
  transition: transform .16s cubic-bezier(.4,0,.2,1),
              border-color .16s ease, box-shadow .16s ease;
}
.hub-card:hover {
  transform: translateY(-3px);
  border-color: rgba(125,211,252,.42);
  box-shadow: 0 24px 54px rgba(0,0,0,.4);
}
.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;
  }
}