/* =====================================================================
   MED SAUDE COLETIVA AI — estilo base
   Paleta sobria: a plataforma reivindica identidade cientifica, e a
   interface precisa sustentar isso. Cor forte so onde ha significado
   pedagogico (os quadrantes).
   ===================================================================== */
:root{
  --tinta:#0f2230; --tinta-2:#2a4759; --tinta-3:#5c7a8c;
  --papel:#f7f9fa; --papel-2:#ffffff; --linha:#dde5e9;
  --acento:#0d7377; --acento-claro:#e6f2f2; --acento-escuro:#095457;
  --q1:#c0392b; --q1-bg:#fdecea;
  --q2:#b8860b; --q2-bg:#fdf5e2;
  --q3:#d35400; --q3-bg:#fdf0e6;
  --q4:#1e7a4d; --q4-bg:#e8f5ee;
  --raio:10px;
  --sombra:0 1px 3px rgba(15,34,48,.08), 0 1px 2px rgba(15,34,48,.04);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font:16px/1.6 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{line-height:1.25; margin:0 0 .5em}
h1{font-size:1.6rem; font-weight:650}
h2{font-size:1.2rem; font-weight:620}
h3{font-size:1rem; font-weight:620}
a{color:var(--acento)}
.oculto{display:none !important}

/* ------------------------------------------------------------------ */
.topo{
  background:var(--tinta); color:#fff; padding:.7rem 1.2rem;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.topo .marca{font-weight:680; letter-spacing:-.01em}
.topo .marca small{display:block; font-weight:400; font-size:.68rem; opacity:.7; letter-spacing:.04em; text-transform:uppercase}
.topo nav{margin-left:auto; display:flex; gap:.4rem; flex-wrap:wrap}
.topo nav button{
  background:transparent; border:1px solid rgba(255,255,255,.25); color:#fff;
  padding:.35rem .8rem; border-radius:99px; cursor:pointer; font-size:.85rem;
}
.topo nav button:hover{background:rgba(255,255,255,.12)}
.topo nav button.ativo{background:#fff; color:var(--tinta); border-color:#fff}

.envelope{max-width:820px; margin:0 auto; padding:1.5rem 1.2rem 4rem}
.envelope.largo{max-width:1080px}

.cartao{
  background:var(--papel-2); border:1px solid var(--linha);
  border-radius:var(--raio); padding:1.2rem; box-shadow:var(--sombra);
  margin-bottom:1rem;
}
.cartao.compacto{padding:.9rem 1rem}

.btn{
  background:var(--acento); color:#fff; border:0; padding:.7rem 1.3rem;
  border-radius:var(--raio); font-size:.95rem; font-weight:600; cursor:pointer;
}
.btn:hover{background:var(--acento-escuro)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.secundario{background:transparent; color:var(--acento); border:1px solid var(--acento)}
.btn.secundario:hover{background:var(--acento-claro)}
.btn.largo{width:100%}

input,select,textarea{
  width:100%; padding:.6rem .7rem; border:1px solid var(--linha);
  border-radius:8px; font:inherit; background:#fff; color:var(--tinta);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acento); outline-offset:-1px}
label{display:block; font-size:.82rem; font-weight:600; color:var(--tinta-2); margin:.8rem 0 .25rem}
.campos-2{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
@media(max-width:560px){.campos-2{grid-template-columns:1fr}}

.aviso{padding:.7rem .9rem; border-radius:8px; font-size:.88rem; margin:.6rem 0}
.aviso.erro{background:var(--q1-bg); color:var(--q1); border:1px solid #f2c4be}
.aviso.info{background:var(--acento-claro); color:var(--acento-escuro); border:1px solid #bfdedd}

.rotulo{
  display:inline-block; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;
  font-weight:700; padding:.2rem .5rem; border-radius:5px;
  background:var(--acento-claro); color:var(--acento-escuro);
}
.rotulo.cinza{background:#eceff1; color:var(--tinta-3)}
.rotulo.piloto{background:#fdf5e2; color:#8a6508}

.discreto{color:var(--tinta-3); font-size:.85rem}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.85em}

/* ---------------------- SESSAO --------------------------------------- */
.barra-progresso{height:4px; background:var(--linha); border-radius:99px; overflow:hidden; margin-bottom:1rem}
.barra-progresso > div{height:100%; background:var(--acento); transition:width .3s}

.cabecalho-item{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:.8rem}

.enunciado{font-size:1.05rem; line-height:1.65; margin:.6rem 0 1rem}
.suporte{
  background:#f2f6f8; border:1px solid var(--linha); border-radius:8px;
  padding:.8rem 1rem; margin:.8rem 0; overflow-x:auto; font-size:.92rem;
}
.suporte table{border-collapse:collapse; width:100%}
.suporte th,.suporte td{border:1px solid var(--linha); padding:.35rem .6rem; text-align:left}
.suporte th{background:#e8eef1; font-weight:650}

.alternativas{display:flex; flex-direction:column; gap:.5rem; margin:1rem 0}
.alt{
  display:flex; gap:.7rem; align-items:flex-start; text-align:left; width:100%;
  padding:.75rem .9rem; border:1.5px solid var(--linha); border-radius:9px;
  background:#fff; cursor:pointer; font:inherit; color:inherit; transition:.12s;
}
.alt:hover:not(:disabled){border-color:var(--acento); background:var(--acento-claro)}
.alt:disabled{cursor:default}
.alt .letra{
  flex:0 0 26px; height:26px; border-radius:50%; background:#eef2f4;
  display:grid; place-items:center; font-weight:700; font-size:.82rem; color:var(--tinta-2);
}
.alt.marcada{border-color:var(--acento); background:var(--acento-claro)}
.alt.marcada .letra{background:var(--acento); color:#fff}
.alt.certa{border-color:var(--q4); background:var(--q4-bg)}
.alt.certa .letra{background:var(--q4); color:#fff}
.alt.errada{border-color:var(--q1); background:var(--q1-bg)}
.alt.errada .letra{background:var(--q1); color:#fff}

/* Confianca — o passo que a maioria das plataformas nao tem */
.confianca{border-top:1px dashed var(--linha); padding-top:1rem; margin-top:.5rem}
.confianca p{margin:0 0 .6rem; font-weight:620}
.opcoes-confianca{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem}
@media(max-width:560px){.opcoes-confianca{grid-template-columns:1fr}}
.opcoes-confianca button{
  padding:.7rem .5rem; border:1.5px solid var(--linha); border-radius:9px;
  background:#fff; cursor:pointer; font:inherit; text-align:center; line-height:1.3;
}
.opcoes-confianca button:hover{border-color:var(--tinta-2); background:#f4f7f8}
.opcoes-confianca button strong{display:block; font-size:.95rem}
.opcoes-confianca button span{font-size:.74rem; color:var(--tinta-3)}

/* Devolutiva */
.quadrante{border-left:4px solid; border-radius:8px; padding:.9rem 1rem; margin:1rem 0}
.quadrante h3{margin:0 0 .3rem; font-size:1rem}
.quadrante p{margin:0; font-size:.92rem}
.quadrante.Q1{border-color:var(--q1); background:var(--q1-bg); color:#7d2119}
.quadrante.Q2{border-color:var(--q2); background:var(--q2-bg); color:#6d5107}
.quadrante.Q3{border-color:var(--q3); background:var(--q3-bg); color:#8a3800}
.quadrante.Q4{border-color:var(--q4); background:var(--q4-bg); color:#155c3a}

.bloco-erro{border:1px solid var(--linha); border-radius:9px; padding:.9rem 1rem; margin:.8rem 0; background:#fbfcfd}
.bloco-erro .cod{font-weight:700; color:var(--acento-escuro)}
.bloco-erro .remediacao{margin-top:.5rem; font-size:.92rem}

.movimento{display:flex; gap:1.2rem; flex-wrap:wrap; margin:.8rem 0; font-size:.9rem}
.movimento b{font-size:1.15rem; display:block}
.delta-sobe{color:var(--q4)} .delta-desce{color:var(--q1)}

/* ---------------------- MAPA ----------------------------------------- */
.dominio{margin-bottom:1.2rem}
.dominio > header{display:flex; align-items:baseline; gap:.6rem; margin-bottom:.4rem; flex-wrap:wrap}
.dominio h3{margin:0}
.comps{display:flex; flex-direction:column; gap:.35rem}
.comp{
  display:grid; grid-template-columns:1fr 84px 58px; gap:.7rem; align-items:center;
  padding:.5rem .7rem; border:1px solid var(--linha); border-radius:8px; background:#fff;
}
@media(max-width:560px){.comp{grid-template-columns:1fr 70px 46px}}
.comp .nome{font-size:.9rem}
.comp .nome small{display:block; color:var(--tinta-3); font-size:.74rem}
.trilho{height:7px; background:#eceff1; border-radius:99px; overflow:hidden}
.trilho > div{height:100%; border-radius:99px}
.comp .valor{text-align:right; font-weight:700; font-size:.92rem}
.comp.sem-dado{opacity:.62}
.comp.sem-dado .valor{font-weight:500; font-size:.72rem; color:var(--tinta-3)}

.metricas{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.7rem}
.metrica{border:1px solid var(--linha); border-radius:9px; padding:.75rem .85rem; background:#fff}
.metrica .v{font-size:1.5rem; font-weight:700; line-height:1.1}
.metrica .n{font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-3); font-weight:650}
.metrica .d{font-size:.76rem; color:var(--tinta-3); margin-top:.25rem}
.metrica .v.vazio{font-size:.9rem; font-weight:500; color:var(--tinta-3)}

.lista-motivos{list-style:none; padding:0; margin:.5rem 0 0}
.lista-motivos li{
  padding:.6rem .8rem; border-left:3px solid var(--acento); background:var(--acento-claro);
  border-radius:0 8px 8px 0; margin-bottom:.4rem; font-size:.9rem;
}

.rodape-metodo{
  margin-top:2rem; padding-top:1rem; border-top:1px solid var(--linha);
  font-size:.78rem; color:var(--tinta-3);
}