:root{
  --bg:#0e1116; --bg2:#151a22; --card:#1a2029; --card2:#202834; --line:#2a323d;
  --ink:#e6edf3; --ink2:#f3f7fb; --muted:#8b98a8; --accent:#38bdf8; --accent-dim:#1f6b6f;
  --ok:#30a46c; --warn:#f5a623; --bad:#e5484d; --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%,rgba(56,189,248,.06),transparent),var(--bg);
  color:var(--ink);-webkit-font-smoothing:antialiased;padding-bottom:84px}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:760px;margin:0 auto;padding:1rem}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.9rem 1rem;
  background:rgba(21,26,34,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar .brand{font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:.5rem;color:var(--ink2)}
.topbar .brand .logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-dim));
  display:flex;align-items:center;justify-content:center;font-size:1rem}
.topbar .who{font-size:.78rem;color:var(--muted)}
.card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:16px;
  padding:1.1rem 1.15rem;margin-bottom:1rem;box-shadow:0 16px 38px -30px rgba(0,0,0,.9)}
.sec-t{color:var(--muted);font-size:.66rem;text-transform:uppercase;letter-spacing:.15em;font-weight:700;margin:.4rem 0 .7rem;
  display:flex;align-items:center;gap:.6rem}.sec-t::after{content:"";flex:1;height:1px;background:var(--line)}
label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin:.7rem 0 .3rem}
input,select,textarea{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:11px;color:var(--ink);
  padding:.7rem .8rem;font-size:1rem;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(56,189,248,.15)}
.money{font-family:var(--mono);font-size:1.4rem;font-weight:800}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;border:0;cursor:pointer;
  background:linear-gradient(180deg,var(--accent),#0ea5e9);color:#04121a;font-weight:800;font-size:1rem;
  padding:.85rem 1rem;border-radius:12px;transition:filter .15s,transform .1s}
.btn:active{transform:translateY(1px)}.btn:hover{filter:brightness(1.06)}
.btn.sec{background:var(--card2);color:var(--ink);border:1px solid var(--line)}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
.row{display:flex;gap:.6rem}.row>*{flex:1}
.pill{display:inline-block;font-size:.66rem;padding:.15rem .55rem;border-radius:999px;background:var(--bg2);border:1px solid var(--line);color:var(--ink2)}
.pill.boleta{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,var(--line))}
.pill.factura{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.doc{display:flex;align-items:center;gap:.8rem;padding:.75rem;border:1px solid var(--line);border-radius:13px;background:var(--card);margin-bottom:.55rem}
.doc .ic{width:42px;height:42px;border-radius:11px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.doc .main{flex:1;min-width:0}.doc .main .t{color:var(--ink2);font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc .main .s{font-size:.72rem;color:var(--muted);margin-top:.1rem}
.doc .amt{font-family:var(--mono);font-weight:800;color:var(--ink2);text-align:right;white-space:nowrap}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1rem}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.8rem}
.kpi .l{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
.kpi .v{font-family:var(--mono);font-size:1.15rem;font-weight:800;color:var(--ink2);margin-top:.25rem}
.fab{position:fixed;left:0;right:0;bottom:0;padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,var(--bg),transparent);z-index:30;max-width:760px;margin:0 auto}
.scanbox{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#000;position:relative;aspect-ratio:4/3}
.scanbox video{width:100%;height:100%;object-fit:cover}
.scanbox .hint{position:absolute;left:0;right:0;bottom:0;padding:.5rem;background:rgba(0,0,0,.55);font-size:.78rem;text-align:center}
.msg{padding:.7rem .9rem;border-radius:11px;font-size:.85rem;margin-bottom:.8rem}
.msg.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);border:1px solid color-mix(in srgb,var(--ok) 40%,var(--line));color:var(--ok)}
.msg.bad{background:color-mix(in srgb,var(--bad) 12%,transparent);border:1px solid color-mix(in srgb,var(--bad) 40%,var(--line));color:var(--bad)}
.msg.warn{background:color-mix(in srgb,var(--warn) 12%,transparent);border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));color:var(--warn)}
.muted{color:var(--muted)}.center{text-align:center}