/* SOTREQ — Relatorios de Campo
   Interface pensada para dedo com luva, sol na tela e uma mao so. */

:root{
  --preto:#1A1A1A; --amarelo:#FFCD11; --cinza:#58595B;
  --fundo:#F4F4F5; --papel:#FFFFFF; --linha:#DEDEE0; --txt:#1C1C1E;
  --fraco:#6B6B70; --ok:#127C42; --alerta:#B45309; --erro:#B3261E;
  --selo-rasc-bg:#EEEEEE; --selo-rasc-tx:#555555;
  --selo-pend-bg:#FFF0C2; --selo-pend-tx:#7A5B00;
  --selo-env-bg:#D6F2E2;  --selo-env-tx:#0E5C33;
  --toque:52px;
}

/* O tema segue o aparelho e tambem uma escolha explicita do visualizador.
   So os tokens mudam — nenhum componente e pintado dentro destes blocos. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fundo:#131315; --papel:#1D1D20; --linha:#33333A; --txt:#F2F2F4;
    --fraco:#A0A0A8; --ok:#3FBF7F; --alerta:#F0A83C; --erro:#FF6B60;
    --selo-rasc-bg:#333338; --selo-rasc-tx:#CCCCD2;
    --selo-pend-bg:#4A3B00; --selo-pend-tx:#FFD976;
    --selo-env-bg:#12402A;  --selo-env-tx:#78E3AC;
  }
}
:root[data-theme="dark"]{
  --fundo:#131315; --papel:#1D1D20; --linha:#33333A; --txt:#F2F2F4;
  --fraco:#A0A0A8; --ok:#3FBF7F; --alerta:#F0A83C; --erro:#FF6B60;
  --selo-rasc-bg:#333338; --selo-rasc-tx:#CCCCD2;
  --selo-pend-bg:#4A3B00; --selo-pend-tx:#FFD976;
  --selo-env-bg:#12402A;  --selo-env-tx:#78E3AC;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--fundo); color:var(--txt);
  padding-bottom:env(safe-area-inset-bottom);
  overscroll-behavior-y:contain;
}

/* ------------------------------- topo ------------------------------- */
#topo{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px;
  background:var(--preto); color:#fff; padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
  border-bottom:3px solid var(--amarelo);
}
.marca{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.15; }
.marca strong{ font-size:15px; letter-spacing:.14em; }
.marca span{ font-size:12px; color:#B9B9BD; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ico{
  min-width:40px; height:40px; border:0; border-radius:10px; background:#2E2E33;
  color:#fff; font-size:20px; line-height:1; cursor:pointer;
}
.ico:active{ background:#414148; }

.barra{ font-size:13px; padding:0 14px; height:0; overflow:hidden; transition:height .15s; }
.barra.ativa{ height:auto; padding:8px 14px; }
.barra.pendente{ background:#3A2F00; color:var(--amarelo); }
.barra.offline{ background:#3A1E1B; color:#FFB4A8; }
.barra.enviando{ background:#0E2E1E; color:#7FE0AC; }

main{ padding:14px 14px 90px; max-width:820px; margin:0 auto; }

/* ------------------------------ blocos ------------------------------ */
h1{ font-size:20px; margin:4px 0 14px; }
h2{ font-size:15px; margin:22px 0 8px; color:var(--fraco); text-transform:uppercase; letter-spacing:.08em; }
p.ajuda{ font-size:13.5px; color:var(--fraco); margin:0 0 12px; }

.cartao{
  background:var(--papel); border:1px solid var(--linha); border-radius:14px;
  padding:14px; margin-bottom:10px;
}

.tipo{
  display:flex; gap:12px; align-items:center; width:100%; text-align:left;
  background:var(--papel); border:1px solid var(--linha); border-left:5px solid var(--amarelo);
  border-radius:14px; padding:14px; margin-bottom:10px; cursor:pointer; color:inherit;
  font:inherit; min-height:var(--toque);
}
.tipo:active{ background:var(--fundo); }
.tipo .emoji{ font-size:26px; width:34px; text-align:center; flex:none; }
.tipo .txt{ min-width:0; }
.tipo .txt b{ display:block; font-size:15.5px; }
.tipo .txt small{ color:var(--fraco); font-size:13px; }

/* ------------------------------ campos ------------------------------ */
label.campo{ display:block; margin:0 0 14px; }
label.campo > span{ display:block; font-size:13.5px; font-weight:600; margin-bottom:5px; }
label.campo .un{ font-weight:400; color:var(--fraco); }
label.campo .req{ color:var(--erro); }

input,select,textarea{
  width:100%; font:16px/1.35 inherit; color:var(--txt);
  background:var(--papel); border:1.5px solid var(--linha); border-radius:11px;
  padding:13px 12px; min-height:var(--toque);
}
textarea{ min-height:104px; resize:vertical; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--amarelo); box-shadow:0 0 0 3px rgba(255,205,17,.22); }
input[readonly]{ background:var(--fundo); color:var(--fraco); }
.faltando input,.faltando select,.faltando textarea{ border-color:var(--erro); }

/* ---------------------------- tabelas ------------------------------- */
.linhaTab{ background:var(--papel); border:1px solid var(--linha); border-radius:12px; padding:12px; margin-bottom:10px; position:relative; }
.linhaTab .num{ position:absolute; top:-9px; left:12px; background:var(--preto); color:#fff; font-size:11px; padding:2px 8px; border-radius:8px; }
.linhaTab label.campo:last-child{ margin-bottom:0; }
.linhaTab .lixo{ position:absolute; top:8px; right:8px; border:0; background:transparent; color:var(--erro); font-size:20px; cursor:pointer; width:34px; height:34px; }

/* ----------------------------- fotos -------------------------------- */
.fotos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.foto{ background:var(--papel); border:1px solid var(--linha); border-radius:12px; overflow:hidden; }
.foto img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:#000; }
.foto input{ border:0; border-top:1px solid var(--linha); border-radius:0; font-size:13px; min-height:44px; padding:8px 10px; }
.foto .barrinha{ display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; padding:4px 6px 6px; }
.foto .barrinha button{ border:0; background:transparent; color:var(--fraco); font-size:17px; cursor:pointer; width:36px; height:32px; }

/* ---------------------------- botoes -------------------------------- */
.bt{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  min-height:var(--toque); border:0; border-radius:12px; font:600 16px/1 inherit;
  cursor:pointer; padding:14px; margin-bottom:10px;
}
.bt.principal{ background:var(--amarelo); color:#1A1A1A; }
.bt.escuro{ background:var(--preto); color:#fff; }
.bt.borda{ background:transparent; border:1.5px solid var(--linha); color:var(--txt); }
.bt.perigo{ background:transparent; border:1.5px solid var(--erro); color:var(--erro); }
.bt:disabled{ opacity:.5; }
.bt:active{ transform:scale(.995); }
.linhaBt{ display:flex; gap:10px; }
.linhaBt .bt{ margin-bottom:10px; }

.rodape{
  position:fixed; left:0; right:0; bottom:0; z-index:15;
  background:var(--papel); border-top:1px solid var(--linha);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
}
.rodape .bt{ margin:0; max-width:792px; margin-inline:auto; }

/* ----------------------------- listas ------------------------------- */
.item{
  display:flex; gap:12px; align-items:center; background:var(--papel);
  border:1px solid var(--linha); border-radius:12px; padding:12px; margin-bottom:9px;
  cursor:pointer; width:100%; text-align:left; font:inherit; color:inherit;
}
.item .txt{ flex:1; min-width:0; }
.item .txt b{ display:block; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item .txt small{ color:var(--fraco); font-size:12.5px; }
.selo{ font-size:11px; font-weight:700; padding:4px 9px; border-radius:20px; flex:none; letter-spacing:.03em; }
.selo.rascunho{ background:var(--selo-rasc-bg); color:var(--selo-rasc-tx); }
.selo.pendente{ background:var(--selo-pend-bg); color:var(--selo-pend-tx); }
.selo.enviado{ background:var(--selo-env-bg);  color:var(--selo-env-tx); }

/* --------------------------- progresso ------------------------------ */
.passos{ display:flex; gap:6px; margin:0 0 16px; }
.passos i{ flex:1; height:5px; border-radius:3px; background:var(--linha); }
.passos i.feito{ background:var(--amarelo); }
.contaSecao{ font-size:12.5px; color:var(--fraco); margin-bottom:4px; letter-spacing:.05em; text-transform:uppercase; }

.aviso{
  position:fixed; left:14px; right:14px; bottom:calc(84px + env(safe-area-inset-bottom));
  background:var(--preto); color:#fff; padding:13px 16px; border-radius:12px;
  font-size:14px; z-index:40; box-shadow:0 8px 26px rgba(0,0,0,.3); max-width:600px; margin:auto;
}
.aviso.erro{ background:var(--erro); }
.aviso.ok{ background:var(--ok); }

.vazio{ text-align:center; color:var(--fraco); padding:36px 16px; font-size:14.5px; }
.chip{ display:inline-block; white-space:nowrap; font-size:12px; background:var(--fundo); border:1px solid var(--linha);
       border-radius:20px; padding:3px 10px; margin:0 6px 6px 0; color:var(--fraco); }
code.cam{ font-size:12.5px; word-break:break-all; color:var(--fraco); }
hr.sep{ border:0; border-top:1px solid var(--linha); margin:20px 0; }