/* A Resposta — folha de estilo única.
   Regras de UX inegociáveis: baixa carga sensorial, zero animação chamativa,
   nada pisca, nada conta o tempo, nada pressiona. Contraste alto sobre creme. */

:root {
  --petroleo: #1F6B6A;
  --petroleo-escuro: #0E3A36;
  --creme: #FBF8F3;
  --areia: #E7D9B8;
  --dourado: #C9A24B;
  --tinta: #10302E;

  --papel: #FFFFFF;
  --linha: #E3DACB;
  --texto-suave: #5C6B68;
  --alerta: #9B3A2F;
  --alerta-fundo: #F7EDEA;
  --ok: #2E7D5B;

  --raio: 10px;
  --largura: 44rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 17px; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  line-height: 1.25;
  color: var(--petroleo-escuro);
  letter-spacing: 0;
}

h1 { font-size: 1.75rem; margin: 0 0 .5rem; }
h2 { font-size: 1.3rem; margin: 2rem 0 .75rem; }
h3 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }

a { color: var(--petroleo); }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, label:focus-within {
  outline: 3px solid var(--dourado);
  outline-offset: 2px;
}

/* Sem movimento. Nem para quem não pediu, nem para quem pediu. */
* { transition: none !important; animation: none !important; }

/* ------------------------------------------------------------- estrutura */
.topo {
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  padding: .9rem 1.25rem;
}
.topo-interno {
  max-width: var(--largura);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.topo img { height: 38px; display: block; }
.topo .quem { font-size: .85rem; color: var(--texto-suave); }

main { max-width: var(--largura); margin: 0 auto; padding: 1.75rem 1.25rem 5rem; }
main.largo { max-width: 68rem; }

.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

.silencioso { color: var(--texto-suave); font-size: .92rem; }
.instrucao {
  background: #F4F1EA;
  border-left: 4px solid var(--areia);
  border-radius: 0 var(--raio) var(--raio) 0;
  padding: .9rem 1.1rem;
  margin: 0 0 1.5rem;
  font-size: .95rem;
}

/* -------------------------------------------------------------- progresso */
.progresso { margin: 0 0 1.5rem; }
.progresso .trilho {
  height: 8px;
  background: #EDE7DA;
  border-radius: 4px;
  overflow: hidden;
}
.progresso .feito { height: 100%; background: var(--petroleo); }
.progresso .rotulo {
  font-size: .85rem;
  color: var(--texto-suave);
  margin-top: .4rem;
  display: flex;
  justify-content: space-between;
}

/* ---------------------------------------------------------------- pergunta */
.pergunta { margin-bottom: 1.5rem; }
.pergunta .enunciado {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.22rem;
  line-height: 1.4;
  color: var(--petroleo-escuro);
  margin-bottom: 1rem;
}
.tempo-bloco {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  background: #FDFCF9;
}
.tempo-rotulo {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--petroleo);
  background: #EAF1F0;
  border-radius: 999px;
  padding: .15rem .7rem;
  margin-bottom: .8rem;
}

/* ---------------------------------------------------------------- opções */
.opcoes { display: grid; gap: .5rem; }
.opcao {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  padding: .8rem 1rem;
  cursor: pointer;
  background: var(--papel);
}
.opcao:hover { border-color: var(--petroleo); }
.opcao input { margin-top: .28rem; width: 1.05rem; height: 1.05rem; accent-color: var(--petroleo); }
.opcao.marcada { border-color: var(--petroleo); background: #F1F6F5; }

textarea, input[type="text"], input[type="date"], input[type="email"], input[type="password"], select {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--papel);
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  padding: .7rem .9rem;
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }

/* ---------------------------------------------------------------- botões */
.acoes { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; }
button, .botao {
  font: inherit;
  font-weight: 600;
  border-radius: var(--raio);
  border: 1.5px solid var(--petroleo);
  background: var(--petroleo);
  color: #fff;
  padding: .7rem 1.4rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button.secundario, .botao.secundario { background: transparent; color: var(--petroleo); }
button.discreto, .botao.discreto {
  background: transparent; color: var(--texto-suave); border-color: var(--linha); font-weight: 500;
}
button:disabled { opacity: .5; cursor: not-allowed; }

/* ----------------------------------------------------------------- listas */
.lista-blocos { display: grid; gap: .75rem; }
.bloco-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: .9rem 1.1rem; background: var(--papel);
}
.bloco-linha.travado { background: #F6F4EF; color: var(--texto-suave); }
.bloco-linha .nome { font-weight: 600; }
.etiqueta {
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; padding: .12rem .6rem; border: 1px solid var(--linha);
  color: var(--texto-suave); background: #F6F4EF; white-space: nowrap;
}
.etiqueta.feito { color: var(--ok); border-color: #BFDCCE; background: #EFF7F2; }
.etiqueta.aberta { color: var(--dourado); border-color: #E6D3A6; background: #FBF5E7; }

/* ------------------------------------------------------------------ risco */
.banner-apoio {
  border: 1px solid #E3C9C3;
  background: var(--alerta-fundo);
  border-radius: var(--raio);
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
  font-size: .95rem;
}
.banner-apoio h3 { margin: 0 0 .4rem; font-size: 1rem; color: var(--alerta); }
.banner-apoio ul { margin: .5rem 0 0; padding-left: 1.1rem; }

/* ----------------------------------------------------------------- painel */
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { border: 1px solid var(--linha); padding: .5rem .6rem; text-align: left; vertical-align: top; }
th { background: #F4F1EA; font-weight: 600; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

.faixa-baixo { background: #F2F6F4; }
.faixa-moderado { background: #FBF3DF; }
.faixa-alto { background: #F5E2DC; }
.faixa-sem { background: #F6F4EF; color: var(--texto-suave); }

.pill-flag {
  display: inline-block; border-radius: 999px; padding: .1rem .65rem;
  font-size: .78rem; font-weight: 600;
}
.pill-vermelha { background: #F2D9D3; color: #7E2A20; }
.pill-amarela { background: #FAEECB; color: #7A5B12; }
.pill-informativa { background: #E9EFEE; color: #375B57; }

.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 720px) { .grade-2 { grid-template-columns: 1fr; } }

.rodape { border-top: 1px solid var(--linha); margin-top: 3rem; padding-top: 1rem; }
.salvo { font-size: .85rem; color: var(--ok); }

/* -------------------------------------------------------------- gráfico */
.grafico { width: 100%; height: auto; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); }
.legenda { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .85rem; margin-top: .6rem; }
.legenda span::before {
  content: ""; display: inline-block; width: .8rem; height: .8rem;
  border-radius: 3px; margin-right: .35rem; vertical-align: -1px; background: currentColor;
}

/* --------------------------------------------------------------- sliders */
.slider-linha { margin-bottom: 1.25rem; }
.slider-linha label { font-weight: 600; display: block; margin-bottom: .15rem; }
.slider-linha .ancoras { display: flex; justify-content: space-between; font-size: .82rem; color: var(--texto-suave); }
input[type="range"] { width: 100%; accent-color: var(--petroleo); }
.valor-slider { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--petroleo); }

/* ------------------------------------------------- início e painel da equipe
   Mesma regra do resto da casa: nada pisca, nada conta o tempo, nada pressiona.
   Destaque se dá por peso e posição, nunca por animação. */

.dash-topo { display:flex; justify-content:space-between; align-items:baseline;
             gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.dash-topo h1 { margin:0; }

.passo { background:var(--papel); border:1px solid var(--linha);
         border-left:4px solid var(--petroleo); border-radius:var(--raio);
         padding:1.25rem 1.35rem; margin-bottom:1.25rem; }
.passo h2 { margin:.1rem 0 .35rem; }
.passo .porque { color:var(--texto-suave); font-size:.9rem; margin:0; }
.passo .contexto { color:var(--texto-suave); margin:0 0 .6rem; }

.barra-longa { height:7px; background:var(--linha); border-radius:999px;
               overflow:hidden; margin-bottom:.35rem; }
.barra-longa span { display:block; height:100%; background:var(--petroleo); }
.legenda-barra { margin-top:0; font-size:.82rem; }

.contexto-etapa { font-size:.85rem; margin-bottom:.15rem; }

.numeros { display:grid; grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr));
           gap:.75rem; margin:0 0 1.75rem; }
.numero { background:var(--papel); border:1px solid var(--linha);
          border-radius:var(--raio); padding:.9rem 1rem; }
.numero .n { font-family:'Fraunces', Georgia, serif; font-size:1.9rem; line-height:1.1;
             display:block; font-variant-numeric:tabular-nums; }
.numero .r { font-size:.82rem; color:var(--texto-suave); }
.numero.destaque { border-color:var(--alerta); background:var(--alerta-fundo); }
.numero.destaque .n { color:var(--alerta); }

.secao { margin-bottom:2rem; }
.secao > h2 { font-size:1.15rem; margin:0 0 .2rem; }
.secao > .sub { color:var(--texto-suave); font-size:.88rem; margin:0 0 .9rem; }

.fila { list-style:none; margin:0; padding:0; }
.fila li { background:var(--papel); border:1px solid var(--linha);
           border-radius:var(--raio); padding:.8rem 1rem; margin-bottom:.5rem;
           display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.fila li.urgente { border-left:4px solid var(--alerta); }
.fila li.pronto  { border-left:4px solid var(--ok); }
.fila .quem-linha { flex:1 1 12rem; min-width:0; }
.fila .quem-linha strong { display:block; }
.fila .meta { font-size:.82rem; color:var(--texto-suave); }

.status { display:inline-block; font-size:.75rem; padding:.12rem .55rem;
          border-radius:999px; border:1px solid var(--linha);
          background:var(--creme); white-space:nowrap; }
.status.s-nunca_entrou      { border-color:var(--dourado); }
.status.s-sem_consentimento { border-color:var(--dourado); }
.status.s-parado            { border-color:var(--alerta); color:var(--alerta); }
.status.s-completo          { border-color:var(--ok); color:var(--ok); }

.barra { height:6px; background:var(--linha); border-radius:999px;
         overflow:hidden; min-width:6rem; flex:0 0 8rem; }
.barra span { display:block; height:100%; background:var(--petroleo); }

.vazio { color:var(--texto-suave); font-style:italic; padding:.6rem 0; }

.link-copiar { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.link-copiar input { font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
                     font-size:.85rem; flex:1 1 20rem; }