/**
 * Nombre:   app.css
 * Versión:  1.0 — 2026-10-29
 * Qué hace: Estilo único de FACT4PLUS (tema oscuro estándar LEOdesign / System4PLUS), mobile first.
 * Usado en: fact4plus
 */
:root{--fondo:#0B1424;--tarjeta:#14223A;--tarjeta2:#192A47;--borde:#22324D;--texto:#E8EEF7;--suave:#9FB0C8;--tenue:#6F82A0;--acento:#22C3E6;--acento2:#3B82F6;--secundario:#7B61FF;
--ok:#2DD4A4;--aviso:#F5B83D;--alerta:#F2617A;--info:#22C3E6;--radio:12px;--mono:'IBM Plex Mono',ui-monospace,monospace;--menu:264px;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--texto);font:15px/1.5 Manrope,system-ui,sans-serif;min-height:100vh}
a{color:var(--acento);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .6em;line-height:1.25}h1{font-size:1.35rem}h2{font-size:1.1rem}h3{font-size:1rem}
.mono,.n,td.n,.importe{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.saltar{position:absolute;left:-999px}.saltar:focus{left:8px;top:8px;z-index:99;background:var(--acento);color:#04121C;padding:6px 10px;border-radius:8px}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
html{scrollbar-color:var(--acento2) var(--fondo)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--fondo)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--acento),var(--acento2),var(--secundario));border-radius:10px;border:2px solid var(--fondo)}
@supports selector(::-webkit-scrollbar){html{scrollbar-color:auto}}

/* Menú */
.menu{position:fixed;inset:0 auto 0 0;width:var(--menu);background:#0D182B;border-right:1px solid var(--borde);display:flex;flex-direction:column;z-index:40;transform:translateX(-100%);transition:transform .2s}
.menu.abierto{transform:none}
.menu-cab{display:flex;align-items:center;justify-content:space-between;padding:16px 14px 10px}
.marca{display:flex;align-items:center;gap:10px;color:var(--texto);font-weight:800;letter-spacing:.3px;font-size:1.1rem}.marca b{color:var(--acento)}.marca:hover{text-decoration:none}
.marca.grande{font-size:1.6rem;justify-content:center}
.menu nav{flex:1;overflow-y:auto;padding:6px 10px}
.op{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--suave);font-weight:600}
.op:hover{background:var(--tarjeta);color:var(--texto);text-decoration:none}
.op.on{background:linear-gradient(90deg,rgba(34,195,230,.18),rgba(123,97,255,.08));color:var(--texto);box-shadow:inset 3px 0 0 var(--acento)}
.op span{flex:1;min-width:0}.op.sub{padding:6px 10px 6px 38px;font-weight:500;font-size:.93rem}
.sub-grupo{display:block;padding:8px 10px 2px 38px;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tenue)}
.bloque{margin-top:6px}
.bloque-cab{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:10px;color:var(--tenue);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.bloque-cab:hover{color:var(--texto)}.bloque-cab span{flex:1}.bloque-cab svg:last-child{transition:transform .2s}
.bloque[data-abierto] .bloque-cab svg:last-child{transform:rotate(180deg)}
.bloque-cuerpo{display:none}.bloque[data-abierto] .bloque-cuerpo{display:block}
.bloque[data-abierto] .aviso-bloque{display:none}
.nb,.aviso-bloque{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--alerta);color:#fff;font:700 .72rem/20px Manrope,sans-serif;text-align:center}
.nb.punto{position:absolute;top:4px;right:2px;min-width:16px;height:16px;line-height:16px;font-size:.65rem}
.menu-pie{border-top:1px solid var(--borde);padding:8px 10px}
.velo{position:fixed;inset:0;background:rgba(3,8,16,.6);z-index:30}
.area{min-height:100vh;display:flex;flex-direction:column}
@media(min-width:1024px){
  .menu{transform:none}.velo{display:none!important}
  .area{margin-left:var(--menu);transition:margin .2s}
  html.menu-oculto .menu{transform:translateX(-100%)}html.menu-oculto .area{margin-left:0}
  html.menu-oculto .menu.abierto{transform:none}
}
.solo-escritorio{display:none}@media(min-width:1024px){.solo-escritorio{display:inline-flex}}

/* Barra superior */
.barra{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(11,20,36,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--borde)}
.ruta{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tenue);font-size:.9rem}.ruta b{color:var(--texto)}
.buscar{display:none;align-items:center;gap:6px;background:var(--tarjeta);border:1px solid var(--borde);border-radius:10px;padding:0 10px;color:var(--tenue)}
.buscar input{background:none;border:0;color:var(--texto);padding:8px 0;width:260px;font:inherit}.buscar input:focus{outline:none}
@media(min-width:760px){.buscar{display:flex}}
.ib{all:unset;box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;color:var(--suave);cursor:pointer}
.ib:hover{background:var(--tarjeta);color:var(--texto)}
.chip-modo{padding:4px 10px;border-radius:20px;background:rgba(245,184,61,.15);color:var(--aviso);font-size:.78rem;font-weight:700;white-space:nowrap}

.contenido{padding:16px 14px 90px;max-width:1280px;width:100%}
@media(min-width:760px){.contenido{padding:22px 26px 60px}}
.cargando{color:var(--tenue);padding:30px 0}
.cab-pagina{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.cab-pagina h1{margin:0}

/* Tarjetas, rejillas */
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:16px;margin-bottom:14px}
.tarjeta>h2:first-child,.tarjeta>h3:first-child{margin-top:0}
.rejilla{display:grid;gap:12px}
.r4{grid-template-columns:repeat(2,1fr)}
@media(max-width:639px){.kpi b{font-size:1.25rem}.kpi small:last-child{display:none}}
@media(min-width:640px){.r2{grid-template-columns:repeat(2,1fr)}.r3{grid-template-columns:repeat(3,1fr)}.r4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.r4{grid-template-columns:repeat(4,1fr)}.r-emitir{grid-template-columns:1fr 340px;align-items:start}}
.kpi{background:linear-gradient(160deg,var(--tarjeta2),var(--tarjeta));border:1px solid var(--borde);border-radius:var(--radio);padding:14px}
.kpi small{color:var(--tenue);font-weight:600}.kpi b{display:block;font:600 1.6rem/1.2 var(--mono);margin-top:4px}
.kpi.alerta b{color:var(--alerta)}.kpi.aviso b{color:var(--aviso)}.kpi.ok b{color:var(--ok)}
a.kpi{display:block;color:inherit}a.kpi:hover{text-decoration:none;border-color:var(--acento)}

/* Formularios */
.campo{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.88rem;color:var(--suave)}
input,select,textarea{width:100%;background:#0F1B30;border:1px solid var(--borde);border-radius:10px;color:var(--texto);padding:10px 12px;font:500 15px Manrope,sans-serif}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px rgba(34,195,230,.18)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--acento) 50%),linear-gradient(135deg,var(--acento) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
select option{background:var(--tarjeta);color:var(--texto)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--acento)}
input::placeholder{color:var(--tenue)}
.fila{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.fila>*{flex:1 1 160px}
.check{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--suave)}
.clave{position:relative;display:block}.clave input{padding-right:84px}
.ojo{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:var(--tarjeta2);border:1px solid var(--borde);color:var(--suave);border-radius:8px;padding:4px 10px;font:600 .8rem Manrope,sans-serif;cursor:pointer}
.ayuda-campo{font-weight:500;color:var(--tenue);font-size:.82rem}
.error{color:var(--alerta);font-weight:600;font-size:.88rem;margin:6px 0}
.invalido{border-color:var(--alerta)!important}
.err-campo{color:var(--alerta);font-weight:600;font-size:.8rem}
.segmentado{display:inline-flex;background:#0F1B30;border:1px solid var(--borde);border-radius:12px;padding:3px;gap:3px}
.segmentado button{all:unset;cursor:pointer;padding:8px 16px;border-radius:9px;font-weight:700;color:var(--suave)}
.segmentado button[aria-pressed=true]{background:linear-gradient(90deg,var(--acento),var(--acento2));color:#04121C}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--borde);background:var(--tarjeta2);color:var(--texto);border-radius:10px;padding:9px 14px;font:700 .92rem Manrope,sans-serif;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--acento);text-decoration:none}
.btn.primario{background:linear-gradient(90deg,var(--acento),var(--acento2));color:#04121C;border:0}
.btn.primario:hover{filter:brightness(1.08)}
.btn.peligro{border-color:rgba(242,97,122,.5);color:var(--alerta);background:rgba(242,97,122,.08)}
.btn.chico{padding:6px 10px;font-size:.82rem}.btn.ancho{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.acciones{display:flex;flex-wrap:wrap;gap:8px}

/* Tablas */
.tabla-env{overflow-x:auto;border:1px solid var(--borde);border-radius:var(--radio)}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--borde);vertical-align:top}
th{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tenue);background:#101D33;position:sticky;top:0}
tbody tr:hover{background:rgba(34,195,230,.05)}
tr.clic{cursor:pointer}
td.n,th.n{text-align:right}
.lista-movil{display:flex;flex-direction:column;gap:8px}
.item-movil{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:12px;display:grid;grid-template-columns:1fr auto;gap:4px 10px;color:inherit}
.item-movil:hover{text-decoration:none;border-color:var(--acento)}
.item-movil span{color:var(--tenue);font-size:.85rem}
@media(max-width:759px){.solo-tabla{display:none}}@media(min-width:760px){.solo-movil{display:none}}

/* Estados */
.estado{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.78rem;font-weight:700;white-space:nowrap;background:rgba(159,176,200,.12);color:var(--suave)}
.estado.ok{background:rgba(45,212,164,.14);color:var(--ok)}.estado.aviso{background:rgba(245,184,61,.14);color:var(--aviso)}
.estado.alerta{background:rgba(242,97,122,.14);color:var(--alerta)}.estado.info{background:rgba(34,195,230,.14);color:var(--info)}
.etq-sim{font-size:.7rem;font-weight:800;color:var(--aviso);border:1px solid rgba(245,184,61,.4);border-radius:6px;padding:1px 6px;margin-left:6px}
.alerta-caja{border-radius:var(--radio);padding:12px 14px;margin-bottom:14px;border:1px solid}
.alerta-caja.aviso{background:rgba(245,184,61,.08);border-color:rgba(245,184,61,.35);color:#F8D58C}
.alerta-caja.alerta{background:rgba(242,97,122,.08);border-color:rgba(242,97,122,.35);color:#F7A8B6}
.alerta-caja.info{background:rgba(34,195,230,.07);border-color:rgba(34,195,230,.3);color:#9BE3F3}
.alerta-caja ul{margin:6px 0 0;padding-left:18px}

/* Totales y detalle */
.totales dl{display:grid;grid-template-columns:1fr auto;gap:6px 14px;margin:0}
.totales dt{color:var(--suave)}.totales dd{margin:0;font-family:var(--mono);text-align:right}
.totales .total{font-size:1.25rem;font-weight:700;color:var(--texto)}
.ficha{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}.ficha dt{color:var(--tenue)}.ficha dd{margin:0;word-break:break-word}
.items-ed{display:flex;flex-direction:column;gap:10px}
.item-ed{display:grid;gap:8px;grid-template-columns:1fr 1fr;background:#0F1B30;border:1px solid var(--borde);border-radius:var(--radio);padding:10px;position:relative}
.item-ed .desc{grid-column:1/-1}
@media(min-width:640px){.item-ed{grid-template-columns:1.4fr .8fr 1fr 1fr 38px;align-items:end}}
.item-ed .quitar{align-self:center}
.historial{font-size:.85rem}.historial td{padding:6px 10px}

/* Modal y avisos */
dialog{background:var(--tarjeta);color:var(--texto);border:1px solid var(--borde);border-radius:16px;padding:0;width:min(640px,94vw);max-height:90vh}
dialog::backdrop{background:rgba(3,8,16,.7)}
.modal-cab{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--borde)}.modal-cab h2{margin:0}
.modal-cuerpo{padding:16px;overflow-y:auto;max-height:calc(90vh - 130px)}
.modal-pie{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--borde)}
.avisos{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:8px;z-index:60;max-width:min(420px,92vw)}
.toast{background:var(--tarjeta2);border:1px solid var(--borde);border-left:4px solid var(--acento);border-radius:10px;padding:10px 14px;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.toast.mal{border-left-color:var(--alerta)}.toast.bien{border-left-color:var(--ok)}
.paginar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;color:var(--tenue);font-size:.88rem}
.pestanas{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px}
.pestanas a,.pestanas button{all:unset;cursor:pointer;padding:8px 14px;border-radius:10px;font-weight:700;color:var(--suave);background:var(--tarjeta);border:1px solid var(--borde);white-space:nowrap}
.pestanas .on{color:#04121C;background:linear-gradient(90deg,var(--acento),var(--acento2));border-color:transparent}
.vacio{color:var(--tenue);text-align:center;padding:24px}
.token-caja{font-family:var(--mono);background:#0F1B30;border:1px dashed var(--acento);border-radius:10px;padding:12px;word-break:break-all}
code{font-family:var(--mono);background:#0F1B30;border-radius:6px;padding:1px 6px}

/* Acceso */
.pantalla-acceso{display:grid;place-items:center;padding:20px;background:radial-gradient(800px 400px at 20% 0%,rgba(34,195,230,.12),transparent),radial-gradient(700px 400px at 100% 100%,rgba(123,97,255,.12),transparent),var(--fondo)}
.acceso{width:min(400px,100%)}.acceso .sub{text-align:center;color:var(--tenue);margin:6px 0 18px}
.acceso form{display:flex;flex-direction:column;gap:12px;padding:22px}

/* Ayuda */
.buscador-ayuda{margin-bottom:14px}
.bloque-ayuda h2{display:flex;align-items:center;gap:10px}
.num-ayuda{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--acento),var(--secundario));color:#04121C;font-weight:800;font-size:.85rem}
.bloque-ayuda ol{margin:0;padding-left:22px;color:var(--suave)}.bloque-ayuda li{margin:6px 0}
mark{background:rgba(34,195,230,.25);color:var(--texto);border-radius:3px}
.item-movil .estado{justify-self:end;align-self:start}