:root{
  --navy:#0B1C3F; --navy2:#0d2a52; --petrol:#0d4f6b; --ink:#132433; --mut:#5b6b78;
  --copper:#bf7116; --ok:#1f9d55; --warn:#d97706; --bad:#d64545;
  --paper:#eef2f5; --card:#fff; --line:#d7e0e7; --line2:#c9d6de;
  --r:10px; --shadow:0 1px 2px rgba(11,28,63,.06),0 10px 26px -20px rgba(11,28,63,.3);
  --disp:'Archivo',sans-serif; --body:'IBM Plex Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0; font:15px/1.55 var(--body); color:var(--ink);
  background:
    radial-gradient(1100px 380px at 85% -8%, rgba(13,79,107,.10), transparent 60%),
    linear-gradient(rgba(13,79,107,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,79,107,.045) 1px, transparent 1px),
    var(--paper);
  background-size:auto,26px 26px,26px 26px,auto;
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes pulse{50%{opacity:.35}}

/* ---------- topo ---------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 18px;background:linear-gradient(180deg,var(--navy2),var(--navy));
  border-bottom:3px solid var(--copper);color:#e8eef4;box-shadow:0 2px 14px rgba(4,12,28,.35)}
.brand{display:flex;align-items:baseline;gap:8px;font-family:var(--disp)}
.brand-name{font-weight:800;font-size:19px}
.brand-sub{font-size:10.5px;font-weight:700;letter-spacing:3px;color:#f0b46a}
.hdr-logo{height:24px;width:auto}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#saveDot{width:10px;height:10px;border-radius:50%;background:#8aa0b3;transition:background .3s}
#saveDot[data-state="saving"]{background:var(--warn);animation:pulse 1s infinite}
#saveDot[data-state="saved"]{background:var(--ok)}
.btn-top{font:600 12.5px var(--body);color:#dfe9f1;background:transparent;
  border:1px solid rgba(255,255,255,.28);border-radius:8px;padding:7px 12px;cursor:pointer;
  transition:background .15s,transform .15s,border-color .15s}
.btn-top:hover{background:rgba(255,255,255,.13);transform:translateY(-1px)}
.btn-top.primary{background:linear-gradient(180deg,#d3831f,var(--copper));border-color:transparent;color:#fff;
  box-shadow:0 6px 14px -6px rgba(191,113,22,.65)}
.btn-top.primary:hover{background:linear-gradient(180deg,#c47a18,#a86210)}
.btn-top.danger:hover{border-color:#ff9d9d;color:#ffb3b3}

/* ---------- cartões ---------- */
#app{max-width:980px;margin:22px auto 90px;padding:0 16px;display:grid;gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:20px 22px;animation:rise .45s both}
.card:nth-child(2){animation-delay:.04s}.card:nth-child(3){animation-delay:.08s}
.card:nth-child(4){animation-delay:.12s}.card:nth-child(5){animation-delay:.16s}
.sec-title{margin:0 0 14px;font:800 17px/1.2 var(--disp);color:var(--navy);
  display:flex;align-items:center;gap:10px}
.sec-title::before{content:'';width:5px;height:20px;border-radius:3px;
  background:linear-gradient(180deg,#e09a3f,var(--copper))}

/* ---------- formulário ---------- */
.grid-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.grid-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--mut)}
.grid-form .full{grid-column:1/-1}
input[type=text],input[type=date],input[type=time],select,textarea{
  font:inherit;font-size:14px;color:var(--ink);background:#fbfcfd;
  border:1px solid var(--line2);border-radius:8px;padding:9px 11px;
  transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--petrol);
  box-shadow:0 0 0 3px rgba(13,79,107,.14)}
textarea{resize:vertical;min-height:64px}
.field-group{margin:14px 0}
.fg-label{display:block;font-size:11.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--mut);margin-bottom:8px}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;align-items:center;padding:7px 13px;
  border:1px solid var(--line2);border-radius:999px;background:#fff;font-size:13px;
  cursor:pointer;user-select:none;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip:hover{border-color:var(--petrol);transform:translateY(-1px);box-shadow:0 3px 8px -4px rgba(13,79,107,.4)}
.chip:has(input:checked){background:var(--navy);border-color:var(--navy);color:#fff;
  box-shadow:0 4px 10px -4px rgba(11,28,63,.5)}
.chip:has(input:focus-visible){outline:2px solid var(--copper);outline-offset:2px}

/* ---------- observações / ditado ---------- */
.obs-block{margin-top:14px;padding:12px 14px;background:#f7fafc;border:1px solid var(--line);border-radius:8px}
.obs-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.obs-label{font-size:12px;font-weight:600;color:var(--mut)}
.btn-mic{margin-left:auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);
  background:#fff;cursor:pointer;font-size:15px;transition:transform .15s,border-color .15s,background .15s}
.btn-mic:hover:not(:disabled){border-color:var(--copper);transform:scale(1.1)}
.btn-mic:disabled{opacity:.35;cursor:not-allowed}
.btn-mic.rec-on{background:var(--bad);border-color:var(--bad);animation:pulse 1.1s infinite}

/* ---------- instâncias (banheiros) ---------- */
.instancia{border:1px dashed var(--line2);border-radius:8px;padding:12px;margin:10px 0;background:#fbfdfe}
.inst-head{display:flex;gap:8px;margin-bottom:8px}
.inst-head input{flex:1}
.btn-icon{width:32px;border:1px solid var(--line2);background:#fff;border-radius:6px;cursor:pointer;transition:.15s}
.btn-icon:hover{border-color:var(--bad);color:var(--bad)}
.btn-add,.btn-add-foto{margin-top:12px;width:100%;padding:10px;border:1.5px dashed var(--line2);
  border-radius:8px;background:transparent;color:var(--petrol);font:600 13px var(--body);
  cursor:pointer;transition:.15s}
.btn-add:hover,.btn-add-foto:hover{border-color:var(--petrol);background:#f2f7fa}

/* ---------- fotos ---------- */
.fotos-area{margin-top:16px}
.fotos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.foto-slot{border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#fff;
  transition:transform .15s,box-shadow .15s}
.foto-slot:hover{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(11,28,63,.35)}
.foto-slot.empty{border-style:dashed;aspect-ratio:4/3;display:flex}
.addfoto{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:0;background:transparent;color:var(--mut);font:inherit;font-size:13px;cursor:pointer;transition:.15s}
.addfoto .plus{font-size:26px;line-height:1;color:var(--petrol)}
.addfoto:hover{background:#f2f7fa;color:var(--petrol)}
.foto{position:relative;aspect-ratio:4/3;background:#0d1820}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.fbar{position:absolute;inset:auto 0 0 0;display:flex;justify-content:flex-end;gap:6px;padding:6px;
  background:linear-gradient(transparent,rgba(4,12,28,.78));opacity:0;transition:opacity .2s}
.foto-slot:hover .fbar,.foto-slot:focus-within .fbar{opacity:1}
@media (hover:none){.fbar{opacity:1}}
.fbar button{width:30px;height:30px;border-radius:6px;border:0;background:rgba(255,255,255,.16);
  color:#fff;cursor:pointer;display:grid;place-items:center;transition:.15s}
.fbar button:hover{background:var(--copper)}
.fbar svg{width:16px;height:16px}
.leg-in{width:100%;border:0;border-top:1px solid var(--line);padding:8px 10px;font-size:12.5px;background:#fbfcfd}
.leg-in:focus{box-shadow:none;background:#fff}

/* ---------- assinaturas ---------- */
.decl{font-size:13.5px;color:var(--mut);margin:0 0 14px}
.assinaturas{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ass-col{text-align:center}
.ass-label{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--navy);margin-bottom:8px}
.sig-wrap{border:1px dashed var(--line2);border-radius:8px;background:#fdfefe;overflow:hidden}
.sig-pad{width:100%;height:150px;display:block;touch-action:none;cursor:crosshair}
.btn-sig-clear{margin-top:8px;border:1px solid var(--line2);background:#fff;border-radius:6px;
  padding:5px 12px;font-size:12px;cursor:pointer;transition:.15s}
.btn-sig-clear:hover{border-color:var(--bad);color:var(--bad)}
.ass-sub{font-size:11.5px;color:var(--mut);margin-top:6px}

/* ---------- toast / save / recuperar ---------- */
#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:90;
  background:var(--navy);color:#fff;padding:10px 18px;border-radius:8px;border-left:4px solid var(--copper);
  font-size:13.5px;box-shadow:0 10px 30px -10px rgba(4,12,28,.6);opacity:0;pointer-events:none;transition:.25s}
#toast.on{opacity:1;transform:translate(-50%,0)}
#recover{max-width:980px;margin:16px auto 0;padding:0 16px}
.rec-inner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff7ea;
  border:1px solid #ecd9b8;border-left:5px solid var(--copper);border-radius:10px;padding:14px 16px;
  animation:rise .4s both}
.rec-ico{font-size:22px}
.rec-txt b{display:block;font-family:var(--disp);color:var(--navy)}
.rec-txt span{font-size:12.5px;color:var(--mut)}
.rec-list{width:100%}
.rec-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 4px;border-top:1px dashed #ecd9b8;font-size:13px}
.rec-name{font-weight:600}
.rec-meta{color:var(--mut);font-size:12px}
.rec-acts{margin-left:auto;display:flex;gap:8px}
.rec-acts button{border-radius:7px;padding:6px 14px;font:600 12.5px var(--body);cursor:pointer;transition:.15s}
.rec-acts .go{background:var(--navy);border:1px solid var(--navy);color:#fff}
.rec-acts .go:hover{background:var(--navy2);transform:translateY(-1px)}
.rec-acts .no{background:#fff;border:1px solid var(--line2);color:var(--mut)}
.rec-acts .no:hover{border-color:var(--bad);color:var(--bad)}

/* ---------- gate de ativação ---------- */
.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(191,113,22,.20), transparent 55%),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    var(--navy);
  background-size:auto,28px 28px,28px 28px,auto}
.gate-card{width:min(430px,100%);background:#fff;border-radius:14px;padding:30px 28px;text-align:center;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);animation:rise .4s both}
.gate-kicker{font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--copper)}
.gate-title{font:800 24px/1.2 var(--disp);color:var(--navy);margin:8px 0 6px}
.gate-sub{font-size:13.5px;color:var(--mut);margin:0 0 20px}
#gateToken{width:100%;text-align:center;text-transform:uppercase;letter-spacing:2.5px;
  font:600 17px/1 ui-monospace,Consolas,monospace;padding:13px;border:2px solid var(--line2);border-radius:9px}
#gateToken:focus{border-color:var(--petrol);box-shadow:0 0 0 3px rgba(13,79,107,.14)}
#gateOk{width:100%;margin-top:12px;padding:12px;border:0;border-radius:9px;cursor:pointer;
  background:linear-gradient(180deg,#d3831f,var(--copper));color:#fff;
  font:700 13.5px var(--disp);letter-spacing:1.5px;text-transform:uppercase;
  box-shadow:0 6px 16px -6px rgba(191,113,22,.6);transition:transform .15s,box-shadow .15s}
#gateOk:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(191,113,22,.7)}
#gateOk:disabled{opacity:.6;cursor:wait}
#gateErro{min-height:18px;margin-top:10px;font-size:12.5px;color:var(--bad)}
.gate-note{margin-top:16px;font-size:11.5px;color:var(--mut)}

/* ---------- responsivo / acessibilidade ---------- */
@media (max-width:720px){
  .grid-form,.assinaturas{grid-template-columns:1fr}
  #app{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}