/* Marques Briefing — camada própria por cima do estilo.css + apple.css
   (os dois copiados do Marques Campanhas, sem mudança). Celular primeiro na
   tela do cliente: é lá que boa parte dos briefings vai ser respondida. */

body.travado{overflow:hidden}
.fraco{color:var(--fraco)} .pequeno{font-size:11px}
.oculto{display:none!important}
.mono{font-family:ui-monospace,'SF Mono',Consolas,monospace}
.toast.erro{border-left-color:var(--vermelho)} .toast.ok{border-left-color:var(--verde)}
.contagem{display:inline-block;min-width:18px;padding:1px 6px;border-radius:99px;background:#ff375f;color:#fff;
  font-size:10px;font-weight:700;margin-left:4px;letter-spacing:0}
.contagem:empty{display:none}
.mini{background:none;border:1px solid var(--linha);color:var(--fraco);border-radius:8px;min-width:26px;height:26px;
  cursor:pointer;font-size:12px;flex:none;line-height:1;font-family:inherit}
.mini.largo{padding:0 9px}
.mini:hover:not(:disabled){color:var(--texto);border-color:var(--fraco)}
.mini:disabled{opacity:.3;cursor:default}
.mini.perigo:hover{color:var(--vermelho);border-color:var(--vermelho)}
.btn.perigo{color:var(--vermelho);border-color:color-mix(in srgb,var(--vermelho) 40%,var(--linha))}
.btn.perigo:hover{color:var(--vermelho);border-color:var(--vermelho)}
.lat-linha{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vazio-grande{text-align:center;padding:80px 20px;color:var(--fraco)}
.vazio-grande h2{color:var(--texto);font-size:22px;margin-bottom:8px}
.vazio-grande .btn{margin-top:16px}
.carregando-cx{padding:80px 0;text-align:center;color:var(--fraco)}
.modal .caixa.pequena{max-width:460px}
.marca-linha{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:12px;
  color:var(--texto);font-weight:400;margin:4px 0 14px;cursor:pointer}
.marca-linha input{width:auto}
:root[data-tema="claro"] .logo-tema{filter:invert(1)}

/* ---------- login ---------- */
.tela-entrar{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:20px}
.porta{width:100%;max-width:360px}
.porta .marca{text-align:center;margin-bottom:26px}
.porta .marca img{height:26px;opacity:.95}
.porta .marca div{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-top:12px}
.porta .card{border-radius:24px;animation:surgir .8s var(--ease) both}
.porta .btn{width:100%;justify-content:center;padding:11px;margin-top:4px}
.lembrar{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--fraco);margin:2px 0 14px;cursor:pointer;
  text-transform:none;letter-spacing:0;font-weight:400}
.lembrar input{width:auto}
.rodape{text-align:center;font-size:10px;color:var(--fraco);margin-top:20px;line-height:1.7}

/* ---------- formulário do cliente ---------- */
.form-wrap{max-width:760px;padding-top:22px;padding-bottom:90px}
.form-cabeca{margin-bottom:18px}
.form-topo{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.etapa{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.estado-salvo{font-size:11px;color:var(--fraco)}
.barra-prog{height:5px;border-radius:9px;background:var(--fundo2);overflow:hidden}
.barra-prog span{display:block;height:100%;background:var(--grad);border-radius:9px;transition:width .5s var(--ease)}
.pct{font-size:11px;color:var(--fraco);margin:6px 0 14px}
.form-cabeca h2{font-size:28px;font-weight:700;letter-spacing:-.025em;line-height:1.15;margin-top:18px}
.bloco-desc{color:var(--fraco);font-size:14px;line-height:1.6;margin:-6px 0 16px}
.ola{font-size:14px;line-height:1.55;margin:0 0 18px;padding:12px 16px;border-radius:14px;background:var(--fundo2)}

.trilha{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.trilha::-webkit-scrollbar{display:none}
.trilha-item{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--linha);background:var(--card);
  color:var(--fraco);font:600 12px inherit;font-family:inherit;cursor:pointer;transition:all .25s var(--ease)}
.trilha-item:hover{color:var(--texto);border-color:var(--fraco)}
.trilha-item.feito{color:var(--verde);border-color:color-mix(in srgb,var(--verde) 45%,var(--linha))}
.trilha-item.ativo{background:var(--texto);color:var(--bg);border-color:var(--texto)}
.trilha-item.revisao{width:auto;padding:0 12px;border-radius:99px;font-size:11px}

.perguntas{display:flex;flex-direction:column;gap:14px}
.pergunta{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio,18px);padding:18px 18px 16px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);animation:surgir .5s var(--ease) both}
.pergunta:focus-within{border-color:color-mix(in srgb,var(--texto) 35%,var(--linha))}
.perg-texto{display:block;text-transform:none;letter-spacing:0;font-size:15px;font-weight:600;color:var(--texto);
  line-height:1.4;margin-bottom:10px}
.perg-n{display:inline-block;min-width:22px;color:var(--fraco);font-weight:500;font-size:12px;margin-right:4px}
.obrig{color:#ff375f;margin-left:3px}
.perg-ajuda{font-size:12px;color:var(--fraco);margin:-4px 0 10px}
.pergunta input,.pergunta textarea{font-size:16px;padding:11px 13px;border-radius:12px}  /* 16px: o iPhone não dá zoom */
.pergunta textarea{min-height:84px;line-height:1.5;resize:none;overflow:hidden}
.perg-erro{display:none;color:var(--vermelho);font-size:12px;margin-top:8px}
.pergunta.falta{border-color:var(--vermelho);box-shadow:0 0 0 3px color-mix(in srgb,var(--vermelho) 18%,transparent)}
.pergunta.falta .perg-erro{display:block}

.opcoes{display:grid;gap:8px}
.opcao{display:flex;align-items:center;gap:11px;text-transform:none;letter-spacing:0;font-size:15px;font-weight:400;
  color:var(--texto);margin:0;padding:12px 14px;border:1px solid var(--linha);border-radius:12px;cursor:pointer;
  background:var(--campo);transition:all .2s var(--ease);user-select:none}
.opcao:hover{border-color:var(--fraco)}
.opcao input{position:absolute;opacity:0;width:1px;height:1px}
.marcador{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--fraco);position:relative;transition:all .2s var(--ease)}
.opcoes.multi .marcador{border-radius:6px}
.opcao.on{border-color:var(--texto);background:var(--fundo2)}
.opcao.on .marcador{border-color:var(--verde);background:var(--verde)}
.opcao.on .marcador::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #000;
  border-width:0 2px 2px 0;transform:rotate(45deg)}
.opcao:has(input:focus-visible){box-shadow:var(--foco)}
.campo-outro{margin-top:8px}

.navega{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:22px;
  position:sticky;bottom:0;padding:14px 0 calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,var(--bg) 30%)}
.navega .btn{padding:12px 24px;font-size:14px}
.navega .btn.enviar{padding:13px 30px}

/* revisão */
.revisao{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.rev-bloco{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio,18px);padding:14px 16px}
.rev-tit{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.rev-item{padding:9px 0;border-top:1px solid var(--linha)}
.rev-perg{font-size:12px;color:var(--fraco);margin-bottom:3px}
.rev-resp{font-size:14px;white-space:pre-wrap;word-break:break-word}
.rev-item.falta .rev-resp{color:var(--vermelho);font-weight:600}

/* sucesso */
.sucesso{text-align:center;padding:60px 10px 30px;display:flex;flex-direction:column;align-items:center;gap:14px}
.sucesso h2{font-size:30px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.sucesso p{color:var(--fraco);font-size:15px;line-height:1.6;max-width:480px}
.sucesso .btn{margin-top:10px}
.sucesso.animar h2,.sucesso.animar p,.sucesso.animar .btn,.sucesso.animar .fraco{animation:surgir .7s var(--ease) .55s both}
.check-verde{width:22px;height:22px;flex:none}
.check-verde.grande{width:118px;height:118px;filter:drop-shadow(0 10px 40px rgba(48,209,88,.35))}
.cv-circulo{fill:var(--verde);stroke:none}
.cv-traco{fill:none;stroke:#fff;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.check-verde.grande .cv-traco{stroke-width:3.6}
.sucesso.animar .cv-circulo{transform-origin:center;animation:cv-pulo .6s var(--ease) both}
.sucesso.animar .cv-traco{stroke-dasharray:40;stroke-dashoffset:40;animation:cv-risca .45s ease-out .35s forwards}
@keyframes cv-pulo{0%{transform:scale(0)}70%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes cv-risca{to{stroke-dashoffset:0}}

/* ---------- leitura (cliente revendo e admin) ---------- */
.leitura{display:flex;flex-direction:column;gap:22px;text-align:left}
.leitura-bloco h3{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fraco);
  padding-bottom:8px;border-bottom:1px solid var(--linha);margin-bottom:4px}
.leitura-item{padding:11px 0;border-bottom:1px solid var(--linha-td,var(--linha))}
.leitura-item:last-child{border-bottom:none}
.leitura-perg{font-weight:600;font-size:13px;margin-bottom:4px}
.leitura-resp{font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.leitura-resp.vazia{color:var(--fraco);font-style:italic;font-size:12px}
#minhasRespostas .card{margin-top:24px;text-align:left}

/* ---------- admin ---------- */
.cabeca{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:10px 0 20px}
.cabeca h2{font-size:28px;font-weight:700;letter-spacing:-.025em;margin:2px 0 4px}
.tela-admin .wrap{max-width:1180px}
.st{display:inline-block;font-size:10px;font-weight:700;padding:3px 9px;border-radius:99px;letter-spacing:.02em}
.st-nao{background:var(--fundo2);color:var(--fraco)}
.st-rascunho{background:rgba(10,132,255,.14);color:#4da3ff}
.st-enviado{background:rgba(48,209,88,.14);color:var(--verde)}
.selo-novo{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:#ff375f;
  padding:2px 7px;border-radius:99px}

.grade-brief{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.brief-cartao{display:flex;flex-direction:column;gap:7px;text-align:left;padding:18px;border-radius:var(--raio,18px);
  background:var(--card);border:1px solid var(--linha);color:var(--texto);font-family:inherit;cursor:pointer;
  transition:transform .3s var(--ease),border-color .3s var(--ease);animation:surgir .5s var(--ease) both}
.brief-cartao:hover{transform:translateY(-3px);border-color:var(--fraco)}
.brief-cartao.novo{border-color:color-mix(in srgb,var(--verde) 55%,var(--linha))}
.brief-cartao.inativo{opacity:.5}
.brief-topo{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.brief-emp{font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.brief-quando{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--verde);margin-top:4px}
.brief-cartao .barra-prog{margin-top:6px}

.bloco-adm{padding:0;overflow:hidden}
.bloco-cabeca{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--linha)}
.bloco-ordem{display:flex;flex-direction:column;gap:4px}
.bloco-nome{flex:1;min-width:0}
.bloco-nome b{font-size:15px}
.linha-unica{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bloco-acoes{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.lista-perg{list-style:none}
.lista-perg li{display:flex;gap:12px;align-items:flex-start;padding:11px 16px;border-bottom:1px solid var(--linha-td,var(--linha))}
.lista-perg li:hover{background:var(--hover)}
.perg-num{flex:none;width:24px;height:24px;border-radius:50%;background:var(--fundo2);color:var(--fraco);font-size:11px;
  font-weight:700;display:flex;align-items:center;justify-content:center}
.perg-corpo{flex:1;min-width:0;font-size:13px;line-height:1.45}
.perg-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.tipo-tag{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:99px;
  background:var(--fundo2);color:var(--texto)}
.obrig-tag{font-size:10px;color:#ff375f}
.perg-acoes{display:flex;gap:4px;flex:none}
.add-perg{margin:12px 16px 14px}

.tabela-acessos td{vertical-align:middle}
.acoes-td{text-align:right;white-space:nowrap}
.acoes-td .btn{margin-left:3px}
tr.inativo{opacity:.45}
.credenciais{display:grid;gap:10px;margin-bottom:14px;padding:14px;border-radius:14px;background:var(--fundo2)}
.credenciais div{display:flex;flex-direction:column;gap:2px}
.credenciais b{font-size:15px;word-break:break-all}
#msgAcesso{font-size:12px;line-height:1.5}

/* leitor do briefing (admin) */
.leitor{position:fixed;inset:0;z-index:90;background:var(--bg);display:none;overflow-y:auto}
.leitor.aberto{display:block;animation:surgir .35s var(--ease) both}
.leitor-topo{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;
  border-bottom:1px solid var(--linha);background:var(--vidro,var(--bg));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.leitor-acoes{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.folha{max-width:820px;margin:0 auto;padding:30px 20px 80px}
.folha-cabeca{margin-bottom:26px;display:flex;flex-direction:column;gap:6px}
.folha-cabeca img{height:20px;width:auto;align-self:flex-start;margin-bottom:12px}
.folha-tit{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.folha-cabeca h2{font-size:32px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.folha-st{display:flex;gap:10px;align-items:center;margin-top:4px}

/* ---------- celular ---------- */
@media (max-width: 700px){
  .so-largo{display:none}
  /* Uma linha só: logo à esquerda, Senha e Sair à direita (o estilo.css
     quebra em duas linhas, pensado para o painel cheio de botões). */
  .topo{padding:12px 14px;gap:10px;flex-wrap:nowrap}
  .topo .dir{flex:0 0 auto;margin-left:auto;gap:6px}
  .topo .dir .btn:last-child{margin-left:0}
  .form-wrap{padding:16px 14px 80px}
  .form-cabeca h2{font-size:23px}
  .pergunta{padding:15px 14px 14px;border-radius:16px}
  .perg-texto{font-size:15px}
  .navega .btn{flex:1;justify-content:center;padding:13px 10px}
  .navega span{display:none}
  .sucesso{padding-top:40px}
  .sucesso h2{font-size:25px}
  .cabeca h2{font-size:23px}
  .bloco-cabeca{flex-wrap:wrap}
  .bloco-acoes{width:100%;justify-content:flex-start}
  .lista-perg li{flex-wrap:wrap;padding:11px 12px}
  .perg-acoes{width:100%;justify-content:flex-end}
  .acoes-td{white-space:normal}
  .acoes-td .btn{margin:2px 0 2px 3px}
  .folha{padding:20px 14px 60px}
  .folha-cabeca h2{font-size:25px}
}

/* ---------- impressão: só o briefing aberto, branco e limpo ---------- */
@media print {
  body.lendo > *:not(#leitor){display:none!important}
  body.lendo{background:#fff!important;color:#111!important;overflow:visible!important}
  body.lendo::before,body.lendo::after{display:none!important}
  .leitor{position:static!important;display:block!important;overflow:visible!important;background:#fff!important;animation:none!important}
  .nao-imprimir{display:none!important}
  .folha{max-width:none;padding:0}
  .folha-cabeca img{filter:invert(1)}
  .folha-tit{color:#555!important;background:none!important}
  .folha-cabeca h2,.leitura-perg,.leitura-resp{color:#111!important}
  .fraco,.leitura-bloco h3,.leitura-resp.vazia{color:#666!important}
  .leitura-bloco h3,.leitura-item{border-color:#ddd!important}
  .leitura-item{break-inside:avoid}
  .st{border:1px solid #bbb;background:none!important;color:#333!important}
}