/* =========================================================================
   Painel de conceitos escolares
   Identidade institucional em tons de verde, para qualquer coordenacao.
   Tokens de cor conforme paleta validada (contraste + daltonismo).

   O verde do cromo (--marca) foi escolhido longe das cores de dados: mantem
   ΔE >= 15 da serie verde, da serie aqua e do status "bom", para que nenhum
   elemento da interface seja confundido com um valor do grafico.
   ========================================================================= */

:root {
  color-scheme: light;

  /* superficies e tinta */
  --page: #f4f7f4;
  --surface: #fbfdfb;
  --surface-alt: #eaf1ec;
  --text-1: #0b0d0b;
  --text-2: #4a544d;
  --muted: #7f8a83;
  --grid: #e0e8e2;
  --axis: #bcc7c0;
  --border: rgba(11, 13, 11, 0.1);
  --sombra: 0 1px 2px rgba(11, 13, 11, 0.04), 0 8px 24px rgba(11, 13, 11, 0.05);

  /* identidade institucional (cromo da pagina, nunca serie de dados) */
  --marca: #17553a;
  --marca-forte: #0f3f2b;
  --marca-clara: #dcefe4;
  /* tinta que fica LEGIVEL sobre --marca: clara no tema claro (verde escuro),
     escura no tema escuro (verde claro). Sem isso, o botao primario herdaria
     branco fixo e sumiria no tema escuro. */
  --sobre-marca: #ffffff;

  /* series categoricas - ordem fixa validada (rotacionada para abrir em
     verde); a cor segue a entidade, nunca ciclada nem gerada */
  --s1: #008300;
  --s2: #4a3aa7;
  --s3: #e34948;
  --s4: #2a78d6;
  --s5: #eb6834;
  --s6: #1baf7a;
  --s7: #eda100;
  --s8: #e87ba4;
  --neutro: #d5dcd6;

  /* Escala dos conceitos: A (melhor) mais escuro -> C (aprovado mais fraco)
     mais claro. D quebra a rampa e vira vermelho de baixa intensidade — nao
     e "mais um degrau claro", e uma categoria a parte (reprovado).
     Cada cor vem com sua propria tinta de texto (--ord-X-ink), calculada uma
     unica vez aqui — nunca em JS. Assim trocar tema ou paleta e so CSS
     recalculando, sem re-render, e nunca fica com contraste desatualizado. */
  --ord-a: #094407;      --ord-a-ink: #ffffff;
  --ord-b: #1b8117;      --ord-b-ink: #ffffff;
  --ord-c: #24a220;      --ord-c-ink: #0b0b0b;
  --ord-d: #803a37;      --ord-d-ink: #ffffff;
  --ord-vazio: #e5ebe6;

  /* status - reservado, sempre com icone + rotulo */
  --st-bom: #0ca30c;
  --st-atencao: #fab219;
  --st-serio: #ec835a;
  --st-critico: #d03b3b;

  --raio: 14px;
  --fonte: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0a0e0b;
    --surface: #141915;
    --surface-alt: #1b221d;
    --text-1: #ffffff;
    --text-2: #c0c9c3;
    --muted: #889189;
    --grid: #28302a;
    --axis: #38423b;
    --border: rgba(255, 255, 255, 0.1);
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    --marca: #8fd6ac;
    --marca-forte: #b0e3c6;
    --marca-clara: #163023;
    --sobre-marca: #0a0e0b;
    --s1: #008300;
    --s2: #9085e9;
    --s3: #e66767;
    --s4: #3987e5;
    --s5: #d95926;
    --s6: #199e70;
    --s7: #c98500;
    --s8: #d55181;
    --neutro: #363d38;
    --ord-a: #12620f;      --ord-a-ink: #ffffff;
    --ord-b: #239e1f;      --ord-b-ink: #0b0b0b;
    --ord-c: #2ec429;      --ord-c-ink: #0b0b0b;
    --ord-d: #ae514d;      --ord-d-ink: #ffffff;
    --ord-vazio: #232a25;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0a0e0b;
  --surface: #141915;
  --surface-alt: #1b221d;
  --text-1: #ffffff;
  --text-2: #c0c9c3;
  --muted: #889189;
  --grid: #28302a;
  --axis: #38423b;
  --border: rgba(255, 255, 255, 0.1);
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  --marca: #8fd6ac;
  --marca-forte: #b0e3c6;
  --marca-clara: #163023;
  --sobre-marca: #0a0e0b;
  --s1: #008300;
  --s2: #9085e9;
  --s3: #e66767;
  --s4: #3987e5;
  --s5: #d95926;
  --s6: #199e70;
  --s7: #c98500;
  --s8: #d55181;
  --neutro: #363d38;
  --ord-a: #12620f;      --ord-a-ink: #ffffff;
  --ord-b: #239e1f;      --ord-b-ink: #0b0b0b;
  --ord-c: #2ec429;      --ord-c-ink: #0b0b0b;
  --ord-d: #ae514d;      --ord-d-ink: #ffffff;
  --ord-vazio: #232a25;
}

/* ========================================================================
   Paletas de conceito alternativas. A escolha ativa entra via
   [data-paleta="X"] no <html> (persistida, como o tema). Cada uma redefine
   apenas A/B/C — D e --ord-vazio ficam fixos: reprovado e "sem conceito"
   tem o mesmo significado visual em qualquer paleta escolhida.
   ========================================================================= */

/* Verde e o padrao (valores identicos aos de :root): declarado explicitamente
   para que a previa do seletor de paletas force esta opcao mesmo quando a
   pagina inteira esta usando outra paleta — sem isso, a previa "Verde" dentro
   do menu herdaria a paleta ativa em vez de mostrar sempre verde. */
[data-paleta="verde"] {
  --ord-a: #094407; --ord-a-ink: #ffffff;
  --ord-b: #1b8117; --ord-b-ink: #ffffff;
  --ord-c: #24a220; --ord-c-ink: #0b0b0b;
}
@media (prefers-color-scheme: dark) {
  [data-paleta="verde"]:not([data-theme="light"]) {
    --ord-a: #12620f; --ord-a-ink: #ffffff;
    --ord-b: #239e1f; --ord-b-ink: #0b0b0b;
    --ord-c: #2ec429; --ord-c-ink: #0b0b0b;
  }
}
[data-paleta="verde"][data-theme="dark"] {
  --ord-a: #12620f; --ord-a-ink: #ffffff;
  --ord-b: #239e1f; --ord-b-ink: #0b0b0b;
  --ord-c: #2ec429; --ord-c-ink: #0b0b0b;
}

[data-paleta="azul"] {
  --ord-a: #07366c; --ord-a-ink: #ffffff;
  --ord-b: #1769c6; --ord-b-ink: #ffffff;
  --ord-c: #2185f6; --ord-c-ink: #0b0b0b;
}
@media (prefers-color-scheme: dark) {
  [data-paleta="azul"]:not([data-theme="light"]) {
    --ord-a: #0f4f98; --ord-a-ink: #ffffff;
    --ord-b: #1f81f1; --ord-b-ink: #0b0b0b;
    --ord-c: #66a6f8; --ord-c-ink: #0b0b0b;
  }
}
[data-paleta="azul"][data-theme="dark"] {
  --ord-a: #0f4f98; --ord-a-ink: #ffffff;
  --ord-b: #1f81f1; --ord-b-ink: #0b0b0b;
  --ord-c: #66a6f8; --ord-c-ink: #0b0b0b;
}

[data-paleta="violeta"] {
  --ord-a: #351090; --ord-a-ink: #ffffff;
  --ord-b: #643bf4; --ord-b-ink: #ffffff;
  --ord-c: #7c6ff6; --ord-c-ink: #0b0b0b;
}
@media (prefers-color-scheme: dark) {
  [data-paleta="violeta"]:not([data-theme="light"]) {
    --ord-a: #4d1bc9; --ord-a-ink: #ffffff;
    --ord-b: #796af6; --ord-b-ink: #0b0b0b;
    --ord-c: #9996f8; --ord-c-ink: #0b0b0b;
  }
}
[data-paleta="violeta"][data-theme="dark"] {
  --ord-a: #4d1bc9; --ord-a-ink: #ffffff;
  --ord-b: #796af6; --ord-b-ink: #0b0b0b;
  --ord-c: #9996f8; --ord-c-ink: #0b0b0b;
}

[data-paleta="terracota"] {
  --ord-a: #542b07; --ord-a-ink: #ffffff;
  --ord-b: #9d5616; --ord-b-ink: #ffffff;
  --ord-c: #c46d1f; --ord-c-ink: #0b0b0b;
}
@media (prefers-color-scheme: dark) {
  [data-paleta="terracota"]:not([data-theme="light"]) {
    --ord-a: #78400e; --ord-a-ink: #ffffff;
    --ord-b: #bf6b1e; --ord-b-ink: #0b0b0b;
    --ord-c: #ed8528; --ord-c-ink: #0b0b0b;
  }
}
[data-paleta="terracota"][data-theme="dark"] {
  --ord-a: #78400e; --ord-a-ink: #ffffff;
  --ord-b: #bf6b1e; --ord-b-ink: #0b0b0b;
  --ord-c: #ed8528; --ord-c-ink: #0b0b0b;
}

/* Cinza + textura: a unica paleta sem matiz — a diferenca entre A/B/C/D vem
   so de luminosidade e (com o --textura-ativa abaixo) de uma hachura
   diagonal, para continuar legivel em impressao P&B ou CVD total. */
[data-paleta="grafite"] {
  --ord-a: #373737; --ord-a-ink: #ffffff;
  --ord-b: #6b6b6b; --ord-b-ink: #ffffff;
  --ord-c: #878787; --ord-c-ink: #0b0b0b;
  --textura-ativa: 1;
}
@media (prefers-color-scheme: dark) {
  [data-paleta="grafite"]:not([data-theme="light"]) {
    --ord-a: #505050; --ord-a-ink: #ffffff;
    --ord-b: #838383; --ord-b-ink: #0b0b0b;
    --ord-c: #a3a3a3; --ord-c-ink: #0b0b0b;
  }
}
[data-paleta="grafite"][data-theme="dark"] {
  --ord-a: #505050; --ord-a-ink: #ffffff;
  --ord-b: #838383; --ord-b-ink: #0b0b0b;
  --ord-c: #a3a3a3; --ord-c-ink: #0b0b0b;
}

/* ---------------------------------------------------------------- base -- */

* { box-sizing: border-box; }

/* classes com `display` explicito venceriam o display:none do atributo hidden */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fonte);
  background: var(--page);
  color: var(--text-1);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }

.envelope { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: 6px;
}

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

.topo {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 380px at 12% -40%, var(--marca-clara), transparent 70%),
    linear-gradient(180deg, var(--surface-alt), var(--page));
  border-bottom: 1px solid var(--border);
}

.topo__conteudo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 34px 0 40px;
}

.marca { display: flex; align-items: center; gap: 14px; }

.marca__selo {
  width: 54px; height: 54px; flex: 0 0 54px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--marca);
  color: var(--sobre-marca);
  box-shadow: var(--sombra);
}
.marca__selo svg { width: 30px; height: 30px; }

.marca__curso {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--marca-forte);
  margin-bottom: 2px;
}
.marca__titulo { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.marca__sub { font-size: 0.875rem; color: var(--text-2); margin-top: 4px; }

.controles { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------ botoes ---- */

.botao {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-1);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.botao:hover { background: var(--surface-alt); transform: translateY(-1px); }
.botao svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* a tinta acompanha o tema pelo token, sem precisar de regra por tema */
.botao[aria-pressed="true"] {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--sobre-marca);
}

/* ------------------------------------------------------- menu de cores -- */

.menu-cores { position: relative; }

/* position:fixed (nao absolute) de proposito: o cabecalho (.topo) tem
   overflow:hidden para conter o gradiente decorativo, o que cortaria um
   painel absoluto que ultrapassasse a altura do cabecalho. Fixed escapa
   desse clipping e do contexto de empilhamento da barra de filtros
   (sticky, z-index 40); a posicao e calculada em JS a partir do botao. */
.menu-cores__painel {
  position: fixed;
  z-index: 90;
  width: 300px;
  padding: 14px;
  border-radius: var(--raio);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--sombra);
}
.menu-cores__titulo { font-size: 0.875rem; font-weight: 600; margin-bottom: 4px; }
.menu-cores__nota { font-size: 0.75rem; color: var(--muted); margin-bottom: 12px; }
.menu-cores__lista { display: flex; flex-direction: column; gap: 4px; }

.paleta-opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text-1);
}
.paleta-opcao:hover { background: var(--surface-alt); }
.paleta-opcao[aria-pressed="true"] { border-color: var(--axis); background: var(--surface-alt); }

.paleta-opcao__amostra { display: flex; gap: 3px; flex: 0 0 auto; }
.paleta-opcao__amostra span {
  width: 16px; height: 16px;
  border-radius: 5px;
  display: block;
}

.paleta-opcao__texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.paleta-opcao__nome { font-size: 0.8125rem; font-weight: 500; }
.paleta-opcao__desc { font-size: 0.7rem; color: var(--muted); }

.paleta-opcao__check {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  color: var(--marca-forte);
  visibility: hidden;
}
.paleta-opcao[aria-pressed="true"] .paleta-opcao__check { visibility: visible; }

/* --------------------------------------------------------- filtros ------ */

.filtros {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.filtros__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px 14px;
  padding: 12px 0 0;
}
.filtro { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filtro__rotulo {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: var(--muted);
}
.filtro__campo {
  font: inherit;
  font-size: 0.8125rem;
  padding: 7px 10px;
  min-height: 36px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-1);
  cursor: pointer;
  width: 100%;
  text-overflow: ellipsis;
}
.filtro__campo:hover { border-color: var(--axis); }

.meta__campo { display: flex; align-items: center; gap: 8px; }
.meta__campo input { width: 100%; }
.meta__unidade { color: var(--muted); font-size: 0.8125rem; }

/* --------------------------------------------- filtro de periodo (multi) */

.filtro-periodo__gatilho { text-align: left; }

/* position:fixed pelo mesmo motivo do menu de cores: .filtros e sticky com
   z-index proprio, o que prenderia um descendente fixed no contexto de
   empilhamento dela. A posicao e calculada em JS a partir do botao. */
.filtro-periodo__painel {
  position: fixed;
  z-index: 90;
  width: 240px;
  max-height: 320px;
  overflow-y: auto;
  padding: 12px;
  border-radius: var(--raio);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--sombra);
}
.filtro-periodo__acoes {
  display: flex;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.periodo-opcao {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--text-1);
}
.periodo-opcao:hover { background: var(--surface-alt); }
.periodo-opcao input { margin: 0; accent-color: var(--marca-forte); cursor: pointer; }

.filtros__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 12px 0;
}
.filtros__resumo {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--muted);
  margin-right: auto;
}
.filtros__rotulo {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--muted);
}
.segmentado {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.segmentado button {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 0;
  background: transparent;
  color: var(--text-2);
  padding: 7px 15px;
  min-height: 34px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 0.18s ease, color 0.18s ease;
}
.segmentado button:hover { color: var(--text-1); }
.segmentado button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text-1);
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.08);
}
.ponto { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
/* a cor do ponto e definida em JS, pela entidade que ele representa */

/* ------------------------------------------------------ importacao ------ */

.tela-importar { padding-bottom: 60px; }

.abas {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.abas button {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  border: 0;
  background: transparent;
  color: var(--text-2);
  padding: 10px 16px;
  min-height: 42px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.abas button:hover { color: var(--text-1); }
.abas button[aria-selected="true"] {
  color: var(--marca-forte);
  border-bottom-color: var(--marca);
}

.solta {
  border: 2px dashed var(--axis);
  border-radius: var(--raio);
  padding: 44px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
  color: var(--text-2);
}
.solta:hover, .solta--ativa, .solta:focus-visible {
  border-color: var(--marca);
  background: var(--marca-clara);
}
.solta svg { width: 36px; height: 36px; color: var(--marca); margin-bottom: 10px; }
.solta__titulo { font-size: 1rem; font-weight: 600; color: var(--text-1); }
.solta__sub { font-size: 0.8125rem; margin-top: 4px; }

.rotulo-campo {
  display: block;
  font-size: 0.875rem;
  color: var(--text-2);
  margin-bottom: 10px;
}
.area-texto {
  width: 100%;
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-1);
  resize: vertical;
}
.area-texto:focus { outline: 2px solid var(--marca); outline-offset: 1px; }

.perfil__atendimentos { display: flex; flex-wrap: wrap; gap: 14px 20px; margin-top: 18px; }
.perfil__atendimentos .dialog__filtro-grupo { flex: 0 1 200px; min-width: 160px; }

.perfil__anotacao { margin-top: 18px; }
.perfil__anotacao label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}
.perfil__anotacao textarea { font-family: var(--fonte); font-size: 0.8125rem; }
.perfil__anotacao .sutil { margin-top: 4px; min-height: 1em; }
.perfil__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--text-2);
  cursor: pointer;
}
.perfil__checkbox input { cursor: pointer; }

/* Lista de observacoes — reaproveitada no dialog "Ver observações de
   alunos" e na secao que so aparece no PDF/impressao. */
.observacao-item { padding: 12px 0; border-bottom: 1px solid var(--grid); }
.observacao-item:last-child { border-bottom: 0; }
.observacao-item__cabeca { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.observacao-item__nome { font-weight: 600; }
.observacao-item__texto { color: var(--text-2); font-size: 0.875rem; white-space: pre-wrap; }

.acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.acoes--fim { justify-content: flex-end; margin-top: 20px; }

.botao--primario {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--sobre-marca);
  font-weight: 600;
}
.botao--primario:hover { background: var(--marca-forte); border-color: var(--marca-forte); }
.botao--primario:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.botao--discreto { background: transparent; }

.botao--perigo { color: var(--st-critico); border-color: var(--st-critico); }
.botao--perigo:hover { background: var(--st-critico); color: #fff; }

.previa__titulo {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
  margin: 22px 0 10px;
}

.bloco {
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--axis);
  background: var(--surface-alt);
  font-size: 0.875rem;
}
.bloco--erro { border-left-color: var(--st-critico); }
.bloco--aviso { border-left-color: var(--st-atencao); }
.bloco--neutro { border-left-color: var(--marca); }
.bloco table { margin-top: 8px; }
.bloco__titulo { font-weight: 600; margin-bottom: 6px; }
.bloco__lista { margin: 0; padding-left: 20px; color: var(--text-2); }
.bloco__lista li { margin-bottom: 3px; }

.aviso-flutuante {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 120;
  max-width: min(560px, calc(100vw - 32px));
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--text-1);
  color: var(--surface);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--sombra);
}
.aviso-flutuante--bom { background: var(--st-bom); color: #fff; }
.aviso-flutuante--atencao { background: var(--st-atencao); color: #0b0b0b; }
.aviso-flutuante--erro { background: var(--st-critico); color: #fff; }

.aviso-flutuante--progresso { display: flex; align-items: center; gap: 10px; }
.aviso-flutuante__spinner {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  animation: aviso-flutuante-girar 0.75s linear infinite;
}
.aviso-flutuante__progresso-percentual { font-variant-numeric: tabular-nums; font-weight: 600; }

@keyframes aviso-flutuante-girar { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------- dialog -- */

.link-botao {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--marca-forte);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  /* <button> tem alinhamento central e as vezes resiste a encolher dentro
     de grid/flex (comportamento padrao de controles de formulario) — sem
     isso, um nome comprido empurra a linha em vez de quebrar. */
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.link-botao:hover { color: var(--marca); }
/* .barras__nome e .podio__nome ja definem cor propria — precisa de duas
   classes pra vencer por especificidade, senao o link fica sem cor de link. */
.barras__nome.link-botao, .podio__nome.link-botao { color: var(--marca-forte); }
.barras__nome.link-botao:hover, .podio__nome.link-botao:hover { color: var(--marca); }

.dialog {
  border: none;
  border-radius: var(--raio);
  padding: 0;
  width: min(760px, 92vw);
  max-height: min(640px, 85vh);
  background: var(--surface);
  color: var(--text-1);
  box-shadow: var(--sombra);
}
.dialog::backdrop {
  background: color-mix(in srgb, #000 55%, transparent);
}
.dialog--largo { width: min(920px, 94vw); max-height: min(720px, 88vh); }
.dialog--largo .dialog__corpo { max-height: calc(min(720px, 88vh) - 78px); }

/* -------------------------------------------------- conselho de classe -- */
/* Widescreen, formato de apresentacao de slides — projetavel numa reuniao.
   So um <section class="conselho__slide"> fica visivel por vez; o JS troca
   a classe --ativo em vez de reconstruir o DOM a cada passo do carrossel. */

/* display:flex fica preso ao seletor [open] de proposito: um <dialog> some
   sozinho via "dialog:not([open]) { display:none }" nativo do navegador
   quando .close() roda, mas so se nenhuma regra do autor forcar "display"
   sem essa condicao — foi exatamente isso que deixava o Conselho de Classe
   sobreposto na tela depois de fechado. */
.conselho {
  border: none;
  padding: 0;
  width: min(1280px, 96vw);
  aspect-ratio: 16 / 9;
  max-height: 92vh;
  background: var(--surface);
  color: var(--text-1);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.conselho[open] { display: flex; flex-direction: column; }
.conselho::backdrop { background: color-mix(in srgb, #000 72%, transparent); }

.conselho__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.conselho__marca {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--marca-forte);
  margin: 0;
}
.conselho__contexto { font-size: 0.9375rem; color: var(--muted); margin: 3px 0 0; }

.conselho__filtros { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.conselho__filtro-grupo { display: flex; flex-direction: column; gap: 3px; }
.conselho__filtro-grupo span {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: var(--muted);
}
.conselho__filtro-grupo select {
  font: inherit;
  font-size: 0.8125rem;
  padding: 6px 9px;
  min-height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-1);
  cursor: pointer;
  max-width: 168px;
}
.conselho__filtro-grupo select:hover { border-color: var(--axis); }

.conselho__filtro-aluno-nav { display: flex; align-items: center; gap: 4px; }
.conselho__filtro-aluno-nav select { max-width: 150px; }
.conselho__aluno-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-1);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.conselho__aluno-nav svg { width: 14px; height: 14px; }
.conselho__aluno-nav:hover:not(:disabled) { border-color: var(--axis); transform: scale(1.08); }
.conselho__aluno-nav:disabled { opacity: 0.35; cursor: default; }

.conselho__autoplay,
.conselho__fechar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-2);
  cursor: pointer;
  align-self: flex-end;
}
.conselho__fechar { border-color: transparent; background: transparent; }
.conselho__fechar:hover { background: var(--surface-alt); border-color: var(--border); }
.conselho__fechar svg { width: 20px; height: 20px; }
.conselho__autoplay:hover { border-color: var(--axis); }
.conselho__autoplay[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.conselho__autoplay svg { width: 16px; height: 16px; }

.conselho__palco {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%, color-mix(in srgb, var(--marca) 7%, transparent), transparent 60%),
    radial-gradient(ellipse 55% 45% at 88% 92%, color-mix(in srgb, var(--marca) 5%, transparent), transparent 60%);
}

.conselho__slide {
  /* "display" e controlado via JS (conselhoMostrar) com display:none nos
     slides inativos, em vez de depender so de opacidade — assim nao ha
     nenhuma chance de conteudo de outro slide aparecer sobreposto. */
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.4vh, 26px);
  text-align: center;
  padding: clamp(16px, 3vh, 40px) clamp(24px, 6vw, 72px);
  opacity: 0;
  transform: scale(0.94) translateY(8px);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.conselho__slide--ativo { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .conselho__slide { transition: opacity 0.2s ease; transform: none; }
}

/* brilho decorativo atras do titulo — so nos slides de "capa" (introducao,
   estudante em foco) e "hero" (numero grande de prevalencia) */
.conselho__slide--capa::before,
.conselho__slide--hero::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: min(70vw, 640px);
  height: min(70vw, 640px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--marca) 16%, transparent), transparent 68%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
  animation: conselho-respirar 5s ease-in-out infinite;
}
.conselho__slide--alerta::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--st-critico) 14%, transparent), transparent 68%);
}
@keyframes conselho-respirar { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .conselho__slide--capa::before, .conselho__slide--hero::before { animation: none; } }

.conselho__slide > * { position: relative; z-index: 1; }

.conselho__titulo-linha { display: flex; align-items: center; gap: 12px; }
.conselho__titulo-icone {
  flex: 0 0 auto;
  width: clamp(24px, 3vw, 34px);
  height: clamp(24px, 3vw, 34px);
  color: var(--marca-forte);
}
.conselho__titulo-icone--alerta { color: var(--st-critico); }

.conselho__titulo-slide {
  font-size: clamp(1.4rem, 3vw, 2.375rem);
  font-weight: 700;
  margin: 0;
  line-height: 1.15;
}
.conselho__subtitulo {
  font-size: clamp(0.9375rem, 1.5vw, 1.1875rem);
  color: var(--muted);
  margin: 0;
}
.conselho__capa-marca {
  font-size: clamp(0.75rem, 1.2vw, 0.875rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--marca-forte);
}
.conselho__numero-grande {
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 800;
  line-height: 1;
  margin: 0;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 42px color-mix(in srgb, var(--marca-forte) 35%, transparent);
}
.conselho__numero-grande--critico { color: var(--st-critico); text-shadow: 0 0 42px color-mix(in srgb, var(--st-critico) 40%, transparent); }

.conselho__barra {
  width: min(560px, 80%);
  height: 18px;
  border-radius: 999px;
  background: var(--grid);
  overflow: hidden;
}
.conselho__barra-preenchida {
  height: 100%;
  border-radius: 999px;
  width: 0;
  transition: width 1.1s cubic-bezier(.22,.61,.36,1);
  background: linear-gradient(90deg, var(--st-atencao), var(--st-critico));
}

/* anel de progresso — hero da prevalencia de D */
.conselho__anel-caixa { position: relative; width: clamp(150px, 20vw, 220px); height: clamp(150px, 20vw, 220px); }
.conselho__anel { width: 100%; height: 100%; transform: rotate(-90deg); }
.conselho__anel-trilho { fill: none; stroke: var(--grid); }
.conselho__anel-progresso {
  fill: none;
  stroke: var(--st-critico);
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1);
}
.conselho__anel-numero {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.conselho__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(10px, 1.8vw, 22px);
  width: 100%;
  max-width: 980px;
}
.conselho__kpi {
  position: relative;
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: clamp(14px, 2vh, 22px) 14px;
}
.conselho__kpi::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--marca-forte), var(--s4, var(--marca)));
}
.conselho__kpi-rotulo { font-size: clamp(0.75rem, 1vw, 0.875rem); color: var(--muted); margin: 0 0 6px; }
.conselho__kpi-valor { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; }

.conselho__dist {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vh, 16px);
  width: 100%;
  max-width: 760px;
}
.conselho__dist-linha { display: flex; align-items: center; gap: 14px; }
.conselho__dist-linha .escala__letra { flex: 0 0 auto; width: clamp(28px, 3vw, 38px); height: clamp(28px, 3vw, 38px); font-size: clamp(0.875rem, 1.4vw, 1.125rem); }
.conselho__dist-barra { flex: 1 1 auto; height: clamp(14px, 2vh, 22px); border-radius: 999px; background: var(--grid); overflow: hidden; }
.conselho__dist-preench { height: 100%; border-radius: 999px; width: 0; transition: width 1s cubic-bezier(.22,.61,.36,1); }
.conselho__dist-valor { flex: 0 0 auto; width: 132px; text-align: right; font-size: clamp(0.8125rem, 1.2vw, 1rem); font-variant-numeric: tabular-nums; color: var(--text-2); }

.conselho__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 860px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1vh, 9px);
  overflow-y: auto;
}
.conselho__item {
  display: grid;
  grid-template-columns: 30px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: clamp(6px, 1vh, 9px) 10px;
  border-bottom: 1px solid var(--grid);
  border-left: 3px solid var(--cor-item, transparent);
  border-radius: 6px;
  opacity: 0;
  transform: translateY(10px);
  animation: conselho-item-entra 0.5s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: calc(var(--i, 0) * 65ms);
}
@keyframes conselho-item-entra { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .conselho__item { animation: none; opacity: 1; transform: none; } }

.conselho__pos { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; font-size: clamp(0.8125rem, 1.1vw, 0.9375rem); }
.conselho__brasao { flex: 0 0 auto; display: flex; }
.conselho__item-texto { min-width: 0; display: flex; flex-direction: column; }
.conselho__item-nome-linha { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.conselho__item-nome { min-width: 0; font-weight: 600; font-size: clamp(0.9375rem, 1.3vw, 1.125rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conselho__item-sub { font-size: clamp(0.75rem, 1vw, 0.875rem); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conselho__item-valor { font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(0.9375rem, 1.4vw, 1.1875rem); white-space: nowrap; }

.conselho__vazio { color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.25rem); }

/* Selo de atendimento (CNAPNE/AEE) — marcado no perfil do estudante,
   destacado aqui no Conselho junto do nome (lista e slide "em foco"). */
.conselho__selo-atendimento {
  flex: 0 0 auto;
  font-size: clamp(0.625rem, 0.9vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 1px 8px;
  border-radius: 999px;
  color: var(--st-atencao);
  background: color-mix(in srgb, var(--st-atencao) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--st-atencao) 40%, transparent);
  white-space: nowrap;
}

/* chips de turma na capa — um por turma do recorte, com a mesma cor usada
   pra essa turma no resto do painel, e uma entrada com "bounce" pra dar
   um respiro visual logo na abertura da apresentacao. */
.conselho__capa-turmas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 780px; }
.conselho__capa-turma {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  background: color-mix(in srgb, var(--cor-turma, var(--marca)) 12%, var(--surface-alt));
  border: 1px solid color-mix(in srgb, var(--cor-turma, var(--marca)) 42%, var(--border));
  opacity: 0;
  transform: translateY(10px) scale(0.85);
  animation: conselho-turma-entra 0.55s cubic-bezier(.34, 1.56, .64, 1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.conselho__capa-turma-ponto {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cor-turma, var(--marca));
  box-shadow: 0 0 9px 1px color-mix(in srgb, var(--cor-turma, var(--marca)) 65%, transparent);
}
@keyframes conselho-turma-entra { to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .conselho__capa-turma { animation: none; opacity: 1; transform: none; } }

/* slide de estudante em foco */
.conselho__estudante-cabeca { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.conselho__pilulas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 720px; }
.conselho__pilula {
  font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--st-critico) 14%, var(--surface-alt));
  color: var(--text-1);
  border: 1px solid color-mix(in srgb, var(--st-critico) 30%, var(--border));
}

.conselho__observacao {
  margin-top: 6px;
  padding: 14px 18px;
  max-width: 720px;
  border-radius: 12px;
  background: var(--surface-alt);
  border-left: 3px solid var(--marca);
  font-size: clamp(0.875rem, 1.2vw, 1.0625rem);
  color: var(--text-1);
  white-space: pre-wrap;
  text-align: left;
}
.conselho__observacao-rotulo {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 6px;
}

.conselho__rodape {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px 28px;
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
}
.conselho__nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-1);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.conselho__nav:hover:not(:disabled) { border-color: var(--axis); transform: scale(1.08); }
.conselho__nav:disabled { opacity: 0.35; cursor: default; }
.conselho__nav svg { width: 18px; height: 18px; }

.conselho__pontos { display: flex; align-items: center; gap: 8px; }
.conselho__ponto {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: var(--grid);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}
.conselho__ponto:hover { background: var(--axis); }
.conselho__ponto--ativo { background: var(--marca-forte); width: 22px; border-radius: 999px; }
.conselho__contador { position: absolute; right: 28px; font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .conselho { aspect-ratio: auto; height: 92vh; width: 96vw; }
  .conselho__item { grid-template-columns: 24px auto minmax(0, 1fr) auto; }
  .conselho__contexto { display: none; }
}
.dialog__cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.dialog__titulo { font-size: 1rem; font-weight: 600; margin: 0; }
.dialog__nota { font-size: 0.8125rem; color: var(--muted); margin: 4px 0 0; }
.dialog__fechar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.dialog__fechar:hover { background: var(--surface-alt); border-color: var(--border); }
.dialog__fechar svg { width: 18px; height: 18px; }
.dialog__filtro {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
}
.dialog__filtro-grupo { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }
.dialog__filtro-grupo label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: var(--muted);
}
.dialog__filtro-acoes { display: flex; align-items: flex-end; gap: 8px; margin-left: auto; }
.dialog__corpo {
  padding: 14px 20px 20px;
  max-height: calc(min(640px, 85vh) - 126px);
  overflow-y: auto;
}

/* ------------------------------------------------ prompt de extracao --- */

.detalhes { margin-top: 16px; }
.detalhes summary {
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--text-2);
  padding: 6px 0;
  min-height: 32px;
  display: flex;
  align-items: center;
}
.detalhes summary:hover { color: var(--text-1); }

.prompt-previa {
  margin: 10px 0 0;
  padding: 14px 16px;
  max-height: 340px;
  overflow: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-2);
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  font-size: 0.75rem;
  line-height: 1.55;
  white-space: pre-wrap;   /* preserva as quebras sem estourar a largura */
  word-break: break-word;
  -webkit-user-select: all;
  user-select: all;        /* um clique seleciona tudo, se a copia falhar */
}

.vazio-sutil {
  color: var(--muted);
  font-size: 0.875rem;
  padding: 26px 4px;
  text-align: center;
}

/* --------------------------------------------------------- secoes ------- */

main { padding-bottom: 72px; }

.secao { padding-top: 52px; }
.secao__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.secao__titulo { font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
.secao__titulo svg { width: 20px; height: 20px; color: var(--marca); flex: 0 0 20px; }
.secao__nota { font-size: 0.875rem; color: var(--text-2); margin-top: 6px; max-width: 78ch; }

.cartao {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 22px;
}

/* --------------------------------------------------- faixa de periodo --- */
/* Todo indicador da tela vale para um recorte de tempo; a faixa diz qual. */

.faixa-periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 0.875rem;
  color: var(--text-2);
  padding: 10px 16px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--marca-clara);
  border: 1px solid var(--border);
}
.faixa-periodo svg { width: 16px; height: 16px; color: var(--marca-forte); flex: 0 0 16px; }
.faixa-periodo strong { color: var(--text-1); }
.faixa-periodo__recorte {
  color: var(--muted);
  font-size: 0.8125rem;
  padding-left: 12px;
  border-left: 1px solid var(--axis);
}
.faixa-periodo__recorte:empty { display: none; }

/* -------------------------------------------------------- destaque ------ */

.destaque {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2fr;
  gap: 18px;
  margin-top: 34px;
}
@media (max-width: 860px) { .destaque { grid-template-columns: 1fr; } }

.heroi {
  background:
    radial-gradient(600px 220px at 100% 0%, var(--marca-clara), transparent 70%),
    var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.heroi__rotulo { font-size: 0.8125rem; color: var(--text-2); }
.heroi__valor {
  font-size: clamp(3.4rem, 8vw, 4.6rem);
  font-weight: 650;
  line-height: 1;
  margin: 8px 0 2px;
  letter-spacing: -0.03em;
}
.heroi__valor small { font-size: 0.34em; font-weight: 600; color: var(--text-2); margin-left: 4px; }
.heroi__detalhe { font-size: 0.875rem; color: var(--text-2); }
.heroi__barra {
  height: 10px;
  border-radius: 999px;
  background: var(--neutro);
  overflow: hidden;
  margin-top: 16px;
}
.heroi__barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--marca);
  width: 0;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 14px;
}
.indicador {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.indicador__rotulo { font-size: 0.78rem; color: var(--text-2); }
.indicador__valor { font-size: 1.85rem; font-weight: 650; letter-spacing: -0.02em; }
.indicador__nota { font-size: 0.75rem; color: var(--muted); }

/* ---------------------------------------------------------- graficos ---- */

.grafico { width: 100%; overflow-x: auto; }
.grafico svg { display: block; max-width: 100%; height: auto; }

.eixo-linha { stroke: var(--axis); stroke-width: 1; }
.grade { stroke: var(--grid); stroke-width: 1; }
.eixo-texto {
  fill: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-family: var(--fonte);
}
.rotulo-categoria { fill: var(--text-2); font-size: 12px; font-family: var(--fonte); }
.rotulo-valor { fill: var(--text-1); font-size: 12px; font-weight: 600; font-family: var(--fonte); }
.rotulo-dentro { font-size: 12px; font-weight: 600; font-family: var(--fonte); }

/* Entrada animada das marcas. Como nas barras, a marca ja nasce no tamanho
   certo; a animacao apenas a apresenta quando o cartao entra na tela. */
.marca-anima {
  transform-box: fill-box;
  transform-origin: left center;
}
.marca-anima--v { transform-origin: bottom center; }

.visivel .marca-anima {
  animation: crescer 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.visivel .marca-anima--v {
  animation: crescer-v 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes crescer-v {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.celula { transition: opacity 0.15s ease; cursor: pointer; }
.celula:hover, .celula:focus-visible { opacity: 0.72; }
.alvo { fill: transparent; cursor: pointer; }

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 16px;
  font-size: 0.8125rem;
  color: var(--text-2);
}
.legenda__item { display: inline-flex; align-items: center; gap: 8px; }
.legenda__amostra { width: 14px; height: 10px; border-radius: 3px; flex: 0 0 14px; }
.legenda__traco { width: 16px; height: 2px; border-radius: 2px; flex: 0 0 16px; }

/* dica flutuante */
.dica {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  background: var(--surface);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--sombra);
  padding: 9px 12px;
  font-size: 0.8125rem;
  max-width: 280px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.dica[data-visivel="true"] { opacity: 1; transform: translateY(0); }
.dica__titulo { font-weight: 600; margin-bottom: 3px; }
.dica__linha { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.dica__valor { color: var(--text-1); font-weight: 600; font-variant-numeric: tabular-nums; }

/* alternador grafico/tabela */
.alternador { display: inline-flex; gap: 4px; }
.alternador button {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 6px 12px;
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
}
.alternador button[aria-pressed="true"] {
  background: var(--surface-alt);
  color: var(--text-1);
  border-color: var(--axis);
}
.alternador--tipo { margin-bottom: 16px; }

/* --------------------------------------------------------------- pizza -- */

.pizza__fatia { cursor: pointer; }
.pizza__fatia:hover, .pizza__fatia:focus-visible { opacity: 0.86; }
.pizza__rotulo {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--fonte);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.pizza__guia { stroke: var(--axis); stroke-width: 1; pointer-events: none; }
.pizza__rotulo-fora { dominant-baseline: middle; pointer-events: none; }

/* ---------------------------------------------------------- destaques --- */

.dupla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px;
  align-items: start;
}

.cartao__titulo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.95rem;
  margin-bottom: 14px;
}
.cartao__titulo svg { width: 17px; height: 17px; color: var(--marca); flex: 0 0 17px; }
.cartao__nota {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--grid);
}

.podio { list-style: none; margin: 0; padding: 0; }
.podio__item {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 6px;
  border-bottom: 1px solid var(--grid);
  border-radius: 8px;
  transition: background 0.15s ease;
}
.podio__item:last-child { border-bottom: 0; }
.podio__item:hover, .podio__item:focus-visible { background: var(--surface-alt); }

.podio__posicao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
/* o brasao ja carrega o destaque visual dos 3 primeiros — a pilula de
   fundo do numero simples deixa de fazer sentido quando ha medalha */
.podio__posicao--topo { color: var(--muted); }

.podio__medalha { flex: 0 0 auto; display: block; }

.podio__texto { min-width: 0; }
.podio__nome {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.podio__item--destaque .podio__nome { font-size: 0.9375rem; font-weight: 600; }
.podio__item--destaque .podio__valor strong { font-size: 1.0625rem; }
.podio__sub {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podio__barra { display: flex; align-items: center; }
.podio__barra svg { display: block; }

.podio__valor {
  display: flex;
  align-items: baseline;
  gap: 3px;
  justify-content: flex-end;
  min-width: 62px;
}
.podio__valor strong { font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.podio__unidade { font-size: 0.7rem; color: var(--muted); }

@media (max-width: 520px) {
  .podio__item { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .podio__barra { display: none; }
}

/* ------------------------------------------------- escala de conceitos -- */

.escala { display: flex; flex-direction: column; }
.escala__linha {
  display: grid;
  grid-template-columns: minmax(160px, 1.1fr) minmax(80px, 2fr) 62px 52px;
  align-items: center;
  gap: 10px 14px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--grid);
  border-radius: 8px;
  transition: background 0.15s ease;
}
.escala__linha:last-child { border-bottom: 0; }
.escala__linha:hover, .escala__linha:focus-visible { background: var(--surface-alt); }

.escala__chave { display: flex; align-items: center; gap: 11px; min-width: 0; }
.escala__letra {
  width: 30px; height: 30px; flex: 0 0 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  font-weight: 700;
  font-size: 0.9375rem;
}
.escala__titulo { display: block; font-size: 0.875rem; font-weight: 500; }
.escala__faixa { display: block; font-size: 0.75rem; color: var(--muted); }
.escala__qtd {
  font-size: 0.8125rem;
  color: var(--text-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .escala__linha { grid-template-columns: 1fr auto auto; }
  .barras__trilho { grid-column: 1 / -1; }
}

.controles-secao { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtro--linha { flex-direction: row; align-items: center; gap: 8px; }

/* ------------------------------------------------ barras em HTML -------- */
/* Usadas onde os rotulos sao longos (disciplinas, docentes): o nome fica
   legivel e o selo de acompanhamento acompanha cada linha. */

.barras { display: flex; flex-direction: column; }

.barras__linha {
  display: grid;
  grid-template-columns: minmax(150px, 1.5fr) minmax(90px, 2.4fr) 60px auto;
  align-items: center;
  gap: 8px 14px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--grid);
  border-radius: 8px;
  transition: background 0.15s ease;
}
.barras__linha:last-child { border-bottom: 0; }
.barras__linha:hover, .barras__linha:focus-visible { background: var(--surface-alt); }

.barras__rotulo { min-width: 0; }
.barras__nome {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-1);
  overflow-wrap: anywhere;
}
.barras__sub {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barras__trilho { height: 14px; display: flex; align-items: center; }

/* A largura E o dado: vale sempre, mesmo sem JS de animacao. A entrada
   animada e um acrescimo — se o observador nao disparar, a barra ja esta certa. */
.barras__barra {
  height: 14px;
  width: var(--largura);
  min-width: 3px;
  border-radius: 0 4px 4px 0;
  transform-origin: left center;
}
.visivel .barras__barra {
  animation: crescer 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--atraso, 0ms);
}

@keyframes crescer {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Hachura da paleta grafite sobre os marcadores de conceito em HTML (a cor
   de fundo chega via style inline do JS, entao a textura precisa ser um
   ::after por cima — nao um background-image, que o inline sobrescreveria). */
[data-paleta="grafite"] .barras__barra--conceito,
[data-paleta="grafite"] .escala__letra--textura {
  position: relative;
  overflow: hidden;
}
[data-paleta="grafite"] .barras__barra--conceito::after,
[data-paleta="grafite"] .escala__letra--textura::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, var(--surface) 0 2px, transparent 2px 6px);
  opacity: 0.6;
  pointer-events: none;
  border-radius: inherit;
}

.barras__valor {
  font-size: 0.875rem;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}

.barras__nota {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--grid);
}

@media (max-width: 640px) {
  .barras__linha { grid-template-columns: 1fr auto; }
  .barras__trilho { grid-column: 1 / -1; order: 3; }
  .barras__valor { order: 2; }
}

/* ------------------------------------------------------- matriz --------- */

.matriz + .matriz { margin-top: 32px; }
.matriz__titulo {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 12px;
}
.matriz__rolagem { overflow-x: auto; padding-bottom: 6px; }
.matriz__rolagem svg { max-width: none; }

.sutil { color: var(--muted); }

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

.tabela-envelope { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
caption {
  text-align: left;
  font-size: 0.8125rem;
  color: var(--text-2);
  padding-bottom: 10px;
}
th, td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--grid);
  vertical-align: middle;
}
th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--surface-alt); }

/* ---------------------------------------------------------- fichas ------ */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.selo svg { width: 13px; height: 13px; flex: 0 0 13px; }
.selo--critico { color: var(--st-critico); background: color-mix(in srgb, var(--st-critico) 12%, transparent); }
.selo--serio   { color: var(--st-serio);   background: color-mix(in srgb, var(--st-serio) 14%, transparent); }
.selo--atencao { color: var(--st-atencao); background: color-mix(in srgb, var(--st-atencao) 16%, transparent); }
.selo--bom     { color: var(--st-bom);     background: color-mix(in srgb, var(--st-bom) 12%, transparent); }
.selo--neutro  { color: var(--text-2);     background: var(--surface-alt); }

.aviso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--raio);
  border: 1px solid var(--border);
  border-left: 3px solid var(--st-atencao);
  background: var(--surface-alt);
  font-size: 0.875rem;
  color: var(--text-2);
  margin-bottom: 18px;
}
.aviso svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--st-atencao); margin-top: 2px; }

/* ------------------------------------------------------- estudantes ----- */

.busca {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  max-width: 320px;
}
.busca svg { width: 16px; height: 16px; color: var(--muted); flex: 0 0 16px; }
.busca input {
  font: inherit;
  font-size: 0.875rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-1);
  width: 100%;
}

.pilulas { display: flex; flex-wrap: wrap; gap: 5px; }
.pilula {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text-2);
  white-space: nowrap;
}

.pontinhos { display: inline-flex; gap: 3px; align-items: center; }
.pontinho { width: 7px; height: 7px; border-radius: 50%; background: var(--st-critico); }

/* ------------------------------------------------------ metodologia ----- */

.fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.ficha {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: 16px 18px;
}
.ficha__termo { font-weight: 600; font-size: 0.9375rem; margin-bottom: 5px; }
.ficha__def { font-size: 0.875rem; color: var(--text-2); }

.rodape {
  border-top: 1px solid var(--border);
  padding: 26px 0 40px;
  font-size: 0.8125rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
}

/* ------------------------------------------------- entrada das secoes --- */

.aparece {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.aparece.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .aparece { opacity: 1; transform: none; }
  /* sem movimento: as marcas ja estao no tamanho final, basta nao anima-las */
  .visivel .marca-anima,
  .visivel .marca-anima--v,
  .visivel .barras__barra { animation: none; }
}

.somente-impressao { display: none; }

@media print {
  .filtros, .controles, .alternador, .controles-secao, .tela-importar { display: none !important; }
  .cartao, .indicador { box-shadow: none; }
  .aparece { opacity: 1; transform: none; }
  .visivel .marca-anima,
  .visivel .marca-anima--v,
  .visivel .barras__barra { animation: none; }
  .somente-impressao { display: block; }
}