/* Sabiá — app de verdade. Mesmo céu de manhã do protótipo: cartões brancos, botões laranja de sabiá-laranjeira
   que afundam ao toque, títulos em Fredoka. Tema claro de propósito: é um mundo diurno para crianças. */
:root {
  color-scheme: light;
  --ceu: #E6F3FF; --ceu-fundo: #F3F9FF; --papel: #FFFFFF;
  --tinta: #1C2A4A; --tinta-2: #4A5A7A; --tinta-3: #5B6884;
  --linha: #D7E4F2; --linha-forte: #B9CCE3;
  /* telas da criança (início, trilha, atividade, gravação): papel creme em vez de branco puro, que ofusca. Decisão do
     Eduardo (26/10) com base nos guias de leitura confortável (creme ou pastel, letra escura que não é preta) */
  --creme: #FBF5EA; --creme-topo: #F6ECD9; --creme-claro: #FCF8F0; --areia: #F1E6D2; --marfim: #FFFCF6;
  --linha-creme: #EADFCB; --linha-creme-forte: #D9C9AD;
  --laranja: #F2711C; --laranja-funda: #C9530A; --laranja-texto: #A94407; --laranja-clara: #FFE9DA;
  /* botões com letra branca: tons que passam no contraste da WCAG (4,5:1); o laranja e o verde vivos ficam para enfeite */
  --laranja-botao: #C4500A; --laranja-botao-funda: #8A3605; --folha-botao-funda: #0E5A2B; --folha-texto: #136B34;
  --cereja-texto: #B42328; --uva-texto: #5B3FC4;
  --folha: #23A55A; --folha-funda: #17803F; --folha-clara: #DDF5E6;
  --sol: #FFC83D; --sol-funda: #8A5A00; --sol-clara: #FFF4D1;
  --azul: #2F80ED; --azul-texto: #1F66C9; --azul-clara: #E0EDFF;
  --uva: #7B5CE6; --uva-clara: #ECE6FF; --rosa: #E04F8C;
  --cereja: #D63B40; --cereja-clara: #FDE3E4;
  --noite: #0F1626;
  --f-titulo: "Fredoka", "Nunito", system-ui, sans-serif;
  --f-texto: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-leitura: "Andika", "Nunito", system-ui, sans-serif;
  --raio: 18px;
  --sombra: 0 10px 30px -18px rgba(28, 42, 74, .45);
  --topo-seguro: env(safe-area-inset-top, 0px);
  --baixo-seguro: env(safe-area-inset-bottom, 0px);
}
/* Desenhos embutidos (emojis): no app do Android, e no navegador do Android que não desenha os emojis novos, o Sabiá usa
   a própria fonte (fontes/desenhos.ttf: Noto Color Emoji recortada, licença OFL), para nenhum desenho virar quadradinho
   em tablet antigo. O unicode-range deixa a fonte só para os desenhos: letra, número e espaço continuam nas fontes de texto. */
@font-face {
  font-family: "Sabia Desenhos";
  src: url("../fontes/desenhos.ttf") format("truetype");
  font-weight: 100 900;
  font-display: block;
  unicode-range: U+200D, U+21A9, U+23E9-23FA, U+24C2, U+25AA-25FE, U+2600-27BF, U+2934-2935, U+2B05-2B55, U+3030, U+303D, U+3297, U+3299, U+FE0F, U+1F000-1FAFF;
}
:root.desenhos-embutidos {
  --f-titulo: "Sabia Desenhos", "Fredoka", "Nunito", system-ui, sans-serif;
  --f-texto: "Sabia Desenhos", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-leitura: "Sabia Desenhos", "Andika", "Nunito", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* no mundo da criança o "céu" vira papel: os mesmos nomes de cor, em tons quentes (o roteador põe .tela-crianca no body) */
.tela-crianca, .kid, .tr { --papel: var(--marfim); --ceu-fundo: var(--creme); --ceu: var(--areia); --linha: var(--linha-creme); --linha-forte: var(--linha-creme-forte); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--ceu); color: var(--tinta); font: 16px/1.5 var(--f-texto); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
h1, h2, h3 { margin: 0; font-family: var(--f-titulo); font-weight: 600; line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(26px, 5vw, 34px); }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
p { margin: 0; }
a { color: var(--azul-texto); font-weight: 700; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
[hidden] { display: none !important; }
.ic { width: 22px; height: 22px; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 12px; background: var(--tinta); color: #fff; }
.pular:focus { top: calc(8px + var(--topo-seguro)); }
.abrindo { display: grid; place-items: center; min-height: 60vh; color: var(--tinta-2); font-weight: 700; }

/* ---------- Estrutura ---------- */
.topo { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: calc(10px + var(--topo-seguro)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.marca { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta); text-decoration: none; font: 600 21px var(--f-titulo); }
.marca svg { width: 40px; height: 40px; }
.topo-meio { flex: 1; min-width: 0; color: var(--tinta-2); font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo nav { display: flex; gap: 4px; }
.topo nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; color: var(--tinta-2); text-decoration: none; font-weight: 800; font-size: 14px; }
.topo nav a[aria-current="page"] { background: var(--laranja-clara); color: var(--laranja-texto); }
.conteudo { width: 100%; max-width: 980px; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-right)) calc(96px + var(--baixo-seguro)) max(16px, env(safe-area-inset-left)); }
.conteudo--estreito { max-width: 560px; }
.pilha { display: flex; flex-direction: column; gap: 16px; }
.grade-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
/* título e botão na mesma linha, centrados (sem subtítulo) */
.cabeca--linha { align-items: center; }
.sub { color: var(--tinta-2); }
.nota { color: var(--tinta-3); font-size: 13.5px; }
code { overflow-wrap: anywhere; }

/* barra de baixo da família (celular) */
.nav-baixo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: none; justify-content: space-around; padding: 6px 8px calc(6px + var(--baixo-seguro)); background: #fff; border-top: 1px solid var(--linha); }
.nav-baixo a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 6px 10px; border-radius: 14px; color: var(--tinta-3); text-decoration: none; font-weight: 800; font-size: 12px; }
.nav-baixo a[aria-current="page"] { background: var(--laranja-clara); color: var(--laranja-texto); }
@media (max-width: 759px) {
  .topo nav { display: none; }
  .nav-baixo { display: flex; }
}

/* ---------- Cartões e listas ---------- */
.cartao { padding: 18px; border-radius: var(--raio); background: var(--papel); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.cartao h2 { margin-bottom: 6px; }
.cartao--destaque { border-color: var(--laranja); box-shadow: 0 0 0 3px var(--laranja-clara), var(--sombra); }
.linha { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linha); }
.linha:first-child { border-top: 0; }
.linha-txt { flex: 1; min-width: 0; }
.linha-txt b { display: block; }
.linha-txt small { display: block; color: var(--tinta-2); font-size: 13.5px; }
.vazio { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 12px; text-align: center; color: var(--tinta-2); }
.vazio svg.sabia { width: 110px; height: auto; }
.selo { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.selo--ok { background: var(--folha-clara); color: var(--folha-texto); }
.selo--espera { background: var(--sol-clara); color: var(--sol-funda); }
.selo--ruim { background: var(--cereja-clara); color: var(--cereja-texto); }
.selo--info { background: var(--azul-clara); color: var(--azul-texto); }
.selo .ic { width: 15px; height: 15px; }
.avatar-letra { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--cor, var(--laranja)); color: #fff; font: 600 22px var(--f-titulo); }
.avatar-letra--grande { width: 84px; height: 84px; font-size: 40px; }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 20px; border: 0; border-radius: 999px; background: var(--laranja-botao); color: #fff; font-weight: 800; text-decoration: none; box-shadow: 0 4px 0 var(--laranja-botao-funda); transition: transform .08s, box-shadow .08s, filter .15s; }
.btn:hover { filter: brightness(1.04); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--laranja-botao-funda); }
.btn:disabled { opacity: .55; box-shadow: none; }
.btn--2 { background: #fff; color: var(--tinta); border: 1.5px solid var(--linha-forte); box-shadow: 0 3px 0 var(--linha); }
.btn--2:active:not(:disabled) { box-shadow: 0 1px 0 var(--linha); }
.btn--azul { background: var(--azul-texto); box-shadow: 0 4px 0 #164C96; }
.btn--verde { background: var(--folha-funda); box-shadow: 0 4px 0 var(--folha-botao-funda); }
.btn--perigo { background: var(--cereja); box-shadow: 0 4px 0 #A82A2F; }
/* ação que tira algo (acesso, conta): botão claro com letra vermelha; a confirmação pede um segundo toque */
.btn--2.perigo { color: var(--cereja-texto); border-color: #F0B9BB; }
.btn--2.perigo.confirmar { background: var(--cereja-clara); }
/* coordenação: a turma e o "Trocar professora" na mesma linha (no celular, um embaixo do outro) */
/* ---------- Recados: conversa da família com a escola, uma por criança ---------- */
.msgs { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; max-height: min(60vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
.msg { max-width: min(88%, 560px); padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--ceu-fundo); border: 1px solid var(--linha); }
.msg--meu { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--laranja-clara); border-color: #F7CBA9; }
.msg--falta { background: var(--sol-clara); border-color: #F1DB98; }
.msg-cab { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; justify-content: space-between; }
.msg-cab b { font-size: 14px; }
.msg-cab time { color: var(--tinta-3); font-size: 12.5px; font-weight: 700; }
.msg-texto { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.msg-aviso { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; font-weight: 800; color: var(--sol-funda); }
.msg-aviso .ic { width: 18px; height: 18px; flex: none; }
#f-recado textarea { min-height: 88px; resize: vertical; }
.conversa { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; transition: border-color .15s; }
.conversa:hover { border-color: var(--laranja); }
.conversa-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.conversa-txt b { font: 600 18px var(--f-titulo); }
.conversa-txt small { color: var(--tinta-2); font-size: 13.5px; font-weight: 700; }
/* o começo do último recado: até 2 linhas */
.conversa-ultimo { color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.conversa-fim { display: grid; justify-items: end; gap: 6px; flex: none; }
.conversa-fim time { color: var(--tinta-3); font-size: 12.5px; font-weight: 700; }
.bolinha { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--laranja-botao); color: #fff; font-size: 13px; font-weight: 800; }
/* recado novo no início (família e professora): chama a atenção sem gritar */
.recado-novo { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; border-color: #F7CBA9; background: var(--laranja-clara); }
.recado-novo > .ic:first-child { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: #fff; color: var(--laranja-texto); flex: none; }
.recado-novo span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.recado-novo b { font: 600 17px var(--f-titulo); }
.recado-novo small { color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.link-recado { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; color: var(--azul-texto); font-weight: 800; text-decoration: none; flex: none; }
.link-recado .ic { width: 18px; height: 18px; }
/* nome e e-mail lado a lado quando cabe (convite de outro responsável) */
.grade-campos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
/* mensalidade da criança nos Ajustes: separada do resto por uma linha */
.mensalidade { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--linha); }
.mensalidade p { margin: 0; }
/* criança com a mensalidade cancelada, ainda no mês pago: aviso calmo, com o desfazer ao lado */
.cancelada { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--sol-clara); }
.cancelada .ic { color: var(--sol-funda); }
.cancelada p { display: flex; gap: 8px; align-items: flex-start; flex: 1 1 200px; margin: 0; font-weight: 700; }
.cancelada .ic { width: 20px; height: 20px; flex: none; }
/* equipe: o nome nunca fica espremido pelo botão (sem espaço, o botão desce para a linha de baixo) */
.linha--pessoa { flex-wrap: wrap; }
.linha--pessoa .linha-txt { flex: 1 1 200px; }
.linha--pessoa .linha-txt small { overflow-wrap: anywhere; }
.linha--pessoa .btn { margin-left: auto; }
/* turmas: "Trocar professora" fechado ao lado; aberto, ocupa a linha inteira embaixo (abre sozinho se a professora está sem acesso) */
.linha--turma { flex-wrap: wrap; }
.linha--turma .selo { margin-top: 4px; }
.trocar { margin-left: auto; }
.trocar + .trocar { margin-left: 0; }
.trocar[open] { flex: 1 1 100%; margin-left: 0; }
.trocar-prof { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* mudar o ano da criança, dentro da tabela de inscrições */
.mudar-ano { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 200px; }
.mudar-ano select { min-height: 40px; padding: 6px 10px; border: 1.5px solid var(--linha-forte); border-radius: 12px; background: #fff; }
.mudar-ano .btn { min-height: 40px; padding: 6px 14px; }
.mudar-ano small { flex-basis: 100%; color: var(--tinta-3); font-size: 12.5px; font-weight: 700; }
.trocar-prof select { flex: 1 1 180px; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1.5px solid var(--linha-forte); border-radius: 12px; background: #fff; }
/* aparelhos com a conta aberta */
.aparelhos { display: grid; gap: 10px; }
.aparelhos-txt { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--tinta-2); }
.aparelhos-txt .ic { width: 20px; height: 20px; flex: none; color: var(--folha-texto); }
.btn--texto { min-height: 40px; padding: 8px 10px; background: none; color: var(--laranja-texto); box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
.btn--texto:active:not(:disabled) { transform: none; box-shadow: none; }
.btn--grande { min-height: 56px; padding: 14px 26px; font-size: 18px; }
.btn--bloco { width: 100%; }
.gira { display: inline-block; width: 18px; height: 18px; flex: none; border: 3px solid var(--folha-clara); border-top-color: var(--folha-funda); border-radius: 50%; animation: gira .8s linear infinite; }
.btn .gira { border-color: rgba(255, 255, 255, .45); border-top-color: #fff; }
.btn--2 .gira { border-color: var(--linha); border-top-color: var(--tinta); }
@keyframes gira { to { transform: rotate(360deg); } }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- Formulários ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span { font-weight: 800; font-size: 14.5px; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--linha-forte); border-radius: 14px; background: #fff; font-size: 16px; }
.campo input:focus, .campo select:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px var(--azul-clara); }
.campo .ajuda { color: var(--tinta-3); font-size: 13.5px; }
.campo[data-erro] input { border-color: var(--cereja); }
.erro-form { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--cereja-clara); color: var(--cereja-texto); font-weight: 700; font-size: 14.5px; }
.erro-form .ic { width: 18px; height: 18px; margin-top: 2px; }
.ok-form { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--folha-clara); color: var(--folha-funda); font-weight: 800; }
.codigo { letter-spacing: .35em; text-align: center; font: 700 28px var(--f-titulo) !important; }
.marcar { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--ceu-fundo); border: 1px solid var(--linha); font-weight: 700; cursor: pointer; }
.marcar input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--laranja); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--linha-forte); border-radius: 999px; background: #fff; font-weight: 800; font-size: 14px; color: var(--tinta-2); }
.chips button[aria-pressed="true"] { border-color: var(--folha); background: var(--folha-clara); color: var(--folha-funda); }
.opcoes { display: grid; gap: 10px; }
.opcao { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--linha-forte); border-radius: 16px; background: #fff; cursor: pointer; }
.opcao input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--laranja); }
.opcao:has(input:checked) { border-color: var(--laranja); background: var(--laranja-clara); }
.opcao b { display: block; }
.opcao small { color: var(--tinta-2); }

/* ---------- Avisos que somem sozinhos ---------- */
.avisos { position: fixed; left: 0; right: 0; bottom: calc(84px + var(--baixo-seguro)); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
.aviso { display: inline-flex; align-items: center; gap: 8px; max-width: 520px; padding: 11px 16px; border-radius: 14px; background: var(--tinta); color: #fff; font-weight: 700; box-shadow: 0 12px 30px -12px rgba(15, 22, 38, .6); animation: entra .25s ease; pointer-events: auto; }
.aviso--erro { background: var(--cereja); }
.aviso .ic { width: 18px; height: 18px; color: var(--sol); }
.aviso--erro .ic { color: #fff; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Página inicial e entrada ---------- */
.capa { display: grid; gap: 22px; align-items: center; padding: 18px 0 8px; }
.capa h1 { font-size: clamp(32px, 7vw, 52px); }
.capa h1 em { font-style: normal; color: var(--laranja-botao); }
.capa .lead { font-size: 18px; color: var(--tinta-2); max-width: 46ch; }
.capa-arte { display: grid; place-items: center; }
.capa-arte svg { width: min(280px, 70vw); height: auto; }
@media (min-width: 760px) { .capa { grid-template-columns: 1.2fr .8fr; } }
.pontos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.ponto { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--linha); }
.ponto .ic { color: var(--laranja); width: 26px; height: 26px; }
.ponto b { display: block; }
.ponto span { color: var(--tinta-2); font-size: 14.5px; }
/* página de venda: blocos com respiro, passos numerados, aula de exemplo em linha do tempo e perguntas frequentes */
.venda { gap: 30px; }
.venda-bloco { display: grid; gap: 14px; }
.venda-bloco > h2 { margin: 0; font-size: clamp(24px, 4.6vw, 32px); }
.venda h3 { margin: 0; font: 600 19px var(--f-titulo); }
.link-amostra { display: inline-flex; align-items: center; gap: 8px; justify-self: start; width: fit-content; padding: 6px 2px; border: 0; background: none;
  color: var(--azul-texto); font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.link-amostra .ic { width: 20px; height: 20px; }
.venda-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); counter-reset: passo; }
.venda-passos li { counter-increment: passo; display: grid; gap: 4px; padding: 16px; border: 1px solid var(--linha); border-radius: 18px; background: #fff; }
.venda-passos li::before { content: counter(passo); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; border-radius: 50%;
  background: var(--laranja-clara); color: var(--laranja-texto); font: 600 17px var(--f-titulo); }
.venda-passos b { font-size: 17px; }
.venda-passos span { color: var(--tinta-2); font-size: 14.5px; }
.venda-lista { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--tinta-2); }
.venda-seguranca { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.venda-seguranca li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--linha); color: var(--tinta-2); }
.venda-seguranca .ic { width: 38px; height: 38px; padding: 8px; flex: none; border-radius: 12px; background: var(--azul-clara); color: var(--azul-texto); }
.venda-seguranca b { color: var(--tinta); }
.venda-perguntas { display: grid; gap: 8px; }
.venda-perguntas details { padding: 12px 16px; border: 1px solid var(--linha); border-radius: 14px; background: #fff; }
.venda-perguntas summary { font-weight: 800; cursor: pointer; }
.venda-perguntas p { margin: 8px 0 0; color: var(--tinta-2); }
.venda-fim { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; border-color: var(--laranja); box-shadow: 0 0 0 3px var(--laranja-clara), var(--sombra); }
.venda-fim h2 { margin: 0; }
.amostra-video { width: 100%; max-height: 70vh; border-radius: 18px; background: #000; }
.amostra-linha { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.amostra-linha li { display: grid; grid-template-columns: 86px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.amostra-linha li:last-child { border-bottom: 0; }
.amostra-min { color: var(--laranja-texto); font-weight: 800; font-size: 14px; padding-top: 2px; }
.amostra-linha b { font-size: 16.5px; }
.amostra-linha p { margin: 2px 0 0; color: var(--tinta-2); }
.amostra-lousa { display: grid; gap: 4px; margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: #1F3B2D; color: #F4F7F2; font: 600 16px/1.45 var(--f-leitura); }
.amostra-depois { display: grid; gap: 6px; }
.amostra-depois p { margin: 0; color: var(--tinta-2); }
@media (max-width: 520px) { .amostra-linha li { grid-template-columns: 1fr; gap: 2px; } }
.caixa-entrar { display: flex; flex-direction: column; gap: 16px; }
.caixa-entrar .sabia { width: 96px; height: auto; align-self: center; }

/* ---------- Painel da família ---------- */
.filho { display: flex; flex-direction: column; gap: 14px; }
.filho-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.filho-cab .linha-txt { flex: 1 1 160px; min-width: 0; }
.filho-cab > .selo { margin-left: auto; }
.filho-cab .linha-txt b { font: 600 20px var(--f-titulo); }
/* atalhos do cartão da criança: três do mesmo tamanho, ícone em cima */
.atalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.atalhos a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 10px 6px; border-radius: 14px; border: 1.5px solid var(--linha); background: var(--papel); color: var(--tinta); font-weight: 800; font-size: 13.5px; line-height: 1.2; text-align: center; text-decoration: none; transition: border-color .15s; }
.atalhos a:hover { border-color: var(--azul-texto); }
.atalhos a .ic { width: 22px; height: 22px; color: var(--azul-texto); }
.medidor { display: flex; flex-direction: column; gap: 6px; }
.medidor-barra { height: 12px; border-radius: 999px; background: var(--ceu); overflow: hidden; }
.medidor-barra i { display: block; height: 100%; border-radius: inherit; background: var(--folha); transition: width .4s; }
.medidor[data-nivel="perto"] .medidor-barra i { background: var(--sol); }
.medidor[data-nivel="acabou"] .medidor-barra i { background: var(--cereja); }
.medidor-txt { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--tinta-2); font-weight: 700; }
/* tempo de tela da semana: minutos em cima, linha tracejada do limite, laranja (não vermelho) no dia que passou */
.semana-tela { margin: 0; display: grid; gap: 10px; }
.semana-tela figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
.semana-tela figcaption b { font-size: 15px; }
.semana-tela figcaption span { color: var(--tinta-3); font-size: 13px; font-weight: 700; }
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 150px; }
.semana-dia { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 4px; min-width: 0; }
.semana-min { min-height: 16px; color: var(--tinta-2); font-size: 12px; font-weight: 800; white-space: nowrap; }
.semana-barra { position: relative; width: min(34px, 80%); background: var(--ceu); border-radius: 9px; }
.semana-barra i { position: absolute; left: 0; right: 0; bottom: 0; height: max(4px, var(--alto)); border-radius: 9px; background: var(--azul); }
.semana-barra::after { content: ""; position: absolute; left: -5px; right: -5px; bottom: var(--limite); border-top: 2px dashed var(--tinta-3); }
.semana-dia.passou .semana-barra i { background: var(--laranja); }
.semana-nome { color: var(--tinta-3); font-size: 12.5px; font-weight: 800; }
.semana-dia.hoje .semana-nome { color: var(--tinta); }
.planos { display: grid; gap: 12px; }
.plano { padding: 16px; border-radius: 16px; background: var(--laranja-clara); }
.plano .valor { font: 600 34px var(--f-titulo); }
.plano .valor small { font: 800 15px var(--f-texto); color: var(--tinta-2); }
.lista-check { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.lista-check li { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; font-size: 15px; }
.lista-check .ic { color: var(--folha-funda); width: 20px; height: 20px; }

/* diário */
.evento { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--linha); }
.evento:first-child { border-top: 0; }
.evento .ic-caixa { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--azul-clara); color: var(--azul-texto); }
.evento .ic-caixa .ic { width: 18px; height: 18px; }
.evento time { display: block; color: var(--tinta-3); font-size: 12.5px; font-weight: 700; }
.evento code { display: block; color: var(--tinta-3); font: 600 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.corrente { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; font-weight: 800; }
.corrente--ok { background: var(--folha-clara); color: var(--folha-texto); }
.corrente--ruim { background: var(--cereja-clara); color: var(--cereja-texto); }

/* teclado da senha dos pais */
.pin { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pin-pontos { display: flex; gap: 14px; }
.pin-pontos i { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--tinta-2); }
.pin-pontos i.cheio { background: var(--tinta); border-color: var(--tinta); }
.pin-teclas { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; }
.pin-teclas button { height: 64px; border: 1.5px solid var(--linha-forte); border-radius: 18px; background: #fff; font: 600 26px var(--f-titulo); box-shadow: 0 3px 0 var(--linha); }
.pin-teclas button:active { transform: translateY(2px); box-shadow: none; }
.folha { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(15, 22, 38, .5); }
.folha-caixa { width: min(420px, 100%); max-height: 100%; overflow: auto; padding: 22px; border-radius: 24px; background: #fff; box-shadow: 0 30px 60px -30px rgba(15, 22, 38, .6); animation: entra .2s ease; }
.folha-caixa h2 { text-align: center; margin-bottom: 4px; }
.folha-caixa > p { text-align: center; color: var(--tinta-2); margin-bottom: 14px; }

/* ---------- Modo criança: pouco texto, botões enormes ---------- */
.kid { min-height: 100vh; min-height: 100dvh; padding: calc(12px + var(--topo-seguro)) max(16px, env(safe-area-inset-right)) calc(24px + var(--baixo-seguro)) max(16px, env(safe-area-inset-left)); background: linear-gradient(180deg, var(--creme-topo) 0%, var(--creme-claro) 60%); }
.kid-topo { display: flex; align-items: center; gap: 12px; max-width: 980px; margin: 0 auto 16px; }
.kid-topo h1 { flex: 1; font-size: clamp(26px, 6vw, 38px); }
.kid-cadeado { display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--papel); box-shadow: var(--sombra); color: var(--tinta-2); }
.kid-corpo { display: grid; gap: 16px; max-width: 980px; margin: 0 auto; }
@media (min-width: 900px) { .kid-corpo { grid-template-columns: 1.3fr .7fr; align-items: start; } }
.kid-aula { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; border-radius: 28px; background: var(--papel); box-shadow: var(--sombra); text-align: center; }
.kid-aula .sabia { width: 130px; height: auto; }
.kid-aula h2 { font-size: clamp(24px, 5vw, 32px); }
.kid-aula .hora { font: 600 22px var(--f-titulo); color: var(--tinta-2); }
.btn-kid { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 76px; padding: 16px 34px; border: 0; border-radius: 999px; background: var(--laranja-botao); color: #fff; font: 600 26px var(--f-titulo); box-shadow: 0 6px 0 var(--laranja-botao-funda); }
.btn-kid .ic { width: 32px; height: 32px; }
.btn-kid:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--laranja-botao-funda); }
.btn-kid--verde { background: var(--folha-funda); box-shadow: 0 6px 0 var(--folha-botao-funda); }
.kid-lado { display: flex; flex-direction: column; gap: 16px; }
.kid-sol { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 24px; background: var(--papel); box-shadow: var(--sombra); }
.kid-sol svg.sol { width: 64px; height: 64px; flex: none; }
.kid-sol b { display: block; font: 600 20px var(--f-titulo); }
.kid-sol small { color: var(--tinta-2); font-weight: 700; }
.gravs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grav { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 0 0 12px; border: 0; border-radius: 20px; background: var(--papel); box-shadow: var(--sombra); text-align: left; overflow: hidden; }
.grav-capa { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; background: var(--m, var(--azul)); color: #fff; }
.grav-capa .ic { width: 44px; height: 44px; }
.grav b { padding: 0 12px; font: 600 16px var(--f-titulo); }
.grav small { padding: 0 12px; color: var(--tinta-2); font-weight: 700; }
.grav[aria-disabled="true"] { opacity: .55; }
.grav .tranca { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(15, 22, 38, .7); color: #fff; }
.grav .tranca .ic { width: 18px; height: 18px; }
.fora-tela { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.fora-tela div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border-radius: 20px; background: var(--papel); box-shadow: var(--sombra); text-align: center; font: 600 17px var(--f-titulo); }
.fora-tela svg { width: 54px; height: 54px; color: var(--laranja); }
.fora-tela div:nth-child(2) svg { color: var(--azul); }
.fora-tela div:nth-child(3) svg { color: var(--uva); }
.fora-tela div:nth-child(4) svg { color: var(--folha); }
/* chamada da aula: o tablet toca como uma ligação quando a professora abre a sala */
.chamada { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; overflow-y: auto; padding: calc(24px + var(--topo-seguro)) 20px calc(24px + var(--baixo-seguro)); background: radial-gradient(circle at 50% 28%, #2F80ED 0%, #1C2A4A 72%); color: #fff; text-align: center; }
.chamada-caixa { display: grid; justify-items: center; gap: 10px; max-width: 520px; }
.chamada-foto { width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center; background: #fff; animation: chamada-pulsa 1.6s ease-out infinite; }
.chamada-foto .sabia { width: 128px; height: auto; }
.chamada-pre { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 0; font: 700 16px var(--f-texto); color: #CFE3FF; }
.chamada-pre .ic { width: 20px; height: 20px; }
.chamada h2 { margin: 0; font: 700 clamp(26px, 6vw, 38px)/1.15 var(--f-titulo); color: #fff; }
.chamada-aula { margin: 0; font: 600 18px var(--f-texto); color: #E6F3FF; }
.chamada-botoes { display: flex; gap: clamp(28px, 10vw, 72px); margin-top: 22px; }
.chamada-bt { display: grid; justify-items: center; gap: 8px; padding: 0; background: none; border: 0; color: #fff; font: 700 17px var(--f-texto); cursor: pointer; }
.chamada-bt .ic { width: 84px; height: 84px; padding: 22px; box-sizing: border-box; border-radius: 50%; }
.chamada-bt.sim .ic { background: var(--folha); animation: chamada-balanca 1.2s ease-in-out infinite; }
.chamada-bt.nao .ic { background: rgba(255, 255, 255, .2); }
.chamada-bt:focus-visible { outline: none; }
.chamada-bt:focus-visible .ic { outline: 4px solid var(--sol); outline-offset: 4px; }
@keyframes chamada-pulsa { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 100% { box-shadow: 0 0 0 36px rgba(255, 255, 255, 0); } }
@keyframes chamada-balanca { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .chamada-foto, .chamada-bt.sim .ic { animation: none; } }

/* painel "Ao vivo" da coordenação */
.ao-vivo { display: grid; gap: 12px; }
.ao-vivo-aula { display: grid; grid-template-columns: 74px 1fr auto; gap: 14px; align-items: center; }
.ao-vivo-aula.s-ao_vivo { border-left: 6px solid var(--folha); }
.ao-vivo-aula.s-atrasada { border-left: 6px solid var(--cereja); background: #FFF7F7; }
.ao-vivo-hora b { display: block; font: 700 20px var(--f-titulo); }
.ao-vivo-hora small, .ao-vivo-txt small { color: var(--tinta-2); }
.ao-vivo-txt { min-width: 0; }
.ao-vivo-txt b { display: block; font-size: 17px; overflow-wrap: anywhere; }
.ao-vivo-numeros { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; align-items: center; font-size: 14px; color: var(--tinta-2); }
.ao-vivo-numeros > span:not(.selo) { display: inline-flex; align-items: center; gap: 5px; }
.ao-vivo-numeros .ic { width: 16px; height: 16px; }
.ao-vivo-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  .ao-vivo-aula { grid-template-columns: 56px 1fr; }
  .ao-vivo-acoes { grid-column: 1 / -1; justify-content: stretch; }
  .ao-vivo-acoes .btn { flex: 1; }
}

.pausa { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 24px; background: linear-gradient(180deg, #FFF4D1, #FFFBEF); text-align: center; }
.pausa .sabia { width: 160px; height: auto; }
.pausa h2 { font-size: clamp(28px, 6vw, 40px); margin: 10px 0; }
.m-mat { --m: var(--azul); } .m-port { --m: var(--uva); } .m-cien { --m: var(--folha); } .m-mus { --m: var(--rosa); } .m-arte { --m: #E0A100; }
.m-mov { --m: var(--laranja); } .m-hist { --m: #A0522D; } .m-geo { --m: #0E8C99; } .m-fin { --m: #4D8B16; } .m-prog { --m: #3F51B5; } .m-eu { --m: #E04F8C; }

/* roteiro da aula (professora) */
.roteiro { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.roteiro li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--ceu-fundo); }
.roteiro-min { font: 600 15px var(--f-titulo); color: var(--laranja-texto); font-variant-numeric: tabular-nums; }
.roteiro p { margin: 2px 0 0; color: var(--tinta-2); }
.roteiro-lousa { display: grid; gap: 2px; margin-top: 8px; padding: 10px 12px; border: 1.5px solid var(--linha-forte); border-radius: 10px; background: #fff; font: 700 15px var(--f-leitura); text-align: center; }
@media (max-width: 520px) { .roteiro li { grid-template-columns: 1fr; gap: 4px; } }

/* mapa da BNCC, observações da professora, parecer e certificado */
.barra-prog { display: block; height: 10px; border-radius: 999px; background: var(--ceu); overflow: hidden; }
.barra-prog > span { display: block; height: 100%; border-radius: inherit; background: var(--folha); }
.mapa-total { display: grid; gap: 10px; }
.mapa-total b { display: block; font: 600 30px var(--f-titulo); }
.mapa-total span { color: var(--tinta-2); font-weight: 700; }
.mapa-comp { padding: 0; }
.mapa-comp summary { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 16px 18px; cursor: pointer; list-style: none; }
.mapa-comp summary::-webkit-details-marker { display: none; }
.mapa-comp summary .barra-prog { grid-column: 1 / -1; }
.mapa-comp summary:focus-visible { outline: 3px solid var(--azul); outline-offset: -3px; border-radius: var(--raio); }
.mapa-nome { font: 600 19px var(--f-titulo); }
.mapa-nome::before { content: "▸ "; color: var(--tinta-3); }
.mapa-comp[open] .mapa-nome::before { content: "▾ "; }
.mapa-conta { color: var(--tinta-2); font-weight: 800; white-space: nowrap; }
.habs { display: grid; gap: 10px; margin: 0; padding: 0 18px 18px; list-style: none; }
.hab { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: var(--ceu-fundo); }
.hab-cab { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-weight: 700; }
/* a frase simples na frente; o código da BNCC pequeno, para quem quiser conferir */
.hab-resumo { flex: 1 1 220px; }
.hab-feita { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; background: var(--folha-botao-funda); color: #fff; vertical-align: -4px; }
.hab-feita .ic { width: 14px; height: 14px; }
.hab-codigo { color: var(--tinta-3); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.hab-provas { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.hab-provas small { display: block; color: var(--tinta-2); font-weight: 700; }
.hab-dia { color: var(--tinta-3); font-weight: 800; }
.obs-item { padding: 10px 12px; border-left: 4px solid var(--uva); border-radius: 8px; background: var(--uva-clara); }
.obs-item small { color: var(--tinta-2); font-weight: 700; }
.obs-item p { margin: 4px 0 0; }
.chamada-item { padding: 6px 0; border-bottom: 1px solid var(--linha); }
.chamada-item .linha { border-bottom: 0; }
.obs { margin: 4px 0 8px 0; }
.obs summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 999px; background: var(--uva-clara); color: var(--uva-texto); font-weight: 800; cursor: pointer; list-style: none; }
.obs summary::-webkit-details-marker { display: none; }
.obs summary .ic { width: 18px; height: 18px; }
.obs form { margin-top: 8px; }
.obs textarea { width: 100%; min-height: 84px; padding: 10px 12px; border: 1.5px solid var(--linha-forte); border-radius: 12px; font: inherit; resize: vertical; }

/* sondagem de leitura e escrita: a família vê uma escada de 5 degraus; a professora registra uma vez por mês */
.sondagem-familia h2 { display: flex; align-items: center; gap: 8px; }
.sondagem-familia, .sond-crianca { scroll-margin-top: calc(76px + var(--topo-seguro)); }
.sond-nota { display: flex; gap: 8px; align-items: flex-start; color: var(--tinta-2); font-size: 14.5px; }
.sond-nota .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--uva); }
.sond-linha { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--ceu-fundo); }
.sond-linha small { color: var(--tinta-2); font-weight: 700; }
.sond-linha b { display: block; font: 600 19px var(--f-titulo); }
.sond-linha p { color: var(--tinta-2); font-size: 14.5px; }
.escada { display: flex; flex: none; align-items: flex-end; gap: 4px; height: 44px; }
.degrau { width: 14px; height: calc(10px + var(--k) * 8px); border: 1.5px solid var(--linha-forte); border-radius: 5px 5px 2px 2px; background: var(--ceu); }
.degrau.feito { border-color: var(--folha); background: var(--folha-clara); }
.degrau.agora { border-color: var(--folha-funda); background: var(--folha); }
.sond-hist summary { display: inline-flex; align-items: center; min-height: 40px; color: var(--azul-texto); font-weight: 800; cursor: pointer; }
.sond-hist ul { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.sond-hist li { display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--ceu-fundo); }
.sond-hist li b::first-letter { text-transform: uppercase; }
.sond-hist li span { color: var(--tinta-2); font-size: 14.5px; }
.sond-turmas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.sond-turma { display: grid; gap: 8px; color: inherit; text-decoration: none; transition: border-color .15s; }
.sond-turma:hover { border-color: var(--laranja); }
.sond-turma-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.sond-turma-cab b { font: 600 18px var(--f-titulo); }
.sond-turma small { color: var(--tinta-2); font-weight: 700; }
.sond-mes { width: min(100%, 230px); }
.sond-guia, .sond-crianca { padding: 0; }
.sond-guia summary, .sond-crianca summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 56px; padding: 14px 18px; cursor: pointer; list-style: none; }
.sond-guia summary::-webkit-details-marker, .sond-crianca summary::-webkit-details-marker { display: none; }
.sond-guia summary { font: 600 18px var(--f-titulo); color: var(--azul-texto); }
.sond-guia summary:focus-visible, .sond-crianca summary:focus-visible { outline: 3px solid var(--azul); outline-offset: -3px; border-radius: var(--raio); }
.guia-passos { display: grid; gap: 10px; margin: 0; padding: 0 18px 0 40px; }
.sond-guia .nota { padding: 10px 18px 16px; }
.sond-nome { flex: 1 1 auto; font: 600 19px var(--f-titulo); }
.sond-nome::before { content: "▸ "; color: var(--tinta-3); }
.sond-crianca[open] .sond-nome::before { content: "▾ "; }
.sond-crianca summary small { flex-basis: 100%; color: var(--tinta-2); font-weight: 700; }
.sond-crianca form { padding: 4px 18px 18px; }
.sond-grupo { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.sond-grupo legend { margin-bottom: 8px; padding: 0; font: 600 17px var(--f-titulo); }
.sond-crianca textarea { min-height: 72px; resize: vertical; }

.mais-aulas summary, .detalhes summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--azul-texto); font-weight: 800; cursor: pointer; }
.mais-aulas[open] summary, .detalhes[open] summary { margin-bottom: 8px; }
.detalhes { display: grid; gap: 8px; }

/* família: preparar este aparelho (câmera, microfone e som) antes da primeira aula */
.aparelho-passo { display: grid; gap: 12px; justify-items: start; }
.aparelho-cab { display: flex; align-items: center; gap: 12px; width: 100%; }
.aparelho-cab .ic-caixa { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--azul-clara); color: var(--azul-texto); }
.aparelho-cab .ic-caixa .ic { width: 22px; height: 22px; }
.aparelho-cab .linha-txt b { font: 600 18px var(--f-titulo); }
.aparelho-cab .selo { align-self: flex-start; }
.aparelho-previa { width: min(100%, 360px); aspect-ratio: 4 / 3; border-radius: 16px; background: #000; object-fit: cover; transform: scaleX(-1); }
.aparelho-nivel { width: min(100%, 360px); height: 14px; border-radius: 999px; background: var(--azul-clara); overflow: hidden; }
.aparelho-nivel i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--folha-botao-funda); transition: width .08s linear; }
.aparelho-passo .acoes { align-items: center; }

/* professora: atalhos para se preparar (guia e sala de ensaio) e o guia */
.preparo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.preparo-item { display: flex; gap: 14px; align-items: flex-start; color: inherit; text-decoration: none; transition: border-color .15s; }
.preparo-item:hover { border-color: var(--laranja); }
.preparo-item > .ic { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--laranja-clara); color: var(--laranja-texto); }
.preparo-item b { display: block; font: 600 18px var(--f-titulo); }
.preparo-item small { display: block; margin-top: 2px; color: var(--tinta-2); font-size: 14.5px; }
/* nivelamento (1º ao 5º ano): chamada no cartão da criança, perguntas grandes e o resultado lado a lado */
.nivel-chamar { align-items: center; padding: 12px 14px; border-style: dashed; }
.nivel-chamar > .ic:first-child { width: 40px; height: 40px; padding: 9px; flex: none; }
.nivel-chamar > span { flex: 1; min-width: 0; }
.nivel-chamar b { font-size: 16.5px; }
.nivel-chamar > .ic:last-child { width: 20px; height: 20px; color: var(--tinta-3); flex: none; }
.nivel-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--tinta-2); font-size: 14.5px; }
.nivel-linha .ic { width: 18px; height: 18px; color: var(--azul-texto); }
.nivel-linha a { font-weight: 800; color: var(--azul-texto); }
.nivel-intro, .nivel-q, .nivel-fim { max-width: 640px; width: 100%; margin-inline: auto; }
.nivel-cab { display: flex; gap: 14px; align-items: center; }
.nivel-cab .sabia { width: 72px; height: auto; flex: none; }
.nivel-cab h1 { margin: 0; }
.nivel-passos { margin: 0; padding-left: 22px; display: grid; gap: 10px; color: var(--tinta-2); }
.nivel-passos b { color: var(--tinta); }
.nivel-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.nivel-pergunta { margin: 0; font-size: 24px; line-height: 1.3; outline: none; }
.nivel-figura { display: grid; place-items: center; min-height: 96px; padding: 14px; border-radius: 18px; background: var(--ceu-fundo);
  font-size: 46px; line-height: 1.25; text-align: center; white-space: pre-line; overflow-wrap: anywhere; }
.nivel-figura--texto { place-items: start; min-height: 0; font: 600 19px/1.55 var(--f-leitura, var(--f-texto)); text-align: left; color: var(--tinta); }
.nivel-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.nivel-op { min-height: 58px; padding: 12px 16px; border: 2px solid var(--linha-forte); border-radius: 16px; background: #fff; color: var(--tinta);
  font: 700 20px/1.3 var(--f-texto); text-align: center; overflow-wrap: anywhere; cursor: pointer; transition: border-color .15s, background .15s, transform .08s; }
.nivel-op:hover:not(:disabled) { border-color: var(--azul); }
.nivel-op:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.nivel-op:active:not(:disabled) { transform: translateY(1px); }
.nivel-op:disabled { cursor: default; }
.nivel-op--escolhida { border-color: var(--azul); background: var(--azul-clara); }
.nivel-resultado { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nivel-resultado div { display: grid; gap: 2px; padding: 14px; border-radius: 16px; background: var(--ceu-fundo); text-align: center; }
.nivel-resultado span { color: var(--tinta-3); font-size: 13.5px; font-weight: 800; }
.nivel-resultado b { font: 600 28px var(--f-titulo); color: var(--tinta); }
/* cartões do "Som com a boca" no guia da professora */
.sons { margin-top: 10px; }
.sons summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; color: var(--azul-texto); cursor: pointer; }
.sons-grade { display: grid; gap: 10px; margin-top: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.som-cartao { display: grid; gap: 4px; align-content: start; padding: 12px; border: 1px solid var(--linha); border-radius: 14px; background: #fff; }
.som-cartao p { margin: 0; font-size: 14.5px; }
.som-topo { display: flex; align-items: center; justify-content: space-between; }
.som-letra { font: 600 30px var(--f-leitura); color: var(--laranja-texto); }
.som-desenho { font-size: 32px; line-height: 1; }
.som-boca { color: var(--tinta-2); }
.som-cartao .selo { justify-self: start; }
.guia h2 { display: flex; align-items: center; gap: 10px; }
.guia h2 .ic { width: 26px; height: 26px; color: var(--laranja-texto); }
.guia ul { display: grid; gap: 8px; margin: 10px 0 0; padding-left: 22px; }
.guia li::marker { color: var(--laranja); }
.doc-sub { margin-top: 6px; font-size: 18px; }
.doc-comp { display: grid; gap: 4px; }
.doc-comp ul, .doc-obs { display: grid; gap: 6px; margin: 0; padding-left: 18px; }
.doc-obs { padding-left: 0; list-style: none; }
.doc-obs p { margin: 2px 0 0; }
.doc-obs small { color: var(--tinta-2); font-weight: 700; }
.doc-cod { font: 700 12.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--azul-texto); }
.cert { display: grid; gap: 10px; padding: clamp(18px, 4vw, 34px); border: 3px double var(--laranja); border-radius: 18px; text-align: center; font-size: 18px; }
.cert-titulo { margin: 0; font: 600 20px var(--f-titulo); color: var(--tinta-2); }
.cert-nome { margin: 0; font: 600 clamp(28px, 6vw, 40px)/1.15 var(--f-titulo); color: var(--tinta); }
.cert-nasc { margin: 0; color: var(--tinta-3); font-size: 14px; }
.cert-assina { margin: 18px auto 0; padding-top: 8px; min-width: 240px; border-top: 1.5px solid var(--tinta-3); color: var(--tinta-2); font-weight: 800; font-size: 15px; }

/* atividades da aula (modo criança) */
.ativs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ativ { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 0 0 12px; border: 0; border-radius: 20px; background: var(--papel); box-shadow: var(--sombra); text-align: left; overflow: hidden; cursor: pointer; color: var(--tinta); }
.ativ-capa { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; background: var(--m, var(--laranja)); color: #fff; }
.ativ-capa .ic { width: 44px; height: 44px; }
/* o desenho da aula: quem ainda não lê reconhece a atividade por ele */
.ativ-desenho { font-size: 54px; line-height: 1; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .2)); }
.ativ-feita { position: absolute; top: 8px; left: 8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--papel); color: var(--folha-botao-funda); box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.ativ-capa .ativ-feita .ic { width: 18px; height: 18px; }
.kid-desenho { font-size: 1.25em; vertical-align: -0.08em; }
.ativ b { padding: 0 12px; font: 600 16px var(--f-titulo); }
.ativ-estrelas { padding: 0 12px; font-size: 20px; letter-spacing: 2px; color: var(--linha-forte); }
.ativ-estrelas .cheia { color: var(--sol); }
.ativ[aria-disabled="true"] { opacity: .55; }
.ativ .tranca { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(15, 22, 38, .7); color: #fff; }
.ativ .tranca .ic { width: 18px; height: 18px; }
.kid--ativ .kid-topo h1 { font-size: clamp(22px, 5vw, 32px); }
.at-corpo { display: grid; gap: 14px; max-width: 860px; margin: 0 auto; }
.at-pontos { display: flex; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.at-pontos li { width: 14px; height: 14px; border-radius: 50%; background: var(--papel); border: 2px solid var(--linha-forte); transition: transform .2s; }
.at-pontos li.agora { background: var(--laranja); border-color: var(--laranja); transform: scale(1.3); }
.at-pontos li.feito { background: var(--folha); border-color: var(--folha); }
.at-cartao { display: grid; gap: 18px; padding: clamp(18px, 4vw, 32px); border-radius: 28px; background: var(--papel); box-shadow: var(--sombra); border-top: 8px solid var(--m, var(--laranja)); }
.at-pergunta { font: 700 clamp(24px, 5vw, 34px)/1.25 var(--f-leitura); text-align: center; }
.at-palco { display: grid; gap: 18px; justify-items: center; }
.at-figura { font: 700 clamp(24px, 6vw, 42px)/1.35 var(--f-leitura); text-align: center; white-space: pre-line; padding: 14px 20px; border-radius: 20px; background: var(--ceu-fundo); max-width: 100%; overflow-wrap: anywhere; }
.at-contar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 560px; font-size: clamp(38px, 8vw, 54px); line-height: 1; }
.at-opcoes { display: grid; gap: 12px; width: 100%; max-width: 560px; }
.at-opcoes--icone { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); max-width: 520px; }
.at-op, .at-peca, .at-grupo, .at-tam, .at-seta { border: 3px solid var(--linha); border-radius: 22px; background: var(--papel); color: var(--tinta); box-shadow: 0 5px 0 var(--linha); cursor: pointer; transition: transform .1s; }
.at-op:active:not(:disabled), .at-peca:active:not(:disabled), .at-grupo:active:not(:disabled), .at-tam:active:not(:disabled), .at-seta:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--linha); }
.at-op { min-height: 72px; padding: 14px 18px; font: 700 clamp(20px, 4.4vw, 26px)/1.25 var(--f-leitura); }
.at-opcoes--icone .at-op { min-height: 96px; font-size: clamp(36px, 8vw, 52px); }
.at-palco .certo { border-color: var(--folha); background: var(--folha-clara); animation: at-pula .5s; }
.at-palco .errado { border-color: var(--cereja); background: var(--cereja-clara); animation: at-treme .4s; }
.at-palco button.errado:disabled { opacity: .5; cursor: default; }
.at-palco .dica { border-color: var(--sol); box-shadow: 0 0 0 6px var(--sol-clara), 0 5px 0 var(--sol); animation: at-brilha 1s infinite; }
@keyframes at-treme { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@keyframes at-pula { 50% { transform: scale(1.08); } }
@keyframes at-brilha { 50% { box-shadow: 0 0 0 12px var(--sol-clara), 0 5px 0 var(--sol); } }
.at-casas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.at-casa { display: grid; place-items: center; min-width: 64px; min-height: 64px; padding: 6px 12px; border: 3px dashed var(--linha-forte); border-radius: 16px; color: var(--tinta-3); font: 700 18px/1.2 var(--f-leitura); text-align: center; }
.at-casa.cheia { border-style: solid; border-color: var(--folha); background: var(--folha-clara); color: var(--tinta); }
.at-casas--letras .at-casa { width: 58px; min-width: 0; padding: 0; font-size: 34px; }
.at-pecas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.at-peca { min-height: 64px; padding: 10px 16px; font: 700 20px/1.2 var(--f-leitura); }
.at-pecas--letras .at-peca { width: 64px; padding: 0; font-size: 32px; }
.at-peca.usada { visibility: hidden; }
.at-contador { margin: 0; color: var(--tinta-3); font-weight: 800; }
.at-item { display: grid; place-items: center; min-width: min(240px, 100%); min-height: 120px; padding: 18px 26px; border-radius: 24px; background: var(--ceu-fundo); font: 700 clamp(28px, 6vw, 44px)/1.2 var(--f-leitura); text-align: center; animation: entra .3s; }
.at-grupos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 560px; }
.at-grupo { min-height: 80px; padding: 12px; font: 700 clamp(18px, 4vw, 24px)/1.2 var(--f-leitura); }
.at-tamanhos { display: grid; gap: 12px; width: 100%; max-width: 600px; }
.at-tam { display: grid; grid-template-columns: minmax(70px, 120px) 1fr; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; }
.at-tam-rotulo { font: 700 20px var(--f-leitura); text-align: left; }
.at-barra { display: block; height: 26px; border-radius: 999px; background: var(--m, var(--azul)); }
.at-tamanhos--emoji { grid-template-columns: repeat(3, 1fr); align-items: end; }
.at-tamanhos--emoji .at-tam { grid-template-columns: none; place-items: end center; min-height: 150px; }
.at-tam-emoji { font-size: calc(30px + var(--t, 1) * 22px); line-height: 1; }
.at-grade { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; width: min(100%, 340px); padding: 8px; border-radius: 20px; background: var(--ceu); }
.at-celula { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: var(--papel); font-size: clamp(26px, 7vw, 40px); line-height: 1; }
.at-celula.bloco { background: #EADBC9; }
.at-celula.dica { box-shadow: 0 0 0 4px var(--sol); }
.at-programa-linha { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 520px; }
.at-programa { display: flex; flex: 1; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; min-height: 54px; padding: 8px; border: 2px dashed var(--linha-forte); border-radius: 16px; font-size: 28px; line-height: 1; }
.at-programa small { font: 700 15px var(--f-texto); color: var(--tinta-3); }
.at-apagar { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border: 2px solid var(--linha); border-radius: 16px; background: var(--papel); color: var(--tinta-2); cursor: pointer; }
.at-apagar .ic { width: 26px; height: 26px; }
.at-setas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.at-seta { display: grid; place-items: center; width: 70px; height: 70px; font-size: 32px; }
@media (min-width: 760px) {
  .at-palco--caminho { grid-template-columns: auto minmax(280px, 360px); grid-template-areas: "grade prog" "grade setas" "grade ir"; align-items: center; justify-content: center; column-gap: 32px; }
  .at-palco--caminho .at-grade { grid-area: grade; }
  .at-palco--caminho .at-programa-linha { grid-area: prog; }
  .at-palco--caminho .at-setas { grid-area: setas; }
  .at-palco--caminho #at-ir { grid-area: ir; justify-self: center; }
}
/* celular: o robô, o programa e o botão Ir cabem na altura da tela; as figuras de tamanho cabem na largura */
@media (max-width: 560px) {
  .at-palco--caminho { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "grade grade" "prog ir" "setas setas"; gap: 14px 8px; justify-items: stretch; }
  .at-palco--caminho .at-grade { grid-area: grade; justify-self: center; width: min(100%, 340px, 36vh); }
  .at-palco--caminho .at-programa-linha { grid-area: prog; }
  .at-palco--caminho .at-setas { grid-area: setas; }
  .at-palco--caminho #at-ir { grid-area: ir; min-height: 54px; padding: 8px 16px; gap: 6px; font-size: 20px; }
  .at-palco--caminho #at-ir .ic { width: 24px; height: 24px; }
  .at-tamanhos--emoji .at-tam { min-height: 110px; padding: 8px 6px; }
  .at-tam-emoji { font-size: calc(12px + var(--t, 1) * 13px); }
}
.at-balao { min-height: 30px; margin: 0; text-align: center; font: 600 20px var(--f-titulo); color: var(--tinta-2); }
.at-balao.erro { color: var(--laranja-texto); }
.at-festa { position: fixed; inset: 0; z-index: 56; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 24px; background: rgba(255, 251, 239, .94); text-align: center; animation: entra .2s; }
.at-festa .sabia { width: 150px; height: auto; }
.at-festa b { font: 700 clamp(34px, 8vw, 52px) var(--f-titulo); color: var(--folha-funda); }
.at-estrela { font-size: 64px; line-height: 1; color: var(--sol); text-shadow: 0 3px 0 #E0A100; }
.at-estrela.prata { color: #C3CEDC; text-shadow: 0 3px 0 #9AA8BA; }
.at-festa .at-estrela { animation: at-estrela .7s ease-out; }
@keyframes at-estrela { from { transform: scale(.2) rotate(-160deg); opacity: 0; } }
.at-fim { display: grid; justify-items: center; gap: 12px; text-align: center; }
.at-fim .sabia { width: 140px; height: auto; }
.at-fim h2 { font-size: clamp(26px, 5vw, 36px); }
.at-estrelas { display: flex; gap: 8px; margin: 0; }

/* ---------- Professora e coordenação ---------- */
.aulas-dia { display: grid; gap: 10px; }
.aulas-bloco + .aulas-bloco { margin-top: 12px; }
/* coordenação: o que precisa de ação hoje, cada item leva para a aba certa */
.pendencias { display: grid; gap: 8px; }
.pendencia { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 14px; border-radius: 14px; background: var(--sol-clara); color: var(--tinta); font-weight: 700; text-decoration: none; }
.pendencia > .ic { width: 20px; height: 20px; flex: none; color: var(--laranja-texto); }
.pendencia > .ic:last-child { margin-left: auto; color: var(--tinta-2); }
.pendencia:hover { outline: 2px solid var(--sol); }
.tudo-em-dia { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--folha-texto); font-weight: 700; }
.tudo-em-dia .ic { width: 20px; height: 20px; flex: none; }
.aulas-dia-nome { margin: 0 0 8px; font: 600 17px var(--f-titulo); color: var(--tinta-2); }
.aula-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--linha); }
.aula-linha .hora { min-width: 64px; font: 600 20px var(--f-titulo); }
.aula-linha .linha-txt { min-width: 180px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabela th, .tabela td { padding: 10px 8px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.tabela th { color: var(--tinta-3); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.rolar-x { overflow-x: auto; }
.abas { display: flex; flex-wrap: wrap; gap: 6px; }
/* celular: as abas numa linha só, que desliza para o lado (3 linhas de abas empurravam o conteúdo para o meio da tela) */
@media (max-width: 600px) {
  .abas { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .abas::-webkit-scrollbar { display: none; }
  .abas button { flex: none; }
}
.abas button { min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--linha-forte); border-radius: 999px; background: #fff; font-weight: 800; color: var(--tinta-2); }
.abas button[aria-selected="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
/* no máximo 3 por linha (6 lado a lado no computador deixava "R$ 1.091,00" encostado na borda); no celular, 2 */
.numeros { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(max(150px, calc((100% - 20px) / 3)), 1fr)); }
.numero { padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--linha); }
.numero b { display: block; font: 600 28px var(--f-titulo); overflow-wrap: anywhere; }
.numero span { color: var(--tinta-2); font-size: 13.5px; font-weight: 700; }
.numero--largo { grid-column: 1 / -1; }
.numero--largo b { font-size: clamp(18px, 5vw, 28px); }

/* ---------- Texto longo (termos) ---------- */
.texto-longo { max-width: 70ch; }
.texto-longo h2 { margin: 22px 0 8px; }
.texto-longo p, .texto-longo li { color: var(--tinta-2); margin-bottom: 8px; }
.faixa-rascunho { padding: 12px 14px; border-radius: 14px; background: var(--sol-clara); color: var(--sol-funda); font-weight: 800; }

/* Semana da família: habilidades da BNCC e missão de cada aula */
.dia-semana { font-size: 19px; }
.dia-semana::first-letter { text-transform: uppercase; }
.bncc { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.missao { flex-basis: 100%; display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: var(--sol-clara); }
.missao p { margin: 0; }
.missao .ic { width: 18px; height: 18px; vertical-align: -3px; color: var(--sol-funda); }
.btn:has(input.sr:focus-visible) { outline: 3px solid var(--azul); outline-offset: 2px; }

/* Missão no modo criança */
.kid-missao { padding: 18px; border-radius: 24px; background: var(--papel); box-shadow: var(--sombra); }
.kid-missao h2 { display: flex; align-items: center; gap: 8px; }
.kid-missao h2 .ic { width: 26px; height: 26px; color: var(--sol-funda); }
.kid-missao-item { display: grid; gap: 10px; justify-items: start; padding-top: 6px; font: 600 18px var(--f-titulo); }
.kid-missao-item + .kid-missao-item { border-top: 1px solid var(--linha); padding-top: 12px; }
.btn-kid--menor { min-height: 58px; padding: 10px 26px; font-size: 21px; }
.kid-erro { max-width: 560px; margin: 12vh auto 0; }

/* Documentos com código */
.foto-cart { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.foto-cart img, .foto-vazia { width: 90px; height: 120px; border-radius: 12px; object-fit: cover; flex: none; }
.foto-vazia { display: grid; place-content: center; justify-items: center; gap: 4px; background: var(--ceu-fundo); border: 1.5px dashed var(--linha-forte); color: var(--tinta-3); font-size: 12.5px; font-weight: 700; text-align: center; padding: 6px; }
.foto-vazia .ic { width: 26px; height: 26px; }
.doc-papel { display: grid; gap: 14px; width: min(760px, 100%); margin: 0 auto; padding: clamp(18px, 4vw, 40px); border-radius: 20px; background: #fff; box-shadow: var(--sombra); border: 1px solid var(--linha); }
.doc-papel h1 { font-size: clamp(22px, 4vw, 30px); }
.doc-cab { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--laranja); }
.doc-cab b { display: block; font: 600 22px var(--f-titulo); }
.doc-cab small { color: var(--tinta-3); font-weight: 700; }
.doc-sabia { width: 56px; height: auto; }
.doc-rodape { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--linha); color: var(--tinta-2); font-size: 13.5px; }
.doc-rodape code { overflow-wrap: anywhere; font-size: 12px; }
.doc-codigo { font: 700 18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; color: var(--tinta); }
.cart { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding: 16px; border-radius: 18px; background: var(--ceu-fundo); border: 1px solid var(--linha); }
.cart-foto { width: 120px; height: 160px; border-radius: 14px; object-fit: cover; }
.cart .pilha { gap: 4px; }
.cart-nome { font: 600 22px var(--f-titulo); }
/* "Seus dados" e "Apagar a conta": uma coisa por linha, com respiro; e-mail e texto longo quebram em vez de vazar */
.lista-dados { display: grid; gap: 8px; margin: 0; padding-left: 20px; }
.lista-dados li { line-height: 1.45; overflow-wrap: anywhere; }
.dados-doc dd { overflow-wrap: anywhere; }
.dados-doc { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 6px 14px; margin: 0; }
/* celular: o rótulo em cima do valor (lado a lado, o valor ficava espremido e o e-mail quebrava em pedaços) */
@media (max-width: 520px) {
  .dados-doc { grid-template-columns: 1fr; gap: 0; }
  .dados-doc dt { margin-top: 10px; }
  .dados-doc dt:first-child { margin-top: 0; }
}
.dados-doc dt { color: var(--tinta-3); font-weight: 800; font-size: 13.5px; }
.dados-doc dd { margin: 0; font-weight: 700; }
.doc-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin: 0; }
.doc-numeros div { padding: 10px 12px; border: 1px solid var(--linha); border-radius: 12px; }
.doc-numeros dt { color: var(--tinta-3); font-weight: 800; font-size: 12.5px; }
.doc-numeros dd { margin: 2px 0 0; font: 600 24px var(--f-titulo); color: var(--tinta); }
@media print {
  .topo, .nav-baixo, .nao-imprimir, .avisos { display: none !important; }
  body, .conteudo { background: #fff !important; padding: 0 !important; }
  .doc-papel { box-shadow: none; border: 1px solid #999; border-radius: 0; width: 100%; }
}

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