/* ==========================================================================
   Gamify · Componentes (prefixo gm-). Só tokens: nenhuma cor ou medida literal.
   As classes .is-hover / .is-active / .is-focus reproduzem os estados interativos
   de forma estática no guia de estilo (/dev/styleguide/).
   ========================================================================== */

/* ---------- Botões ---------- */
.gm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gm-space-2);
  min-height: var(--gm-control-height);
  min-width: var(--gm-target-min);
  padding: 0 var(--gm-space-5);
  border: var(--gm-border-width-strong) solid transparent;
  border-radius: var(--gm-radius-pill);
  font-family: var(--gm-font-text);
  font-size: var(--gm-font-size-base);
  font-weight: var(--gm-font-weight-semibold);
  line-height: var(--gm-leading-tight);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background-color var(--gm-duration-fast) var(--gm-ease-out), box-shadow var(--gm-duration-fast) var(--gm-ease-out), transform var(--gm-duration-instant) var(--gm-ease-out), border-color var(--gm-duration-fast);
  /* Neutraliza o que o CSS legado põe em todo <button> (gradiente, brilho, largura 100%, salto no hover) */
  width: auto;
  margin: 0;
  box-shadow: none;
  transform: none;
  overflow: visible;
  text-transform: none;
  letter-spacing: normal;
}
.gm-btn:hover { text-decoration: none; }
.gm-btn.is-focus { outline: var(--gm-focus-width) solid var(--gm-color-focus); outline-offset: var(--gm-focus-offset); }

.gm-btn--primary {
  background: var(--gm-color-primary);
  color: var(--gm-color-on-primary);
  box-shadow: 0 var(--gm-press-depth) 0 var(--gm-color-primary-press);
}
.gm-btn--primary:hover, .gm-btn--primary.is-hover { background: var(--gm-color-primary-hover); color: var(--gm-color-on-primary); }
.gm-btn--primary:active, .gm-btn--primary.is-active { transform: translateY(var(--gm-press-depth)); box-shadow: 0 0 0 var(--gm-color-primary-press); }

.gm-btn--secondary {
  background: var(--gm-color-surface);
  color: var(--gm-color-primary-text);
  border-color: var(--gm-color-border-strong);
}
.gm-btn--secondary:hover, .gm-btn--secondary.is-hover { background: var(--gm-color-primary-soft); color: var(--gm-color-primary-text); border-color: var(--gm-color-primary); }
.gm-btn--secondary:active, .gm-btn--secondary.is-active { background: var(--gm-color-surface-3); }

.gm-btn--ghost { background: transparent; color: var(--gm-color-primary-text); }
.gm-btn--ghost:hover, .gm-btn--ghost.is-hover { background: var(--gm-color-primary-soft); color: var(--gm-color-primary-text); }
.gm-btn--ghost:active, .gm-btn--ghost.is-active { background: var(--gm-color-surface-3); }

.gm-btn--danger { background: var(--gm-color-danger); color: var(--gm-color-on-danger); }
.gm-btn--danger:hover, .gm-btn--danger.is-hover { background: var(--gm-color-danger-hover); color: var(--gm-color-on-danger); }
.gm-btn--danger:active, .gm-btn--danger.is-active { transform: translateY(var(--gm-press-depth)); }

.gm-btn--icon { padding: 0; width: var(--gm-target-min); min-height: var(--gm-target-min); border-radius: var(--gm-radius-round); }
.gm-btn--icon.gm-btn--secondary { border-color: var(--gm-color-border-strong); }
.gm-btn--sm { min-height: var(--gm-target-compact); padding: 0 var(--gm-space-4); font-size: var(--gm-font-size-sm); }
.gm-btn--block { width: 100%; }

.gm-btn:disabled, .gm-btn[aria-disabled="true"] {
  opacity: var(--gm-disabled-opacity);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* Carregando: o texto continua no DOM para o leitor de tela; o spinner substitui o ícone */
.gm-btn.is-loading, .gm-btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.gm-btn.is-loading .gm-ico, .gm-btn[aria-busy="true"] .gm-ico { display: none; }
.gm-btn.is-success { background: var(--gm-color-success-soft); color: var(--gm-color-success-text); border-color: var(--gm-color-success-text); box-shadow: none; }

/* ---------- Spinner ---------- */
.gm-spinner {
  width: var(--gm-spinner-size);
  height: var(--gm-spinner-size);
  flex: none;
  border-radius: var(--gm-radius-round);
  border: var(--gm-spinner-stroke) solid currentColor;
  border-right-color: transparent;
  animation: gm-spin var(--gm-duration-slow) linear infinite;  /* indica processo em andamento */
}
@keyframes gm-spin { to { transform: rotate(1turn); } }

/* ---------- Links ---------- */
.gm-link {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-1);
  min-height: var(--gm-target-min);
  font-weight: var(--gm-font-weight-semibold);
  color: var(--gm-color-primary-text);
}
.gm-link:hover, .gm-link.is-hover { color: var(--gm-color-primary-hover); text-decoration-thickness: var(--gm-border-width-strong); }
.gm-link.is-focus { outline: var(--gm-focus-width) solid var(--gm-color-focus); outline-offset: var(--gm-focus-offset); }

/* ---------- Campos de formulário (estilizados pela estrutura: funcionam com {{ field }} do Django) ---------- */
.gm-field { display: grid; gap: var(--gm-space-2); margin-bottom: var(--gm-space-5); }
.gm-field__label { font-weight: var(--gm-font-weight-semibold); color: var(--gm-color-text); }
.gm-field__optional { font-weight: var(--gm-font-weight-regular); color: var(--gm-color-text-muted); font-size: var(--gm-font-size-sm); }
.gm-field__control { position: relative; }
.gm-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.gm-field select,
.gm-field textarea {
  width: 100%;
  min-height: var(--gm-control-height);
  padding: var(--gm-space-3) var(--gm-space-4);
  border: var(--gm-border-width-strong) solid var(--gm-color-border-strong);
  border-radius: var(--gm-radius-sm);
  background: var(--gm-color-surface);
  color: var(--gm-color-text);
  font: inherit;
  transition: border-color var(--gm-duration-fast), box-shadow var(--gm-duration-fast);
}
.gm-field select { appearance: none; padding-right: calc(var(--gm-space-4) + var(--gm-icon-md) + var(--gm-space-2)); cursor: pointer; }
.gm-field__caret { position: absolute; right: var(--gm-space-4); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--gm-color-text-muted); }
.gm-field textarea { min-height: var(--gm-textarea-min); resize: vertical; }
.gm-field ::placeholder { color: var(--gm-color-text-muted); opacity: 1; }
.gm-field input:hover, .gm-field select:hover, .gm-field textarea:hover, .gm-field.is-hover input { border-color: var(--gm-color-text); }
.gm-field input:focus-visible, .gm-field select:focus-visible, .gm-field textarea:focus-visible, .gm-field.is-focus input {
  outline: var(--gm-focus-width) solid var(--gm-color-focus);
  outline-offset: var(--gm-border-width);
  border-color: var(--gm-color-focus);
}
.gm-field input:disabled, .gm-field select:disabled, .gm-field textarea:disabled {
  background: var(--gm-color-surface-2);
  opacity: var(--gm-disabled-opacity);
  cursor: not-allowed;
}
.gm-field input[readonly] { background: var(--gm-color-surface-2); }
.gm-field__help { font-size: var(--gm-font-size-sm); color: var(--gm-color-text-muted); margin: 0; }
.gm-field__message {
  display: flex;
  align-items: flex-start;
  gap: var(--gm-space-2);
  font-size: var(--gm-font-size-sm);
  font-weight: var(--gm-font-weight-semibold);
  margin: 0;
}
.gm-field__message .gm-ico { margin-top: var(--gm-space-1); }
.gm-field__error { color: var(--gm-color-danger-text); }
.gm-field__success { color: var(--gm-color-success-text); }
.gm-field--error input:not([type="checkbox"]):not([type="radio"]), .gm-field--error select, .gm-field--error textarea,
.gm-field [aria-invalid="true"] { border-color: var(--gm-color-danger-text); }
.gm-field--success input:not([type="checkbox"]):not([type="radio"]), .gm-field--success select { border-color: var(--gm-color-success-text); }

/* Caixa de seleção, rádio e switch: o rótulo inteiro é o alvo (≥ 44 px de altura) */
.gm-check {
  display: flex;
  align-items: center;
  gap: var(--gm-space-3);
  min-height: var(--gm-target-min);
  cursor: pointer;
}
.gm-check input[type="checkbox"], .gm-check input[type="radio"] {
  appearance: none;
  flex: none;
  width: var(--gm-check-size);
  height: var(--gm-check-size);
  margin: 0;
  display: grid;
  place-content: center;
  border: var(--gm-border-width-strong) solid var(--gm-color-border-strong);
  border-radius: var(--gm-radius-xs);
  background: var(--gm-color-surface);
  cursor: pointer;
  transition: background-color var(--gm-duration-fast), border-color var(--gm-duration-fast);
}
.gm-check input[type="radio"] { border-radius: var(--gm-radius-round); }
.gm-check input::before {
  content: '';
  width: calc(var(--gm-check-size) / 2);
  height: calc(var(--gm-check-size) / 2);
  transform: scale(0);
  transition: transform var(--gm-duration-fast) var(--gm-ease-spring);
  background: var(--gm-color-on-primary);
  clip-path: var(--gm-check-shape);
}
.gm-check input[type="radio"]::before { clip-path: none; border-radius: var(--gm-radius-round); }
.gm-check input:checked { background: var(--gm-color-primary); border-color: var(--gm-color-primary); }
.gm-check input:checked::before { transform: scale(1); }
.gm-check:hover input, .gm-check.is-hover input { border-color: var(--gm-color-text); }
.gm-check input:disabled { opacity: var(--gm-disabled-opacity); cursor: not-allowed; }
.gm-check:has(input:disabled) { cursor: not-allowed; color: var(--gm-color-text-muted); }
.gm-check.is-focus input { outline: var(--gm-focus-width) solid var(--gm-color-focus); outline-offset: var(--gm-focus-offset); }

.gm-switch input[type="checkbox"] {
  width: var(--gm-switch-width);
  height: var(--gm-switch-height);
  border-radius: var(--gm-radius-pill);
  background: var(--gm-color-border-strong);
  border-color: var(--gm-color-border-strong);
  place-content: center start;
  padding: 0 var(--gm-space-1);
}
.gm-switch input[type="checkbox"]::before {
  width: var(--gm-switch-knob);
  height: var(--gm-switch-knob);
  border-radius: var(--gm-radius-round);
  clip-path: none;
  transform: none;
  background: var(--gm-color-surface);
  transition: transform var(--gm-duration-fast) var(--gm-ease-out);
}
.gm-switch input[type="checkbox"]:checked::before { transform: translateX(calc(var(--gm-switch-width) - var(--gm-switch-knob) - 2 * var(--gm-space-1) - 2 * var(--gm-border-width-strong))); }
.gm-switch__state { font-size: var(--gm-font-size-sm); color: var(--gm-color-text-muted); }

/* Resumo de erros do formulário */
.gm-form-errors {
  border: var(--gm-border-width-strong) solid var(--gm-color-danger-text);
  border-radius: var(--gm-radius-sm);
  background: var(--gm-color-danger-soft);
  color: var(--gm-color-danger-text);
  padding: var(--gm-space-4);
  margin-bottom: var(--gm-space-5);
}
.gm-form-errors__title { display: flex; gap: var(--gm-space-2); align-items: center; font-weight: var(--gm-font-weight-bold); margin-bottom: var(--gm-space-2); }
.gm-form-errors ul { margin: 0; padding-left: var(--gm-space-5); }
.gm-form-errors a { color: var(--gm-color-danger-text); }

/* ---------- Cards ---------- */
.gm-card {
  background: var(--gm-color-surface);
  border: var(--gm-border-width) solid var(--gm-color-border);
  border-radius: var(--gm-radius-md);
  padding: var(--gm-space-5);
  box-shadow: var(--gm-shadow-1);
}
.gm-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--gm-space-3); margin-bottom: var(--gm-space-4); }
.gm-card__title { font-family: var(--gm-font-display); font-weight: var(--gm-font-weight-black); font-size: var(--gm-font-size-md); line-height: var(--gm-leading-snug); margin: 0; }
.gm-card__footer { display: flex; flex-wrap: wrap; gap: var(--gm-space-3); margin-top: var(--gm-space-5); }
.gm-card--accent { border: var(--gm-border-width-strong) solid var(--gm-color-primary); }
.gm-card--interactive { transition: box-shadow var(--gm-duration-fast), border-color var(--gm-duration-fast); }
.gm-card--interactive:hover, .gm-card--interactive.is-hover { box-shadow: var(--gm-shadow-3); border-color: var(--gm-color-border-strong); }
.gm-card--interactive:focus-within { border-color: var(--gm-color-focus); }
.gm-card.is-selected { border: var(--gm-border-width-strong) solid var(--gm-color-primary); background: var(--gm-color-primary-soft); }
.gm-card--inverse { background: var(--gm-color-inverse); color: var(--gm-color-on-inverse); border-color: var(--gm-color-inverse); }
.gm-card--inverse :focus-visible { outline-color: var(--gm-color-focus-inverse); }

/* ---------- Chips (status, rótulos) ---------- */
.gm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-1);
  padding: var(--gm-space-1) var(--gm-space-3);
  border-radius: var(--gm-radius-pill);
  font-size: var(--gm-font-size-sm);
  font-weight: var(--gm-font-weight-semibold);
  line-height: var(--gm-leading-snug);
  white-space: nowrap;
  background: var(--gm-color-surface-2);
  color: var(--gm-color-text);
}
.gm-chip .gm-ico { width: var(--gm-icon-sm); height: var(--gm-icon-sm); }
.gm-chip--primary { background: var(--gm-color-primary-soft); color: var(--gm-color-primary-text); }
.gm-chip--success { background: var(--gm-color-success-soft); color: var(--gm-color-success-text); }
.gm-chip--warning { background: var(--gm-color-warning-soft); color: var(--gm-color-warning-text); }
.gm-chip--danger { background: var(--gm-color-danger-soft); color: var(--gm-color-danger-text); }
.gm-chip--info { background: var(--gm-color-info-soft); color: var(--gm-color-info-text); }
.gm-chip--xp { background: var(--gm-color-xp-soft); color: var(--gm-color-xp-text); }

/* ---------- Alerta em linha (mensagem persistente na página) ---------- */
.gm-alert {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gm-space-3);
  padding: var(--gm-space-4);
  border-radius: var(--gm-radius-sm);
  border-left: var(--gm-border-width-heavy) solid currentColor;
}
.gm-alert__title { font-weight: var(--gm-font-weight-bold); margin: 0; }
.gm-alert p { margin: 0; color: var(--gm-color-text); }
.gm-alert--info { background: var(--gm-color-info-soft); color: var(--gm-color-info-text); }
.gm-alert--success { background: var(--gm-color-success-soft); color: var(--gm-color-success-text); }
.gm-alert--warning { background: var(--gm-color-warning-soft); color: var(--gm-color-warning-text); }
.gm-alert--error { background: var(--gm-color-danger-soft); color: var(--gm-color-danger-text); }

/* ---------- Navegação: topo ---------- */
.gm-topbar {
  position: sticky;
  top: 0;
  z-index: var(--gm-z-sticky);
  background: var(--gm-color-bg); /* navegadores sem color-mix() */
  background: color-mix(in srgb, var(--gm-color-bg) var(--gm-glass), transparent);
  backdrop-filter: blur(var(--gm-space-2));
  border-bottom: var(--gm-border-width) solid var(--gm-color-border);
}
.gm-topbar__inner { display: flex; align-items: center; gap: var(--gm-space-4); min-height: var(--gm-header-height); }
.gm-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-2);
  min-height: var(--gm-target-min);
  color: var(--gm-color-text);
  text-decoration: none;
  font-family: var(--gm-font-display);
  font-weight: var(--gm-font-weight-black);
  font-size: var(--gm-font-size-lg);
  line-height: var(--gm-leading-tight);
}
.gm-brand:hover { color: var(--gm-color-text); text-decoration: none; }
.gm-brand img, .gm-brand svg { width: var(--gm-target-min); height: var(--gm-target-min); }
.gm-topbar__nav { display: flex; gap: var(--gm-space-2); margin-left: auto; }
.gm-navlink {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-2);
  min-height: var(--gm-target-min);
  padding: 0 var(--gm-space-3);
  border-radius: var(--gm-radius-pill);
  color: var(--gm-color-text);
  font-weight: var(--gm-font-weight-medium);
  text-decoration: none;
}
.gm-navlink:hover, .gm-navlink.is-hover { background: var(--gm-color-surface-2); color: var(--gm-color-text); text-decoration: none; }
.gm-navlink { position: relative; }
.gm-navlink[aria-current="page"] { background: var(--gm-color-primary-soft); color: var(--gm-color-primary-text); font-weight: var(--gm-font-weight-semibold); }
.gm-navlink[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: var(--gm-space-3);
  right: var(--gm-space-3);
  bottom: var(--gm-space-1);
  height: var(--gm-border-width-heavy);
  border-radius: var(--gm-radius-pill);
  background: var(--gm-color-primary);
}
.gm-topbar__menu { display: none; }
.gm-topbar__actions { display: flex; align-items: center; gap: var(--gm-space-2); }
@media (max-width: 767.98px) {
  .gm-topbar__nav { display: none; }
  .gm-topbar__menu { display: inline-flex; }
  .gm-topbar__actions { margin-left: auto; }
  .gm-topbar__nav.is-open {
    display: grid;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--gm-space-2) var(--gm-gutter);
    background: var(--gm-color-surface);
    border-bottom: var(--gm-border-width) solid var(--gm-color-border);
    box-shadow: var(--gm-shadow-3);
  }
}

/* ---------- Navegação: barra lateral do professor ---------- */
.gm-sidebar {
  width: var(--gm-sidebar-width);
  background: var(--gm-color-surface);
  border-right: var(--gm-border-width) solid var(--gm-color-border);
  padding: var(--gm-space-4) var(--gm-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--gm-space-1);
  transition: width var(--gm-duration-base) var(--gm-ease-in-out);
}
.gm-sidebar__section { margin: var(--gm-space-4) 0 var(--gm-space-1) var(--gm-space-3); }
.gm-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--gm-space-3);
  min-height: var(--gm-target-min);
  padding: 0 var(--gm-space-3);
  border-radius: var(--gm-radius-sm);
  color: var(--gm-color-text);
  text-decoration: none;
  font-weight: var(--gm-font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
}
.gm-sidebar__link:hover, .gm-sidebar__link.is-hover { background: var(--gm-color-surface-2); color: var(--gm-color-text); text-decoration: none; }
.gm-sidebar__link[aria-current="page"] {
  background: var(--gm-color-primary-soft);
  color: var(--gm-color-primary-text);
  font-weight: var(--gm-font-weight-semibold);
  box-shadow: inset var(--gm-border-width-heavy) 0 0 var(--gm-color-primary);
}
.gm-sidebar__toggle { margin-top: auto; }
.gm-sidebar.is-collapsed { width: var(--gm-sidebar-collapsed); }
.gm-sidebar.is-collapsed .gm-sidebar__label, .gm-sidebar.is-collapsed .gm-sidebar__section { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.gm-sidebar.is-collapsed .gm-sidebar__link { justify-content: center; padding: 0; }

/* ---------- Navegação: barra inferior do aluno (celular, ≤ 5 itens) ---------- */
.gm-bottomnav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  min-height: var(--gm-bottom-nav-height);
  background: var(--gm-color-surface);
  border-top: var(--gm-border-width) solid var(--gm-color-border);
  box-shadow: var(--gm-shadow-3);
  padding-bottom: env(safe-area-inset-bottom);
}
.gm-bottomnav__link {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--gm-space-1);
  min-height: var(--gm-bottom-nav-height);
  font-size: var(--gm-font-size-sm);
  font-weight: var(--gm-font-weight-medium);
  color: var(--gm-color-text-muted);
  text-decoration: none;
}
.gm-bottomnav__link:hover { color: var(--gm-color-text); text-decoration: none; }
.gm-bottomnav__link .gm-ico { width: var(--gm-icon-lg); height: var(--gm-icon-lg); }
.gm-bottomnav__link[aria-current="page"] { color: var(--gm-color-primary-text); font-weight: var(--gm-font-weight-bold); }
.gm-bottomnav__link[aria-current="page"] .gm-ico { color: var(--gm-color-primary); }
.gm-bottomnav__link[aria-current="page"]::after {
  content: '';
  width: var(--gm-space-5);
  height: var(--gm-border-width-heavy);
  border-radius: var(--gm-radius-pill);
  background: var(--gm-color-primary);
}

/* ---------- Abas ---------- */
.gm-tabs__list { display: flex; gap: var(--gm-space-1); border-bottom: var(--gm-border-width) solid var(--gm-color-border); overflow-x: auto; }
.gm-tab {
  min-height: var(--gm-target-min);
  padding: 0 var(--gm-space-4);
  border: 0;
  border-bottom: var(--gm-border-width-heavy) solid transparent;
  background: transparent;
  color: var(--gm-color-text-muted);
  font: inherit;
  font-weight: var(--gm-font-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
}
.gm-tab:hover, .gm-tab.is-hover { color: var(--gm-color-text); }
.gm-tab[aria-selected="true"] { color: var(--gm-color-primary-text); border-bottom-color: var(--gm-color-primary); }
.gm-tab:disabled { opacity: var(--gm-disabled-opacity); cursor: not-allowed; }
.gm-tabs__panel { padding: var(--gm-space-5) 0; }

/* ---------- Diálogo (elemento <dialog> nativo: foco preso, Esc fecha) ---------- */
.gm-dialog {
  width: min(var(--gm-dialog-max), 100% - 2 * var(--gm-gutter));
  max-height: calc(100% - 2 * var(--gm-space-6));
  padding: 0;
  border: var(--gm-border-width) solid var(--gm-color-border);
  border-radius: var(--gm-radius-lg);
  background: var(--gm-color-surface);
  color: var(--gm-color-text);
  box-shadow: var(--gm-shadow-4);
}
.gm-dialog::backdrop { background: color-mix(in srgb, var(--gm-color-overlay) var(--gm-overlay-opacity), transparent); }
.gm-dialog[open] { display: flex; flex-direction: column; }
.gm-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: var(--gm-space-3); padding: var(--gm-space-4) var(--gm-space-5); border-bottom: var(--gm-border-width) solid var(--gm-color-border); }
.gm-dialog__title { font-family: var(--gm-font-display); font-weight: var(--gm-font-weight-black); font-size: var(--gm-font-size-md); margin: 0; }
.gm-dialog__body { padding: var(--gm-space-5); overflow-y: auto; }
.gm-dialog__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--gm-space-3); padding: var(--gm-space-4) var(--gm-space-5); border-top: var(--gm-border-width) solid var(--gm-color-border); }
.gm-dialog--largo { width: min(var(--gm-dialog-max-lg), 100% - 2 * var(--gm-gutter)); }
.gm-dialog--static { position: static; display: flex; flex-direction: column; margin: 0; } /* exemplo aberto no guia */

/* ---------- Avisos (toasts) ---------- */
.gm-toasts {
  position: fixed;
  z-index: var(--gm-z-toast);
  right: var(--gm-space-4);
  bottom: calc(var(--gm-bottomnav-offset) + var(--gm-space-4)); /* acima da barra inferior do aluno */
  display: grid;
  gap: var(--gm-space-3);
  width: min(var(--gm-toast-max), 100% - 2 * var(--gm-space-4));
  pointer-events: none;
}
.gm-toasts--static { position: static; width: 100%; max-width: var(--gm-toast-max); }
.gm-toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--gm-space-3);
  padding: var(--gm-space-3) var(--gm-space-3) var(--gm-space-3) var(--gm-space-4);
  border-radius: var(--gm-radius-sm);
  background: var(--gm-color-surface);
  color: var(--gm-color-text);
  border: var(--gm-border-width) solid var(--gm-color-border);
  border-left: var(--gm-border-width-heavy) solid currentColor;
  box-shadow: var(--gm-shadow-3);
}
.gm-toast > .gm-ico { margin-top: var(--gm-space-1); }
.gm-toast__text { margin: var(--gm-space-1) 0 0; color: var(--gm-color-text); }
.gm-toast__close { margin: calc(-1 * var(--gm-space-1)); }
.gm-toast__corpo { display: grid; justify-items: start; gap: var(--gm-space-3); min-width: 0; } /* texto + ação ("Desfazer") */
.gm-toast--success { color: var(--gm-color-success-text); }
.gm-toast--info { color: var(--gm-color-info-text); }
.gm-toast--warning { color: var(--gm-color-warning-text); }
.gm-toast--error { color: var(--gm-color-danger-text); }
.gm-toast.is-leaving { opacity: 0; transition: opacity var(--gm-duration-base) var(--gm-ease-out); }

/* Celebração ao subir de nível: rara, curta (≤ 1,5 s), pode ser fechada; some com reduced-motion */
.gm-celebrate {
  background: var(--gm-color-inverse);
  color: var(--gm-color-on-inverse);
  border-color: var(--gm-color-inverse);
  border-left-color: var(--gm-color-xp);
}
.gm-celebrate :focus-visible { outline-color: var(--gm-color-focus-inverse); }
.gm-celebrate .gm-toast__text { color: var(--gm-color-on-inverse-muted); }
/* Botão de fechar sobre a superfície escura: o ícone segue a cor clara (contraste ≥ 3:1, WCAG 1.4.11) */
.gm-celebrate .gm-toast__close { color: var(--gm-color-on-inverse); }
.gm-celebrate .gm-toast__close:hover, .gm-celebrate .gm-toast__close:active { background: color-mix(in srgb, var(--gm-color-on-inverse) var(--gm-seal-ring), transparent); color: var(--gm-color-on-inverse); }
.gm-celebrate__title { font-family: var(--gm-font-display); font-weight: var(--gm-font-weight-black); font-size: var(--gm-font-size-md); line-height: var(--gm-leading-snug); margin: 0; }
.gm-celebrate.is-entering { animation: gm-pop var(--gm-duration-celebrate) var(--gm-ease-spring) 1; }
@keyframes gm-pop {
  0% { transform: translateY(var(--gm-space-4)) scale(var(--gm-pop-scale)); opacity: 0; }
  30% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* ---------- Medalhas (conquistada, em progresso, bloqueada) ---------- */
.gm-medal {
  display: grid;
  grid-template-columns: var(--gm-seal-size) 1fr;
  gap: var(--gm-space-3);
  align-items: center;
  padding: var(--gm-space-3);
  border-radius: var(--gm-radius-md);
  background: var(--gm-color-surface-2);
}
.gm-seal {
  width: var(--gm-seal-size);
  height: var(--gm-seal-size);
  border-radius: var(--gm-radius-round);
  display: grid;
  place-items: center;
  background: var(--gm-color-xp);
  color: var(--gm-color-on-xp);
  box-shadow: inset 0 0 0 var(--gm-border-width-heavy) color-mix(in srgb, var(--gm-color-on-xp) var(--gm-seal-ring), transparent);
}
.gm-seal .gm-ico { width: var(--gm-icon-xl); height: var(--gm-icon-xl); }
.gm-medal--progress .gm-seal { background: var(--gm-color-primary-soft); color: var(--gm-color-primary-text); box-shadow: inset 0 0 0 var(--gm-border-width-heavy) var(--gm-color-primary); }
.gm-medal--locked .gm-seal { background: transparent; color: var(--gm-color-text-muted); box-shadow: none; border: var(--gm-border-width-strong) dashed var(--gm-color-border-strong); }
.gm-medal > div { display: grid; gap: var(--gm-space-1); min-width: 0; }
.gm-medal .gm-progress { margin-top: var(--gm-space-2); }
.gm-medal__title { font-weight: var(--gm-font-weight-semibold); line-height: var(--gm-leading-snug); margin: 0; }
.gm-medal__meta { font-size: var(--gm-font-size-sm); color: var(--gm-color-text-muted); line-height: var(--gm-leading-snug); margin: 0; }

/* ---------- Barra de XP e barra de progresso ---------- */
.gm-progress { position: relative; height: var(--gm-bar-height); border-radius: var(--gm-radius-pill); background: var(--gm-color-track); box-shadow: 0 0 0 var(--gm-border-width) var(--gm-color-border-strong); }
.gm-progress__fill {
  position: absolute;
  top: var(--gm-bar-inset);
  bottom: var(--gm-bar-inset);
  left: var(--gm-bar-inset);
  width: calc(var(--gm-value, 0) * (100% - 2 * var(--gm-bar-inset)) / 100);
  border-radius: var(--gm-radius-pill);
  background-color: var(--gm-color-bar-fill);
  background-image: repeating-linear-gradient(90deg, transparent 0 var(--gm-segment), color-mix(in srgb, var(--gm-color-on-xp) var(--gm-segment-ink), transparent) var(--gm-segment) calc(var(--gm-segment) + var(--gm-segment-gap)));
  transition: width var(--gm-duration-slow) var(--gm-ease-out);
}
.gm-progress__goal {
  position: absolute;
  right: calc(-1 * var(--gm-space-2));
  top: 50%;
  transform: translateY(-50%);
  width: var(--gm-flag-size);
  height: var(--gm-flag-size);
  border-radius: var(--gm-radius-round);
  display: grid;
  place-items: center;
  background: var(--gm-color-surface);
  border: var(--gm-border-width-strong) solid var(--gm-color-track);
  color: var(--gm-color-xp-text);
}
.gm-progress__caption { display: flex; justify-content: space-between; gap: var(--gm-space-3); margin-top: var(--gm-space-3); font-size: var(--gm-font-size-sm); color: var(--gm-color-text-muted); }
.gm-progress__caption strong { color: var(--gm-color-text); }
.gm-progress--sm { height: var(--gm-bar-height-sm); background: var(--gm-color-surface-2); outline: var(--gm-border-width) solid var(--gm-color-border-strong); outline-offset: calc(-1 * var(--gm-border-width)); }
.gm-progress--sm .gm-progress__fill { top: 0; bottom: 0; left: 0; width: calc(var(--gm-value, 0) * var(--gm-percent)); background-image: none; background-color: var(--gm-color-primary); }
.gm-progress--xp-sm { height: var(--gm-bar-height-sm); }
.gm-progress--xp-sm .gm-progress__fill { top: 0; bottom: 0; left: 0; width: calc(var(--gm-value, 0) * var(--gm-percent)); background-image: none; }
.gm-progress.is-complete .gm-progress__goal { background: var(--gm-color-xp); color: var(--gm-color-on-xp); border-color: var(--gm-color-xp); }

/* Anel de XP */
.gm-ring { position: relative; width: var(--gm-ring-size); height: var(--gm-ring-size); display: grid; place-items: center; text-align: center; }
.gm-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--gm-radius-round);
  background: conic-gradient(var(--gm-color-bar-fill) calc(var(--gm-value, 0) * var(--gm-percent)), var(--gm-color-track) 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--gm-ring-stroke)), var(--gm-color-text) calc(100% - var(--gm-ring-stroke)));
}
.gm-ring::after { content: ''; position: absolute; inset: 0; border-radius: var(--gm-radius-round); box-shadow: 0 0 0 var(--gm-border-width) var(--gm-color-border-strong), inset 0 0 0 var(--gm-border-width) var(--gm-color-border-strong); mask: radial-gradient(farthest-side, transparent calc(100% - var(--gm-ring-stroke) - var(--gm-border-width)), var(--gm-color-text) calc(100% - var(--gm-ring-stroke) - var(--gm-border-width))); }
.gm-ring-block { display: grid; justify-items: start; gap: var(--gm-space-3); }
.gm-ring__caption { font-size: var(--gm-font-size-sm); color: var(--gm-color-text-muted); margin: 0; }
.gm-ring__caption strong { color: var(--gm-color-text); }
.gm-ring__value { font-family: var(--gm-font-display); font-weight: var(--gm-font-weight-black); font-size: var(--gm-font-size-2xl); line-height: var(--gm-leading-tight); }
.gm-ring__label { display: block; font-size: var(--gm-font-size-sm); color: var(--gm-color-text-muted); }

/* ---------- Nível ---------- */
.gm-level-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-1);
  padding: var(--gm-space-1) var(--gm-space-3);
  border-radius: var(--gm-radius-pill);
  background: var(--gm-color-xp);
  color: var(--gm-color-on-xp);
  font-family: var(--gm-font-display);
  font-weight: var(--gm-font-weight-black);
  white-space: nowrap;
}
.gm-level-chip.is-max { background: var(--gm-color-inverse); color: var(--gm-color-xp); }
.gm-level {
  display: flex;
  align-items: center;
  gap: var(--gm-space-4);
}
.gm-level__badge {
  width: var(--gm-level-size);
  height: var(--gm-level-size);
  flex: none;
  border-radius: var(--gm-radius-lg);
  display: grid;
  place-items: center;
  background: var(--gm-color-primary);
  color: var(--gm-color-on-primary);
  font-family: var(--gm-font-display);
  font-weight: var(--gm-font-weight-black);
  font-size: var(--gm-font-size-2xl);
  box-shadow: 0 var(--gm-press-depth) 0 var(--gm-color-primary-press);
}
.gm-level-block__bar { margin-top: var(--gm-space-5); }
.gm-level-block__unlock {
  display: flex;
  gap: var(--gm-space-2);
  align-items: center;
  margin: var(--gm-space-5) 0 0;
  padding-top: var(--gm-space-4);
  border-top: var(--gm-border-width) dashed var(--gm-color-border-strong);
  font-size: var(--gm-font-size-sm);
  color: var(--gm-color-text-muted);
}
.gm-level-block__unlock .gm-ico { color: var(--gm-color-xp-text); }
.gm-level__label { font-size: var(--gm-font-size-sm); color: var(--gm-color-text-muted); margin: 0; }
.gm-level__value { font-family: var(--gm-font-display); font-weight: var(--gm-font-weight-black); font-size: var(--gm-font-size-xl); line-height: var(--gm-leading-tight); margin: 0; }

/* ---------- Avatar ---------- */
.gm-avatar {
  width: var(--gm-avatar-md);
  height: var(--gm-avatar-md);
  flex: none;
  border-radius: var(--gm-radius-round);
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  background: var(--gm-color-primary-soft);
  color: var(--gm-color-primary-text);
  font-weight: var(--gm-font-weight-semibold);
  font-size: var(--gm-font-size-sm);
  border: var(--gm-border-width) solid var(--gm-color-border-strong);
}
.gm-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Ícone oficial do Google Classroom (cores originais; sempre à esquerda do texto) ---------- */
.gm-classroom { width: var(--gm-classroom-sm); height: var(--gm-classroom-sm); flex: none; display: inline-block; vertical-align: middle; }
.gm-classroom--md { width: var(--gm-classroom-md); height: var(--gm-classroom-md); }
a:hover > .gm-classroom, button:hover > .gm-classroom { filter: brightness(var(--gm-classroom-hover)); }
.gm-btn--classroom { padding-left: var(--gm-space-2); }
/* Preferências de avatar da própria pessoa (Fase 5, só neste navegador): só as iniciais e a cor das iniciais */
:root[data-gm-avatar="iniciais"] .gm-avatar[data-gm-eu][data-gm-foto] img { display: none; }
:root[data-gm-avatar="iniciais"] .gm-avatar[data-gm-eu][data-gm-foto]::after { content: attr(data-initials); }
:root[data-gm-avatar-cor="xp"] .gm-avatar[data-gm-eu] { background: var(--gm-color-xp-soft); color: var(--gm-color-xp-text); }
:root[data-gm-avatar-cor="azul"] .gm-avatar[data-gm-eu] { background: var(--gm-color-secondary-soft); color: var(--gm-color-secondary-text); }
:root[data-gm-avatar-cor="verde"] .gm-avatar[data-gm-eu] { background: var(--gm-color-success-soft); color: var(--gm-color-success-text); }
.gm-avatar--sm { width: var(--gm-avatar-sm); height: var(--gm-avatar-sm); }
.gm-avatar--lg { width: var(--gm-avatar-lg); height: var(--gm-avatar-lg); font-size: var(--gm-font-size-md); }

/* ---------- Cartão de atividade ---------- */
.gm-activity {
  display: grid;
  gap: var(--gm-space-2);
  padding: var(--gm-space-5);
  border-radius: var(--gm-radius-md);
  background: var(--gm-color-surface);
  border: var(--gm-border-width) solid var(--gm-color-border);
  box-shadow: var(--gm-shadow-1);
  position: relative;
}
.gm-activity--next { border: var(--gm-border-width-strong) solid var(--gm-color-primary); }
.gm-activity__title { font-family: var(--gm-font-display); font-weight: var(--gm-font-weight-black); font-size: var(--gm-font-size-lg); line-height: var(--gm-leading-snug); margin: 0; }
.gm-activity__meta { color: var(--gm-color-text-muted); margin: 0; }
.gm-activity__tip { display: flex; gap: var(--gm-space-2); align-items: flex-start; padding: var(--gm-space-3); border-radius: var(--gm-radius-sm); background: var(--gm-color-xp-soft); color: var(--gm-color-xp-text); font-weight: var(--gm-font-weight-medium); margin: 0; }
.gm-activity__actions { display: flex; flex-wrap: wrap; gap: var(--gm-space-3); margin-top: var(--gm-space-3); }
.gm-activity__flag {
  position: absolute;
  right: var(--gm-space-5);
  top: calc(-1 * var(--gm-space-4));
  width: var(--gm-target-min);
  height: var(--gm-target-min);
  border-radius: var(--gm-radius-round);
  display: grid;
  place-items: center;
  background: var(--gm-color-xp);
  color: var(--gm-color-on-xp);
  box-shadow: 0 0 0 var(--gm-space-2) var(--gm-color-surface);
}

/* ---------- Trilha (elemento de assinatura) ---------- */
.gm-trail { list-style: none; margin: 0; padding: 0; }
.gm-trail__stop {
  position: relative;
  display: grid;
  grid-template-columns: var(--gm-node-size) 1fr;
  column-gap: var(--gm-space-3);
  padding-bottom: var(--gm-space-4);
}
.gm-trail__stop:last-child { padding-bottom: 0; }
.gm-trail__stop::before {
  content: '';
  position: absolute;
  left: calc((var(--gm-node-size) - var(--gm-trail-line)) / 2);
  top: var(--gm-node-size);
  bottom: 0;
  width: var(--gm-trail-line);
  border-radius: var(--gm-radius-pill);
  background: var(--gm-color-primary);
}
.gm-trail__stop:last-child::before { display: none; }
.gm-trail__stop--sent::before, .gm-trail__stop--late::before, .gm-trail__stop--next::before, .gm-trail__stop--future::before {
  background: radial-gradient(circle, var(--gm-color-border-strong) var(--gm-dot-size), transparent calc(var(--gm-dot-size) + var(--gm-border-width))) center top / var(--gm-trail-line) var(--gm-space-3) repeat-y;
}
.gm-trail__node {
  width: var(--gm-node-size);
  height: var(--gm-node-size);
  border-radius: var(--gm-radius-round);
  display: grid;
  place-items: center;
  position: relative;
  z-index: var(--gm-z-raised);
  background: var(--gm-color-primary);
  color: var(--gm-color-on-primary);
}
.gm-trail__stop--sent .gm-trail__node { background: var(--gm-color-surface); color: var(--gm-color-primary-text); border: var(--gm-border-width-heavy) solid var(--gm-color-primary); }
.gm-trail__stop--late .gm-trail__node { background: var(--gm-color-surface); color: var(--gm-color-danger-text); border: var(--gm-border-width-heavy) solid var(--gm-color-danger-text); }
.gm-trail__stop--next .gm-trail__node { background: var(--gm-color-xp); color: var(--gm-color-on-xp); box-shadow: 0 0 0 var(--gm-space-2) var(--gm-color-xp-soft); }
.gm-trail__stop--future .gm-trail__node { background: var(--gm-color-surface); color: var(--gm-color-text-muted); border: var(--gm-border-width-strong) dashed var(--gm-color-border-strong); }
.gm-trail__title { font-weight: var(--gm-font-weight-semibold); align-self: center; margin: 0; }
.gm-trail__stop--next .gm-trail__title { font-family: var(--gm-font-display); font-weight: var(--gm-font-weight-black); font-size: var(--gm-font-size-md); }
.gm-trail__meta { grid-column: 2; font-size: var(--gm-font-size-sm); color: var(--gm-color-text-muted); margin: 0; }

/* ---------- Ranking relativo ---------- */
.gm-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gm-space-2); }
.gm-rank__row {
  display: grid;
  grid-template-columns: var(--gm-target-min) var(--gm-avatar-md) 1fr auto;
  align-items: center;
  gap: var(--gm-space-3);
  padding: var(--gm-space-3);
  border-radius: var(--gm-radius-sm);
  background: var(--gm-color-surface-2);
}
.gm-rank__row.is-me { background: var(--gm-color-primary-soft); outline: var(--gm-border-width-strong) solid var(--gm-color-primary); outline-offset: calc(-1 * var(--gm-border-width-strong)); font-weight: var(--gm-font-weight-semibold); }
.gm-rank__pos { font-family: var(--gm-font-display); font-weight: var(--gm-font-weight-black); font-size: var(--gm-font-size-md); text-align: center; }
.gm-rank__pts { font-family: var(--gm-font-display); font-weight: var(--gm-font-weight-bold); font-variant-numeric: tabular-nums; }
.gm-rank__nome { min-width: 0; overflow-wrap: anywhere; }
/* Metade de baixo da turma: sem a coluna de posição (D59) */
.gm-rank--sem-posicao .gm-rank__row { grid-template-columns: var(--gm-avatar-md) minmax(0, 1fr) auto; }
.gm-rank__note { display: flex; gap: var(--gm-space-2); margin: var(--gm-space-3) 0 0; font-size: var(--gm-font-size-sm); color: var(--gm-color-text-muted); }

/* ---------- Esqueleto (carregando) ---------- */
.gm-skeleton { display: grid; gap: var(--gm-space-3); }
.gm-skeleton__line, .gm-skeleton__circle, .gm-skeleton__block {
  background: var(--gm-color-skeleton);
  border-radius: var(--gm-radius-xs);
  animation: gm-pulse var(--gm-duration-celebrate) var(--gm-ease-in-out) infinite alternate; /* só enquanto carrega */
}
.gm-skeleton__row { display: flex; gap: var(--gm-space-3); align-items: center; }
.gm-skeleton__row > .gm-skeleton { flex: 1; }
.gm-skeleton__line { height: var(--gm-space-4); }
.gm-skeleton__line--short { width: var(--gm-skeleton-short); }
.gm-skeleton__line--mid { width: var(--gm-skeleton-mid); }
.gm-skeleton__circle { width: var(--gm-avatar-md); height: var(--gm-avatar-md); border-radius: var(--gm-radius-round); }
.gm-skeleton__block { height: var(--gm-space-9); border-radius: var(--gm-radius-md); }
@keyframes gm-pulse { to { opacity: var(--gm-skeleton-dim); } }

/* ---------- Estado vazio ---------- */
.gm-empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--gm-space-3);
  padding: var(--gm-space-7) var(--gm-space-5);
  border: var(--gm-border-width-strong) dashed var(--gm-color-border);
  border-radius: var(--gm-radius-md);
}
.gm-empty__icon {
  width: var(--gm-level-size);
  height: var(--gm-level-size);
  border-radius: var(--gm-radius-round);
  display: grid;
  place-items: center;
  background: var(--gm-color-primary-soft);
  color: var(--gm-color-primary-text);
}
.gm-empty__icon .gm-ico { width: var(--gm-icon-xl); height: var(--gm-icon-xl); }
.gm-empty__title { font-family: var(--gm-font-display); font-weight: var(--gm-font-weight-black); font-size: var(--gm-font-size-md); margin: 0; }
.gm-empty__text { color: var(--gm-color-text-muted); max-width: var(--gm-measure); margin: 0; }
.gm-empty--error .gm-empty__icon { background: var(--gm-color-danger-soft); color: var(--gm-color-danger-text); }
/* Páginas de erro (400, 403, 404, 500; templates/_erro.html, Fase 7): o estado vazio no centro da página, com o título como h1 */
.gm-erro { display: grid; place-items: center; min-height: calc(var(--gm-measure) + var(--gm-space-9)); }
.gm-erro__caixa { width: 100%; max-width: var(--gm-measure); }
.gm-erro__codigo { margin: 0; font-size: var(--gm-font-size-sm); font-weight: var(--gm-font-weight-semibold); color: var(--gm-color-text-muted); }
.gm-erro__titulo { font-size: var(--gm-font-size-xl); line-height: var(--gm-leading-tight); }

/* ---------- Tabela de dados: rola na horizontal (região focável); com --stack vira cartões no celular ---------- */
.gm-table-wrap { position: relative; background: var(--gm-color-surface); border: var(--gm-border-width) solid var(--gm-color-border); border-radius: var(--gm-radius-md); overflow-x: auto; }
/* position: relative: o texto só para leitor de tela (.gm-sr-only, absoluto) das células fica preso na rolagem da
   tabela; sem isso ele escapa da caixa e alarga a página inteira no celular (Fase 6) */
.gm-table { width: 100%; border-collapse: collapse; font-size: var(--gm-font-size-sm); }
.gm-table caption { caption-side: top; text-align: left; padding: var(--gm-space-4) var(--gm-space-5); font-weight: var(--gm-font-weight-semibold); font-size: var(--gm-font-size-base); color: var(--gm-color-text); }
.gm-table th { text-align: left; font-weight: var(--gm-font-weight-semibold); color: var(--gm-color-text-muted); padding: var(--gm-space-3) var(--gm-space-5); background: var(--gm-color-surface-2); border-block: var(--gm-border-width) solid var(--gm-color-border); white-space: nowrap; }
.gm-table td { padding: var(--gm-space-3) var(--gm-space-5); border-bottom: var(--gm-border-width) solid var(--gm-color-border); font-variant-numeric: tabular-nums; vertical-align: middle; }
.gm-table tbody tr:last-child td { border-bottom: 0; }
/* Cabeçalho de linha (th scope="row": o nome do aluno, a atividade): aparência de célula, nome para o leitor de tela */
.gm-table tbody th[scope="row"] { background: transparent; color: var(--gm-color-text); border-block: 0; border-bottom: var(--gm-border-width) solid var(--gm-color-border); white-space: normal; vertical-align: middle; }
.gm-table tbody tr:last-child th[scope="row"] { border-bottom: 0; }
.gm-table tbody tr:hover, .gm-table tbody tr.is-hover { background: var(--gm-color-surface-3); }
.gm-table tbody tr.is-selected { background: var(--gm-color-primary-soft); }
.gm-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-1);
  min-height: var(--gm-target-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.gm-table__sort:hover { color: var(--gm-color-text); }
th[aria-sort="ascending"] .gm-table__sort, th[aria-sort="descending"] .gm-table__sort { color: var(--gm-color-primary-text); font-weight: var(--gm-font-weight-bold); }
.gm-table__sort .gm-sort-dir { display: none; }
th[aria-sort="ascending"] .gm-sort-none, th[aria-sort="descending"] .gm-sort-none { display: none; }
th[aria-sort="ascending"] .gm-sort-dir, th[aria-sort="descending"] .gm-sort-dir { display: inline; }
th[aria-sort="ascending"] .gm-sort-dir { transform: rotate(var(--gm-turn-half)); }
.gm-table__who { display: flex; align-items: center; gap: var(--gm-space-3); font-weight: var(--gm-font-weight-semibold); font-size: var(--gm-font-size-base); }
.gm-table__bar { display: flex; align-items: center; gap: var(--gm-space-2); min-width: calc(var(--gm-space-9) + var(--gm-space-7)); }
.gm-table__bar .gm-progress { flex: 1; }
@media (max-width: 767.98px) {
  .gm-table--stack caption { display: block; } /* sem isso a legenda encolhe numa coluna estreita */
  .gm-table--stack thead { display: none; } /* cada célula traz o rótulo (data-label); ordenação no celular: Fase 6 */
  .gm-table--stack, .gm-table--stack tbody, .gm-table--stack tr, .gm-table--stack td { display: block; }
  .gm-table--stack tr { padding: var(--gm-space-4) var(--gm-space-5); border-bottom: var(--gm-border-width) solid var(--gm-color-border); }
  .gm-table--stack td { border: 0; padding: var(--gm-space-1) 0; display: grid; grid-template-columns: var(--gm-stack-label) 1fr; gap: var(--gm-space-2); align-items: center; }
  .gm-table--stack td::before { content: attr(data-label); color: var(--gm-color-text-muted); font-weight: var(--gm-font-weight-medium); }
  .gm-table--stack td:first-child { grid-template-columns: 1fr; margin-bottom: var(--gm-space-2); }
  .gm-table--stack td:first-child::before { display: none; }
  .gm-table--stack tbody th[scope="row"] { display: block; border: 0; padding: 0; margin-bottom: var(--gm-space-2); }
}

/* ---------- Dica (tooltip): aparece no foco e no hover, Esc fecha (WCAG 1.4.13) ---------- */
.gm-tooltip-host { position: relative; display: inline-flex; }
.gm-tooltip {
  position: absolute;
  z-index: var(--gm-z-tooltip);
  bottom: calc(100% + var(--gm-tooltip-gap));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: var(--gm-tooltip-max);
  padding: var(--gm-space-2) var(--gm-space-3);
  border-radius: var(--gm-radius-sm);
  background: var(--gm-color-inverse);
  color: var(--gm-color-on-inverse);
  font-size: var(--gm-font-size-sm);
  line-height: var(--gm-leading-snug);
  box-shadow: var(--gm-shadow-3);
}
.gm-tooltip::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: var(--gm-tooltip-gap); }
.gm-tooltip[hidden] { display: none; }

/* ---------- Paginação ---------- */
.gm-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gm-space-1); list-style: none; margin: 0; padding: 0; }
.gm-pagination__link {
  display: inline-grid;
  place-items: center;
  min-width: var(--gm-target-min);
  min-height: var(--gm-target-min);
  padding: 0 var(--gm-space-3);
  border-radius: var(--gm-radius-sm);
  color: var(--gm-color-text);
  text-decoration: none;
  font-weight: var(--gm-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.gm-pagination__link:hover, .gm-pagination__link.is-hover { background: var(--gm-color-surface-2); color: var(--gm-color-text); text-decoration: none; }
.gm-pagination__link[aria-current="page"] { background: var(--gm-color-primary); color: var(--gm-color-on-primary); }
.gm-pagination__link[aria-disabled="true"] { opacity: var(--gm-disabled-opacity); pointer-events: none; }
.gm-pagination__gap { min-width: var(--gm-space-5); text-align: center; color: var(--gm-color-text-muted); }

/* ---------- Seletor de tema ---------- */
.gm-theme-dark-icon { display: none; }
[data-theme="dark"] .gm-theme-dark-icon { display: inline; }
[data-theme="dark"] .gm-theme-light-icon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gm-theme-dark-icon { display: inline; }
  :root:not([data-theme="light"]) .gm-theme-light-icon { display: none; }
}

/* ==========================================================================
   Casco do site (Fase 3): página, cabeçalho, menu da conta, menu lateral do professor,
   barra inferior do aluno e rodapé. Sem camada: o CSS legado (camada "legado") não
   consegue mudar o casco, nem com seletores mais específicos.
   ========================================================================== */

/* Página: o documento rola (não uma div) e o rodapé fica no fim quando o conteúdo é curto */
.gm-body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.gm-main, .gm-app { flex: 1 0 auto; min-width: 0; }
.gm-main { display: block; }
.gm-main:focus { outline: none; } /* alvo do "Pular para o conteúdo" e do foco após fechar um aviso */

/* O texto do casco não herda o corpo das páginas antigas (14 px, outras fontes) */
.gm-skip, .gm-topbar, .gm-sidebar, .gm-bottomnav, .gm-footer, .gm-toasts, .gm-menu__list {
  font-family: var(--gm-font-text);
  font-size: var(--gm-font-size-base);
  line-height: var(--gm-leading-normal);
  font-weight: var(--gm-font-weight-regular);
  letter-spacing: normal;
  color: var(--gm-color-text);
}
.gm-skip { transition: none; } /* o CSS legado anima "all" em todo link: o atalho apareceria atrasado */
@media (max-width: 359.98px) {
  .gm-topbar__inner { gap: var(--gm-space-2); }
  .gm-brand__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.gm-topbar a, .gm-sidebar a, .gm-bottomnav a, .gm-footer a, .gm-menu a {
  transition: background-color var(--gm-duration-fast) var(--gm-ease-out), color var(--gm-duration-fast) var(--gm-ease-out);
}

/* Cabeçalho na largura toda (área do professor, com o menu lateral à esquerda) */
.gm-topbar__inner--fluid { padding-inline: var(--gm-gutter); }

/* Cabeçalho: as ações ficam à direita; com links visíveis, são os links que empurram para a direita */
.gm-topbar__actions { margin-left: auto; position: relative; }
/* Os menus do cabeçalho (tema, conta) abrem alinhados à borda direita das ações, nunca para fora da tela */
.gm-topbar__actions > .gm-menu { position: static; }
.gm-topbar__actions .gm-menu__list { max-width: calc(100vw - 2 * var(--gm-gutter)); }
.gm-topbar__nav ~ .gm-topbar__actions { margin-left: 0; }
@media (max-width: 767.98px) {
  .gm-topbar__nav ~ .gm-topbar__actions { margin-left: auto; }
}
/* Links só a partir de 992 px: abaixo disso (celular e tablet) o aluno usa a barra inferior */
@media (max-width: 991.98px) {
  .gm-topbar__nav--desktop { display: none; }
  .gm-topbar__nav--desktop ~ .gm-topbar__actions { margin-left: auto; }
}
/* Botão do menu lateral do professor: aparece abaixo de 992 px */
.gm-topbar__menu--lg { display: none; }
@media (max-width: 991.98px) {
  .gm-topbar__menu--lg { display: inline-flex; }
}

/* Menu da conta (botão de divulgação + lista de links; Esc e clique fora fecham) */
.gm-menu { position: relative; }
.gm-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-2);
  width: auto;
  min-height: var(--gm-target-min);
  margin: 0;
  padding: 0 var(--gm-space-2) 0 var(--gm-space-1);
  border: var(--gm-border-width) solid var(--gm-color-border-strong);
  border-radius: var(--gm-radius-pill);
  background: var(--gm-color-surface);
  color: var(--gm-color-text);
  font-family: var(--gm-font-text);
  font-size: var(--gm-font-size-sm);
  font-weight: var(--gm-font-weight-semibold);
  line-height: var(--gm-leading-tight);
  box-shadow: none;
  transform: none;
  overflow: visible;
  cursor: pointer;
}
.gm-menu__toggle:hover, .gm-menu__toggle.is-hover { background: var(--gm-color-surface-2); color: var(--gm-color-text); }
.gm-menu__caret { transition: transform var(--gm-duration-fast) var(--gm-ease-out); }
.gm-menu__toggle[aria-expanded="true"] .gm-menu__caret { transform: rotate(var(--gm-turn-half)); }
.gm-menu__name { max-width: var(--gm-col-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767.98px) {
  .gm-menu__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.gm-menu__list {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + var(--gm-space-2));
  z-index: var(--gm-z-dropdown);
  min-width: var(--gm-menu-min);
  margin: 0;
  padding: var(--gm-space-2);
  list-style: none;
  background: var(--gm-color-surface);
  border: var(--gm-border-width) solid var(--gm-color-border);
  border-radius: var(--gm-radius-md);
  box-shadow: var(--gm-shadow-3);
}
.gm-menu__list.is-open { display: grid; gap: var(--gm-space-1); }
.gm-menu__list li { margin: 0; padding: 0; }
.gm-menu__head {
  padding: var(--gm-space-2) var(--gm-space-3) var(--gm-space-3);
  margin-bottom: var(--gm-space-1);
  border-bottom: var(--gm-border-width) solid var(--gm-color-border);
  color: var(--gm-color-text-muted);
  font-size: var(--gm-font-size-sm);
}
.gm-menu__head strong { display: block; color: var(--gm-color-text); font-size: var(--gm-font-size-base); }
.gm-menu__item {
  display: flex;
  align-items: center;
  gap: var(--gm-space-3);
  min-height: var(--gm-target-min);
  padding: 0 var(--gm-space-3);
  border-radius: var(--gm-radius-sm);
  color: var(--gm-color-text);
  font-weight: var(--gm-font-weight-medium);
  text-decoration: none;
}
.gm-menu__item:hover, .gm-menu__item.is-hover { background: var(--gm-color-surface-2); color: var(--gm-color-text); text-decoration: none; }
/* Itens que são botões (escolha do tema): mesma aparência dos links; o escolhido tem ✓ e texto mais forte */
button.gm-menu__item { width: 100%; margin: 0; border: 0; background: transparent; font-family: inherit; font-size: inherit; text-align: left; cursor: pointer; }
.gm-menu__check { margin-left: auto; visibility: hidden; color: var(--gm-color-primary-text); }
.gm-menu__item[aria-pressed="true"] { font-weight: var(--gm-font-weight-semibold); }
.gm-menu__item[aria-pressed="true"] .gm-menu__check { visibility: visible; }

/* Área do professor: menu lateral fixo ao lado do conteúdo; abaixo de 992 px vira gaveta.
   A coluna (.gm-app__side) vai até o rodapé; o menu dentro dela acompanha a rolagem (sticky). */
.gm-app { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.gm-app__side {
  align-self: stretch;
  background: var(--gm-color-surface);
  border-right: var(--gm-border-width) solid var(--gm-color-border);
}
.gm-app__side > .gm-sidebar {
  position: sticky;
  top: var(--gm-header-height);
  height: calc(100vh - var(--gm-header-height));
  height: calc(100dvh - var(--gm-header-height));
  overflow-y: auto;
  border-right: 0;
}
.gm-app__main { min-width: 0; padding-bottom: var(--gm-space-8); }
.gm-app + .gm-footer { margin-top: 0; } /* a coluna do menu lateral vai até o rodapé */
@media (max-width: 991.98px) {
  .gm-app { display: block; }
  .gm-app__side { display: contents; }
  .gm-app__side > .gm-sidebar {
    display: none;
    position: fixed;
    top: var(--gm-header-height);
    left: 0;
    bottom: 0;
    z-index: var(--gm-z-overlay);
    width: min(var(--gm-sidebar-width), var(--gm-drawer-max));
    height: auto;
    box-shadow: var(--gm-shadow-4);
  }
  .gm-app__side > .gm-sidebar.is-open { display: flex; }
  .gm-app__side > .gm-sidebar .gm-sidebar__toggle { display: none; } /* recolher só faz sentido no computador */
  .gm-app__side > .gm-sidebar.is-collapsed { width: min(var(--gm-sidebar-width), var(--gm-drawer-max)); }
  .gm-app__side > .gm-sidebar.is-collapsed .gm-sidebar__label,
  .gm-app__side > .gm-sidebar.is-collapsed .gm-sidebar__section { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .gm-app__side > .gm-sidebar.is-collapsed .gm-sidebar__link { justify-content: flex-start; padding: 0 var(--gm-space-3); }
}

/* Barra inferior do aluno: fixa no celular e no tablet, some a partir de 992 px (os links vão para o cabeçalho) */
.gm-bottomnav--fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--gm-z-sticky); }
@media (min-width: 992px) {
  .gm-bottomnav--fixed { display: none; }
}
@media (max-width: 991.98px) and (min-height: 480.02px) {
  .gm-com-barra-inferior { --gm-bottomnav-offset: var(--gm-bottom-nav-height); }
}
/* Telas baixas (celular deitado, zoom de 400%): cabeçalho e barra inferior saem do modo fixo para não
   ocuparem metade da altura (WCAG 1.4.10). A barra inferior fica logo abaixo do cabeçalho. */
@media (max-height: 480px) {
  .gm-topbar, .gm-bottomnav--fixed { position: static; }
  .gm-bottomnav--fixed { box-shadow: none; border-top: 0; border-bottom: var(--gm-border-width) solid var(--gm-color-border); }
  html { scroll-padding-top: var(--gm-space-4); }
}

/* Rodapé: links legais (exigência da verificação do Google) e contato, sempre no mesmo lugar */
.gm-footer {
  margin-top: var(--gm-space-8);
  border-top: var(--gm-border-width) solid var(--gm-color-border);
  background: var(--gm-color-surface);
  color: var(--gm-color-text-muted);
}
.gm-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gm-space-2) var(--gm-space-5);
  padding-block: var(--gm-space-4);
}
.gm-footer__copy { margin: 0; color: var(--gm-color-text-muted); font-size: var(--gm-font-size-sm); }
.gm-footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--gm-space-5); margin: 0; padding: 0; list-style: none; }
.gm-footer__links li { margin: 0; padding: 0; }
.gm-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--gm-target-min);
  color: var(--gm-color-text);
  font-size: var(--gm-font-size-sm);
  text-decoration: underline;
  text-underline-offset: var(--gm-underline-offset);
}
.gm-footer__links a:hover { color: var(--gm-color-primary-text); text-decoration-thickness: var(--gm-border-width-strong); }

/* Páginas redesenhadas que ainda passam pelo bloco 'addHome': sem a margem do container-fluid (o conteúdo já usa o contêiner do design system) */
.container-fluid.home { padding-inline: 0; }

/* Conteúdo de página redesenhada: respiro abaixo do cabeçalho */
.gm-page { padding-block: var(--gm-space-7) var(--gm-space-8); }

/* ---------- Botão "Continuar com o Google" (diretrizes de marca do Google, 2025) ----------
   Cores, fonte e proporções das diretrizes; só a escala muda (40 → 44 px de altura, tudo junto). */
.gsi-button {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-google-gap);
  min-height: var(--gm-google-height);
  padding: 0 var(--gm-google-pad-end) 0 var(--gm-google-pad-start);
  border-radius: var(--gm-radius-pill);
  background: var(--gm-google-fill);
  box-shadow: inset 0 0 0 var(--gm-border-width) var(--gm-google-stroke); /* borda de 1 px por dentro */
  color: var(--gm-google-text);
  font-family: var(--gm-font-google);
  font-weight: var(--gm-font-weight-medium);
  font-size: var(--gm-google-font-size);
  line-height: var(--gm-google-line);
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--gm-duration-fast) var(--gm-ease-out);
}
.gsi-button:hover { color: var(--gm-google-text); text-decoration: none; background: color-mix(in srgb, var(--gm-google-fill), var(--gm-google-text) var(--gm-google-hover)); }
.gsi-button__logo { width: var(--gm-google-logo); height: var(--gm-google-logo); flex: none; }