:root{color-scheme:dark;--bg:#071018;--panel:#0d1b27;--line:rgba(94,234,212,.28);--cyan:#5eead4;--ink:#e8f1f4;--muted:#93a4b0;--amber:#f6c177;--bad:#ff8b8b}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,sans-serif;background:
  radial-gradient(1000px 480px at 15% -10%,rgba(14,116,144,.35),transparent 55%),
  #071018;color:var(--ink)}
body.consulta{height:100vh;overflow:hidden;display:flex;flex-direction:column}
.top{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:1px solid var(--line);background:rgba(7,16,24,.92);flex:0 0 auto}
.brand b{letter-spacing:.14em}
.brand span,.right span{color:var(--muted);margin-left:8px}
nav{display:flex;gap:8px}
nav a,.right a{color:var(--cyan);text-decoration:none}
nav a{padding:6px 10px;border-radius:999px}
nav a.on{background:rgba(94,234,212,.12)}
.right{display:flex;gap:14px;align-items:center}
.saldo{color:var(--cyan)!important;font-weight:800}
.app{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 12px 10px;overflow:hidden}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:0 0 auto}
.mode{text-align:left;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:#0b1722;color:var(--ink);cursor:pointer}
.mode span{display:block;margin-top:2px;color:var(--muted);font-size:12px}
.mode.on{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(94,234,212,.3)}
.lead{color:var(--muted);margin:6px 0;font-size:13px;flex:0 0 auto}
.work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:10px}
.stage{position:relative;min-height:0;height:100%;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:
  linear-gradient(rgba(94,234,212,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(94,234,212,.05) 1px,transparent 1px),
  #08141d;background-size:28px 28px,28px 28px,auto;padding:8px;overflow:hidden}
.drop{flex:1;border:1px dashed rgba(94,234,212,.45);border-radius:14px;background:rgba(8,20,29,.65);color:var(--ink);cursor:pointer}
.drop strong{display:block;font-size:20px}
.drop em{color:var(--muted);font-style:normal}
.duo{position:relative;flex:1;min-height:0;display:flex;gap:8px}
.frame{position:relative;flex:1;min-width:0;min-height:0;display:flex;border-radius:14px;overflow:hidden;background:#050d14;box-shadow:inset 0 0 0 1px rgba(94,234,212,.35)}
.frame::before,.frame::after{content:"";position:absolute;width:18px;height:18px;z-index:3;pointer-events:none;border:2px solid var(--cyan)}
.frame::before{top:8px;left:8px;border-right:0;border-bottom:0}
.frame::after{right:8px;bottom:8px;border-left:0;border-top:0}
.shot{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.fit{position:relative;line-height:0}
.fit img{display:block;width:100%;height:100%}
.fit canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.scan{position:absolute;left:0;right:0;height:22%;top:-24%;z-index:2;pointer-events:none;background:linear-gradient(rgba(94,234,212,0),rgba(94,234,212,.45),rgba(94,234,212,0));opacity:0}
.frame.is-scan .scan{opacity:1;animation:sweep 1.15s linear infinite}
@keyframes sweep{from{top:-24%}to{top:105%}}
.tag{position:absolute;left:10px;top:10px;z-index:4;font-size:11px;letter-spacing:.14em;color:#04221e;background:var(--cyan);border-radius:999px;padding:3px 8px}
#links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.load{position:absolute;left:10px;right:10px;top:8px;z-index:6}
.load-bar{height:4px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.load-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#0f766e,#5eead4,#f6c177);background-size:200% 100%;animation:shimmer 1.1s linear infinite}
@keyframes shimmer{from{background-position:0 0}to{background-position:200% 0}}
.load span{display:block;margin-top:4px;font:11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;color:var(--cyan)}
.readout{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;flex:0 0 auto;max-height:28px;overflow:hidden}
.chip{font:11px/1.2 ui-monospace,Menlo,Consolas,monospace;padding:3px 7px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.chip.on{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 10px rgba(94,234,212,.25)}
.side{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px;min-height:0;overflow:auto}
label{display:block;margin:6px 0 4px;color:var(--muted);font-size:13px}
input,button.go,button.ghost{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#071018;color:var(--ink)}
button.go{margin-top:10px;border:0;font-weight:800;cursor:pointer;background:linear-gradient(90deg,#0f766e,#2dd4bf);color:#04221e}
button.go:disabled{opacity:.45;cursor:wait}
button.ghost{margin-top:8px;cursor:pointer;color:var(--cyan);background:transparent}
.fine,.fichas{color:var(--muted);font-size:12px}
.fichas{font-family:ui-monospace,Menlo,Consolas,monospace}
.alert{padding:8px 10px;border-radius:12px;margin:8px 0;font-size:13px}
.bad{background:rgba(255,139,139,.1);border:1px solid rgba(255,139,139,.35)}
.ok{background:rgba(94,234,212,.1);border:1px solid var(--line)}
.gauge{margin-top:8px;display:grid;grid-template-columns:72px 1fr;gap:8px;align-items:center}
.ring{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--cyan) calc(var(--p)*1%),rgba(255,255,255,.08) 0)}
.ring span{width:52px;height:52px;border-radius:50%;background:#071018;display:grid;place-items:center;font-weight:800;font-size:13px}
.gauge .weak{color:var(--amber)}
.gauge .miss{color:var(--bad)}
.cards{display:flex;gap:8px;flex:0 0 auto;overflow-x:auto;overflow-y:hidden;margin-top:6px;padding-bottom:6px;cursor:grab;scrollbar-width:thin}
.card.on{box-shadow:0 0 0 2px var(--cyan)}
.cards:empty{display:none}
.card{width:150px;flex:0 0 150px;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;animation:rise .4s ease both}
.card .mini{height:86px;display:flex;align-items:center;justify-content:center;position:relative;background:#050d14}
.card .cfit{position:relative;line-height:0}
.card .cfit img{width:100%;height:100%;display:block}
.card .cfit canvas{position:absolute;inset:0;width:100%;height:100%}
.card .meta{padding:6px 8px}
.card b{font-size:12px}
.card .fine{font-size:11px}
.bar{height:4px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:4px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#0f766e,var(--cyan));width:0}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bill{max-width:1180px;margin:0 auto;padding:18px 16px 48px}
.bill h1{color:var(--cyan);margin-bottom:0}
.bill-grid{display:grid;grid-template-columns:minmax(280px,.8fr) 1.2fr;gap:16px}
.packs{display:flex;gap:8px;margin-top:8px}
.packs button,.pick button{border:1px solid var(--line);background:#071018;color:var(--ink);border-radius:999px;padding:8px 12px;cursor:pointer}
.pick{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto;margin-top:8px}
.pick button{text-align:left;border-radius:10px}
.check{display:flex;gap:8px;align-items:center;color:var(--ink)}
.check input{width:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:8px;border-bottom:1px solid var(--line);text-align:left}
th{color:var(--cyan);font-size:11px;letter-spacing:.06em}
.table-wrap{overflow:auto;max-height:420px}
[hidden]{display:none !important}
body[data-mode="buscar"] .solo-dni{display:none}
body[data-mode="verificar"] .solo-buscar{display:none}
.ages{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.frame.is-out{animation:toss .45s ease}
@keyframes toss{50%{filter:saturate(.2);opacity:.45}100%{opacity:1}}
.narrow{max-width:420px;margin:40px auto;padding:0 16px}
@media(max-width:800px){
  body.consulta{height:auto;overflow:auto}
  .work{grid-template-columns:1fr}
  .stage{min-height:62vh}
  .duo{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  .frame.is-scan .scan,.card,.load-bar i{animation:none}
}