:root{color-scheme:dark;--bg:#07070c;--fg:#f3ebdf;--muted:#a49cb3;--oro:#ff9c2a;--lila:#c99bd6;--azul:#9fa3ff;--ok:#6fdc8c;--warn:#ffcc33;--crit:#ff5a4e;--panel:#11111b;--line:#2a2a3d}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 "Barlow","Segoe UI",system-ui,sans-serif;min-height:100vh;display:grid;place-items:center;padding:16px}
.marco{display:grid;grid-template-columns:90px minmax(0,1fr);gap:10px;width:min(560px,100%)}
.riel{display:flex;flex-direction:column;gap:6px}
.codo{height:56px;background:var(--oro);border-radius:26px 0 0 0}
.boton{background:var(--lila);color:#140d18;font-family:"Antonio","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:12px 8px 4px;text-align:right;min-height:48px}
.relleno{flex:1;background:var(--oro);border-radius:0 0 0 26px;min-height:60px}
.cuerpo{display:flex;flex-direction:column;gap:14px;min-width:0}
.tope{display:flex;gap:8px;align-items:center;height:24px}
.barra{flex:1;height:24px;background:var(--oro)}.barra.corta{flex:0 0 36px;background:var(--azul);border-radius:0 12px 12px 0}
.lbl{font-family:"Antonio","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--oro);font-size:1.2rem;white-space:nowrap}
h1,h2{font-family:"Antonio","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.05em;margin:0;font-weight:600}
h1{font-size:2.4rem}h2{font-size:1.1rem;color:var(--lila)}
.origen{margin:0;font-size:.9rem;padding:4px 12px;border-radius:999px;width:max-content;max-width:100%}
.origen.casa{background:#13301d;color:var(--ok)}.origen.fuera{background:#33290a;color:var(--warn)}
.error{margin:0;border-left:6px solid var(--crit);padding:8px 12px;background:#2a1010}
.nota{margin:0;color:var(--muted)}
.principal{display:block;text-align:center;background:var(--oro);color:#140c04;text-decoration:none;font-family:"Antonio","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:1.2rem;padding:12px;border-radius:999px}
.local{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
label{font-size:.85rem;color:var(--muted)}
input{background:#000;border:1px solid var(--line);color:var(--fg);border-radius:10px;padding:10px 12px;font:inherit}
button{margin-top:8px;background:var(--lila);color:#140d18;border:0;border-radius:999px;padding:10px;font-family:"Antonio","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:1.05rem;cursor:pointer}
:focus-visible{outline:2px solid var(--oro);outline-offset:2px}