:root{
  --bg:#F7F5F1;
  --surface:#FFFFFF;
  --line:#E3DED5;
  --ink:#1D211F;
  --ink-2:#5C635F;
  --ink-3:#8D948F;
  --brand:#2F5E4E;
  --brand-2:#3D7A64;
  --brand-soft:#EAF0EC;
  --ok:#3E8E6E;
  --nok:#C0453B;
  --na:#7E6BAA;
  --ok-soft:#E8F3EE;
  --nok-soft:#FBEAE8;
  --na-soft:#EFEBF7;
  --radius:14px;
  --shadow:0 1px 2px rgba(29,33,31,.05), 0 8px 24px -16px rgba(29,33,31,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand);text-decoration:none}

.wrap{max-width:780px;margin:0 auto;padding:32px 20px 0}

/* ---------- topo ---------- */
.topo{
  position:sticky;top:0;z-index:30;
  background:rgba(247,245,241,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.topo-in{
  max-width:780px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;gap:14px;
}
.marca{display:flex;align-items:center;gap:11px;min-width:0}
.marca-sigla{
  width:36px;height:36px;border-radius:11px;flex:none;
  background:var(--brand);color:#fff;
  display:grid;place-items:center;
  font-size:14px;font-weight:600;letter-spacing:.3px;
}
.marca-logo{max-height:40px;max-width:210px;object-fit:contain;display:block}
.marca-nome{font-size:16.5px;font-weight:600;line-height:1.2;letter-spacing:-.1px}
.marca-sub{font-size:11.5px;color:var(--ink-3);letter-spacing:.02em}
.topo .voltar{
  margin-left:auto;font-size:14px;color:var(--ink-2);
  background:none;border:0;cursor:pointer;padding:8px 2px;
}
.topo .voltar:hover{color:var(--brand)}
/* No celular o nome da consultoria e os dois links não cabem na mesma linha:
   o nome fica em uma linha só e os links encolhem, em vez de tudo quebrar. */
@media(max-width:430px){
  .topo-in{gap:8px;padding:12px 16px}
  .marca-nome{font-size:15px;white-space:nowrap}
  .marca-sub{font-size:10.5px;white-space:nowrap}
  .marca-sigla{width:32px;height:32px;border-radius:9px;font-size:13px}
  .topo .voltar{font-size:13px;white-space:nowrap;padding:8px 0}
  .topo .voltar + .voltar{margin-left:12px !important}
}

/* ---------- tipografia ---------- */
h1{font-weight:600;font-size:29px;line-height:1.2;letter-spacing:-.5px;margin:0 0 8px}
h2{font-weight:600;font-size:20px;line-height:1.25;letter-spacing:-.2px;margin:0 0 4px}
h3{font-size:14px;font-weight:600;margin:0 0 10px;color:var(--ink-2)}
.lead{color:var(--ink-2);font-size:15px;margin:0 0 26px;max-width:52ch}
.secao{margin:34px 0 14px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.secao h3{margin:0}

/* ---------- botoes ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border-radius:11px;border:1px solid transparent;
  background:var(--brand);color:#fff;font-size:15px;font-weight:500;
  cursor:pointer;transition:background .15s ease, transform .1s ease;
}
.btn:hover{background:#27503F}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:#fff;border-color:#cfc9be}
.btn.wide{width:100%}
.btn.sm{padding:9px 14px;font-size:14px;border-radius:9px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-linha{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- cartoes ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);
}
.card + .card{margin-top:12px}
.local{display:flex;align-items:center;gap:14px;cursor:pointer;text-align:left;width:100%;border:none;font:inherit}
.local:hover{border-color:#cfc9be}
.local-logo{
  width:46px;height:46px;border-radius:11px;flex:none;object-fit:cover;
  background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-weight:600;font-size:16px;
}
.local-info{min-width:0;flex:1}
.local-nome{display:block;font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.local-meta{display:block;font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.local-nota{text-align:right;flex:none}
.nota-num{font-size:23px;font-weight:600;line-height:1}
.nota-cap{font-size:11px;color:var(--ink-3)}

.vazio{
  border:1px dashed var(--line);border-radius:var(--radius);
  padding:34px 22px;text-align:center;color:var(--ink-3);font-size:14.5px;background:rgba(255,255,255,.5);
}

/* ---------- inicio ---------- */
.inicio-topo{display:flex;gap:40px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.inicio-texto{max-width:44ch}
.inicio-texto .btn{margin-top:4px}
.inicio-numeros{display:flex;gap:28px;flex-wrap:wrap;padding-top:6px}
.kpi b{display:block;font-size:30px;font-weight:600;line-height:1;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.kpi span{font-size:12px;color:var(--ink-3)}
/* min-width:0 é o que deixa o item do grid encolher: sem isso o nome do
   estabelecimento em uma linha só estica o cartão e estoura a tela no celular. */
.grid-locais{display:grid;gap:12px}
.grid-locais > *{min-width:0}
.grid-locais .card + .card{margin-top:0}
@media(min-width:900px){
  .wrap{max-width:940px}
  .topo-in{max-width:940px}
  .grid-locais{grid-template-columns:1fr 1fr}
  .inicio-texto .btn{padding:13px 26px}
}
@media(max-width:620px){
  .inicio-texto{max-width:none}
  .inicio-texto .btn{width:100%}
  .inicio-numeros{gap:22px;padding-top:2px}
  .kpi b{font-size:24px}
}

/* ---------- formulario ---------- */
.campo{margin-bottom:16px}
.campo label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.campo .dica{font-size:12.5px;color:var(--ink-3);font-weight:400;margin-top:5px}
input[type=text],input[type=date],input[type=tel],select,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:11px;
  background:var(--surface);outline:none;transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-soft)}
textarea{resize:vertical;min-height:84px;line-height:1.45}
.linha-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.linha-2{grid-template-columns:1fr}}

.tipo-opcoes{display:grid;gap:10px}
.tipo-op{
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;
  background:var(--surface);display:block;transition:border-color .15s ease,background .15s ease;
}
.tipo-op:hover{border-color:#cfc9be}
.tipo-op input{position:absolute;opacity:0;pointer-events:none}
.tipo-op.sel{border-color:var(--brand);background:var(--brand-soft)}
.tipo-op b{display:block;font-size:15.5px;font-weight:600;margin-bottom:2px}
.tipo-op span{font-size:13px;color:var(--ink-2)}

.logo-campo{display:flex;align-items:center;gap:14px}
.logo-preview{
  width:64px;height:64px;border-radius:12px;border:1px dashed var(--line);
  background:var(--surface);object-fit:contain;padding:4px;flex:none;
  display:grid;place-items:center;color:var(--ink-3);font-size:11px;text-align:center;
}

/* ---------- checklist ---------- */
.progresso{position:sticky;top:65px;z-index:20;background:var(--bg);padding:12px 0 10px;border-bottom:1px solid var(--line)}
.progresso-topo{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--ink-2);margin-bottom:8px}
.progresso-dir{display:flex;align-items:baseline;gap:12px}
.salvo{font-size:11.5px;color:var(--ok);opacity:0;transition:opacity .2s ease}
.salvo.on{opacity:1}
.barra{height:5px;background:var(--line);border-radius:99px;overflow:hidden}
.barra i{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width .3s ease}

/* No celular as áreas são uma tira que rola. No desktop viram coluna fixa ao
   lado das perguntas, que é onde a largura sobrava. */
.areas-col{position:sticky;top:121px;z-index:19;background:var(--bg)}
.areas{display:flex;gap:7px;overflow-x:auto;padding:10px 0 8px;scrollbar-width:none;-ms-overflow-style:none}
.areas::-webkit-scrollbar{display:none}
.aba{
  flex:none;padding:8px 13px;border-radius:99px;border:1px solid var(--line);
  background:var(--surface);font-size:13.5px;color:var(--ink-2);cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:7px;
}
.aba.sel{background:var(--brand);border-color:var(--brand);color:#fff}
.aba .cont{font-size:11.5px;opacity:.65}
.aba.completo:not(.sel){border-color:var(--ok);color:var(--ok)}

.ferramentas{display:flex;gap:10px;align-items:center;margin:18px 0 4px;flex-wrap:wrap}
.busca{flex:1;min-width:180px;position:relative}
.busca input{padding:10px 14px;border-radius:10px;font-size:14.5px}
.busca input::-webkit-search-cancel-button{cursor:pointer}
.filtros{display:flex;gap:6px}
.chip{
  padding:8px 12px;border-radius:99px;border:1px solid var(--line);background:var(--surface);
  font-size:13px;color:var(--ink-2);cursor:pointer;white-space:nowrap;transition:all .12s ease;
}
.chip:hover{border-color:#cfc9be}
.chip.sel{background:var(--ink);border-color:var(--ink);color:#fff}

.area-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:22px 0 14px}
.area-topo h2{margin:0}
.area-meta{font-size:12.5px;color:var(--ink-3)}
.area-meta b{font-weight:600;color:var(--nok)}
.area-acoes{flex:none}

.atalho-pendente{
  width:100%;margin:14px 0 0;padding:12px 16px;border-radius:11px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  font-size:13.5px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  transition:border-color .12s ease;
}
.atalho-pendente:hover{border-color:var(--brand-2)}
.atalho-pendente b{color:var(--brand);font-weight:600}

.pergunta{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-bottom:12px;position:relative;
  border-left:3px solid transparent;transition:border-color .15s ease, box-shadow .3s ease;
}
/* A faixa lateral diz o estado do item de relance, sem pintar o cartão inteiro. */
.pergunta.v-c{border-left-color:var(--ok)}
.pergunta.v-n{border-left-color:var(--nok)}
.pergunta.v-na{border-left-color:var(--na)}
.pergunta.destaque{box-shadow:0 0 0 3px var(--brand-soft);border-color:var(--brand-2)}
.pergunta{scroll-margin-top:190px}
.pergunta-num{font-size:12px;color:var(--ink-3);margin-bottom:5px}
.pergunta-area{
  margin-left:8px;padding:2px 8px;border-radius:99px;background:var(--brand-soft);
  color:var(--brand);font-size:11px;font-weight:600;
}
.pergunta-txt{font-size:15.5px;line-height:1.45;margin-bottom:14px}
.opcoes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.op{
  padding:9px 6px 8px;border-radius:10px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);cursor:pointer;text-align:center;transition:all .12s ease;
  display:flex;flex-direction:column;align-items:center;gap:1px;
}
.op b{font-size:17px;font-weight:600;line-height:1.15;letter-spacing:.02em}
.op span{font-size:10.5px;opacity:.75;line-height:1.2}
.op:hover{border-color:#cfc9be}
.op.sel[data-v=c]{background:var(--ok);border-color:var(--ok);color:#fff}
.op.sel[data-v=n]{background:var(--nok);border-color:var(--nok);color:#fff}
.op.sel[data-v=na]{background:var(--na);border-color:var(--na);color:#fff}

.acoes-item{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.acao{
  padding:9px 6px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  font-size:12.5px;color:var(--ink-2);cursor:pointer;transition:all .12s ease;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.acao:hover{border-color:#cfc9be}
.acao.tem{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.ico{width:14px;height:14px;flex:none;opacity:.75}
.acao.tem .ico{opacity:1}
.pino{background:var(--brand);color:#fff;border-radius:99px;min-width:17px;height:17px;font-size:10.5px;display:grid;place-items:center;padding:0 4px}
.campo-extra{margin-top:11px}
.campo-extra.oculto{display:none}
.campo-extra label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.campo-extra textarea{min-height:74px}
.fotos:empty{display:none}
.fotos{margin-top:11px}
.fotos{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:11px}
.foto-item{position:relative;width:76px;height:76px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.foto-item img{width:100%;height:100%;object-fit:cover;display:block}
.foto-x{
  position:absolute;top:3px;right:3px;width:21px;height:21px;border-radius:50%;
  background:rgba(29,33,31,.72);color:#fff;border:0;cursor:pointer;font-size:13px;line-height:1;
  display:grid;place-items:center;padding:0;
}
.foto-add{
  width:76px;height:76px;border-radius:10px;border:1px dashed var(--line);background:var(--surface);
  color:var(--ink-3);font-size:12px;cursor:pointer;display:grid;place-items:center;text-align:center;line-height:1.3;
}
.foto-add:hover{border-color:var(--brand-2);color:var(--brand)}

.rodape-nav{display:flex;gap:10px;margin:22px 0 60px}
.rodape-nav .btn{flex:1}

/* ---------- checklist no desktop ---------- */
@media(min-width:1024px){
  .wrap-checklist{max-width:1160px}
  .checklist-corpo{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:start}
  .areas-col{position:sticky;top:158px;max-height:calc(100vh - 190px);overflow-y:auto;padding-right:4px;background:transparent;z-index:auto}
  .areas-col::-webkit-scrollbar{width:4px}
  .areas-col::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
  .areas{flex-direction:column;overflow:visible;padding:0;gap:3px}
  .aba{
    width:100%;justify-content:space-between;white-space:normal;text-align:left;
    border-radius:10px;padding:10px 12px;border-color:transparent;background:transparent;
    font-size:13.5px;line-height:1.3;
  }
  .aba:hover:not(.sel){background:var(--surface);border-color:var(--line)}
  .aba .cont{font-variant-numeric:tabular-nums;flex:none}
  /* Na coluna, contorno verde em doze áreas vira ruído: a área concluída se
     distingue pela contagem em verde, e só a área aberta ganha fundo. */
  .aba.completo:not(.sel){border-color:transparent;color:var(--ink-2)}
  .aba.completo:not(.sel) .cont{color:var(--ok);opacity:1;font-weight:600}
  .ferramentas{margin-top:0}
  .pergunta{padding:20px 22px}
  .opcoes{grid-template-columns:repeat(3,minmax(0,148px))}
  .acoes-item{grid-template-columns:repeat(3,minmax(0,168px))}
}

/* ---------- resultado ---------- */
.placar{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.placar-nota{font-size:50px;font-weight:600;line-height:1;letter-spacing:-1px}
.placar-nota small{font-size:22px;color:var(--ink-3)}
.contagens{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px}
.contagem b{display:block;font-size:21px;font-weight:600;line-height:1.2}
.c-ok b{color:var(--ok)} .c-nok b{color:var(--nok)} .c-na b{color:var(--na)}

.blocos-barras{display:grid;gap:11px;margin-top:4px}
.bb{page-break-inside:avoid;display:grid;grid-template-columns:1fr 44px;gap:10px;align-items:center}
.bb-nome{font-size:13.5px;color:var(--ink-2);margin-bottom:4px}
.bb-track{height:7px;background:var(--line);border-radius:99px;overflow:hidden}
.bb-track i{display:block;height:100%;border-radius:99px}
.bb-val{font-size:13.5px;text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}

.evolucao{width:100%;height:auto;display:block}

.aviso{background:var(--nok-soft);border:1px solid #F0CFCB;color:#8E322A;padding:12px 15px;border-radius:11px;font-size:14px;margin-bottom:14px}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(10px);
  background:var(--ink);color:#fff;padding:11px 18px;border-radius:99px;font-size:14px;
  opacity:0;pointer-events:none;transition:all .25s ease;z-index:99;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- relatorio ---------- */
.rel{background:#fff;color:#1D211F}
.rel-acoes{
  position:sticky;top:0;z-index:40;background:rgba(247,245,241,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding:11px 20px;
  display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.rel-acoes-dir{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.rel-acoes .btn.sm{padding:8px 13px}
.voltar-rel{
  display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;
  color:var(--ink-2);font-size:14px;padding:8px 4px;
}
.voltar-rel:hover{color:var(--brand)}

.rel-mais{position:relative}
.rel-mais summary{
  list-style:none;cursor:pointer;padding:9px 14px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);font-size:14px;color:var(--ink);user-select:none;
}
.rel-mais summary::-webkit-details-marker{display:none}
.rel-mais summary::after{content:' ▾';color:var(--ink-3);font-size:11px}
.rel-mais[open] summary{border-color:#cfc9be}
.rel-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:50;min-width:210px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 40px rgba(29,33,31,.14);padding:6px;display:grid;gap:2px;
}
.rel-menu button{
  text-align:left;background:none;border:0;cursor:pointer;padding:10px 12px;
  border-radius:8px;font-size:14px;color:var(--ink);
}
.rel-menu button:hover{background:var(--brand-soft);color:var(--brand)}

.folha{
  background:#fff;max-width:820px;margin:22px auto;padding:46px 52px;
  border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);
}
.rel-topo{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:20px;border-bottom:2px solid var(--brand)}
.rel-logo{max-height:74px;max-width:230px;object-fit:contain;display:block}
.rel-marca-nome{font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-.3px}
.rel-marca-sub{font-size:13px;color:var(--ink-3);margin-top:2px}
.rel-nota-caixa{border:2px solid var(--brand);border-radius:12px;padding:10px 20px;text-align:center;flex:none}
.rel-nota-num{font-size:38px;font-weight:600;line-height:1;letter-spacing:-1px}
.rel-nota-cap{font-size:10.5px;color:var(--ink-3);margin-top:2px}
.rel-linha-titulo{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:24px 0 22px}
.rel-cliente-logo{max-height:56px;max-width:140px;object-fit:contain}
.rel-titulo{font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-.5px}
.rel-sub{color:var(--ink-2);font-size:14px;margin-top:3px}
.rel-dados{display:grid;grid-template-columns:1fr 1fr;gap:11px 26px;font-size:13.5px;margin-bottom:8px}
.rel-dado span{color:var(--ink-3);display:block;font-size:12px}
.rel-caixa{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:22px;margin-bottom:26px}
.rel-h{font-size:18px;font-weight:600;letter-spacing:-.2px;margin:32px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.rel-bloco-h{font-size:15px;font-weight:600;margin:26px 0 10px;color:var(--brand);page-break-after:avoid}
.rel-resumo{display:grid;grid-template-columns:auto auto 1fr;gap:26px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 20px}
.rr-bloco span{display:block;font-size:11px;color:var(--ink-3);margin-bottom:3px}
.rr-bloco b{font-size:21px;font-weight:600;line-height:1.2}
.rr-bloco b i{font-style:normal;font-size:14px;font-weight:400;color:var(--ink-3)}
.rr-siglas{font-size:15px !important;font-weight:500 !important}
.rr-siglas em{font-style:normal;font-weight:700;font-size:12px;padding:2px 6px;border-radius:5px;margin-left:9px}
.rr-siglas em:first-child{margin-left:0}
.s-c{background:var(--ok-soft);color:#2C6B52}
.s-n{background:var(--nok-soft);color:#8E322A}
.s-na{background:var(--na-soft);color:#584A80}
.s-sem{background:#F3E8CF;color:#8A6A1F}
.rel-alerta{background:#FBEAE8;border:1px solid #F0CFCB;color:#8E322A;border-radius:9px;padding:10px 13px;font-size:12.5px;margin-top:10px;line-height:1.5}
.rr-compl{font-size:13.5px !important;font-weight:400 !important;color:var(--ink-2)}
.rel-obs-calculo{font-size:12px;color:var(--ink-3);margin-top:10px;line-height:1.5}
.rel-parecer{font-size:14px;line-height:1.6;white-space:pre-wrap;background:var(--brand-soft);border-radius:11px;padding:16px 18px}

.rel-tabela{width:100%;border-collapse:collapse;font-size:13px}
.rel-tabela th{text-align:left;font-size:11px;font-weight:600;color:var(--ink-3);padding:0 10px 7px;border-bottom:1px solid var(--line)}
.rel-tabela th.num,.rel-tabela td.num{text-align:right}
.rel-tabela td{padding:9px 10px;border-bottom:1px solid var(--line)}
.rel-tabela th:nth-child(n+2){text-align:right}
.rel-total td{border-top:2px solid var(--brand);border-bottom:0;font-weight:600;padding-top:11px}
.var-sobe{color:var(--ok)} .var-desce{color:var(--nok)} .var-na{color:var(--ink-3)}
.rel-nota-rodape{font-size:11.5px;color:var(--ink-3);margin-top:8px}
.rel-legenda{display:flex;gap:20px;font-size:11.5px;color:var(--ink-2);margin-top:6px;justify-content:center}
.rel-legenda i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}

.rel-area{background:var(--brand);color:#fff;font-size:13px;font-weight:600;padding:7px 13px;border-radius:7px;margin:24px 0 12px;page-break-after:avoid}
.rel-item{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:9px;page-break-inside:avoid}
.rel-item-topo{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
.rel-item-txt{font-size:13.3px;line-height:1.45;flex:1}
.rel-item-num{color:var(--ink-3);margin-right:7px;font-size:12px}
.selo{font-size:12px;font-weight:700;padding:5px 12px;border-radius:7px;white-space:nowrap;flex:none;color:#fff;min-width:44px;text-align:center}
.selo.c{background:var(--ok)}
.selo.n{background:var(--nok)}
.selo.na{background:var(--na)}
.selo.sem{background:var(--line);color:var(--ink-3)}
.rel-acao{background:var(--bg);border-radius:8px;padding:9px 12px;font-size:12.8px;margin-top:9px;line-height:1.5}
.rel-acao.plano{background:var(--brand-soft)}
.rel-acao b{display:block;font-size:10.5px;color:var(--ink-3);font-weight:600;margin-bottom:2px}
.rel-fotos{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.rel-fotos img{width:118px;height:88px;object-fit:cover;border-radius:7px;border:1px solid var(--line)}
.rel-rodape{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@page{size:A4;margin:14mm}
@media print{
  body{background:#fff}
  .rel-acoes,.topo,.toast{display:none !important}
  .folha{max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none}
  .rel-item,.evolucao-caixa,.rel-resumo,.rel-tabela tr{page-break-inside:avoid}
  .rel-area{page-break-after:avoid}
  .rel-h{page-break-after:avoid}
  a{color:inherit}
}

/* ---------- parecer ---------- */
.parecer-editor{max-width:820px;margin:18px auto -6px;padding:0 20px}
.parecer-editor.oculto{display:none}
.parecer-editor textarea{min-height:120px}
.parecer-editor .dica{font-size:12.5px;color:var(--ink-3);margin:6px 2px 0}
@media print{.parecer-editor{display:none !important}}

/* ---------- editor do relatorio de visita ---------- */
.bloco-editavel .bloco-topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.bloco-editavel .bloco-topo b{font-size:14px;font-weight:600}
.lixeira{background:none;border:0;color:var(--ink-3);font-size:13px;cursor:pointer;padding:4px}
.lixeira:hover{color:var(--nok)}
.tipo-op input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}

/* ---------- documento da visita tecnica ---------- */
.vt-capa{min-height:63vh;display:flex;flex-direction:column;justify-content:center;padding:20px 0 40px}
.vt-capa-titulo{font-size:52px;font-weight:700;line-height:1.05;letter-spacing:-1.5px;margin:44px 0 30px}
.vt-capa-texto{font-size:15px;line-height:1.6;max-width:60%;margin-left:auto;color:var(--ink-2)}
.vt-assinatura{margin-top:64px;font-size:12.5px;color:var(--ink-2);max-width:340px}
.linha-assina{border-top:1px solid var(--ink);margin-bottom:6px;height:1px}
.vt-assinaturas{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:64px;font-size:12.5px;color:var(--ink-2)}
.vt-texto{font-size:13.8px;line-height:1.65;white-space:pre-wrap}
.sublinha{border-bottom:1px solid var(--ink);padding-bottom:1px}

.vt-tabela{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:6px}
.vt-tabela th,.vt-tabela td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.vt-tabela th{background:var(--bg);font-weight:600;width:210px;color:var(--ink)}
.vt-tabela td{line-height:1.5;white-space:pre-wrap}
.vt-acao{margin-bottom:20px;page-break-inside:avoid}
.vt-acao-h{background:var(--brand) !important;color:#fff !important;border-color:var(--brand) !important}
.vt-acao-t{font-weight:600}
.vt-pend th{width:auto;background:var(--bg)}
.vt-pend-n{font-weight:600;white-space:nowrap}
.quebra{height:0}

@media print{
  .quebra{page-break-before:always}
  .vt-capa{min-height:auto;padding-top:60px;padding-bottom:80px}
  .vt-tabela tr,.vt-acao,.vt-assinaturas{page-break-inside:avoid}
}

/* ---------- editor de roteiro ---------- */
.nome-area{font-weight:600;font-size:15px;border:1px solid transparent;background:transparent;padding:6px 8px;margin-left:-8px;border-radius:8px;flex:1}
.nome-area:hover{border-color:var(--line)}
.item-edit{display:flex;gap:9px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line)}
.item-edit .item-n{font-size:11.5px;color:var(--ink-3);padding-top:13px;min-width:26px;flex:none}
.item-edit textarea{min-height:78px;font-size:14px;padding:9px 11px;line-height:1.4}
.item-edit .lixeira{font-size:19px;line-height:1;padding:10px 4px}

/* ---------- relatorio no celular ----------
   Fica no fim de propósito: precisa vir depois das regras de .folha e
   .rel-resumo para sobrescrever o grid de três colunas. */
@media(max-width:640px){
  .rel-acoes{gap:8px;padding:10px 14px}
  .folha{padding:26px 20px;margin:14px auto;border-radius:0;border-left:0;border-right:0}
  .rel-resumo{grid-template-columns:1fr;gap:14px}
  .rel-topo{gap:14px;flex-wrap:wrap}
  .rel-nota-caixa{padding:8px 16px}
  .rel-dados{grid-template-columns:1fr 1fr;gap:10px 16px}
  .rel-linha-titulo{flex-wrap:wrap;gap:12px}
  .rel-tabela{font-size:12px}
  .rel-tabela td,.rel-tabela th{padding-left:4px;padding-right:4px}
  .rr-siglas em{margin-left:6px}
}
@media print{.rel-mais{display:none !important}}

/* ---------- reporte, aviso de versão e rodapé ----------
   Entraram depois deste visual e ficaram quando ele voltou, em 14/09. */
.topo-in .marca{flex:1}
.tema-btn{
  margin-left:14px;width:36px;height:36px;border-radius:10px;flex:none;padding:0;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  display:grid;place-items:center;cursor:pointer;transition:color .15s ease,border-color .15s ease;
}
.tema-btn:hover{color:var(--brand);border-color:#cfc9be}
.tema-btn svg{width:17px;height:17px}

.modal{position:fixed;inset:0;z-index:90;background:rgba(29,33,31,.45);display:grid;place-items:center;padding:20px}
.modal-caixa{background:var(--surface);border-radius:16px;padding:24px;width:100%;max-width:480px;box-shadow:0 20px 60px rgba(29,33,31,.25)}
.modal-caixa textarea{min-height:120px}

.faixa-versao{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:95;
  width:calc(100% - 32px);max-width:560px;background:var(--brand);color:#fff;
  border-radius:14px;padding:14px 16px;display:flex;gap:14px;align-items:center;justify-content:space-between;
  box-shadow:0 12px 40px rgba(29,33,31,.25);
}
.faixa-versao b{display:block;font-size:14.5px;font-weight:600}
.faixa-versao span{display:block;font-size:13px;opacity:.85;margin-top:2px}
.faixa-versao button{flex:none;background:#fff;color:var(--brand);border:0;border-radius:9px;padding:9px 14px;font-size:13.5px;font-weight:600;cursor:pointer}

.rodape{margin:56px 0 0;padding:22px 0 40px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rodape b{color:var(--ink-2);font-weight:600;margin-right:6px}
.rodape-links{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px}
.rodape-link{background:none;border:0;padding:0;cursor:pointer;color:var(--brand);font-size:13px}
.rodape-link:hover{text-decoration:underline}
.so-mobile{display:none}
/* No celular os links do topo não cabem ao lado do botão de reporte: vão para o rodapé. */
@media(max-width:620px){
  .link-topo{display:none}
  .so-mobile{display:inline}
}
@media print{.faixa-versao,.modal{display:none !important}}

/* ---------- guia de uso ---------- */
#guia{z-index:96}
.tema-btn + .tema-btn{margin-left:8px}
.guia{max-width:440px}
.guia-topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;min-height:28px}
.guia-passo{font-size:12.5px;color:var(--ink-3)}
.guia-pular{background:none;border:0;cursor:pointer;color:var(--ink-3);font-size:13.5px;padding:4px 2px}
.guia-pular:hover{color:var(--brand)}
.guia h2{font-size:22px;margin:0 0 10px}
.guia-texto{font-size:15px;line-height:1.55;color:var(--ink-2);margin:0 0 20px}
.guia-texto b{color:var(--ink);font-weight:600}
.guia-pontos{display:flex;gap:6px;margin-bottom:20px}
.guia-pontos i{width:7px;height:7px;border-radius:99px;background:var(--line);transition:all .2s ease}
.guia-pontos i.on{width:20px;background:var(--brand)}
.guia-nav{display:flex;justify-content:space-between;gap:10px}
.guia-nav .btn{min-width:120px}
@media(max-width:430px){.tema-btn + .tema-btn{margin-left:6px}.guia-nav .btn{min-width:0;flex:1}}
@media print{#guia{display:none !important}}