:root {
  --color-bg: #f7f8fa;
  --color-surface: #ffffff;
  --color-border: #e5e7eb;
  --color-text: #1f2430;
  --color-text-muted: #8a8f98;
  /* Cinza dos rótulos de menu: o `--color-text-muted` é claro demais para
     texto que se lê a todo momento, e escuro como o corpo apagaria o
     destaque do item ativo. */
  --color-text-soft: #5b6270;
  /* Realce neutro de hover — cor de marca fica reservada ao item ativo. */
  --color-hover: #f2f3f5;
  --color-accent: #4f46e5;
  --color-accent-soft: #eef2ff;
  --topbar-height: 64px;
  --sidebar-width: 248px;
}

* {
  box-sizing: border-box;
}

/* O `display: none` que o navegador dá ao atributo `hidden` vem da folha do
   próprio navegador, e por isso QUALQUER regra nossa de classe o vence. Foi o
   que aconteceu com `.exportar__menu { display: flex }`: o JS abria e fechava
   o menu do Exportar pelo `hidden`, corretamente, e o menu ficava aberto na
   tela para sempre, em todas as grades. Como `hidden` só quer dizer uma coisa,
   a trava é geral — e vale para o próximo componente que nascer com `hidden`.
   Para esconder por estado use o atributo, não `style.display`. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Topbar */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  z-index: 100;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  min-width: var(--sidebar-width);
}

.topbar__brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

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

.topbar__icon-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.topbar__icon-btn:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.topbar__icon-btn:active {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.topbar__user {
  position: relative;
  padding-left: 10px;
  border-left: 1px solid var(--color-border);
}

.topbar__user-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
}

.topbar__user-trigger:hover {
  background: var(--color-bg);
}

.topbar__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.topbar__user-name {
  font-size: 13px;
  font-weight: 500;
}

.topbar__user-chevron {
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}

.topbar__user.is-open .topbar__user-chevron {
  transform: rotate(180deg);
}

.topbar__user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 17, 21, 0.12);
  padding: 6px;
  display: none;
  z-index: 110;
}

.topbar__user.is-open .topbar__user-dropdown {
  display: block;
}

.topbar__user-dropdown-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.topbar__user-dropdown-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.topbar__user-dropdown-link:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Layout shell */
.app-shell {
  display: flex;
  padding-top: var(--topbar-height);
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: #fbfbfc;
  border-right: 1px solid var(--color-border);
  padding: 14px 10px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  /* Barra de rolagem só aparece com o ponteiro na sidebar: a Secretaria
     sozinha tem 23 itens e já deixa o menu rolável, e barra permanente ao
     lado de 36 itens é ruído. Firefox usa `scrollbar-color`, WebKit as
     regras abaixo. */
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.2s ease;
}

.sidebar:hover,
.sidebar:focus-within {
  scrollbar-color: var(--color-border) transparent;
}

.sidebar::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: transparent;
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}

.sidebar:hover::-webkit-scrollbar-thumb,
.sidebar:focus-within::-webkit-scrollbar-thumb {
  background-color: #d7dae0;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar__section + .sidebar__section {
  margin-top: 6px;
}

.sidebar__section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: none;
  background: none;
  min-height: 38px;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: #4f5665;
  padding: 9px 9px;
  text-align: left;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.sidebar__section-title:hover {
  background: var(--color-hover);
  color: #2e3441;
}

.sidebar__section.is-open .sidebar__section-title {
  background: #f5f5f8;
  color: #2e3441;
}

.sidebar__section.has-active .sidebar__section-title {
  color: var(--color-accent);
}

.sidebar__section-title-inner {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.sidebar__section-title-inner span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar__section-title-inner svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #777e8c;
  opacity: 0.8;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.sidebar__section.is-open .sidebar__section-title-inner svg,
.sidebar__section.has-active .sidebar__section-title-inner svg {
  color: var(--color-accent);
  opacity: 1;
}

.sidebar__nav {
  list-style: none;
  margin: 3px 0 8px 17px;
  padding: 3px 0 3px 9px;
  border-left: 1px solid #e2e4ea;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* A primeira seção não tem título (é só o Dashboard), então o recuo de filho
   desalinharia o único item dela dos títulos das seções de baixo. A linha
   separa o atalho fixo do menu por módulo. */
.sidebar__section:first-child > .sidebar__nav:first-child {
  margin: 0;
  padding-left: 0;
  border-left: 0;
}

.sidebar__section:first-child {
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.sidebar__section:first-child .sidebar__link {
  min-height: 36px;
  font-size: 13.5px;
  font-weight: 650;
}

/* Seção fechada some do fluxo. Antes era `max-height: 600px` no aberto com
   transição para 0 — e 600px NÃO cabe a Secretaria, que tem 23 itens (~780px):
   os últimos ficavam invisíveis com a seção aberta, sem barra de rolagem
   própria e sem nada indicando corte. Altura fixa não descreve conteúdo
   variável; a animação de entrada abaixo dá o mesmo conforto sem medir nada. */
.sidebar__section:not(.is-open) .sidebar__nav {
  display: none;
}

.sidebar__section.is-open .sidebar__nav {
  animation: sidebar-nav-in 0.18s ease;
}

@keyframes sidebar-nav-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar__section.is-open .sidebar__nav {
    animation: none;
  }
}

.sidebar__section:not(.is-open) .sidebar__chevron {
  transform: rotate(-90deg);
}

.sidebar__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 33px;
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 12.75px;
  line-height: 1.35;
  font-weight: 400;
  color: #697180;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.sidebar__link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #8a919f;
  opacity: 0.8;
  transition: color 0.15s ease, opacity 0.15s ease;
}

/* Cinza no hover, cor de marca só no item ativo: com hover colorido a tela
   sugeria dois itens selecionados enquanto o ponteiro passeava pelo menu. */
.sidebar__link:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

.sidebar__link:hover svg {
  color: #606876;
  opacity: 0.9;
}

.sidebar__link.is-active {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-weight: 650;
  box-shadow: inset 2px 0 0 var(--color-accent);
}

.sidebar__link.is-active svg {
  color: var(--color-accent);
  opacity: 1;
}

.sidebar__link:focus-visible,
.sidebar__section-title:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.sidebar__chevron {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: #9298a4;
  opacity: 0.75;
  transition: transform 0.2s ease;
}

/* Content */
.content {
  margin-left: var(--sidebar-width);
  padding: 28px;
  /* `width: 100%` aqui somava-se ao `margin-left` da sidebar e fazia o
     conteúdo medir viewport + 240px — a página inteira rolava na horizontal.
     Só ficou visível com a grade de notas por critério (2124px de tabela);
     em telas estreitas o estouro passava desapercebido.
     `flex: 1` já desconta a margem, e `min-width: 0` é o que permite o item
     flex encolher abaixo do conteúdo, deixando a rolagem para quem tem
     `overflow-x` (a .table-wrap) em vez de empurrar o body. */
  flex: 1;
  min-width: 0;
}

/* Mobile menu toggle + overlay (hidden on desktop) */
.topbar__menu-btn {
  display: none;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.topbar__menu-btn:hover {
  background: var(--color-bg);
}

.topbar__menu-btn:active {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--topbar-height);
  background: rgba(15, 17, 21, 0.4);
  z-index: 90;
}

@media (max-width: 900px) {
  .topbar {
    padding: 0 14px;
    gap: 10px;
  }

  .topbar__menu-btn,
  .topbar__icon-btn {
    width: 40px;
    height: 40px;
    background: var(--color-bg);
  }

  .topbar__menu-btn {
    display: flex;
  }

  .topbar__brand {
    min-width: 0;
  }

  .topbar__brand span:last-child {
    display: none;
  }

  .topbar__user-name {
    display: none;
  }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    width: min(var(--sidebar-width), 80vw);
    box-shadow: 4px 0 16px rgba(15, 17, 21, 0.12);
    z-index: 95;
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .sidebar-overlay.is-open {
    display: block;
  }

  .content {
    margin-left: 0;
    padding: 18px;
  }
}

@media (max-width: 480px) {
  .topbar__actions {
    gap: 8px;
  }

  .content {
    padding: 14px;
  }
}

/* Login */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--color-bg);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 17, 21, 0.08);
  padding: 32px 28px;
}

.login-card__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 24px;
}

.login-card__title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
}

.login-card__subtitle {
  margin: 0 0 20px;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.login-alert {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
}

.login-alert ul {
  margin: 0;
  padding-left: 18px;
}

.login-alert--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.login-form {
  display: flex;
  flex-direction: column;
}

.login-form__label {
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0 6px;
}

.login-form__label:first-of-type {
  margin-top: 0;
}

.login-form__input {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
}

.login-form__input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-surface);
}

.login-form__submit {
  margin-top: 22px;
  padding: 11px 12px;
  border: none;
  border-radius: 8px;
  background: var(--color-accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.login-form__submit:hover {
  filter: brightness(1.05);
}

/* ---------------------------------------------------------- */
/* Shared page chrome                                          */
/* ---------------------------------------------------------- */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.page-header__title {
  margin: 0;
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.page-header__subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025), 0 8px 24px rgba(15, 23, 42, 0.025);
}

.panel + .panel {
  margin-top: 16px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.btn:hover:not(:disabled) {
  background: var(--color-bg);
  border-color: #d4d7de;
}

.btn:focus-visible {
  outline: 3px solid rgba(79, 70, 229, 0.18);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  box-shadow: 0 2px 5px rgba(79, 70, 229, 0.18);
}

.btn--primary:hover:not(:disabled) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  filter: brightness(1.05);
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.23);
}

/* Primário desabilitado não pode ser só `opacity`: texto branco a 60% sobre o
   indigo clareado dá contraste ~1,5:1 — o rótulo desaparece e o botão fica
   uma caixa lavanda vazia. Aconteceu com "Avançar para Dados Acadêmicos" na
   Nova Matrícula, e o texto estava no DOM o tempo todo. Aqui o botão troca de
   cor em vez de desbotar: cinza claro com texto cinza escuro, que se lê. */
.btn--primary:disabled {
  opacity: 1;
  background: #eceef2;
  border-color: #dfe2e8;
  color: #656b7a;
}

.btn--danger {
  color: #b91c1c;
  border-color: #fecaca;
}

.btn--danger:hover:not(:disabled) {
  background: #fef2f2;
}

.btn--small {
  padding: 5px 10px;
  font-size: 12px;
}

/* Filters bar */
.filters-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  background: #fafbfc;
}

.filters-bar__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 180px;
  flex: 1 1 190px;
}

.filters-bar__field label {
  font-size: 12px;
  font-weight: 650;
  color: var(--color-text-soft);
}

.filters-bar__actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* Form inputs */
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text);
}

.field small {
  font-size: 11.5px;
  color: var(--color-text-muted);
}

.field .field-error {
  font-size: 11.5px;
  color: #b91c1c;
}

.input,
select.input,
textarea.input {
  font: inherit;
  font-size: 13.5px;
  padding: 9px 11px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.input:hover:not(:disabled):not(:focus) {
  border-color: #cfd3dc;
}

.input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.11);
}

.input::placeholder {
  color: #9ca3af;
}

.input:disabled,
.input[readonly] {
  background: #f4f5f7;
  color: #6b7280;
}

.input.is-invalid {
  border-color: #fca5a5;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 16px;
}

.form-grid__full {
  grid-column: 1 / -1;
}

.form-section {
  margin-bottom: 22px;
}

.form-section + .form-section {
  padding-top: 20px;
  border-top: 1px solid #eef0f3;
}

.form-section__title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--color-text-soft);
}

.form-section__hint {
  max-width: 920px;
  margin: -2px 0 16px;
  padding: 10px 12px;
  border-left: 3px solid #c7c5f9;
  border-radius: 0 8px 8px 0;
  background: #f8f8ff;
  color: var(--color-text-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Switch (boolean fields) */
.switch-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch__track {
  position: absolute;
  inset: 0;
  background: var(--color-border);
  border-radius: 999px;
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.switch__track::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.switch input:checked + .switch__track {
  background: var(--color-accent);
}

.switch input:checked + .switch__track::before {
  transform: translateX(16px);
}

.switch-field__label {
  font-size: 13px;
  font-weight: 500;
}

.switch-field--described {
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-bg);
}

.switch-field--described .switch {
  margin-top: 1px;
}

.switch-field__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.switch-field--described .switch-field__label {
  color: var(--color-text);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
}

.switch-field--described small {
  max-width: 760px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

/* Data table */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.data-table th {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: #fafbfc;
}

.data-table tbody tr:hover {
  background: #fafaff;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table__actions {
  display: flex;
  gap: 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--color-bg);
  color: var(--color-text-muted);
}

.badge--on {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.empty-state {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 18px;
  border: 1px dashed #d9dce3;
  border-radius: 10px;
  background: #fafbfc;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13.5px;
}

.empty-state a {
  color: var(--color-accent);
  font-weight: 600;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--color-text-muted);
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid #eef0f3;
}

.pagination__pages {
  display: flex;
  gap: 4px;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #f7f8fa;
  margin-bottom: 18px;
  overflow-x: auto;
}

.tabs__btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 13px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.tabs__btn:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.7);
}

.tabs__btn.is-active {
  color: var(--color-accent);
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.09);
}

.tabs__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Aba que guarda campo com erro de validação. Sem esta marca, um 422 num
   campo de aba fechada só mostra "corrija os campos" e o usuário não tem
   como descobrir em qual aba olhar. */
.tabs__btn.is-error {
  color: #b91c1c;
}

.tabs__btn.is-error::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  vertical-align: middle;
  border-radius: 50%;
  background: #b91c1c;
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
}

/* Seleções vinculadas dentro de abas (Perfis e Visibilidade do usuário). */
.selection-intro {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid #dfe3f3;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-accent-soft), #fff 72%);
}

.selection-intro__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  background: var(--color-accent);
  color: #fff;
}

.selection-intro__icon svg {
  width: 20px;
  height: 20px;
}

.selection-intro__title {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--color-text);
}

.selection-intro__description {
  max-width: 780px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #656b7a;
}

.multi-select {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}

.multi-select:empty {
  border: 0;
}

.multi-select .multi-select__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.multi-select .multi-select__summary strong {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.multi-select .multi-select__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
  max-height: 390px;
  margin: 0;
  padding: 14px;
  overflow-y: auto;
  list-style: none;
}

.multi-select .multi-select__item {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-surface);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.multi-select .multi-select__item:hover {
  border-color: #c7c5f9;
  box-shadow: 0 2px 8px rgba(31, 36, 48, 0.06);
}

.multi-select .multi-select__item--selected {
  border-color: #c7c5f9;
  background: var(--color-accent-soft);
}

.multi-select .multi-select__option {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 10px 12px;
  cursor: pointer;
}

.multi-select .multi-select__checkbox {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.multi-select .multi-select__copy {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.multi-select .multi-select__label {
  overflow: hidden;
  color: var(--color-text);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-select .multi-select__state {
  color: var(--color-text-muted);
  font-size: 11.5px;
}

.multi-select .multi-select__item--selected .multi-select__state {
  color: var(--color-accent);
  font-weight: 600;
}

.multi-select .multi-select__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.multi-select .multi-select__item--selected .multi-select__check {
  opacity: 1;
  transform: scale(1);
}

.multi-select .multi-select__option:focus-within {
  border-radius: 8px;
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.multi-select .multi-select__checkbox:disabled + .multi-select__copy {
  opacity: 0.55;
}

.multi-select .multi-select__loading {
  padding: 32px 16px;
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 700px) {
  .multi-select .multi-select__list {
    grid-template-columns: 1fr;
  }

  .selection-intro {
    padding: 13px;
  }
}

.turmas-consulta-filter {
  border-top: 3px solid var(--color-accent) !important;
}

.turmas-consulta-empty {
  min-height: 260px;
  border-radius: 14px;
}

.turmas-consulta-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.turmas-consulta-empty__icon svg {
  width: 23px;
  height: 23px;
}

.turmas-loading {
  width: 34px;
  height: 34px;
  border: 3px solid #dddffc;
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: turmas-loading-spin 0.75s linear infinite;
}

@keyframes turmas-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.turmas-summary {
  border-radius: 14px;
  background: linear-gradient(135deg, #fff, #f7f7ff);
}

.turmas-summary__eyebrow {
  color: var(--color-accent);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.turmas-summary__title {
  color: var(--color-text);
  font-size: 22px;
  font-weight: 750;
}

.turmas-stat {
  display: flex;
  min-height: 86px;
  flex-direction: column;
  justify-content: center;
  padding: 14px 16px;
  border: 1px solid var(--turmas-border);
  border-radius: 10px;
  background: #fff;
}

.turmas-stat span {
  color: #777e8c;
  font-size: 11.5px;
}

.turmas-stat strong {
  margin-top: 3px;
  color: #303645;
  font-size: 20px;
}

.turmas-stat--accent {
  border-color: #d7d5fb;
  background: var(--color-accent-soft);
}

.turmas-stat--accent strong {
  color: var(--color-accent);
}

.turmas-detail-section {
  overflow: hidden;
  border-radius: 14px;
}

.turmas-detail-section .card-header {
  border-bottom-color: var(--turmas-border);
}

.turmas-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 11.5px;
  font-weight: 700;
}

.turmas-consulta-table-empty {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbfbfd;
}

@media (prefers-reduced-motion: reduce) {
  .turmas-loading {
    animation: none;
  }
}

.tab-hint {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 24px 0;
}

/* Wizard (assistente multi-etapa — ex.: form de Matrícula).
   Mesmo visual das abas (.tabs/.tabs__btn): a barra de etapas é uma fileira
   de botões sublinhados, a etapa ativa marcada na cor de acento. O JS
   (matriculas-form.js) só alterna .is-active; quem esconde as etapas
   inativas é este CSS, igual a .tab-panel — sem ele as 5 etapas
   renderizam empilhadas na mesma página. */
.wizard-steps {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #f7f8fa;
  margin-bottom: 18px;
  overflow-x: auto;
}

.wizard-steps__step {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 13px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.wizard-steps__step:hover:not(:disabled) {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.7);
}

.wizard-steps__step.is-active {
  color: var(--color-accent);
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.09);
}

.wizard-steps__step:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.wizard-step {
  display: none;
}

.wizard-step.is-active {
  display: block;
}

/* Crud grid (sub-tab embedded CRUD) */
.crud-grid__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid #eef0f3;
}

.crud-grid__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.crud-grid__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin-bottom: 14px;
  background: #fafbfc;
}

.crud-grid__form-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

/* Checklists que são montados diretamente nas abas de Alunos. */
.checklist-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist-cards__item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  padding: 12px 13px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-surface);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.checklist-cards__item:hover {
  border-color: #c7c5f9;
  box-shadow: 0 2px 8px rgba(31, 36, 48, 0.05);
}

.checklist-cards__item:has(.checklist-cards__checkbox:checked) {
  border-color: #c7c5f9;
  background: var(--color-accent-soft);
}

.checklist-cards__label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}

.checklist-cards__checkbox {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0;
  accent-color: var(--color-accent);
}

.checklist-cards__meta {
  padding-left: 27px;
  color: var(--color-text-muted);
  font-size: 11.5px;
}

/* Resultado e registro de respostas de Enquetes. */
.survey-participation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.survey-participation__copy {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 2px 8px;
}

.survey-participation__eyebrow {
  grid-column: 1 / -1;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.survey-participation__copy strong {
  color: var(--color-text);
  font-size: 24px;
  letter-spacing: -0.03em;
}

.survey-participation__copy > span:last-child {
  color: var(--color-text-soft);
  font-size: 13px;
}

.survey-participation__progress {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(420px, 48%);
  color: var(--color-accent);
  font-size: 13px;
}

.survey-participation__track {
  flex: 1;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9eaf0;
}

.survey-participation__track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
}

.survey-result {
  padding: 15px 0;
  border-top: 1px solid #eef0f3;
}

.survey-result:first-of-type {
  padding-top: 2px;
  border-top: 0;
}

.survey-result:last-child {
  padding-bottom: 0;
}

.survey-result__question {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 650;
}

.survey-result__list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.survey-result__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid #eceef2;
  border-radius: 8px;
  background: #fafbfc;
  color: var(--color-text-soft);
  font-size: 13px;
}

.survey-result__list li strong {
  min-width: 28px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  text-align: center;
}

.survey-result__list--text li {
  justify-content: flex-start;
  line-height: 1.45;
}

.survey-answer-field {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: #fafbfc;
}

/* Mural e caixa de entrada. */
.notice-board {
  display: grid;
  gap: 14px;
}

.notice-board .panel + .panel {
  margin-top: 0;
}

.notice-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.notice-card__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 15px;
  font-weight: 800;
}

.notice-card__content {
  min-width: 0;
}

.notice-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.notice-card__date {
  margin: 3px 0 10px;
  color: var(--color-text-muted);
  font-size: 11.5px;
}

.notice-card__text {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-line;
}

.inbox-row--unread td {
  background: #fafaff;
  color: var(--color-text);
  font-weight: 600;
}

.inbox-row--unread td:first-child {
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.inbox-subject {
  min-width: 220px;
  white-space: normal !important;
}

@media (max-width: 700px) {
  .survey-participation {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .survey-participation__progress {
    width: 100%;
  }

  .page-header {
    align-items: flex-start;
    margin-bottom: 16px;
  }

  .page-header__title {
    font-size: 20px;
  }

  .panel {
    padding: 15px;
    border-radius: 11px;
  }

  .filters-bar {
    align-items: stretch;
    padding: 12px;
  }

  .filters-bar__field {
    min-width: min(100%, 220px);
    flex-basis: 100%;
  }

  .filters-bar__actions {
    width: 100%;
    margin-left: 0;
  }

  .filters-bar__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Read-only footer (auditoria) */
.audit-footer {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-muted);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.alert {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

.alert--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.alert--info {
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-soft);
  color: var(--color-accent);
}

/* Gráficos (dataviz — ver skill) */
.viz-root {
  --viz-surface: #fcfcfb;
  --viz-text-secondary: #52514e;
  --viz-muted: #898781;
  --viz-gridline: #e1e0d9;
  --viz-baseline: #c3c2b7;
}

.viz-gridline {
  stroke: var(--viz-gridline);
  stroke-width: 1;
}

.viz-baseline {
  stroke: var(--viz-baseline);
  stroke-width: 1;
}

.viz-axis-label {
  font-size: 11px;
  fill: var(--viz-muted);
  font-family: inherit;
}

.viz-value-label {
  font-size: 12px;
  font-weight: 600;
  fill: var(--viz-text-secondary);
  font-family: inherit;
}

.viz-root path.is-hover {
  filter: brightness(1.1);
}

.viz-tooltip {
  position: absolute;
  background: var(--color-text);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(15, 17, 21, 0.18);
}

.viz-tooltip strong {
  margin-right: 4px;
}

.viz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.viz-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.viz-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Calendário (Agenda Pessoal) */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendar-grid__weekday {
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  padding: 4px 0;
}

.calendar-day {
  min-height: 64px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  font-size: 13px;
  background: var(--color-surface);
}

.calendar-day:hover {
  border-color: var(--color-accent);
}

.calendar-day.is-empty {
  background: transparent;
  border: none;
  cursor: default;
}

.calendar-day.has-note {
  background: var(--color-accent-soft);
}

.calendar-day__note {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Grade de lançamento por critério de avaliação (decisão D1, fase 1).
   Dezenas de colunas: rola dentro da .table-wrap, sem paginação horizontal.
   Nº e Aluno ficam fixos à esquerda — sem isso, ao rolar até a coluna da
   média o professor não sabe mais de quem é a linha. */
.grade-criterio {
  font-size: 12.5px;
}

.grade-criterio th,
.grade-criterio td {
  padding: 4px 6px;
  white-space: nowrap;
}

.grade-criterio__grupo {
  text-align: center;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-left: 2px solid #fff;
}

/* O bimestre escolhido no filtro. A grade mostra o ano inteiro (é o que a
   origem faz); o filtro só rola até aqui, então o grupo precisa se distinguir
   dos outros três — senão o professor não sabe onde a rolagem parou. */
.grade-criterio__grupo--atual {
  background: var(--color-accent, #4f46e5);
  color: #fff;
}

.grade-criterio__coluna {
  text-align: center;
  font-size: 11px;
  max-width: 84px;
  white-space: normal;
  line-height: 1.25;
}

.grade-criterio__fixa {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 2;
  /* Largura travada, e não só o `left` da coluna seguinte: com a largura
     livre a coluna Nº ficava mais estreita que os 44px onde Aluno começa, e
     as colunas roladas apareciam na faixa entre as duas. */
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  box-shadow: 1px 0 0 var(--color-border, #e5e5e3);
}

.grade-criterio thead .grade-criterio__fixa {
  z-index: 3;
  background: #f8f8f7;
}

.grade-criterio__aluno {
  left: 44px;
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  white-space: normal;
}

.grade-criterio td .input {
  width: 74px;
  padding: 3px 5px;
  font-size: 12.5px;
  text-align: center;
}

/* Calculada por fórmula: existe, mas o cálculo é da fase 2. */
.grade-criterio__cal .input {
  background: #f1f1ef;
  color: var(--color-text-muted, #898781);
  cursor: not-allowed;
}

.grade-criterio__parecer {
  width: 220px !important;
  min-height: 46px;
  text-align: left !important;
  resize: vertical;
}

.alert--success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
}

/* Coluna OPC — digitável, mas opcional (recuperação). Vazia é o normal, e o
   cabeçalho precisa dizer isso: sem a marca, a coluna em branco lê como
   pendência e a tela parece cobrar recuperação de aluno aprovado. */
.grade-criterio__coluna--opcional {
  font-style: italic;
}

.grade-criterio__opc {
  display: inline-block;
  font-style: normal;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* Tela de liberação de digitação (tarefa 11).
   A célula "Período de Digitação da Nota" é uma tabela dentro da tabela, como na
   origem: uma linha por janela, com os cursos ao lado. */
.data-table--aninhada {
  font-size: 12.5px;
  background: var(--color-bg);
  border-radius: 6px;
}

.data-table--aninhada th,
.data-table--aninhada td {
  padding: 4px 8px;
  vertical-align: top;
}

.data-table--aninhada th {
  font-size: 10.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Liberação desativada continua visível: some da regra de digitação, não da tela —
   quem configurou precisa ver que ela existe e está desligada. */
.linha-inativa {
  opacity: 0.55;
}

.text-muted {
  color: var(--color-text-muted);
  font-size: 12.5px;
}

/* Lista de checkbox em coluna, para escolher os cursos de uma liberação. */
.checkbox-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 4px 16px;
  max-height: 240px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}

.checkbox-lista__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  padding: 3px 0;
  cursor: pointer;
}

/* Linha do grid de tipos: quando a célula de período tem várias janelas, ela fica
   alta e o código/descrição centralizados ficam longe do que descrevem. */
#gridTipos tbody > tr > td {
  vertical-align: top;
}

/* Subnota, peso e máximo (medidos na origem em 31/08/2026).
   A origem mostra "Peso 1 / Máximo 3" sob cada subnota porque exibe UM tipo de
   nota por tela. A grade única mostra todas as colunas, então a informação vai
   numa terceira linha compacta de cabeçalho — e por inteiro no title. */
.grade-criterio__detalhe {
  font-size: 10px;
  font-weight: 400;
  /* O th da tabela aplica uppercase; aqui vira ruído — a origem escreve
     "Peso 1" e "Máximo 3", não "PESO 1". */
  text-transform: none;
  letter-spacing: 0;
  text-align: center;
  color: var(--color-text-muted);
  padding: 2px 6px !important;
  line-height: 1.3;
  white-space: nowrap;
}

.grade-criterio__prazo {
  display: inline-block;
  font-size: 9.5px;
  padding: 0 3px;
  border-radius: 3px;
  background: #fef3c7;
  color: #92400e;
}

/* Subnota compõe o total da coluna à direita — a borda esquerda marca o começo do
   grupo, para não parecer uma coluna independente. */
.grade-criterio__coluna--subnota {
  border-left: 2px solid var(--color-accent-soft);
  font-weight: 400;
}

/* Marca de trilha na célula de nota: quantas vezes aquele valor já foi alterado.
   Fica no canto do td, sobre o campo, porque a informação é da célula e não do
   input — nota alterada e depois com o bimestre fechado precisa continuar
   mostrando que tem trilha. */
.grade-criterio td {
  position: relative;
}

.grade-criterio__trilha {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 13px;
  height: 13px;
  padding: 0 2px;
  border: none;
  border-radius: 3px;
  background: #fbbf24;
  color: #78350f;
  font-size: 9px;
  font-weight: 700;
  line-height: 13px;
  cursor: pointer;
}

.grade-criterio__trilha:hover {
  background: #f59e0b;
}

/* Painel da trilha, aberto embaixo da linha do aluno. */
.trilha {
  padding: 10px 12px;
  font-size: 12.5px;
  background: var(--color-bg);
  border-left: 3px solid #fbbf24;
}

.trilha > strong {
  display: block;
  margin-bottom: 2px;
}

/* Exportar na barra da grade. Na origem exportar é recurso de toda grade, não
   privilégio dos relatórios — então o botão vive no componente, não na tela. */
.crud-grid__acoes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.exportar {
  position: relative;
  display: inline-flex;
}

.exportar__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(15, 17, 21, 0.12);
  white-space: nowrap;
}

.exportar__menu .btn {
  justify-content: flex-start;
  text-align: left;
}

/* Turmas usa o grid e os utilitários do Bootstrap 5.3, com acabamento local
   para manter a identidade visual do sistema. O escopo evita alterar outros
   módulos que ainda usam os componentes próprios. */
.turmas-page {
  --turmas-border: #e3e6ed;
  --turmas-muted-bg: #f8f9fc;
}

.turmas-page .page-header__title {
  font-size: 24px;
  letter-spacing: -0.02em;
}

.turmas-page .card {
  overflow: hidden;
  border-radius: 14px;
}

.turmas-page #linkNovaTurma[aria-disabled="true"] {
  border-color: #d9d8f6;
  background: #ececf8;
  color: #77758e;
  cursor: not-allowed;
  filter: none;
}

.turmas-filter-card {
  border-top: 3px solid var(--color-accent) !important;
}

.turmas-card-title {
  color: var(--color-text);
  font-size: 15px;
  font-weight: 700;
}

.turmas-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 9px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.turmas-card-icon svg {
  width: 18px;
  height: 18px;
}

.turmas-page .field label {
  margin-bottom: 2px;
  color: #343946;
  font-weight: 650;
}

.turmas-page .form-control,
.turmas-page .form-select {
  width: 100%;
  min-height: 41px;
  border-color: #dfe2e9;
  border-radius: 8px;
  background-color: #fff;
  color: var(--color-text);
  box-shadow: none;
}

.turmas-page .form-control:hover:not(:disabled),
.turmas-page .form-select:hover:not(:disabled) {
  border-color: #c8ccd6;
}

.turmas-page .form-control:focus,
.turmas-page .form-select:focus {
  border-color: var(--color-accent);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.turmas-page .form-control:disabled,
.turmas-page .form-select:disabled {
  background-color: #f1f3f6;
  color: #737986;
  opacity: 1;
}

.turmas-help {
  padding: 10px 12px;
  border: 1px solid #dcdffc;
  border-radius: 8px;
  background: #f7f7ff;
  color: #555d6d;
  font-size: 12.5px;
  line-height: 1.45;
}

.turmas-results-card .card-header,
.turmas-results-card .card-footer {
  border-color: var(--turmas-border);
}

.turmas-page .data-table.table {
  font-size: 13px;
}

.turmas-page .data-table.table > :not(caption) > * > * {
  padding: 13px 16px;
  border-bottom-color: #eceef2;
  background-color: transparent;
}

.turmas-page .data-table.table thead th {
  color: #737a89;
  font-size: 10.5px;
  font-weight: 750;
}

.turmas-page .data-table.table tbody tr:last-child td {
  border-bottom: 0;
}

.turmas-page .data-table.table-hover > tbody > tr:hover > * {
  background-color: #fafaff;
}

.turmas-code {
  display: inline-flex;
  padding: 4px 8px;
  border: 1px solid #dddffc;
  border-radius: 6px;
  background: var(--color-accent-soft);
  color: #4338ca;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.turmas-empty {
  min-height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fff, #fbfbfd);
}

.turmas-form-card {
  padding: 24px;
}

.turma-form-section {
  border-color: var(--turmas-border) !important;
  background: var(--turmas-muted-bg);
}

.turma-form-section__title {
  position: relative;
  padding-left: 12px;
  color: #4b5260;
}

.turma-form-section__title::before {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--color-accent);
}

.turmas-wizard {
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--turmas-border);
  border-radius: 10px;
  background: var(--turmas-muted-bg);
}

.turmas-wizard .wizard-steps__step {
  flex: 1 0 170px;
  margin: 0;
  padding: 9px 12px;
  border: 0;
  border-radius: 7px;
  text-align: center;
}

.turmas-wizard .wizard-steps__step.is-active {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.turmas-wizard .wizard-steps__step:not(.is-active):not(.is-disabled):hover {
  background: #fff;
}

@media (max-width: 700px) {
  .turmas-form-card {
    padding: 14px;
  }

  .turma-form-section {
    padding: 16px !important;
  }

  .turmas-page .card-body {
    padding: 16px !important;
  }

  .turmas-results-card .card-body {
    padding: 0 !important;
  }
}

/* Cadastro de Cursos segue a mesma linguagem dos formulários de Turmas. */
.cursos-page {
  --curso-border: #e3e6ed;
  --curso-muted-bg: #f8f9fc;
}

.cursos-page .page-header__title {
  font-size: 24px;
  letter-spacing: -0.02em;
}

.cursos-page .card {
  overflow: hidden;
  border-radius: 14px;
}

.curso-form-card {
  padding: 24px;
}

.curso-form-section {
  border-color: var(--curso-border) !important;
  background: var(--curso-muted-bg);
}

.curso-form-section__title {
  position: relative;
  padding-left: 12px;
  color: #4b5260;
}

.curso-form-section__title::before {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--color-accent);
}

.curso-form-section__description {
  margin: 0 0 16px;
  color: #757c89;
  font-size: 12.5px;
  line-height: 1.45;
}

.cursos-page .field label {
  margin-bottom: 2px;
  color: #343946;
  font-weight: 650;
}

.cursos-page .form-control,
.cursos-page .form-select {
  min-height: 38px;
  border-color: #dfe3ea;
  border-radius: 8px;
  background-color: #fff;
  color: var(--color-text);
  font-size: 13.5px;
}

.cursos-page textarea.form-control {
  min-height: 88px;
}

.cursos-page .form-control:focus,
.cursos-page .form-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.11);
}

.curso-switch-card {
  min-height: 58px;
  height: 100%;
  padding: 12px 14px;
  border: 1px solid #e0e3e9;
  border-radius: 9px;
  background: #fff;
}

.curso-switch-card .switch-field__label {
  color: #454b58;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 700px) {
  .curso-form-card {
    padding: 14px;
  }

  .curso-form-section {
    padding: 16px !important;
  }
}