:root{--fondo:#f4f7f8;--sup:#fff;--tinta:#111a20;--suave:#5d6b75;--linea:#dae1e6;--linea2:#e9eef1;
--acento:#0e7c86;--acento2:#e2f1f3;--ok:#2f6f4a;--ok2:#e4f0e8;--mal:#a3352b;--mal2:#f8e5e2;--av:#9a5b00;--av2:#f7eddc}
@media (prefers-color-scheme:dark){:root{--fondo:#0d1316;--sup:#161f24;--tinta:#e7eef1;--suave:#98a7b1;--linea:#26333a;--linea2:#1d272d;
--acento:#41bcc7;--acento2:#12343a;--ok:#71c194;--ok2:#17301f;--mal:#e38a80;--mal2:#3a1f1c;--av:#d9a15a;--av2:#33281a}}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--acento);text-decoration:none}a:hover{text-decoration:underline}
.marco{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
nav{background:var(--sup);border-right:1px solid var(--linea);padding:22px 14px;display:flex;flex-direction:column;gap:2px}
nav .marca{font-weight:600;font-size:15px;padding:0 10px 18px}
nav .marca small{display:block;color:var(--suave);font-weight:400;font-size:12px}
nav a{display:block;padding:7px 10px;border-radius:6px;color:var(--tinta)}
nav a:hover{background:var(--linea2);text-decoration:none}
nav a.activo{background:var(--acento2);color:var(--acento);font-weight:500}
nav .sep{margin:14px 10px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
nav .pie{margin-top:auto;padding:10px;font-size:13px;color:var(--suave)}
main{padding:30px 34px;max-width:1100px}
h1{font-size:24px;margin:0 0 6px;font-weight:600}
.sub{color:var(--suave);margin:0 0 22px}
h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--suave);margin:28px 0 10px;font-weight:600}
.caja{background:var(--sup);border:1px solid var(--linea);border-radius:10px;padding:20px}
table{width:100%;border-collapse:collapse;background:var(--sup);border:1px solid var(--linea);border-radius:10px;overflow:hidden}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--linea2);font-size:14px;vertical-align:top}
th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--suave);font-weight:500;background:var(--linea2)}
tr:last-child td{border-bottom:none}
.num{font-variant-numeric:tabular-nums;text-align:right}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:13px}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tarjeta{background:var(--sup);border:1px solid var(--linea);border-radius:10px;padding:14px 16px}
.tarjeta .v{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.tarjeta .k{font-size:12.5px;color:var(--suave)}
form.f{display:grid;gap:16px;max-width:680px}
label{display:block;font-weight:500;font-size:14px;margin-bottom:5px}
.ayuda{font-size:12.5px;color:var(--suave);margin-top:4px}
input[type=text],input[type=email],input[type=password],select,textarea{width:100%;padding:9px 11px;border:1px solid var(--linea);
border-radius:7px;background:var(--fondo);color:var(--tinta);font:inherit}
textarea{min-height:110px;font-family:ui-monospace,Menlo,monospace;font-size:13px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acento);outline-offset:1px}
button,.boton{display:inline-block;padding:9px 16px;border-radius:7px;border:1px solid var(--acento);background:var(--acento);
color:#fff;font:inherit;font-weight:500;cursor:pointer}
button.sec,.boton.sec{background:transparent;color:var(--acento)}
button.peligro{background:transparent;color:var(--mal);border-color:var(--mal)}
button:focus-visible,a:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.acciones{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.aviso{padding:10px 14px;border-radius:8px;margin:0 0 18px;font-size:14px;background:var(--ok2);color:var(--ok)}
.error{padding:10px 14px;border-radius:8px;margin:0 0 18px;font-size:14px;background:var(--mal2);color:var(--mal)}
.etq{display:inline-block;font-size:11px;padding:2px 8px;border-radius:99px;font-weight:500}
.etq.si{background:var(--ok2);color:var(--ok)}.etq.no{background:var(--linea2);color:var(--suave)}
.etq.pago{background:var(--av2);color:var(--av)}.etq.err{background:var(--mal2);color:var(--mal)}
.centro{min-height:100vh;display:grid;place-items:center;padding:20px}
.login{width:100%;max-width:380px}
.login h1{font-size:21px}
.qr{background:#fff;padding:12px;border-radius:8px;width:220px;margin:8px 0}
.qr svg{width:100%;height:auto;display:block}
.codigos{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;font-family:ui-monospace,Menlo,monospace;font-size:15px;
background:var(--fondo);padding:14px;border-radius:8px}
pre{background:var(--fondo);border:1px solid var(--linea);border-radius:8px;padding:12px;overflow-x:auto;font-size:12.5px}
@media (max-width:760px){.marco{grid-template-columns:1fr}nav{border-right:none;border-bottom:1px solid var(--linea)}main{padding:22px 16px}}