:root {
  color-scheme: light;
  --ink-950: #15203a;
  --ink-800: #273551;
  --ink-600: #58657d;
  --ink-500: #718099;
  --line: #dde3ec;
  --surface: #fff;
  --soft: #f4f6fa;
  --canvas: #eef2f7;
  --verde-topo: #a7c648;
  --verde-oficial: #859f38;
  --verde-base: #6b802e;
  --verde-escuro: #5d7128;
  --verde-suave: #eef4dc;
  --verde-linha: #cbd9a8;
  --verde-gradiente: linear-gradient(180deg, #a7c648 0%, #859f38 55%, #6b802e 100%);
  /* A marca virou verde-musgo em 16/09/2026 (CLAUDE.md §"casca sky"): os
     tokens --primary-* continuam existindo porque o resto da folha e as
     páginas internas do professor ainda os usam para botão, chip ativo,
     dia de hoje etc. — só o valor deles mudou, de azul para verde. */
  --primary-700: var(--verde-escuro);
  --primary-600: var(--verde-base);
  --primary-100: var(--verde-suave);
  --secondary-700: var(--verde-base);
  --secondary-600: var(--verde-oficial);
  --secondary-100: var(--verde-suave);
  --secondary-line: var(--verde-linha);
  --amber-700: #9a5a09;
  --amber-100: #fff0cf;
  --rose-700: #b73858;
  --rose-100: #fde7ed;
  --shadow-sm: 0 1px 2px rgba(21, 32, 58, .05), 0 8px 24px rgba(21, 32, 58, .04);
  --shadow-lg: 0 28px 70px rgba(21, 32, 58, .16);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --sidebar-width: 248px;
  --page-width: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink-950);
  background: var(--canvas);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.ui-icon { display: block; flex: 0 0 auto; width: 24px; height: 24px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.025em; line-height: 1.15; }
h1 { margin-bottom: .75rem; font-size: clamp(2rem, 7vw, 3.25rem); }
h2 { margin-bottom: .5rem; font-size: clamp(1.35rem, 4vw, 1.8rem); }
h3 { margin-bottom: .4rem; font-size: 1.05rem; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: .75rem;
  left: .75rem;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--ink-950);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid rgba(107, 128, 46, .35); outline-offset: 3px; }

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--ink-950);
  font-weight: 850;
  letter-spacing: -.03em;
}
.brand__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-shell { min-height: 100svh; }
.sidebar { display: none; }
.app-stage { min-width: 0; }

.mobile-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 1rem;
  border-bottom: 1px solid rgba(221, 227, 236, .86);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
}
.mobile-menu { position: relative; }
.mobile-menu summary {
  padding: .55rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  list-style: none;
  font-size: .88rem;
  font-weight: 750;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu__panel {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  display: grid;
  gap: .35rem;
  min-width: 180px;
  padding: .65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.mobile-menu__panel a, .mobile-menu__panel button {
  display: flex;
  width: 100%;
  gap: .65rem;
  align-items: center;
  padding: .65rem .75rem;
  border-radius: 8px;
  text-align: left;
  text-decoration: none;
}
.mobile-menu__panel .menu-morto {
  display: flex;
  gap: .65rem;
  align-items: center;
  padding: .65rem .75rem;
}
.mobile-menu__panel .nav-item__icon {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  color: var(--primary-700);
  background: var(--primary-100);
}
.mobile-menu__panel .nav-item__icon .ui-icon { width: 19px; height: 19px; }

.page {
  width: min(100%, var(--page-width));
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}
.eyebrow {
  margin-bottom: .45rem;
  color: var(--primary-700);
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.eyebrow--light { color: var(--verde-linha); }
.page-heading {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.page-heading__lead, .welcome-panel__lead {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--ink-600);
  font-size: 1.05rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.button:hover { transform: translateY(-1px); }
.button--primary { color: #fff; background: var(--primary-600); box-shadow: 0 10px 24px rgba(107, 128, 46, .22); }
.button--primary:hover { background: var(--primary-700); }
.button--secondary { color: var(--secondary-700); border-color: var(--secondary-line); background: var(--secondary-100); }
.button--secondary:hover { border-color: #8fb9c9; background: #dcebed; }
.button--full { width: 100%; }
.text-button, .text-link {
  padding: 0;
  border: 0;
  color: var(--primary-700);
  background: none;
  cursor: pointer;
  font-weight: 750;
  text-decoration: none;
}
.text-link:hover, .text-button:hover { text-decoration: underline; }

.metric-grid, .feature-grid, .dashboard-grid { display: grid; gap: 1rem; }
.metric-grid { margin-bottom: 1rem; }
.metric-card, .content-card, .feature-card, .section-block, .welcome-panel {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.metric-card { display: grid; gap: .25rem; padding: 1.15rem; border-radius: var(--radius-md); }
.metric-card--accent { border-color: var(--verde-linha); background: linear-gradient(145deg, #f7faf1, var(--verde-suave)); }
.metric-card__label { color: var(--ink-600); font-size: .82rem; font-weight: 750; }
.metric-card__value { font-size: 2rem; line-height: 1; }
.metric-card__hint { color: var(--ink-500); font-size: .78rem; }
.dashboard-grid { margin-bottom: 1rem; }
.content-card, .feature-card { padding: 1.25rem; border-radius: var(--radius-md); }
.card-heading, .section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.soft-badge, .status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: .28rem .58rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
.soft-badge { color: var(--primary-700); background: var(--primary-100); }
.next-step { color: #fff; border-color: var(--ink-950); background: var(--ink-950); }
.next-step .eyebrow { color: #aebcff; }
.next-step p:not(.eyebrow) { color: #c9d0df; }

.section-block, .welcome-panel { padding: 1.25rem; border-radius: var(--radius-lg); }
.section-block { scroll-margin-top: 84px; }
.student-list { display: grid; gap: .6rem; margin-top: 1rem; }
.student-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .8rem;
  align-items: center;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcfe;
}
.student-avatar, .empty-state__icon, .feature-card__icon {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: var(--primary-700);
  background: var(--primary-100);
  font-size: 1.15rem;
  font-weight: 850;
}
.student-row__main { min-width: 0; }
.student-row__main h3, .student-row__main p { overflow: hidden; margin-bottom: 0; text-overflow: ellipsis; white-space: nowrap; }
.student-row__main p { color: var(--ink-600); font-size: .88rem; }
.student-row .status-pill { grid-column: 2; }
.status-pill--ativo { color: var(--secondary-700); background: var(--secondary-100); }
.status-pill--pendente { color: var(--amber-700); background: var(--amber-100); }
.status-pill--suspenso, .status-pill--encerrado { color: var(--ink-600); background: var(--soft); }
/* "Meus arquivos" do professor (ESPECIFICACAO §6.4, entrega 2): o SENTIDO
   do arquivo — quem mandou para quem. */
.status-pill--enviado { color: var(--secondary-700); background: var(--secondary-100); }
.status-pill--recebido { color: var(--amber-700); background: var(--amber-100); }

.empty-state {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding: 1.25rem;
  border: 1px dashed #c9d1df;
  border-radius: var(--radius-md);
  background: var(--soft);
}
.empty-state--compact { margin-top: .75rem; }
.empty-state p, .feature-card p { margin-bottom: 0; color: var(--ink-600); }
.feature-card__icon { margin-bottom: 1rem; }
.welcome-panel {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 1rem;
  overflow: hidden;
  background: linear-gradient(135deg, #fff 52%, var(--secondary-100) 100%);
}
.status-card {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--secondary-line);
  border-radius: var(--radius-md);
  background: var(--secondary-100);
}
.status-card__mark {
  display: grid;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--secondary-700);
  font-weight: 900;
}
.status-card strong, .status-card span { display: block; }
.status-card div span { color: #1f6682; font-size: .84rem; }
.feature-grid { margin-top: 1rem; }

.flash-stack { display: grid; gap: .5rem; margin-bottom: 1rem; }
.flash-stack--auth {
  position: fixed;
  z-index: 50;
  top: 1rem;
  left: 50%;
  width: min(calc(100% - 2rem), 520px);
  transform: translateX(-50%);
}
.flash {
  padding: .8rem 1rem;
  border: 1px solid #ccd4e1;
  border-radius: 12px;
  color: var(--ink-800);
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}
.flash--error { color: var(--rose-700); border-color: #f4bdcb; background: var(--rose-100); }

.auth-body { background: #f6f7fb; }
.auth-layout { display: grid; min-height: 100svh; }
.auth-intro { display: none; }
.auth-panel { display: grid; width: 100%; padding: 1rem; place-items: center; }
.auth-card {
  width: min(100%, 460px);
  padding: clamp(1.35rem, 5vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.auth-card h2 { margin-bottom: .55rem; font-size: clamp(1.75rem, 8vw, 2.35rem); }
.auth-card__lead, .auth-card__help { color: var(--ink-600); }
.auth-card__lead { margin-bottom: 1.5rem; }
.auth-card__help { margin: 1.25rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: .84rem; text-align: center; }
/* A4 (refutador, 17/09/2026): quem perdeu a senha, único para quem o fluxo
   "esqueci a senha" foi escrito, não tinha como chegar lá a partir do
   /entrar. Sem borda própria — fica entre o formulário e o
   `.auth-card__help`, que já tem a divisória de cima. */
.auth-card__esqueci { margin: .9rem 0 0; font-size: .86rem; text-align: center; }
.auth-card__esqueci a { color: var(--verde-base); font-weight: 700; }
.form-stack, .field { display: grid; }
.form-stack { gap: 1rem; }
.field { gap: .38rem; }
.field__label { color: var(--ink-800); font-size: .86rem; font-weight: 800; }
.field__control {
  width: 100%;
  min-height: 50px;
  padding: .76rem .9rem;
  border: 1px solid #cbd3df;
  border-radius: 11px;
  color: var(--ink-950);
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field__control::placeholder { color: #99a3b5; }
.field__control:focus { border-color: var(--primary-600); outline: none; box-shadow: 0 0 0 4px rgba(107, 128, 46, .12); }
.field--error .field__control { border-color: #d95d7d; }
.field__errors p { margin-bottom: 0; color: var(--rose-700); font-size: .8rem; font-weight: 700; }

@media (min-width: 600px) {
  .page { padding: 2rem 1.5rem 4rem; }
  .page-heading { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .metric-grid, .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .student-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .student-row .status-pill { grid-column: 3; }
  .welcome-panel { grid-template-columns: minmax(0, 1.5fr) minmax(240px, .7fr); align-items: center; }
}

@media (min-width: 860px) {
  .app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
  .sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100svh;
    padding: 1.5rem 1rem;
    border-right: 1px solid #e5e9f1;
    background: #fff;
  }
  .sidebar__brand { padding: .35rem .75rem 1.8rem; }
  .sidebar__nav { display: grid; gap: .32rem; }
  .nav-label { margin: 0 0 .45rem .75rem; color: var(--ink-500); font-size: .68rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
  .nav-item {
    display: flex;
    gap: .72rem;
    align-items: center;
    min-width: 0;
    padding: .72rem .8rem;
    border-radius: 11px;
    color: var(--ink-600);
    font-size: .9rem;
    font-weight: 730;
    text-decoration: none;
  }
  .nav-item__icon {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 11px;
    color: var(--ink-600);
    background: var(--soft);
  }
  .nav-item__icon .ui-icon { width: 22px; height: 22px; }
  .nav-item--active { color: var(--primary-700); background: var(--primary-100); }
  .nav-item--active .nav-item__icon { color: #fff; background: var(--primary-600); box-shadow: 0 7px 16px rgba(107, 128, 46, .2); }
  .nav-item--locked { opacity: .55; }
  .sidebar__footer { margin-top: auto; padding: 1rem .75rem 0; border-top: 1px solid var(--line); }
  .sidebar__account { margin-bottom: .35rem; color: var(--ink-500); font-size: .74rem; }
  .mobile-header { display: none; }
  .page { padding: 3rem 2.5rem 5rem; }
  .dashboard-grid { grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); }

  .auth-layout { grid-template-columns: minmax(420px, .9fr) minmax(440px, 1.1fr); }
  .auth-intro {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: clamp(2rem, 6vw, 6rem);
    color: #fff;
    background: linear-gradient(150deg, #3b422a 0%, #5d7128 55%, #859f38 100%);
  }
  .auth-intro::before, .auth-intro::after {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    content: "";
  }
  .auth-intro::before { right: -18vw; bottom: -18vw; width: 48vw; height: 48vw; }
  .auth-intro::after { right: -7vw; bottom: -8vw; width: 28vw; height: 28vw; background: rgba(255, 255, 255, .04); }
  .auth-intro__content { position: relative; z-index: 1; max-width: 640px; }
  .auth-brand { margin-bottom: clamp(3rem, 8vh, 6rem); font-size: 1.05rem; font-weight: 850; letter-spacing: -.02em; }
  .auth-intro h1 { max-width: 620px; }
  .auth-intro__content > p:not(.eyebrow, .auth-brand) { max-width: 570px; color: #e3ecc9; font-size: 1.08rem; }
  .benefit-list { display: grid; gap: .8rem; margin: 2rem 0 0; padding: 0; list-style: none; color: #fff; }
  .benefit-list span {
    display: inline-grid;
    width: 24px;
    height: 24px;
    margin-right: .35rem;
    place-items: center;
    border-radius: 50%;
    color: var(--verde-escuro);
    background: #fff;
    font-size: .75rem;
    font-weight: 900;
  }
  .auth-panel { padding: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Cadastro de aluno, ficha e convite — acrescentado no fim de proposito.
   Regra do arquivo: NAO se redefine aqui nenhuma propriedade que as @media
   acima ja ajustam (grade de `.student-row`, largura da `.page`...). Regra
   escrita depois vence a de cima com a mesma especificidade mesmo estando
   dentro de @media, e o desktop quebraria calado.
   Celular primeiro: o que esta solto e o layout do aparelho, e as @media no
   fim desta secao so somam colunas quando ha largura.
   ========================================================================== */

.flash--info { color: var(--primary-700); border-color: var(--verde-linha); background: var(--primary-100); }
.flash--success { color: var(--secondary-700); border-color: var(--secondary-line); background: var(--secondary-100); }
.flash--warning { color: var(--amber-700); border-color: #f2d59a; background: var(--amber-100); }

/* Linha de aluno que virou link: some a sublinha, fica a area de toque. */
.student-row--acao { color: inherit; text-decoration: none; }
.student-row--acao:hover { border-color: var(--verde-linha); background: #fbfdf7; }

/* Item de menu que ainda nao existe. `aria-disabled` conta ao leitor de tela
   o que a opacidade so conta a quem enxerga. */
.menu-morto {
  display: block;
  padding: .65rem .75rem;
  color: var(--ink-500);
  font-size: .9rem;
  font-weight: 700;
}
.nav-item--locked, .menu-morto { cursor: not-allowed; }

/* Formulario. `minmax(0, 1fr)` e nao `1fr`: faixa de grade nao encolhe abaixo
   do conteudo por padrao, e um campo longo empurraria a pagina para o lado no
   celular (CLAUDE.md 9). */
.form-grid { display: grid; gap: 1rem; }
.form-grid > * { min-width: 0; }
.field__dica { margin: 0; color: var(--ink-500); font-size: .8rem; }
/* Aviso de cota (ESPECIFICACAO §6.4, entrega 2) na tela de nova atividade. */
.field__dica--atencao { color: var(--amber-700); }
.field__dica--cheia { color: var(--rose-700); font-weight: 700; }
.field__control--area { min-height: 92px; resize: vertical; }
.form-stack > .content-card { margin-bottom: 0; }

.choice-set { display: grid; gap: .5rem; margin: 0 0 1rem; padding: 0; border: 0; }
.choice-set legend { padding: 0 0 .4rem; }
.choice {
  display: flex;
  gap: .6rem;
  align-items: center;
  min-width: 0;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
}
.choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--primary-600); }
.choice:hover { border-color: var(--verde-linha); }

.aviso {
  display: flex;
  gap: .5rem;
  margin: 0 0 1rem;
  padding: .8rem .95rem;
  border: 1px solid #f2d59a;
  border-radius: 12px;
  color: var(--amber-700);
  background: var(--amber-100);
  font-size: .88rem;
  line-height: 1.45;
}

/* Ficha: pares rotulo/valor. Um par por linha no celular. */
.ficha { display: grid; gap: .75rem; margin: 0 0 1.25rem; }
.ficha > div { min-width: 0; }
.ficha dt { color: var(--ink-500); font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ficha dd { overflow-wrap: anywhere; margin: .15rem 0 0; font-weight: 700; }

/* `.privado` = so o professor le (observacao interna, §7 — a anotacao que
   nenhum aluno nem responsavel pode ver). Moldura TRACEJADA de proposito:
   e o sinal visual de "isto e reservado". */
.privado {
  padding: .95rem 1rem;
  border: 1px dashed #cbd3df;
  border-radius: var(--radius-md);
  background: var(--soft);
}
.privado p:last-child { margin-bottom: 0; color: var(--ink-600); }

/* `.feedback` = o CONTRARIO: o aluno LE isto (o retorno do professor sobre a
   entrega, ESPECIFICACAO §7). Moldura SOLIDA na cor secundaria, para nunca
   parecer o mesmo componente de "so voce ve" que o `.privado` acima e — o
   dono ja pediu para nao confundir os dois. */
.feedback {
  padding: .95rem 1rem;
  border: 1px solid var(--secondary-line);
  border-radius: var(--radius-md);
  background: var(--secondary-100);
}
.feedback p:last-child { margin-bottom: 0; color: var(--secondary-700); }

.lista-simples { display: grid; gap: .45rem; margin: 0; padding-left: 1.1rem; color: var(--ink-600); font-size: .9rem; overflow-wrap: anywhere; }
/* Nome de arquivo fora de uma `.lista-simples` (o arquivo unico da propria
   atividade, e nao os da entrega): mesma protecao contra nome longo vazando
   no celular (CLAUDE.md 1). */
.nome-arquivo { overflow-wrap: anywhere; }

.termo-aceite {
  margin: 0;
  padding: .85rem 1rem;
  border-radius: 12px;
  background: var(--soft);
  color: var(--ink-600);
  font-size: .82rem;
  line-height: 1.5;
}

@media (min-width: 600px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ficha: cabecalho com a situacao e o botao de editar lado a lado; linha de
   convite com o botao de reenviar numa linha propria no celular. Nada aqui
   redefine o que as @media acima ja ajustam em `.student-row`. */
.page-heading__acoes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.student-row__acao { display: flex; flex-wrap: wrap; gap: .4rem; grid-column: 1 / -1; margin: 0; }
.student-row__acao .button { width: 100%; }
/* Os botoes da linha de convite viraram `sky-botao` em 18/09 (eram `.button`
   de 48px). Eles nao herdam o `width: 100%` acima — e nao devem: dois botoes
   curtos lado a lado cabem na coluna, e esticados ocupariam duas linhas. */
.student-row__acao .sky-botao { flex: 0 0 auto; }
.ficha dd small { display: block; color: var(--ink-500); font-size: .78rem; font-weight: 600; }

/* A LINHA DE CONVITE tem quatro coisas numa linha so — cone, destino, etiqueta
   de estado e ate dois botoes — e destino e um e-mail inteiro. Ela ficava em
   quatro colunas a partir de 600px de TELA; so que desde 18/09 ela vive numa
   coluna de meia largura do desktop, e a media query, que mede a janela e nao
   o espaco real, espremia "marina@teste.com" em "marina@test / e.com".

   Agora sao sempre DUAS linhas: quem e em cima, estado e acao embaixo. Cabe
   em 320px e em 1400px, e nenhuma delas depende da largura da janela. */
.student-row--convite { grid-template-columns: auto minmax(0, 1fr); row-gap: .55rem; }
.student-row--convite .status-pill { grid-column: 2; justify-self: start; }
.student-row--convite .student-row__acao { grid-column: 2; }

@media (min-width: 600px) {
  .student-row__acao .button { width: auto; }
}

/* Agenda — mesma casca clara do produto, com densidade suficiente para o
   professor bater o olho entre uma aula e outra. */
.agenda-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: .55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.segmented, .date-nav { display: flex; gap: .25rem; align-items: center; }
.segmented__item, .date-nav__today, .icon-button {
  display: inline-grid;
  min-height: 40px;
  place-items: center;
  border-radius: 10px;
  color: var(--ink-600);
  font-size: .86rem;
  font-weight: 800;
  text-decoration: none;
}
.segmented__item { padding: .55rem .75rem; }
.segmented__item--active { color: var(--primary-700); background: var(--primary-100); }
.date-nav__today { padding: .55rem .65rem; }
.icon-button { width: 40px; border: 1px solid var(--line); font-size: 1.35rem; }
.icon-button:hover, .date-nav__today:hover { color: var(--primary-700); background: var(--soft); }

.agenda-list { display: grid; gap: .65rem; margin-top: 1rem; }
.agenda-list--compact { margin-top: .75rem; }
.agenda-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .8rem;
  align-items: center;
  min-width: 0;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcfe;
}
.agenda-item--cancelada { opacity: .68; background: var(--soft); }
.agenda-item__date, .agenda-item__hora {
  display: grid;
  width: 58px;
  min-height: 54px;
  place-content: center;
  border-radius: 12px;
  color: var(--primary-700);
  background: var(--primary-100);
  text-align: center;
  line-height: 1.1;
}
.agenda-item__date span { font-size: .72rem; font-weight: 750; }
.agenda-item__date strong, .agenda-item__hora { font-size: .98rem; font-weight: 900; }
.agenda-item__main { min-width: 0; }
.agenda-item__main h3, .agenda-item__main p { margin-bottom: 0; }
.agenda-item__main p { overflow-wrap: anywhere; color: var(--ink-600); font-size: .84rem; }
.agenda-item__main .status-pill { margin-top: .45rem; }
.agenda-item__actions {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
}
.button--small { min-height: 38px; padding: .55rem .75rem; font-size: .8rem; }
.button--danger { color: #fff; background: var(--rose-700); }
.cancel-action { position: relative; }
.cancel-action summary { color: var(--rose-700); cursor: pointer; font-size: .82rem; font-weight: 800; }
.cancel-action form {
  display: grid;
  gap: .55rem;
  width: min(300px, calc(100vw - 3rem));
  margin-top: .55rem;
  padding: .75rem;
  border: 1px solid #f4bdcb;
  border-radius: 12px;
  background: var(--rose-100);
}
.form-card {
  max-width: 760px;
  padding: clamp(1.15rem, 4vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 720px) {
  .agenda-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .agenda-item__actions { grid-column: 3; justify-content: flex-end; }
  .agenda-list--compact .agenda-item { grid-template-columns: auto minmax(0, 1fr) auto; }
}

/* Calendario do professor. As listas compactas acima continuam no painel
   "Hoje"; a pagina Agenda usa uma grade temporal de verdade. */
.page-heading--agenda .button { align-self: flex-start; }
.agenda-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem;
  padding: .75rem;
}
.agenda-toolbar__title {
  margin: 0;
  color: var(--ink-800);
  font-size: 1.08rem;
  text-align: center;
}
.agenda-toolbar .date-nav,
.agenda-toolbar .segmented { justify-content: center; }
.calendar-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1rem;
  align-items: center;
  margin: 0 0 .8rem;
  color: var(--ink-600);
  font-size: .78rem;
  font-weight: 700;
}
.calendar-summary > span { display: inline-flex; gap: .38rem; align-items: center; }
.calendar-legend {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--primary-600);
}
.calendar-legend--changed { background: var(--amber-700); }
.calendar-shell {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.calendar-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: #bbc3d2 transparent;
}
.week-calendar { min-width: 1020px; }
.week-calendar__head,
.week-calendar__row {
  display: grid;
  grid-template-columns: 76px repeat(7, minmax(150px, 1fr));
}
.week-calendar__head {
  position: sticky;
  z-index: 3;
  top: 0;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
}
.week-calendar__corner,
.week-calendar__day {
  min-height: 72px;
  padding: .65rem .4rem;
  border-left: 1px solid var(--line);
  color: var(--ink-500);
  text-align: center;
}
.week-calendar__corner {
  display: grid;
  place-items: center;
  border-left: 0;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.week-calendar__day span {
  display: block;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.week-calendar__day strong {
  display: inline-grid;
  width: 32px;
  height: 32px;
  margin-top: .2rem;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-800);
  font-size: 1rem;
}
.week-calendar__day--today strong {
  color: #fff;
  background: var(--primary-600);
}
.week-calendar__row { min-height: 86px; }
.week-calendar__time,
.day-calendar__time {
  padding: .55rem .55rem 0 0;
  color: var(--ink-500);
  font-size: .72rem;
  font-weight: 750;
  text-align: right;
}
.week-calendar__cell {
  min-width: 0;
  padding: .28rem;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background-image: linear-gradient(to bottom, transparent 49%, rgba(221, 227, 236, .48) 50%, transparent 51%);
}
.week-calendar__cell--today { background-color: #f6f9ee; }
.calendar-event {
  position: relative;
  z-index: 1;
  margin-bottom: .25rem;
  border: 1px solid var(--verde-linha);
  border-left: 4px solid var(--primary-600);
  border-radius: 8px;
  color: var(--ink-800);
  background: var(--primary-100);
}
.calendar-event[open] {
  z-index: 4;
  box-shadow: 0 12px 28px rgba(21, 32, 58, .16);
}
.calendar-event > summary {
  display: grid;
  gap: .05rem;
  padding: .42rem .45rem;
  cursor: pointer;
  list-style: none;
  line-height: 1.2;
}
.calendar-event > summary::-webkit-details-marker { display: none; }
.calendar-event > summary time { color: var(--primary-700); font-size: .7rem; font-weight: 900; }
.calendar-event > summary strong {
  overflow: hidden;
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-event > summary span {
  overflow: hidden;
  color: var(--ink-600);
  font-size: .66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-event__details {
  display: grid;
  gap: .42rem;
  padding: .55rem;
  border-top: 1px solid var(--verde-linha);
  background: var(--surface);
  font-size: .75rem;
}
.calendar-event__details p { margin: 0; color: var(--ink-600); }
.calendar-event__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  margin-top: .15rem;
}
.calendar-event--remarcada {
  border-color: #f2d49d;
  border-left-color: var(--amber-700);
  background: var(--amber-100);
}
.calendar-event--cancelada {
  opacity: .68;
  border-color: #d9dee7;
  border-left-color: var(--ink-500);
  background: var(--soft);
}
.calendar-event--cancelada > summary strong { text-decoration: line-through; }
.calendar-event--compact { margin-bottom: .2rem; }
.calendar-event--compact > summary {
  grid-template-columns: auto minmax(0, 1fr);
  gap: .3rem;
  padding: .3rem .36rem;
}
.calendar-event--compact > summary strong { font-size: .7rem; }

.day-calendar__row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  min-height: 88px;
}
.day-calendar__time { border-right: 1px solid var(--line); }
.day-calendar__slot {
  display: grid;
  gap: .35rem;
  align-content: start;
  padding: .35rem;
  border-bottom: 1px solid var(--line);
  background-image: linear-gradient(to bottom, transparent 49%, rgba(221, 227, 236, .48) 50%, transparent 51%);
}
.day-calendar .calendar-event { max-width: 620px; }

.month-calendar { min-width: 860px; }
.month-calendar__weekdays,
.month-calendar__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
}
.month-calendar__weekdays {
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
}
.month-calendar__weekdays div {
  padding: .65rem;
  border-left: 1px solid var(--line);
  color: var(--ink-500);
  font-size: .72rem;
  font-weight: 850;
  text-align: center;
  text-transform: uppercase;
}
.month-calendar__day {
  min-height: 126px;
  padding: .4rem;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.month-calendar__day--outside { background: var(--soft); opacity: .55; }
.month-calendar__day--today { background: #f6f9ee; box-shadow: inset 0 0 0 2px var(--primary-600); }
.month-calendar__number {
  display: inline-grid;
  width: 28px;
  height: 28px;
  margin-bottom: .2rem;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-600);
  font-size: .78rem;
  font-weight: 850;
  text-decoration: none;
}
.month-calendar__day--today .month-calendar__number { color: #fff; background: var(--primary-600); }
.month-calendar__events { display: grid; }
.calendar-empty {
  margin: .85rem 0 0;
  padding: .8rem 1rem;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--ink-600);
  background: rgba(255, 255, 255, .6);
  font-size: .85rem;
  text-align: center;
}

@media (min-width: 720px) {
  .page-heading--agenda {
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
  }
  .agenda-toolbar { grid-template-columns: auto minmax(180px, 1fr) auto; }
}

/* Agenda no celular — Semana e Mes trocam de grade horizontal para lista
   vertical abaixo de 600px (regra da agenda no celular, 15/09/2026): a
   grade de 7 colunas nao cabe num telefone sem rolar, e rolar horizontal e
   o defeito que mais aparece na plataforma. Dia continua grade sempre, nos
   dois tamanhos, so com a faixa de horas mais enxuta.

   MESMO HTML nos dois tamanhos — so o `display` muda por media query — porque
   o servidor nao sabe a largura da tela de quem pediu a pagina. */
.agenda-mobile-list { display: none; }
.month-calendar__dots {
  display: none;
  gap: .2rem;
  justify-content: center;
}
.month-calendar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-600);
}

@media (max-width: 599px) {
  .agenda-grade-desktop { display: none; }
  .agenda-mobile-list { display: grid; gap: .65rem; margin-top: 1rem; }

  /* A mini-grade do mes fica com as 7 colunas (cabe: cada celula e so o
     numero do dia + pontos), sem o `min-width` que forcava a rolagem
     horizontal da vista de desktop. */
  .month-calendar,
  .month-calendar__weekdays,
  .month-calendar__week { min-width: 0; }
  .month-calendar__weekdays,
  .month-calendar__week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .month-calendar__weekdays div { padding: .4rem .1rem; font-size: .62rem; }
  .month-calendar__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    min-width: 0;
    height: 44px;
    padding: .15rem;
    overflow: hidden;
  }
  .month-calendar__number { width: 22px; height: 22px; margin-bottom: 0; font-size: .68rem; }
  /* A etiqueta de texto ("18:00 Lucas Prado") nao cabe numa celula de 44px
     — some no celular, e o ponto entra no lugar dela. A lista abaixo da
     grade e que da o detalhe (regra da agenda no celular, item 1). */
  .month-calendar__events { display: none; }
  .month-calendar__dots { display: flex; }
}

.agenda-mobile-day {
  min-width: 0;
  padding: .75rem .85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcfe;
}
.agenda-mobile-day--hoje {
  border-color: var(--primary-600);
  background: var(--primary-100);
}
.agenda-mobile-day__titulo {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin: 0 0 .55rem;
  color: var(--ink-800);
  font-size: .88rem;
}
.agenda-mobile-day__vazio { margin: 0; color: var(--ink-500); font-size: .82rem; }
.agenda-mobile-day__lista { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.agenda-mobile-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .55rem;
  align-items: center;
  min-width: 0;
  padding: .5rem .6rem;
  border: 1px solid var(--verde-linha);
  border-left: 4px solid var(--primary-600);
  border-radius: 10px;
  color: var(--ink-800);
  background: var(--primary-100);
  text-decoration: none;
}
.agenda-mobile-item time { color: var(--primary-700); font-size: .74rem; font-weight: 900; }
.agenda-mobile-item__texto {
  display: grid;
  min-width: 0;
  gap: .05rem;
  line-height: 1.2;
}
.agenda-mobile-item__texto strong,
.agenda-mobile-item__texto span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agenda-mobile-item__texto strong { font-size: .82rem; }
.agenda-mobile-item__texto span { color: var(--ink-600); font-size: .7rem; }

/* Vista DIA no celular: continua grade (nao vira lista), mas nada dentro do
   scroller pode ser mais largo do que ele. O <details> de cancelar abria um
   formulario posicionado que empurrava 40px para fora; aqui ele volta ao
   fluxo e ocupa a largura da coluna. `minmax(0, 1fr)` e `min-width: 0` sao a
   mesma regra do CLAUDE.md 9: faixa de grade nao encolhe abaixo do conteudo
   por padrao. */
@media (max-width: 599px) {
  .day-calendar { min-width: 0; }
  .day-calendar__row { grid-template-columns: 52px minmax(0, 1fr); }
  .day-calendar__time { font-size: .72rem; }
  .day-calendar .calendar-event { min-width: 0; max-width: 100%; }
  .day-calendar .calendar-event__details,
  .day-calendar .calendar-event__actions,
  .day-calendar .cancel-action { min-width: 0; max-width: 100%; }
  .day-calendar .cancel-action form {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .day-calendar .calendar-event__actions .button { white-space: normal; }
}

/* ===========================================================================
   FINANCEIRO (D4) — o livro-caixa do professor. Superfície CLARA: fica em
   `app.css`, como o resto da área do professor (CLAUDE.md 8 do outro
   projeto; aqui, regra da área do professor). Celular primeiro: tudo abaixo
   nasce empilhado e só ganha colunas a partir de 600px.
   ========================================================================= */
.financeiro-toolbar { margin-bottom: 1.25rem; }
.metric-card__value--texto { font-size: 1.05rem; line-height: 1.3; }

.financeiro-aviso {
  margin: -.5rem 0 1.25rem;
  padding: .65rem .9rem;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--ink-600);
  background: var(--soft);
  font-size: .85rem;
}

.financeiro-grafico,
.financeiro-por-aluno,
.financeiro-lista { margin-bottom: 1.25rem; }

/* SVG responsivo por `viewBox` (calculado no servidor) + largura em CSS —
   nenhuma geometria aqui, so escala (CLAUDE.md 6 e 8: geometria e atributo). */
.financeiro-grafico__svg {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin-top: .5rem;
}
.financeiro-barra--previsto { fill: var(--primary-100); stroke: var(--primary-600); stroke-width: 1; }
.financeiro-barra--recebido { fill: var(--primary-600); }
.financeiro-grafico__rotulo { fill: var(--ink-500); font-size: 9px; font-weight: 700; }
.financeiro-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: .6rem;
  color: var(--ink-600);
  font-size: .8rem;
}
.financeiro-legenda__marca {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: .35rem;
  border-radius: 3px;
  vertical-align: middle;
}
.financeiro-legenda__marca--previsto { border: 1px solid var(--primary-600); background: var(--primary-100); }
.financeiro-legenda__marca--recebido { background: var(--primary-600); }

/* Tabela por aluno: no celular e uma pilha de cartoes (grade de 1 coluna,
   cada campo com o rotulo por cima via `data-rotulo`); a partir de 600px
   vira linhas de verdade. Nada de <table> no projeto (o resto da area do
   professor tambem usa grade em <div>). */
.financeiro-tabela { display: grid; gap: .5rem; margin-top: .75rem; }
.financeiro-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .3rem;
  min-width: 0;
  padding: .75rem .85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfe;
}
.financeiro-linha--cabecalho { display: none; }
.financeiro-linha span[data-rotulo]::before {
  display: block;
  color: var(--ink-500);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  content: attr(data-rotulo);
}
.financeiro-linha__aluno { font-weight: 800; }

.financeiro-aulas { display: grid; gap: .6rem; margin-top: .75rem; }
.financeiro-aula {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .5rem .8rem;
  align-items: center;
  min-width: 0;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcfe;
}
.financeiro-aula--cancelada { opacity: .68; background: var(--soft); }
.financeiro-aula__data {
  display: grid;
  width: 52px;
  min-height: 44px;
  place-content: center;
  border-radius: 10px;
  color: var(--primary-700);
  background: var(--primary-100);
  font-size: .8rem;
  font-weight: 900;
  text-align: center;
}
.financeiro-aula__main { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; min-width: 0; }
.financeiro-aula__main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.financeiro-aula__valor {
  grid-column: 1 / -1;
  min-width: 0;
  color: var(--ink-800);
  font-weight: 800;
}
.financeiro-aula__acao { grid-column: 1 / -1; min-width: 0; }

@media (min-width: 600px) {
  .financeiro-linha--cabecalho { display: grid; }
  .financeiro-linha {
    grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
    align-items: center;
    padding: .55rem .3rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
  }
  .financeiro-linha--cabecalho {
    padding-bottom: .35rem;
    color: var(--ink-500);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
  }
  .financeiro-linha span[data-rotulo]::before { display: none; }

  .financeiro-aula { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .financeiro-aula__valor,
  .financeiro-aula__acao { grid-column: auto; }
}

/* ==========================================================================
   D5 (ESPECIFICACAO 17): "Movimento . ultimos N dias" e "Acontecendo agora"
   — a Central de Comando do painel. `auto-fit`/`minmax(0, 1fr)` em vez de
   colunas fixas em `1fr`: faixa de grade fixa nao encolhe abaixo do
   conteudo (regra 9 do CLAUDE.md) e vaza no celular.
   ========================================================================== */
.movimento-card__topo { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
.movimento-card__topo h2 { margin-bottom: 0; }
.movimento-card__eyebrow { color: var(--verde-topo); }
.movimento-card__selo {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  padding: .4rem .8rem;
  border: 1px solid rgba(127, 224, 200, .35);
  border-radius: 999px;
  color: var(--verde-topo);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.movimento-card__selo i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--verde-topo); }
/* Os cartoes ficam DENTRO do bloco escuro, cada um com a propria moldura e
   um fio colorido em cima — o desenho da Central de Comando do Decole que o
   dono mandou em 16/09 ("os cards ficam dentro"). */
.movimento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: .75rem;
}
.movimento-stat {
  display: grid;
  gap: .35rem;
  align-content: start;
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-top: 3px solid var(--fio, var(--verde-topo));
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
}
.movimento-stat--1 { --fio: var(--verde-topo); }
.movimento-stat--2 { --fio: #8fa3ff; }
.movimento-stat--3 { --fio: #f5c04a; }
.movimento-stat--4 { --fio: #c39bff; }
.movimento-stat--5 { --fio: #ff9bb0; }
.movimento-stat--6 { --fio: #7fc4e0; }
.movimento-stat__label { color: #c9d0df; font-size: .82rem; font-weight: 750; }
.movimento-stat__value { overflow-wrap: anywhere; color: #fff; font-size: 2rem; line-height: 1.1; }
.movimento-stat__value--texto { font-size: .95rem; font-weight: 750; line-height: 1.3; }
.movimento-stat__comparacao { color: #aeb7c9; font-size: .8rem; line-height: 1.35; }
.movimento-stat__comparacao::before { content: "— "; }
.movimento-card__subtitulo { margin: 0 0 .6rem; color: #aeb7c9; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.movimento-grid + .movimento-card__subtitulo { margin-top: 1.1rem; }
.movimento-stat__icone { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; }
.movimento-stat__icone .ui-icon { width: 18px; height: 18px; }
.movimento-stat__link { color: var(--verde-topo); font-weight: 750; text-decoration: none; }
.movimento-stat__link:hover { text-decoration: underline; }

/* O sino do canto SAIU em 18/09 (ordem do dono): a novidade passou para o
   ponto vermelho ao lado do icone do item que mudou — ver
   `.ponto-de-novidade`, mais abaixo. O cabecalho do celular continua com a
   sua linha de acoes, agora so com "Conta". */
.mobile-header__acoes { display: flex; gap: .5rem; align-items: center; }
.movimento-bloco { margin-bottom: 1rem; }

/* Atividades (ESPECIFICACAO §6). Os quatro estados do §6.5 (mais
   "corrigida") reaproveitam o mesmo `.status-pill` das telas de aluno — cada
   um com sua propria cor, para o professor e o responsavel lerem o estado
   sem abrir a atividade. */
.status-pill--nao_visualizada { color: var(--rose-700); background: var(--rose-100); }
.status-pill--visualizada { color: var(--amber-700); background: var(--amber-100); }
.status-pill--entregue { color: var(--secondary-700); background: var(--secondary-100); }
.status-pill--corrigida { color: var(--primary-700); background: var(--primary-100); }

/* O filtro por aluno, em cima da lista de atividades do professor. */
.filtro-alunos { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.filtro-alunos .soft-badge { border: 1px solid transparent; text-decoration: none; }
.soft-badge--ativo { color: #fff; background: var(--primary-600); }

/* A lista de atividades dentro de um cartao (area do aluno/responsavel e
   ficha do professor): cada linha e um `min-width: 0` a mais para a grade
   nao vazar no celular (CLAUDE.md 1 e 9). */
.activity-list { display: grid; gap: .6rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem .9rem;
  align-items: center;
  min-width: 0;
  padding: .85rem .9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfe;
}
/* O titulo QUEBRA a linha em vez de sumir na reticencia: no desktop a
   coluna do titulo era espremida pela pilula e pelo botao ate sobrar so
   "Ve / em / 3 / dias" (foto do dono, 16/09). A pilula desce para baixo do
   prazo, e a acao e um botao so, a direita. */
.activity-row__main { display: grid; gap: .3rem; min-width: 0; justify-items: start; }
.activity-row__main h4 { margin-bottom: 0; overflow-wrap: anywhere; font-size: .95rem; }
.activity-row__main p { margin-bottom: 0; color: var(--ink-500); font-size: .8rem; }
.activity-row__acao { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: flex-end; }
@media (max-width: 599px) {
  .activity-row { grid-template-columns: minmax(0, 1fr); }
  .activity-row__acao { justify-content: flex-start; }
}

/* Os cartoes por professor na area do aluno/responsavel: cada um carrega
   uma lista de atividades, entao NAO cabem em tres colunas como os cartoes
   de recurso da landing — no desktop o titulo quebrava palavra por palavra
   (foto do dono, 16/09). Uma coluna ate 900px, duas acima. */
.area-grid { display: grid; gap: 1rem; margin-top: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* O PONTO DE NOVIDADE (ordem do dono, 18/09): *"deixar ao lado do icone qdo
   houver uma alteracao"*. Vermelho, sem numero, colado no canto do icone —
   na barra lateral e na barra de abas do celular, com a mesma classe. Ele
   nao conta nada: diz "chegou coisa de OUTRA pessoa aqui desde a sua ultima
   visita", e some no clique (`app/servicos/novidades.py`).

   Sem `style=` em lugar nenhum: a CSP nao tem `unsafe-inline` (CLAUDE.md 8),
   e a geometria toda vive aqui.

   A `borda` na cor do fundo e o que separa o ponto do icone escuro do item
   ativo — sem ela o vermelho encosta no preto e some. */
.nav-item__icon, .mobile-tab__icon, .student-nav__icon { position: relative; }
.ponto-de-novidade {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--surface, #fff);
  border-radius: 50%;
  background: var(--rose-700, #b73858);
}

/* A bolinha NUMERICA continua existindo — so na area ADMIN, onde ela conta
   chamados nao lidos de verdade (§22). Na area do professor e do aluno ela
   foi substituida pelo ponto acima. */
.nav-item__badge, .mobile-tab__badge {
  position: absolute;
  top: -5px;
  right: -6px;
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--rose-700);
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
}
.mobile-tabbar--quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }

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