/* =====================================================================
 * Tema do portal — home e menu
 * ---------------------------------------------------------------------
 * Home da proposta A (Essencial) com o menu da proposta C (Guiada), de
 * C:/_Work/_analise_ia/matricula_online_restilo.
 *
 * Carregar SEMPRE depois do bootstrap.min.css.
 *
 * IMPORTANTE — escopo. No modelo original os tokens e as sobrescritas de
 * --bs-* moram em :root, e valeriam para o portal inteiro. Aqui eles moram
 * em '.tema-portal', aplicada apenas na home e no menu. As demais telas —
 * as sete etapas do processo, formularios e paginas de status — continuam
 * exatamente como estao. Ao estender o tema a outra pagina, basta acrescentar
 * a classe nela.
 * ===================================================================== */

/* =====================================================================
 * Atkinson Hyperlegible — desenhada para legibilidade, com letras que se
 * distinguem melhor entre si. Servida pela propria aplicacao: o portal nao
 * faz requisicao a terceiros, e a fonte nao depende de acesso externo.
 * Apenas o subconjunto latin, que cobre o portugues.
 * ===================================================================== */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../lib/atkinson-hyperlegible/atkinson-hyperlegible-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../lib/atkinson-hyperlegible/atkinson-hyperlegible-700.woff2') format('woff2');
}

/* =====================================================================
 * Proposta A — Essencial · camada de tema sobre o Bootstrap 5.3.8
 * ---------------------------------------------------------------------
 * Carregar SEMPRE depois do bootstrap.min.css.
 * Este arquivo é escrito para ser levado como está para wwwroot/css/ do
 * projeto real (Web/wwwroot/css/tema-portal.css, por exemplo).
 *
 * Ordem do arquivo:
 *   1. Tokens do tema (:root)
 *   2. Sobrescritas de variáveis do Bootstrap (--bs-*)
 *   3. Base da página
 *   4. Componentes (cabeçalho, cartão de aluno, chips, avatar, menu,
 *      folhas/modais, toast, painel de demonstração)
 *   5. prefers-reduced-motion
 *
 * Observação sobre breakpoints: o protótipo original usava os pontos do
 * Tailwind (md 768px / lg 1024px). Aqui os pontos são os do Bootstrap
 * (md 768px / lg 992px) para que as media queries deste arquivo e os
 * utilitários responsivos do framework (row-cols-lg-2, d-md-none, mt-md-*)
 * virem juntos, sem estados intermediários incoerentes.
 * ===================================================================== */

/* =====================================================================
 * 1. TOKENS DO TEMA
 * ===================================================================== */

.tema-portal {
  /* --- Marca (white-label) ------------------------------------------
   * Único token trocado por tenant. No produto, o layout emite
   * <style>:root{--marca:#RRGGBB}</style> com a cor da escola.
   * Os derivados saem de color-mix — não há um segundo token de cor. */
  --marca: #15803D;
  --marca-hover: color-mix(in srgb, var(--marca) 85%, black);
  --marca-ativo: color-mix(in srgb, var(--marca) 75%, black);
  --marca-tint: color-mix(in srgb, var(--marca) 6%, #FFFFFF);

  /* --- Superfícies e texto ------------------------------------------ */
  --fundo: #F4F6F8;
  --superficie: #FFFFFF;
  --superficie-rebaixada: #F8FAFC;   /* hover de item de lista, faixa do aluno */
  --texto: #1E293B;
  --texto-secundario: #64748B;       /* legendas, rodapé, série */
  --texto-descricao: #475569;        /* parágrafos de apoio */
  --texto-item: #334155;             /* itens de menu e de download */
  --texto-icone: #7E8CA0;            /* chevron, ícone de download e do estado vazio;
                                        3,4:1 sobre branco — mínimo da WCAG 1.4.11
                                        para componentes gráficos é 3:1 */
  --borda: #E2E8F0;
  --borda-forte: #CBD5E1;            /* borda do cartão em hover */
  --borda-sutil: #F1F5F9;            /* divisórias internas */
  --pressionado: #F1F5F9;            /* :active de itens */
  --perigo: #B91C1C;                 /* "Sair da minha conta" */
  --perigo-fundo: #FEF2F2;
  --perigo-fundo-ativo: #FEE2E2;

  /* --- Cores semânticas de situação ---------------------------------
   * Fixas e independentes da marca: a semântica não muda por tenant.
   * Cada situação tem o par tonal (fundo/texto) do chip e o tom cheio
   * do ponto. Todos os pares têm contraste AA. */
  --sit-azul-fundo: #EFF6FF;   --sit-azul-texto: #1D4ED8;   --sit-azul-ponto: #2563EB;
  --sit-cinza-fundo: #F1F5F9;  --sit-cinza-texto: #475569;  --sit-cinza-ponto: #94A3B8;
  --sit-ambar-fundo: #FEF3C7;  --sit-ambar-texto: #92400E;  --sit-ambar-ponto: #D97706;
  --sit-verde-fundo: #DCFCE7;  --sit-verde-texto: #166534;  --sit-verde-ponto: #16A34A;

  /* --- Tons do avatar de iniciais ------------------------------------
   * Baixa saturação e deliberadamente FORA da paleta semântica dos
   * chips: o tom identifica o aluno, nunca a situação da rematrícula. */
  --avatar-1-fundo: #E2E8F0; --avatar-1-texto: #334155; /* slate   */
  --avatar-2-fundo: #E0E7FF; --avatar-2-texto: #3730A3; /* índigo  */
  --avatar-3-fundo: #EDE9FE; --avatar-3-texto: #5B21B6; /* violeta */
  --avatar-4-fundo: #E7E5E4; --avatar-4-texto: #44403C; /* stone   */

  /* --- Raios --------------------------------------------------------- */
  --raio-cartao: 1rem;      /* cartões, folhas, painel demo */
  --raio-botao: .75rem;     /* botões das folhas */
  --raio-pequeno: .5rem;
  --raio-pilula: 999px;

  /* --- Sombras ------------------------------------------------------- */
  --sombra-cartao: 0 1px 2px 0 rgb(0 0 0 / .05);
  --sombra-flutuante: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --sombra-painel: 0 25px 50px -12px rgb(0 0 0 / .25);
  --sombra-cabecalho: 0 2px 14px rgb(15 23 42 / .12);

  /* --- Foco ----------------------------------------------------------
   * Equivalente ao anel de 2px na cor da marca com 2px de folga branca. */
  --anel-foco: 0 0 0 2px var(--superficie), 0 0 0 4px var(--marca);
  --anel-foco-neutro: 0 0 0 2px var(--superficie), 0 0 0 4px #64748B;
  --anel-foco-interno: inset 0 0 0 2px var(--marca);
}

/* =====================================================================
 * 2. SOBRESCRITAS DE VARIÁVEIS DO BOOTSTRAP
 * Preferimos ajustar as variáveis do framework a usar !important.
 * ===================================================================== */

.tema-portal {
  --bs-body-font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;
  --bs-body-bg: var(--fundo);
  --bs-body-color: var(--texto);
  --bs-secondary-color: var(--texto-secundario);
  --bs-emphasis-color: var(--texto);

  --bs-border-color: var(--borda);
  --bs-border-radius: var(--raio-botao);
  --bs-border-radius-sm: var(--raio-pequeno);
  --bs-border-radius-lg: var(--raio-cartao);
  --bs-border-radius-xl: var(--raio-cartao);
  --bs-border-radius-pill: var(--raio-pilula);

  --bs-link-color: var(--marca);
  --bs-link-hover-color: var(--marca-hover);
  --bs-focus-ring-color: var(--marca);
  --bs-focus-ring-width: 2px;
}

/* Backdrop de modal e offcanvas: preto a 40% (era 50% no padrão).
   O Bootstrap declara --bs-backdrop-bg/--bs-backdrop-opacity DENTRO da regra
   .modal-backdrop, então a sobrescrita precisa ser no próprio seletor (no
   :root ela seria vencida pela declaração local). O .offcanvas-backdrop nem
   usa variável: lá o valor é cravado e só resta ajustar a opacidade. */
.modal-backdrop {
  --bs-backdrop-bg: #000000;
  --bs-backdrop-opacity: .4;
}
.offcanvas-backdrop.show { opacity: .4; }

/* =====================================================================
 * 3. BASE DA PÁGINA
 * ===================================================================== */

/* As variaveis --bs-body-* acima so seriam lidas pela regra 'body' do Bootstrap,
   que resolve a fonte antes de o tema entrar em cena — os filhos herdariam o
   valor ja resolvido e a Atkinson nunca apareceria. Por isso o tema redeclara
   aqui o que o 'body' declara, agora dentro do escopo. */
.tema-portal {
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fundo da pagina da home. Fica separado do '.tema-portal' porque vai no
   <body>, e nao no bloco da lista: pintar so o bloco deixaria uma faixa
   cinza no meio da pagina branca. O valor repete --fundo de proposito —
   o token mora em '.tema-portal', que nao alcanca o <body>. */
.fundo-portal { background-color: #F4F6F8; }

.pagina-portal { min-height: 100svh; }

/* Contêiner do portal: estreito no mobile, encorpado no desktop.
   Substitui o .container do Bootstrap, cujos degraus não batem com a proposta. */
.container-portal {
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 768px) { .container-portal { padding-inline: 1.5rem; } }
@media (min-width: 992px) { .container-portal { max-width: 64rem; } }

/* Utilitários que o Bootstrap não tem */
.min-larg-0 { min-width: 0; }            /* filho de flex que precisa poder encolher */
.linhas-2 {                              /* line-clamp de 2 linhas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.texto-13 { font-size: .8125rem; line-height: 1.4; }
.texto-secundario { color: var(--texto-secundario); }

/* Anéis de foco do tema (visíveis apenas na navegação por teclado) */
.foco-anel:focus-visible { outline: 0; box-shadow: var(--anel-foco); }
.foco-anel-neutro:focus-visible { outline: 0; box-shadow: var(--anel-foco-neutro); }
.foco-interno:focus-visible { outline: 0; box-shadow: var(--anel-foco-interno); }

/* =====================================================================
 * 4. COMPONENTES
 * ===================================================================== */

/* ---- 4.1 Cabeçalho ------------------------------------------------- */

.cabecalho-portal {
  background-color: var(--superficie);
  /* Tint quase imperceptível da cor da escola descendo até o branco */
  background-image: linear-gradient(to bottom, var(--marca-tint), var(--superficie) 70%);
  border-bottom: 1px solid var(--borda);
  transition: box-shadow 150ms ease-out, border-color 150ms ease-out;
}
/* Sombra só depois de rolar (classe aplicada por JS) — a borda cede lugar à sombra */
.cabecalho-rolado {
  box-shadow: var(--sombra-cabecalho);
  border-bottom-color: transparent;
}

/* Filete de 2px na cor da escola — assinatura discreta da marca */
.cabecalho-filete { height: 2px; background-color: var(--marca); }

.cabecalho-barra {
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
@media (min-width: 768px) { .cabecalho-barra { height: 5rem; } }
@media (min-width: 992px) { .cabecalho-barra { height: 6rem; } }

.cabecalho-identidade {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  /* Cresce ate o botao: com a base automatica o bloco encolhia para a largura
     da logo — a imagem nao tem largura intrinseca e some da conta — e o nome da
     escola ficava com zero pixel. Crescendo, sobra espaco para o nome truncar
     em vez de desaparecer. */
  flex: 1 1 auto;
  /* E um link para a home, mas nao deve parecer um: sem sublinhado e com a cor
     do texto, senao o nome da escola sai no azul de link do Bootstrap. */
  text-decoration: none;
  color: inherit;
}
@media (min-width: 768px) { .cabecalho-identidade { gap: 1rem; } }

/* A logo e filha direta e nao vem embrulhada: o SVG do componente nao declara
   largura intrinseca, entao dentro de uma caixa que se dimensiona pelo conteudo
   ele resolveria para zero e sumiria. O teto de largura vem do proprio
   componente (LarguraMaximaImagem), ja que o tamanho da imagem esta no atributo
   style e venceria qualquer regra daqui; aqui so impedimos que ela encolha. */
.cabecalho-identidade img { flex-shrink: 0; }

.cabecalho-divisor { flex-shrink: 0; align-self: stretch; width: 1px; margin-block: .75rem; background-color: var(--borda); }
@media (min-width: 768px) { .cabecalho-divisor { margin-block: 1rem; } }

.cabecalho-nome {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--texto);
}
@media (min-width: 768px) { .cabecalho-nome { font-size: 1.125rem; } }
@media (min-width: 992px) { .cabecalho-nome { font-size: 1.25rem; } }

.cabecalho-contexto { margin-top: .125rem; font-size: 13px; line-height: 1.4; color: var(--texto-secundario); }
@media (min-width: 992px) { .cabecalho-contexto { font-size: .875rem; } }

/* ---- 4.2 Botões do tema -------------------------------------------
 * Variante de .btn feita com as variáveis do Bootstrap (nada de !important). */

.botao-marca {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: var(--marca);
  --bs-btn-border-color: var(--marca);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: var(--marca-hover);
  --bs-btn-hover-border-color: var(--marca-hover);
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: var(--marca-ativo);
  --bs-btn-active-border-color: var(--marca-ativo);
  --bs-btn-focus-box-shadow: var(--anel-foco);
  --bs-btn-font-weight: 500;
  --bs-btn-font-size: 1rem;
}

/* Pílula "Menu" do cabeçalho: 48px de alvo de toque */
.botao-menu {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 3rem;
  padding: .5rem 1rem;
  border-radius: var(--raio-pilula);
  white-space: nowrap;
}

/* Botão de ação no rodapé das folhas */
.botao-folha {
  display: block;
  width: 100%;
  min-height: 3rem;
  margin-top: 1.25rem;
  border-radius: var(--raio-botao);
}

/* Botão redondo de fechar (menu e folhas) — 48px de alvo de toque.
   O fundo é transparente em repouso, então o alvo maior não muda o desenho. */
.botao-fechar-redondo {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--texto-secundario);
}
.botao-fechar-redondo:hover { background-color: var(--borda-sutil); }
.botao-fechar-redondo:active { background-color: var(--borda); }
/* Nas folhas o X "sangra" para fora do padding, como no protótipo */
.botao-fechar-folha { margin-top: -.5rem; margin-right: -.5rem; }

/* ---- 4.3 Título e subtítulo da home -------------------------------- */

.bloco-titulo { margin-top: 1.5rem; }
@media (min-width: 768px) { .bloco-titulo { margin-top: 2.5rem; } }

.titulo-home {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--texto);
}
@media (min-width: 768px) { .titulo-home { font-size: 1.875rem; } }

.subtitulo-home {
  margin: .25rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--texto-descricao);
}
@media (min-width: 768px) { .subtitulo-home { margin-top: .5rem; font-size: 1.125rem; } }

/* ---- 4.4 Lista e cartão de aluno ----------------------------------- */

/* Grade do Bootstrap com a medianiz da proposta (0,75rem / 1rem em md),
   valores fora da escala de gutters do framework.
   A margem superior desconta a medianiz: o `.row` cancela com
   `margin-top: calc(-1 * var(--bs-gutter-y))` o `margin-top` que aplica em
   `.row > *`; sobrescrevendo essa margem sem descontar, a folga real acima do
   primeiro cartão sairia somada (1rem + 0,75rem no mobile). */
.lista-alunos {
  --bs-gutter-x: .75rem;
  --bs-gutter-y: .75rem;
  margin-top: calc(1rem - var(--bs-gutter-y));
}
@media (min-width: 768px) {
  .lista-alunos {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
    margin-top: calc(1.5rem - var(--bs-gutter-y));
  }
}

.bloco-vazio { margin-top: 1rem; }
@media (min-width: 768px) { .bloco-vazio { margin-top: 1.5rem; } }

.cartao-vazio {
  background-color: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
  padding: 2rem;
  text-align: center;
}
@media (min-width: 768px) { .cartao-vazio { padding: 3rem; } }
@media (min-width: 992px) { .cartao-vazio { max-width: 42rem; margin-inline: auto; } }

.icone-vazio { color: var(--texto-icone); font-size: 2rem; }
.titulo-vazio {
  margin: .75rem 0 0;
  font-size: 17px;
  line-height: 1.3;         /* explícita: o Reboot dá 1.2 a h1-h6 */
  font-weight: 600;
  color: var(--texto);
}
@media (min-width: 768px) { .titulo-vazio { font-size: 1.125rem; } }
.texto-vazio {
  margin: .25rem 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto-descricao);
}
@media (min-width: 768px) { .texto-vazio { font-size: 1rem; } }

/* O cartão inteiro é o alvo de toque — nunca dois alvos no mesmo item.
   Serve tanto para <a> (situações que continuam um fluxo) quanto para
   <button> (situações que abrem folha informativa). */
.cartao-aluno {
  display: block;
  width: 100%;
  min-height: 5.5rem;             /* ~88px de alvo de toque */
  padding: 1rem;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background-color: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
  transition: background-color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;
}
@media (min-width: 768px) { .cartao-aluno { padding: 1.5rem; } }
@media (min-width: 992px) { .cartao-aluno { padding: 1.75rem; } }
.cartao-aluno:hover { border-color: var(--borda-forte); color: inherit; }
.cartao-aluno:active { background-color: var(--superficie-rebaixada); transform: scale(.99); }
.cartao-aluno:focus-visible { outline: 0; box-shadow: var(--anel-foco); }

.cartao-topo { gap: .75rem; }
@media (min-width: 768px) { .cartao-topo { gap: 1rem; } }

.cartao-nome {
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--texto);
}
@media (min-width: 768px) { .cartao-nome { font-size: 1.125rem; } }
@media (min-width: 992px) { .cartao-nome { font-size: 1.25rem; } }

.cartao-serie {
  margin-top: .125rem;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--texto-secundario);
}
@media (min-width: 768px) { .cartao-serie { font-size: 15px; } }

.chevron-cartao { flex-shrink: 0; align-self: center; color: var(--texto-icone); }

/* Os icones eram SVG, dimensionados pelos proprios atributos width/height. Como
   agora sao glifos do Font Awesome, o tamanho passa a vir daqui. */
.icone-chip { font-size: 1rem; }
.icone-chevron { font-size: 1.25rem; }

/* ---- 4.5 Chip de situação ------------------------------------------
 * Ponto + ícone + texto: nenhuma situação depende só de cor. */

.chip-situacao {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .375rem;
  min-height: 2rem;
  padding: .25rem .75rem;
  border-radius: var(--raio-pilula);
  font-size: .875rem;
  font-weight: 500;
}
@media (min-width: 768px) {
  .chip-situacao { min-height: 2.25rem; padding-inline: .875rem; font-size: 15px; }
}

/* Dentro do cartão o chip fica FORA da coluna de texto e, de 420px para
   cima, é recuado até o nome (largura do avatar + gap). Abaixo de 420px o
   recuo é zero: nenhum rótulo longo quebra por causa da foto.
   O limiar é 420px e não 400px porque o rótulo mais longo ("Processando —
   toque para ver") pede 266px e o recuo custa 60px + 32px de padding do
   cartão + 32px do contêiner: com barra de rolagem clássica (~15px) uma
   janela de 400px deixaria a largura útil na borda exata da quebra. */
.cartao-aluno .chip-situacao { margin-top: .5rem; }
@media (min-width: 420px) { .cartao-aluno .chip-situacao { margin-left: 3.75rem; } }
@media (min-width: 768px) { .cartao-aluno .chip-situacao { margin-top: .75rem; margin-left: 4.5rem; } }

.chip-marca { background-color: var(--marca); color: #FFFFFF; }   /* ação primária */
.chip-azul  { background-color: var(--sit-azul-fundo);  color: var(--sit-azul-texto); }
.chip-cinza { background-color: var(--sit-cinza-fundo); color: var(--sit-cinza-texto); }
.chip-ambar { background-color: var(--sit-ambar-fundo); color: var(--sit-ambar-texto); }
.chip-verde { background-color: var(--sit-verde-fundo); color: var(--sit-verde-texto); }

.ponto-situacao { flex-shrink: 0; width: .5rem; height: .5rem; border-radius: 50%; }
.ponto-azul  { background-color: var(--sit-azul-ponto); }
.ponto-cinza { background-color: var(--sit-cinza-ponto); }
.ponto-ambar { background-color: var(--sit-ambar-ponto); }
.ponto-verde { background-color: var(--sit-verde-ponto); }

/* Único movimento contínuo da tela (situação "em processamento") */
@keyframes pulsar-ponto { 50% { opacity: .5; } }
.ponto-pulsante { animation: pulsar-ponto 2s cubic-bezier(.4, 0, .6, 1) infinite; }

/* ---- 4.6 Avatar do aluno -------------------------------------------
 * Foto quando existe; iniciais em círculo quando não (o caso mais comum
 * na base real — por isso o fallback foi desenhado para parecer intencional). */

.avatar-aluno {
  position: relative;
  flex-shrink: 0;
  align-self: flex-start;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--borda-sutil);
  box-shadow: 0 0 0 1px var(--borda);   /* fio que separa a foto do branco do cartão */
}

/* A foto cobre as iniciais, que ficam sempre no HTML por baixo. Se a imagem
   falhar — aluno sem foto no cadastro, token vencido, endpoint fora — o
   onerror remove o <img> e as iniciais reaparecem sozinhas, sem pisca de
   imagem quebrada e sem depender de JavaScript da pagina. */
.avatar-aluno img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-iniciais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Dois tamanhos: no cartão da lista e na identificação do topo das folhas */
.avatar-cartao { width: 3rem; height: 3rem; font-size: 1rem; }
@media (min-width: 768px) { .avatar-cartao { width: 3.5rem; height: 3.5rem; font-size: 1.125rem; } }
.avatar-folha { width: 2.5rem; height: 2.5rem; font-size: .875rem; }

/* Tom escolhido de forma estável a partir do nome (o mesmo aluno tem sempre o mesmo tom) */
.avatar-tom-1 { background-color: var(--avatar-1-fundo); color: var(--avatar-1-texto); }
.avatar-tom-2 { background-color: var(--avatar-2-fundo); color: var(--avatar-2-texto); }
.avatar-tom-3 { background-color: var(--avatar-3-fundo); color: var(--avatar-3-texto); }
.avatar-tom-4 { background-color: var(--avatar-4-fundo); color: var(--avatar-4-texto); }


/* "X" circular de 48px, usado no topo do menu e nas folhas informativas. */
.btn-fechar-circulo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--texto);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease;
}
.btn-fechar-circulo:hover { background-color: var(--fundo); }


/* ============================================================================
   10. MENU (offcanvas do Bootstrap)
   Tela cheia no mobile, painel lateral de 400px a partir do md.
   O Bootstrap cuida de backdrop, ESC, trava de rolagem e foco.
   ========================================================================== */
.menu-portal {
  --bs-offcanvas-width: 100%;
  --bs-offcanvas-bg: var(--superficie);
  --bs-offcanvas-color: var(--texto);
  --bs-offcanvas-border-width: 0;
  --bs-offcanvas-padding-x: 0;
  --bs-offcanvas-padding-y: 0;
  --bs-offcanvas-transition: transform .25s ease-out;
}

.menu-topo {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--borda);
}
.menu-identidade { padding-top: .25rem; }
.avatar-usuario {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--marca);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-usuario .badge { font-size: .5rem; }
.menu-nome { font-size: 18px; font-weight: 700; line-height: 1.25; }
.menu-status { font-size: 15px; color: var(--texto-suave); }
.menu-topo .btn-fechar-circulo { margin: -.25rem -.5rem 0 0; }

.menu-corpo { overflow-y: auto; }

.item-menu {
  width: 100%;
  min-height: 72px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  text-decoration: none;
  background-color: transparent;
  border: 0;
  color: inherit;
  transition: background-color .15s ease;
}
.item-menu:hover { background-color: var(--fundo); }
.menu-lista > li { border-bottom: 1px solid var(--borda); }
.menu-lista > li:last-child { border-bottom: 0; }

.icone-menu {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  font-size: 1.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--marca);
  background-color: color-mix(in srgb, var(--marca) 12%, white);
}
.item-menu-titulo { display: block; font-size: 17px; font-weight: 700; }
.item-menu-descricao { display: block; font-size: 15px; color: var(--texto-suave); }

/* Sair: separado no rodapé do painel, longe dos itens de uso comum. */
.menu-sair { border-top: 1px solid var(--borda); }
.menu-sair .item-menu { color: var(--erro); }
.menu-sair .icone-menu { color: var(--erro); background-color: var(--erro-tonal); }

/* Assinatura do produto: única ocorrência da logo do Escolar Manager. */
.menu-assinatura {
  border-top: 1px solid var(--borda);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .375rem;
  text-align: center;
}
.logo-escolarmanager { height: 28px; width: auto; opacity: .9; }

@media (min-width: 768px) { .menu-portal { --bs-offcanvas-width: 400px; } }


/* ============================================================================
   11. FOLHAS INFORMATIVAS (modal do Bootstrap)
   Bottom-sheet no mobile (sobe de baixo, com alça) e diálogo centrado
   a partir de md — o mesmo componente, só mudando o alinhamento.
   ========================================================================== */

.folha {
  --bs-modal-width: 32rem;
  --bs-modal-bg: var(--superficie);
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: var(--raio-cartao);
  --bs-modal-box-shadow: var(--sombra-painel);
}

.folha .modal-dialog {
  margin: 0;
  min-height: 100%;
  max-width: none;                /* full-bleed até md, apesar do max-width que o Bootstrap põe em ≥576px */
  display: flex;
  align-items: flex-end;          /* colada ao rodapé: efeito de bottom-sheet */
}
/* A transição fica na regra com .fade para vencer, por especificidade,
   o `.modal.fade .modal-dialog { transition: transform .3s }` do Bootstrap. */
.folha.fade .modal-dialog {
  transition: transform 250ms ease-out, opacity 200ms ease-out;
  transform: translateY(100%);
}
.folha.show .modal-dialog { transform: none; }

.folha .modal-content {
  max-height: 85svh;
  border-radius: var(--raio-cartao) var(--raio-cartao) 0 0;
  box-shadow: var(--bs-modal-box-shadow);
}

.folha .modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem 1.25rem 1.5rem;
}

@media (min-width: 768px) {
  .folha .modal-dialog {
    margin: var(--bs-modal-margin) auto;
    min-height: calc(100% - var(--bs-modal-margin) * 2);
    max-width: var(--bs-modal-width);
    align-items: center;
  }
  /* No desktop o sheet vira diálogo centrado: fade + scale */
  .folha.fade .modal-dialog { transform: translateY(1rem) scale(.97); opacity: 0; }
  .folha.show .modal-dialog { transform: none; opacity: 1; }
  .folha .modal-content { border-radius: var(--raio-cartao); }
  .folha .modal-body { padding: 1.75rem; }
}

/* Alça do bottom-sheet (só no mobile) */
.alca-folha {
  margin-inline: auto;
  width: 2.5rem;
  height: .25rem;
  border-radius: var(--raio-pilula);
  background-color: var(--borda-forte);
}

.folha-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: .75rem;
}
@media (min-width: 768px) { .folha-cabecalho { margin-top: 0; } }

.titulo-folha {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;         /* explícita: o Reboot dá 1.2 a h1-h6 */
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--texto);
}
@media (min-width: 768px) { .titulo-folha { font-size: 1.25rem; } }

.texto-folha {
  margin: .75rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--texto-descricao);
}
.texto-folha-colado { margin-top: .25rem; }

.subtitulo-folha {
  margin: 1.25rem 0 0;
  font-size: .875rem;
  line-height: 1.4;         /* explícita: o Reboot dá 1.2 a h1-h6 */
  font-weight: 500;
  color: var(--texto-secundario);
}
.subtitulo-ajuda {
  margin: 1rem 0 0;
  font-size: 1rem;
  line-height: 1.4;         /* explícita: o Reboot dá 1.2 a h1-h6 */
  font-weight: 600;
  color: var(--texto);
}

/* Identificação do aluno no topo da folha */
.identidade-aluno-faixa {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  border-radius: var(--raio-botao);
  background-color: var(--superficie-rebaixada);
}
.identidade-nome { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--texto); }
.identidade-serie { font-size: 13px; line-height: 1.4; color: var(--texto-secundario); }

/* Documentos e boletos */
.lista-downloads { margin: .5rem 0 0; padding: 0; list-style: none; }
.lista-downloads li + li { border-top: 1px solid var(--borda-sutil); }

.botao-download {
  width: 100%;
  min-height: 3rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .25rem;
  border: 0;
  border-radius: var(--raio-pequeno);
  background-color: transparent;
  font-size: 15px;
  text-align: left;
  color: var(--texto-item);
}
.botao-download:hover { background-color: var(--superficie-rebaixada); }
.botao-download:active { background-color: var(--pressionado); }
.icone-download { flex-shrink: 0; color: var(--texto-secundario); }
.icone-baixar { flex-shrink: 0; color: var(--texto-icone); }

/* ---- 4.10 Toast (componente do Bootstrap) --------------------------- */

.area-toast {
  position: fixed;
  bottom: 1rem;
  left: 0;
  right: 0;
  z-index: 1090;                  /* acima do modal (1055) */
  display: flex;
  justify-content: center;
  padding-inline: 1rem;
  pointer-events: none;
}
.toast-portal {
  --bs-toast-bg: #0F172A;
  --bs-toast-color: #FFFFFF;
  /* Sem borda: com largura 1px sobraria um fio transparente em volta do toast
     escuro (o .toast usa background-clip: padding-box). */
  --bs-toast-border-width: 0;
  --bs-toast-border-color: transparent;
  --bs-toast-border-radius: var(--raio-botao);
  --bs-toast-box-shadow: var(--sombra-flutuante);
  /* O Bootstrap aplica --bs-toast-max-width como `width` fixa; aqui o toast
     abraça o texto e só para de crescer em 24rem. */
  width: auto;
  max-width: min(24rem, 100%);
  text-align: center;
  pointer-events: none;           /* o toast não intercepta toques na área que ocupa */
  transition: transform 250ms ease-out, opacity 250ms ease-out;
}
.toast-portal .toast-body { padding: .75rem 1rem; font-size: 15px; line-height: 1.4; }
/* .showing é o estado "escondido" tanto na entrada quanto na saída */
.toast-portal.showing { opacity: 0; transform: translateY(1rem); }

 * 5. PREFERS-REDUCED-MOTION
 * Tudo vira fade rápido, sem deslocamento. (O Bootstrap já desliga as
 * próprias transições; aqui cuidamos das que este tema acrescentou.)
 * ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cabecalho-portal,
  .cartao-aluno { transition: none; }
  .cartao-aluno:active { transform: none; }
  .drawer-menu { --bs-offcanvas-transition: none; }
  .folha.fade .modal-dialog,
  .toast-portal { transition: opacity 100ms linear; }
  /* O estado "escondido" precisa ser :not(.show) — no Bootstrap a classe .fade
     está sempre presente (marca a animação), não é um estado. */
  .folha.fade:not(.show) .modal-dialog { transform: none; opacity: 0; }
  .folha.show .modal-dialog { transform: none; opacity: 1; }
  .toast-portal.showing { transform: none; opacity: 0; }
  .ponto-pulsante { animation: none; }
}