/* Briefing do Agente IA · Omni Ads
   Conceito: o cliente está "contratando" um funcionário novo. Enquanto responde,
   o crachá da IA ganha rosto, nome, jeito e função. Paleta monocromática Omni (navy + teal), Onest. */
@font-face{font-family:Onest;font-weight:400;font-display:swap;src:url(/static/onest-400.woff2) format("woff2")}
@font-face{font-family:Onest;font-weight:500;font-display:swap;src:url(/static/onest-500.woff2) format("woff2")}
@font-face{font-family:Onest;font-weight:700;font-display:swap;src:url(/static/onest-700.woff2) format("woff2")}
@font-face{font-family:Onest;font-weight:900;font-display:swap;src:url(/static/onest-900.woff2) format("woff2")}
:root{
  --papel:#EEF3F6; --cartao:#FFFFFF; --cartao-2:#F4F7F9; --tinta:#001B27; --suave:#5B6F79; --linha:#D6E1E7;
  --marca:#006080; --marca-suave:#E1EEF3; --marca-tinta:#FFFFFF;
  --acao:#006080; --acao-tinta:#FFFFFF; --acao-hover:#014969;
  --cracha:#001B27; --cracha-tinta:#FFFFFF; --cracha-suave:#8FB1C1; --cracha-linha:#1C3A48;
  --ok:#006080; --erro:#B3261E; --erro-suave:#FCEBEA;
  --sombra:0 1px 2px rgba(0,27,39,.06),0 12px 32px rgba(0,27,39,.10);
  --r:8px;
  --f-titulo:Onest,ui-sans-serif,system-ui,sans-serif;
  --f-texto:Onest,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:Onest,ui-sans-serif,system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papel:#001B27; --cartao:#002534; --cartao-2:#032D3E; --tinta:#EAF2F6; --suave:#8FB1C1; --linha:#0F3B4D;
    --marca:#3FA9CC; --marca-suave:#06364A; --marca-tinta:#001B27;
    --acao:#3FA9CC; --acao-tinta:#001B27; --acao-hover:#67BEDB;
    --cracha:#002F42; --cracha-tinta:#FFFFFF; --cracha-suave:#8FB1C1; --cracha-linha:#1E4A5E;
    --ok:#3FA9CC; --erro:#FF8A80; --erro-suave:#3A1B19; --sombra:none; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --papel:#001B27; --cartao:#002534; --cartao-2:#032D3E; --tinta:#EAF2F6; --suave:#8FB1C1; --linha:#0F3B4D;
    --marca:#3FA9CC; --marca-suave:#06364A; --marca-tinta:#001B27;
    --acao:#3FA9CC; --acao-tinta:#001B27; --acao-hover:#67BEDB;
    --cracha:#002F42; --cracha-tinta:#FFFFFF; --cracha-suave:#8FB1C1; --cracha-linha:#1E4A5E;
    --ok:#3FA9CC; --erro:#FF8A80; --erro-suave:#3A1B19; --sombra:none; color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--papel);color:var(--tinta);font:16px/1.55 var(--f-texto);-webkit-font-smoothing:antialiased;min-height:100vh}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--acao)}
:focus-visible{outline:3px solid var(--marca);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--papel) 90%,transparent);backdrop-filter:blur(8px)}
.topo-in{max-width:1160px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:16px}
.marca-ag{display:flex;align-items:center;gap:14px;color:inherit;text-decoration:none}
.marca-ag .logo{height:26px;width:auto;display:block}
.marca-ag .logo-escuro{display:none}
:root[data-theme="dark"] .marca-ag .logo-claro{display:none}:root[data-theme="dark"] .marca-ag .logo-escuro{display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .marca-ag .logo-claro{display:none}:root:not([data-theme="light"]) .marca-ag .logo-escuro{display:block}}
.marca-ag small{display:block;font:500 13px/1.3 var(--f-texto);color:var(--suave);padding-left:14px;border-left:1px solid var(--linha)}
.salvo{margin-left:auto;font-size:13px;color:var(--suave);display:flex;align-items:center;gap:8px;white-space:nowrap}
.salvo:empty{visibility:hidden}
.salvo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--linha)}
.salvo[data-st="ok"]::before{background:var(--ok)}
.salvo[data-st="salvando"]::before{background:var(--marca)}
.salvo[data-st="erro"]{color:var(--erro)}
.salvo[data-st="erro"]::before{background:var(--erro)}
.trilho{height:4px;background:var(--linha)}
.trilho i{display:block;height:100%;width:0;background:var(--marca);transition:width .4s ease}

/* ---------- layout ---------- */
.wrap{max-width:1160px;margin:0 auto;padding:32px 16px 120px;display:grid;grid-template-columns:300px minmax(0,1fr);gap:48px;align-items:start}
.lado{position:sticky;top:84px;display:grid;gap:28px}
.principal{min-width:0;max-width:720px}

/* ---------- crachá ---------- */
.cracha-zona{display:grid;justify-items:center}
.fita{width:34px;height:52px;background:repeating-linear-gradient(180deg,var(--marca) 0 6px,#014969 6px 8px)}
.presilha{width:30px;height:12px;border-radius:3px;background:var(--suave);margin-top:-2px;position:relative;z-index:1}
.cracha{width:100%;margin-top:-4px;background:var(--cracha);color:var(--cracha-tinta);border-radius:14px;padding:24px 20px 18px;box-shadow:var(--sombra);position:relative;overflow:hidden;transform-origin:50% -60px;border:1px solid var(--cracha-linha)}
.cracha::before{content:"";position:absolute;top:10px;left:50%;width:44px;height:8px;margin-left:-22px;border-radius:99px;background:var(--papel)}
.cracha::after{content:"";position:absolute;right:-58px;bottom:-58px;width:190px;height:190px;background:url(/static/simbolo-branca.png) center/contain no-repeat;opacity:.06;pointer-events:none}
.cracha>*{position:relative;z-index:1}
.cracha.balanca{animation:balanca .9s cubic-bezier(.3,.7,.4,1)}
@keyframes balanca{0%{transform:rotate(0)}25%{transform:rotate(-2.2deg)}55%{transform:rotate(1.3deg)}80%{transform:rotate(-.5deg)}100%{transform:rotate(0)}}
.cr-topo{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font:700 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cracha-suave)}
.cr-logo{height:15px;width:auto;display:block}
.cr-id{display:flex;gap:14px;align-items:flex-end;margin:18px 0 16px}
.cr-foto{flex:none;width:88px;height:110px;border-radius:8px;overflow:hidden;background:#014969;outline:1px solid rgba(255,255,255,.14);outline-offset:3px}
.cr-foto img,.cr-foto svg{display:block;width:100%;height:100%;object-fit:cover}
.cr-quem{min-width:0;padding-bottom:2px}
.cr-papel{font:700 9.5px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cracha-suave);margin-bottom:6px}
.cr-nome{font:700 25px/1.05 var(--f-titulo);letter-spacing:-.02em;word-break:break-word}
.cr-nome.vazio{font-weight:500;font-size:18px;color:var(--cracha-suave)}
.cr-emp{font-size:12.5px;color:var(--cracha-suave);margin-top:6px}
.cr-campos{border-top:1px dashed var(--cracha-linha);padding-top:12px;display:grid;gap:10px}
.cr-campo b{display:block;font:700 9.5px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cracha-suave);margin-bottom:3px}
.cr-campo span{font-size:13.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cr-campo span.vazio{color:var(--cracha-suave);font-style:italic}
.carimbo{position:absolute;right:12px;top:52px;z-index:2;transform:rotate(-12deg);border:2px solid #7FD3EE;color:#7FD3EE;border-radius:6px;padding:6px 10px;font:700 12px/1.1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;text-align:center;background:color-mix(in srgb,var(--cracha) 80%,transparent)}
/* robô: piscada lenta */
.robo .olho-r{transform-box:fill-box;transform-origin:center;animation:piscar 5.5s infinite}
@keyframes piscar{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}

/* ---------- etapas ---------- */
.etapas ol{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.etapas button{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:none;border:0;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--suave);font-size:14.5px}
.etapas button:hover{background:var(--cartao)}
.etapas .n{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--f-mono);border:1.5px solid var(--linha)}
.etapas button.feito .n{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.etapas button.ativo{color:var(--tinta);font-weight:600;background:var(--cartao)}
.etapas button.ativo .n{border-color:var(--tinta);background:var(--marca);color:var(--marca-tinta)}
.etapas-m{display:none}

/* ---------- conteúdo da etapa ---------- */
.olho{font:700 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--suave)}
h1{font:700 clamp(30px,4.2vw,42px)/1.05 var(--f-titulo);letter-spacing:-.025em;margin:12px 0 12px;text-wrap:balance}
.sub{color:var(--suave);margin:0 0 32px;max-width:60ch;font-size:16.5px}
.campo{margin:0 0 28px}
.campo>label,.campo>.rot{display:block;font-weight:600;font-size:16px;margin-bottom:4px}
.req{color:var(--erro);margin-left:3px}
.ajuda{font-size:14px;color:var(--suave);margin:0 0 10px}
input[type=text],input[type=password],textarea{width:100%;background:var(--cartao);border:1.5px solid var(--linha);border-radius:10px;padding:12px 14px;font-size:16px;transition:border-color .15s,box-shadow .15s}
.campo>label+input,.campo>label+textarea{margin-top:6px}
textarea{min-height:104px;resize:vertical;line-height:1.5}
input:focus,textarea:focus{outline:none;border-color:var(--tinta);box-shadow:0 0 0 4px var(--marca-suave)}
::placeholder{color:color-mix(in srgb,var(--suave) 75%,transparent)}
.campo.erro input,.campo.erro textarea{border-color:var(--erro)}
.msg-erro{display:none;color:var(--erro);font-size:14px;margin-top:6px}
.campo.erro .msg-erro{display:block}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{border:1.5px solid var(--linha);background:var(--cartao);border-radius:99px;padding:8px 14px;cursor:pointer;font-size:14.5px;transition:background .12s,border-color .12s}
.chip:hover{border-color:var(--suave)}
.chip[aria-pressed="true"]{background:var(--marca);border-color:var(--marca);color:var(--marca-tinta);font-weight:600}
.chip[aria-pressed="true"]::before{content:"✓ "}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}
.card-op{text-align:left;border:1.5px solid var(--linha);background:var(--cartao);border-radius:var(--r);padding:14px 16px 14px 18px;cursor:pointer;display:grid;gap:4px;position:relative;transition:border-color .12s,background .12s}
.card-op:hover{border-color:var(--suave)}
.card-op b{font-weight:600}
.card-op span{font-size:14px;color:var(--suave);line-height:1.45}
.card-op[aria-pressed="true"]{border-color:var(--tinta);background:var(--marca-suave)}
.card-op[aria-pressed="true"]::after{content:"✓";position:absolute;top:12px;right:14px;width:22px;height:22px;border-radius:50%;background:var(--marca);color:var(--marca-tinta);display:grid;place-items:center;font-size:12px;font-weight:700}

.sub-bloco{border-left:3px solid var(--marca);padding:4px 0 4px 20px;margin:0 0 32px}
.sub-bloco h3{font:600 20px/1.2 var(--f-titulo);margin:0 0 16px;letter-spacing:-.01em}

.rep-item{position:relative;background:var(--cartao-2);border:1.5px solid var(--linha);border-radius:var(--r);padding:14px;margin-top:10px;display:grid;gap:8px}
.rep-item .lbl{font:700 11px/1 var(--f-mono);letter-spacing:.08em;color:var(--suave)}
.rep-item textarea{min-height:76px}
.rm{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:8px;border:0;background:none;color:var(--suave);cursor:pointer;font-size:20px;line-height:1}
.rm:hover{background:var(--erro-suave);color:var(--erro)}
.add{margin-top:10px;background:none;border:1.5px dashed var(--linha);border-radius:10px;padding:10px 14px;cursor:pointer;color:var(--suave);font-weight:600;width:100%}
.add:hover{border-color:var(--tinta);color:var(--tinta)}

/* ---------- navegação ---------- */
.nav{display:flex;align-items:center;gap:12px;margin-top:40px;padding-top:24px;border-top:1px solid var(--linha)}
.nav .dir{margin-left:auto}
.btn{border:1.5px solid var(--linha);background:var(--cartao);border-radius:10px;padding:11px 18px;cursor:pointer;font-weight:600;font-size:15px;transition:background .12s,border-color .12s}
.btn:hover{border-color:var(--tinta)}
.btn.pri{background:var(--acao);border-color:var(--acao);color:var(--acao-tinta)}
.btn.pri:hover{background:var(--acao-hover);border-color:var(--acao-hover)}
.btn.peq{padding:7px 12px;font-size:14px}
.btn:disabled{opacity:.55;cursor:default}
.btn.perigo{color:var(--erro)}

/* ---------- revisão ---------- */
.rev{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--linha)}
.rev h4{margin:0;font-size:16px}
.rev p{margin:2px 0 0;font-size:14px;color:var(--suave)}
.st{font:700 11px/1 var(--f-mono);letter-spacing:.04em;padding:6px 9px;border-radius:99px;white-space:nowrap}
.st.ok{background:var(--marca-suave);color:var(--tinta)}
.st.par{background:var(--erro-suave);color:var(--erro)}
.aviso-envio{margin-top:28px;background:var(--cartao);border:1.5px solid var(--linha);border-radius:var(--r);padding:16px 18px;font-size:15px}

/* respostas (somente leitura) */
.resp-etapa{margin:0 0 28px}
.resp-etapa h3{font:600 19px/1.2 var(--f-titulo);margin:0 0 10px;letter-spacing:-.01em}
.resp-etapa dl{margin:0;display:grid;gap:10px}
.resp-etapa dt{font-size:13px;color:var(--suave)}
.resp-etapa dd{margin:2px 0 0;white-space:pre-wrap;word-break:break-word}

/* ---------- telas de mensagem ---------- */
.tela{max-width:560px;margin:12vh auto;padding:0 16px}
.tela p{color:var(--suave);font-size:17px}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--tinta);color:var(--papel);padding:10px 16px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:20;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- celular ---------- */
@media (max-width: 900px){
  .wrap{grid-template-columns:1fr;gap:20px;padding-top:16px}
  .lado{position:static;gap:0}
  .lado .etapas{display:none}
  .cracha-zona{display:none}
  .etapas-m{display:block;margin-bottom:8px}
  .etapas-m summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;background:var(--cartao);border:1.5px solid var(--linha);border-radius:10px;padding:10px 14px;font-weight:600;font-size:15px}
  .etapas-m summary::-webkit-details-marker{display:none}
  .etapas-m summary::after{content:"▾";margin-left:auto;color:var(--suave)}
  .etapas-m[open] summary::after{content:"▴"}
  .etapas-m .etapas{display:block;margin-top:6px;background:var(--cartao);border:1.5px solid var(--linha);border-radius:10px;padding:6px}

  .cards{grid-template-columns:1fr}
  .rev{grid-template-columns:1fr auto}
  .rev .btn{grid-column:1/-1;justify-self:start}
  .marca-ag small{display:none}
}
.mini-cracha{display:flex;align-items:center;gap:12px;background:var(--cracha);color:var(--cracha-tinta);border-radius:12px;padding:10px 14px;margin-bottom:12px}
@media (min-width: 901px){.mini-cracha{display:none !important}}
.mini-cracha .cr-foto{width:40px;height:50px;border-radius:6px;outline-offset:2px}
.mini-cracha b{display:block;font:700 16px/1.1 var(--f-titulo)}
.mini-cracha small{font-size:12px;color:var(--cracha-suave)}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}
.enviado .etapas,.enviado .etapas-m{display:none !important}