:root{--bg:#0f1420;--panel:#171e2e;--panel2:#1e2740;--line:#2b3654;--tx:#e6eaf5;--mut:#93a0bf;--ok:#3ecf8e;--warn:#f5b342;--err:#f0616d;--acc:#6c8cff;--deuna:#a78bfa;--alod:#38bdf8;--rail:#fbbf24;--aloc:#34d399}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
header{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap}
h1{margin:0;font-size:20px}header p{margin:2px 0 0;color:var(--mut);font-size:13px}
h2{margin:0 0 10px;font-size:16px}h3{margin:14px 0 6px;font-size:14px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.hbtns{display:flex;gap:8px}
button{background:var(--panel2);color:var(--tx);border:1px solid var(--line);border-radius:8px;padding:8px 12px;cursor:pointer;font:inherit}
button:hover{border-color:var(--acc)}button.primary{background:var(--acc);border-color:var(--acc);color:#0b1020;font-weight:600}
button.warn{border-color:var(--warn);color:var(--warn)}button.bad{border-color:var(--err);color:var(--err)}
nav{display:flex;gap:6px;padding:10px 24px;border-bottom:1px solid var(--line);overflow-x:auto}
nav button{white-space:nowrap;background:none;border:1px solid transparent}nav button.on{background:var(--panel2);border-color:var(--acc)}
#banner{margin:12px 24px 0;padding:12px 16px;border-radius:10px;background:#26325a;border:1px solid var(--acc);font-size:15px}
main{padding:16px 24px}
.grid{display:grid;gap:16px;grid-template-columns:minmax(300px,380px) 1fr}
.grid2{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(max-width:900px){.grid,.grid2{grid-template-columns:1fr}main,header,nav{padding-left:12px;padding-right:12px}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;min-width:0}
label{display:block;margin:8px 0 3px;color:var(--mut);font-size:12px}
input,select{width:100%;background:var(--bg);color:var(--tx);border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit}
input[type=checkbox]{width:auto;margin-right:6px}
.row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.row button{flex:1 1 auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--mut);font-weight:600;font-size:12px}
.num{text-align:right;font-variant-numeric:tabular-nums}
.tscroll{overflow:auto;max-height:420px}
.pill{display:inline-block;padding:1px 8px;border-radius:99px;font-size:11px;font-weight:600;border:1px solid var(--line)}
.MATCH,.CAPTURED,.APPROVED,.COMPLETADO,.REFUNDED,.pass{color:var(--ok);border-color:var(--ok)}
.PENDING,.AUTHORIZED,.PARTIALLY_REFUNDED,.pend{color:var(--warn);border-color:var(--warn)}
.EXCEPTION,.DECLINED,.UNKNOWN,.fail{color:var(--err);border-color:var(--err)}
.trace{max-height:460px;overflow:auto;font-size:13px}
.ev{display:grid;grid-template-columns:22px 108px 1fr;gap:6px;padding:4px 0;border-bottom:1px dashed var(--line)}
.ev .a{font-weight:700;font-size:11px;letter-spacing:.03em}
.a.DEUNA{color:var(--deuna)}.a.ALODIGA{color:var(--alod)}.a.FINSUS\/PROSA{color:var(--rail)}.a.ALOCASH{color:var(--aloc)}.a.SIM{color:var(--mut)}
.ev.ok .m{color:var(--ok)}.ev.err .m{color:var(--err)}.ev.warn .m{color:var(--warn)}.ev.req .m{color:var(--tx);font-weight:600}
pre{margin:0;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px;overflow:auto;font-size:12px;max-height:230px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.kpi{background:var(--panel2);border-radius:10px;padding:10px}.kpi b{display:block;font-size:18px}.kpi span{color:var(--mut);font-size:12px}
.steps li{padding:5px 0;list-style:none;border-bottom:1px dashed var(--line)}
.steps{padding:0;margin:0}.steps .ok::before{content:"✔ ";color:var(--ok)}.steps .no::before{content:"✖ ";color:var(--err)}
.steps small{color:var(--mut);display:block;margin-left:18px}
.gate{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--panel)}
.gate .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;font-size:13px}
.gate.pass{border-color:var(--ok)}.gate.pass .dot{background:var(--ok);color:#06210f;border-color:var(--ok)}
.sub{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.sub button.on{border-color:var(--acc);background:var(--panel2)}
.hint{color:var(--mut);font-size:12px;margin-top:6px}
footer{padding:16px 24px;color:var(--mut);font-size:12px;border-top:1px solid var(--line)}
.decision{border-left:4px solid var(--warn)}

.hbtns{align-items:center;flex-wrap:wrap}.voice{display:flex;align-items:center;margin:0;color:var(--tx);font-size:13px}.voice input{width:auto;margin-right:4px}#voiceRate{width:auto}
#banner{font-size:17px;line-height:1.5;position:sticky;top:0;z-index:5;box-shadow:0 6px 20px #0008}
.intro{background:var(--panel2);border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:10px;padding:12px 16px;margin-bottom:16px}
.intro b{display:block;margin-bottom:4px}.intro p{margin:4px 0;color:var(--mut)}
