/* Portal da Equipe — Brasil Canadá Santana
   Identidade do Manual de Marca v2: Playfair Display + Poppins, quatro cores,
   sem emoji e sem marcador de lista. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;1,600&family=Poppins:wght@400;500;600&family=Noto+Color+Emoji&display=swap');

:root {
  --vermelho: #CF003D;
  --amarelo: #EECA00;
  --preto: #000;
  --cinza: #4A4247;
  --linha: #E6DED4;
  --fundo-suave: #FCFAF5;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Poppins', system-ui, sans-serif, 'Noto Color Emoji';
  color: var(--cinza);
  background: #fff;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.pagina { max-width: 1080px; margin: 0 auto; padding: 28px 24px 64px; }

.topo {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 20px; border-bottom: 1px solid var(--linha); margin-bottom: 32px;
}
.topo .idmarca { display: flex; align-items: center; gap: 14px; }
.topo .topo-acoes { display: flex; align-items: center; gap: 12px; }
.topo .topo-acoes .etiqueta:empty { display: none; }
.topo img { height: 52px; }
.topo .nome {
  font-weight: 600; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--preto); line-height: 1.5;
}
.topo .nome span { display: block; color: var(--vermelho); font-size: 10px; letter-spacing: .22em; }

.chapeu {
  font-weight: 600; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--vermelho);
}
h1 {
  font-family: 'Playfair Display', serif; font-weight: 800;
  font-size: clamp(30px, 4.6vw, 46px); line-height: 1.08;
  color: var(--preto); letter-spacing: -.5px; margin-top: 8px;
}
h1 em { font-style: italic; font-weight: 600; color: var(--vermelho); }
h2 {
  font-family: 'Playfair Display', serif; font-weight: 800;
  font-size: 26px; color: var(--preto); margin: 0 0 6px;
}
.regua { width: 78px; height: 5px; background: var(--amarelo); margin: 20px 0 18px; }
.lead { font-size: 16px; line-height: 1.65; max-width: 640px; }

.secao { margin-top: 44px; }
.secao > .chapeu { display: block; margin-bottom: 14px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }

/* As ferramentas em caixas por assunto — pedagógico, famílias, matrícula,
   financeiro. A caixa é uma faixa clara com um título; quem enxerga poucas
   telas vê uma só, e a direção deixa de receber vinte cartões numa pilha. */
.caixa-grupo { margin-top: 26px; border: 1px solid var(--linha); border-radius: 14px;
               background: var(--fundo-suave); padding: 20px 22px 24px; }
.caixa-grupo:first-of-type { margin-top: 0; }
/* Trocar o próprio código, na porta de entrada (28/08/2026). Reaproveita a
   caixa das ferramentas; só os três campos lado a lado são daqui. */
#formMeuCodigo { margin: 0 0 26px; max-width: 660px; }
.linha-codigo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.linha-codigo label { margin-top: 0; }
@media (max-width: 640px) { .linha-codigo { grid-template-columns: 1fr; } }

.caixa-cab { margin-bottom: 16px; }
.caixa-cab .chapeu { display: block; margin-bottom: 4px; }
.caixa-cab .lead { font-size: 13.5px; color: var(--cinza); max-width: 720px; }
.card {
  border: 1px solid var(--linha); border-radius: 14px; padding: 22px 24px;
  background: #fff; display: flex; flex-direction: column; gap: 8px;
}
/* Ferramenta em PILOTO — liberada a um pedaço da escola, não à área inteira.
   Nasce escondida e só aparece quando o portal-nav.js confirma no servidor que
   esta pessoa alcança alguma turma do piloto. Escondida por padrão porque
   cartão que pisca na tela e some é pior do que cartão que não veio. */
.card[data-piloto] { display: none; }
.card[data-piloto].liberado { display: flex; }
.card h3 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 20px; color: var(--vermelho); }
.card p { font-size: 13.5px; line-height: 1.55; flex: 1; }
.card.apagado { background: var(--fundo-suave); }
.card.apagado h3 { color: var(--cinza); }

.botao {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  font-family: 'Poppins', sans-serif, 'Noto Color Emoji'; font-weight: 600; font-size: 14px;
  background: var(--vermelho); color: #fff; border-radius: 10px;
  padding: 12px 22px; text-align: center;
}
.botao:hover { filter: brightness(1.08); }
.botao.secundario { background: #fff; color: var(--vermelho); border: 1.5px solid var(--vermelho); }
.botao.miudo { padding: 8px 14px; font-size: 12.5px; border-radius: 8px; }
.botao[disabled] { opacity: .45; cursor: default; }

.etiqueta {
  display: inline-block; font-weight: 600; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; border-radius: 5px; padding: 3px 9px;
}
.etiqueta.breve { border: 1px solid var(--linha); color: var(--cinza); }
.etiqueta.ativo { background: var(--vermelho); color: #fff; }
.etiqueta.escrita { background: var(--preto); color: var(--amarelo); }
.etiqueta.encerrado { border: 1px solid var(--cinza); color: var(--cinza); }

table { width: 100%; border-collapse: collapse; }
th {
  font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vermelho); text-align: left; padding: 0 14px 10px 0;
  border-bottom: 1px solid var(--linha);
}
td { font-size: 13.5px; line-height: 1.5; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--linha); vertical-align: top; }
td.forte { font-weight: 600; color: var(--preto); }

label { display: block; font-weight: 600; font-size: 13px; color: var(--preto); margin: 18px 0 6px; }
label .opcional { font-weight: 400; color: var(--cinza); font-size: 12px; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number],
input[type=password], input[type=url], textarea, select {
  width: 100%; font-family: 'Poppins', sans-serif, 'Noto Color Emoji'; font-size: 15px; color: var(--preto);
  border: 1.5px solid var(--linha); border-radius: 10px; padding: 11px 14px; background: #fff;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--vermelho); }

.aviso {
  border-left: 4px solid var(--amarelo); background: var(--fundo-suave);
  border-radius: 0 12px 12px 0; padding: 14px 18px; font-size: 13.5px; line-height: 1.55;
  margin: 16px 0;
}
.erro { color: var(--vermelho); font-weight: 600; font-size: 13.5px; margin-top: 10px; }

.rodape {
  margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--linha);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12px;
}
.rodape .marca { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; color: var(--preto); }

.escondido { display: none !important; }

/* A dobra: seção que abre num toque, com o chapéu e o número no resumo.
   Nasceu na Rematrícula (14/10/2026), para as listas longas não passarem do
   teto do celular; serve a qualquer tela com lista que cabe fechada. */
.dobra { border-top: 1px solid var(--linha); }
.dobra > summary { padding: 14px 0 12px; cursor: pointer; list-style: none; }
.dobra > summary::-webkit-details-marker { display: none; }
.dobra > summary .chapeu { display: inline-block; margin-bottom: 0; }
.dobra > summary .chapeu::before { content: '›'; display: inline-block; margin-right: 8px;
  transition: transform .15s; color: var(--vermelho); }
.dobra[open] > summary .chapeu::before { transform: rotate(90deg); }
.dobra > summary .sub { display: block; font-size: 12.5px; color: var(--cinza); margin-top: 4px; }
.dobra > :not(summary) { margin-bottom: 18px; }

/* A FOTO QUE SE AJUSTA À CAIXA (20/10/2026). A caixa tem a proporção do
   layout (a tela põe aspect-ratio na própria caixa), a foto preenche e a sobra
   é cortada; o object-position vem de public/foto-recorte.js, a mesma conta do
   PDF. Só no modo "Ajustar o corte" (.ajustando) a caixa segura o dedo
   (touch-action: none): fora dele, rolar a página por cima da foto continua
   funcionando no celular. Nasceu no relatório; serve a qualquer foto em caixa. */
.recorte { position: relative; overflow: hidden; width: 100%; background: var(--fundo-suave);
  box-shadow: 0 0 0 1px var(--linha); border-radius: 8px; }
/* O fio em box-shadow, não em border: com borda, a área da foto perderia 2 px
   e a proporção deixaria de ser exatamente a da caixa do PDF. */
.recorte > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 33.333%; pointer-events: none;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.recorte.ajustando { touch-action: none; cursor: grab; outline: 3px solid var(--amarelo); outline-offset: 2px; }
.recorte.ajustando.arrastando { cursor: grabbing; }
.recorte-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.recorte-acoes .recorte-auto { background: none; border: 0; padding: 10px 4px; min-height: 40px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--cinza); text-decoration: underline; }
.recorte-acoes .recorte-auto:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }

/* Tela de senha */
.portao { max-width: 420px; margin: 9vh auto 0; text-align: center; }
.portao img { height: 96px; margin-bottom: 18px; }
.portao h1 { font-size: 34px; }
.portao form { margin-top: 22px; text-align: left; }
.portao .botao { width: 100%; margin-top: 16px; }

/* "Continuar conectado neste aparelho": fica discreto, porque na maior parte
   das vezes ele já vem marcado certo e não é decisão de ninguém. */
.portao .lembrar {
  display: flex; align-items: center; gap: 9px; margin-top: 14px;
  font-size: 13.5px; color: var(--cinza); cursor: pointer; font-weight: 400;
}
.portao .lembrar input { width: 17px; height: 17px; margin: 0; accent-color: var(--vermelho); }

/* Os botões do painel de avisos: em pé no celular, lado a lado no computador. */
.linha-avisos { display: flex; flex-wrap: wrap; gap: 10px; }
.linha-avisos .botao { flex: 0 1 auto; }

/* A escolha de departamento saiu da porta em 28/08/2026 — a entrada passou a ser
   nome e senha, uma pessoa uma senha, e o estilo dos botões de área foi embora
   junto. O que sobrou aqui serve à porta de hoje: o link discreto da entrada de
   emergência e a etiqueta que ela acende. */
.portao .direcao-link {
  margin-top: 18px; background: none; border: none; color: var(--cinza);
  font-family: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline;
}
.portao .escolhida {
  display: inline-block; background: var(--vermelho); color: #fff; font-weight: 600;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 5px; margin-bottom: 4px;
}
.portao .trocar {
  background: none; border: none; color: var(--vermelho); font-family: inherit;
  font-size: 12.5px; cursor: pointer; margin-top: 14px;
}

@media (max-width: 640px) {
  .pagina { padding: 20px 16px 48px; }
  .topo img { height: 42px; }
  th, td { padding-right: 10px; }
  /* No celular o topo não cabe numa linha: marca, etiqueta da área, Sair e a
     busca por criança. Sem quebrar, o último item saía pela borda e empurrava a
     página inteira de lado (visto na entrada, num aparelho de 375px). */
  .topo { flex-wrap: wrap; gap: 12px; }
}

/* Escolha de turmas no montador de formulários */
.turmas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.turma { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #e4e0d6;
  border-radius: 10px; font-size: 14px; cursor: pointer; background: #fff; }
.turma:hover { border-color: #cf003d; }
.turma input { width: 16px; height: 16px; accent-color: #cf003d; }
.turma-qtd { margin-left: auto; font-size: 12px; color: #8a8578; background: #f2efe7;
  border-radius: 999px; padding: 1px 8px; }

/* O quadro de alunos da entrada (10/09/2026) — direção, coordenação e secretaria.
   Pastilhas pequenas, uma por turma; a lista de nomes abre embaixo. */
.quadro-alunos { margin: 22px 0 6px; }
.quadro-abrir { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--cinza); background: var(--fundo-suave);
  border: 1px solid var(--linha); border-radius: 999px; padding: 7px 14px; }
.quadro-abrir b { color: var(--preto); }
/* A seta diz que a linha abre (avaliação de 14/10/2026, item 2.6); aberta, vira "−". */
.quadro-abrir::after { content: '›'; margin-left: 2px; color: var(--vermelho); font-weight: 600; font-size: 16px; line-height: 1; }
.quadro-abrir[aria-expanded="true"]::after { content: '−'; font-size: 13px; }
.quadro-abrir:hover { border-color: var(--vermelho); }
.quadro-corpo { margin-top: 10px; border: 1px solid var(--linha); border-radius: 12px;
  padding: 14px 16px; background: var(--fundo-suave); }
.quadro-turmas { display: flex; flex-wrap: wrap; gap: 7px; }
.quadro-turma { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--preto); background: #fff;
  border: 1px solid var(--linha); border-radius: 999px; padding: 5px 6px 5px 12px; }
.quadro-turma:hover { border-color: var(--vermelho); }
.quadro-turma .n { font-weight: 600; min-width: 24px; text-align: center; border-radius: 999px;
  padding: 1px 7px; background: var(--fundo-suave); color: var(--vermelho); }
.quadro-turma[aria-expanded="true"] { border-color: var(--vermelho); background: var(--vermelho); color: #fff; }
.quadro-turma[aria-expanded="true"] .n { background: #fff; }
.quadro-lista { margin-top: 12px; background: #fff; border: 1px solid var(--linha);
  border-radius: 10px; padding: 12px 14px; }
.quadro-lista-cab { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  margin-bottom: 8px; font-size: 12.5px; }
.quadro-lista-cab b { font-size: 14px; color: var(--preto); }
.quadro-nomes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 18px; }
.quadro-nomes a { font-size: 13px; color: var(--preto); text-decoration: none; padding: 4px 0;
  border-bottom: 1px solid var(--fundo-suave); }
.quadro-nomes a:hover { color: var(--vermelho); }
.quadro-nomes .num { display: inline-block; min-width: 22px; color: var(--cinza); font-size: 11.5px; }
.quadro-nota { font-size: 12px; color: var(--cinza); margin-top: 8px; }

/* Faixa "o que precisa de você" na entrada do portal. O aviso mora aqui,
   não no celular pessoal de quem trabalha (decisão da Carol, 19/08/2026). */
.avisos { margin: 26px 0 4px; min-height: 84px; }
.avisos-linha { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
/* Enquanto o Portal procura, e quando não há nada: a caixa fala nos dois casos.
   O min-height acima segura a altura para a página não pular quando a resposta
   chega (a lista tem cerca da mesma altura das duas linhas de texto). */
.avisos .em-dia { margin-top: 10px; max-width: 620px; }
.aviso-item {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  border: 1px solid var(--linha); border-radius: 8px; padding: 12px 16px;
  background: #fff; color: var(--preto); min-width: 200px; flex: 1;
}
.aviso-item:hover { border-color: var(--vermelho); }
/* O cartão é um link e precisa parecer um: a seta no canto direito diz "toque
   aqui" (avaliação de 14/10/2026, item 2.5). */
.aviso-item::after { content: '›'; margin-left: auto; color: var(--cinza); font-size: 22px; line-height: 1; padding-left: 6px; }
.aviso-item:hover::after { color: var(--vermelho); }
.aviso-item .n { font-size: 26px; font-weight: 700; line-height: 1; }
.aviso-item .t { font-size: 12.5px; line-height: 1.35; color: var(--cinza); }
.aviso-item.alerta .n { color: var(--vermelho); }
.aviso-item.atencao .n { color: #a07c00; }
.aviso-item.neutro .n { color: var(--cinza); }

/* ==================================================================
   ESTADOS — o padrão da casa (aprovado por Carol em 28/08/2026)
   Tela vazia, carregando, salvo, erro, sem permissão e confirmação.
   Sete situações, um desenho só. Nenhuma cor nova.

   O bloco chama-se .situacao e NÃO .estado: quatro telas já usam uma
   classe .estado para outra coisa (chamada, financeiro, alimentação e
   rotina) e um .estado global vazaria display, padding, borda e fundo
   para dentro delas. Pelo mesmo motivo a janela é .confirma (a agenda
   das famílias já tem .confirmar) e os botões vão em .acoes-bloco
   (links.html já tem .acoes com estilo próprio de botão).
   ================================================================== */

/* ---------- O bloco ----------
   Um só componente para "não há nada aqui". O modificador diz POR QUE
   não há nada. .comecar é o desenho padrão e não acrescenta regra
   nenhuma — existe para a tela declarar a intenção por escrito. */
.situacao {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center;
  padding: 34px 26px;
  border: 1px solid var(--linha); border-radius: 14px;
  background: var(--fundo-suave);
}
.situacao .titulo {
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: 22px; line-height: 1.2; color: var(--preto);
  text-wrap: balance;
}
.situacao p { font-size: 13.5px; line-height: 1.6; max-width: 380px; color: var(--cinza); }
.situacao .acoes-bloco {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px;
}

/* EM DIA — havia, acabou, e é boa notícia. Fundo branco e o traço
   amarelo da marca por cima do título: o mesmo sinal de "está pronto"
   que a .regua usa nas aberturas. Sem botão principal — não há o que
   fazer, e a tela não finge que há. */
.situacao.em-dia { background: #fff; }
.situacao.em-dia::before {
  content: ''; width: 48px; height: 5px; background: var(--amarelo);
}
.situacao.em-dia .titulo { font-size: 20px; }

/* MIÚDA — o mesmo bloco, em tamanho de resposta: mora dentro de uma lista,
   alinhado à esquerda. É tamanho, não causa: combina com qualquer motivo
   (filtro sem resultado, lista sem item, turma sem criança). O nome antigo
   dizia "sem-achado" e prometia uma causa que o estilo não tem. */
.situacao.miuda {
  align-items: flex-start; text-align: left;
  padding: 18px 20px; gap: 5px; border-radius: 12px;
}
.situacao.miuda .titulo {
  font-family: 'Poppins', sans-serif, 'Noto Color Emoji'; font-weight: 600; font-size: 15px; line-height: 1.4;
}
.situacao.miuda p { font-size: 13px; }
.situacao.miuda .acoes-bloco { justify-content: flex-start; margin-top: 4px; }

/* FECHADO — a pessoa alcançou uma tela que o papel dela não abre.
   Não é erro dela: nada de vermelho. */
.situacao.fechado .acoes-bloco { margin-top: 10px; }

/* ---------- Carregando ----------
   (a) .reservado guarda a altura da região para a página não pular
       quando o dado chega. É a ideia do .avisos { min-height: 84px }
       virada regra geral. A tela diz quanto reservar, pondo
       style="--altura: 240px" no elemento .reservado. */
.reservado { min-height: var(--altura, 120px); }

/*   (b) a frase da espera. Sai de dentro do .avisos e passa a valer em
       qualquer tela. APAGAR o ".avisos .lendo" de hoje. */
.lendo { color: var(--cinza); opacity: .7; font-size: 14px; padding: 16px 0; }

/* O botão que está trabalhando. A tela congela a largura do botão
   ANTES de trocar o texto (bt.style.width = bt.offsetWidth + 'px'),
   senão ele encolhe no meio do clique. */
.botao.ocupado { opacity: .55; pointer-events: none; }

/* ---------- Salvo ----------
   Amarelo sobre preto é a única combinação em que o amarelo pode ser
   texto (lei da marca). Fica grudada no alto enquanto a pessoa rola, e
   some quando a pessoa mexe de novo naquilo — NUNCA sozinha por tempo:
   confirmação que desaparece antes de ser lida não confirma nada.
   A barra do portal-nav.js não é fixa, então top:0 é seguro. */
.faixa-feito {
  position: sticky; top: 0; z-index: 40;
  background: var(--preto); color: var(--amarelo);
  font-weight: 600; font-size: 13px; line-height: 1.45;
  padding: 12px 18px; border-radius: 10px; margin-bottom: 16px;
}
.faixa-feito .quando { color: #fff; font-weight: 400; opacity: .7; }

/* ---------- Falhou ----------
   A faixa .aviso que já existe, com a barra vermelha. A barra passa a
   ter significado: amarelo = olhe para isto (o .aviso de hoje, não
   muda); vermelho = não gravou. */
.aviso.falhou {
  background: #fff;
  border: 1px solid var(--linha); border-left: 4px solid var(--vermelho);
}
.aviso.falhou strong {
  display: block; color: var(--vermelho); font-size: 14px; margin-bottom: 2px;
}
.aviso.falhou .acoes-bloco { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- Confirmar ----------
   Reaproveita o .card. No celular sobe de baixo, onde está o polegar, e
   a ação que destrói fica por último — para não ser tocada por engano. */
.confirma {
  position: fixed; inset: 0; z-index: 95; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0,0,0,.5);
}
.confirma .card { max-width: 440px; width: 100%; gap: 10px; }
.confirma .card h3 { font-size: 22px; color: var(--preto); }
.confirma .card p { font-size: 13.5px; }
.confirma .acoes-bloco { display: flex; gap: 10px; margin-top: 10px; }

/* Estados no celular. Em @media proprio, depois do bloco acima: o
   @media de cima do arquivo vem ANTES destas regras e perderia a
   disputa, porque a especificidade e a mesma e ganha quem vem depois. */
@media (max-width: 640px) {
  .situacao { padding: 26px 18px; }
  .situacao .titulo { font-size: 19px; }
  .situacao .acoes-bloco { width: 100%; flex-direction: column; }
  .situacao .acoes-bloco .botao { width: 100%; }
  .situacao.miuda .acoes-bloco { width: auto; flex-direction: row; }
  .situacao.miuda .acoes-bloco .botao { width: auto; }
  .confirma { align-items: flex-end; padding: 0; }
  .confirma .card { border-radius: 16px 16px 0 0; padding: 24px 20px 28px; }
  /* Column, nao column-reverse: com a marcacao [desistir, fazer], o reverse
     jogava a acao sem volta para CIMA — o contrario do teste da propria
     ordem de servico ("a acao que destroi e a de baixo"). 29/08/2026. */
  .confirma .acoes-bloco { flex-direction: column; }
  .confirma .acoes-bloco .botao { width: 100%; }
}

/* ==================================================================
   CAIXA DE LINKS — os links que a escola manda às famílias
   (links-familia.js, 21/10/2026). Era o estilo da tela "Para as
   famílias" (links.html); virou componente quando a caixa passou a
   morar dentro de Matrícula -> Fichas da matrícula. Tudo sob
   .caixa-links: .acoes, .grupo e .novo são nomes que outras telas
   já usam para outra coisa.
   ================================================================== */
.caixa-links .cl-grupo { margin-top: 22px; }
.caixa-links .cl-grupo:first-child { margin-top: 4px; }
.caixa-links .cl-grupo > .chapeu { display: block; margin-bottom: 10px; }
.caixa-links .cl-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.caixa-links .link-card {
  border: 1px solid var(--linha); border-radius: 14px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.caixa-links .link-card.inativo { opacity: .55; background: var(--fundo-suave); }
.caixa-links .link-card h3 { font-size: 17px; margin: 0; }
.caixa-links .link-card .desc { font-size: 13px; line-height: 1.55; color: var(--cinza); margin: 0; }
.caixa-links .link-card .endereco {
  font-size: 12px; color: var(--cinza); overflow-wrap: anywhere;
  background: var(--fundo-suave); border-radius: 8px; padding: 7px 10px;
}
.caixa-links .acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.caixa-links .acoes button, .caixa-links .acoes a {
  font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600;
  border: 1.5px solid var(--linha); background: #fff; border-radius: 8px;
  padding: 7px 12px; cursor: pointer; color: var(--preto); text-decoration: none;
}
.caixa-links .acoes button:hover, .caixa-links .acoes a:hover { border-color: var(--vermelho); color: var(--vermelho); }
.caixa-links .acoes .principal { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.caixa-links .acoes .principal:hover { color: #fff; opacity: .9; }
.caixa-links .acoes .some { margin-left: auto; color: var(--cinza); border-style: dashed; }
.caixa-links .cl-novo {
  border: 1px solid var(--linha); border-radius: 14px; background: var(--fundo-suave);
  padding: 20px 22px; margin-top: 22px;
}
.caixa-links .cl-grade { display: grid; grid-template-columns: 2fr 1fr; gap: 0 16px; }
.caixa-links .cl-novo label { margin-top: 12px; }
.caixa-links .cl-botoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 720px) {
  .caixa-links .cl-grade { grid-template-columns: 1fr; }
  .caixa-links .cl-novo { padding: 16px 14px; }
}

/* ==================================================================
   GRADE DE ESCOLHA — um botão por opção, em grade que quebra sozinha
   (21/10/2026, nasceu na página de visitas: o dia e a hora da visita).
   A opção escolhida fica cheia de vermelho (aria-pressed="true"), que é
   o que o leitor de tela também entende. Altura mínima de 44 px: é
   escolha feita com o polegar, no celular, por quem ainda não conhece
   a escola.
   ================================================================== */
.grade-escolha { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.grade-escolha button {
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25;
  color: var(--preto); background: #fff; border: 1.5px solid var(--linha); border-radius: 10px;
  padding: 9px 6px; min-height: 44px; cursor: pointer; min-width: 0;
}
.grade-escolha button small {
  display: block; font-weight: 500; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cinza);
}
.grade-escolha button:hover { border-color: var(--vermelho); }
.grade-escolha button:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.grade-escolha button[aria-pressed="true"] { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.grade-escolha button[aria-pressed="true"] small { color: #fff; }

/* ==================================================================
   RECADOS DA EQUIPE (23/10/2026) — a caixa de cada pessoa, o destaque
   na entrada e o lembrete de ligar o aviso no celular. Tudo sob o
   prefixo .rc-: .recado, .caixa e .lembrete já são palavras comuns
   demais para morar soltas aqui. Nenhuma cor nova.
   ================================================================== */

/* O selo: o número de recados não lidos. */
.rc-selo { display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--vermelho); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; }
.rc-selo.zero { background: var(--fundo-suave); color: var(--cinza); border: 1px solid var(--linha); }

/* Na entrada: o recado mais novo não lido, à vista. Barra amarela à esquerda
   = "olhe para isto", o mesmo sinal do .aviso. */
.rc-entrada { margin: 22px 0 4px; }
.rc-destaque { border: 1px solid var(--linha); border-left: 4px solid var(--amarelo);
  border-radius: 0 12px 12px 0; background: #fff; padding: 14px 18px; max-width: 720px; }
.rc-destaque .rc-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rc-destaque .rc-cab .chapeu { margin: 0; }
.rc-destaque .rc-de { font-size: 12.5px; color: var(--cinza); margin-top: 6px; }
.rc-destaque .rc-de b { color: var(--preto); font-weight: 600; }
.rc-destaque .rc-comeco { font-size: 14.5px; line-height: 1.5; color: var(--preto); margin-top: 4px;
  overflow-wrap: anywhere; }
.rc-destaque .acoes-bloco { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.rc-linha { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cinza);
  text-decoration: none; border: 1px solid var(--linha); border-radius: 999px; padding: 6px 14px;
  background: var(--fundo-suave); }
.rc-linha:hover { border-color: var(--vermelho); color: var(--vermelho); }

/* A caixa: um recado por linha; tocar abre o texto inteiro (e marca lido). */
.rc-lista { display: flex; flex-direction: column; gap: 10px; }
.rc-item { border: 1px solid var(--linha); border-radius: 12px; background: #fff; }
.rc-item.novo { border-left: 4px solid var(--amarelo); }
.rc-abrir { display: flex; width: 100%; gap: 12px; align-items: flex-start; text-align: left;
  background: none; border: 0; cursor: pointer; font-family: inherit; padding: 14px 16px; color: inherit; }
.rc-abrir .rc-quem { flex: 1; min-width: 0; }
.rc-abrir .rc-nome { display: block; font-weight: 600; font-size: 14px; color: var(--preto); }
.rc-abrir .rc-quando { display: block; font-size: 12px; color: var(--cinza); margin-top: 2px; }
.rc-abrir .rc-previa { display: block; font-size: 13px; color: var(--cinza); margin-top: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-item[aria-expanded="true"] .rc-previa { display: none; }
.rc-texto { padding: 0 16px 16px; font-size: 14.5px; line-height: 1.6; color: var(--preto);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.rc-lido { font-size: 11.5px; color: var(--cinza); padding: 0 16px 14px; }

/* Escrever: o destino em três botões (a .grade-escolha) e o resto embaixo. */
.rc-escrever { max-width: 720px; }
.rc-escrever .grade-escolha { grid-template-columns: repeat(3, 1fr); }
.rc-contador { font-size: 11.5px; color: var(--cinza); text-align: right; margin-top: 4px; }
.rc-vai { font-size: 13px; line-height: 1.5; color: var(--cinza); margin-top: 10px; min-height: 20px; }
.rc-vai b { color: var(--preto); }

/* Enviados: quem leu e quando, pessoa por pessoa. */
.rc-enviado .rc-texto { padding-top: 2px; }
.rc-gente { border-top: 1px solid var(--linha); margin: 0 16px; padding: 8px 0 12px; }
.rc-pessoa { display: flex; gap: 10px; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--fundo-suave); }
.rc-pessoa .rc-nome { color: var(--preto); font-weight: 500; }
.rc-pessoa .rc-estado { font-size: 12px; color: var(--cinza); }
.rc-pessoa .rc-estado b { color: var(--preto); font-weight: 600; }
.rc-pessoa .rc-estado .rc-falta { color: var(--vermelho); font-weight: 600; }

/* O lembrete de ligar o aviso no celular: fecha por uns dias, volta depois. */
.rc-lembrete { border: 1px solid var(--linha); border-radius: 12px; background: var(--fundo-suave);
  padding: 14px 18px; margin: 16px 0; max-width: 720px; font-size: 13.5px; line-height: 1.55; }
.rc-lembrete strong { display: block; color: var(--preto); font-size: 14px; margin-bottom: 2px; }
.rc-lembrete p { margin-top: 4px; }
.rc-lembrete .acoes-bloco { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 640px) {
  .rc-escrever .grade-escolha { grid-template-columns: 1fr 1fr 1fr; }
  .rc-destaque .acoes-bloco .botao { flex: 1 1 auto; }
}