/* Paleta oficial do manual de marca da Saber+ (Influenci.ar, 02/09/2026).
   O azul #285070 dos relatórios NÃO entra aqui: aquela decisão vale para o
   documento entregue ao Sebrae; o manual vale para o resto, e a tela é resto.

   Sem webfont de propósito. Manison Condensed é licenciada e não se serve como
   arquivo aqui, e puxar Open Sans do Google faria o navegador da consultora
   bater num terceiro a cada tela — numa plataforma cujo desenho inteiro é não
   mandar nada para fora. A pilha abaixo cai em fonte do sistema. */

:root {
  --escuro: #301b15;
  --terracota: #a65437;
  --creme: #f6f2eb;
  --oliva: #737b4c;
  --papel: #fffdf9;
  --linha: #e0d7c8;
  --tinta-fraca: #6f5f57;
  --alerta: #8c2f1c;

  --texto: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --titulo: "Manison Condensed", "Oswald", "Archivo Narrow",
            "Segoe UI Semibold", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--escuro);
  font: 15px/1.55 var(--texto);
}

/* --- topo ------------------------------------------------------------ */

/* Barra clara porque a marca oficial é preta com o cérebro em azul, sobre
   fundo branco. Sobre o marrom escuro ela sumiria, e clarear a logo do cliente
   para caber no fundo que eu escolhi é mexer na marca dele. Inverte-se a
   barra, não a marca. */
.topo {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 10px 32px;
  background: var(--papel);
  color: var(--escuro);
  border-bottom: 1px solid var(--linha);
}

.marca { display: flex; text-decoration: none; }
.marca img {
  height: 56px;
  width: auto;
  display: block;
}

.topo nav { display: flex; gap: 22px; flex: 1; align-items: center; }

.topo nav a,
.topo .sair {
  color: var(--escuro);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.topo nav a:hover,
.topo .sair:hover { border-bottom-color: var(--terracota); }
.topo nav a.atual { border-bottom-color: var(--terracota); }
.topo .sair { color: var(--tinta-fraca); }

/* --- estrutura ------------------------------------------------------- */

main { max-width: 1080px; margin: 0 auto; padding: 32px; }

h1 {
  font-family: var(--titulo);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 4px;
  text-wrap: balance;
}

.legenda {
  color: var(--tinta-fraca);
  margin: 0 0 28px;
  max-width: 62ch;
}

/* Régua à esquerda em vez de cartão com sombra: a sombra genérica é a marca
   registrada de painel feito às pressas, e aqui o bloco precisa parecer ficha
   de trabalho. */
.bloco {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--terracota);
  padding: 18px 22px;
  margin-bottom: 14px;
}
.bloco.resolvido { border-left-color: var(--oliva); }
.bloco.parado { border-left-color: var(--alerta); }

.rotulo {
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  display: block;
  margin-bottom: 3px;
}

/* --- tabelas --------------------------------------------------------- */

.rolagem { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; background: var(--papel); }

th {
  font-family: var(--titulo);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding: 9px 12px;
  border-bottom: 2px solid var(--escuro);
  white-space: nowrap;
}

td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--linha);
  vertical-align: top;
}

td.numero { font-variant-numeric: tabular-nums; white-space: nowrap; }

tr:last-child td { border-bottom: none; }

/* --- estado ---------------------------------------------------------- */

.estado {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.estado.pendente { color: var(--tinta-fraca); }
.estado.processando { color: var(--terracota); }
.estado.concluido { color: var(--oliva); }
.estado.erro { color: var(--alerta); }
.estado.rascunho { color: var(--tinta-fraca); }
.estado.revisado { color: var(--oliva); }

/* --- formulário ------------------------------------------------------ */

label { display: block; margin-bottom: 12px; }
label > span { display: block; }

input[type=text], input[type=number], input[type=file], select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--linha);
  background: var(--papel);
  color: var(--escuro);
  font: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--terracota);
  outline-offset: 1px;
}

textarea { min-height: 60vh; font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 13px; }

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 18px;
}

button, .botao {
  font-family: var(--titulo);
  font-size: 14px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 10px 20px;
  border: 1px solid var(--escuro);
  background: var(--escuro);
  color: var(--creme);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .botao:hover { background: var(--terracota); border-color: var(--terracota); }

button.discreto, .botao.discreto {
  background: transparent;
  color: var(--escuro);
  border-color: var(--linha);
}
button.discreto:hover, .botao.discreto:hover {
  background: transparent;
  color: var(--terracota);
  border-color: var(--terracota);
}

/* Borda tracejada porque cheio de borda cheia ele parece botão desligado por
   engano; tracejado lê como "isto não é um botão". */
button[disabled], .botao.travado {
  background: transparent;
  color: var(--tinta-fraca);
  border: 1px dashed var(--linha);
  cursor: not-allowed;
}

/* --- avisos ---------------------------------------------------------- */

.avisos { list-style: none; padding: 0; margin: 0 0 22px; }
.aviso {
  padding: 10px 16px;
  border-left: 3px solid var(--oliva);
  background: var(--papel);
  margin-bottom: 6px;
}
.aviso.erro { border-left-color: var(--alerta); }

.vazio {
  color: var(--tinta-fraca);
  padding: 40px 0;
  border-top: 1px solid var(--linha);
}

/* --- origem do número (tela 4) --------------------------------------- */

.origens { list-style: none; padding: 0; margin: 0; }
.origens li {
  padding: 9px 0;
  border-bottom: 1px solid var(--linha);
}
.origens .campo { font-weight: 600; }
.origens .minuto {
  font-variant-numeric: tabular-nums;
  color: var(--terracota);
  margin-left: 8px;
}
.origens .trecho { display: block; color: var(--tinta-fraca); font-style: italic; }
.origens .sem-origem { display: block; color: var(--alerta); font-size: 13px; }

.duas-colunas {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
  gap: 28px;
  align-items: start;
}

@media (max-width: 760px) {
  .duas-colunas { grid-template-columns: 1fr; }
  main { padding: 20px 16px; }
  .topo { flex-wrap: wrap; gap: 14px 20px; padding: 12px 16px; }
}

/* --- entrar ---------------------------------------------------------- */

.entrada {
  max-width: 340px;
  margin: 14vh auto;
  padding: 32px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-top: 3px solid var(--terracota);
}
.marca-entrada { height: 62px; width: auto; display: block; margin-bottom: 16px; }
.entrada .erro { color: var(--alerta); margin: 0 0 14px; }
.entrada button { width: 100%; }