/* Diagnóstico financeiro — visual alinhado à landing page de /lp/.
   O visitante vem de lá; a página precisa parecer a mesma casa. */

@font-face{
  font-family:'Conthrax';
  src:url('conthrax-sb.woff2') format('woff2');
  font-weight:600; font-display:swap;
}

:root{
  --azul-900:#10427E;
  --azul-600:#0B7FA9;
  --tinta:#1B2B40;
  --cinza:#5A6B80;
  --linha:#DCE6EF;
  --nevoa:#F3F8FC;
  --branco:#FFFFFF;
  --grad-verde:linear-gradient(100deg,#55B848,#A1CD51);

  /* Estados do raio-x. Todos passam AA sobre branco e sobre névoa, e a mesma
     cor pinta o ponto e o rótulo — a bolinha nunca é a única portadora da
     informação, então quem não distingue a cor lê o texto do lado. */
  --e-desconhecido:#5A6B80;
  --e-ok:#3A7D31;
  --e-atencao:#8A6100;
  --e-critico:#B3261E;

  --largura:1100px;   /* mesma medida do conteúdo da LP */
}

*{margin:0;padding:0;box-sizing:border-box}

/* O atributo hidden só esconde porque o navegador aplica [hidden]{display:none}
   — uma regra de baixa prioridade que qualquer display: de autor derrota. A
   caixa de erro (.aviso-erro{display:flex}) aparecia vazia por causa disso.
   Vale para todo elemento que este arquivo mostra e esconde via .hidden. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{
  font-family:'Work Sans',system-ui,-apple-system,sans-serif;
  color:var(--tinta);
  background:var(--nevoa);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:'Conthrax','Work Sans',system-ui,sans-serif;font-weight:600}

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- topo ---------- */
.topo{background:var(--branco);border-bottom:1px solid var(--linha)}
.faixa{
  max-width:var(--largura);margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.marca img{display:block;height:34px;width:auto}
.selo{
  font-size:.8rem;font-weight:600;color:var(--azul-900);
  background:var(--nevoa);border:1px solid var(--linha);
  padding:6px 12px;border-radius:999px;
}

/* ---------- palco ---------- */
.palco{
  max-width:var(--largura);margin:0 auto;padding:20px;
  display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;
  align-items:start;
}

/* ---------- conversa ---------- */
.conversa{
  background:var(--branco);border:1px solid var(--linha);border-radius:14px;
  padding:18px;display:flex;flex-direction:column;
  min-height:min(72vh,620px);
}
.mensagens{
  flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;
  padding-right:4px;max-height:min(62vh,560px);
}
.msg{max-width:88%;padding:12px 14px;border-radius:12px;font-size:.95rem}
.msg b{font-weight:600}
.msg-clara{background:var(--nevoa);border:1px solid var(--linha);align-self:flex-start}
.msg-voce{background:var(--azul-900);color:var(--branco);align-self:flex-end}
.msg-clara p+p,.msg-voce p+p{margin-top:.6em}

.digitando{
  align-self:flex-start;display:flex;gap:5px;padding:14px;
}
.digitando i{
  width:7px;height:7px;border-radius:50%;background:var(--cinza);
  animation:pulsa 1.1s infinite ease-in-out;
}
.digitando i:nth-child(2){animation-delay:.15s}
.digitando i:nth-child(3){animation-delay:.3s}
@keyframes pulsa{0%,60%,100%{opacity:.28}30%{opacity:1}}

/* ---------- erro ---------- */
.aviso-erro{
  margin-top:14px;padding:12px 14px;border-radius:10px;
  background:#FDF2F1;border:1px solid #F0C8C4;color:#7A1B15;font-size:.9rem;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.btn-erro{
  background:var(--azul-900);color:var(--branco);border:0;border-radius:8px;
  padding:8px 14px;font:inherit;font-weight:600;font-size:.85rem;cursor:pointer;
}
.btn-erro:hover{background:var(--azul-600)}

/* ---------- escrever ---------- */
.escrever{margin-top:14px;display:flex;gap:10px;align-items:flex-end}
.escrever textarea{
  flex:1;resize:none;font:inherit;font-size:.95rem;color:var(--tinta);
  border:1.5px solid var(--linha);border-radius:10px;padding:11px 13px;
  max-height:140px;background:var(--branco);
}
.escrever textarea:focus-visible{outline:2px solid var(--azul-600);outline-offset:1px;border-color:var(--azul-600)}
.escrever button{
  background:var(--azul-900);color:var(--branco);border:0;border-radius:10px;
  padding:12px 20px;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;
  white-space:nowrap;
}
.escrever button:hover:not(:disabled){background:var(--azul-600)}
.escrever button:disabled{opacity:.5;cursor:not-allowed}
.dica{font-size:.75rem;color:var(--cinza);margin-top:7px}

.rodape-conversa{
  margin-top:14px;padding-top:13px;border-top:1px solid var(--linha);
  font-size:.78rem;color:var(--cinza);
}
.rodape-conversa a{color:var(--azul-600)}

/* ---------- raio-x ---------- */
.raiox{
  background:var(--branco);border:1px solid var(--linha);border-radius:14px;
  padding:18px;position:sticky;top:20px;
}
.raiox-toggle{display:none}
.raiox-titulo{font-size:1rem;color:var(--azul-900)}
.raiox-sub{font-size:.8rem;color:var(--cinza);margin-top:4px}

.areas{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:2px}
.area{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;
  padding:9px 8px;border-radius:8px;font-size:.85rem;
  border-bottom:1px solid var(--linha);
}
.area:last-child{border-bottom:0}
.area[data-estado="desconhecido"]{--cor:var(--e-desconhecido)}
.area[data-estado="ok"]{--cor:var(--e-ok)}
.area[data-estado="atencao"]{--cor:var(--e-atencao)}
.area[data-estado="critico"]{--cor:var(--e-critico)}
.ponto{width:9px;height:9px;border-radius:50%;background:var(--cor)}
.area-nome{color:var(--tinta)}
.area-status{color:var(--cor);font-size:.74rem;font-weight:600;text-align:end}
.area[data-estado="critico"] .area-nome,
.area[data-estado="atencao"] .area-nome{font-weight:600}

.bloco-porte,.bloco-gaps,.bloco-zap{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--linha);
}
.bloco-porte h3,.bloco-gaps h3{font-size:.82rem;color:var(--azul-900);margin-bottom:9px}
.porte{font-size:.82rem}
.porte div{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.porte dt{color:var(--cinza)}
.porte dd{color:var(--tinta);font-weight:500;text-align:end}
.nivel{
  margin-top:11px;padding:9px 11px;border-radius:8px;
  background:var(--nevoa);border:1px solid var(--linha);
  font-size:.82rem;color:var(--azul-900);font-weight:600;text-align:center;
}
.gaps{padding-left:17px;font-size:.83rem;display:flex;flex-direction:column;gap:7px}
.gaps li{color:var(--tinta)}

.btn-zap{
  display:block;text-align:center;background:var(--grad-verde);
  color:var(--tinta);   /* branco sobre este gradiente dá 1,85:1 — reprova */
  font-weight:600;font-size:.9rem;text-decoration:none;
  padding:13px 16px;border-radius:10px;
}
.zap-nota{font-size:.74rem;color:var(--cinza);margin-top:7px;text-align:center}

/* ---------- mobile ---------- */
@media (max-width:860px){
  .palco{grid-template-columns:1fr;padding:14px}
  .raiox{position:static;order:-1;padding:0;overflow:hidden}
  .raiox-titulo,.raiox-sub{display:none}

  /* No celular o raio-x começa fechado: a conversa é o que importa, e um
     painel de seis linhas empurraria o campo de texto para fora da tela. */
  .raiox-toggle{
    display:flex;width:100%;align-items:center;justify-content:space-between;
    gap:10px;padding:14px 16px;background:var(--branco);border:0;
    font:inherit;font-weight:600;font-size:.88rem;color:var(--azul-900);cursor:pointer;
  }
  .seta{
    width:9px;height:9px;border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:rotate(45deg);
    transition:transform .18s ease;
  }
  .raiox-toggle[aria-expanded="true"] .seta{transform:rotate(-135deg)}
  .raiox-corpo{display:none;padding:0 16px 16px}
  .raiox-corpo.aberto{display:block}
  .conversa{min-height:auto;padding:14px}
  .mensagens{max-height:none}
  .msg{max-width:94%}
  .selo{display:none}
}