/* ============================================================
   HLN Checklist — App do vistoriador
   Paleta navy/gold, mobile-first, tudo local (funciona offline)
   ============================================================ */
:root{
  --navy-900:#0A1D37;
  --navy-800:#0f2748;
  --navy-700:#16345f;
  --navy-600:#1e447a;
  --gold:#C9A227;
  --gold-soft:#E4C866;
  --gold-deep:#a9861a;
  --cream:#F7F5EF;
  --ink:#16233b;
  --muted:#6b7891;
  --line:#e4e7ee;
  --ok:#1f9d55;
  --ok-bg:#e7f6ee;
  --warn:#b7791f;
  --warn-bg:#fdf3e0;
  --err:#c53030;
  --err-bg:#fdecec;
  --radius:14px;
  --shadow:0 8px 30px rgba(10,29,55,.10);
  --shadow-lg:0 20px 50px rgba(10,29,55,.22);
  font-synthesis-weight:none;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  min-height:100dvh;
}
img{max-width:100%;display:block}
button{font-family:inherit}

/* ---------- Layout base ---------- */
.app{max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.topbar{
  background:var(--navy-900);
  color:#fff;
  padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:20;
  box-shadow:0 2px 12px rgba(10,29,55,.25);
}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark-logo{height:40px;width:auto;display:block;background:#fff;padding:5px 10px;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.brand .mark{
  font-weight:800;letter-spacing:.14em;font-size:1.05rem;color:#fff;
}
.brand .mark b{color:var(--gold)}
.brand .sub{font-size:.62rem;letter-spacing:.28em;color:var(--gold-soft);text-transform:uppercase;margin-top:-2px}
.net-pill{
  font-size:.68rem;font-weight:700;letter-spacing:.04em;
  padding:5px 10px;border-radius:999px;display:flex;align-items:center;gap:6px;
}
.net-pill .dot{width:8px;height:8px;border-radius:50%}
.net-on{background:rgba(31,157,85,.18);color:#a7e9c4}
.net-on .dot{background:#37d67a;box-shadow:0 0 0 3px rgba(55,214,122,.25)}
.net-off{background:rgba(197,48,48,.2);color:#f6b1b1}
.net-off .dot{background:#f06565}

.main{flex:1;padding:20px 18px 34px}
.screen{display:none;animation:fade .25s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Stepper ---------- */
.steps{display:flex;gap:6px;margin:0 0 22px}
.steps .s{flex:1;height:4px;border-radius:999px;background:var(--line)}
.steps .s.done{background:var(--gold)}
.steps .s.now{background:var(--navy-700)}

/* ---------- Tipografia ---------- */
h1.title{font-size:1.45rem;margin:0 0 6px;letter-spacing:-.01em;color:var(--navy-900)}
.lead{color:var(--muted);margin:0 0 22px;font-size:.95rem}
.eyebrow{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin:0 0 6px}

/* ---------- Card ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}

/* ---------- Formulario ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--navy-800);margin-bottom:6px}
.field .hint{font-size:.74rem;color:var(--muted);margin-top:4px}
.input{
  width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:11px;
  font-size:1rem;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s;
}
.input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.18)}
.input::placeholder{color:#aeb6c6}
.input.err{border-color:var(--err)}

.check{display:flex;gap:10px;align-items:flex-start;font-size:.83rem;color:var(--ink);cursor:pointer}
.check input{margin-top:3px;width:18px;height:18px;accent-color:var(--gold-deep);flex:none}

/* ---------- Botoes ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:15px 18px;border:none;border-radius:12px;
  font-size:1rem;font-weight:700;cursor:pointer;transition:transform .08s,filter .15s,background .15s;
}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--navy-900);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--navy-800)}
.btn-gold{background:var(--gold);color:var(--navy-900)}
.btn-gold:hover:not(:disabled){background:var(--gold-soft)}
.btn-ghost{background:#fff;color:var(--navy-800);border:1.5px solid var(--line)}
.btn-ghost:hover:not(:disabled){border-color:var(--navy-600)}
.btn-danger{background:var(--err-bg);color:var(--err);border:1.5px solid #f3c6c6}
.btn-row{display:flex;gap:10px;margin-top:18px}
.btn-row .btn{width:auto;flex:1}
.btn-sm{padding:11px 14px;font-size:.9rem}

/* ---------- Alertas ---------- */
.alert{border-radius:11px;padding:12px 14px;font-size:.86rem;margin-bottom:16px;display:flex;gap:9px;align-items:flex-start}
.alert-err{background:var(--err-bg);color:var(--err)}
.alert-ok{background:var(--ok-bg);color:var(--ok)}
.alert-warn{background:var(--warn-bg);color:var(--warn)}
.alert.hidden{display:none}

/* ---------- Escolha tipo (entrada/saida) ---------- */
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.type-card{
  border:2px solid var(--line);border-radius:var(--radius);padding:24px 16px;text-align:center;
  background:#fff;cursor:pointer;transition:all .15s;
}
.type-card:hover{border-color:var(--gold-soft)}
.type-card.sel{border-color:var(--gold);background:linear-gradient(180deg,#fffdf6,#fff);box-shadow:var(--shadow)}
.type-card .ico{font-size:2rem;margin-bottom:8px}
.type-card .t{font-weight:700;color:var(--navy-900)}
.type-card .d{font-size:.76rem;color:var(--muted);margin-top:3px}

/* ---------- Camera ---------- */
.cam-wrap{position:relative;background:#000;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;margin-bottom:14px}
.cam-wrap video{width:100%;height:100%;object-fit:cover}
.cam-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.cam-flash.on{animation:flash .35s ease}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}
.cam-rec{position:absolute;top:12px;left:12px;background:rgba(197,48,48,.92);color:#fff;font-size:.75rem;font-weight:700;padding:5px 10px;border-radius:999px;display:none;align-items:center;gap:6px}
.cam-rec.on{display:flex}
.cam-rec .blink{width:9px;height:9px;border-radius:50%;background:#fff;animation:blink 1s steps(2,start) infinite}
@keyframes blink{50%{opacity:0}}
.cam-switch{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.45);color:#fff;border:none;width:40px;height:40px;border-radius:50%;font-size:1.1rem;cursor:pointer}

.cam-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:8px}
.shutter{width:74px;height:74px;border-radius:50%;background:#fff;border:5px solid var(--navy-900);cursor:pointer;transition:transform .08s;flex:none}
.shutter:active{transform:scale(.9)}
.shutter.video{border-color:var(--err);background:var(--err)}
.cam-side{width:54px;height:54px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cam-side.active{border-color:var(--gold);background:#fffdf6}
.cam-side-ghost{visibility:hidden}

/* ---------- Seleção de cômodo ---------- */
.comodo-pick{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 12px 10px;margin-bottom:12px;box-shadow:var(--shadow)}
.comodo-head{font-size:.82rem;font-weight:600;color:var(--navy-800);margin-bottom:9px}
.comodo-head b{color:var(--gold-deep)}
.comodo-chips{display:flex;flex-wrap:wrap;gap:7px}
.comodo-outro{margin-top:9px}
.comodo-outro.hidden{display:none}
.chip{padding:8px 13px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--navy-800);font-size:.83rem;font-weight:600;cursor:pointer;transition:all .12s;white-space:nowrap}
.chip:active{transform:scale(.96)}
.chip.active{background:var(--gold);border-color:var(--gold);color:var(--navy-900);box-shadow:0 2px 8px rgba(201,162,39,.35)}

/* Aviso de duração de vídeo */
.aviso-video{background:#fdf3e0;border:1px solid #f0dca8;color:#8a6416;border-radius:11px;padding:10px 13px;font-size:.82rem;margin-bottom:14px;line-height:1.45}
.aviso-video b{color:#6b4d0f}

/* Obturador/controles bloqueados até escolher cômodo */
.cam-controls.trava .shutter{opacity:.4;pointer-events:none;border-color:var(--muted)}
.cam-controls.trava .cam-side{opacity:.4;pointer-events:none}
.btn-row.trava .btn{opacity:.5;pointer-events:none}

.cam-fallback{padding:14px;border:1.5px dashed var(--line);border-radius:12px;text-align:center;color:var(--muted);font-size:.85rem;margin-bottom:14px}
.cam-fallback input{display:none}

/* ---------- Galeria de capturas ---------- */
.gallery-head{display:flex;align-items:center;justify-content:space-between;margin:18px 0 10px}
.gallery-head .count{font-weight:700;color:var(--navy-900)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#e9ecf3;border:1px solid var(--line)}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover}
.thumb .badge{position:absolute;bottom:4px;left:4px;right:4px;font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:6px;background:rgba(10,29,55,.8);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 8px)}
.thumb .st{position:absolute;top:4px;right:4px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.6rem}
.st-pend{background:var(--warn);color:#fff}
.st-ok{background:var(--ok);color:#fff}
.thumb .del{position:absolute;top:4px;left:4px;background:rgba(197,48,48,.9);color:#fff;border:none;width:20px;height:20px;border-radius:50%;font-size:.8rem;line-height:1;cursor:pointer}
.gallery-empty{grid-column:1/-1;text-align:center;color:var(--muted);font-size:.86rem;padding:26px 0}

/* ---------- Sync bar ---------- */
.syncbar{
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:11px 14px;margin-bottom:16px;font-size:.83rem;box-shadow:var(--shadow)
}
.syncbar .ic{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;font-size:.9rem}
.syncbar.state-ok .ic{background:var(--ok-bg);color:var(--ok)}
.syncbar.state-pend .ic{background:var(--warn-bg);color:var(--warn)}
.syncbar.state-off .ic{background:var(--err-bg);color:var(--err)}
.syncbar .txt{flex:1}
.syncbar .txt b{display:block;color:var(--navy-900)}
.syncbar .txt span{color:var(--muted);font-size:.76rem}
.spin{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--navy-700);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Resumo / concluido ---------- */
.done-hero{text-align:center;padding:14px 0 8px}
.done-hero .seal{width:88px;height:88px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:flex;align-items:center;justify-content:center;font-size:2.6rem;margin:0 auto 16px}
.summary{list-style:none;padding:0;margin:18px 0 0}
.summary li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.summary li:last-child{border-bottom:none}
.summary .k{color:var(--muted)}
.summary .v{font-weight:600;text-align:right;color:var(--navy-900)}

.foot-note{text-align:center;color:var(--muted);font-size:.72rem;margin-top:24px;line-height:1.5}
.lgpd-box{background:#fbfaf5;border:1px solid var(--line);border-radius:11px;padding:13px 14px;font-size:.78rem;color:var(--muted);margin-bottom:16px;line-height:1.55}

/* login logo */
.login-hero{text-align:center;margin:14px 0 26px}
.login-hero .logo-img{width:210px;max-width:72%;height:auto;display:block;margin:0 auto 4px}
.login-hero .logo{font-size:2rem;font-weight:800;letter-spacing:.14em;color:var(--navy-900)}
.login-hero .logo b{color:var(--gold-deep)}
.login-hero .tag{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);margin-top:2px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}