/* Sistema de Gestión de Diligencias — hoja de estilos base
   Paleta derivada de la identidad de Repuestos Simón Bolívar. */

:root{
  /* Le dice al navegador que la pagina soporta ambos temas, para que sus
     controles nativos (checkboxes, inputs de fecha, scrollbar) tambien se
     adapten en vez de forzar su propia heuristica de oscurecido. */
  color-scheme:light dark;

  --navy:#213393;
  --blue:#324FBE;
  --yellow:#FBC200;
  --brand-green:#44782A;
  --ink:#1B1F2A;
  --ink-soft:#4B5163;
  --paper:#FAFAFA;
  --mist:#F1F3F9;
  --card:#FFFFFF;
  --line:#E2E5EE;
  --line-soft:#EDEFF6;

  --st-pendiente:#F59E0B;
  --st-asignada:#0064F0;
  --st-proceso:#7C3AED;
  --st-finalizada:#16A34A;
  --st-cancelada:#DC2626;
  --st-reprogramada:#F59E0B;
  --st-alistado:#0D9488;

  /* Compra Express: rojo mas claro que --st-cancelada para no leerse
     como "cancelado". */
  --express-rgb:239 68 68;
  --express-fg:#7A1212;

  --font-display:'Manrope','Segoe UI Semibold','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','Cascadia Code',ui-monospace,SFMono-Regular,Menlo,monospace;

  --sidebar-w:264px;
  --radius:12px;
}

/* El tema sigue el sistema operativo/navegador del usuario. La marca
   (navy y amarillo del sidebar/botón primario) se queda fija aparte, ver
   los literales #213393 en .app-sidebar y .btn-primary:hover más abajo. */
@media (prefers-color-scheme: dark){
  :root{
    --navy:#7C90FF;--blue:#8FA6FF;--yellow:#FBC200;--brand-green:#6FBB49;
    --ink:#E8EAF3;--ink-soft:#AEB4C7;--paper:#11131A;--mist:#171A24;--card:#1B1F2B;
    --line:#2A2F3D;--line-soft:#232837;
    --st-pendiente:#FBBF24;--st-asignada:#5B9BFF;--st-proceso:#A78BFA;--st-finalizada:#34D399;--st-cancelada:#F87171;--st-reprogramada:#FBBF24;--st-alistado:#2DD4BF;
    --express-rgb:248 113 113;--express-fg:#FCA5A5;
  }
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}
.mono{font-family:var(--font-mono);}
::selection{background:var(--yellow);color:#1B1F2A;}

/* ---------- App shell ---------- */
.app-shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh;}

.app-sidebar{
  /* Navy fijo (no var(--navy)): la marca no cambia entre temas, a diferencia
     del resto de usos de --navy que sí se aclaran para contraste en modo oscuro. */
  background:#213393;
  border-right:3px solid var(--yellow);
  color:#fff;position:sticky;top:0;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;
}
.app-sidebar .brand{display:flex;flex-direction:row;align-items:center;text-align:left;gap:12px;padding:20px;border-bottom:1px solid rgba(255,255,255,.12);color:inherit;text-decoration:none;cursor:pointer;transition:opacity .15s;}
.app-sidebar .brand:hover{opacity:.85;}
.app-sidebar .brand .mark{
  width:36px;height:36px;border-radius:10px;overflow:hidden;flex:none;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.app-sidebar .brand .mark img{width:100%;height:100%;object-fit:cover;display:block;}
.app-sidebar .brand .txt{font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1.3;}
.app-sidebar .brand .txt small{display:block;font-weight:500;opacity:.65;font-size:12px;margin-top:2px;}

.app-sidebar nav{flex:1;padding-top:8px;}
.app-sidebar .grupo{margin-bottom:0;}
.app-sidebar .grupo-titulo{font-size:12px;opacity:.5;font-weight:600;padding:20px 20px 8px;margin:0;}
.app-sidebar a.nav-link{
  display:flex;align-items:center;gap:12px;padding:12px 20px;
  border-left:3px solid transparent;
  color:rgba(255,255,255,.8);font-weight:500;font-size:13.5px;
}
.app-sidebar a.nav-link i{width:20px;text-align:center;opacity:.85;flex:none;}
.app-sidebar a.nav-link:hover{background:rgba(255,255,255,.08);text-decoration:none;color:#fff;}
.app-sidebar a.nav-link.activo{background:rgba(255,255,255,.12);color:#fff;border-left-color:var(--yellow);font-weight:700;}
.app-sidebar a.nav-link.activo i{color:var(--yellow);}

.app-sidebar .usuario-box{
  margin:auto 20px 20px;padding:12px;border-radius:11px;background:rgba(255,255,255,.08);
  display:flex;align-items:center;gap:10px;
}
.app-sidebar .usuario-box .av{
  width:34px;height:34px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:13px;flex:none;
}
.app-sidebar .usuario-box .info{min-width:0;flex:1;}
.app-sidebar .usuario-box .nom{font-size:12.8px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app-sidebar .usuario-box .rol{font-size:10.8px;opacity:.65;text-transform:capitalize;}
.app-sidebar .usuario-box button{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;font-size:14px;padding:6px;}
.app-sidebar .usuario-box button:hover{color:#fff;}
.app-sidebar .sidebar-firma{text-align:center;font-size:10.5px;letter-spacing:.02em;color:rgba(255,255,255,.45);margin:14px 20px 20px;}

.app-main{min-width:0;}
.app-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 28px;border-bottom:3px solid #FBC200;background:var(--card);position:sticky;top:0;z-index:20;
}
.app-topbar .topbar-titulo{position:relative;padding-left:15px;}
.app-topbar .topbar-titulo:before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:4px;border-radius:3px;background:linear-gradient(180deg, var(--blue), var(--navy));}
.app-topbar h1{font-family:var(--font-display);font-weight:800;font-size:23px;margin:0;letter-spacing:-.015em;color:var(--navy);}
.app-topbar .miga{font-size:12.5px;color:var(--ink-soft);margin-top:3px;font-weight:600;}
.app-content{padding:26px 28px 60px;}

.btn-toggle-sidebar{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:7px 10px;color:var(--ink);}

/* Fuera del grid del layout en todos los tamaños: si esta regla quedara solo dentro
   del media query de abajo, en escritorio este div (sin position) se cuela como un
   tercer hijo del grid de 2 columnas y empuja .app-main fuera de la pantalla. */
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(10,12,20,.45);z-index:90;}
.sidebar-backdrop.abierto{display:block;}

@media (max-width:960px){
  .app-shell{grid-template-columns:1fr;}
  .app-sidebar{
    position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);z-index:100;
    transform:translateX(-100%);transition:transform .2s ease;
  }
  .app-sidebar.abierto{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.35);}
  .btn-toggle-sidebar{display:inline-flex;align-items:center;}
}

/* ---------- Cards / layout helpers ---------- */
.card{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 2px rgba(20,25,50,.03);}
.card-pad{padding:20px 22px;}
.grid{display:grid;gap:16px;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-5{grid-template-columns:repeat(5,1fr);}
.grid-6{grid-template-columns:repeat(6,1fr);}
.grid-7{grid-template-columns:repeat(7,1fr);}
@media (max-width:1100px){.grid-5,.grid-6,.grid-7{grid-template-columns:repeat(3,1fr);}.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:700px){.grid-2,.grid-3,.grid-5,.grid-4,.grid-6,.grid-7{grid-template-columns:1fr 1fr;}}

/* ---------- KPI tiles ---------- */
.kpi{border:1px solid var(--line);border-radius:11px;padding:14px 16px;background:var(--card);}
.kpi .n{font-family:var(--font-display);font-weight:800;font-size:24px;font-variant-numeric:tabular-nums;line-height:1.1;}
.kpi .l{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;margin-top:4px;}
.kpi.st-pendiente .n{color:var(--st-pendiente);}
.kpi.st-asignada .n{color:var(--st-asignada);}
.kpi.st-proceso .n{color:var(--st-proceso);}
.kpi.st-finalizada .n{color:var(--st-finalizada);}
.kpi.st-cancelada .n{color:var(--st-cancelada);}
.kpi.st-alistado .n{color:var(--st-alistado);}
.kpi.st-tiempo .n{color:var(--navy);}

/* ---------- Chips de estado ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;font-size:11.8px;font-weight:700;font-family:var(--font-display);color:#fff;white-space:nowrap;}
.chip.st-pendiente{background:var(--st-pendiente);}
.chip.st-asignada{background:var(--st-asignada);}
.chip.st-proceso{background:var(--st-proceso);}
.chip.st-finalizada{background:var(--st-finalizada);}
.chip.st-cancelada{background:var(--st-cancelada);}
.chip.st-alistado{background:var(--st-alistado);}
.chip.st-reprogramada{background:var(--st-reprogramada);}

/* ---------- Botones ---------- */
.btn{font-family:var(--font-display);font-weight:700;font-size:13.6px;border-radius:9px;padding:9px 16px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:filter .12s,background .12s;}
.btn:hover{filter:brightness(1.06);}
.btn:active{filter:brightness(.96);}
.btn-primary{background:var(--yellow);color:#213393;}
.btn-primary:hover{background:#213393;color:#fff;}
.btn-accent{background:var(--yellow);color:#1B1F2A;}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink-soft);}
.btn-ghost:hover{color:var(--ink);background:var(--mist);}
.btn-danger{background:var(--st-cancelada);color:#fff;}
.btn-sm{padding:6px 12px;font-size:12.4px;}
.btn:disabled{opacity:.55;cursor:not-allowed;}

/* ---------- Formularios ---------- */
.form-grupo{margin-bottom:16px;}
.form-grupo label{display:block;font-size:11.8px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.form-control, select.form-control, textarea.form-control{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:13.8px;
  background:var(--card);color:var(--ink);font-family:var(--font-body);
}
.form-control:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);}
textarea.form-control{resize:vertical;min-height:80px;}

/* La lista desplegable de un <select> la dibuja el sistema operativo, no el
   navegador — casi no se puede personalizar. Esto es lo que sí respetan la
   mayoría de navegadores: que las opciones usen la tipografía y los colores
   del tema (clave en modo oscuro, donde si no, se ve una lista blanca nativa
   que no combina con el resto de la pantalla). */
select.form-control option{
  background:var(--card);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:13.8px;
  padding:8px 12px;
}
select.form-control option:checked,
select.form-control option:hover{
  background:var(--mist);
}
.campo-error{color:var(--st-cancelada);font-size:12px;margin-top:5px;}

/* ---------- Formulario en secciones (ej. Nueva diligencia) ---------- */
.form-seccion{margin-bottom:30px;padding-bottom:26px;border-bottom:1px solid var(--line-soft);}
.form-seccion:last-of-type{border-bottom:none;padding-bottom:0;margin-bottom:24px;}
.form-seccion-titulo{
  display:flex;align-items:center;gap:10px;margin:0 0 18px;
  font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--navy);
}
.form-seccion-titulo i{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;
  background:color-mix(in srgb, var(--blue) 14%, transparent);color:var(--blue);font-size:12px;
}

/* ---------- Selector Sí/No tipo pastilla ---------- */
.radio-group{display:flex;gap:0;align-items:center;padding-top:2px;background:var(--mist);border:1px solid var(--line);border-radius:9px;padding:3px;width:fit-content;}
.radio-group label{
  display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink-soft);text-transform:none;
  padding:7px 18px;border-radius:7px;cursor:pointer;transition:background .15s,color .15s;
}
.radio-group input{position:absolute;opacity:0;pointer-events:none;}
.radio-group label:has(input:checked){background:var(--card);color:var(--navy);box-shadow:0 1px 3px rgba(20,25,50,.12);}

/* ---------- Bloque destacado de cobro ---------- */
.bloque-cobro{
  grid-column:1/-1;background:color-mix(in srgb, var(--yellow) 10%, var(--card));
  border:1px solid color-mix(in srgb, var(--yellow) 45%, var(--line));border-radius:10px;padding:16px 18px 4px;margin-bottom:4px;
}
.bloque-cobro-titulo{
  display:flex;align-items:center;gap:8px;margin:0 0 14px;font-family:var(--font-display);font-weight:800;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.03em;color:#8A6D00;
}
@media (prefers-color-scheme: dark){
  .bloque-cobro-titulo{color:var(--yellow);}
}
/* Distintivo para el tipo de solicitud "Compra Express". El pulso vive
   en la fila completa (ver tr.fila-compra-express); el chip queda fijo
   para no duplicar la animación. */
.chip-compra-express{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;
  color:var(--express-fg);
  background:rgb(var(--express-rgb) / 20%);
}

/* ---------- Tablas ---------- */
.tabla-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);}
table.tabla{border-collapse:collapse;width:100%;font-size:13.4px;min-width:640px;}
table.tabla thead th{
  text-align:left;background:var(--mist);color:var(--ink-soft);font-family:var(--font-display);font-weight:700;
  font-size:10.8px;text-transform:uppercase;letter-spacing:.06em;padding:11px 16px;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.tabla tbody td{padding:11px 16px;border-bottom:1px solid var(--line-soft);vertical-align:middle;}
table.tabla tbody tr:last-child td{border-bottom:none;}
table.tabla tbody tr:hover{background:var(--mist);}
.fila-clic{cursor:pointer;}

/* ---------- Filtros / toolbar ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;align-items:flex-end;}
.toolbar .form-control{width:auto;min-width:150px;}
.toolbar-titulo{
  display:flex;align-items:center;gap:8px;margin:0 0 14px;
  font-family:var(--font-display);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);
}
.toolbar-titulo i{color:var(--blue);}

/* Mismo ancho y alto para todos los campos y botones del filtro, para que la fila quede cuadrada. */
.toolbar .campo-icono{width:200px;}
.toolbar .campo-icono .form-control{width:100%;}
.toolbar .form-control, .toolbar select.form-control, .toolbar .btn{height:40px;box-sizing:border-box;}

/* ---------- Campo de fecha con etiqueta visible (Desde/Hasta) ---------- */
.campo-fecha{display:flex;flex-direction:column;gap:5px;}
.campo-fecha label{font-size:10.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;}

/* ---------- Select con ícono (ej. filtro de ciudad) ---------- */
.select-icono{position:relative;display:inline-flex;align-items:center;}
.select-icono > i:first-child{position:absolute;left:12px;color:var(--blue);font-size:12px;pointer-events:none;z-index:1;}
.select-icono select.form-control{
  padding-left:32px;padding-right:30px;appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:var(--card);cursor:pointer;
}
.select-icono .flecha{position:absolute;right:12px;color:var(--ink-soft);font-size:10px;pointer-events:none;}

/* ---------- Campo con ícono, para inputs y selects de filtros (más vistoso que texto plano) ---------- */
.campo-icono{position:relative;display:inline-flex;align-items:center;transition:transform .15s;}
.campo-icono:focus-within{transform:translateY(-1px);}
.campo-icono > i:first-child{position:absolute;left:12px;color:var(--blue);font-size:12px;pointer-events:none;z-index:1;}
.campo-icono input.form-control{padding-left:32px;}
.campo-icono select.form-control{
  padding-left:32px;padding-right:30px;appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:var(--card);cursor:pointer;
}
.campo-icono .flecha{position:absolute;right:12px;color:var(--ink-soft);font-size:10px;pointer-events:none;}

/* ---------- Skeleton loading ---------- */
.skeleton{background:linear-gradient(90deg,var(--line-soft) 25%,var(--line) 37%,var(--line-soft) 63%);background-size:400% 100%;animation:skeleton-wave 1.3s ease-in-out infinite;border-radius:6px;}
@keyframes skeleton-wave{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
.skeleton-line{height:13px;margin-bottom:8px;}
.skeleton-row{height:42px;border-radius:8px;margin-bottom:8px;}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none;}}

/* ---------- Toasts ---------- */
#toast-region{position:fixed;top:18px;right:18px;z-index:1000;display:flex;flex-direction:column;gap:10px;max-width:340px;}
.toast{
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:10px;
  padding:12px 16px;box-shadow:0 8px 24px rgba(15,20,40,.14);font-size:13.4px;color:var(--ink);
  display:flex;gap:10px;align-items:flex-start;animation:toast-in .18s ease-out;
}
.toast.exito{border-left-color:var(--st-finalizada);}
.toast.error{border-left-color:var(--st-cancelada);}
.toast.info{border-left-color:var(--blue);}
.toast i{margin-top:2px;}
.toast .cerrar{margin-left:auto;background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:13px;}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.toast{animation:none;}}

/* ---------- Modal ---------- */
.modal-backdrop-app{position:fixed;inset:0;background:rgba(10,12,20,.45);display:none;align-items:center;justify-content:center;z-index:500;padding:20px;}
.modal-backdrop-app.abierto{display:flex;}
.modal-app{background:var(--card);border-radius:16px;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(10,14,30,.25);animation:modal-in .16s ease-out;}
@keyframes modal-in{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:none;}}
.modal-app .modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line-soft);}
.modal-app .modal-header h3{font-family:var(--font-display);font-weight:800;font-size:16.5px;margin:0;}
.modal-app .modal-header button{background:none;border:none;font-size:16px;color:var(--ink-soft);cursor:pointer;}
.modal-app .modal-body{padding:20px 22px;}
.modal-app .modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--line-soft);}
@media (prefers-reduced-motion:reduce){.modal-app{animation:none;}}

/* ---------- Timeline (historial) ---------- */
.timeline{border-left:2px solid var(--line);margin-left:9px;padding-left:22px;display:flex;flex-direction:column;gap:18px;}
.timeline .item{position:relative;}
.timeline .item:before{content:'';position:absolute;left:-27.5px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--color-punto, var(--blue));border:2px solid var(--card);}
.timeline .item .t{font-family:var(--font-display);font-weight:700;font-size:13.5px;}
.timeline .item .m{font-size:12px;color:var(--ink-soft);margin-top:2px;}
.timeline .item .m .chip{font-size:10.5px;padding:1px 8px;vertical-align:middle;}

/* ---------- Tarjeta de asignación ---------- */
.asignacion-card{border:1.5px dashed var(--blue);border-radius:12px;padding:18px 20px;background:color-mix(in srgb, var(--blue) 6%, var(--card));}
.asignacion-card .tag{font-family:var(--font-mono);font-size:10.5px;color:var(--blue);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;display:block;}

/* ---------- Tracker de seguimiento BEX ---------- */
.bex-tracker{display:flex;align-items:flex-start;padding:8px 4px 2px;}
.bex-tracker .paso{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;}
.bex-tracker .paso .circulo{width:28px;height:28px;border-radius:50%;background:var(--st-cancelada);border:2px solid var(--st-cancelada);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;z-index:1;}
.bex-tracker .paso.hecho .circulo{background:var(--brand-green);border-color:var(--brand-green);color:#fff;}
.bex-tracker .paso .linea{position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--st-cancelada);z-index:0;}
.bex-tracker .paso:first-child .linea{display:none;}
.bex-tracker .paso.hecho .linea{background:var(--brand-green);}
.bex-tracker .paso .etiqueta{font-size:11.5px;font-weight:700;color:var(--st-cancelada);text-transform:uppercase;letter-spacing:.03em;margin-top:8px;}
.bex-tracker .paso.hecho .etiqueta{color:var(--brand-green);}
.bex-tracker .paso .fecha{font-size:11px;color:var(--ink-soft);margin-top:2px;}
.bex-tracker .paso .duracion{font-size:10.5px;color:var(--ink-soft);opacity:.75;margin-top:1px;}

/* ---------- Fila de pedido demorado (mismo estado hace mas de lo normal) ---------- */
.fila-demorada{background:color-mix(in srgb, var(--st-pendiente) 10%, transparent);}
table.tabla tbody tr.fila-demorada:hover{background:color-mix(in srgb, var(--st-pendiente) 18%, transparent);}

/* ---------- Fila de diligencia tipo "Compra Express" ----------
   El pulso va en el fondo de toda la fila (rango de opacidad bajo,
   6%-16%) para que no dañe la legibilidad de ningún texto de la fila,
   sea cual sea su color. Tiene prioridad sobre .fila-demorada si una
   fila cae en ambos casos. */
tr.fila-compra-express{animation:pulse-fila-compra-express 1.3s ease-in-out infinite;}
tr.fila-compra-express:hover{background:rgb(var(--express-rgb) / 38%) !important;}
@keyframes pulse-fila-compra-express{
  0%,100%{background-color:rgb(var(--express-rgb) / 8%);}
  50%{background-color:rgb(var(--express-rgb) / 34%);}
}
@media (prefers-reduced-motion: reduce){
  tr.fila-compra-express{animation:none;background:rgb(var(--express-rgb) / 14%);}
}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;background:#0b0e16;}
.login-wrap .video-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.login-wrap .video-velo{position:absolute;inset:0;z-index:1;background:linear-gradient(160deg, rgba(10,14,28,.82) 0%, rgba(10,14,28,.55) 45%, rgba(10,14,28,.82) 100%);}
.login-wrap .login-marca{position:absolute;top:36px;left:44px;z-index:2;display:flex;align-items:center;gap:12px;color:#fff;}
.login-wrap .login-marca .mark{width:44px;height:44px;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.35);}
.login-wrap .login-marca .mark img{width:100%;height:100%;object-fit:cover;display:block;}
.login-wrap .login-marca span{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.01em;text-shadow:0 1px 6px rgba(0,0,0,.5);}
.login-card{position:relative;z-index:2;width:100%;max-width:400px;background:rgba(20,24,38,.62);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:38px 34px;box-shadow:0 30px 80px rgba(0,0,0,.45);color:#fff;}
.login-card .mark{width:56px;height:56px;border-radius:14px;overflow:hidden;margin-bottom:18px;box-shadow:0 8px 22px rgba(0,0,0,.3);}
.login-card .mark img{width:100%;height:100%;object-fit:cover;display:block;}
.login-card h1{font-family:var(--font-display);font-weight:800;font-size:28px;margin:0 0 6px;letter-spacing:-.01em;color:#fff;}
.login-card p.sub{color:rgba(255,255,255,.68);font-size:13.6px;margin:0 0 26px;}
.login-card .btn{width:100%;justify-content:center;margin-top:6px;}
.login-card .form-grupo label{color:rgba(255,255,255,.75);}
.login-card .form-control{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;}
.login-card .form-control::placeholder{color:rgba(255,255,255,.4);}
.login-card .form-control:focus{border-color:var(--blue);background:rgba(255,255,255,.12);}
.login-card .enlace-alterno{display:block;text-align:center;margin-top:18px;font-size:13px;color:rgba(255,255,255,.68);}
.login-card .enlace-alterno a{color:#fff;font-weight:700;}
@media (max-width:560px){.login-wrap .login-marca{display:none;}}
.alerta-login{background:color-mix(in srgb, var(--st-cancelada) 10%, var(--card));border:1px solid color-mix(in srgb, var(--st-cancelada) 35%, var(--line));color:var(--st-cancelada);border-radius:9px;padding:10px 13px;font-size:13px;margin-bottom:16px;}
.login-wrap .login-firma{position:absolute;bottom:16px;left:0;right:0;z-index:2;text-align:center;font-size:11.5px;letter-spacing:.02em;color:rgba(255,255,255,.55);}

/* ---------- Mostrar/ocultar contraseña ---------- */
.campo-password{position:relative;}
.campo-password .form-control{padding-right:42px;}
.btn-toggle-password{position:absolute;top:50%;right:8px;transform:translateY(-50%);background:none;border:none;padding:6px;cursor:pointer;color:rgba(255,255,255,.5);font-size:14px;line-height:1;}
.btn-toggle-password:hover{color:#fff;}
.form-control:not(.login-card .form-control) + .btn-toggle-password,
.campo-password:not(.login-card .campo-password) .btn-toggle-password{color:var(--ink-soft);}
.campo-password:not(.login-card .campo-password) .btn-toggle-password:hover{color:var(--ink);}

/* ---------- Requisitos de seguridad de la contraseña ---------- */
.password-requisitos{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;}
.password-requisitos li{font-size:11.3px;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:6px;transition:color .15s;}
.password-requisitos li i{font-size:8px;}
.password-requisitos li.cumple{color:#7CD992;}

/* ---------- Pie de página de la app ---------- */
.app-footer{padding:18px 28px 22px;margin-top:12px;border-top:1px solid var(--line);text-align:center;font-size:11.5px;letter-spacing:.02em;color:var(--ink-soft);}

/* ---------- Utilidades ---------- */
.text-soft{color:var(--ink-soft);}
.text-center{text-align:center;}
.d-flex{display:flex;}
.gap-8{gap:8px;}
.gap-12{gap:12px;}
.align-center{align-items:center;}
.justify-between{justify-content:space-between;}
.mt-0{margin-top:0;}
.empty-state{padding:50px 20px;text-align:center;color:var(--ink-soft);}
.empty-state i{font-size:32px;opacity:.35;margin-bottom:12px;display:block;}

/* ---------- Autocompletar (terceros) ---------- */
.autocomplete-lista{
  display:none;position:absolute;top:100%;left:0;right:0;z-index:40;margin-top:4px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 28px rgba(15,20,40,.12);max-height:220px;overflow-y:auto;
}
.autocomplete-lista.abierta{display:block;}
.autocomplete-lista .item{padding:9px 14px;cursor:pointer;font-size:13.4px;border-bottom:1px solid var(--line-soft);}
.autocomplete-lista .item:last-child{border-bottom:none;}
.autocomplete-lista .item:hover, .autocomplete-lista .item.activo{background:var(--mist);}
.autocomplete-lista .item .nit{display:block;font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);margin-top:2px;}
.autocomplete-lista .vacio{padding:10px 14px;font-size:12.5px;color:var(--ink-soft);}