/* ============================================================
   AsisTec — Panel (estilo SAGE: dark ERP profesional)
   Accent cyan · Space Grotesk + Inter · cards planas, bordes sutiles
   ============================================================ */
:root{
  color-scheme: dark;
  /* Paleta oscura original (ver panel.css de la raíz, 2026-08-09). La que se
     había quedado solo en local aclaraba el menú y el contenido; Reynaldo la
     rechazó: "el azul oscuro que le has puesto de fondo está bien, pero el menú
     y el contenido está muy claro... vuélvelo al tono azul oscuro tal cual la
     foto" (audio WhatsApp 2026-09-25). Fondo #08121F y menú #0B1A2E son los de
     su captura de referencia. */
  --bg:#08121F;
  --sidebar:#0B1A2E;
  --card:#0F2038;
  --card2:#152A48;
  --accent:#3FA9FF;
  --accent-h:#5CB8FF;
  --coral:#E6437A;
  --ok:#37D39B;
  --warn:#FFB84D;
  --danger:#FF5B7A;
  --border:#1D3557;
  --border2:#274169;
  --txt:#E9F1FB;
  --muted:#8FA3C0;
  --radius:12px;
  --radius-sm:8px;
  --sidebar-w:240px;
  --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-hd:'Space Grotesk',var(--font-ui);
  /* aliases usados por páginas antiguas */
  --navy-900:var(--bg); --navy-800:var(--sidebar); --navy-700:var(--card);
  --line:var(--border); --linea:var(--border); --cyan:var(--accent);
}

*,*::before,*::after{box-sizing:border-box}

html{ overflow-x:hidden }
body{
  margin:0;
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--txt);
  font-size:13.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  color-scheme:dark;   /* controles nativos (inputs, date pickers, scrollbars) en oscuro */
  overflow-x:hidden;   /* si algún elemento se pasa de ancho en el celular, que se
                          recorte — nunca que empuje la página entera y la corra
                          hacia un lado (reportado por Robert 2026-09-15, "en vivo"
                          se salía de la pantalla y todo quedaba movido a la izquierda) */
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-h)}
h1,h2,h3,h4{font-family:var(--font-hd);letter-spacing:-.3px}

/* ---------- Login ---------- */
.as-login-body{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(900px 500px at 50% -10%, #0e2030 0%, var(--bg) 62%);
}
.as-login-card{
  width:100%;max-width:400px;padding:38px 32px;border-radius:16px;
  background:var(--card);border:1px solid var(--border);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.as-login-logo{background:transparent;border-radius:12px;overflow:hidden;margin-bottom:20px;line-height:0}
.as-login-logo img{width:100%;height:auto;display:block}
.as-login-sub{color:var(--muted);font-size:.86rem;margin:6px 0 26px}
.as-login-foot{color:var(--muted);font-size:.75rem;text-align:center;margin:18px 0 0}

/* ---------- Marca ---------- */
.as-logo{display:flex;align-items:center;gap:10px;color:var(--txt);font-family:var(--font-hd);font-weight:700;font-size:1.1rem;letter-spacing:-.4px}
.as-logo:hover{color:var(--txt)}
.as-logo strong{color:var(--accent);font-weight:800}
.as-logo-lg{font-size:1.4rem;justify-content:flex-start}

/* ---------- Sidebar ---------- */
.as-sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);z-index:30;
  background:var(--sidebar);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:16px 0 10px;
}
.as-sidebar .as-logo{padding:0 18px 6px}
.as-sidebar .as-logo-brand{display:block;padding:0 14px 10px}
.as-logo-brand img{width:100%;height:auto;display:block;background:transparent;border-radius:10px}
.as-nav-buscar-wrap{position:relative;margin:0 14px 10px;flex:none}
.as-nav-buscar-wrap svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted);pointer-events:none}
.as-nav-buscar-wrap input{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;color:var(--txt);font-size:12.5px;padding:7px 10px 7px 30px;outline:none}
.as-nav-buscar-wrap input::placeholder{color:var(--muted)}
.as-nav-buscar-wrap input:focus{border-color:var(--accent)}
.as-sidebar nav{display:flex;flex-direction:column;gap:1px;margin-top:10px;flex:1;overflow-y:auto;overflow-x:hidden}
.as-nav-section{padding:0 18px;margin:16px 0 5px;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.3px}
/* Grupos plegables del sidebar: el encabezado abre/cierra sus módulos. */
.as-nav-toggle{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:9px 18px;margin:16px 0 2px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.1px;cursor:pointer;text-align:left}
.as-nav-toggle:hover{color:var(--accent)}
/* Icono propio del grupo E.V.A. del menú: cerebro con red de neuronas. */
/* Iconos del menú al estilo del cerebro de E.V.A.: cada uno con el color de su
   área y un brillo de ese mismo color (el color va en el atributo del SVG). */
.as-nav-ico{width:18px;height:18px;flex:none;filter:drop-shadow(0 0 3px currentColor)}
.as-nav-toggle .as-nav-ico{width:17px;height:17px}
.as-sidebar nav a svg.as-nav-ico{opacity:1}
.as-nav-ico-eva{width:20px;height:20px;filter:drop-shadow(0 0 4px rgba(0,229,255,.65))}
.as-nav-chev{display:inline-block;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .18s ease;margin-top:-2px}
.as-nav-toggle[aria-expanded="false"] .as-nav-chev{transform:rotate(-225deg);margin-top:2px}
.as-nav-group{display:none;flex-direction:column;gap:1px}
/* Ecosistema ABIERTO: que se note de un vistazo, SIN aclarar el panel.
   Reynaldo (WhatsApp 2026-09-25): "me gustaba el azul oscuro de antes, basta con
   la animación que le pusiste para diferenciarlos" — así que nada de fondos ni
   degradados: solo el título del grupo en color y un riel delgado a la
   izquierda que marca dónde empieza y dónde termina lo abierto. */
.as-nav-toggle[aria-expanded="true"]{color:var(--accent)}
.as-nav-group.abierto{display:flex;position:relative;padding-bottom:4px}
.as-nav-group.abierto::before{
  content:''; position:absolute; left:8px; top:3px; bottom:7px; width:2px;
  border-radius:2px; background:var(--accent);
}
.as-sidebar nav a{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:9px 16px;margin:1px 8px;border-radius:9px;
  color:var(--muted);font-size:13px;font-weight:500;border:1px solid transparent;
  transition:background .12s,color .12s,border-color .12s;white-space:nowrap;overflow:hidden;
}
.as-sidebar nav a svg{width:18px;height:18px;flex-shrink:0;opacity:.65}
.as-sidebar nav a:hover{background:var(--card);color:var(--txt);border-color:var(--border)}
.as-sidebar nav a:hover svg{opacity:1}
.as-sidebar nav a.active{background:rgba(63,169,255,.1);color:var(--accent);border-color:rgba(63,169,255,.25);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.as-sidebar nav a.active svg{opacity:1}
.as-sidebar nav a.active svg:not(.as-nav-ico){color:var(--accent)}
.as-nav-edit{margin-top:14px;opacity:.6;font-size:.82rem}
.as-nav-edit:hover{opacity:1}
.as-nav-badge{margin-left:auto;background:var(--coral);color:#fff;font-size:10px;font-weight:700;
  line-height:1;padding:3px 6px;border-radius:20px;flex-shrink:0}

.as-side-foot{border-top:1px solid var(--border);padding:12px 18px 4px;margin-top:6px}
.as-user{margin:0 0 8px;font-size:.82rem;font-weight:600;display:flex;flex-direction:column}
.as-user span{color:var(--muted);font-size:.7rem;font-weight:400;text-transform:capitalize}
.as-logout{font-size:.78rem;color:var(--muted)}
.as-logout:hover{color:var(--danger)}

/* ---------- Layout ---------- */
.as-main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column}
.as-topbar{
  position:sticky;top:0;z-index:20;height:56px;
  display:flex;align-items:center;gap:14px;
  padding:0 24px;border-bottom:1px solid var(--border);
  background:var(--sidebar);
}
.as-topbar h1{margin:0;font-family:var(--font-hd);font-size:1.05rem;font-weight:600;flex:1;letter-spacing:-.4px}
.as-burger-btn{display:none;background:none;border:0;color:var(--txt);padding:4px}
.as-burger-btn svg{width:22px;height:22px}
.as-emp-switch{display:flex;align-items:center;gap:8px;margin:0}
.as-emp-switch .form-select{min-width:190px;padding:6px 30px 6px 11px;font-size:.8rem;min-height:auto}
.as-badge-super{
  background:linear-gradient(90deg,var(--coral),#ff7aa2);color:#fff;
  font-size:.64rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;white-space:nowrap;
}
.as-emp-name{
  font-size:.78rem;font-weight:600;color:var(--accent);
  background:rgba(63,169,255,.1);border:1px solid rgba(63,169,255,.25);
  padding:5px 12px;border-radius:8px;white-space:nowrap;
}
.as-live{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;color:var(--muted)}
.as-live i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(55,211,155,.6);animation:pulso 1.8s infinite}
@keyframes pulso{70%{box-shadow:0 0 0 8px rgba(55,211,155,0)}100%{box-shadow:0 0 0 0 rgba(55,211,155,0)}}

.as-content{padding:22px 24px;flex:1}
.as-flash{border:0;border-radius:10px;font-size:.86rem}

/* ---------- QR ---------- */
.as-qr-box{display:flex;gap:16px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--card2)}
.as-qr-canvas{background:#fff;padding:8px;border-radius:8px;line-height:0}
.as-qr-code{font-family:ui-monospace,monospace;font-size:1rem;font-weight:700;letter-spacing:.12em;color:var(--accent)}

/* Tarjeta QR imprimible (sticker de puerta): logo + QR + nombre + código,
   centrada, tamaño de etiqueta — no una hoja completa. */
.as-qr-ticket{display:flex;flex-direction:column;align-items:center;gap:6px;
  max-width:280px;margin:0 auto;padding:20px;text-align:center;
  border:1px dashed var(--border);border-radius:12px}
.as-qr-ticket-logo{height:32px;margin-bottom:4px}
.as-qr-ticket .as-qr-code{font-size:1.15rem}
@media print{
  .as-qr-ticket{border-color:#999;color:#000}
  .as-qr-ticket .as-sub{color:#333 !important}
}

/* ---------- Tarjetas / KPIs ---------- */
.as-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;
  transition:border-color .15s,transform .15s;
}
.as-card:hover{border-color:var(--border2)}
.as-card h2,.as-card h3{font-family:var(--font-hd);font-size:.98rem;font-weight:600;margin:0 0 14px}
/* "¿Qué es ASISTEC EOS?" en EOS Home: letras más grandes, tono de vitrina del
   producto (pedido de Reynaldo, WhatsApp 2026-09-06). */
.as-marketing-title{font-size:1.6rem;margin-bottom:10px}
.as-marketing-desc{font-size:1rem;line-height:1.5;color:var(--txt)}

.as-lbl{color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 8px;font-weight:700}
.as-big{font-family:var(--font-hd);font-size:2.3rem;font-weight:700;line-height:1;margin:0;letter-spacing:-.02em}
.as-num{font-family:var(--font-hd);font-size:1.8rem;font-weight:700;line-height:1;margin:0}
.as-sub{color:var(--muted);font-size:.74rem;margin:6px 0 0}

.as-kpi-cyan .as-big,.as-kpi-cyan .as-num{color:var(--accent)}
.as-kpi-ok   .as-big,.as-kpi-ok .as-num{color:var(--ok)}
.as-kpi-warn .as-big,.as-kpi-warn .as-num{color:var(--warn)}
.as-kpi-coral .as-big,.as-kpi-coral .as-num{color:var(--coral)}

/* Panel Ejecutivo: los 4 recuadros de KPI tienen que verse del mismo tamaño.
   Reynaldo por WhatsApp (2026-09-27, "todavia lo veo desigual"). Medido en
   vivo (360px de ancho): los altos salían 128/128/137/137, y la causa NO era
   el importe sino el texto de largo variable — "COMPRAS DEL MES" se partía en
   dos renglones (34px) y los otros títulos no (17px), y el detalle de una
   tarjeta ocupaba dos renglones (37px) y el de otra uno (28px). Con texto de
   largo variable no hay forma de que midan igual: se le reserva a CADA bloque
   sus dos renglones, así los 4 miden siempre exactamente lo mismo y los
   importes quedan alineados entre tarjetas.
   El importe además ya NO se fuerza a un renglón: con "S/ 12,345,678" se
   salía de la caja (147px de contenido en 116px de ancho). Ahora se envuelve
   dentro de sus dos renglones reservados, y "anywhere" es la red de
   seguridad para un monto absurdamente largo (nunca se sale de la tarjeta).
   Va acá y no en la app: esta pantalla es el panel web embebido por WebView. */
.as-kpi-fijo{height:100%}
.as-kpi-fijo .as-num,
.as-kpi-fijo .as-big{overflow-wrap:anywhere}
/* Las reservas de renglones solo hacen falta en celular: ahí van 2 tarjetas por
   fila, así que la fila 1 y la fila 2 pueden terminar con altos distintos. En
   escritorio van las 4 en una fila y el height:100% ya las iguala. */
@media (max-width:991.98px){
  .as-kpi-fijo{padding:14px}
  .as-kpi-fijo .as-lbl{line-height:1.25;min-height:2.5em}
  .as-kpi-fijo .as-num,
  .as-kpi-fijo .as-big{line-height:1.05;min-height:2.1em}
  .as-kpi-fijo .as-sub{line-height:1.3;min-height:2.6em}
  /* El importe escala con el ANCHO DE PANTALLA, no con su propio largo: así los
     cuatro salen siempre del mismo tamaño y de paso entran los montos largos.
     Medido en vivo: un dígito ocupa ~0.6 del tamaño de letra, así que a 22.7px
     "12,345,678" (10 dígitos) mide 136px y solo hay 116px de ancho — se partía
     en TRES renglones y su fila entera crecía a 182 contra 158 de la otra. Con
     4.6vw entran los 10 dígitos desde 320px de ancho en adelante, con margen.
     as-big arranca más grande (2.3rem contra 1.8rem), así que su tope es
     mayor — pero la misma idea: nunca un tercer renglón. */
  .as-kpi-fijo .as-num{font-size:clamp(1rem, 4.6vw, 1.42rem)}
  .as-kpi-fijo .as-big{font-size:clamp(1.05rem, 4.9vw, 1.7rem)}
}

/* Anillo de progreso */
.as-ring{--val:0;width:96px;height:96px;border-radius:50%;margin:2px auto 0;position:relative;display:grid;place-items:center;
  background:conic-gradient(var(--accent) calc(var(--val)*1%), rgba(255,255,255,.08) 0)}
.as-ring::before{content:"";position:absolute;width:76px;height:76px;border-radius:50%;background:var(--card)}
.as-ring b{position:relative;font-family:var(--font-hd);font-size:1.15rem;font-weight:700}
.as-ring-ok{background:conic-gradient(var(--ok) calc(var(--val)*1%), rgba(255,255,255,.08) 0)}

/* ---------- Mapa ---------- */
.as-map{height:440px;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.as-map-sm{height:300px}
.leaflet-container{background:#0b1a2b}
.as-map-tools{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.as-pts{max-height:180px;overflow:auto;font-family:ui-monospace,monospace;font-size:.74rem;color:var(--muted);
  background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:10px}

/* ---------- Tablas ---------- */
.table-responsive{border:1px solid var(--border);border-radius:12px;overflow:auto;background:var(--card)}
.as-table,.as-table.table{width:100%;border-collapse:collapse;font-size:.84rem}
/* Bootstrap pone el tbody blanco (--bs-table-bg / accent). Se anula duro. */
.as-table tbody,.as-table.table tbody,
.as-table tbody tr,.as-table.table tbody tr,
.as-table td,.as-table.table td{
  background:transparent !important;--bs-table-bg:transparent !important;
  --bs-table-accent-bg:transparent !important;color:var(--txt);
}
.as-table thead th{
  position:sticky;top:0;z-index:1;text-align:left;color:var(--muted);
  font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--card2);
}
.as-table tbody td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.as-table tbody tr{transition:background .12s}
.as-table tbody tr:hover{background:rgba(63,169,255,.05)}
.as-table tbody tr:last-child td{border-bottom:0}
/* Pie de tabla (la fila de totales). No tenía NINGÚN estilo, así que el
   "Total del mes" quedaba pegado a la última fila y sin margen: parecía una
   fila más de la lista. (Reynaldo, WhatsApp 2026-09-29). */
.as-table tfoot th,.as-table tfoot td{
  padding:13px 14px;border-top:2px solid var(--border);background:var(--card2);white-space:nowrap;
}
/* Solo el th: hay pies hechos con td que traen su propio color (as-neto,
   as-num) y no se deben pisar. */
.as-table tfoot th{font-size:.8rem;text-transform:none;letter-spacing:0;font-weight:800;color:var(--txt)}
.as-empty{text-align:center;color:var(--muted);padding:34px 0}
.as-empty-sm{text-align:center;color:var(--muted);padding:12px 0;font-size:.85rem}

/* Detalle de comprobante: cada línea es una tarjeta (más cómodo que una tabla) */
.as-items{display:flex;flex-direction:column;gap:.7rem}
.as-item{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.as-item-head{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.5rem}
.as-item-prof{flex:1}
.as-item-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem}
.as-item-f .form-label{font-size:.72rem;margin-bottom:3px}
.as-item-total{font-size:1rem;font-weight:700;padding:8px 10px 0;text-align:right;color:var(--txt)}

/* ---------- Píldoras ---------- */
.as-pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.7rem;font-weight:600;letter-spacing:.02em;border:1px solid transparent}
.as-pill-ok{background:rgba(55,211,155,.13);color:#a7f04f;border-color:rgba(55,211,155,.3)}
.as-pill-warn{background:rgba(255,140,0,.14);color:#ffab4d;border-color:rgba(255,140,0,.3)}
.as-pill-cyan{background:rgba(63,169,255,.13);color:#5cd6ff;border-color:rgba(63,169,255,.3)}
.as-pill-coral{background:rgba(230,67,122,.14);color:#ff85a8;border-color:rgba(230,67,122,.3)}
.as-pill-mute{background:rgba(255,255,255,.06);color:var(--muted);border-color:var(--border)}
.as-pill-purple{background:rgba(167,110,255,.16);color:#c9a4ff;border-color:rgba(167,110,255,.35)}

/* ---------- Formularios ---------- */
.form-label{font-size:.78rem;font-weight:600;color:var(--txt);margin-bottom:6px}
.form-control,.form-select{
  background:var(--card2);border:1px solid var(--border2);color:var(--txt);border-radius:9px;padding:10px 13px;font-size:.88rem;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.form-control:hover,.form-select:hover{border-color:#345a8f}
.form-control:focus,.form-select:focus{
  background:#17304f;border-color:var(--accent);color:var(--txt);
  box-shadow:0 0 0 3px rgba(63,169,255,.20);
}
.form-control::placeholder{color:#7286a5}
.form-select option{background:var(--sidebar)}

/* Inputs de hora/número: el widget nativo es blanco por defecto, se fuerza oscuro */
.form-control[type="time"],
.form-control[type="date"],
.form-control[type="number"]{
  color-scheme:dark;background:var(--card2);color:var(--txt);
}
.form-control[type="time"]::-webkit-calendar-picker-indicator,
.form-control[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.7)}
.form-control[type="time"]:focus,
.form-control[type="date"]:focus{background:#17304f;color:var(--txt)}

/* Modales: fondo y contenido oscuros, sin el blanco por defecto de Bootstrap */
.modal-backdrop.show{background:rgba(2,8,16,.72)}
.modal{z-index:2000}
.modal-content{background:var(--card);border:1px solid var(--border);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.modal-header,.modal-footer{border-color:var(--border)}
.modal .form-check-input{background-color:var(--card2);border:1px solid var(--border2)}
.modal .form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
.modal .form-check-label{color:var(--txt)}

/* Tablas Bootstrap: Bootstrap 5 pinta .table blanco por defecto => franja blanca en el panel oscuro.
   Se fuerza el fondo/tema oscuro para que no queden parches blancos. */
.as-main .table{
  --bs-table-bg:transparent;--bs-table-color:var(--txt);
  --bs-table-hover-bg:rgba(63,169,255,.05);--bs-table-hover-color:var(--txt);
  background:transparent !important;color:var(--txt);
}
.as-main .table > :not(caption) > * > *{
  background-color:transparent;color:var(--txt);border-color:var(--border);box-shadow:none;
}
.as-main .table thead th{color:var(--muted);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;background:transparent}
.as-main .table-striped > tbody > tr:nth-of-type(odd),
.as-main .table-hover > tbody > tr:hover,
.as-main .table-striped > tbody > tr:nth-of-type(odd) > *,
.as-main .table-hover > tbody > tr:hover > *{background-color:transparent;color:var(--txt);
  --bs-table-striped-bg:transparent;--bs-table-hover-bg:transparent;--bs-table-accent-bg:transparent}

/* ---------- Botones ---------- */
.btn{border-radius:9px;font-weight:600;font-size:.84rem;padding:9px 16px;min-height:40px;transition:filter .15s,background .15s,border-color .15s}
.as-btn-primary{background:var(--accent);color:#04121a;border:0;font-weight:700}
.as-btn-primary:hover{background:var(--accent-h);color:#04121a}
.as-btn-coral{background:var(--coral);color:#fff;border:0}
.as-btn-coral:hover{filter:brightness(1.08);color:#fff}
.as-btn-ghost{background:transparent;color:var(--txt);border:1px solid var(--border)}
.as-btn-ghost:hover{background:var(--card2);color:var(--txt);border-color:var(--border2)}
.as-btn-sm{padding:6px 12px;min-height:34px;font-size:.77rem}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(63,169,255,.32)}

/* ---------- Buscador de tabla + contador ---------- */
.as-tbar{display:flex;align-items:center;gap:12px;margin:2px 0 14px;flex-wrap:wrap}
.as-search{position:relative;flex:1;min-width:220px;max-width:420px}
.as-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.as-search input{
  width:100%;background:var(--bg);border:1px solid var(--border);color:var(--txt);
  border-radius:9px;padding:10px 14px 10px 38px;font-size:.86rem;min-height:40px;
  transition:border-color .15s,box-shadow .15s;
}
.as-search input::placeholder{color:#5b6172}
.as-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(63,169,255,.16)}
.as-search input::-webkit-search-cancel-button{filter:invert(.6)}
.as-tcount{font-size:.73rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- Paginador ---------- */
.as-pager{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:14px}
.as-pg-info{font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}
.as-pg-btn{
  width:36px;height:36px;border-radius:9px;border:1px solid var(--border);
  background:var(--card);color:var(--txt);font-size:1.1rem;line-height:1;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.as-pg-btn:hover:not(:disabled){background:rgba(63,169,255,.1);border-color:rgba(63,169,255,.4)}
.as-pg-btn:disabled{opacity:.35;cursor:not-allowed}

.as-geo{display:flex;gap:8px;align-items:stretch}
.as-geo .as-search input{min-height:38px}
.as-geo .btn{white-space:nowrap}

/* ---------- Lista con checkbox (Despacho) ---------- */
.as-chk-list{max-height:230px;overflow:auto;border:1px solid var(--border);border-radius:10px;padding:6px;background:var(--card2)}
.as-chk-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:.85rem;min-height:42px}
.as-chk-row:hover{background:var(--card)}
.as-chk-row input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.as-chk-row em{font-style:normal;margin-left:6px}

/* ---------- Barra de impersonación ---------- */
.as-imp-bar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(90deg,var(--coral),#ff7aa2);color:#fff;font-size:.8rem;font-weight:500;
  padding:8px 18px;box-shadow:0 2px 14px rgba(230,67,122,.35);
}
.as-imp-bar b{font-weight:800}
.as-imp-bar a{color:#fff;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.35);padding:5px 12px;border-radius:7px;font-weight:600;white-space:nowrap}
.as-imp-bar a:hover{background:rgba(0,0,0,.45);color:#fff}
/* --imp-bar-h la mide de verdad admin/includes/layout_bottom.php (offsetHeight
   del banner) — en escritorio entra en una línea (~40px), pero en celular el
   texto envuelve a 2-3 líneas y un número fijo se quedaba corto: la barra
   tapaba el arranque de la sidebar y no dejaba tocar el menú (reportado por
   Robert 2026-09-15). El 40px de acá es solo el valor de respaldo antes de
   que el JS mida, para no saltar mientras carga. */
.as-main-imp{padding-top:var(--imp-bar-h, 40px)}
.as-main-imp .as-topbar{top:var(--imp-bar-h, 40px)}
body:has(.as-imp-bar) .as-sidebar{padding-top:var(--imp-bar-h, 40px)}
@media (max-width:480px){
  /* Mismo mensaje, más corto: en un teléfono angosto no hace falta repetir
     el rol entre paréntesis para que se entienda quién está viendo qué. */
  .as-imp-bar{ font-size:.74rem; padding:7px 12px; gap:8px 12px }
  .as-imp-bar .as-imp-rol{ display:none }
}

/* ---------- Primeros pasos ---------- */
.as-pasos{border-color:rgba(63,169,255,.28)}
.as-pasos-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.as-pasos-lista li{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:10px;background:var(--card2);border:1px solid var(--border)}
.as-pasos-lista li > div{flex:1;min-width:0}
.as-pasos-lista li.listo{opacity:.55}
.as-pasos-lista li.listo b{text-decoration:line-through;text-decoration-color:var(--muted)}
.as-paso-n{width:30px;height:30px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;
  background:rgba(63,169,255,.14);color:var(--accent);border:1px solid rgba(63,169,255,.3)}
.as-pasos-lista li.listo .as-paso-n{background:rgba(55,211,155,.16);color:var(--ok);border-color:rgba(55,211,155,.3)}
@media (max-width:575.98px){.as-pasos-lista li{flex-wrap:wrap}.as-pasos-lista li > div{flex:1 1 100%;order:2}}

/* ---------- Planilla de nómina (tabla editable tipo Excel) ---------- */
.as-planilla th{font-size:.62rem;padding:9px 8px}
.as-planilla td{padding:8px}
.as-plin{
  width:82px;background:var(--bg);border:1px solid var(--border);color:var(--txt);
  border-radius:7px;padding:6px 8px;font-size:.8rem;text-align:right;
  font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s;
}
.as-plin:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(63,169,255,.16)}
.as-plin:disabled{opacity:.55;cursor:not-allowed;background:transparent}
.as-planilla .as-ro{
  text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
  color:var(--muted);font-size:.82rem;background:rgba(255,255,255,.02);
}
.as-planilla .as-neto{color:var(--ok);font-weight:800;font-size:.9rem}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .as-sidebar{transform:translateX(-100%);transition:transform .25s}
  .as-sidebar.open{transform:translateX(0)}
  .as-main{margin-left:0}
  .as-burger-btn{display:block}
  .as-content{padding:18px 14px}
  .as-big{font-size:2rem}
  .as-map{height:340px}
}
/* Fondo detrás del menú al abrirlo en el celular — sin esto, tocar fuera del
   menú no lo cerraba (reportado por Robert 2026-09-15): no había ningún
   elemento ahí que escuchara ese toque, el clic simplemente caía sobre el
   contenido de atrás. Con el fondo, tocarlo cierra el menú (ver JS). */
.as-sidebar-backdrop{
  display:none;
  position:fixed; inset:0; z-index:29;
  background:rgba(0,0,0,.5);
}
.as-sidebar-backdrop.open{ display:block }
@media (min-width:992px){ .as-sidebar-backdrop{ display:none !important } }
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

.as-hr{border:0;border-top:1px solid var(--border);margin:16px 0}

/* ── Badges genéricos ── */
.as-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.7rem;font-weight:600;
  background:var(--card2);color:var(--muted);border:1px solid var(--border2)}
.as-badge-ok{background:rgba(55,211,155,.14);color:var(--ok);border-color:transparent}
.as-badge-warn{background:rgba(255,184,77,.16);color:var(--warn);border-color:transparent}
.as-badge-info{background:rgba(63,169,255,.16);color:#8ec7ff;border-color:transparent}

/* ── Grilla del TAREO (planilla estilo hoja de cálculo) ── */
.as-tareo-wrap{max-height:72vh;overflow:auto;border-radius:var(--radius-sm)}
/* Bootstrap .table pinta las celdas de blanco por defecto: lo anulamos */
.as-tareo{font-size:.8rem;--bs-table-bg:transparent;--bs-table-color:var(--txt);--bs-table-accent-bg:transparent}
.as-tareo>:not(caption)>*>*{background-color:transparent;color:var(--txt);box-shadow:none}
.as-tareo thead th{
  white-space:nowrap;position:sticky;top:0;z-index:2;background:var(--card2);
  font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;
  color:var(--muted);padding:9px 6px;border-bottom:1px solid var(--border2)
}
.as-tareo tbody td{border-bottom:1px solid var(--border);padding:4px 6px}
.as-tareo tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
.as-tareo tbody tr:hover{background:rgba(63,169,255,.045)}
.as-tareo .as-day{width:44px;min-width:44px;text-align:center;padding:6px 3px}
.as-tareo td.as-day{padding:2px}
.as-sticky-col{position:sticky;left:0;z-index:3;min-width:160px}
.as-tareo td.as-sticky-col,.as-tareo th.as-sticky-col{background:var(--card);box-shadow:8px 0 14px -10px rgba(0,0,0,.7)}
.as-tareo thead th.as-sticky-col{z-index:4;background:var(--card2);box-shadow:none}
.as-tareo tbody tr:nth-child(even) td.as-sticky-col{background:#122542}
.as-tareo tbody tr:hover td.as-sticky-col{background:#14294a}
.as-tareo .as-sep{border-left:2px solid var(--border2)}
.as-tareo .as-desc{color:var(--danger)}
.as-tareo .as-xpagar{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;
  background:rgba(63,169,255,.07);font-weight:800}
.as-tareo .as-xp{color:var(--ok)}
.as-tareo .as-ro{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted)}
.as-cell{width:64px;padding:5px 6px;font-size:.8rem;text-align:right}
.as-cell.as-monto{width:44px;text-align:center;padding:5px 3px}

/* Inputs de la planilla: planos como celda; se marcan al enfocar o si traen valor */
.as-tareo .as-plin{
  width:100%;min-width:36px;background:transparent;border:1px solid transparent;
  border-radius:6px;padding:6px;color:var(--txt);text-align:right;
  -webkit-appearance:none;appearance:none;color-scheme:dark
}
.as-tareo .as-plin.as-monto{text-align:center;min-width:34px;padding:6px 2px}
.as-tareo .as-plin:hover{border-color:var(--border)}
.as-tareo .as-plin:focus{background:var(--bg);border-color:var(--accent);box-shadow:0 0 0 3px rgba(63,169,255,.16)}
.as-tareo .as-plin:not([value=""]){background:rgba(63,169,255,.07)}
.as-tareo .as-plin[type=number]::-webkit-inner-spin-button,
.as-tareo .as-plin[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.as-tareo .as-plin[type=number]{-moz-appearance:textfield}

/* ============================================================
   REDISEÑO (estilo SAFE) — encabezado, filtros, acciones, offcanvas
   ============================================================ */

/* Encabezado de página + toolbar de acciones */
.as-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:2px 0 16px}
.as-page-title{font-family:var(--font-hd);font-size:1.5rem;font-weight:700;letter-spacing:-.5px;margin:0}
.as-page-sub{color:var(--muted);font-size:.82rem;margin:3px 0 0}
.as-page-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Barra de filtros */
.as-filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;margin-bottom:14px}
.as-filter-search{flex:1 1 240px;min-width:200px;display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px}
.as-filter-search svg{width:16px;height:16px;color:var(--muted);flex:none}
.as-filter-search input{flex:1;background:transparent;border:0;outline:0;color:var(--txt);
  padding:9px 0;font-size:.85rem}
.as-filter-search input::placeholder{color:var(--muted)}
.as-filter-sel{width:auto;min-width:150px;flex:0 0 auto}
.as-filterbar .as-tcount{color:var(--muted);font-size:.78rem;margin-left:auto;white-space:nowrap}

/* Contenedor de tabla que NO recorta el menú kebab en escritorio */
.as-tw{width:100%}
@media(max-width:991px){ .as-tw{overflow-x:auto} }

/* Acciones compactas por fila: 1 principal + kebab */
.as-row-actions{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end;white-space:nowrap}
.as-kebab{padding:6px 10px;min-height:34px;line-height:1;font-size:1rem;font-weight:700}
.as-kebab::after{display:none}   /* sin la flechita de Bootstrap */

/* Menú dropdown en tema oscuro */
.as-menu.dropdown-menu{background:var(--card2);border:1px solid var(--border2);border-radius:var(--radius-sm);
  padding:6px;min-width:210px;box-shadow:0 16px 40px rgba(0,0,0,.55)}
.as-menu .dropdown-item{color:var(--txt);border-radius:6px;font-size:.8rem;padding:8px 10px;cursor:pointer}
.as-menu .dropdown-item:hover,.as-menu .dropdown-item:focus{background:var(--card)}
.as-menu button.dropdown-item{width:100%;text-align:left;background:transparent;border:0}
.as-menu form{margin:0}
.as-menu .dropdown-item.as-danger{color:#ff85a8}
.as-menu .dropdown-item.as-danger:hover{background:rgba(230,67,122,.12)}
.as-menu .dropdown-divider{border-color:var(--border);margin:5px 2px}

/* Offcanvas (panel lateral) en tema oscuro */
.as-oc.offcanvas{background:var(--card);color:var(--txt);border-left:1px solid var(--border)}
.as-oc .offcanvas-header{border-bottom:1px solid var(--border)}
.as-oc .offcanvas-title{font-family:var(--font-hd);font-weight:600;font-size:1rem}
.as-oc .btn-close{filter:invert(1) grayscale(1) brightness(1.6)}
.as-oc-lg{--bs-offcanvas-width:min(620px,96vw)}
.as-oc .as-card{border:0;padding:0;margin-bottom:22px;background:transparent}
.as-oc .as-card:hover{border:0}

/* Densidad de tablas de listado un punto más ajustada */
.as-table tbody td{padding:10px 12px}

/* ---------- Ficha del trabajador ---------- */
.as-ficha-foto{width:76px;height:76px;border-radius:16px;overflow:hidden;flex:none;
  background:var(--card2);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center}
.as-ficha-foto img{width:100%;height:100%;object-fit:cover;display:block}
.as-ficha-foto span{font-family:var(--font-hd);font-size:2rem;font-weight:700;color:var(--accent)}
.as-ficha-dato{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--border)}
.as-ficha-dato:last-child{border-bottom:0}
.as-ficha-k{color:var(--muted);font-size:.82rem}
.as-ficha-v{text-align:right;font-size:.9rem;font-weight:500}

/* Timeline de la bitácora */
.as-timeline{display:flex;flex-direction:column;gap:2px;position:relative}
.as-tl-item{display:flex;gap:12px;padding:10px 0;position:relative}
.as-tl-item:not(:last-child)::before{content:"";position:absolute;left:15px;top:34px;bottom:-4px;width:2px;background:var(--border)}
.as-tl-ico{width:32px;height:32px;border-radius:50%;flex:none;background:var(--card2);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;font-size:.9rem;z-index:1}
.as-tl-body{flex:1;min-width:0}
.as-tl-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}

@media print{
  /* Horizontal: es la única forma de que entren las ~35 columnas del Tareo */
  @page{size:A4 landscape;margin:6mm}
  /* Documentos de un solo bloque (guía, QR, contrato, certificado, liquidación):
     A4 VERTICAL — landscape solo tenía sentido para la grilla ancha del Tareo,
     acá deja media hoja en blanco. [data-print-solo] pide esta página con
     `page:`; si el navegador no soporta páginas con nombre, cae al @page de
     arriba sin romper nada (sigue saliendo, solo que horizontal). */
  @page doc-solo{size:A4 portrait;margin:14mm}
  [data-print-solo]{page:doc-solo}
  .as-sidebar,.as-topbar,.as-imp-bar,.btn,#novaBtn,form[method="get"]{display:none !important}
  .as-content{padding:0 !important;margin:0 !important}
  .as-main-imp{padding-top:0 !important}
  body{background:#fff !important;color:#000 !important}
  /* Fuera avisos/tarjetas de ayuda: en el papel solo va la planilla */
  .as-card:has(.as-empty){display:none !important}
  .as-card{background:#fff !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important}
  /* Vistas de un solo documento imprimible (guía de despacho, QR de área, etc.):
     en la hoja va SOLO esa tarjeta — el resto de la pantalla (formularios,
     tablas, tarjetas de ayuda) desaparece, así el papel no sale con toda la
     página encima. La página marca <body class="as-print-solo"> (vía $printSolo
     antes de layout_top.php) y su tarjeta imprimible con [data-print-solo] —
     NO se usa :has() acá a propósito: no todos los navegadores lo soportan
     todavía para impresión, y sin él la tarjeta imprimía la página completa. */
  body.as-print-solo .as-card:not([data-print-solo]){display:none !important}
  /* Grilla en blanco y negro, encogida para que quepa completa */
  .as-tareo-wrap{max-height:none !important;overflow:visible !important;border-radius:0}
  .as-tareo{font-size:7px !important;color:#000;width:100% !important;border-collapse:collapse}
  .as-tareo thead th{position:static !important;text-transform:none;font-size:7px !important;
    padding:2px 1px !important;white-space:normal !important;background:#fff !important}
  .as-tareo th,.as-tareo td{border:1px solid #999 !important;color:#000 !important;
    padding:2px 1px !important;white-space:normal !important}
  .as-tareo>:not(caption)>*>*{background:#fff !important;color:#000 !important;box-shadow:none !important}
  .as-tareo .as-sticky-col{position:static !important;min-width:0 !important;box-shadow:none !important}
  .as-tareo td.as-sticky-col,.as-tareo th.as-sticky-col{background:#fff !important}
  .as-tareo .as-day{width:auto !important;min-width:0 !important}
  .as-plin{color:#000 !important;border:0 !important;background:transparent !important;
    font-size:7px !important;width:100% !important;min-width:0 !important;padding:0 !important;text-align:center}
}

/* ═══════════════ Forma de pago (medios al contado + crédito en cuotas) ═══════════════ */
.fe-pagos{background:var(--card,#0f1a2e);border:1px solid var(--border,#22375c);border-radius:14px;padding:14px}
.fe-pagos-tit{font-size:.78rem;margin-bottom:10px}
.fe-pago-row{display:grid;grid-template-columns:1fr 130px 38px;gap:8px;align-items:center;margin-bottom:8px}
.fe-cuota-row{display:grid;grid-template-columns:auto 1fr 130px 38px;gap:8px;align-items:center;margin-bottom:8px}
.fe-cuota-num{min-width:74px;font-size:.78rem}
.fe-aviso{font-size:.82rem;font-weight:600;color:var(--muted,#a9bbd6)}
.fe-cuotas{background:var(--card,#0f1a2e);border:1px solid var(--border,#22375c);border-radius:14px;padding:14px}
.as-cuota-madre td{background:rgba(63,169,255,.06)}

/* ═══════════════ Modales del panel ═══════════════
   Los modales de Bootstrap vienen con fondo claro. Antes cada uno repetía el
   mismo style="" inline; esta clase lo centraliza. */
.as-modal{background:var(--card);color:var(--txt);border:1px solid var(--border)}
.as-modal .modal-header,.as-modal .modal-footer{border-color:var(--border)}
.as-cobro-datos dt{ font-weight:600; color:var(--muted) }
.as-cobro-datos dd{ margin-bottom:.35rem }

/* ═══════════════ Actualizar datos (barra superior) ═══════════════
   Vive en la topbar para estar en todos los módulos sin repetirlo en cada
   página. El texto se oculta en pantallas chicas: queda solo el icono. */
/* Botón "Ayuda" de la barra superior: escribe el usuario y el mensaje le llega
   al Super Admin a Notificaciones (admin/soporte_enviar.php). Pedido de
   Reynaldo, WhatsApp 2026-09-30. Mismo aspecto que "Actualizar". */
.as-ayuda{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:1px solid var(--border);border-radius:9px;
  color:var(--muted);padding:5px 11px;font-size:.75rem;line-height:1;
  cursor:pointer;transition:border-color .15s,color .15s;
}
.as-ayuda:hover{border-color:var(--accent);color:var(--accent)}
.as-ayuda svg{width:14px;height:14px}
/* Campana de notificaciones en la barra superior (sale del menú lateral:
   Reynaldo, 2026-10-02). Mismo aspecto que Ayuda + contador de no leídas. */
.as-campana{position:relative;text-decoration:none}
.as-campana-activa{border-color:var(--accent);color:var(--accent)}
.as-campana-n{position:absolute;top:-7px;right:-7px;font-style:normal;background:var(--coral);color:#fff;
  font-size:10px;font-weight:700;line-height:1;padding:3px 6px;border-radius:20px;min-width:18px;text-align:center;
  box-shadow:0 0 0 2px var(--bg,#0b1220)}
.as-refrescar{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:1px solid var(--border);border-radius:9px;
  color:var(--muted);padding:5px 11px;font-size:.75rem;line-height:1;
  cursor:pointer;transition:border-color .15s,color .15s;
}
.as-refrescar:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.as-refrescar:disabled{opacity:.6;cursor:default}
.as-refrescar svg{width:14px;height:14px}
.as-refrescar.girando svg{animation:as-giro .8s linear infinite}
@keyframes as-giro{to{transform:rotate(360deg)}}
@media (max-width:640px){
  .as-refrescar span{display:none}
  .as-refrescar{padding:5px 8px}
  .as-ayuda span{display:none}
  .as-ayuda{padding:5px 8px}
  /* "En vivo" en texto se salía de la pantalla en el celular y arrastraba
     toda la página hacia un lado (reportado por Robert 2026-09-15) —
     se deja solo el puntito verde, mismo criterio que "Actualizar" arriba. */
  .as-live span{display:none}
  /* El verdadero peso que rompía la topbar en el celular (confirmado
     midiendo el ancho real): el selector de empresa del Super Admin tenía
     min-width:190px fijo, sin ningún ajuste para pantalla chica — entre
     eso y el badge "Super Admin" empujaba la topbar ~120px más ancha que
     la pantalla, y TODO el body se corría (por eso Robert lo notaba
     "movido a la izquierda" al minimizar: no era "En vivo", era esto). */
  .as-topbar{flex-wrap:wrap; height:auto; min-height:56px; row-gap:6px; padding:10px 14px}
  .as-emp-switch{flex:1 1 100%; order:3}
  .as-emp-switch .form-select{min-width:0; flex:1}
  .as-badge-super{font-size:.66rem; padding:2px 7px; white-space:nowrap}
}

/* Acción destructiva dentro de una fila. Antes iba con style="" inline. */
.as-txt-coral{color:var(--coral)}

/* ── Urgencias por autorizar y tiempo real (Solicitudes) ─────────────── */

/* El bloque tiene que verse distinto del resto de la pantalla: es lo único
   que le pide una decisión al jefe apenas entra. */
.as-urgencias{border-left:3px solid var(--coral)}

.as-urgencia{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:10px 0;border-top:1px solid var(--border);
}
.as-urgencia:first-of-type{border-top:0}
.as-urgencia-txt{min-width:220px;flex:1 1 260px}
/* El motivo es lo que se lee para decidir: va destacado, no como pie de foto. */
.as-urgencia-motivo{color:var(--txt);margin:2px 0}

.as-urgencia-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.as-urgencia-form .form-control{width:210px}
.as-btn-ok{color:var(--ok,#37d39b)}
.as-btn-no{color:var(--coral)}

.as-vivo{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
/* La cuenta atrás cambia de número cada segundo: con ancho fijo y cifras de
   igual paso no empuja lo que tiene al lado. */
.as-vivo .as-sub{min-width:104px;font-variant-numeric:tabular-nums}

@media (max-width:640px){
  .as-urgencia-form{width:100%}
  .as-urgencia-form .form-control{width:100%}
}

/* ── Catálogo de categorías de producto ──────────────────────────────── */
.as-cat-form{display:flex;gap:6px;align-items:center}
.as-cat-nombre{max-width:280px}
@media (max-width:640px){.as-cat-nombre{max-width:100%}}
/* Selector de empresa cuando el super entra a Catálogo sin elegir operadora */
.as-cat-emp{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}

/* ── Organigrama como mapa gráfico (cajas conectadas, como Defontana) ── */
.org-scroll{overflow-x:auto;padding:8px 4px}
.org-map{display:flex;flex-direction:column;align-items:center}
.org-node{background:var(--card2);border:1px solid var(--border2);border-radius:8px;padding:8px 14px;text-align:center;min-width:130px;max-width:210px}
.org-node strong{display:block;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-cargo{display:block;font-size:.7rem;color:var(--muted);margin-top:3px}
.org-cargo--sin{opacity:.55}
.org-branch{display:flex;flex-direction:column;align-items:center;position:relative}
.org-conn{width:2px;height:18px;background:var(--border2)}
.org-siblings{display:flex;align-items:flex-start;gap:18px;padding:20px 10px 4px;position:relative}
.org-siblings::before{content:'';position:absolute;top:20px;left:0;right:0;height:2px;background:var(--border2)}
.org-siblings > .org-branch::before{content:'';position:absolute;top:-20px;left:50%;width:2px;height:20px;transform:translateX(-50%);background:var(--border2)}
@media (max-width:640px){.org-node{min-width:110px;max-width:160px}}

/* ── Grid de Módulos (addons) ─────────────────────────────────────────
   El grid estaba sin estilos propios: se apoya en Bootstrap pero pedía el
   toque del panel. Tarjetas con el color del módulo, y etiquetas para las
   dependencias (requiere) y los grupos exclusivos (o). */
.fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-bottom:20px}
.fx-addon{position:relative;background:var(--card2);border:1px solid var(--border2);border-radius:10px;padding:14px 46px 14px 14px;display:flex;gap:12px;align-items:flex-start;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.fx-addon:hover{border-color:color-mix(in srgb,var(--c,#0ea5e9) 45%,transparent)}
.fx-ic{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;color:var(--c,#0ea5e9);background:color-mix(in srgb,var(--c,#0ea5e9) 14%,transparent)}
.fx-ic svg{width:22px;height:22px}
.fx-body{flex:1;min-width:0}
.fx-name{display:block;font-weight:600;font-size:.95rem;color:var(--txt,#111);line-height:1.3}
.fx-desc{display:block;font-size:.8rem;color:var(--muted,#666);margin-top:3px;line-height:1.4}
.fx-dep,.fx-exc{display:block;font-style:normal;font-weight:500;font-size:.72rem;margin-top:2px;line-height:1.3}
.fx-dep{color:#b45309}
.fx-exc{color:#be185d}
.fx-addon > input[type=checkbox]{position:absolute;top:14px;right:14px;width:18px;height:18px;accent-color:var(--accent,#0ea5e9)}
.fx-addon:has(input:checked){border-color:color-mix(in srgb,var(--c,#0ea5e9) 60%,transparent);background:color-mix(in srgb,var(--c,#0ea5e9) 6%,var(--card2,#fff))}
.fx-cat{font-weight:700;color:var(--muted,#666);text-transform:uppercase;letter-spacing:.04em;font-size:.78rem;margin:22px 0 8px}
.fx-savebar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:6px}
/* Catálogo — previa de foto del producto en el modal (en vivo al elegir archivo). */
.cat-foto-prev{display:block;max-height:180px;min-height:120px;width:100%;object-fit:contain;border:1px dashed var(--border,#ddd);border-radius:10px;margin-top:8px;background:var(--card2,#f5f5f5);padding:6px}
.cat-foto-ancho{width:100%;height:100%;object-fit:contain}
.as-pill-baja{background:var(--rojo,var(--danger,rgba(220,53,69,.15)));color:var(--danger,#dc3545)}
.cat-card-foto{height:140px;overflow:hidden;text-align:center}
.cat-card-img{height:100%;object-fit:contain}
.cat-card-nombre{font-size:.85rem}

/* Modo embebido (WebView de la app Android): solo el contenido, sin menu, barra ni botones flotantes. */
body.as-embed .as-sidebar,
body.as-embed .as-sidebar-backdrop,
body.as-embed .as-topbar,
body.as-embed .as-imp-bar,
body.as-embed .eia-fab,
body.as-embed .eia-panel-flotante,
body.as-embed .nova-fab,
body.as-embed .nova-panel{display:none !important}
body.as-embed .as-main{margin-left:0}
body.as-embed .as-content{padding:12px 10px}

/* Cliente actual del super admin (reemplaza al desplegable "Super Admin + Todas las empresas"). */
.as-cliente-actual{ display:flex; align-items:center; gap:4px; min-width:0; max-width:340px }
.as-cliente-link{
  display:flex; align-items:center; gap:9px; min-width:0; padding:6px 12px; border-radius:99px;
  border:1px solid var(--border); background:var(--card2); color:var(--txt); font-size:.82rem; font-weight:600;
  transition:border-color .12s;
}
.as-cliente-link:hover{ border-color:var(--accent); color:var(--txt) }
.as-cliente-link svg{ width:15px; height:15px; flex:none; color:var(--accent) }
.as-cliente-nombre{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.as-cliente-cambiar{ flex:none; font-size:.7rem; color:var(--accent); text-transform:uppercase; letter-spacing:.08em }
.as-cliente-todos .as-cliente-nombre{ color:var(--muted); font-weight:500 }
.as-cliente-quitar{
  width:24px; height:24px; border-radius:50%; border:0; background:transparent; color:var(--muted);
  font-size:1.15rem; line-height:1; cursor:pointer;
}
.as-cliente-quitar:hover{ background:rgba(255,255,255,.08); color:var(--txt) }
@media (max-width:600px){ .as-cliente-actual{ flex:1 1 100%; order:3; max-width:none } .as-cliente-link{ flex:1 } }

/* Rentabilidad del Super Admin: "lo que te queda limpio" por operadora
   (admin/empresas.php) y los totales del mes (admin/rentabilidad.php). */
.as-neto-pos{ color:var(--ok) }
.as-neto-neg{ color:var(--danger) }

/* Lista de módulos de un plan (admin/planes.php): con 59 módulos, una columna
   sola haría un formulario larguísimo. En columnas y con tope de alto. */
.as-plan-mods{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:2px 14px; max-height:260px; overflow-y:auto;
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px;
}

/* Los datos de un plan en su tarjeta (admin/planes.php). Mismo criterio que
   .cx-cifras de la cartera de clientes: rótulo chico arriba, valor abajo. */
.as-plan-datos{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin:0 }
.as-plan-datos div{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.as-plan-datos dt{ font-size:.66rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:600 }
.as-plan-datos dd{ margin:0; font-size:.95rem }

/* Consumo del plan en "Mi Plan" (admin/mi_plan.php): "Usuarios 7 / 10" con su
   barra. Se usa el elemento <progress> en vez de un div con ancho en línea,
   para no meter style="" en el HTML. */
.as-uso-tit{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:4px }
.as-uso-cifra{ font-size:.95rem; font-weight:600 }
.as-uso-barra{ width:100%; height:8px; border:0; border-radius:999px; overflow:hidden; appearance:none; background:var(--border) }
.as-uso-barra::-webkit-progress-bar{ background:var(--border); border-radius:999px }
.as-uso-barra::-webkit-progress-value{ background:var(--accent); border-radius:999px }
.as-uso-barra::-moz-progress-bar{ background:var(--accent); border-radius:999px }


/* Cotizaciones y contratos EOS: "Datos del cliente | Datos de mi empresa" en
   dos bloques iguales (admin/includes/eos_datos_partes.php). Pedido de Reynaldo
   2026-09-28: que se vea claro, cliente a la izquierda y empresa a la derecha. */
.eos-datos-bloque{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 16px; height:100% }
.eos-datos-tit{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 6px }

/* ── Asistencia: una fila por JORNADA, no por marcación ──────────────────────
   Pedido de Reynaldo (WhatsApp 2026-10-01): el mismo trabajador aparecía varias
   veces, una por cada marcación. La fecha y las horas van resaltadas para que la
   jornada se lea de un vistazo. */
.as-jorn-fecha{ font-weight:600; color:var(--txt); font-variant-numeric:tabular-nums }
.as-jorn-hora{ display:inline-block; min-width:56px; padding:3px 9px; border-radius:8px; border:1px solid transparent;
  font-weight:700; font-size:.8rem; text-align:center; font-variant-numeric:tabular-nums }
.as-jorn-hora-ok{ background:rgba(55,211,155,.13); color:#a7f04f; border-color:rgba(55,211,155,.3) }
.as-jorn-hora-tarde{ background:rgba(255,140,0,.14); color:#ffab4d; border-color:rgba(255,140,0,.3) }
.as-jorn-hora-mal{ background:rgba(230,67,122,.14); color:#ff85a8; border-color:rgba(230,67,122,.3) }
.as-jorn-hora-cierre{ background:rgba(255,255,255,.06); color:var(--muted); border-color:var(--border) }
.as-jorn-rev{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-bottom:4px }
.as-jorn-rev form{ display:inline-flex; margin:0 }

/* Modal "Ver evidencias": foto + hora + coordenadas de entrada y de salida. */
.as-ev-blq{ border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--card2); height:100% }
.as-ev-flex{ display:flex; gap:12px; align-items:flex-start }
.as-ev-foto{ width:96px; height:96px; object-fit:cover; border-radius:10px; border:1px solid var(--border); display:block }
.as-ev-sinfoto{ width:96px; height:96px; border-radius:10px; border:1px dashed var(--border); display:flex;
  align-items:center; justify-content:center; color:var(--muted); font-size:.72rem; text-align:center }
.as-ev-coord{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem }
@media (max-width:520px){ .as-ev-flex{ flex-direction:column } }

/* ── Cierre de jornada: lo programado frente a lo real, una fila por programación
   (Reynaldo, WhatsApp 2026-10-01). Reusa las píldoras de hora de Asistencia. */
.as-jorn-hora-sin{ background:rgba(255,140,0,.14); color:#ffab4d; border-color:rgba(255,140,0,.3); font-weight:600 }
.as-jorn-hora-extra{ background:rgba(167,110,255,.16); color:#c9a4ff; border-color:rgba(167,110,255,.35) }
.as-cj-prog{ font-variant-numeric:tabular-nums; white-space:nowrap }
.as-cj-dif-ok{ color:var(--ok); font-weight:600; font-variant-numeric:tabular-nums }
.as-cj-dif-neg{ color:#ff85a8; font-weight:600; font-variant-numeric:tabular-nums }
.as-cj-dif-pos{ color:#c9a4ff; font-weight:600; font-variant-numeric:tabular-nums }
.as-cj-btn-rev{ color:var(--warn); border-color:rgba(255,184,77,.45) }
.as-cj-h{ font-size:1.05rem }
.as-cj-hora{ width:112px; flex:none }
.as-cj-horas{ width:84px }
.as-cj-nota{ width:min(320px, 60vw) }
.as-cj-reg{ border-top:1px dashed var(--border); padding-top:8px; margin-top:4px }
#mRev .modal-footer form[hidden], #mRev form[hidden], #mRev [hidden]{ display:none !important }

/* ── Notificaciones: pestañas (Bandeja / Sin leer / Leídas / Archivadas), filas
   agrupadas por día y archivo (Reynaldo, WhatsApp 2026-10-01). */
.as-notif-tabs{ border-bottom:1px solid var(--border); gap:4px }
.as-notif-tabs .nav-link{ color:var(--muted); border:0; border-bottom:2px solid transparent; border-radius:0; padding:8px 12px; font-size:.82rem; font-weight:600 }
.as-notif-tabs .nav-link:hover{ color:var(--txt) }
.as-notif-tabs .nav-link.active{ color:var(--accent); border-bottom-color:var(--accent); background:transparent }
.as-notif-n{ display:inline-block; min-width:20px; padding:0 6px; border-radius:999px; background:rgba(255,255,255,.07); font-size:.7rem; text-align:center; margin-left:4px }
.as-notif-dia{ margin:14px 0 4px; letter-spacing:.06em }
.as-notif-fila{ display:flex; align-items:center; gap:12px; padding:9px 10px; border-bottom:1px solid var(--border); border-radius:8px; background:rgba(63,169,255,.05) }
.as-notif-fila.as-notif-leida{ background:transparent; opacity:.72 }
.as-notif-fila:hover{ opacity:1 }
.as-notif-tipo{ margin-left:6px; font-size:.62rem; padding:2px 7px; vertical-align:middle }
.as-notif-hora{ white-space:nowrap; font-variant-numeric:tabular-nums }
@media (max-width:640px){ .as-notif-fila{ flex-wrap:wrap } }
.as-evidence-thumb{width:52px;height:52px;object-fit:cover;border-radius:6px;cursor:pointer;margin:2px}
.as-ejecucion-fila{padding:9px 0;border-bottom:1px solid var(--border)}
.as-file-link{display:block;padding:.35rem 0;color:var(--accent);word-break:break-word}
.as-history-item{padding:.5rem 0;margin:0;border-bottom:1px solid var(--border)}
.as-task-overdue{color:var(--coral);font-weight:600}

/* Menú de Contabilidad en grupos: fila de grupos y fila de pantallas del grupo activo. */
.as-ctb-grupo{ border:1px solid var(--border); background:transparent; color:inherit; font-weight:600 }
.as-ctb-grupo:hover{ border-color:var(--accent); color:var(--accent) }
.as-ctb-grupo.is-activo{ background:var(--accent); border-color:var(--accent); color:#0b1220 }
.as-ctb-sub{ border-top:1px solid var(--border) }
.as-ctb-sub .is-activo{ border-color:var(--accent); color:var(--accent) }
/* Pestañas de sección de un módulo (Inventario, Compras, Tesorería...). */
.as-tabs .is-activo{ border-color:var(--accent); color:var(--accent) }
.as-ctb-externo{ opacity:.85 }
/* Reportes contables: 3er nivel (pantallas de la sección elegida) */
.as-ctb-sub3{ border-top:1px dashed var(--border) }
.as-ctb-pant{ border:0; background:transparent; color:var(--muted); font-weight:600 }
.as-ctb-pant:hover{ color:var(--accent) }
.as-ctb-pant.is-activo{ color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent); border-radius:0 }
/* Tercer nivel dentro de un reporte (Analítica: CC / CN / Rentabilidad / Comparativo) */
.as-rep-grupo-tit{ font-weight:700 }
.as-rep-fila-total td{ font-weight:700; border-top:1px solid var(--border) }
.as-rep-sub td{ font-size:.85rem }
/* Mismos anchos de columna en todas las tablas de un reporte agrupado (auxiliares, movimientos, análisis). */
.as-rep-fija{ table-layout:fixed; width:100% }
.as-rep-fija td{ overflow-wrap:anywhere }
.as-rep-aux th:nth-child(1), .as-rep-mov th:nth-child(1), .as-rep-movt th:nth-child(1){ width:9% }
.as-rep-aux th:nth-child(2), .as-rep-mov th:nth-child(2), .as-rep-movt th:nth-child(2){ width:8% }
.as-rep-aux th:nth-child(3){ width:18% }  .as-rep-aux th:nth-child(4){ width:11% }  .as-rep-aux th:nth-child(5){ width:24% }
.as-rep-mov th:nth-child(3){ width:37% }  .as-rep-mov th:nth-child(4){ width:16% }
.as-rep-movt th:nth-child(3){ width:25% } .as-rep-movt th:nth-child(4){ width:19% } .as-rep-movt th:nth-child(5){ width:9% }
.as-rep-aux th:nth-last-child(-n+3), .as-rep-mov th:nth-last-child(-n+3), .as-rep-movt th:nth-last-child(-n+3){ width:10% }
.as-rep-ana th:nth-child(1){ width:45% } .as-rep-ana th:nth-child(2){ width:15% } .as-rep-ana th:nth-last-child(-n+3){ width:13% }
.as-rep-cen th:nth-child(1){ width:14% } .as-rep-cen th:nth-child(2){ width:56% } .as-rep-cen th:nth-last-child(-n+2){ width:15% }

.as-summary{ cursor:pointer }
.as-checklist td{ vertical-align:middle }
.as-cifra{ font-variant-numeric:tabular-nums; white-space:nowrap }
.as-conc-dif{ color:#ffab4d; font-weight:700 }
.as-chk-hist{ padding-left:1.1rem; font-size:.8rem; color:var(--muted) }
.as-chk-hist li{ margin-bottom:2px }

/* Reglas contables: una fila-formulario por tipo de movimiento. */
.as-regla-mod{ font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent) }
.as-regla{ padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.02) }
.as-regla.is-incompleta{ border-color:rgba(255,140,0,.35) }
.as-regla .form-check-label{ white-space:nowrap }
.as-input-cta{ max-width:160px }
.as-sire-just{ min-width:220px }
.as-regla-cta{ font-size:.72rem; color:var(--muted); margin-top:3px; min-height:1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* Trazabilidad del asiento contable (Origen → Documento → Asiento). */
.as-traza{ padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.025) }
.as-traza-titulo{ font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent) }
.as-traza-etq{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted, #8a94a8) }
.as-traza-val{ font-size:.9rem; word-break:break-word }

/* Compras F1.1: desglose tributario de la OC (base / IGV / no gravado / total) */
.oc-desglose{display:flex;flex-wrap:wrap;gap:10px}
.oc-desglose>div{flex:1 1 150px;padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.02)}
.oc-desglose .as-lbl{display:block;margin-bottom:4px}
.oc-desglose b{font-size:1rem;font-variant-numeric:tabular-nums}
.oc-desglose .oc-desglose-total{border-color:rgba(63,169,255,.5);background:rgba(63,169,255,.06)}

/* Recepciones de OC (Word F1.2) */
.oc-recepcion .oc-rec-cant { max-width: 110px; }
.oc-recepciones .oc-recepcion-fila { padding: .6rem 0; border-top: 1px solid rgba(255,255,255,.08); }
.oc-recepciones .oc-recepcion-fila:first-of-type { border-top: 0; }
.oc-recepcion-items { padding-left: 1.1rem; font-size: .9rem; }
.oc-rechazo { color: var(--coral); }

/* Comprobantes de compra (Word F1.3) */
.cc-archivos a { margin-right: .5rem; }
.cc-anular { color: var(--coral); }
.cc-oc details > summary { cursor: pointer; }
.cc-tabla td.as-ro, .cc-tabla td a { white-space: nowrap; }

/* Conciliación OC · Recepción · Factura (Word F1.4) */
.conc-tres { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: .5rem; }
.conc-tres > div { display: flex; flex-direction: column; gap: .2rem; }
.conc-dif { color: var(--coral); font-size: .9rem; }
.conc-filtro-on { border-color: var(--accent); color: var(--accent); }
.cc-tabla .as-pill { white-space: nowrap; }

/* Cuentas por Pagar (Word F2) */
.cxp-aging { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.cxp-tramo { display: flex; flex-direction: column; gap: .25rem; padding: .75rem 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; text-decoration: none; color: inherit; }
.cxp-tramo:hover, .cxp-tramo-on { border-color: var(--accent); }

/* Cuentas por Cobrar (Word F3) */
.cxc-tab-on { border-color: var(--accent); color: var(--accent); }
.cxc-acciones details { border-top: 1px solid rgba(255,255,255,.08); padding: .6rem 0; }
.cxc-acciones summary { cursor: pointer; font-weight: 600; }
.cxc-historial { padding-left: 1.1rem; font-size: .9rem; }
.cxc-historial li { margin-bottom: .3rem; }
.cxc-linea { max-width: 130px; }
.cxc-dias { max-width: 80px; }

/* Presupuesto (Word F5) */
.presu-futuro { opacity: .5; }
.presu-kpis .as-num { font-size: clamp(1.1rem, 1.6vw, 1.6rem); white-space: nowrap; }

/* BI Tesorería / CRM (Word F7) */
.bi-barra { width: 55%; height: .55rem; vertical-align: middle; accent-color: var(--accent); }
.bi-barra-ok { accent-color: var(--ok); }
.bi-barra-coral { accent-color: var(--coral); }
.presu-kpis .as-big { font-size: clamp(1.2rem, 1.8vw, 1.9rem); white-space: nowrap; }

/* CRM (Word F6) */
.crm-abandonadas { border-color: rgba(255,120,100,.45); }

/* Asignación de rutinas/objetivos (Word F8) */
.asig-lista { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: .5rem .75rem; }
.cxc-motivo { max-width: 260px; }