/* Identidade Postalis: navy da marca na navegação, azul médio nos destaques. */
:root {
  --navy: #0a2f6b;
  --navy-claro: #143f86;
  --azul: #0e43ad;
  /* Verde do card: o verde da marca (#31b131) com texto branco em cima dá
     2,8:1 de contraste, ilegível. O da marca fica só nos acentos. */
  --verde: #268a34;
  --verde-marca: #31b131;
  --amarelo: #ffc800;
  --vermelho: #c00000;
  --verde-texto: #1e7b34;
  --cinza: #f2f4f7;
  --borda: #d0d5dd;
  --texto: #1d2939;
  --suave: #667085;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.5 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--texto);
  background: #f7f8fa;
}

a { color: var(--azul); }

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px;
  flex: 0 0 232px;
  background: var(--navy);
  color: #fff;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
}
.sidebar .marca {
  padding: 0 18px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  margin-bottom: 12px;
}
/* max-height junto com width: o logo horizontal e o vertical têm proporções
   bem diferentes, e só a largura deixaria um deles ocupar meia barra lateral. */
.sidebar .marca img {
  width: 150px;
  max-height: 96px;
  object-fit: contain;
  background: #fff;
  padding: 8px;
  border-radius: 4px;
}
.login img { max-height: 120px; object-fit: contain; }
.sidebar .marca span { display: block; margin-top: 10px; font-size: 12px; color: #c8d4ea; }
.sidebar nav a {
  display: block;
  padding: 10px 18px;
  color: #dbe4f3;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.sidebar nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar nav a.ativo { background: rgba(255, 255, 255, .12); color: #fff; border-left-color: var(--amarelo); }
.sidebar .rodape { margin-top: auto; padding: 12px 18px 0; font-size: 12px; color: #9db2d6; }
.sidebar .rodape a { color: #c8d4ea; }

.conteudo { flex: 1; padding: 24px 28px 48px; min-width: 0; }
h1 { font-size: 22px; margin: 0 0 4px; color: var(--navy); }
h2 { font-size: 16px; margin: 28px 0 10px; color: var(--navy); }
h3 { font-size: 14px; margin: 18px 0 8px; color: var(--azul); }
.sub { color: var(--suave); margin: 0 0 20px; }

.cartao {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 18px;
}

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi { border-radius: 8px; padding: 16px 18px; color: #fff; }
.kpi .n { font-size: 30px; font-weight: 700; line-height: 1.1; }
.kpi .r { font-size: 12px; opacity: .9; margin-top: 4px; }
.kpi.azul { background: var(--azul); }
.kpi.verde { background: var(--verde); }
.kpi.navy { background: var(--navy); }
.kpi.cinza { background: #475467; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  background: var(--azul);
  color: #fff;
  text-align: left;
  padding: 8px 10px;
  font-weight: 600;
}
td { padding: 7px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
tr:nth-child(even) td { background: #fafbfc; }
td.num, th.num { text-align: right; white-space: nowrap; }
.tabela-rolagem { overflow-x: auto; }

.alta { color: var(--vermelho); font-weight: 600; }
.baixa, .fechado { color: var(--verde-texto); font-weight: 600; }

.aviso, .erro, .ok {
  padding: 11px 14px;
  border-radius: 6px;
  margin-bottom: 16px;
  border: 1px solid;
  font-size: 13px;
}
.aviso { background: #fff8e6; border-color: #f0d288; color: #7a5b00; }
.erro { background: #fdecec; border-color: #f0a8a8; color: #8c1d1d; }
.ok { background: #eaf7ee; border-color: #a8d9b6; color: #1a5f2c; }

.botao {
  display: inline-block;
  background: var(--azul);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 9px 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.botao:hover { background: #0b379a; }
.botao.secundario { background: #fff; color: var(--navy); border: 1px solid var(--borda); }
.botao.secundario:hover { background: var(--cinza); }
.botao.verde { background: var(--verde); }
.botao.verde:hover { background: #268434; }

input[type=text], input[type=password], input[type=date], input[type=file], select, textarea {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: #fff;
  max-width: 100%;
}
textarea { width: 100%; resize: vertical; line-height: 1.55; }
label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.campo { margin-bottom: 16px; }
.dica { font-size: 12px; color: var(--suave); font-weight: 400; margin-top: 4px; }
.linha { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }

.pilulas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pilula {
  padding: 5px 11px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  text-decoration: none;
  color: var(--texto);
}
.pilula.ativa { background: var(--navy); color: #fff; border-color: var(--navy); }

.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .duas { grid-template-columns: 1fr; } .layout { flex-direction: column; } .sidebar { width: 100%; flex: none; } }

.grafico { position: relative; height: 260px; }
.selo { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--cinza); color: var(--suave); }
.selo.ia { background: #e8effb; color: var(--azul); }
.selo.revisado { background: #eaf7ee; color: var(--verde-texto); }

.login { max-width: 340px; margin: 12vh auto; }
.login .cartao { padding: 26px; }
.login img { width: 190px; display: block; margin: 0 auto 20px; }