/* Caixa de Pesca — mobile-first. Feito para ser usado com uma mão, de pé, na beira da água:
   alvo de toque grande, contraste alto, nada de hover como única pista. */

:root{
  --fundo:#0d1f24; --superficie:#132b31; --superficie2:#183840;
  --tinta:#e7f0ee; --tinta2:#9db3b0; --linha:#22454d;
  --agua:#4fb49c; --agua-fraca:#15332f;
  --areia:#d9a05b; --areia-fraca:#31281a;
  --ok:#5bc286; --atencao:#e0b04a; --risco:#e1776b;
  --raio:14px;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 🔴 O atributo `hidden` vale display:none pela folha do navegador, e QUALQUER regra de
   autor com `display` ganha dela. `.tela-login{display:grid}` deixava a tela de login
   visível por cima do app depois de entrar — bug que só apareceu na captura de tela,
   porque a lógica estava certa e todo teste funcional passava. */
[hidden]{display:none!important}
html,body{margin:0;background:var(--fundo);color:var(--tinta);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overscroll-behavior-y:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.2}

/* ---------------------------------------------------------------- login */
.tela-login{min-height:100dvh;display:grid;place-items:center;padding:24px}
.caixa-login{width:100%;max-width:380px;text-align:center}
.marca{font-size:56px;line-height:1}
.caixa-login h1{font-size:28px;margin:8px 0 4px;letter-spacing:-.02em}
.caixa-login .sub{color:var(--tinta2);margin:0 0 28px;font-size:15px}
.caixa-login form{display:grid;gap:14px;text-align:left}
label{display:grid;gap:6px;font-size:13px;color:var(--tinta2);font-weight:600}
input,select,textarea{background:var(--superficie);border:1px solid var(--linha);
  border-radius:12px;padding:14px;font-size:16px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--agua);outline-offset:1px;border-color:var(--agua)}
.primario{background:var(--agua);color:#06231d;border:0;border-radius:12px;
  padding:16px;font-weight:700;font-size:16px;cursor:pointer;min-height:52px}
.primario:disabled{opacity:.5}
.secundario{background:var(--superficie2);color:var(--tinta);border:1px solid var(--linha);
  border-radius:12px;padding:14px;font-weight:600;cursor:pointer;min-height:48px}
.link{background:none;border:0;color:var(--agua);text-decoration:underline;cursor:pointer;padding:8px}
.erro{color:var(--risco);font-size:14px;margin:0}
.dica{color:var(--tinta2);font-size:13px;margin:0}

/* ---------------------------------------------------------------- estrutura */
.topo{position:sticky;top:0;z-index:20;background:var(--fundo);
  border-bottom:1px solid var(--linha);padding:env(safe-area-inset-top) 0 0}
.topo-linha{display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;max-width:760px;margin:0 auto}
main{max-width:760px;margin:0 auto;padding:16px 16px 96px}
.abas{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;
  grid-template-columns:repeat(3,1fr);gap:4px;background:var(--superficie);
  border-top:1px solid var(--linha);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.abas button{background:none;border:0;border-radius:10px;padding:12px 4px;
  color:var(--tinta2);font-weight:600;font-size:13px;cursor:pointer;min-height:48px}
.abas button.ativa{background:var(--agua-fraca);color:var(--agua)}

/* ---------------------------------------------------------------- cartões */
.grupo{margin:0 0 26px}
.grupo h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta2);margin:0 0 10px}
.cartao{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);
  padding:14px;margin-bottom:10px}
.cartao.clicavel{cursor:pointer}
.cartao-topo{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.cartao h3{font-size:17px}
.cartao .meta{color:var(--tinta2);font-size:13.5px;margin-top:2px}
.selo{font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap}
.selo.pronto{background:#123024;color:var(--ok)}
.selo.parcial{background:var(--areia-fraca);color:var(--atencao)}
.barra{height:5px;background:var(--superficie2);border-radius:999px;margin:11px 0 0;overflow:hidden}
.barra i{display:block;height:100%;background:var(--agua);border-radius:999px}
.falta{margin:9px 0 0;font-size:13.5px;color:var(--atencao)}
.specs{margin:11px 0 0;display:grid;gap:5px;font-size:14px}
.specs div{display:flex;justify-content:space-between;gap:12px;
  border-bottom:1px dashed var(--linha);padding-bottom:5px}
.specs span:first-child{color:var(--tinta2)}
.specs b{font-weight:600;text-align:right}
.specs .proprio b{color:var(--areia)}
.vazio{text-align:center;color:var(--tinta2);padding:48px 16px}
.vazio .marca{font-size:44px;margin-bottom:8px}

/* ---------------------------------------------------------------- folha (bottom sheet) */
.folha[hidden]{display:none}
.folha{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end}
.folha-fundo{position:absolute;inset:0;background:#000a;backdrop-filter:blur(2px)}
.folha-corpo{position:relative;width:100%;max-height:92dvh;overflow-y:auto;
  background:var(--fundo);border-radius:20px 20px 0 0;border-top:1px solid var(--linha);
  padding:8px 16px calc(24px + env(safe-area-inset-bottom));
  max-width:760px;margin:0 auto}
.folha-corpo::before{content:"";display:block;width:40px;height:4px;border-radius:999px;
  background:var(--linha);margin:6px auto 14px}
.folha h2{font-size:20px;margin:0 0 4px}
.folha .sub{color:var(--tinta2);font-size:14px;margin:0 0 16px}

/* ---------------------------------------------------------------- formulário gerado */
.campo{margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid var(--linha)}
.campo:last-of-type{border-bottom:0}
.campo-cab{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.campo-cab strong{font-size:15px}
.tag{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px}
.tag.obrig{background:#3a1f1c;color:var(--risco)}
.tag.chave{background:var(--agua-fraca);color:var(--agua)}
.tag.naocomp{background:var(--areia-fraca);color:var(--atencao)}
/* O círculo é desenhado pelo CSS e a letra é um "i" comum: o caractere ⓘ (U+24D8) não
   existe em toda fonte e aparecia como quadradinho vazio. Controle não pode depender de
   um glifo que pode faltar. */
.ajuda-btn{background:none;border:1px solid var(--linha);color:var(--tinta2);
  width:28px;height:28px;border-radius:999px;cursor:pointer;flex:none;
  font-size:14px;font-style:italic;font-weight:700;font-family:Georgia,serif;line-height:1}
.ajuda{background:var(--superficie2);border-left:3px solid var(--agua);border-radius:0 10px 10px 0;
  padding:11px 13px;margin:0 0 10px;font-size:13.5px;color:var(--tinta2)}
.ajuda p{margin:0 0 6px} .ajuda p:last-child{margin:0}
.ajuda .fonte{font-size:12px;opacity:.8}
.com-unidade{display:grid;grid-template-columns:1fr auto;gap:8px}
.com-unidade select{width:auto;padding:14px 10px}
.faixa-dica{font-size:12.5px;color:var(--tinta2);margin:6px 0 0;word-break:break-word}
textarea{min-height:170px;resize:vertical;font-size:15px;line-height:1.45}
.resposta{margin:7px 0 0;font-size:13.5px;border-radius:9px;padding:9px 11px}
.resposta.ok{background:#123024;color:var(--ok)}
.resposta.aviso{background:var(--areia-fraca);color:var(--atencao)}
.resposta.ruim{background:#3a1f1c;color:var(--risco)}
.toggle{display:flex;gap:8px}
.toggle button{flex:1;background:var(--superficie);border:1px solid var(--linha);
  border-radius:12px;padding:14px;cursor:pointer;min-height:52px;font-weight:600}
.toggle button[aria-pressed="true"]{background:var(--agua-fraca);border-color:var(--agua);color:var(--agua)}
/* 🔴 Era position:sticky com bottom:0 — dentro da folha rolável isso grudava os botões no
   MEIO do formulário, entre um campo e outro. Botão de salvar que aparece no meio do
   formulário faz a pessoa achar que o formulário acabou ali. Agora fica no fim, onde
   termina de verdade, com um respiro antes. */
.acoes{margin-top:24px;padding:18px 0 4px;display:grid;gap:8px;
  border-top:1px solid var(--linha)}
.lista-cat{display:grid;gap:8px}
.lista-cat button{text-align:left;background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--raio);padding:15px;cursor:pointer;min-height:56px}
.lista-cat b{display:block;font-size:16px}
.lista-cat span{color:var(--tinta2);font-size:13px}
.lista-cat .papel{float:right;font-size:11px;color:var(--agua);text-transform:uppercase;letter-spacing:.06em}

/* ---------------------------------------------------------------- avisos */
/* 🔴 pointer-events:none e mais alto. Mesma lição já paga no app de visitas (14/08/2026):
   o aviso flutuante cobria o botão Salvar por segundos e ENGOLIA o toque seguinte.
   Aviso é para ser lido, nunca para receber toque. */
.aviso-flutuante{position:fixed;left:50%;transform:translateX(-50%);bottom:110px;z-index:60;
  pointer-events:none;
  background:var(--superficie2);border:1px solid var(--linha);border-radius:12px;
  padding:13px 18px;max-width:90vw;box-shadow:0 8px 30px #0008;font-size:14.5px}
.aviso-flutuante.ruim{border-color:var(--risco);color:var(--risco)}
.aviso-flutuante.bom{border-color:var(--ok);color:var(--ok)}
.carregando{text-align:center;color:var(--tinta2);padding:40px}

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