/* Plano de controle é lista, botão e link. Legível e chato. */
:root {
  --tinta: #1f2328;
  --mudo: #6b7280;
  --linha: #d9dde3;
  --fundo: #f7f8fa;
  --papel: #fff;
  --erro: #9f1239;
  --erro-fundo: #fff1f2;
  --ok: #166534;
  --neutro: #94a3b8;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tinta); background: var(--fundo); }
main { max-width: 1040px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 17px; margin: 0 0 8px; }
h3 { font-size: 16px; margin: 6px 0 2px; }
a { color: inherit; }
.mudo { color: var(--mudo); }
.erro { color: var(--erro); background: var(--erro-fundo); padding: 8px 12px; border-radius: 4px; }
.feito { color: var(--ok); background: #f0fdf4; padding: 8px 12px; border-radius: 4px; }
.vazio { color: var(--mudo); font-style: italic; }
button { font: inherit; padding: 6px 12px; border: 1px solid var(--linha); border-radius: 4px; background: var(--papel); cursor: pointer; }
button:hover { border-color: var(--tinta); }
input, select { font: inherit; padding: 6px 8px; border: 1px solid var(--linha); border-radius: 4px; background: var(--papel); }

.topo { display: flex; align-items: center; gap: 24px; padding: 10px 16px; background: var(--papel); border-bottom: 1px solid var(--linha); }
.topo .marca { font-weight: 600; text-decoration: none; }
.topo nav { display: flex; gap: 16px; }
.topo nav a { text-decoration: none; color: var(--mudo); }
.topo nav a:hover { color: var(--tinta); }
.topo .sair { margin-left: auto; display: flex; gap: 10px; align-items: center; }

.entrar { max-width: 360px; margin: 48px auto; background: var(--papel); border: 1px solid var(--linha); border-radius: 6px; padding: 24px; }
.entrar label { display: block; margin-bottom: 12px; }
.entrar input { width: 100%; margin-top: 4px; }

.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.cartao { background: var(--papel); border: 1px solid var(--linha); border-left: 6px solid var(--neutro); border-radius: 6px; padding: 16px 20px; }
.cartao.neutro { border-left-color: var(--neutro); }
.numeros { display: grid; gap: 10px; margin: 8px 0 12px; }
.numeros dt { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mudo); }
.numeros dd { margin: 0; }
.numeros .grande { font-size: 24px; font-weight: 600; }
.numeros small { font-size: 13px; font-weight: 400; color: var(--mudo); }
.baliza { color: var(--mudo); font-style: italic; margin: 8px 0; }
/* A cor mora no cartão, não no texto: é o cartão que se lê de relance.
   Sem baliza não há cor — cinza é "não sei", e isso é uma informação. */
.cartao:has(.leitura-bom)      { border-left-color: #16a34a; }
.cartao:has(.leitura-atencao)  { border-left-color: #ca8a04; }
.cartao:has(.leitura-alerta)   { border-left-color: #ea580c; }
.cartao:has(.leitura-critico)  { border-left-color: #dc2626; }
.leitura-bom strong      { color: #166534; font-style: normal; }
.leitura-atencao strong  { color: #854d0e; font-style: normal; }
.leitura-alerta strong   { color: #9a3412; font-style: normal; }
.leitura-critico strong  { color: #991b1b; font-style: normal; }
.degraus { margin: 6px 0; padding-left: 20px; }
.degraus li { margin: 2px 0; }
textarea { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; width: 100%;
  padding: 8px; border: 1px solid var(--linha); border-radius: 4px; }

.tarefa { background: var(--papel); border: 1px solid var(--linha); border-radius: 6px; padding: 14px 18px; margin-bottom: 12px; }
.tarefa .tipo, .tarefa .setor { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--fundo); color: var(--mudo); }
.tarefa .meta { margin: 0; color: var(--mudo); font-size: 13px; }
.tarefa .justificativa { margin: 10px 0 6px; }
.tarefa details { margin: 6px 0; }
.tarefa pre { background: var(--fundo); padding: 8px 12px; border-radius: 4px; overflow-x: auto; font-size: 13px; }
.decisao { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
.decisao form { display: flex; gap: 6px; flex-wrap: wrap; }
.aprovar { border-color: var(--ok); color: var(--ok); }
.rejeitar { border-color: var(--erro); color: var(--erro); }
.decidida { border-left: 6px solid var(--ok); }
.decidida.rejeitada { border-left-color: var(--mudo); }
.decidida.com-erro { border-left-color: var(--erro); }

.registro { width: 100%; border-collapse: collapse; background: var(--papel); font-size: 13px; }
.registro th, .registro td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.registro th { color: var(--mudo); font-weight: 500; }
.registro tr.erro td:nth-child(6) { color: var(--erro); }