/* =====================================================================
   Dashboard de Matriculas CNSN
   Identidade fixa: 2026 = cinza neutro | 2027 = azul de destaque
   ===================================================================== */
/* Paleta validada (contraste + daltonismo). Regra fixa: a marca pinta a
   interface; os dados usam as cores de serie, que nunca trocam de ano. */
:root {
  /* marca - azul oficial da logo do colegio (#26348b), so cromo:
     menu, botoes e foco. Nunca e usado como cor de dado. */
  --azul: #26348b;
  --azul-escuro: #1b2668;
  --azul-claro: #2a78d6;

  /* superficies e tinta */
  --fundo: #f6f7f9;
  --superficie: #ffffff;
  --borda: #e3e7ee;
  --grade: #eef1f6;
  --texto: #111827;
  --texto-fraco: #5b6472;

  /* series - identidade fixa (item 34) */
  --ano-base: #475569;    /* 2026 - neutro, recessivo */
  --ano-atual: #2a78d6;   /* 2027 - destaque */
  --cinza-ano: var(--ano-base);

  /* funil de situacoes - rampa ordinal de um unico tom */
  --funil-1: #0d366b;
  --funil-2: #256abf;
  --funil-3: #5598e7;
  --funil-4: #86b6ef;
  --funil-outros: #94a3b8;

  /* status - sempre acompanhados de simbolo e rotulo, nunca cor sozinha */
  --positivo: #006300;
  --positivo-fundo: #e7f3e7;
  --negativo: #b3261e;
  --negativo-fundo: #fdecea;
  --alerta: #8a5a00;
  --alerta-fundo: #fdf3d9;

  --sombra: 0 1px 2px rgba(17, 24, 39, .04), 0 2px 8px rgba(17, 24, 39, .05);
  --raio: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--fundo);
  color: var(--texto);
  font: 14px/1.5 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

/* ---------------- Menu lateral ---------------- */
.lateral {
  width: 232px;
  flex: 0 0 232px;
  background: var(--azul);
  color: #e2e8f0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.marca {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 20px 18px 16px;
}
/* A logo e azul chapado: no menu escuro entra em branco.
   O arquivo tem 1500x1060 com a tagline embaixo - ilegivel neste tamanho -
   entao mostramos so o simbolo, recortando os ~19% de baixo. */
.marca-logo {
  width: 128px; height: 73px; max-width: 100%;
  object-fit: cover; object-position: top center;
  filter: brightness(0) invert(1);
}
.marca-texto { text-align: center; line-height: 1.25; }
.marca-texto strong { display: block; font-size: 15px; color: #fff; }
.marca-texto span { font-size: 12px; color: #c2c9ef; }
.lateral nav { display: flex; flex-direction: column; padding: 8px 12px; gap: 2px; overflow-y: auto; }
.lateral nav a {
  color: #cdd3ef; text-decoration: none; padding: 9px 12px;
  border-radius: 8px; font-size: 14px;
}
.lateral nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.lateral nav a.ativo { background: #fff; color: var(--azul); font-weight: 600; }
.lateral-rodape { margin-top: auto; padding: 16px; border-top: 1px solid rgba(255, 255, 255, .12); }
.lateral-rodape p { font-size: 11.5px; color: #c2c9ef; margin: 10px 0 0; line-height: 1.4; }

/* ---------------- Conteudo ---------------- */
.conteudo { flex: 1; min-width: 0; height: 100vh; overflow-y: auto; padding: 20px 26px 40px; }
.topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.topo h1 { margin: 0; font-size: 22px; letter-spacing: -.2px; }
.subtitulo { margin: 4px 0 0; color: var(--texto-fraco); font-size: 13.5px; }
.topo-direita { display: flex; align-items: center; gap: 8px; }
.etiqueta { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; color: #fff; }
.etiqueta-base { background: var(--ano-base); }
.etiqueta-atual { background: var(--ano-atual); }
.atualizacao { font-size: 12px; color: var(--texto-fraco); }
.titulo-pagina { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-fraco); margin: 0 0 12px; }

/* ---------------- Filtros ---------------- */
/* Grade: os 8 filtros + os botoes dividem a largura disponivel e cabem em
   UMA linha nos monitores Full HD. So quebram quando a tela e estreita
   demais - antes o "Data final" caia sozinho para a segunda linha. */
.filtros {
  /* 8 campos dividindo a largura em partes iguais + os botoes ocupando so o
     que precisam. Assim as datas nao ficam espremidas embaixo do "Aplicar". */
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
  gap: 10px 14px; align-items: end;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 12px 14px; margin-bottom: 16px; box-shadow: var(--sombra);
}
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.campo-acoes { flex-direction: row; align-items: flex-end; gap: 8px; justify-self: end; }
select, input[type=date], input[type=number], input[type=search], input[type=text] {
  border: 1px solid var(--borda); border-radius: 8px; padding: 7px 8px;
  font: inherit; background: #fff; color: var(--texto);
  min-width: 0; width: 100%;
}
.controles select, .controles input { width: auto; min-width: 120px; }
/* o seletor nativo de data tem largura minima propria; sem folga o icone do
   calendario encosta no campo seguinte */
.campo input[type=date] { padding-right: 4px; }
/* telas estreitas: volta a acomodar quantos campos couberem por linha */
@media (max-width: 1440px) {
  .filtros { grid-template-columns: repeat(auto-fit, minmax(134px, 1fr)); }
  .campo-acoes { grid-column: 1 / -1; justify-self: end; }
}
select:focus, input:focus { outline: 2px solid rgba(42, 120, 214, .45); outline-offset: 1px; }

/* ---------------- Botoes ---------------- */
.botao {
  border: 0; border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 600;
  background: var(--azul); color: #fff; cursor: pointer; text-decoration: none; display: inline-block;
}
.botao:hover { filter: brightness(1.1); }
.botao-claro { background: #fff; color: var(--azul); width: 100%; font-weight: 700; }
.botao-fantasma { background: transparent; color: var(--azul); border: 1px solid var(--borda); }
.botao:disabled { opacity: .6; cursor: progress; }

/* ---------------- Cards ---------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
/* Grade de 3 linhas: o numero de todos os cards fica na mesma altura,
   independente de o titulo ocupar uma ou duas linhas. */
.card {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 14px 16px; box-shadow: var(--sombra);
  display: grid; grid-template-rows: auto auto 1fr; align-content: start;
}
.card h4 {
  margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-fraco); font-weight: 600;
  min-height: 2.6em; display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap;
}
.card .valor { font-size: 28px; font-weight: 700; margin: 6px 0 2px; letter-spacing: -.5px; white-space: nowrap; }
.card .apoio { font-size: 12.5px; color: var(--texto-fraco); align-self: start; }
.card.destaque { border-color: var(--ano-atual); box-shadow: inset 3px 0 0 var(--ano-atual), var(--sombra); }
.card .valor.base { color: var(--ano-base); }
.card .valor.atual { color: var(--ano-atual); }

.alta { color: var(--positivo); }
.baixa { color: var(--negativo); }
.igual { color: var(--texto-fraco); }
.selo { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.selo.alta { background: var(--positivo-fundo); }
.selo.baixa { background: var(--negativo-fundo); }
.selo.igual { background: var(--grade); }

/* ---------------- Cartoes e grades ---------------- */
.cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 16px; margin-bottom: 16px; box-shadow: var(--sombra);
}
.cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.cartao-topo h3 { margin: 0; font-size: 15px; }
.controles { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.alternador { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-fraco); }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grade-3 { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 16px; }
#cards-novatos { grid-template-columns: 1fr 1fr; margin-bottom: 0; }
.grade-vagas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.grade-vagas label { font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; color: var(--texto-fraco); }
@media (max-width: 1180px) { .grade-2, .grade-3 { grid-template-columns: 1fr; } }

.grafico { position: relative; height: 300px; }
.grafico-alto { height: 420px; }
.nota { font-size: 12px; color: var(--texto-fraco); margin: 8px 0 0; }

/* ---------------- Tabelas ---------------- */
.rolagem { overflow: auto; max-height: 520px; }
.rolagem-alta { max-height: 70vh; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  position: sticky; top: 0; background: #f9fafb; z-index: 1;
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-fraco); padding: 8px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap;
}
tbody td { padding: 7px 10px; border-bottom: 1px solid var(--grade); }
tbody tr:hover { background: #f9fafb; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.clicavel { cursor: pointer; color: var(--azul-claro); font-weight: 600; }
tr.grupo td { background: #f9fafb; font-weight: 700; }
.barra { background: var(--grade); border-radius: 999px; height: 8px; overflow: hidden; min-width: 90px; }
.barra span { display: block; height: 100%; background: var(--ano-atual); }
.barra.atencao span { background: var(--alerta); }
.barra.critico span { background: var(--negativo); }

/* ---------------- Avisos ---------------- */
.aviso { border-radius: var(--raio); padding: 12px 14px; margin-bottom: 14px; font-size: 13.5px; border: 1px solid; }
.aviso.erro { background: var(--negativo-fundo); border-color: #fecaca; color: #7f1d1d; }
.aviso.ok { background: var(--positivo-fundo); border-color: #bbf7d0; color: #14532d; }
.aviso.atencao { background: var(--alerta-fundo); border-color: #fde68a; color: #78350f; }
.oculto { display: none !important; }
.lista-diagnostico { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.lista-diagnostico div { background: #f9fafb; border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; }
.lista-diagnostico strong { display: block; font-size: 20px; }
.lista-diagnostico span { font-size: 12px; color: var(--texto-fraco); }

/* ---------------- Painel de detalhamento ---------------- */
.painel { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: flex; justify-content: flex-end; z-index: 50; }
.painel-caixa { background: #fff; width: min(880px, 92vw); height: 100%; display: flex; flex-direction: column; }
.painel-caixa header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--borda); }
.painel-caixa header h3 { margin: 0; font-size: 16px; }
.painel-corpo { padding: 14px 18px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.painel-corpo .rolagem { max-height: none; flex: 1; }
#painel-busca { width: 100%; }

/* ---------------- Meta ---------------- */
.progresso { background: var(--grade); border-radius: 999px; height: 14px; overflow: hidden; margin: 10px 0 6px; }
.progresso span { display: block; height: 100%; background: linear-gradient(90deg, var(--azul), var(--ano-atual)); }
.carregando { color: var(--texto-fraco); font-size: 13px; padding: 12px 0; }

/* ---------------- Formularios ---------------- */
.formulario { display: grid; gap: 12px; max-width: 460px; }
.formulario label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-fraco);
}
.formulario input, .formulario select { width: 100%; text-transform: none; font-size: 14px; color: var(--texto); }
.formulario .botao { justify-self: start; }
#config-activesoft td:first-child { color: var(--texto-fraco); width: 42%; }
#config-activesoft code { font-size: 12.5px; }

/* ---------------- Explicacao do calculo ---------------- */
.explicacao {
  background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--azul-claro);
  border-radius: var(--raio); margin-bottom: 16px; box-shadow: var(--sombra); overflow: hidden;
}
.explicacao > summary {
  cursor: pointer; padding: 11px 16px; font-weight: 600; font-size: 13.5px; color: var(--azul);
  list-style: none; display: flex; align-items: center; gap: 8px; user-select: none;
}
.explicacao > summary::-webkit-details-marker { display: none; }
.explicacao > summary::before { content: "?"; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--azul-claro); color: #fff;
  font-size: 12px; font-weight: 700; }
.explicacao > summary::after { content: "mostrar"; margin-left: auto; font-weight: 400;
  font-size: 12px; color: var(--texto-fraco); }
.explicacao[open] > summary::after { content: "ocultar"; }
.explicacao > summary:hover { background: #f9fafb; }
.explicacao-corpo { padding: 4px 18px 16px; border-top: 1px solid var(--borda); }
.explicacao-passos { margin: 12px 0; padding-left: 20px; display: grid; gap: 9px; font-size: 13px; color: var(--texto-fraco); }
.explicacao-passos strong { color: var(--texto); }
.explicacao-formulas { margin-top: 6px; }
.explicacao-formulas th {
  text-align: left; vertical-align: top; white-space: nowrap; width: 190px;
  padding: 7px 12px 7px 0; font-size: 12.5px; color: var(--azul); font-weight: 600;
  border-bottom: 1px solid #f1f5f9;
}
.explicacao-formulas td { font-size: 13px; color: var(--texto-fraco); padding: 7px 0; border-bottom: 1px solid #f1f5f9; }
.explicacao code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.explicacao-obs {
  margin: 12px 0 0; padding: 9px 12px; font-size: 12.5px; line-height: 1.5;
  background: var(--alerta-fundo); border: 1px solid #fde68a; border-radius: 8px; color: #78350f;
}

/* ---------------- Criterio do detalhamento ---------------- */
.painel-criterio {
  margin: 0 0 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.55;
  background: #f3f8fe; border: 1px solid #cfe1f8; border-radius: 8px; color: #184f95;
}
.painel-criterio .nota { color: #184f95; opacity: .85; }
td.clicavel.num { text-decoration: underline dotted; text-underline-offset: 3px; }

/* ---------------- Janela de datas nas comparacoes ---------------- */
.th-periodo { display: block; font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: 10.5px; color: var(--texto-fraco); margin-top: 2px; }
.faixa-periodo {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  margin: 0 0 12px; padding: 9px 12px; font-size: 12.5px;
  background: #f9fafb; border: 1px solid var(--borda); border-radius: 8px;
}
.faixa-periodo b { color: var(--texto); }
.faixa-periodo .janela-base b { color: var(--ano-base); }
.faixa-periodo .janela-atual b { color: var(--ano-atual); }
.faixa-periodo .obs { color: var(--texto-fraco); }

/* ---------------- Cards de comparacao por situacao ---------------- */
.cards-situacao { margin-bottom: 0; }
.card-situacao h4 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card-situacao .etiqueta-mini {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--ano-atual); color: #fff; padding: 2px 6px; border-radius: 999px;
}
.card-situacao .valor { cursor: pointer; width: max-content; }
.card-situacao .valor:hover { text-decoration: underline dotted; text-underline-offset: 4px; }
.numero-clicavel { cursor: pointer; color: var(--texto); border-bottom: 1px dotted var(--ano-base); }
.numero-clicavel:hover { color: var(--azul-claro); }
.apoio-selo { margin-top: 6px; }

/* ---------------- Seletor da base dos indicadores ---------------- */
.barra-base {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 10px 14px; margin-bottom: 12px; box-shadow: var(--sombra);
}
.barra-base label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-fraco); font-weight: 600;
}
.barra-base select { width: auto; min-width: 340px; max-width: 100%; }
.barra-base .nota { margin: 0; }

/* ---------------- Acesso do operador master ---------------- */
.barra-acesso {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 12px 14px; margin-bottom: 16px; box-shadow: var(--sombra);
  background: var(--superficie); font-size: 13.5px;
}
.barra-acesso.bloqueada { background: var(--alerta-fundo); border-color: #fde68a; color: #78350f; }
.barra-acesso.liberada { background: var(--positivo-fundo); border-color: #bbf7d0; color: #14532d; }
.barra-acesso form { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.barra-acesso input[type=password] { min-width: 200px; width: auto; }
.barra-acesso .aviso-acesso { font-weight: 600; }
/* campos travados enquanto nao ha sessao de master */
.somente-leitura input, .somente-leitura select, .somente-leitura textarea {
  background: #f8fafc; color: var(--texto-fraco); cursor: not-allowed;
}
.somente-leitura .botao { display: none; }