/* BI Neresco - cores e formas do layout aprovado (canvas "BI Neresco - Layout").
   Sem estilo inline em nenhum template: a CSP so aceita este arquivo. */
:root {
  --verde-escuro: #12301F; --verde: #1F5A41; --verde-ativo: #23523A; --ambar: #F0B45C;
  --fundo: #F4F5F2; --texto: #17201B; --apoio: #5B665F; --borda: #E1E5E1; --claro: #E8EFE9;
  --menu-apoio: #A9BDB0;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, "Segoe UI", Roboto, sans-serif; color: var(--texto); background: var(--fundo); }
h1, h2, .marca { font-family: "Space Grotesk", Inter, system-ui, sans-serif; }
a { color: var(--verde); }
.marca { font-weight: 700; }
.marca span { color: var(--ambar); }

/* --- casca com menu lateral --- */
.casca { min-height: 100vh; display: flex; flex-wrap: wrap; }
.menu { flex: 1 1 232px; max-width: 100%; background: var(--verde-escuro); color: var(--claro); padding: 24px 16px; display: flex; flex-direction: column; gap: 4px; }
.menu .marca { font-size: 22px; padding: 0 12px 20px; }
.menu .grupo { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--menu-apoio); padding: 16px 12px 8px; }
.menu a { color: var(--claro); padding: 12px; text-decoration: none; border-radius: 8px; }
.menu a:hover { background: #1B4430; }
.menu a.ativo { color: #fff; background: var(--verde-ativo); font-weight: 600; }
.menu .folga { flex-grow: 1; min-height: 24px; }
.menu .quem { border-top: 1px solid #2D5A42; margin-top: 8px; padding: 16px 12px 0; display: flex; gap: 12px; align-items: center; }
.menu .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ambar); color: var(--verde-escuro); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.menu .quem .dados { display: flex; flex-direction: column; min-width: 0; }
.menu .quem .nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu .quem .perfil { font-size: 12px; color: var(--menu-apoio); }
.menu form { padding: 12px 12px 0; }
.menu button { width: 100%; min-height: 44px; border: 1px solid #2D5A42; border-radius: 8px; background: transparent; color: var(--claro); font: inherit; cursor: pointer; }
.menu button:hover { background: #1B4430; }

.conteudo { flex: 999 1 560px; min-width: 0; padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 24px; }
.conteudo header .trilha, .conteudo header .nota { font-size: 13px; color: var(--apoio); }
.conteudo h1 { margin: 6px 0; font-size: 32px; }
.conteudo h2 { margin: 0; font-size: 20px; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.cartao { background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.cartao .rotulo { font-size: 13px; color: var(--apoio); }
.cartao .valor { font-family: "Space Grotesk", Inter, system-ui, sans-serif; font-size: 28px; font-weight: 600; }
.cartao .origem { font-size: 12px; font-weight: 600; color: var(--verde); }
.aviso { background: #FBEBD6; color: #8A4A08; border-radius: 12px; padding: 14px 18px; font-size: 14px; }
.rolagem { overflow-x: auto; background: #fff; border: 1px solid var(--borda); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid #EEF1EE; white-space: nowrap; }
th { font-size: 12px; color: var(--apoio); font-weight: 600; }
tr:last-child td { border-bottom: 0; }

/* --- login e erro --- */
.login { min-height: 100vh; display: flex; flex-wrap: wrap; background: var(--verde-escuro); }
.login .apresenta { flex: 1 1 420px; color: var(--claro); padding: 64px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.login .apresenta .marca { font-size: 40px; }
.login .apresenta p { margin: 0; font-size: 18px; line-height: 1.5; max-width: 460px; color: #C9D7CE; }
.login .lado { flex: 1 1 420px; background: var(--fundo); padding: 48px 24px; display: flex; align-items: center; justify-content: center; }
.caixa { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--borda); border-radius: 16px; padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.caixa h1 { margin: 0; font-size: 26px; }
.caixa p { margin: 0; font-size: 14px; color: var(--apoio); line-height: 1.5; }
.caixa .rodape { font-size: 13px; border-top: 1px solid #EEF1EE; padding-top: 16px; }
.botao { min-height: 48px; border-radius: 8px; background: var(--verde); color: #fff; text-decoration: none; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; }
.botao:hover { background: #123826; }
@media (max-width: 520px) { .login .apresenta { padding: 32px 24px; } .conteudo { padding: 20px 16px 40px; } }

/* --- indicadores (Conselho e areas) --- */
.topo { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; }
.filtro { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filtro label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--apoio); }
.filtro select { height: 44px; border: 1px solid #CDD3CE; border-radius: 8px; padding: 0 12px; background: #fff; font: inherit; font-size: 14px; color: var(--texto); }
.filtro button { height: 44px; border: 0; border-radius: 8px; padding: 0 18px; background: var(--verde); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.bloco { display: flex; flex-direction: column; gap: 12px; }
.cartao .cobertura { font-size: 12px; color: var(--apoio); }
.cartao .variacao { font-size: 13px; font-weight: 600; }
.obs { display: block; font-size: 12px; color: var(--apoio); font-weight: 400; line-height: 1.4; }
.tom-bom { color: #1D4F8C; } .tom-ruim { color: #8F2525; } .tom-neutro { color: var(--apoio); }
td.quebra { white-space: normal; min-width: 220px; } td.apoio { color: var(--apoio); font-size: 13px; }
.dir { text-align: right; } .forte { font-weight: 600; }