/* =====================================================================
   CAA · ESTILO VISUAL
   ---------------------------------------------------------------------
   Parábola: o CSS é a "roupa" do site. O HTML é o corpo (o que existe
   na tela) e o JavaScript é o cérebro (o que acontece quando tocamos).

   Inspirações:
   * Apple ...... fundo claro, cartões brancos, muito espaço, poucas
                  distrações (bom para quem se sobrecarrega com estímulos).
   * Duolingo ... botões "gordinhos" com sombra embaixo, que afundam
                  quando tocados, e pequenas comemorações.

   Regra de ouro: botão colorido SEMPRE tem texto BRANCO e em negrito.
   Organização deste arquivo:
     1. Variáveis (cores, tamanhos)     6. Prancha de comunicação
     2. Base e fonte                    7. Tabelas
     3. Botões                          8. Dicionário (progresso)
     4. Formulários                     9. Login e cadastro
     5. Estrutura (menu, topo, abas)   10. Modo foco, animações, celular
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. VARIÁVEIS
   Uma "paleta de tintas" com nome. Se quisermos trocar o verde do site
   inteiro, mudamos só aqui.
   --------------------------------------------------------------------- */
:root {
  /* Superfícies (estilo Apple) */
  --fundo: #f5f5f7;
  --superficie: #ffffff;
  --superficie-2: #fafafc;
  --linha: #e5e5ea;
  --texto: #1d1d1f;
  --texto-2: #6e6e73;
  --texto-3: #8e8e93;

  /* Cores dos botões: todas testadas com texto branco (contraste ≥ 3:1) */
  --verde: #1e9e4f;    --verde-sombra: #147a3b;    --verde-claro: #e7f7ed;
  --azul: #1478d4;     --azul-sombra: #0e5ca6;     --azul-claro: #e6f1fc;
  --vermelho: #e5374f; --vermelho-sombra: #b8243a; --vermelho-claro: #fde9ec;
  --roxo: #8e44dd;     --roxo-sombra: #6c2fb0;     --roxo-claro: #f3eafd;
  --laranja: #d9600a;  --laranja-sombra: #a94a06;  --laranja-claro: #fdf0e6;
  --amarelo: #ffc43d;  --amarelo-claro: #fff6de;

  /* Chave de cores de Fitzgerald (bordas dos cartões PECS) */
  --c-social: #ff7bac;
  --c-pessoa: #ffc43d;
  --c-verbo: #37c26a;
  --c-substantivo: #ff9a3d;
  --c-adjetivo: #3fa9f5;
  --c-pergunta: #a66bf0;
  --c-adverbio: #a8764a;
  --c-importante: #f0445f;
  --c-diverso: #c7ccd6;

  /* Medidas */
  --raio-pequeno: 12px;
  --raio: 18px;
  --raio-grande: 26px;
  --sombra-leve: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .05);
  --sombra-alta: 0 12px 40px rgba(0, 0, 0, .12);
  --largura-menu: 248px;
  --cartao-min: 168px;     /* largura mínima de cada figura na grade (sempre grande) */
  --transicao: 180ms cubic-bezier(.2, .8, .2, 1);
}


/* ---------------------------------------------------------------------
   2. BASE E FONTE
   Nunito: letras arredondadas e fáceis de ler (parecida com a do
   Duolingo). O arquivo da fonte fica dentro do projeto, então o site
   não depende de outro servidor.
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Nunito';
  src: url('../vendor/fonts/nunito-latin.woff2') format('woff2');
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  src: url('../vendor/fonts/nunito-latin-ext.woff2') format('woff2');
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 900; letter-spacing: -.02em; line-height: 1.15; }
h2 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: 17px; font-weight: 800; }
a { color: var(--azul); text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Contorno bem visível para quem navega pelo teclado. */
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 8px; }

/* Link "pular para o conteúdo": aparece só quando recebe foco pelo Tab. */
.pular {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  background: var(--superficie); color: var(--texto); font-weight: 800;
  padding: 12px 18px; border-radius: var(--raio-pequeno); box-shadow: var(--sombra-alta);
}
.pular:focus { top: 16px; }

/* Texto só para leitores de tela (invisível para quem enxerga). */
.so-leitor {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.texto-2 { color: var(--texto-2); }
.pequeno { font-size: 14px; }


/* ---------------------------------------------------------------------
   3. BOTÕES (o "jeitinho Duolingo")
   A sombra dura embaixo (box-shadow 0 4px 0) faz o botão parecer uma
   tecla de verdade. Ao tocar, ele "afunda" 4px e a sombra some.
   --------------------------------------------------------------------- */
.botao {
  --cor: var(--azul);
  --cor-sombra: var(--azul-sombra);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 22px;
  border: 0; border-radius: 16px;
  background: var(--cor); color: #fff;
  font-size: 17px; font-weight: 800; letter-spacing: .01em; line-height: 1.1;
  text-decoration: none; text-align: center;
  box-shadow: 0 4px 0 var(--cor-sombra);
  cursor: pointer; user-select: none;
  transition: transform 90ms ease, box-shadow 90ms ease, filter var(--transicao), opacity var(--transicao);
}
.botao:hover { filter: brightness(1.06); }
.botao:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--cor-sombra); }
.botao:disabled { opacity: .45; cursor: not-allowed; filter: saturate(.6); }
.botao .bi { font-size: 1.2em; }

.botao.verde    { --cor: var(--verde);    --cor-sombra: var(--verde-sombra); }
.botao.azul     { --cor: var(--azul);     --cor-sombra: var(--azul-sombra); }
.botao.vermelho { --cor: var(--vermelho); --cor-sombra: var(--vermelho-sombra); }
.botao.roxo     { --cor: var(--roxo);     --cor-sombra: var(--roxo-sombra); }
.botao.laranja  { --cor: var(--laranja);  --cor-sombra: var(--laranja-sombra); }

/* Botão "neutro": branco com borda (usado quando a ação é secundária). */
.botao.neutro {
  background: var(--superficie); color: var(--texto);
  box-shadow: 0 0 0 2px var(--linha) inset, 0 4px 0 var(--linha);
}
.botao.neutro:active:not(:disabled) { box-shadow: 0 0 0 2px var(--linha) inset, 0 0 0 var(--linha); }

.botao.largo { width: 100%; }
.botao.pequeno { min-height: 42px; padding: 8px 16px; font-size: 15px; border-radius: 14px; }

/* Botão só com ícone (redondinho). */
.botao-icone {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: var(--superficie-2); color: var(--texto);
  font-size: 20px; cursor: pointer;
  box-shadow: 0 0 0 1px var(--linha) inset;
  transition: background var(--transicao), transform 90ms ease;
}
.botao-icone:hover { background: #ececf1; }
.botao-icone:active { transform: scale(.94); }

/* Botão do Google: branco, como pede o guia de marca do Google. */
.botao-google {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 54px; padding: 12px 20px;
  background: #fff; color: #1f1f1f; border: 0; border-radius: 16px;
  box-shadow: 0 0 0 2px var(--linha) inset, 0 4px 0 var(--linha);
  font-size: 17px; font-weight: 800; cursor: pointer;
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.botao-google:active { transform: translateY(4px); box-shadow: 0 0 0 2px var(--linha) inset; }
.botao-google svg { width: 22px; height: 22px; flex-shrink: 0; }
/* O aviso de senha fica em sua própria linha e respira antes do Google. */
.aviso:not(:empty) + #bloco-entrar, .aviso:not(:empty) + #bloco-google { margin-top: 18px; }
/* Caixa do botão oficial do Google (o próprio Google desenha o botão dentro). */
.google-oficial {
  display: flex; justify-content: center; align-items: center;
  width: 100%; min-height: 44px; height: 44px; overflow: hidden;
  contain: layout paint; opacity: 0; transition: opacity 180ms ease;
}
.google-oficial.pronto { opacity: 1; }
.google-oficial:empty { display: flex; }
.google-oficial iframe { display: block !important; max-width: 100% !important; max-height: 44px !important; }

/* Interruptor (liga/desliga) no estilo iPhone. */
.interruptor {
  position: relative; display: inline-block; flex-shrink: 0;
  width: 51px; height: 31px; border-radius: 31px;
  background: #e9e9eb; transition: background var(--transicao);
}
.interruptor::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16);
  transition: transform var(--transicao);
}
[aria-pressed="true"] > .interruptor, .interruptor.ligado { background: #34c759; }
[aria-pressed="true"] > .interruptor::after, .interruptor.ligado::after { transform: translateX(20px); }


/* ---------------------------------------------------------------------
   4. FORMULÁRIOS
   --------------------------------------------------------------------- */
.campo { display: grid; gap: 8px; }
.campo + .campo { margin-top: 16px; }
.campo label, .rotulo { font-weight: 800; font-size: 15px; }
.campo .ajuda { color: var(--texto-2); font-size: 13px; }

.entrada, select.entrada {
  width: 100%; min-height: 54px; padding: 14px 16px;
  background: var(--superficie-2); color: var(--texto);
  border: 2px solid var(--linha); border-radius: 14px;
  font-size: 17px; font-weight: 600;
  transition: border-color var(--transicao), background var(--transicao);
  appearance: none;
}
.entrada::placeholder { color: var(--texto-3); font-weight: 500; }
.entrada:focus { outline: none; border-color: var(--azul); background: #fff; }
select.entrada {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236e6e73' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px;
}

/* Escolha em "pílulas" grandes (ex.: perfil do usuário). */
.escolhas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.escolha { position: relative; display: flex; }
.escolha input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.escolha span {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 92px; padding: 12px 8px; text-align: center;
  border: 2px solid var(--linha); border-radius: 16px; background: var(--superficie-2);
  font-weight: 800; font-size: 14px; line-height: 1.2;
  box-shadow: 0 4px 0 var(--linha);
  transition: border-color var(--transicao), background var(--transicao), transform 90ms ease;
}
.escolha span .bi { font-size: 26px; }
.escolha input:checked + span { border-color: var(--azul); background: var(--azul-claro); color: var(--azul-sombra); box-shadow: 0 4px 0 var(--azul); }
.escolha input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 3px; }
.escolha input:active + span { transform: translateY(3px); }

/* Mensagens de status (sucesso / erro). */
.aviso {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; border-radius: 14px; font-weight: 700; font-size: 15px;
}
.aviso:empty { display: none; }
.aviso.erro { background: var(--vermelho-claro); color: var(--vermelho-sombra); }
.aviso.ok { background: var(--verde-claro); color: var(--verde-sombra); }
.aviso.info { background: var(--azul-claro); color: var(--azul-sombra); }

.divisor {
  display: flex; align-items: center; gap: 14px;
  color: var(--texto-3); font-size: 13px; font-weight: 700; margin: 22px 0;
}
.divisor::before, .divisor::after { content: ''; flex: 1; height: 1px; background: var(--linha); }


/* ---------------------------------------------------------------------
   5. ESTRUTURA DAS TELAS (menu lateral, topo, abas do celular)
   --------------------------------------------------------------------- */

/* Tela de "carregando" enquanto conferimos o login. */
.carregando-tela {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; background: var(--fundo);
  transition: opacity 250ms ease;
}
.carregando-tela.sumindo { opacity: 0; pointer-events: none; }
.bolinhas { display: flex; gap: 10px; }
.bolinhas i {
  width: 16px; height: 16px; border-radius: 50%;
  animation: pular 900ms ease-in-out infinite;
}
.bolinhas i:nth-child(1) { background: var(--c-verbo); }
.bolinhas i:nth-child(2) { background: var(--amarelo); animation-delay: 120ms; }
.bolinhas i:nth-child(3) { background: var(--c-social); animation-delay: 240ms; }
@keyframes pular { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } }

/* Menu lateral (computador e tablet deitado). */
.lateral {
  position: fixed; inset: 0 auto 0 0; z-index: 20;
  width: var(--largura-menu);
  display: flex; flex-direction: column; gap: 28px;
  padding: 26px 18px 20px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--linha);
}
.marca { display: flex; justify-content: center; padding: 4px 8px 0; text-decoration: none; }
.marca img { width: 168px; height: 168px; object-fit: contain; transition: transform var(--transicao); }
.marca:hover img { transform: scale(1.03) rotate(-2deg); }
.marca strong { font-size: 22px; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.marca small { display: block; color: var(--texto-2); font-size: 12px; font-weight: 700; margin-top: 3px; }

.menu { display: grid; gap: 6px; }
.menu a {
  display: flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 10px 14px; border-radius: 14px;
  color: var(--texto); font-weight: 800; font-size: 16px; text-decoration: none;
  transition: background var(--transicao);
}
.menu a .icone {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  color: #fff; font-size: 17px;
}
.menu a:hover { background: rgba(0, 0, 0, .04); }
.menu a[aria-current="page"] { background: var(--superficie); box-shadow: var(--sombra-leve); }
.i-casa { background: var(--verde); }
.i-tabelas { background: var(--laranja); }
.i-dicionario { background: var(--roxo); }
.i-ajustes { background: var(--azul); }

.conta {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  padding: 12px; border-radius: 16px; background: var(--superficie); box-shadow: var(--sombra-leve);
}
.conta { color: var(--texto); text-decoration: none; }
.avatar {
  display: grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-verbo), var(--c-adjetivo));
  color: #fff; font-weight: 900; font-size: 17px; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.conta-texto { min-width: 0; flex: 1; }
.conta-texto strong { display: block; font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conta-texto small { display: block; font-size: 12px; color: var(--texto-2); font-weight: 700; }

/* Área principal ao lado do menu. */
.principal {
  margin-left: var(--largura-menu);
  min-height: 100vh;
  display: flex; flex-direction: column;
  padding: 28px clamp(16px, 3vw, 40px) 24px;
}
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.topo .saudacao { font-size: clamp(26px, 3.2vw, 34px); font-weight: 900; letter-spacing: -.025em; line-height: 1.1; }
.topo .subtitulo { color: var(--texto-2); font-weight: 700; margin-top: 4px; }
.topo-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Botão do Modo Foco (texto + interruptor). */
.botao-foco {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 6px 8px 6px 16px;
  background: var(--superficie); border: 0; border-radius: 30px;
  box-shadow: var(--sombra-leve); font-weight: 800; cursor: pointer;
}
.botao-foco .bi { color: var(--amarelo); font-size: 18px; }

main { flex: 1; }
.rodape { margin-top: 36px; text-align: center; color: var(--texto-3); font-size: 13px; font-weight: 700; }
.rodape a { color: var(--texto-2); }

/* Painel branco genérico (o "cartão" da Apple). */
.painel {
  background: var(--superficie); border-radius: var(--raio-grande);
  box-shadow: var(--sombra-leve); padding: clamp(18px, 2.4vw, 28px);
}
.painel + .painel, .colunas + .painel { margin-top: 20px; }
.painel-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

/* Abas inferiores (celular), no estilo iPhone. */
.abas {
  display: none;
  position: fixed; inset: auto 0 0 0; z-index: 30;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--linha);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.abas a, .abas button {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 54px; justify-content: center; border: 0; background: none;
  min-width: 0; color: var(--texto-3); font-size: 11px; font-weight: 800; text-decoration: none; cursor: pointer;
}
.abas .bi { font-size: 23px; }
.abas a[aria-current="page"] { color: var(--azul); }

/* Aviso flutuante ("toast"), como as notificações do iPhone. */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 80;
  transform: translate(-50%, 30px); opacity: 0;
  display: flex; align-items: center; gap: 10px;
  max-width: min(92vw, 520px); padding: 14px 20px; border-radius: 18px;
  background: rgba(29, 29, 31, .92); color: #fff; font-weight: 800; font-size: 15px;
  box-shadow: var(--sombra-alta);
  transition: transform 260ms cubic-bezier(.2, .9, .3, 1.2), opacity 200ms ease;
  pointer-events: none;
}
.toast.visivel { transform: translate(-50%, 0); opacity: 1; }
.toast.erro { background: var(--vermelho); }

/* Janela sobreposta (ajustes de voz). Usa a tag <dialog> do navegador. */
dialog.folha {
  width: min(94vw, 480px); max-height: 90vh; padding: 0; border: 0;
  border-radius: var(--raio-grande); box-shadow: var(--sombra-alta);
  background: var(--superficie); color: var(--texto);
}
dialog.folha::backdrop { background: rgba(0, 0, 0, .28); backdrop-filter: blur(4px); }
.folha-conteudo { padding: 24px; display: grid; gap: 18px; }
.folha-topo { display: flex; align-items: center; justify-content: space-between; }
.linha-ajuste {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: 16px; background: var(--superficie-2);
  border: 0; width: 100%; text-align: left; font-weight: 800; cursor: pointer;
}
.segmentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: #eeeef2; border-radius: 14px; }
.segmentos button {
  min-height: 42px; border: 0; border-radius: 11px; background: none;
  font-weight: 800; font-size: 14px; cursor: pointer; color: var(--texto-2);
}
.segmentos button[aria-pressed="true"] { background: #fff; color: var(--texto); box-shadow: 0 2px 6px rgba(0, 0, 0, .1); }


/* ---------------------------------------------------------------------
   6. PRANCHA DE COMUNICAÇÃO (tela Casa)
   --------------------------------------------------------------------- */

/* Faixa da frase: fica "grudada" no topo ao rolar a página (sticky). */
.frase-painel {
  --grudar: 12px; /* distância do topo quando o painel "gruda" */
  position: sticky; top: var(--grudar); z-index: 10;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-radius: var(--raio-grande);
  /* A 1ª sombra é uma "faixa" da cor do fundo acima do painel: esconde o
     que rola por trás dele quando ele gruda no topo (sem ocupar espaço). */
  box-shadow: 0 calc(-1 * var(--grudar)) 0 0 var(--fundo), var(--sombra-leve), 0 0 0 1px rgba(0, 0, 0, .03);
  padding: 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
}
.frase-faixa {
  display: flex; gap: 10px; align-items: center;
  min-height: 154px; padding: 10px; overflow-x: auto; scroll-behavior: smooth;
  border-radius: 18px; background: var(--superficie-2);
  box-shadow: 0 0 0 2px var(--linha) inset;
  scrollbar-width: thin;
}
.frase-faixa.recebendo { background: var(--verde-claro); box-shadow: 0 0 0 4px var(--verde) inset; }
.cartao.arrastando { opacity: .55; transform: scale(.96); }
.frase-vazia { color: var(--texto-3); font-weight: 800; font-size: 17px; padding: 0 14px; display: flex; align-items: center; gap: 10px; }
.frase-vazia .bi { font-size: 24px; }

.frase-item {
  position: relative; flex-shrink: 0;
  width: 92px; padding: 6px 6px 8px; border-radius: 14px;
  background: #fff; border: 3px solid var(--cor-classe, var(--c-diverso));
  text-align: center; animation: entrar 260ms cubic-bezier(.2, .9, .3, 1.35);
}
.frase-item img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; }
.frase-item strong { display: block; font-size: 12px; font-weight: 800; line-height: 1.15; margin-top: 4px; overflow-wrap: anywhere; }
.frase-item.falando { transform: translateY(-6px) scale(1.06); box-shadow: 0 10px 20px rgba(0, 0, 0, .12); transition: transform 150ms ease; }
.frase-item .tirar {
  position: absolute; top: -10px; right: -10px;
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff;
  background: #20242b; color: #fff; font-size: 14px; font-weight: 900; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}
@keyframes entrar { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.frase-acoes { display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 10px; }
.frase-acoes .botao { min-height: 54px; padding: 10px 14px; }
.frase-acoes .falar { grid-column: 1 / -1; min-height: 60px; font-size: 19px; }
.frase-acoes .salvar { grid-column: 1 / -1; }

.frase-texto { grid-column: 1 / -1; font-weight: 800; font-size: 15px; color: var(--texto-2); padding: 0 6px; }
.frase-texto:empty { display: none; }

/* "Preciso dizer": atalhos que ficam sempre à mão. */
.atalhos { display: flex; align-items: center; gap: 10px; margin: 18px 0 6px; overflow-x: auto; padding: 4px 2px 12px; }
.atalhos-titulo { font-weight: 900; color: var(--texto-2); font-size: 14px; white-space: nowrap; }
.atalhos-lista { display: flex; gap: 10px; }
.atalho {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  min-height: 52px; padding: 6px 16px 6px 6px; border: 0; border-radius: 16px;
  background: var(--vermelho); color: #fff; font-weight: 800; font-size: 16px; cursor: pointer;
  box-shadow: 0 4px 0 var(--vermelho-sombra);
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.atalho img { width: 52px; height: 52px; border-radius: 12px; background: #fff; object-fit: contain; padding: 2px; }
.atalho:active { transform: translateY(4px); box-shadow: 0 0 0 var(--vermelho-sombra); }

/* Barra de busca + categorias em "pílulas" roláveis. */
.ferramentas { display: grid; gap: 12px; margin: 16px 0 14px; }
.busca {
  position: relative; display: flex; align-items: center;
}
.busca .bi { position: absolute; left: 16px; color: var(--texto-3); font-size: 18px; pointer-events: none; }
.busca input { padding-left: 46px; background: var(--superficie); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: thin; }
.chip {
  flex-shrink: 0; min-height: 42px; padding: 8px 16px;
  border: 0; border-radius: 30px; background: var(--superficie); color: var(--texto);
  font-weight: 800; font-size: 14px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 0 0 1.5px var(--linha) inset;
  transition: background var(--transicao), color var(--transicao);
}
.chip:hover { background: #f0f0f4; }
.chip[aria-pressed="true"] { background: var(--azul); color: #fff; box-shadow: none; }

/* Grade das figuras PECS. */
.grade {
  display: grid; gap: 14px;
  /* As fontes têm 256×256 px. O cartão não cresce além disso para o
     navegador não ampliar e embaçar a figura em monitores largos. */
  grid-template-columns: repeat(auto-fill, minmax(var(--cartao-min), 256px));
  justify-content: start;
}
.cartao {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  padding: 10px 10px 0; border-radius: var(--raio);
  background: #fff; border: 3px solid var(--cor-classe, var(--c-diverso));
  box-shadow: 0 4px 0 var(--cor-classe, var(--c-diverso));
  cursor: pointer; text-align: center; overflow: hidden;
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.cartao img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; }
.cartao strong {
  display: flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 6px 2px 10px;
  font-size: 18px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere;
}
.cartao:hover { transform: translateY(-2px); }
.cartao:active { transform: translateY(4px); box-shadow: 0 0 0 var(--cor-classe, var(--c-diverso)); }
.cartao.tocado { animation: toque 320ms ease; }
@keyframes toque { 0% { transform: scale(1); } 40% { transform: scale(.92); } 100% { transform: scale(1); } }

/* Cores de cada classe (chave de Fitzgerald). */
.cl-social { --cor-classe: var(--c-social); }
.cl-pessoa { --cor-classe: var(--c-pessoa); }
.cl-verbo { --cor-classe: var(--c-verbo); }
.cl-substantivo { --cor-classe: var(--c-substantivo); }
.cl-adjetivo { --cor-classe: var(--c-adjetivo); }
.cl-pergunta { --cor-classe: var(--c-pergunta); }
.cl-adverbio { --cor-classe: var(--c-adverbio); }
.cl-importante { --cor-classe: var(--c-importante); }
.cl-diverso { --cor-classe: var(--c-diverso); }

.mais { display: flex; justify-content: center; margin-top: 22px; }
.estado-vazio { grid-column: 1 / -1; text-align: center; color: var(--texto-2); font-weight: 700; padding: 40px 16px; }
.estado-vazio .bi { display: block; font-size: 40px; margin-bottom: 8px; color: var(--texto-3); }

/* Esqueleto (cartões cinza piscando devagar enquanto carrega). */
.esqueleto { border-radius: var(--raio); background: linear-gradient(90deg, #ececf0 25%, #f6f6f8 50%, #ececf0 75%); background-size: 200% 100%; animation: brilho 1.4s linear infinite; aspect-ratio: .8; }
@keyframes brilho { to { background-position: -200% 0; } }

/* Legenda das cores. */
.legenda { margin-top: 26px; }
.legenda summary { cursor: pointer; font-weight: 800; color: var(--texto-2); padding: 8px 0; }
.legenda-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.legenda-lista span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 12px; background: var(--superficie);
  font-size: 13px; font-weight: 800; box-shadow: 0 0 0 1px var(--linha) inset;
}
.legenda-lista span::before { content: ''; width: 14px; height: 14px; border-radius: 5px; background: var(--cor-classe); }

/* Comemoração ao salvar (estrelinhas). */
.festa {
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
  display: grid; place-items: center;
}
.festa-cartao {
  display: grid; justify-items: center; gap: 8px;
  padding: 26px 34px; border-radius: 28px; background: #fff; color: #1a2029; border: 3px solid #1e9e4f; box-shadow: var(--sombra-alta);
  animation: festa-entra 420ms cubic-bezier(.2, .9, .3, 1.4) both;
}
.festa-cartao .estrela { font-size: 56px; color: var(--amarelo); animation: girar 700ms ease both; }
.festa-cartao strong { font-size: 22px; font-weight: 900; }
.festa-cartao span { color: #445061; font-weight: 800; }
.festa.saindo .festa-cartao { animation: festa-sai 260ms ease both; }
.confete { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 3px; animation: confete 900ms ease-out forwards; }
@keyframes festa-entra { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes festa-sai { to { transform: scale(.9); opacity: 0; } }
@keyframes girar { from { transform: rotate(-120deg) scale(.3); } to { transform: rotate(0) scale(1); } }
@keyframes confete { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }


/* ---------------------------------------------------------------------
   7. TABELAS (lista de categorias)
   --------------------------------------------------------------------- */
.grade-tabelas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.tabela {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border-radius: var(--raio-grande); background: var(--superficie);
  color: var(--texto); text-decoration: none;
  box-shadow: 0 0 0 2px var(--cor-tabela, var(--linha)) inset, 0 5px 0 var(--cor-tabela, var(--linha));
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.tabela:hover { box-shadow: 0 0 0 2px var(--cor-tabela, var(--azul)) inset, 0 5px 0 var(--cor-tabela, var(--azul)); }
.tabela:active { transform: translateY(5px); box-shadow: 0 0 0 2px var(--cor-tabela, var(--azul)) inset; }
.tabela-capa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; border-radius: 16px; background: var(--superficie-2); }
.tabela-capa img { aspect-ratio: 1; object-fit: contain; border-radius: 8px; background: #fff; }
.tabela strong { font-size: 17px; font-weight: 900; line-height: 1.2; }
.tabela small { color: var(--texto-2); font-weight: 700; }
.selo {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 900; color: #17202a;
  background: var(--cor-tabela, var(--azul)); box-shadow: inset 0 0 0 1px rgba(23, 32, 42, .22);
}
.titulo-secao { display: flex; align-items: center; gap: 12px; margin: 38px 0 18px; }
.titulo-secao:first-child { margin-top: 0; }
.titulo-secao .icone { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; font-size: 18px; }
#secao-cores { margin-top: 38px; }

/* O avatar oficial do VLibras fica fixo na lateral, como em sites comuns. */
[vw-access-button] { position: fixed !important; right: 22px !important; bottom: 24px !important; z-index: 80 !important; }
[vw-plugin-wrapper] { z-index: 81 !important; }
#vlibras-fallback { position: fixed; right: 18px; bottom: 18px; z-index: 2147483646; width: min(360px, calc(100vw - 36px)); height: min(460px, calc(100vh - 36px)); overflow: hidden; border: 3px solid #1351b4; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
#vlibras-fallback iframe { width: 100%; height: 100%; border: 0; }
#vlibras-fallback > button { position: absolute; top: 8px; right: 8px; z-index: 1; width: 36px; height: 36px; border: 2px solid #fff; border-radius: 50%; background: #18202b; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
/* Botão local do VLibras: permanece na área de toque e não depende de CSS externo. */
#vlibras-caixa { position: fixed; right: 16px; top: calc(50vh - 25px); z-index: 2147483639; }
#abrir-vlibras { min-width: 52px; height: 52px; padding: 0 12px; border: 3px solid #fff; border-radius: 16px; background: #1351b4; color: #fff; box-shadow: 0 4px 14px #0005; font: 800 14px/1 Arial, sans-serif; cursor: pointer; }
#abrir-vlibras:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
#abrir-vlibras span { font-size: 21px; margin-right: 4px; }


/* ---------------------------------------------------------------------
   8. DICIONÁRIO (progresso e histórico)
   --------------------------------------------------------------------- */
.numeros { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 20px; }
.numero {
  padding: 18px; border-radius: var(--raio-grande); background: var(--superficie);
  box-shadow: var(--sombra-leve); display: grid; gap: 4px;
}
.numero .bi { font-size: 26px; }
.numero strong { font-size: 34px; font-weight: 900; letter-spacing: -.03em; line-height: 1.05; }
.numero span { color: var(--texto-2); font-weight: 800; font-size: 14px; }
.numero.fogo .bi { color: var(--laranja); }
.numero.frases .bi { color: var(--verde); }
.numero.media .bi { color: var(--azul); }
.numero.vocab .bi { color: var(--roxo); }

.colunas { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; margin-top: 20px; align-items: stretch; }
.colunas > .painel { margin-top: 0; }

/* Gráfico de barras da semana, feito só com CSS. */
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 170px; margin-top: 10px; }
.dia { display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: 6px; height: 100%; }
.dia .barra-fundo { width: 100%; max-width: 40px; height: 100%; border-radius: 12px; background: var(--superficie-2); display: flex; align-items: flex-end; overflow: hidden; }
.dia .barra { width: 100%; border-radius: 12px; background: linear-gradient(180deg, #4cd675, var(--verde)); transition: height 600ms cubic-bezier(.2, .8, .2, 1); }
.dia.hoje .barra { background: linear-gradient(180deg, #5cb4ff, var(--azul)); }
.dia b { font-size: 13px; font-weight: 900; }
.dia small { font-size: 12px; font-weight: 800; color: var(--texto-2); }

.tipos { display: grid; gap: 10px; margin-top: 8px; }
.tipo-linha { display: grid; grid-template-columns: 150px 1fr 74px; align-items: center; gap: 10px; font-weight: 800; font-size: 14px; }
.tipo-linha .trilho { height: 12px; border-radius: 12px; background: var(--superficie-2); overflow: hidden; }
.tipo-linha .trilho i { display: block; height: 100%; border-radius: 12px; background: var(--cor-tipo); transition: width 600ms ease; }
.t-pedido { --cor-tipo: var(--verde); }
.t-pergunta { --cor-tipo: var(--roxo); }
.t-necessidade { --cor-tipo: var(--vermelho); }
.t-expressao { --cor-tipo: var(--azul); }

.vocabulario { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.palavra-usada { position: relative; padding: 8px; border-radius: 14px; background: #fff; border: 3px solid var(--cor-classe, var(--c-diverso)); text-align: center; }
.palavra-usada img { aspect-ratio: 1; object-fit: contain; width: 100%; }
.palavra-usada strong { display: block; font-size: 12px; font-weight: 800; line-height: 1.15; margin-top: 4px; overflow-wrap: anywhere; }
.palavra-usada .vezes { position: absolute; top: -8px; right: -8px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: var(--roxo); color: #fff; font-size: 12px; font-weight: 900; display: grid; place-items: center; }

.historico { display: grid; gap: 12px; }
.registro {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 14px; border-radius: 20px; background: var(--superficie-2);
}
.registro-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 800; color: var(--texto-2); margin-bottom: 8px; }
.etiqueta { padding: 3px 10px; border-radius: 20px; color: #fff; font-size: 12px; font-weight: 900; background: var(--cor-tipo); }
.registro-figuras { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.registro-figuras img { width: 56px; height: 56px; flex-shrink: 0; object-fit: contain; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--linha) inset; padding: 3px; }
.registro-frase { font-weight: 800; margin-top: 6px; }
.registro-acoes { display: flex; gap: 8px; }


/* ---------------------------------------------------------------------
   9. LOGIN E CADASTRO
   --------------------------------------------------------------------- */
.pagina-entrada {
  min-height: 100vh; display: grid; place-items: center; padding: 32px 16px;
  background:
    radial-gradient(900px 500px at 10% -10%, #eafbe9 0%, transparent 60%),
    radial-gradient(800px 500px at 110% 10%, #fff3d6 0%, transparent 60%),
    radial-gradient(700px 500px at 50% 120%, #ffe6ef 0%, transparent 60%),
    var(--fundo);
}
.entrada-cartao {
  width: min(100%, 460px); padding: clamp(24px, 5vw, 40px);
  background: rgba(255, 255, 255, .92); border-radius: 32px; box-shadow: var(--sombra-alta);
}
.entrada-cartao.largo { width: min(100%, 720px); }
.entrada-logo { width: 104px; height: 104px; object-fit: contain; margin: 0 auto 14px; animation: flutuar 5s ease-in-out infinite; }
@keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.entrada-cartao h1 { text-align: center; }
.entrada-cartao .subtitulo { text-align: center; color: var(--texto-2); font-weight: 700; margin: 8px 0 26px; }
.entrada-rodape { text-align: center; margin-top: 22px; font-weight: 700; color: var(--texto-2); }
.entrada-rodape a { font-weight: 900; }
.entrada-rodape.pequeno a, .cadastro-grade .texto-2.pequeno a { color: var(--texto-2); }
.link-botao { background: none; border: 0; padding: 4px; color: var(--azul); font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duas-colunas .campo + .campo { margin-top: 0; }
.formulario { display: grid; gap: 16px; }
.formulario .campo + .campo { margin-top: 0; }

/* Página de texto simples (créditos). */
.documento { max-width: 780px; margin: 0 auto; }
.documento h2 { margin-top: 26px; margin-bottom: 8px; }
.documento p + p { margin-top: 10px; }


/* ---------------------------------------------------------------------
   10. MODO FOCO, MOVIMENTO REDUZIDO E TELAS PEQUENAS
   --------------------------------------------------------------------- */

/* Quem pede "menos movimento" no aparelho não vê animações. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* Tablet em pé / notebook pequeno: menu vira abas embaixo. */
@media (max-width: 767px) {
  .lateral { display: none; }
  .abas { display: grid; }
  .principal { margin-left: 0; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .colunas { grid-template-columns: 1fr; }
}

/* Celular. */
@media (max-width: 640px) {
  :root { --cartao-min: 140px; }  /* 2 figuras grandes por linha no celular */
  .principal { padding-top: 18px; }
  .frase-painel { --grudar: 8px; grid-template-columns: 1fr; padding: 12px; }
  .frase-faixa { min-height: 100px; }
  .frase-item { width: 78px; }
  .frase-acoes { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .frase-acoes .falar, .frase-acoes .salvar { grid-column: auto; min-height: 54px; font-size: 16px; }
  .frase-acoes .botao { flex-direction: column; gap: 2px; font-size: 12px; padding: 6px 4px; min-height: 58px; }
  .frase-acoes .botao .bi { font-size: 22px; }
  .grade { gap: 10px; }
  .cartao { padding: 8px 8px 0; }
  .cartao strong { font-size: 16px; min-height: 44px; }
  .duas-colunas { grid-template-columns: 1fr; }
  .escolha span { min-height: 84px; font-size: 13px; }
  .registro { grid-template-columns: 1fr; }
  .tipo-linha { grid-template-columns: 96px 1fr 30px; }
  .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .grade-tabelas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tabela { padding: 12px; gap: 10px; }
  .tabela strong { font-size: 15px; }
  .tabela-capa { gap: 4px; padding: 6px; }
}


/* =====================================================================
   11. MODO CRIANÇA (estilo Matraquinha)
   Tela inteira, sem menu, sem busca e SEM ROLAGEM: pastas grandes com
   figura e, dentro delas, as figuras em "páginas" com setas grandes.
   Parábola: é um livro de figuras. Vira a página, não rola a tela.
   ===================================================================== */
body.crianca { overflow: hidden; }
body.crianca .lateral, body.crianca .abas, body.crianca .rodape, body.crianca .so-adulto { display: none !important; }
body.crianca .principal { margin-left: 0; height: 100dvh; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
body.crianca main { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
body.crianca .topo { margin-bottom: 4px; }
body.crianca .topo .subtitulo { display: none; }
body:not(.crianca) .so-crianca { display: none !important; }

.crianca-area { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.crianca-titulo { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.crianca-titulo h2 { font-size: 24px; font-weight: 900; }
.grade-crianca {
  flex: 1; min-height: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(var(--colunas, 3), minmax(0, 1fr));
  grid-template-rows: repeat(var(--linhas, 2), minmax(0, 1fr));
}
.grade-crianca .cartao, .grade-crianca .pasta { min-height: 0; height: 100%; }
.grade-crianca .cartao { padding: 8px 8px 0; }
.grade-crianca .cartao .foto { position: relative; flex: 1; min-height: 0; }
.grade-crianca .cartao img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
.grade-crianca .cartao strong { font-size: clamp(16px, 2.4vh, 24px); min-height: 0; padding: 6px 2px 10px; }

/* Pasta: botão colorido com texto branco (regra de ouro). */
.pasta {
  --cor: var(--azul); --cor-sombra: var(--azul-sombra);
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 10px; border: 0; border-radius: 22px; cursor: pointer;
  background: var(--cor); color: #fff; box-shadow: 0 5px 0 var(--cor-sombra);
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.pasta:active { transform: translateY(5px); box-shadow: 0 0 0 var(--cor-sombra); }
.pasta .pasta-img { position: relative; flex: 1; min-height: 0; border-radius: 14px; background: #fff; overflow: hidden; }
.pasta img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; }
.pasta span { font-weight: 900; font-size: clamp(15px, 2.2vh, 22px); line-height: 1.1; text-align: center; }
.pasta.c0 { --cor: var(--verde); --cor-sombra: var(--verde-sombra); }
.pasta.c1 { --cor: var(--azul); --cor-sombra: var(--azul-sombra); }
.pasta.c2 { --cor: var(--roxo); --cor-sombra: var(--roxo-sombra); }
.pasta.c3 { --cor: var(--laranja); --cor-sombra: var(--laranja-sombra); }
.pasta.c4 { --cor: var(--vermelho); --cor-sombra: var(--vermelho-sombra); }

.paginas { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.paginas .botao { min-height: 60px; font-size: 20px; }
.paginas .pontos { display: flex; gap: 8px; justify-content: center; }
.paginas .pontos i { width: 12px; height: 12px; border-radius: 50%; background: var(--linha); }
.paginas .pontos i.atual { background: var(--texto); }

/* Cadeado dos pais: é preciso SEGURAR 2 segundos para sair do Modo Criança. */
.cadeado {
  position: relative; display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--superficie); box-shadow: var(--sombra-leve); font-size: 22px; color: var(--texto-2);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.cadeado svg { position: absolute; inset: 0; width: 52px; height: 52px; transform: rotate(-90deg); pointer-events: none; }
.cadeado circle { fill: none; stroke: var(--roxo); stroke-width: 4; stroke-dasharray: 151; stroke-dashoffset: 151; }
.cadeado.segurando circle { transition: stroke-dashoffset 2s linear; stroke-dashoffset: 0; }

body.crianca .frase-painel { position: static; }
body.crianca .frase-texto { display: none; }
body.crianca .frase-faixa { min-height: 104px; }
body.crianca .frase-acoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.crianca .frase-acoes .falar { grid-column: auto; }
body.crianca .atalhos { margin: 0; padding: 2px 2px 8px; overflow: visible; }
body.crianca .atalhos-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; }
body.crianca .atalhos-titulo { display: none; }
body.crianca .atalho { justify-content: center; min-height: 56px; }

@media (max-width: 640px) {
  body.crianca .frase-faixa { min-height: 88px; }
  body.crianca .frase-item { width: 70px; }
  body.crianca .atalho { flex-direction: column; gap: 2px; padding: 6px 4px; font-size: 12px; min-height: 64px; }
  body.crianca .atalho img { width: 34px; height: 34px; }
  .paginas .botao { min-height: 54px; font-size: 16px; padding: 8px 12px; }
  body.crianca .frase-painel { padding: 10px; gap: 10px; }
  body.crianca .frase-acoes .botao { min-height: 52px; }
  .pasta span { font-size: 15px; }
  .crianca-titulo { min-height: 44px; }
  .crianca-titulo h2 { font-size: 20px; }
}

/* =====================================================================
   12. LOGIN E CADASTRO COLORIDOS (as cores do logo, em arco-íris)
   Tudo cabe na tela sem rolar (medidas que encolhem com a altura: vh).
   ===================================================================== */
.pagina-entrada {
  background: linear-gradient(135deg, #ffd23f 0%, #ff8a3d 22%, #ff4f9a 45%, #a64dff 68%, #3d8bff 86%, #2ed47a 100%);
  background-attachment: fixed;
  padding: 16px;
}
.entrada-cartao { background: rgba(255, 255, 255, .96); border-radius: 30px; padding: clamp(18px, 3vh, 32px) clamp(20px, 4vw, 36px); }
.entrada-logo { width: clamp(64px, 10vh, 92px); height: clamp(64px, 10vh, 92px); margin-bottom: 6px; }
.entrada-cartao h1 { font-size: clamp(22px, 3.4vh, 30px); }
.entrada-cartao .subtitulo { margin: 4px 0 clamp(10px, 2vh, 18px); }
.entrada-cartao .divisor { margin: clamp(10px, 1.6vh, 16px) 0; }
.entrada-cartao .formulario { gap: clamp(8px, 1.4vh, 14px); }
.entrada-cartao .campo { gap: 6px; }
.entrada-cartao .entrada { min-height: 46px; padding: 10px 14px; font-size: 16px; }
.entrada-cartao .botao { min-height: 50px; }
.entrada-rodape { margin-top: clamp(8px, 1.4vh, 14px); }
/* Espaço fixo do botão do Google: nada "pula" enquanto ele carrega. */
.google-oficial { min-height: 44px; display: flex; justify-content: center; align-items: center; }
.google-oficial:empty { display: flex; }
.botao-google svg { width: 22px !important; height: 22px !important; }
.cadastro-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.cadastro-grade .inteiro { grid-column: 1 / -1; }
.escolhas.compactas .escolha span { min-height: 56px; flex-direction: row; gap: 8px; font-size: 14px; }
.escolhas.compactas .escolha span .bi { font-size: 20px; }
@media (max-width: 640px) {
  .cadastro-grade { grid-template-columns: 1fr; }
  .escolhas.compactas .escolha span { flex-direction: column; min-height: 64px; font-size: 12px; gap: 2px; }
}

/* Dicionário simples: resumo em texto e títulos de dia no histórico. */
.resumo-texto { font-size: 19px; font-weight: 700; line-height: 1.5; margin: 8px 0 6px; }
.dia-titulo { font-size: 15px; font-weight: 900; color: var(--texto-2); margin: 8px 0 -2px; text-transform: none; }
button.palavra-usada { cursor: pointer; font: inherit; }

/* Cadastro compacto: logo pequeno ao lado do título (cabe na tela sem rolar). */
.cabecalho-entrada { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: clamp(10px, 1.6vh, 16px); }
.cabecalho-entrada img { width: clamp(48px, 7vh, 64px); height: clamp(48px, 7vh, 64px); object-fit: contain; }
.cabecalho-entrada h1, .cabecalho-entrada .subtitulo { text-align: left !important; margin: 0 !important; }
.entrada-cartao.largo .divisor { margin: 10px 0; }
.cadastro-grade { gap: 8px 16px; }
.cadastro-grade .campo { gap: 4px; }


/* =====================================================================
   13. PROGRESSO / RELATÓRIOS (gráficos e visão por perfil)
   ===================================================================== */
body:not(.visao-profissional) .so-profissional { display: none !important; }
body.visao-profissional .so-responsavel { display: none !important; }
.periodo { min-width: 240px; }
.resumo-painel { border-left: 6px solid var(--verde); }
.numero small.variacao { font-size: 12px; font-weight: 800; }
.variacao.sobe { color: var(--verde-sombra); }
.variacao.desce { color: var(--vermelho-sombra); }
.variacao.igual { color: var(--texto-3); }
.grafico-caixa { margin-top: 10px; }
.grafico { width: 100%; height: auto; display: block; }
.g-grade { stroke: var(--linha); stroke-width: 1; }
.g-eixo { fill: var(--texto-2); font-size: 12px; font-weight: 700; font-family: inherit; }
.g-valor { fill: var(--texto); font-size: 12px; font-weight: 900; font-family: inherit; }
.g-barra { fill: var(--verde); }
.g-barra.destaque { fill: var(--azul); }
.g-linha { fill: none; stroke: var(--azul); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.g-area { fill: var(--azul); opacity: .1; }
.g-ponto { fill: #fff; stroke: var(--azul); stroke-width: 3; }
.dicas ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 10px; line-height: 1.5; }
.dicas { border-left: 6px solid var(--amarelo); }
.nota-metodo { color: var(--texto-3); font-size: 13px; font-weight: 700; text-align: center; margin: 22px auto 0; max-width: 760px; }
.selo-perfil { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 10px; color: #fff !important; font-weight: 900 !important; }
.selo-perfil.p-responsavel { background: var(--verde); }
.selo-perfil.p-profissional { background: var(--azul); }
.selo-perfil.p-autista { background: var(--roxo); }
.topo-acoes .segmentos { background: #e9e9ee; }

/* Modo Criança em telas grandes: logo grande à esquerda (sem as abas de adulto). */
@media (min-width: 1024px) {
  body.crianca .lateral { display: flex !important; }
  body.crianca .lateral .menu, body.crianca .lateral .conta { display: none; }
  body.crianca .principal { margin-left: var(--largura-menu); }
}

/* Impressão do relatório (botão Imprimir do profissional) */
@media print {
  .lateral, .abas, .topo-acoes, .registro-acoes, .mais, .pular, .toast { display: none !important; }
  .principal { margin: 0 !important; padding: 0 !important; }
  body { background: #fff; }
  .painel, .numero { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .colunas { grid-template-columns: 1fr 1fr; }
}

/* Tablet: painéis lado a lado viram um embaixo do outro. */
@media (max-width: 1100px) { .colunas { grid-template-columns: 1fr; } }

.periodo { display: flex; min-width: 0; }
.periodo button { padding: 0 16px; white-space: nowrap; }
.conta-texto .selo-perfil { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

body:not(.visao-profissional) .numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.visao-profissional .numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { body .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Faixa da frase: quando o espaço é pouco, os botões vão para baixo (nada espremido). */
@media (max-width: 1100px) {
  .frase-painel { grid-template-columns: 1fr; }
  .frase-acoes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .frase-acoes .falar, .frase-acoes .salvar { grid-column: auto; min-height: 54px; font-size: 17px; }
  body.crianca .frase-acoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Nomes das pastas: quebram por sílaba em vez de serem cortados. */
.pasta span { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; font-size: clamp(16px, 2.3vw, 22px); }
.atalho span { white-space: nowrap; }


/* =====================================================================
   14. PERFIL, TEMAS E MOVIMENTO ENTRE TELAS
   ===================================================================== */

/* Entrada de página curta e suave; não interfere em leitores de tela. */
.pagina-pronta .principal, .pagina-pronta .entrada-cartao {
  animation: pagina-entra 360ms cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes pagina-entra {
  from { opacity: 0; transform: translateY(10px) scale(.995); }
  to { opacity: 1; transform: none; }
}
dialog.folha[open] { animation: modal-entra 240ms cubic-bezier(.2, .9, .3, 1.1) both; }
dialog.folha[open]::backdrop { animation: fundo-entra 200ms ease both; }
@keyframes modal-entra { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes fundo-entra { from { opacity: 0; } }

/* Perfil e chave das métricas. */
.perfil-pagina { max-width: 860px; width: 100%; margin: 0 auto; }
.perfil-abas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin-bottom: 16px; padding: 6px; border-radius: 18px;
  background: #e9e9ee;
}
.perfil-abas button {
  min-height: 52px; border: 0; border-radius: 14px; background: transparent;
  color: var(--texto-2); font-weight: 900; cursor: pointer;
}
.perfil-abas button[aria-selected="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-leve); }
.perfil-painel { animation: painel-entra 260ms ease both; }
@keyframes painel-entra { from { opacity: 0; transform: translateY(8px); } }
.perfil-foto-area, .metricas-intro { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.perfil-foto-area > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.perfil-foto-area h2 { flex-basis: 100%; }
.perfil-foto {
  display: grid; place-items: center; flex-shrink: 0;
  width: 104px; height: 104px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, var(--c-verbo), var(--c-adjetivo));
  color: #fff; font-size: 42px; box-shadow: 0 0 0 5px var(--superficie), 0 0 0 7px var(--linha);
}
.perfil-foto img { width: 100%; height: 100%; object-fit: cover; }
.sair-perfil { margin-top: 18px; }
.metricas-intro .icone { display: grid; place-items: center; flex-shrink: 0; width: 58px; height: 58px; border-radius: 18px; color: #fff; font-size: 26px; }
.metricas-intro p { margin-top: 6px; }
.chave-form { max-width: 560px; margin: 26px auto 0; }
.metricas-liberadas { display: grid; justify-items: center; gap: 10px; max-width: 560px; margin: 26px auto 0; text-align: center; }
.metricas-liberadas > .bi { color: var(--verde); font-size: 56px; }
.metricas-liberadas .botao { margin-top: 8px; }

/* Tema escuro: mantém as cores semânticas das PECS e troca apenas as superfícies. */
html[data-tema="escuro"] {
  --fundo: #111318; --superficie: #1c1f26; --superficie-2: #252933;
  --linha: #3a404d; --texto: #f7f8fb; --texto-2: #c2c8d2; --texto-3: #9ba3af;
  color-scheme: dark;
}
html[data-tema="escuro"] .lateral, html[data-tema="escuro"] .abas { background: rgba(28, 31, 38, .92); }
html[data-tema="escuro"] .cartao, html[data-tema="escuro"] .frase-item,
html[data-tema="escuro"] .palavra-usada, html[data-tema="escuro"] .tabela-capa img { background: #fff; color: #1d1d1f; }
html[data-tema="escuro"] .frase-painel { background: rgba(28, 31, 38, .94); }
html[data-tema="escuro"] .entrada-cartao { background: rgba(28, 31, 38, .97); }
html[data-tema="escuro"] .entrada:focus { background: #252933; }

/* Alto contraste: foco amplo, superfícies sólidas e nenhum cinza fraco. */
html[data-tema="contraste"] {
  --fundo: #000; --superficie: #000; --superficie-2: #101010;
  --linha: #fff; --texto: #fff; --texto-2: #fff; --texto-3: #fff;
  --azul: #59b7ff; --azul-sombra: #167cc8; --verde: #39d875; --verde-sombra: #13843f;
  color-scheme: dark;
}
html[data-tema="contraste"] :focus-visible { outline: 4px solid #ffeb3b; outline-offset: 4px; }
html[data-tema="contraste"] .lateral, html[data-tema="contraste"] .abas,
html[data-tema="contraste"] .frase-painel { background: #000; border-color: #fff; backdrop-filter: none; }
html[data-tema="contraste"] .cartao, html[data-tema="contraste"] .frase-item,
html[data-tema="contraste"] .palavra-usada, html[data-tema="contraste"] .tabela-capa img { background: #fff; color: #000; }

html.texto-grande { font-size: 19px; }
html.texto-grande .pequeno, html.texto-grande .ajuda { font-size: 16px; }
html.texto-grande .cartao strong { font-size: 20px; }

html.movimento-reduzido *, html.movimento-reduzido *::before, html.movimento-reduzido *::after {
  animation-duration: 1ms !important; animation-iteration-count: 1 !important;
  transition-duration: 1ms !important; scroll-behavior: auto !important;
}

:root {
  --vlibras-btn-focus-visible-outline: 3px solid #000;
  --vlibras-btn-focus-visible-shadow: 0 0 0 5px #fff, 0 0 0 8px #1478d4;
}

@media (max-width: 640px) {
  .principal { padding: 14px 12px calc(92px + env(safe-area-inset-bottom)); }
  .topo { margin-bottom: 14px; }
  .abas { padding-inline: 12px; }
  .abas a, .abas button { min-height: 60px; font-size: 12px; }
  .perfil-foto-area, .metricas-intro { align-items: flex-start; }
  .perfil-foto { width: 84px; height: 84px; }
  .frase-faixa { min-height: 118px; }
}


/* =====================================================================
   15. REFINO DE ACESSIBILIDADE, TEMAS E COMPONENTES
   Mantém cores e espaçamentos previsíveis em todos os modos visuais.
   ===================================================================== */

/* O botão oficial suporta no máximo 400 px. A borda precisa respirar
   fora do iframe para o selo do Google não ser cortado à direita. */
.google-oficial {
  width: min(100%, 404px); margin-inline: auto; padding-inline: 2px;
  overflow: visible; contain: layout; border-radius: 999px;
}
.google-oficial > div, .google-oficial iframe { max-width: 100% !important; }

/* Scroll discreto e coerente com o app, inclusive dentro dos modais. */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--texto-3) 60%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--texto-3) 58%, transparent); border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--texto-2) 72%, transparent); border: 2px solid transparent; background-clip: padding-box; }

/* Troca de páginas com fade e desfoque; o View Transitions cobre os
   navegadores novos e pagina-saindo é o fallback dos demais. */
body.pagina-saindo { opacity: 0; filter: blur(7px); transform: scale(.995); transition: opacity 170ms ease, filter 170ms ease, transform 170ms ease; }

/* Modal: fundo realmente desfocado e conteúdo sem transparências que
   criariam sombras duplicadas sobre a prancha. */
dialog.folha { overflow: hidden; }
dialog.folha::backdrop { background: rgba(10, 12, 16, .52); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); }
.folha-conteudo { max-height: 90vh; overflow-y: auto; align-content: start; }
.linha-ajuste, .segmentos, .perfil-abas { background: var(--superficie-2); color: var(--texto); box-shadow: 0 0 0 1px var(--linha) inset; }
.segmentos button { color: var(--texto-2); }
.segmentos button[aria-pressed="true"], .perfil-abas button[aria-selected="true"] { background: var(--superficie); color: var(--texto); }
.botao-icone:hover, .chip:hover { background: var(--superficie-2); }
.linha-ajuste > span:first-child { display: grid; gap: 2px; }
.linha-ajuste small { display: block; color: var(--texto-2); font-size: 12px; font-weight: 700; }
.acoes-acessibilidade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Seletor de voz próprio, sem a lista genérica do navegador. */
.seletor-app { position: relative; }
.seletor-app-botao {
  width: 100%; min-height: 54px; padding: 13px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 2px solid var(--linha); border-radius: 14px;
  background: var(--superficie-2); color: var(--texto); font-weight: 800;
  cursor: pointer; text-align: left;
}
.seletor-app-botao[aria-expanded="true"] { border-color: var(--azul); }
.seletor-app-opcoes {
  position: absolute; z-index: 5; inset: calc(100% + 7px) 0 auto;
  max-height: 230px; overflow-y: auto; padding: 6px;
  border: 1px solid var(--linha); border-radius: 16px;
  background: var(--superficie); box-shadow: var(--sombra-alta);
}
.seletor-app-opcao {
  width: 100%; min-height: 44px; padding: 9px 11px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 0; border-radius: 11px; background: transparent; color: var(--texto);
  font-weight: 750; text-align: left; cursor: pointer;
}
.seletor-app-opcao:hover, .seletor-app-opcao[aria-selected="true"] { background: var(--azul-claro); color: var(--azul-sombra); }

/* A faixa quase opaca remove os “fantasmas” dos cartões que passam atrás,
   enquanto o blur ainda comunica que existe conteúdo sob o painel. */
.frase-painel {
  isolation: isolate; background: rgba(255, 255, 255, .975);
  backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%);
}
.cartao img, .frase-item img, .atalho img { image-rendering: auto; image-rendering: -webkit-optimize-contrast; }

/* Perfil: título, abas e painéis partem do mesmo eixo esquerdo. */
.perfil-topo, .perfil-pagina { width: 100%; max-width: 980px; margin-inline: auto; }
.perfil-abas { margin-bottom: 12px; }
.perfil-painel { padding: clamp(18px, 2.6vw, 30px); }
.chave-form, .metricas-liberadas { max-width: 620px; margin: 22px 0 0; }
.metricas-liberadas { justify-items: start; text-align: left; }
.perfil-bloco {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--linha);
}
.perfil-bloco > div { display: grid; gap: 5px; }
.perfil-bloco .botao { flex-shrink: 0; }
.suporte-email { width: fit-content; font-weight: 900; overflow-wrap: anywhere; }

/* Ajustes agora vivem em uma página, não em um modal sobre a prancha. */
.ajustes-pagina { width: min(100%, 780px); display: grid; gap: 20px; }
.ajustes-bloco { display: grid; gap: 16px; }
.ajustes-bloco .linha-ajuste { margin-top: 0; }
.icone-destaque { font-size: 34px; color: var(--azul); }

/* Treino opcional: duas figuras grandes, sem vidas nem bloqueio de fases. */
.treinos-pagina { width: min(100%, 1040px); display: grid; gap: 20px; }
.treino-painel { width: 100%; min-height: min(62vh, 560px); display: grid; grid-template-columns: minmax(220px, .72fr) minmax(420px, 1.28fr); grid-template-areas: 'intro opcoes' 'feedback opcoes'; align-items: center; gap: 24px 34px; padding: clamp(24px, 4vw, 48px); text-align: center; }
.treino-intro { grid-area: intro; display: grid; justify-items: center; gap: 24px; }
.treino-pergunta { font-size: clamp(40px, 5vw, 64px); font-weight: 900; margin: 0; text-transform: capitalize; line-height: 1.05; }
.ouvir-pergunta { width: 50px; height: 50px; color: var(--azul); }
.opcoes-treino { grid-area: opcoes; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.opcao-treino { min-height: 330px; display: grid; place-items: center; align-content: center; gap: 14px; padding: 22px; border: 4px solid var(--cor-classe, var(--linha)); border-radius: 28px; background: var(--superficie); color: var(--texto); box-shadow: 0 6px 0 var(--cor-classe, var(--linha)); cursor: pointer; font-size: 22px; font-weight: 900; transition: transform 140ms ease, box-shadow 140ms ease; }
.opcao-treino img { width: min(100%, 210px); max-height: 210px; object-fit: contain; }
.opcao-treino:active { transform: translateY(5px); box-shadow: none; }
.opcao-treino.errou { border-color: var(--vermelho); animation: treme 360ms ease; }
.opcao-treino.acertou { border-color: var(--verde); background: var(--verde-claro); }
.treino-feedback { grid-area: feedback; min-height: 26px; margin: 0; color: var(--texto); font-weight: 900; font-size: 20px; }
@keyframes treme { 25% { transform: translateX(-7px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }

/* Toast minimalista para confirmações rápidas, no topo nas telas de entrada. */
.toast.sucesso { background: rgba(20, 126, 64, .96); }
.toast.info { background: rgba(14, 92, 166, .96); }
body:has(.pagina-entrada) .toast { top: max(18px, env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -24px); }
body:has(.pagina-entrada) .toast.visivel { transform: translate(-50%, 0); }

/* Texto maior precisa alterar também elementos que antes usavam pixels. */
html.texto-grande body { font-size: 19px; }
html.texto-grande h1, html.texto-grande .topo .saudacao { font-size: clamp(31px, 4vw, 40px); }
html.texto-grande h2 { font-size: 24px; }
html.texto-grande h3 { font-size: 20px; }
html.texto-grande .menu a, html.texto-grande .botao, html.texto-grande .entrada,
html.texto-grande .chip, html.texto-grande .linha-ajuste, html.texto-grande .segmentos button,
html.texto-grande .seletor-app-botao, html.texto-grande .perfil-abas button { font-size: 18px; }
html.texto-grande .campo label, html.texto-grande .rotulo, html.texto-grande .frase-texto { font-size: 17px; }
html.texto-grande .conta-texto strong, html.texto-grande .conta-texto small { font-size: 15px; }

/* Correções específicas dos modos escuro e alto contraste. */
html[data-tema="escuro"] .frase-painel { background: rgba(28, 31, 38, .985); }
html[data-tema="escuro"] .seletor-app-opcao:hover,
html[data-tema="escuro"] .seletor-app-opcao[aria-selected="true"] { background: #263d55; color: #eef7ff; }
html[data-tema="escuro"] .sair-perfil { color: #ff7d8f; }
html[data-tema="contraste"] .segmentos button[aria-pressed="true"],
html[data-tema="contraste"] .perfil-abas button[aria-selected="true"],
html[data-tema="contraste"] .seletor-app-opcao[aria-selected="true"] { background: #ffeb3b; color: #000; }
html[data-tema="contraste"] .link-botao, html[data-tema="contraste"] a { color: #ffeb3b; }
html[data-tema="contraste"] .frase-painel { background: #000; box-shadow: 0 0 0 2px #fff, 0 calc(-1 * var(--grudar)) 0 0 #000; }
html[data-tema="contraste"] .chip[aria-pressed="true"] { background: #ffeb3b; color: #000; box-shadow: 0 0 0 2px #fff inset; }
html[data-tema="contraste"] .selo { color: #000; box-shadow: inset 0 0 0 2px #000; }

/* Paletas de alto afastamento tonal para os quatro grupos mais comuns de
   daltonismo. A palavra, borda e ícone seguem visíveis além da cor. */
html[data-daltonismo="protanopia"], html[data-daltonismo="deuteranopia"] {
  --verde: #0072b2; --verde-sombra: #005881; --vermelho: #d55e00; --vermelho-sombra: #9a4300;
  --laranja: #d55e00; --laranja-sombra: #9a4300; --c-social: #0072b2; --c-pessoa: #f0e442;
  --c-verbo: #0072b2; --c-substantivo: #d55e00; --c-adjetivo: #56b4e9; --c-pergunta: #cc79a7;
  --c-adverbio: #a8764a; --c-importante: #d55e00; --c-diverso: #9aa0a6;
}
html[data-daltonismo="tritanopia"] {
  --verde: #008f7a; --verde-sombra: #006657; --azul: #b23a84; --azul-sombra: #82285f;
  --vermelho: #cc4c02; --vermelho-sombra: #963601; --c-social: #b23a84; --c-pessoa: #ffd166;
  --c-verbo: #008f7a; --c-substantivo: #cc4c02; --c-adjetivo: #b23a84; --c-pergunta: #6d597a;
  --c-adverbio: #7f5539; --c-importante: #cc4c02; --c-diverso: #8d99ae;
}
html[data-daltonismo="acromatopsia"] {
  --verde: #4c4c4c; --verde-sombra: #222; --azul: #303030; --azul-sombra: #111;
  --vermelho: #666; --vermelho-sombra: #333; --laranja: #555; --laranja-sombra: #222;
  --roxo: #444; --roxo-sombra: #1e1e1e; --c-social: #303030; --c-pessoa: #b0b0b0;
  --c-verbo: #4c4c4c; --c-substantivo: #666; --c-adjetivo: #828282; --c-pergunta: #595959;
  --c-adverbio: #747474; --c-importante: #3d3d3d; --c-diverso: #999;
}
.segmentos-daltonismo { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 640px) {
  .perfil-bloco { align-items: stretch; flex-direction: column; }
  .perfil-bloco .botao { width: 100%; }
  .folha-conteudo { padding: 18px; }
  .acoes-acessibilidade { grid-template-columns: 1fr; }
  .treino-painel { min-height: 0; grid-template-columns: 1fr; grid-template-areas: 'intro' 'opcoes' 'feedback'; gap: 18px; padding: 22px 16px; }
  .treino-intro { gap: 14px; }
  .treino-pergunta { font-size: clamp(36px, 12vw, 50px); }
  .opcoes-treino { gap: 12px; }
  .opcao-treino { min-height: 190px; padding: 12px; font-size: 18px; }
  .opcao-treino img { max-height: 130px; }
  .segmentos-daltonismo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}