/* ==========================================================================
   Folha do portal. Depende de tokens.css — nenhuma cor literal aqui.
   Cor nova entra em tokens.css, nunca neste arquivo.
   ========================================================================== */

* { box-sizing: border-box }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 15px/1.5 var(--fonte);
}

a { color: var(--marca); text-decoration: none }
a:hover { text-decoration: underline }

/* ---------------------------------------------------------------- cabecalho */
header {
  background: var(--painel);
  border-bottom: 1px solid var(--regua);
  padding: 0 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
header .marca { display: flex; align-items: baseline; gap: 9px; padding: 14px 0 }
header .marca b { font-size: 1.05rem; letter-spacing: -.01em; color: var(--marca) }
header .sub { color: var(--tinta-3); font-size: .85rem }

/* navegacao de modulos: aba, nao link solto. Modulo novo = um <a> a mais. */
header .modulos { display: flex; gap: 2px; align-self: stretch; align-items: stretch }
header .modulos a {
  display: flex; align-items: center; padding: 0 14px;
  color: var(--tinta-2); font-size: .88rem; font-weight: 500;
  border-bottom: 2px solid transparent;
}
header .modulos a:hover { color: var(--tinta); text-decoration: none; background: var(--painel-2) }
header .modulos a.on { color: var(--marca); border-bottom-color: var(--marca) }
header .modulos a.futuro { color: var(--tinta-3); cursor: default }
header .modulos a.futuro:hover { background: none; color: var(--tinta-3) }
header .eu { margin-left: auto; display: flex; gap: 12px; align-items: center; padding: 14px 0 }

main { max-width: 1240px; margin: 0 auto; padding: 26px 24px 70px }
h1 { font-size: 1.5rem; letter-spacing: -.02em; margin: 0 0 6px }
h3 { font-size: 1rem; letter-spacing: -.01em }
.lede { color: var(--tinta-2); margin: 0 0 22px; max-width: 74ch }

.card {
  background: var(--painel); border: 1px solid var(--regua);
  border-radius: var(--raio); padding: 18px 20px; margin-bottom: 18px;
  overflow-x: auto;
}

/* ---------------------------------------------------------------- cartoes */
.cartoes {
  display: grid; gap: 14px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.cartao {
  background: var(--painel); border: 1px solid var(--regua);
  border-radius: var(--raio); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px;
}
.cartao .rot { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3) }
.cartao .val { font: 600 1.6rem/1.15 var(--fonte); font-variant-numeric: tabular-nums; letter-spacing: -.02em }
.cartao .pe  { font-size: .76rem; color: var(--tinta-3) }
.cartao.alerta { border-color: var(--atencao); background: var(--atencao-lavado) }

/* ---------------------------------------------------------------- tabelas */
table { width: 100%; border-collapse: collapse; font-size: .9rem }
caption {
  text-align: left; padding: 16px 20px 12px; font-weight: 600;
  letter-spacing: -.01em;
}
caption span {
  display: block; font-weight: 400; font-size: .82rem; color: var(--tinta-2);
  max-width: 82ch; margin-top: 4px;
}
th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-3); padding: 10px 8px; border-bottom: 1px solid var(--regua);
  white-space: nowrap;
}
td { padding: 8px; border-bottom: 1px solid var(--regua); vertical-align: middle }
td:first-child, th:first-child { padding-left: 20px }
td:last-child,  th:last-child  { padding-right: 20px }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums }
tbody tr:last-child td { border-bottom: 0 }
tr.on { background: var(--marca-lavada) }
.ruim { color: var(--ruim); font-weight: 600 }
.bom  { color: var(--bom) }

/* barra proporcional da serie: comparacao relativa, nao grafico */
.barra-fat {
  display: block; height: 9px; border-radius: 2px;
  background: color-mix(in srgb, var(--marca) 60%, transparent);
}

/* ---------------------------------------------------------------- controles */
input[type=text], input[type=password], select {
  background: var(--fundo); color: var(--tinta); border: 1px solid var(--regua);
  border-radius: 3px; padding: 7px 9px; font: inherit; font-size: .88rem;
}
input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--marca) }
button {
  background: var(--marca); color: #fff; border: 0; border-radius: 3px;
  padding: 10px 20px; font: inherit; font-weight: 600; cursor: pointer;
}
button:hover { background: var(--marca-escura) }
label { display: block; font-size: .8rem; color: var(--tinta-2); margin: 12px 0 4px }
label.inline { display: inline; margin: 0 }

.aviso { border-left: 3px solid var(--atencao); padding: 10px 0 10px 16px; color: var(--tinta-2); margin: 16px 0 }
.aviso.al { border-left-color: var(--ruim) }
.ok { border-left: 3px solid var(--bom); padding: 10px 0 10px 16px; color: var(--tinta-2); margin: 16px 0 }
.erro { color: var(--ruim); margin: 10px 0 }

.barra {
  position: sticky; bottom: 0; background: var(--painel);
  border-top: 1px solid var(--regua); padding: 14px 24px;
  display: flex; gap: 16px; align-items: center;
}
.chip {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  padding: 2px 7px; border-radius: 2px;
  background: color-mix(in srgb, var(--tinta-3) 18%, transparent); color: var(--tinta-2);
}
.entrada { max-width: 380px; margin: 9vh auto }

/* submenu dentro de um modulo */
.submenu { display: flex; gap: 16px; margin: 0 0 20px; font-size: .88rem }
.submenu a { color: var(--tinta-2) }
.submenu a.on { color: var(--tinta); font-weight: 600; text-decoration: none; cursor: default }

/* prefixo de moeda: presente, sem competir com o numero */
.cartao .val i {
  font-style: normal; font-size: .62em; font-weight: 500;
  color: var(--tinta-3); margin-right: 4px; vertical-align: .16em;
}

/* chip de estado vindo do ERP, nao da nossa classificacao */
.chip.ex { background: var(--ruim-lavado); color: var(--ruim) }

/* chip nunca quebra: "a conferir" partido em duas linhas parece defeito */
.chip { white-space: nowrap; display: inline-block }

/* coluna de nome no quadro: nome proprio nao se quebra em tres linhas */
.quadro td:nth-child(2) { min-width: 260px }
.quadro td:nth-child(2) .nome { white-space: nowrap }