/*
 * SGA Carapicuíba — folha de estilo.
 *
 * Segue o "Tema Colaborativa" (system design do DashColab): a arquitetura de tokens, a escala
 * tipográfica, a tabela de raios, a sombra única e as 12 leis. O que muda são os VALORES dos
 * tokens de cor: o SGA é da SME Carapicuíba, não da Colaborativa, e precisa dos dois modos —
 * então usa o par do painel DashColab (`app/public/styles.css`), que é o que a própria seção
 * "O irmão escuro" indica para sistema que tem claro e escuro. Nenhuma cor literal vive dentro
 * de um bloco de tema: troca-se o valor da variável, nunca a regra.
 *
 * As leis que este arquivo defende, cada uma com o comentário no ponto onde vale:
 *   cor nunca é o único sinal · alvo de clique ≥ 32px · peso da fonte não muda entre ativo e
 *   inativo · nenhuma altura de cromo escrita à mão · um scroller por região · larguras em ch ·
 *   tabular-nums em coluna de número · aviso fica até fechar, com Copiar · um anel de foco só.
 */

:root {
  /*
   * MARCA — os valores são os do site da Colaborativa (colaborativa.com.br), lidos da própria
   * página, não aproximados de memória:
   *
   *   verde   #a0bc4e   a cor da marca: botão, selo, o anel do logotipo
   *   teal    #00a99d   a segunda cor, das peças de apoio
   *   tinta   #0e0e0e   o preto dos títulos
   *   texto   #6d6f72   o cinza do corpo
   *   apoio   #9e9fa8   o cinza secundário
   *
   * O verde da marca NÃO serve como cor de texto: #a0bc4e sobre branco dá 2,2:1, e o site o usa
   * só como fundo de botão. Quem age em texto (link, aba ativa, anel de foco) usa `--accent`,
   * o mesmo verde escurecido até 4,9:1 — a identidade é a mesma, a leitura é possível.
   */
  --marca: #a0bc4e;         /* fundo de botão primário, selo de destaque, a cor que identifica */
  --sobre-marca: #12140c;   /* o que se escreve em cima do verde: 9:1, contra os 2,1:1 do branco do site */
  --marca-teal: #00a99d;    /* a segunda da marca */
  --accent: #5c7a1e;        /* o que age EM TEXTO: link, aba ativa, anel de foco (4,9:1 sobre branco) */
  --accent-soft: #eef3e0;   /* fundo de estado ativo */
  --accent-borda: #d4e0b4;

  /* neutros — o cinza do site é de verdade cinza; o viés é levemente verde, para não brigar */
  --ink: #0e0e0e;
  --ink-soft: #6d6f72;
  --ink-faint: #9e9fa8;     /* gráfico e apoio */
  --line: #d8dad2;          /* a única borda do sistema. 1px, sempre */
  --paper: #f1f3ee;         /* fundo de trabalho: claro, neutro e com leve viés institucional */
  --surface: #ffffff;
  --surface-2: #e8ece4;     /* degrau de apoio para estados inativos e áreas secundárias */

  /* semânticas — independentes da marca. "Bom" é o teal: da marca, mas nunca o verde do accent,
     senão "salvo com sucesso" e "isto é um link" viram a mesma cor. */
  --ok: #00807a;
  --erro: #b23d1c;
  --erro-suave: #f8e6df;
  --erro-borda: #efc9b9;
  --alerta: #b26a1c;
  --alerta-suave: #f8efdd;
  --alerta-borda: #e6cf8b;

  /* forma: o raio diz o que a peça É, e é a única coisa que ele diz.
     14px do cartão e a pílula são os do site. */
  --raio: 14px;             /* contêiner: cartão, modal, painel */
  --raio-campo: 8px;        /* peça interna: campo, aviso, faixa, item de lista */
  --raio-pilula: 999px;     /* controle: botão, aba, chip, selo, avatar */
  --sombra: 0 1px 3px rgb(14 14 14 / 7%), 0 6px 20px rgb(14 14 14 / 6%);
  --menu-largura: 264px;
  --icone-nav: 19px;
  --icone-vazio: 48px;
  --menu-popover-top: 100px;
  --alvo-minimo: 32px;
  /* Escrita por `medirRodape()` a cada mudança de tamanho da barra do telefone. Zero no
     computador, onde a barra está `display: none` — assim o afastamento do rodapé pode ser
     declarado uma vez só, fora de qualquer media query. */
  --altura-rodape: 0px;
  --espaco-menu: 18px;
  --espaco-menu-interno: 24px;
  --espaco-nav: 6px;
  --espaco-subaba: 7px;
  --espaco-mobile: 14px;
  --espaco-controle: 8px;

  /*
   * O site usa "stolzl" nos títulos e DM Sans no corpo. Stolzl é comercial e não se serve daqui;
   * Outfit é a geométrica aberta mais próxima — mesma construção circular, mesma cintura alta.
   * A DM Sans do corpo é literalmente a do site.
   */
  --fonte-titulo: "Outfit", "DM Sans", system-ui, sans-serif;
  --fonte: "DM Sans", system-ui, -apple-system, Arial, sans-serif;
  --fonte-mono: "DM Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  color-scheme: light;
}


/*
 * Os valores escuros vivem num lugar SÓ. Não há bloco `@media (prefers-color-scheme: dark)`
 * aqui de propósito: com ele, sustentar a escolha explícita ("quero claro mesmo com o Windows
 * escuro") exigiria repetir estes mesmos valores num segundo seletor, e dois estados para manter
 * em sincronia um dia divergem. Quem resolve a preferência do sistema é o script do `<head>`,
 * antes da primeira pintura: ele carimba `data-tema` no `<html>` e o CSS só obedece.
 */
:root[data-tema="escuro"] {
  /* O verde da marca sobrevive ao fundo escuro e continua sendo ele quem identifica; o que muda
     é o accent de texto, que agora precisa ser CLARO sobre escuro em vez de escuro sobre claro. */
  --marca: #a0bc4e;
  --marca-teal: #22c7ba;
  --accent: #b9d46a;
  --accent-soft: #232a11;
  --accent-borda: #3d4a1e;
  --ink: #ecedea;
  --ink-soft: #a9aba6;
  --ink-faint: #7d8079;
  --line: #343a31;
  --paper: #10130f;
  --surface: #1a1c19;
  --surface-2: #232620;
  --ok: #4ecfc2;
  --erro: #e8794f;
  --erro-suave: #2d1a12;
  --erro-borda: #4a2a1c;
  --alerta: #e0a95c;
  --alerta-suave: #2a2113;
  --alerta-borda: #4a3a1c;
  --sombra: 0 1px 3px rgb(0 0 0 / 40%), 0 6px 20px rgb(0 0 0 / 28%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}
/* `hidden` tem de vencer o `display` das nossas próprias regras. Sem isto, `.tela-login`
   (display:grid) e `#app` (display:flex) ignoram o atributo e a tela de entrada fica em cima
   do sistema já carregado — a regra do agente de usuário perde para a nossa por especificidade. */
[hidden] { display: none !important; }
.oculto { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: var(--ink-faint) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-faint); border-radius: 8px; }

/* Um anel de foco só, declarado num lugar só (lei 12). Se alguém sobrescrever `outline`
   em algum componente, é aqui que se descobre. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.mono { font-family: var(--fonte-mono); }
.suave { color: var(--ink-soft); }
.fraco { color: var(--ink-faint); }
.numero { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* ══ casca ══════════════════════════════════════════════════════════════ */

#app { display: flex; flex-direction: column; min-height: 100%; }

/* Lei 6: o que gruda é o CONTÊINER. Cabeçalho e faixa de modo dev vão dentro de um único
   `.topo-fixo`; nenhuma peça de dentro tem `top` próprio nem altura escrita à mão. */
.topo-fixo { position: sticky; top: 0; z-index: 30; }
.topo {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 12px clamp(16px, 3vw, 36px);
}
.marca-topo { display: flex; align-items: center; gap: 9px; }
/* O anel aberto do logotipo da Colaborativa: um traço só, sem fundo, do tamanho de uma letra. */
.marca-topo .anel { width: 22px; height: 22px; color: var(--marca); flex: none; }
.marca-topo strong { font-family: var(--fonte-titulo); font-weight: 600; font-size: 17px; letter-spacing: -.03em; }
.marca-topo .eyebrow { margin: 0; }

/*
 * `flex-wrap` é a rede de segurança: sem ele a navegação NÃO quebra e NÃO rola — ela
 * transborda a própria faixa e pinta por cima do bloco do usuário, que fica ao lado. Foi
 * exatamente o que aconteceu quando o lado direito ganhou o seletor de posição do menu e
 * roubou a largura que sobrava. Rolagem horizontal não serve aqui: `overflow` criaria
 * contexto de recorte e cortaria os menus suspensos, que são posicionados por fora.
 */
.abas { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.aba-direta { display: inline-flex; align-items: center; gap: 9px; }
.grupo-nav { position: relative; }
.grupo-nav summary {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 11px;
  border-radius: var(--raio-pilula); color: var(--ink-soft); cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.grupo-nav summary::-webkit-details-marker { display: none; }
.grupo-nav summary:hover, .grupo-nav[open] summary { color: var(--ink); background: var(--paper); }
.grupo-nav.atual summary { color: var(--accent); background: var(--accent-soft); }
.grupo-nav .chevron { font-size: 15px; line-height: 1; transition: transform .18s ease; }
.grupo-nav[open] .chevron { transform: rotate(180deg); }
.grupo-nav-itens {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 190px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio);
  box-shadow: var(--sombra); z-index: 40;
}
.grupo-nav-itens .aba { display: block; width: 100%; text-align: left; }
.grupo-nav-itens .aba { display: flex; align-items: center; gap: 9px; }
.icone-nav { width: var(--icone-nav); height: var(--icone-nav); object-fit: contain; flex: none; opacity: .72; }
.aba.ativa .icone-nav, .aba:hover .icone-nav { opacity: 1; }
:root[data-tema="escuro"] .icone-nav { filter: brightness(0) invert(1); opacity: .78; }
/* Lei 5: o peso da fonte é o MESMO na aba ativa e nas inativas. Negrito só na ativa alarga o
   rótulo, e perto do ponto de quebra o cabeçalho reflowa a cada troca. Ativa se marca por cor
   e fundo, que não mudam largura. */
.aba {
  border: 0; background: none; font: inherit; font-weight: 600; font-size: 14px;
  color: var(--ink-soft); padding: 7px 13px; border-radius: var(--raio-pilula);
  cursor: pointer; white-space: nowrap; min-height: 32px;
}
.aba:hover { color: var(--ink); background: var(--paper); }
.aba.ativa { color: var(--accent); background: var(--accent-soft); }

/* O lateral vira uma coluna própria para deixar a navegação sempre visível durante tarefas longas.
   O conteúdo ganha exatamente o espaço do menu; sem isso a tela ficaria espremida e o max-width
   centralizado passaria a parecer deslocado para um dos lados. */
:root[data-menu="esquerda"] #app,
:root[data-menu="direita"] #app { min-height: 100%; }
:root[data-menu="esquerda"] #app { padding-left: var(--menu-largura); }
:root[data-menu="direita"] #app { padding-right: var(--menu-largura); }
/*
 * O MENU LATERAL É UMA COLUNA FLEX, e não um bloco com `.topo` de 100vh dentro.
 *
 * `#faixa-aviso` é IRMÃ de `.topo` dentro de `.topo-fixo`. Enquanto `.topo` reivindicava a
 * altura inteira da janela, a faixa era empurrada para baixo de um contêiner `position: fixed`
 * com `bottom: 0` — ou seja, para fora da tela, sem barra de rolagem que a alcançasse. O aviso
 * "troque a sua senha: ela foi definida por outra pessoa" ficava INVISÍVEL para quem usa o menu
 * à esquerda ou à direita, que é o padrão; ele só aparecia no layout "Topo".
 *
 * Era um aviso de segurança que não avisava ninguém. A coluna flex dá lugar aos dois: o menu
 * ocupa o que sobra e rola sozinho se precisar, e a faixa fica presa embaixo, sempre visível.
 */
:root[data-menu="esquerda"] .topo-fixo,
:root[data-menu="direita"] .topo-fixo {
  position: fixed; top: 0; bottom: 0; width: var(--menu-largura); z-index: 30;
  display: flex; flex-direction: column;
}
:root[data-menu="esquerda"] .topo-fixo { left: 0; }
:root[data-menu="direita"] .topo-fixo { right: 0; }
:root[data-menu="esquerda"] .topo,
:root[data-menu="direita"] .topo {
  /* `flex: 1` com `min-height: 0` no lugar de `height: 100vh`: é o que deixa a faixa caber. */
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--espaco-menu); padding: var(--espaco-menu-interno) var(--espaco-menu);
}
:root[data-menu="esquerda"] .marca-topo,
:root[data-menu="direita"] .marca-topo { padding: 0 4px 18px; border-bottom: 1px solid var(--line); }
:root[data-menu="esquerda"] .abas,
:root[data-menu="direita"] .abas { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 6px; overflow-y: auto;
  /* nowrap explícito: a barra do topo precisa de `wrap` (senão transborda por cima do bloco do
     usuário), mas aqui a navegação é COLUNA com altura limitada — com `wrap` os itens quebrariam
     numa segunda coluna dentro de uma barra estreita em vez de rolar. */
  flex-wrap: nowrap; }
:root[data-menu="esquerda"] .grupo-nav,
:root[data-menu="direita"] .grupo-nav { width: 100%; }
:root[data-menu="esquerda"] .grupo-nav summary,
:root[data-menu="direita"] .grupo-nav summary { width: 100%; justify-content: space-between; }
:root[data-menu="esquerda"] .aba-direta,
:root[data-menu="direita"] .aba-direta { width: 100%; justify-content: flex-start; }
:root[data-menu="esquerda"] .grupo-nav-itens,
:root[data-menu="direita"] .grupo-nav-itens { position: static; min-width: 0; margin: 2px 0 6px; box-shadow: none; }
:root[data-menu="esquerda"] .topo-direita,
:root[data-menu="direita"] .topo-direita { margin-top: auto; flex-wrap: wrap; justify-content: center; }
:root[data-menu="esquerda"] .quem-sou,
:root[data-menu="direita"] .quem-sou { width: 100%; text-align: center; }
.icone-subaba { width: var(--icone-nav); height: var(--icone-nav); object-fit: contain; opacity: .72; }
.sub-aba { display: inline-flex; align-items: center; gap: var(--espaco-subaba); }
.sub-aba.ativa .icone-subaba, .sub-aba:hover .icone-subaba { opacity: 1; }
.icone-vazio { width: var(--icone-vazio); height: var(--icone-vazio); display: block; margin: 0 auto 10px; opacity: .55; object-fit: contain; }

/* No topo, os controles são a última coisa que a pessoa consulta, mas não podem ficar por cima
   do nome de quem está logado. Em uma largura intermediária eles ganham uma segunda faixa; sem
   ela o cabeçalho sobrepõe textos justamente onde a pessoa procura contexto e saída. */
@media (min-width: 641px) and (max-width: 1280px) {
  :root[data-menu="topo"] .topo { grid-template-columns: auto minmax(0, 1fr); }
  :root[data-menu="topo"] .topo-direita {
    grid-column: 1 / -1; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: var(--espaco-controle);
  }
}

.topo-direita { display: flex; align-items: center; gap: 10px; }

/* Seletor de tema. É o `.modo-vista` do sistema de origem, sem alteração: pílula com os
   botões dentro e `aria-pressed` no ativo — estado que o leitor de tela também enxerga, não
   só quem distingue o fundo (lei 2). Abaixo de 560px sobra o ícone, senão as três palavras
   empurram o botão de sair para uma linha só dele. */
.modo-vista { display: inline-flex; border: 1px solid var(--line); border-radius: var(--raio-pilula); background: var(--surface); padding: 2px; }
.modo-vista button {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px;
  color: var(--ink-faint); padding: 5px 12px; border-radius: var(--raio-pilula);
  min-width: var(--alvo-minimo); min-height: var(--alvo-minimo);
}
.modo-vista button:hover { color: var(--ink); }
.modo-vista button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
@media (max-width: 1180px) { .modo-vista button span { display: none; } }
.quem-sou { text-align: right; line-height: 1.25; }
.quem-sou strong { display: block; font-size: 13px; }
.quem-sou span { font-size: 12px; color: var(--ink-faint); }
/* Gradiente da marca: só em duas peças, e o avatar é uma delas. */
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, #000) 100%);
  color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .4px;
  box-shadow: var(--sombra);
}

/* Faixa de modo de desenvolvimento: quem está logado é escolhido no navegador, sem senha.
   Cor NÃO é o único sinal (lei 2) — ela também diz por escrito o que está acontecendo. */
.faixa-dev {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--alerta-suave); border-bottom: 1px solid var(--alerta-borda);
  padding: 6px 22px; font-size: 13px; color: var(--ink);
}
.faixa-dev b { color: var(--alerta); }
.faixa-dev select {
  font: inherit; font-size: 13px; padding: 5px 9px; width: auto; min-height: 32px;
  border: 1px solid var(--alerta-borda);
  border-radius: var(--raio-campo); background: var(--surface); color: var(--ink);
}

/* ══ abas do rodapé: a navegação do telefone ════════════════════════════ */

/*
 * No telefone, a navegação inteira mora aqui embaixo — quatro módulos escolhidos pelo perfil e
 * um botão "Mais", que abre a gaveta com o resto. Quem escolhe os quatro é `app.js`, onde a
 * decisão está comentada; aqui só se decide como eles se parecem.
 *
 * A barra existe em todo tamanho de tela e o CSS é quem a esconde acima de 640px. Assim a
 * medição de altura que `medirRodape()` faz devolve zero sozinha no computador, e nenhuma
 * regra precisa perguntar se estamos num telefone.
 */
.abas-rodape {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--surface);
  border-top: 1px solid var(--line);
  /* A faixa de gestos do aparelho entra pelo `env()`: sem ela, no iPhone a linha de rótulos
     fica embaixo da barra preta que o dedo usa para sair do app. */
  padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
}
/* O conteúdo passa POR BAIXO da barra em vez de acabar nela — é o que separa um rodapé de app
   de uma faixa colada no fim da página. Fundo opaco continua sendo o padrão: onde não há
   `backdrop-filter`, translucidez sem desfoque deixaria a tabela legível através das abas. */
@supports (backdrop-filter: blur(12px)) {
  .abas-rodape {
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: blur(16px) saturate(140%);
  }
}

.aba-rodape {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: none; font: inherit; cursor: pointer;
  padding: 4px 2px; min-height: 50px; min-width: 0;
  /*
   * `--ink-soft` e não `--ink-faint`, que é o cinza das abas inativas no resto do sistema.
   *
   * O rótulo daqui tem 11px — é o menor texto do SGA — e é a navegação PRINCIPAL de quem abre
   * o sistema no telefone. `--ink-faint` sobre branco dá 2,6:1, abaixo do mínimo de 4,5:1;
   * `--ink-soft` dá 5:1 e continua sendo visivelmente mais apagado que o verde da aba atual,
   * que é o que a hierarquia precisa dizer.
   */
  color: var(--ink-soft);
  /* O retângulo cinza que o Android pinta a cada toque é a marca registrada de "isto é uma
     página web". A pílula abaixo já responde ao dedo. */
  -webkit-tap-highlight-color: transparent;
}
.pilula-rodape {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 26px; border-radius: var(--raio-pilula);
  transition: background-color .16s ease, transform .12s ease;
}
.aba-rodape:active .pilula-rodape { transform: scale(.9); }
/* Lei 5: o peso da fonte é o mesmo na ativa e nas inativas. Num rodapé de colunas iguais,
   negrito só na ativa faria "Atribuição" virar reticências justamente quando selecionada. */
.rotulo-rodape {
  font-size: 11px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.icone-rodape { width: 20px; height: 20px; object-fit: contain; opacity: .7; }
:root[data-tema="escuro"] .icone-rodape { filter: brightness(0) invert(1); opacity: .66; }

/* Lei 2: a aba atual não se marca só pela cor — ganha a pílula atrás do ícone, que é FORMA.
   Quem não distingue o verde do cinza continua vendo qual das cinco está selecionada. */
.aba-rodape.ativa { color: var(--accent); }
.aba-rodape.ativa .pilula-rodape { background: var(--accent-soft); }
.aba-rodape.ativa .icone-rodape,
:root[data-tema="escuro"] .aba-rodape.ativa .icone-rodape { opacity: 1; }

/* Os três pontos do "Mais", desenhados em CSS: a família de ícones do sistema (docs/arte/) não
   tem um de "menu", e um PNG fora da família destoaria ao lado dos outros quatro. Em
   `currentColor`, então ele acende junto com o rótulo quando a gaveta é a tela atual. */
.icone-mais {
  width: 20px; height: 20px; display: block; opacity: .7;
  background:
    radial-gradient(circle 2px at 3.5px 50%, currentColor 98%, transparent),
    radial-gradient(circle 2px at 10px 50%, currentColor 98%, transparent),
    radial-gradient(circle 2px at 16.5px 50%, currentColor 98%, transparent);
}
.aba-rodape.ativa .icone-mais { opacity: 1; }

/* ── a folha do "Mais" ───────────────────────────────────────────────── */

/*
 * Ancorada embaixo, subindo de onde o dedo a chamou. `margin: auto auto 0` derruba a
 * centralização que o navegador aplica sozinho a todo `<dialog>`; sem ela a gaveta nasceria no
 * meio da tela, longe do botão que a abriu.
 */
dialog.folha-mais {
  margin: auto auto 0; width: 100%; max-width: 560px; max-height: 86vh;
  padding: 0; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--raio) var(--raio) 0 0;
  box-shadow: var(--sombra);
}
/* `display` só com `[open]`, e isto não é detalhe: a regra do navegador que esconde um
   `<dialog>` fechado tem a MESMA especificidade que `dialog.folha-mais` e perde por ser do
   agente de usuário — declarar `display: flex` no bloco de cima deixaria a gaveta aberta na
   tela desde o carregamento. */
dialog.folha-mais[open] { display: flex; flex-direction: column; animation: sobe .2s ease; }
@keyframes sobe { from { transform: translateY(18px); opacity: 0; } }

.folha-cab {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 16px 18px 14px; border-bottom: 1px solid var(--line);
}
.folha-quem { flex: 1; min-width: 0; line-height: 1.3; }
.folha-quem strong { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folha-quem span { font-size: 12px; color: var(--ink-faint); }
.folha-cab .fechar {
  flex: none; border: 0; background: none; color: var(--ink-faint);
  font-size: 20px; line-height: 1; cursor: pointer;
  min-width: 40px; min-height: 40px; display: grid; place-items: center;
  border-radius: var(--raio-pilula);
}
.folha-cab .fechar:hover { background: var(--paper); color: var(--ink); }

/* Lei 7, um scroller por região: rola a LISTA, não a folha inteira nem a página atrás dela. */
.folha-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 6px; }
.folha-grupo { margin: 16px 0 6px; }
.folha-grupo:first-child { margin-top: 0; }
.folha-itens { display: grid; gap: 2px; }
.folha-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600;
  color: var(--ink); padding: 11px 12px; border-radius: var(--raio-campo);
  min-height: 46px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.folha-item:hover, .folha-item:active { background: var(--paper); }
/* Lei 2 outra vez: a tela aberta ganha um traço à esquerda além do fundo e da cor do texto. */
.folha-item.ativa {
  background: var(--accent-soft); color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.folha-pe {
  flex: none; border-top: 1px solid var(--line);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.folha-pe > * { width: 100%; }

/* ══ telas ══════════════════════════════════════════════════════════════ */

main { flex: 1; }
.tela { width: 100%; max-width: 1180px; margin: 0 auto; padding: 32px 24px 72px; }
.pular-conteudo {
  position: fixed; z-index: 100; left: 16px; top: -60px; padding: 10px 14px;
  background: var(--ink); color: var(--surface); border-radius: var(--raio-campo);
}
.pular-conteudo:focus { top: 16px; }

.eyebrow {
  font-family: var(--fonte-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 6px;
}
/* Escala do documento: 30 título de página, 19 título de tela, 15 título de cartão. */
h1 { font-family: var(--fonte-titulo); font-weight: 500; font-size: 32px; line-height: 1.12;
     margin: 0; letter-spacing: -.035em; text-wrap: balance; }
h2 { font-family: var(--fonte-titulo); font-weight: 500; font-size: 20px; margin: 0; letter-spacing: -.02em; }
h3 { font-family: var(--fonte-titulo); font-size: 15px; margin: 0; font-weight: 500; letter-spacing: -.01em; }
/* Lei 8: medida de leitura em `ch`, não em pixel — acompanha quem trocar a tipografia. */
.sub { color: var(--ink-soft); font-size: 13px; margin: 6px 0 0; max-width: 78ch; }

.linha-titulo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.linha-titulo .acoes { display: flex; gap: 8px; flex-wrap: wrap; }

section.bloco { margin-top: 30px; }
section.bloco > h2 { padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }

.sub-abas { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.sub-aba {
  border: 0; border-bottom: 2px solid transparent; background: none; font: inherit;
  font-size: 14px; font-weight: 600; color: var(--ink-faint);
  padding: 8px 12px; cursor: pointer; white-space: nowrap; margin-bottom: -1px; min-height: 32px;
}
.sub-aba:hover { color: var(--ink); }
.sub-aba.ativa { color: var(--accent); border-bottom-color: var(--accent); }

/* ══ cartões e KPI ══════════════════════════════════════════════════════ */

/*
 * `min(288px, 100%)` e não `288px` cru — vale para todas as grades desta folha.
 *
 * `minmax(288px, 1fr)` NÃO encolhe abaixo do mínimo: num aparelho de 320px, onde sobram 292 de
 * conteúdo, a faixa continuava medindo os 288 pedidos e a de 340 (`.grid.duas`) empurrava a
 * página inteira para 354 — a tela passava a rolar na horizontal por causa de um cartão de
 * aviso. Com `min(...)`, o mínimo vira "288px, ou a largura disponível, o que for menor".
 */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr)); gap: 16px; }
.grid.duas { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
/* "Nem tudo é cartão": borda, preenchimento, raio e sombra dizem "objeto separado".
   O cartão em grade leva a sombra; a tabela, que é contêiner de leitura, só a borda. */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px;
}
.card.inativo { background: var(--surface-2); border-style: dashed; box-shadow: none; }

.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi .topo-kpi { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
/* min-height de duas linhas: sem isso, o cartão cujo rótulo quebra empurra o número
   para baixo e a fileira de KPIs perde a linha de base comum. */
.kpi .nome { font-size: 13px; color: var(--ink-soft); font-weight: 500; line-height: 1.3; min-height: 2.2em; }
.kpi .valor {
  font-family: var(--fonte-titulo); font-size: 32px; font-weight: 500; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; margin-top: 2px; line-height: 1.15;
}
.kpi .valor.vazio { color: var(--ink-faint); font-size: 16px; font-weight: 500; }
.kpi .meta { font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.kpi .detalhe { font-size: 12px; color: var(--ink-faint); font-family: var(--fonte-mono); margin-top: 3px; }

/* ══ selos ══════════════════════════════════════════════════════════════ */

/* Controle e rótulo de estado: pílula, 11px/700 em caixa alta. Lei 2 — o selo sempre carrega
   a PALAVRA, nunca só o tom; numa tela com dezenas de marcas iguais, cor sozinha não diz nada. */
.selo {
  display: inline-block; flex: none;
  font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--raio-pilula);
  border: 1px solid; white-space: nowrap;
}
/* Os tons são prefixados. Sem o prefixo, `class="selo aviso"` casava TAMBÉM com o
   componente `.aviso` — a caixa de alerta — e o selo herdava padding, borda de 4px à
   esquerda e margem: 47px de altura no lugar de 19. Nome de tom não pode ser nome de
   componente. */
.selo-ok       { color: var(--ok);     border-color: color-mix(in srgb, var(--ok) 40%, transparent);  background: color-mix(in srgb, var(--ok) 9%, transparent); }
.selo-aviso    { color: var(--alerta); border-color: var(--alerta-borda); background: var(--alerta-suave); }
.selo-perigo   { color: var(--erro);   border-color: var(--erro-borda);   background: var(--erro-suave); }
.selo-neutro   { color: var(--ink-faint); border-color: var(--line); background: var(--paper); }
.selo-destaque { color: var(--accent); border-color: var(--accent-borda); background: var(--accent-soft); }

/* ══ avisos ═════════════════════════════════════════════════════════════ */

/* Peça interna: raio de campo e barra à esquerda — forma além da cor (lei 2). */
.aviso {
  border-radius: var(--raio-campo); padding: 12px 16px; font-size: 14px;
  border: 1px solid; border-left-width: 4px; margin-bottom: 16px; line-height: 1.5;
}
.aviso.info    { background: var(--accent-soft); border-color: var(--accent-borda); border-left-color: var(--accent); }
.aviso.atencao { background: var(--alerta-suave); border-color: var(--alerta-borda); border-left-color: var(--alerta); }
.aviso.erro    { background: var(--erro-suave); border-color: var(--erro-borda); border-left-color: var(--erro); }
/* O tom que faltava: a caixa de "deu certo". Os outros três avisam, alertam ou recusam —
   nenhum deles serve para dizer "você terminou" sem parecer que alguma coisa está errada. */
.aviso.ok      { background: color-mix(in srgb, var(--ok) 8%, transparent); border-color: color-mix(in srgb, var(--ok) 32%, transparent); border-left-color: var(--ok); }
.aviso.ok b    { color: var(--ok); }
.aviso b { color: var(--alerta); }
.aviso.erro b { color: var(--erro); }
.aviso.info b { color: var(--accent); }
.aviso ul { margin: 6px 0 0; padding-left: 20px; }
.aviso p { margin: 6px 0 0; max-width: 78ch; }

/* Trava do M-19: a tela diz por que o campo está fechado, em vez de deixar
   digitar e perder o trabalho no 423. */
.aviso.travado { display: flex; gap: 12px; align-items: flex-start; }
.aviso.travado .cadeado { font-size: 16px; line-height: 1.4; }

/* ══ tabelas ════════════════════════════════════════════════════════════ */

/* Lei 7 — um scroller por região: a tabela NÃO tem altura máxima. Quem rola é a página.
   Uma tabela alta dentro de um scroller próprio dentro da página que também rola são dois
   scrolls aninhados, e a pessoa chega ao fim da lista sem saber que ainda havia mais.
   Sobra só o overflow horizontal, que é do contêiner e não compete com nada. */
.tabela-wrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--raio); overflow-x: auto;
}
table.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
/*
 * O cabeçalho NÃO gruda, e isso é escolha, não esquecimento.
 *
 * `overflow-x: auto` no contêiner o torna um contexto de rolagem nos dois eixos: um `th`
 * com `position: sticky` passa a grudar dentro DELE, não da janela, e como o contêiner não
 * tem altura máxima ele nunca rola na vertical — o grude seria decorativo. Fazê-lo funcionar
 * de verdade exigiria dar altura máxima ao contêiner, e aí seriam dois scrollers aninhados
 * na mesma região, que é o que a lei 7 proíbe. Entre um cabeçalho que acompanha e uma pessoa
 * que chega ao fim da lista sem saber que havia mais, a lei escolhe a segunda.
 */
table.tabela th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); font-weight: 700; padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper); white-space: nowrap;
}
table.tabela td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.tabela tr:last-child td { border-bottom: 0; }
table.tabela tbody tr:hover { background: var(--paper); }
table.tabela tr.clicavel { cursor: pointer; }
table.tabela tr.clicavel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-soft); }
/* Lei 9: coluna de número se lê de cima a baixo — dígito de largura fixa. */
table.tabela td.numero, table.tabela th.numero { text-align: right; font-variant-numeric: tabular-nums; }
table.tabela td.acoes { text-align: right; white-space: nowrap; }
/*
 * Fileira de botões dentro de uma célula de ações.
 *
 * A Manutenção de turmas (M-13) tem oito colunas e três botões na última. Com os botões numa
 * linha rígida, a largura MÍNIMA daquela célula era de 260px e a da tabela inteira, 934px — e
 * em 1280px com o menu lateral sobram 967px para a tabela. Trinta e três pixels de folga: um
 * nome de professor mais comprido, um código de ata maior, e a tabela passava a rolar na
 * horizontal com Corrigir/Reatribuir/Liberar do lado de fora — presentes no DOM, invisíveis
 * para quem usa. Deixando os botões quebrarem linha, a mesma tabela desce para 786px de
 * mínimo e a coluna de ações para de ser a refém da largura da janela.
 * `flex-wrap` vence o `white-space: nowrap` da célula: quem decide a quebra entre itens de um
 * flex é o flex, não o espaço em branco.
 */
.acoes-linha { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.vazio-tabela { padding: 28px 16px; text-align: center; color: var(--ink-faint); font-size: 14px; }

.posicao { font-family: var(--fonte-mono); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--accent); }
.total-pontos { font-weight: 700; font-variant-numeric: tabular-nums; }
.total-pontos.negativo { color: var(--erro); }

/* ══ botões e campos ════════════════════════════════════════════════════ */

/* Lei 3: alvo de clique mínimo de 32px. Vale inclusive para o botão pequeno de tabela e
   para o × de diálogo — o × de meia dúzia de pixels pune o dedo e o mouse impreciso igualmente. */
.botao-primario, .botao-fantasma, .botao-perigo {
  min-height: 36px; border-radius: var(--raio-pilula); cursor: pointer;
  font: inherit; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.botao-primario {
  background: var(--marca); color: var(--sobre-marca); border: 1px solid var(--marca);
  font-family: var(--fonte-titulo); font-weight: 500; letter-spacing: -.01em; padding: 9px 24px;
}
.botao-primario:hover { filter: brightness(1.06); }
.botao-primario:disabled { opacity: .55; cursor: default; filter: none; }
.botao-fantasma { background: var(--surface); border: 1px solid var(--line); color: var(--ink); padding: 8px 16px; text-decoration: none; }
.botao-fantasma:hover { border-color: var(--accent); color: var(--accent); }
.botao-fantasma:disabled { opacity: .55; cursor: default; border-color: var(--line); color: var(--ink-faint); }
.botao-perigo { background: var(--erro); color: #fff; border: 1px solid var(--erro); font-weight: 700; padding: 8px 18px; }
.botao-mini { font-size: 13px; padding: 4px 12px; min-height: 32px; }

/* O `.link` ganha padding com margem negativa: o alvo cresce sem empurrar o texto ao redor. */
.link {
  color: var(--accent); background: none; border: 0; font: inherit; font-weight: 700;
  cursor: pointer; text-decoration: underline; padding: 6px 4px; margin: -6px -4px;
}

.filtros {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 16px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio);
}
/* Campo para em 560px: input de quase um metro parece vazio e o olho perde o par rótulo-campo. */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 160px; max-width: 560px; }
.campo.largo { flex: 1; min-width: 240px; max-width: none; }
.campo > label { font-size: 14px; font-weight: 500; color: var(--ink-soft); }
input, select, textarea {
  font: inherit; font-size: 14px; padding: 8px 12px; min-height: 36px;
  border: 1px solid var(--line); border-radius: var(--raio-campo);
  background: var(--surface); color: var(--ink); width: 100%;
}
textarea { resize: vertical; min-height: 78px; }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--ink-faint); cursor: not-allowed; }
.dica { font-size: 13px; color: var(--ink-faint); }

/* ══ diálogos ═══════════════════════════════════════════════════════════ */

dialog {
  border: 1px solid var(--line); border-radius: var(--raio);
  background: var(--surface); color: var(--ink);
  max-width: 620px; width: calc(100vw - 40px); padding: 0;
  box-shadow: var(--sombra);
}
dialog.largo { max-width: 900px; }
dialog::backdrop { background: rgb(10 20 18 / 55%); }
.dialogo-cab {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--line);
}
.dialogo-cab h2 { font-size: 19px; }
.dialogo-cab .fechar {
  border: 0; background: none; color: var(--ink-faint); font-size: 18px; line-height: 1;
  cursor: pointer; width: auto; min-width: 32px; min-height: 32px;
  display: grid; place-items: center; border-radius: 6px;
}
.dialogo-cab .fechar:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
/* Um scroller por região: quem rola dentro do diálogo é só o corpo. */
.dialogo-corpo { padding: 20px 22px; max-height: 66vh; overflow: auto; overscroll-behavior: contain; }
.dialogo-pe {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 22px 18px; border-top: 1px solid var(--line);
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.form-grid .largo { grid-column: 1 / -1; }
.form-grid .campo { max-width: none; }

/* ══ roadmap (M-23) ═════════════════════════════════════════════════════ */

/* Colunas do roadmap. O fundo é `--paper` e NÃO há borda: a coluna é um agrupamento, não um
   objeto — "nem tudo é cartão". Quem é objeto ali dentro é o item. */
.colunas-roadmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 14px; align-items: start; }
.coluna-fase { background: var(--paper); border-radius: var(--raio); padding: 14px; }
.coluna-fase > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.coluna-fase h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.coluna-fase .quantos { font-family: var(--fonte-mono); font-size: 12px; color: var(--ink-faint); }
.coluna-fase .nada { color: var(--ink-faint); font-size: 13px; padding: 8px 2px; }

.cartao-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio-campo);
  padding: 12px 13px; margin-bottom: 10px; display: grid; gap: 7px;
  font-size: 14px; cursor: pointer; text-align: left; width: 100%; font-family: inherit;
  color: var(--ink);
}
.cartao-item:hover { border-color: var(--accent); }
.cartao-item .topo-item { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cartao-item .titulo-item { font-weight: 600; line-height: 1.35; }
.cartao-item p { margin: 0; font-size: 13px; color: var(--ink-soft); }
.cartao-item .rodape-item { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--ink-faint); }
/* O mesmo cartão fora do quadro, numa lista de uma coluna: quem só acompanha os próprios
   pedidos não precisa de kanban, precisa de linhas legíveis. */
/* O que espera uma ação sua fica marcado na borda: numa lista longa, é o que a pessoa procura. */
.cartao-item.minha-vez { border-left: 3px solid var(--accent); }

/* Conversa de um item: mesma estrutura da thread do sistema de origem. */
.thread { display: grid; gap: 10px; margin: 4px 0 0; }
.msg { border: 1px solid var(--line); border-radius: var(--raio-campo); padding: 11px 14px; background: var(--surface); }
.msg-quem { font-size: 12px; color: var(--ink-faint); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.msg p { margin: 5px 0 0; font-size: 14px; white-space: pre-wrap; }
/* A resposta de quem estávamos esperando fica marcada: numa thread longa, é a que importa. */
.msg.de-fora { background: var(--accent-soft); border-color: var(--accent-borda); }
/* Nota interna (chamados): só a Supervisão e quem atende leem. A borda tracejada existe para
   ninguém confundir com uma resposta que o solicitante viu — um mal-entendido caro. */
.msg.interna { background: var(--paper); border-style: dashed; border-color: var(--alerta-borda); }

/* ══ ficha de pontuação ═════════════════════════════════════════════════ */

dl.dados { margin: 0; }
.linha-dado { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.linha-dado:last-child { border-bottom: 0; }
.linha-dado dt { color: var(--ink-soft); margin: 0; }
.linha-dado dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.linha-dado.forte dd { font-weight: 700; }

.origem {
  border-left: 4px solid var(--line); border-radius: var(--raio-campo);
  padding: 10px 14px; margin-top: 12px; background: var(--paper);
  font-size: 13px; color: var(--ink-soft);
}
.origem.desconto { border-left-color: var(--erro); }
.origem.soma { border-left-color: var(--ok); }
.origem .ref { font-family: var(--fonte-mono); font-size: 12px; color: var(--ink-faint); }
.origem ul { margin: 4px 0 0; padding-left: 18px; }

/* ══ tela de entrada ════════════════════════════════════════════════════ */

/* `100dvh` e não `100vh`: no telefone a barra de endereço entra e sai enquanto se rola, e com
   `100vh` o cartão de entrada dá um salto de uns 60px no meio do gesto. `100vh` fica de reserva
   para quem ainda não conhece a unidade dinâmica. */
.tela-login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.cartao-login {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio);
  padding: 32px 30px; max-width: 460px; width: 100%; box-shadow: var(--sombra);
}
.cartao-login h1 { font-size: 26px; margin-bottom: 6px; }
.perfis-demo { display: grid; gap: 8px; margin-top: 18px; }
/* Item de lista: raio de peça interna, não de contêiner. */
.perfil-demo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--raio-campo); padding: 12px 14px; cursor: pointer;
  font: inherit; text-align: left; min-height: 32px;
}
.perfil-demo:hover { border-color: var(--accent); background: var(--accent-soft); }
.perfil-demo b { font-size: 14px; }
.perfil-demo small { display: block; color: var(--ink-faint); font-size: 12px; }

/* ══ avisos que ficam ═══════════════════════════════════════════════════ */

/*
 * Lei 10: nenhum `alert()`. Os avisos empilham no canto inferior direito, com botão de copiar.
 *
 * O que FICA até a pessoa fechar é o que ela vai precisar reler: a mensagem do 423 ("lançamentos
 * de OCORRENCIAS bloqueados: … janela JAN-…") e os avisos do recálculo são texto de chamado, e
 * num toast que some em 5 segundos eles se perdem. O que some sozinho é a confirmação de que
 * algo deu certo — quem empilhava dez delas numa sessão ao vivo acabava com a pilha cobrindo
 * este canto, que é onde fica a coluna de ações das tabelas. Quem decide um caso e outro é o
 * TOM, no `toast()` de `ui.js`; aqui embaixo só mora a aparência.
 * Cada aviso para em 50vh e rola por dentro, senão o × ia parar em coordenada negativa.
 */
#toasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: grid; gap: 10px; max-width: 400px; max-height: calc(100vh - 36px); overflow-y: auto;
}
.toast {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--ink-faint); border-radius: var(--raio-campo);
  box-shadow: var(--sombra); padding: 12px 14px; font-size: 13px;
  display: grid; grid-template-columns: 1fr auto auto; gap: 4px 10px; align-items: start;
  animation: entra .18s ease;
}
.toast .texto { grid-column: 1; max-height: 50vh; overflow: auto; }
.toast b { display: block; margin-bottom: 2px; }
.toast p { margin: 0; max-width: none; }
.toast.erro { border-left-color: var(--erro); background: var(--erro-suave); }
.toast.ok { border-left-color: var(--ok); }
.toast.travado { border-left-color: var(--erro); background: var(--erro-suave); }
.toast .copiar { padding: 2px 10px; font-size: 12px; min-height: 32px; }
.toast .fechar {
  background: none; border: 0; cursor: pointer; color: var(--ink-faint); font-size: 15px;
  min-width: 32px; min-height: 32px; display: grid; place-items: center; border-radius: 6px;
}
.toast .fechar:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }

.carregando { padding: 32px; text-align: center; color: var(--ink-faint); font-size: 14px; }

footer {
  border-top: 1px solid var(--line); padding: 20px 24px 40px;
  color: var(--ink-faint); font-size: 13px;
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media (max-width: 640px) {
  /*
   * ══ O TELEFONE ═══════════════════════════════════════════════════════
   *
   * Abaixo de 640px o SGA deixa de ser um sistema com menu e vira um app com abas no rodapé.
   * O que muda não é só onde a navegação fica: o topo emagrece até virar cabeçalho, a tabela
   * deixa de ser tabela, o diálogo deixa de ser janela e o campo cresce até o dedo.
   */

  /* ── a navegação desce ── */

  /* O menu do topo some pelo `id` de propósito: as regras de `data-menu` pesam mais que
     `.abas`, e disputar especificidade aqui deixaria a MESMA navegação duplicada nas duas
     pontas da tela — que é pior do que não tê-la em nenhuma. */
  #abas { display: none; }
  /* Onde fica o menu (esquerda/direita/topo) não quer dizer nada quando o menu é o rodapé;
     "Sair" mudou-se para a folha do "Mais", ao lado do nome de quem está logado. */
  #seletor-menu, #btn-sair { display: none; }
  .abas-rodape { display: grid; }
  /* Modal aberto não arrasta a página atrás: sem isto o polegar rola a lista de classificação
     por baixo da gaveta, e ao fechá-la a tela está noutro lugar sem ninguém ter pedido. */
  html:has(dialog[open]) { overflow: hidden; }

  /* ── o topo vira cabeçalho ── */

  /* O lateral fixo se desfaz: nem coluna, nem altura de tela, nem espaço reservado no `#app`. */
  :root[data-menu="esquerda"] #app,
  :root[data-menu="direita"] #app { padding-left: 0; padding-right: 0; }
  :root[data-menu="esquerda"] .topo-fixo,
  :root[data-menu="direita"] .topo-fixo { position: sticky; width: auto; top: 0; bottom: auto; }
  .topo,
  :root[data-menu="esquerda"] .topo,
  :root[data-menu="direita"] .topo {
    /* `flex-direction` explícito: o menu lateral põe o topo EM COLUNA, e sem desfazer isso aqui
       a marca fica numa linha e o avatar noutra — duas faixas de cromo antes do conteúdo, num
       aparelho onde a primeira tela é o que se tem. */
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
    min-height: 0; height: auto; gap: 10px; padding: 9px var(--espaco-mobile);
    /* `flex` e `overflow` vêm da coluna do menu lateral, e aqui não há coluna: o cabeçalho tem
       altura de conteúdo. Desfazê-los é o que impede um cabeçalho que rola por dentro. */
    flex: 0 0 auto; overflow: visible;
  }
  /* O avatar encosta na borda e o seletor de tema fica por dentro: no telefone, o canto é o
     lugar onde o polegar procura a própria conta. */
  #eu-avatar { order: 2; }
  :root[data-menu="esquerda"] .marca-topo,
  :root[data-menu="direita"] .marca-topo { padding: 0; border-bottom: 0; }
  .topo-direita,
  :root[data-menu="esquerda"] .topo-direita,
  :root[data-menu="direita"] .topo-direita {
    margin-top: 0; flex-wrap: nowrap; justify-content: flex-end; gap: 8px;
  }
  /* O nome inteiro e o perfil estão na folha do "Mais"; no cabeçalho sobra o avatar, que é
     onde o olho procura "com que conta eu entrei" num telefone. */
  .quem-sou,
  :root[data-menu="esquerda"] .quem-sou,
  :root[data-menu="direita"] .quem-sou { display: none; }

  /* ── o espaço do documento ── */

  .tela { padding: 18px var(--espaco-mobile) 26px; }
  /* A folga do rodapé vem MEDIDA do próprio rodapé (lei 6). Ela mora no último elemento do
     fluxo, e não no `main`, porque o rodapé de texto vem depois dele e também não pode ficar
     escondido atrás das abas. */
  footer { padding: 18px var(--espaco-mobile) calc(26px + var(--altura-rodape, 0px)); }
  h1 { font-size: clamp(26px, 7.5vw, 32px); }
  .linha-titulo { align-items: stretch; }
  .linha-titulo .acoes, .linha-titulo .acoes > * { width: 100%; }
  .filtros { align-items: stretch; padding: 12px 14px; }
  .filtros .campo, .filtros .campo.largo { min-width: 100%; }
  /* O aviso fica até alguém fechar (lei 10), então ele não pode nascer atrás das abas. Quem
     o afasta é a altura medida da barra — e a compensação mora DENTRO desta media query, e não
     na regra base, porque assim atravessar o ponto de quebra não depende de o navegador avisar
     o JavaScript: é o próprio CSS que troca de regra. */
  #toasts {
    left: var(--espaco-mobile); right: var(--espaco-mobile); max-width: none;
    bottom: calc(14px + var(--altura-rodape, 0px));
  }
  /* Rótulo e valor lado a lado quebram quando o rótulo é "Situação funcional" e a tela tem
     360px: o valor ia para uma segunda linha alinhado à direita, longe do que ele responde. */
  .linha-dado { flex-wrap: wrap; gap: 2px 16px; }
  .linha-dado dd { text-align: left; }

  /* ── sub-abas viram trilho ── */

  /*
   * Quebrando linha, um módulo de seis seções comia três linhas de cabeçalho antes do conteúdo
   * começar. Rolando, ocupa uma — e sangra até a borda da tela, para a seção cortada na
   * margem dizer sozinha que há mais para o lado.
   */
  .sub-abas {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    margin: 0 calc(var(--espaco-mobile) * -1) 16px;
    padding: 0 var(--espaco-mobile);
    scrollbar-width: none;
  }
  .sub-abas::-webkit-scrollbar { display: none; }
  .sub-aba { flex: none; scroll-snap-align: start; min-height: 44px; }

  /* ── a tabela vira cartão ── */

  /*
   * Uma tabela de oito colunas num aparelho de 360px só cabe rolando na horizontal — e quem
   * rola para o lado perde de vista a PRIMEIRA coluna, a única que diz de quem é aquela linha.
   * Em cartão, cada linha é um bloco e cada célula é o par rótulo-valor; o rótulo vem do
   * `data-rotulo` que `tabela()` carimba em cada `<td>`.
   *
   * O `<thead>` continua no documento, escondido dos olhos e não do leitor de tela: a tabela
   * segue sendo uma tabela para quem navega por ela célula a célula.
   *
   * O preço é altura — trinta linhas viram trinta cartões. É o preço certo: rolar para baixo é
   * o gesto que o telefone ensina; rolar para o lado dentro de algo que já rola para baixo é
   * justamente o que a lei 7 recusa.
   */
  .tabela-wrap { background: none; border: 0; border-radius: 0; overflow: visible; }
  table.tabela, table.tabela tbody, table.tabela tr, table.tabela td { display: block; width: 100%; }
  table.tabela thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  table.tabela tr {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio);
    padding: 2px 14px; margin-bottom: 10px;
  }
  /* O realce de linha era para varrer uma lista com o mouse; em cartão ele pinta o cartão
     inteiro de cinza e some com a separação entre um e outro. */
  table.tabela tbody tr:hover { background: var(--surface); }
  table.tabela tr.clicavel:active { background: var(--paper); }
  table.tabela td {
    display: grid; grid-template-columns: minmax(9ch, 34%) minmax(0, 1fr);
    gap: 12px; align-items: baseline;
    padding: 9px 0; border-bottom: 1px solid var(--line);
    /*
     * `anywhere` e não `break-word`: os dois quebram a palavra que não cabe, mas só o primeiro
     * conta essa quebra no tamanho MÍNIMO da caixa — e é o mínimo que a coluna da grade usa
     * para se dimensionar. Com `break-word`, o valor "ABONADA;ANIVERSARIO;JUSTIFICADA;" da
     * tela de parâmetros media 45 caracteres indivisíveis, esticava a célula e, por ela, o
     * documento inteiro: 514px de largura numa tela de 375, com a página rolando para o lado.
     */
    overflow-wrap: anywhere;
  }
  table.tabela tr td:last-child { border-bottom: 0; }
  /* O selo é pílula e a pílula tem a largura da palavra. Como item de grade ele esticava até a
     borda do cartão — "ATIVO" virava uma faixa de 200px, que lê como barra de progresso. */
  /* `:not(.acoes)` não é zelo: `justify-self` também alinha caixa de bloco, e na célula de
     ações ele encolhia a fileira de botões ao tamanho do conteúdo — os três ficavam apertados
     à esquerda em vez de dividirem a largura do cartão. */
  table.tabela td:not(.acoes) > * { justify-self: start; max-width: 100%; }
  table.tabela td[data-rotulo]::before {
    content: attr(data-rotulo);
    font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--ink-soft); line-height: 1.35;
  }
  /* Lei 9 valia porque a coluna se lia de cima a baixo. Aqui não há coluna: o número volta a
     alinhar com o resto do cartão, e o dígito de largura fixa fica. */
  table.tabela td.numero, table.tabela td.acoes { text-align: left; }
  /* A célula de ações toma o cartão inteiro: três botões espremidos em dois terços de 340px
     dão alvos de 60px de largura, que o dedo erra. */
  table.tabela td.acoes { display: block; }
  .acoes-linha { justify-content: flex-start; }
  .acoes-linha > * { flex: 1 1 auto; }
  /* A moldura saiu do `.tabela-wrap` e a lista vazia ficaria solta no fundo da página. */
  .vazio-tabela { background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio); }

  /* ── o diálogo vira folha ── */

  /*
   * Um cartão flutuando no meio da tela é forma de janela, e janela é coisa de computador. No
   * telefone a folha sobe do rodapé — a forma que o próprio aparelho ensinou — e o polegar
   * alcança os botões dela sem a mão trocar de posição.
   */
  dialog, dialog.largo {
    width: 100%; max-width: none; margin: auto auto 0; max-height: 92vh;
    border-radius: var(--raio) var(--raio) 0 0; border-bottom: 0;
  }
  .dialogo-corpo { max-height: calc(92vh - 9rem); padding: 18px var(--espaco-mobile); }
  .dialogo-cab { padding: 16px var(--espaco-mobile) 13px; }
  .dialogo-pe {
    flex-wrap: wrap;
    padding: 12px var(--espaco-mobile) calc(14px + env(safe-area-inset-bottom));
  }
  .dialogo-pe > * { flex: 1 1 140px; }
  /* Duas colunas de formulário em 340px dão campos de 160px: cabe o rótulo, não cabe o dado. */
  .form-grid { grid-template-columns: 1fr; }

  /* ── o alvo do dedo ── */

  /*
   * 16px nos campos não é escolha de estética: abaixo disso o Safari do iPhone dá zoom sozinho
   * ao focar o campo e NÃO volta — a pessoa digita a matrícula e segue o resto do formulário
   * com a tela ampliada e torta. A caixa de marcar fica de fora do mínimo de altura: esticada,
   * ela vira um retângulo que não parece mais uma caixa de marcar.
   */
  input:not([type="checkbox"]), select, textarea { font-size: 16px; min-height: 44px; }
  input[type="checkbox"] { font-size: 16px; }
  textarea { min-height: 96px; }
  .botao-primario, .botao-fantasma, .botao-perigo { min-height: 44px; }
  .botao-mini { min-height: 40px; }
  .link { padding: 10px 6px; margin: -10px -6px; }
}

/* ══ portas de entrada (M-22) ═══════════════════════════════════════════ */

/* A pergunta que a tela de Acesso responde é "por onde se entra?". Duas portas lado a lado
   respondem isso de relance; empilhadas numa lista de rótulo-e-valor, não respondem. */
.portas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 14px; }
.porta {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio);
  padding: 18px 20px; display: grid; gap: 9px; align-content: start;
}
/* A porta ligada se distingue pela BORDA, não por fundo colorido: cor de fundo aqui competiria
   com os avisos, que são os únicos que devem gritar nesta tela. */
.porta.ligada { border-color: var(--accent-borda); }
.porta h3 { font-size: 14px; }
.porta p { margin: 0; font-size: 13px; color: var(--ink-soft); }
.porta .mono { font-size: 11.5px; word-break: break-all; color: var(--ink-faint); }

/* Ajuda de referência não pode competir com o controle. Fechada por padrão, aberta por quem
   precisa dela — e só nesse momento ela ocupa a tela. */
details.ajuda { background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio); }
details.ajuda > summary {
  cursor: pointer; padding: 14px 20px; list-style: none;
  font-family: var(--fonte-titulo); font-weight: 500; letter-spacing: -.01em;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 32px;
}
details.ajuda > summary::-webkit-details-marker { display: none; }
details.ajuda > summary::after { content: '+'; font-family: var(--fonte-mono); color: var(--ink-faint); }
details.ajuda[open] > summary::after { content: '–'; }
details.ajuda .corpo-ajuda { padding: 4px 20px 18px; border-top: 1px solid var(--line); }

/* ── Videoaulas ─────────────────────────────────────────────────────────
   A trilha é cartão em grade; a aula é vídeo à esquerda e roteiro à direita.
   Abaixo de 1000px o roteiro desce para baixo do vídeo em vez de espremer os
   dois: um player de 16:9 com 300px de largura não serve para ensinar nada. */
/* `auto-fill`, e não `auto-fit`: o `auto-fit` colapsa as trilhas vazias, e um módulo com uma
   aula só ganhava um cartão esticado pela largura inteira da tela — que lê como "esta aula é
   mais importante" quando ela só está sozinha no módulo. Com `auto-fill` a trilha vazia fica
   reservada e o cartão mantém a largura dos outros. */
.grid-aulas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.card-aula { display: flex; flex-direction: column; }
.card-aula h3 { margin: 10px 0 0; font-size: 16px; }
.card-aula .sub { margin-top: 6px; flex: 1; }
.aula-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aula-numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}

.aula-palco { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 20px; margin-top: 18px; }
@media (max-width: 1000px) { .aula-palco { grid-template-columns: 1fr; } }

/* `background` escuro atrás do vídeo: o WebM tem barras quando a janela não é 16:9, e barra
   branca em volta de uma captura de tela clara faz o vídeo parecer parte da página. */
.player-aula {
  width: 100%; aspect-ratio: 16 / 9; display: block;
  background: #10130f; border: 1px solid var(--line); border-radius: var(--raio);
}

.aula-roteiro h3 { margin: 0; font-size: 15px; }
/* Altura limitada e rolagem própria: o roteiro de dezoito passos é mais alto que o vídeo, e
   sem isto a página inteira rola enquanto o vídeo sai de vista. */
.passos-aula { margin-top: 10px; max-height: 58vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.passo-aula {
  display: flex; gap: 10px; text-align: left; width: 100%;
  border: 0; background: none; font: inherit; cursor: pointer;
  padding: 9px 10px; border-radius: var(--raio); color: var(--ink-soft);
}
.passo-aula:hover { background: var(--paper); color: var(--ink); }
.passo-aula.agora { background: var(--accent-soft); color: var(--ink); }
.passo-tempo { flex: none; font-size: 12px; color: var(--ink-faint); padding-top: 2px; font-variant-numeric: tabular-nums; }
.passo-aula.agora .passo-tempo { color: var(--accent); }
.passo-texto { display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.45; }
.passo-texto b { font-size: 13px; color: var(--ink); }


/* ── Validação assistida: o painel do tour e o reprodutor da gravação ──────────────────────
   O painel é `fixed` porque acompanha a pessoa por todas as abas — ele não pertence a tela
   nenhuma. Fica à direita no computador e vira uma folha no rodapé do telefone, onde a tela
   é estreita demais para dividir espaço com o sistema que está sendo validado. */
.tour-painel {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 360px; max-height: min(78vh, 720px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 14px 16px 16px;
}
.tour-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tour-jornada { font-size: 12px; font-weight: 700; color: var(--accent); }
.tour-contagem { font-size: 12px; color: var(--ink-faint); }
.tour-acoes-topo { display: flex; align-items: center; gap: 8px; }

/* O ponto vermelho é FORMA, e não só cor (lei 2): quem não distingue a cor lê "gravando". */
.tour-gravando { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--erro); font-weight: 700; }
.tour-gravando::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--erro);
  animation: pulsar-gravacao 1.6s ease-in-out infinite;
}
@keyframes pulsar-gravacao { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .tour-gravando::before { animation: none; } }

.tour-corpo h3 { margin: 0 0 8px; font-size: 15px; }
.tour-bloco { margin-bottom: 8px; }
.tour-bloco b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.tour-bloco p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink); }
.tour-porque { margin: 6px 0 10px; }
.tour-porque summary { cursor: pointer; font-size: 12px; color: var(--ink-soft); }
.tour-porque p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.tour-dica { margin: 0 0 8px; font-size: 12px; color: var(--alerta); }
.tour-obs { width: 100%; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--raio-campo); background: var(--surface); color: var(--ink); resize: vertical; }
.tour-arquivo { display: block; margin: 8px 0 12px; font-size: 12px; color: var(--ink-soft); }
.tour-arquivo input { display: block; margin-top: 4px; font-size: 12px; max-width: 100%; }
.tour-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.tour-rodape { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

@media (max-width: 640px) {
  /* No telefone o painel vira faixa inferior, acima da navegação de rodapé. */
  .tour-painel { right: 8px; left: 8px; bottom: 76px; width: auto; max-height: 62vh; }
}

/* O palco do replay: o rrweb monta um iframe do tamanho da tela gravada, quase sempre maior
   que o diálogo. `zoom` encolhe o conjunto sem mexer no que foi gravado. */
.replay-palco {
  border: 1px solid var(--line); border-radius: var(--raio); overflow: hidden;
  background: var(--paper); min-height: 320px; max-height: 62vh; overflow-y: auto;
}
.replay-palco .replayer-wrapper { transform-origin: top left; zoom: .55; }
.replay-palco iframe { border: 0; background: #fff; }
.replay-controles { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Trechos e controles do reprodutor de gravação. A barra é `input[type=range]` de propósito:
   arrastar para achar o momento é o gesto que todo mundo já sabe fazer. */
.replay-trechos { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.replay-controles { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.replay-barra { flex: 1; min-width: 180px; accent-color: var(--accent); }
.replay-tempo { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 92px; }

/* Passo de validação cuja evidência é uma gravação: o cartão põe o veredito, a frase do que o
   vídeo prova e o filme um embaixo do outro. O vídeo dentro de uma célula de tabela seria um
   link que ninguém abre — e evidência que ninguém abre não é evidência. */
.passo-com-video { margin: 12px 0; }
.passo-com-video-cab {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.video-validacao { margin: 12px 0 6px; }
.video-validacao video {
  /* Teto de altura para o cartão INTEIRO caber na tela: sem ele, um player de 16:9 com a
     largura do diálogo empurra o veredito e a frase do que o vídeo prova para fora da vista, e
     quem abre a rodada vê um filme sem saber a que passo ele pertence. A largura acompanha,
     para a proporção não virar tarja preta dos dois lados. */
  width: 100%; max-width: min(100%, calc(44vh * 16 / 9)); margin-inline: auto;
  aspect-ratio: 16 / 9; display: block;
  background: #10130f; border: 1px solid var(--line); border-radius: var(--raio);
}
.passo-com-video details { margin-top: 10px; }
.passo-com-video details summary { cursor: pointer; }

/* ── Videoaulas: a trilha com progresso ──────────────────────────────────
   A aba deixou de ser lista e virou lugar de aprender: a barra diz quanto falta, o objetivo do
   módulo sai da letra miúda, e a aula já assistida recua para não competir com a próxima. */
.seletor-trilha { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }

.progresso-trilha { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.progresso-barra {
  flex: 1; height: 6px; min-width: 90px; border-radius: var(--raio-pilula);
  background: color-mix(in srgb, var(--ink-faint) 22%, transparent); overflow: hidden;
}
.progresso-feito { height: 100%; background: var(--ok); border-radius: var(--raio-pilula); transition: width .3s; }
.progresso-conta { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }

/* A aula seguinte, dentro do cartão-guia. Ela é uma CHAMADA, não um item de lista: recebe fundo
   próprio para a primeira olhada cair nela, que é o passo que a aba quer que a pessoa dê. */
.proxima-aula {
  margin-top: 14px; padding: 14px 16px;
  border: 1px solid var(--accent-borda); border-left: 3px solid var(--accent);
  border-radius: var(--raio); background: var(--accent-soft);
}
.proxima-aula h3 { font-size: 17px; }

/* O objetivo do módulo ("Ao terminar, a pessoa sabe…") estava em letra apagada, como legenda.
   Num lugar de aprender, é o texto que diz se vale a pena entrar no módulo. */
.objetivo-modulo { margin: 0; max-width: 78ch; color: var(--ink-soft); font-size: 14px; }

/* Assistida: recua, mas não some. Quem quer rever precisa continuar achando. */
.card-aula.aula-vista { background: var(--surface-2); box-shadow: none; }
.card-aula.aula-vista h3 { color: var(--ink-soft); }
.aula-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aula-topo .fraco { margin-left: auto; }