:root{
  --bg:#0d1618; --surface:#14201f; --surface-2:#1b2827; --line:#2a3a3b;
  --ink:#e6eded; --muted:#9db0b2;
  --accent:#37b7c2; --accent-ink:#062a2e;
  --ok:#4bbe82; --warn:#e0b04a; --bad:#e0715c;
  --seam:#e0a340;
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0; height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* App shell */
#app{max-width:520px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--line); position:sticky; top:0;
  background:var(--bg); z-index:5;
}
.tb-left{display:flex; align-items:center; gap:10px}
.backbtn{
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  width:38px; height:38px; border-radius:10px; font-size:20px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.backbtn:active{background:var(--line)}
.backbtn.hidden{display:none}
.topbar .brand{font-weight:600; letter-spacing:-.01em}
.topbar .brand b{color:var(--accent)}
.topbar .step{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted)}
.screen{padding:20px 18px 96px; flex:1; display:none}
.screen.active{display:block; animation:fade .25s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.screen.active{animation:none}}

h1{font-size:22px; font-weight:600; margin:6px 0 4px; letter-spacing:-.01em}
.sub{color:var(--muted); font-size:14px; margin:0 0 20px}
h2{font-size:13px; font-family:"IBM Plex Mono",monospace; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); margin:22px 0 10px}

label{display:block; font-size:13px; color:var(--muted); margin:14px 0 6px}
input[type=text]{
  width:100%; background:var(--surface); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:12px 14px; font-size:16px; font-family:inherit;
}
input:focus,button:focus-visible,.zone:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.check{display:flex; gap:10px; align-items:flex-start; margin:18px 0; font-size:14px; color:var(--ink)}
.check input{margin-top:3px; width:18px; height:18px; accent-color:var(--accent)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:15px 18px; border-radius:12px; border:0; cursor:pointer;
  font-size:16px; font-weight:600; font-family:inherit;
  background:var(--accent); color:var(--accent-ink);
}
.btn.secondary{background:var(--surface); color:var(--ink); border:1px solid var(--line)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.small{width:auto; padding:10px 14px; font-size:14px}
.row{display:flex; gap:10px; margin-top:14px}
.row .btn{flex:1}

/* Zonas / checklist */
.zones{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px}
.zone{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:14px; text-align:left; color:var(--ink); cursor:pointer; font-size:14px;
  display:flex; flex-direction:column; gap:6px;
}
.zone .z-name{font-weight:600}
.zone .z-count{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted)}
.zone.done{border-color:var(--ok)}
.zone.done .z-count{color:var(--ok)}
.zone.current{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}

/* Cámara */
.cam-wrap{position:relative; border-radius:var(--r); overflow:hidden; background:#000; aspect-ratio:3/4}
video{width:100%; height:100%; object-fit:cover; display:block; background:#000}
.hud{position:absolute; inset:0; pointer-events:none; display:flex; flex-direction:column; justify-content:space-between}
.hud-top{display:flex; gap:8px; padding:12px; flex-wrap:wrap}
.metric{
  font-family:"IBM Plex Mono",monospace; font-size:11px; padding:4px 9px; border-radius:999px;
  background:#0009; color:#fff; display:flex; gap:6px; align-items:center; backdrop-filter:blur(4px);
}
.metric .dot{width:8px; height:8px; border-radius:50%}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)}
.guide{
  margin:12px; padding:10px 14px; border-radius:12px; text-align:center; font-weight:600;
  background:#000a; color:#fff; backdrop-filter:blur(4px); align-self:center;
}
.guide.ok{background:#0e7c86cc}
.guide.bad{background:#a34a2fdd}
.zone-pill{
  position:absolute; top:12px; right:12px; font-family:"IBM Plex Mono",monospace; font-size:11px;
  background:var(--accent); color:var(--accent-ink); padding:4px 10px; border-radius:999px; font-weight:600;
}
.cam-controls{display:flex; gap:10px; margin-top:14px}
.cam-controls .btn{flex:1}
.rec{color:var(--bad)}
.hint{font-size:12.5px; color:var(--muted); margin-top:12px; text-align:center}

/* Capturas / hallazgos */
.thumbs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px}
.thumb{position:relative; border-radius:10px; overflow:hidden; aspect-ratio:1; background:var(--surface-2)}
.thumb img,.thumb video{width:100%; height:100%; object-fit:cover}
.thumb .badge{position:absolute; left:4px; bottom:4px; font-family:"IBM Plex Mono",monospace;
  font-size:9px; background:#000a; color:#fff; padding:2px 5px; border-radius:5px}
.thumb.finding{outline:2px solid var(--warn)}

.list{display:flex; flex-direction:column; gap:10px; margin-top:8px}
.item{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  display:flex; justify-content:space-between; gap:10px; font-size:14px}
.item .meta{color:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:11.5px}
.sev{font-family:"IBM Plex Mono",monospace; font-size:11px; padding:2px 8px; border-radius:6px}
.sev.leve{background:#4bbe8222; color:var(--ok)}
.sev.moderada{background:#e0b04a22; color:var(--warn)}
.sev.severa{background:#e0715c22; color:var(--bad)}

/* Sheet (marcar hallazgo) */
.sheet{position:fixed; inset:0; background:#000a; display:none; align-items:flex-end; z-index:20}
.sheet.open{display:flex}
.sheet-inner{background:var(--surface); width:100%; max-width:520px; margin:0 auto;
  border-radius:18px 18px 0 0; padding:20px 18px 28px; border-top:1px solid var(--line)}
.opts{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.opt{background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  border-radius:999px; padding:9px 14px; font-size:14px; cursor:pointer}
.opt.sel{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600}

/* Chips (selector de tipo de inspeccion / filtros) */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.chip{background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  border-radius:999px; padding:9px 15px; font-size:14px; cursor:pointer;
  font-family:inherit; transition:all .12s; user-select:none}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
  font-weight:700; box-shadow:0 0 0 2px var(--accent) inset}

.summary{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:16px}
.summary .big{font-size:30px; font-weight:700; font-variant-numeric:tabular-nums}
.summary .lbl{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
pre.json{background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:14px;
  overflow:auto; font-size:11.5px; max-height:300px; color:var(--muted)}
.note{font-size:12.5px; color:var(--muted); margin-top:10px}
.warnbox{background:#e0b04a15; border:1px solid var(--warn); border-radius:10px; padding:12px 14px;
  font-size:13px; color:var(--ink); margin-top:16px}
.hidden{display:none !important}