:root{--azul:#1F4E78;--azul2:#2d6aa3;--fondo:#f3f5f8;--borde:#dde3ea;--texto:#1d2733;--gris:#6b7684;
--ok:#1e7d43;--okf:#e3f4e9;--warn:#9a6500;--warnf:#fff3d6;--err:#b3261e;--errf:#fde7e5}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden}
body{font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--texto);background:var(--fondo)}
h2{font-size:1.1rem;margin:0 0 .4rem}
.logo{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--azul);color:#fff;font-weight:700;font-size:.95rem}
.marca{display:flex;align-items:center;gap:.6rem;font-weight:650;font-size:1.15rem}
.btn{font:inherit;border:0;border-radius:8px;padding:.6rem 1.1rem;cursor:pointer}
.btn.primario{background:var(--azul);color:#fff;font-weight:600}
.btn.primario:hover{background:var(--azul2)}
.btn.secundario{background:#fff;color:var(--azul);border:1px solid var(--azul)}
.btn:disabled{opacity:.5;cursor:wait}
.btn.enlace{background:none;color:var(--azul);padding:0 0 0 .8rem;text-decoration:underline}
/* login */
.pantalla-login{min-height:100vh;display:grid;place-items:center;padding:1rem}
.caja-login{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:2rem;width:100%;max-width:380px;display:flex;flex-direction:column;gap:.9rem;box-shadow:0 8px 30px rgba(20,40,70,.08)}
.caja-login.ancha{max-width:460px}
.caja-login label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.9rem}
.caja-login input{font:inherit;padding:.6rem .7rem;border:1px solid var(--borde);border-radius:8px}
.caja-login input.codigo{font-size:1.5rem;letter-spacing:.3em;text-align:center}
.sub{color:var(--gris);margin:0}
.nota{color:var(--gris);font-size:.85rem;margin:0;text-align:center}
.nota code{display:inline-block;margin-top:.3rem;font-size:1rem;color:var(--texto);background:var(--fondo);padding:.2rem .5rem;border-radius:6px;word-break:break-all}
.error{background:var(--errf);color:var(--err);padding:.6rem .8rem;border-radius:8px}
.qr{align-self:center;width:200px;height:200px;image-rendering:pixelated}
.pasos{margin:0;padding-left:1.2rem}
/* panel */
.barra{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.5rem;background:#fff;border-bottom:1px solid var(--borde)}
.usuario{display:flex;align-items:center;color:var(--gris)}
.usuario form{margin:0}
main{max-width:1100px;margin:0 auto;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}
section{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:1.2rem 1.4rem}
.acciones{display:flex;flex-direction:column;gap:1rem}
.accion{display:flex;justify-content:space-between;align-items:center;gap:1.5rem}
.accion p{margin:0;color:var(--gris);max-width:640px}
.botones{display:flex;flex-direction:column;gap:.5rem;flex-shrink:0}
.cab-res{display:flex;justify-content:space-between;align-items:center}
.salida{margin-top:.5rem;background:#0f1b29;color:#dfe7f1;border-radius:10px;padding:1rem;min-height:180px;max-height:480px;overflow:auto;font:13px/1.5 ui-monospace,"Cascadia Mono",Consolas,monospace}
.salida p{margin:0 0 .15rem;white-space:pre-wrap}
.salida .vacio{color:#8a9bb0;font-family:system-ui,sans-serif}
.salida .titulo-ej{color:#9cc3ee;font-weight:700;margin-bottom:.5rem}
.l-warn{color:#ffd27a}.l-error{color:#ff9a90;font-weight:700}.l-ok{color:#7fe0a3;font-weight:700}
.l-espera{color:#8a9bb0;animation:parpadea 1.2s infinite}
.l-link a{color:#9cc3ee}
@keyframes parpadea{50%{opacity:.35}}
.etiqueta{font-size:.8rem;font-weight:600;padding:.15rem .55rem;border-radius:99px;white-space:nowrap}
.etiqueta:empty{display:none}
.e-ok{background:var(--okf);color:var(--ok)}.e-avisos{background:var(--warnf);color:var(--warn)}
.e-error,.e-sesion{background:var(--errf);color:var(--err)}.e-en-curso{background:#e6effa;color:var(--azul)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;color:var(--gris);font-weight:600;border-bottom:1px solid var(--borde);padding:.4rem}
td{border-bottom:1px solid var(--fondo);padding:.5rem .4rem;vertical-align:top}
tr.ver{cursor:pointer}tr.ver:hover{background:var(--fondo)}
td.vacio{color:var(--gris);text-align:center}
@media (max-width:700px){
  .accion{flex-direction:column;align-items:stretch}
  main{padding:.8rem}
  th:nth-child(5),td:nth-child(5){display:none}
}