/* ============================================================
   Do Meu Jeito — telas
   CAA, rotina, histórias, IA, perfil, onboarding e Modo Criança.
   ============================================================ */

/* ==================== cabeçalho com o mascote ==================== */

.hero{
  position:relative;
  margin:0 calc(var(--margem-tela, var(--e4)) * -1);
  padding:var(--e5) var(--margem-tela, var(--e4)) var(--e6);
  background:linear-gradient(160deg, #EFE6FC 0%, #F7F2FD 55%, var(--creme) 100%);
  border-bottom-left-radius:32px;
  border-bottom-right-radius:32px;
  overflow:hidden;
}
.hero .saudacao{ max-width:60%; }
.hero h1{ font-size:calc(1.9rem * var(--escala)); }
.hero h1 em{ font-style:normal; color:var(--roxo); display:block; }
.hero p{ margin-top:var(--e2); color:var(--tinta-suave); }
.hero .mascote{
  position:absolute; right:-8px; bottom:-6px;
  width:170px; pointer-events:none;
}
@media (max-width:380px){
  .hero .mascote{ width:130px; }
  .hero .saudacao{ max-width:66%; }
}

/* ======================= CAA: tira de frase ======================= */

.tira{
  position:sticky; top:0; z-index:40;
  margin:0 calc(var(--margem-tela, var(--e4)) * -1);
  padding:var(--e3) var(--margem-tela, var(--e4)) var(--e3);
  background:var(--creme);
  border-bottom:2px solid var(--linha);
}
.tira-cartoes{
  display:flex; align-items:center; gap:var(--e2);
  min-height:96px; padding:var(--e2);
  background:var(--lilas-claro);
  border-radius:var(--r-medio);
  overflow-x:auto; overscroll-behavior-x:contain;
}
.tira-cartoes:empty::after,
.tira-cartoes .dica{
  content:""; color:var(--tinta-suave);
  padding:0 var(--e3); font-size:calc(.95rem * var(--escala));
}
.tira-ficha{
  flex:none; width:80px; min-height:80px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:var(--superficie); border-radius:var(--r-pequeno);
  border:2px solid var(--linha);
  border-bottom:5px solid var(--cor, var(--roxo));
  padding:var(--e1);
  font-size:calc(.7rem * var(--escala)); font-weight:700; text-align:center;
  cursor:pointer;
}
.tira-ficha img{ width:44px; height:44px; object-fit:contain; }
.tira-ficha .emoji{ font-size:1.8rem; line-height:1; }
.tira-ficha span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

.tira-controles{
  display:flex; gap:var(--e2); margin-top:var(--e3); flex-wrap:wrap;
}
.tira-controles .btn{ flex:1 1 auto; padding:0 var(--e3); }
.tira-controles .btn--primario{ flex:2 1 160px; }

/* ==================== CAA: barra de categorias ==================== */

.categorias{
  display:flex; gap:var(--e2);
  overflow-x:auto; padding:var(--e3) 0;
  scroll-snap-type:x proximity;
}
.categorias button{
  flex:none; scroll-snap-align:start;
  display:flex; align-items:center; gap:var(--e2);
  min-height:var(--alvo-min); padding:0 var(--e4);
  border-radius:var(--r-pill);
  border:2px solid var(--linha);
  background:var(--superficie); color:var(--tinta);
  font:inherit; font-weight:700; cursor:pointer;
  white-space:nowrap;
}
.categorias button img{ width:28px; height:28px; object-fit:contain; }
.categorias button[aria-pressed="true"]{
  border-color:var(--roxo); background:var(--lilas-claro); color:var(--roxo-escuro);
}
/* Mais usados: primeiro da fila, porque é o caminho mais curto para falar. */
.categorias button.atalhos{ border-color:var(--roxo); color:var(--roxo-escuro); }
.categorias button.atalhos[aria-pressed="true"]{ background:var(--roxo); color:#fff; }

/* A emergência fica sempre visível e se identifica por cor E por texto. */
.categorias button.emergencia{
  border-color:var(--caa-emergencia); color:#7E1B1B; background:#FBE0E0;
}
.categorias button.emergencia[aria-pressed="true"]{
  background:var(--caa-emergencia); color:#fff;
}

/* ======================== CAA: grade ======================== */

.grade{
  display:grid;
  grid-template-columns:repeat(var(--colunas, 3), 1fr);
  gap:var(--e3);
  margin-top:var(--e3);
}
@media (max-width:340px){ .grade{ gap:var(--e2); } }

.cartao{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:var(--e2);
  min-height:var(--alvo-min);
  padding:var(--e3) var(--e2) var(--e2);
  background:var(--painel, var(--painel-lilas));
  border:2px solid rgba(46,26,71,.08);
  border-radius:var(--r-medio);
  font:inherit; color:var(--tinta); cursor:pointer;
  text-align:center;
  transition:transform var(--transicao), box-shadow var(--transicao);
}
.cartao:hover{ box-shadow:var(--sombra-card); }
.cartao:active{ transform:scale(.97); }
.cartao .arte{
  width:100%; aspect-ratio:1; object-fit:contain;
  max-height:132px;
}
.cartao .emoji{ font-size:clamp(2rem, 12vw, 3.4rem); line-height:1.1; }
.cartao .rotulo{
  font-weight:800; line-height:1.15;
  font-size:calc(.9rem * var(--escala));
  overflow-wrap:anywhere; hyphens:auto;
}
/* Faixa da chave de Fitzgerald: cor + inicial legível, nunca só cor. */
.cartao .chave{
  position:absolute; top:8px; left:8px;
  display:flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.9);
  font-size:calc(.62rem * var(--escala)); font-weight:800;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--chave-cor, var(--tinta-suave));
}
.cartao .chave::before{
  content:""; width:8px; height:8px; border-radius:var(--r-pill);
  background:var(--chave-cor, var(--tinta-suave));
}
.cartao[data-oculto="1"]{ opacity:.5; }

/* Grades de 2 colunas dão cartões maiores para quem tem dificuldade motora. */
.grade[style*="--colunas: 2"] .cartao .rotulo,
.grade[style*="--colunas:2"] .cartao .rotulo{ font-size:calc(1.05rem * var(--escala)); }
.grade[style*="--colunas: 6"] .cartao,
.grade[style*="--colunas:6"] .cartao{ padding:var(--e2) var(--e1); }
.grade[style*="--colunas: 6"] .cartao .rotulo,
.grade[style*="--colunas:6"] .cartao .rotulo{ font-size:calc(.72rem * var(--escala)); }

/* Um cartão por vez: varredura visual para quem precisa. */
.um-por-vez{
  display:flex; flex-direction:column; align-items:center; gap:var(--e4);
  margin-top:var(--e4);
}
.um-por-vez .cartao{
  width:min(100%, 320px); min-height:320px; justify-content:center;
}
.um-por-vez .cartao .arte{ max-height:200px; }
.um-por-vez .cartao .rotulo{ font-size:calc(1.4rem * var(--escala)); }
.um-por-vez .navegar{ display:flex; gap:var(--e3); width:100%; }
.um-por-vez .navegar .btn{ flex:1; }

/* Cada célula da grade guarda o cartão e, para o adulto, as ferramentas. */
.cartao-caixa{ display:flex; flex-direction:column; gap:var(--e1); }
.cartao-caixa .cartao{ flex:1; }
.um-por-vez .cartao-caixa{ display:none; width:min(100%, 320px); }
.um-por-vez .cartao-caixa[data-visivel="1"]{ display:flex; }

/* Ferramentas de edição — some do DOM inteiro no Modo Criança. */
.cartao-ferramentas{
  display:flex; gap:var(--e1); justify-content:center;
  margin-top:var(--e1);
}
.cartao-ferramentas button{
  width:40px; height:40px; min-height:40px;
  border-radius:var(--r-pequeno); border:1px solid var(--linha);
  background:rgba(255,255,255,.85); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--tinta);
}
.cartao-ferramentas button:hover{ border-color:var(--roxo); }
.cartao-ferramentas svg{ width:18px; height:18px; }

/* ========================== rotina ========================== */

.rotina-item{
  display:flex; align-items:center; gap:var(--e3);
  min-height:88px; padding:var(--e3);
  background:var(--superficie);
  border:2px solid var(--linha);
  border-radius:var(--r-medio);
  transition:border-color var(--transicao), background var(--transicao);
}
.rotina-item[data-feito="1"]{
  background:var(--sucesso-fundo); border-color:var(--sucesso);
}
.rotina-item .arte{
  width:64px; height:64px; flex:none; object-fit:contain;
  background:var(--lilas-claro); border-radius:var(--r-pequeno); padding:4px;
}
.rotina-item .arte--vazia{
  display:grid; place-items:center; color:var(--roxo);
}
.rotina-item .arte--vazia svg{ width:28px; height:28px; }
.rotina-item .titulo{ font-weight:800; }
.rotina-item .horario{ color:var(--tinta-suave); font-size:calc(.85rem * var(--escala)); }
.rotina-item .marcar{
  margin-left:auto; flex:none;
  width:var(--alvo-min); height:var(--alvo-min);
  border-radius:var(--r-pill);
  border:3px solid var(--linha-campo);
  background:var(--superficie); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:transparent;
}
.rotina-item[data-feito="1"] .marcar{
  background:var(--sucesso); border-color:var(--sucesso); color:#fff;
}
.rotina-item .marcar svg{ width:28px; height:28px; }

/* Timer visual: o círculo esvazia enquanto a atividade acontece. */
.timer{
  --volta:0;
  width:120px; height:120px; margin:0 auto;
  border-radius:var(--r-pill);
  background:conic-gradient(var(--roxo) calc(var(--volta) * 1%), var(--lilas-claro) 0);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.timer::after{
  content:""; position:absolute; inset:12px;
  background:var(--superficie); border-radius:var(--r-pill);
}
.timer span{
  position:relative; z-index:1;
  font-weight:800; font-size:calc(1.4rem * var(--escala));
  font-variant-numeric:tabular-nums;
}

/* ========================= histórias ========================= */

.historias-grade{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--e3);
}
.historia-card{
  display:flex; flex-direction:column; gap:var(--e2);
  padding:0; overflow:hidden;
  background:var(--superficie);
  border:2px solid var(--linha); border-radius:var(--r-medio);
  color:var(--tinta); text-decoration:none;
}
.historia-card:hover{ border-color:var(--roxo); color:var(--tinta); }
.historia-card img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.historia-card .info{ padding:0 var(--e3) var(--e3); }
.historia-card .titulo{ display:block; font-weight:800; line-height:1.2; }
.historia-card .meta{ display:block; margin-top:2px; color:var(--tinta-suave); font-size:calc(.8rem * var(--escala)); }

/* História sem capa: um lugar-tenente com identidade, não um buraco. */
.historia-capa-vazia{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--e2);
  aspect-ratio:3/4; padding:var(--e3);
  background:linear-gradient(160deg, var(--painel-lilas), var(--lilas-claro));
  color:var(--roxo-escuro); text-align:center;
}
.historia-capa-vazia svg{ width:34px; height:34px; }
.historia-capa-vazia span{ font-weight:800; font-size:calc(.85rem * var(--escala)); line-height:1.2; }

.continuar{
  display:flex; gap:var(--e3); align-items:center;
  padding:var(--e3);
  background:linear-gradient(135deg, var(--roxo-claro), var(--roxo));
  border-radius:var(--r-medio); color:#fff; text-decoration:none;
}
.continuar img{ width:76px; height:96px; object-fit:cover; border-radius:var(--r-pequeno); flex:none; }
.continuar > svg{ flex:none; }
.continuar .titulo{ display:block; font-weight:800; line-height:1.2; }
.continuar .capitulo{ display:block; font-size:calc(.85rem * var(--escala)); opacity:.9; }
.continuar .etiqueta{ margin-bottom:var(--e1); }
.continuar .progresso{ margin-top:var(--e2); background:rgba(255,255,255,.3); border-color:transparent; }
.continuar .progresso span{ background:#fff; }
.continuar:hover{ color:#fff; }

/* leitor */
.leitor-arte{
  width:100%; border-radius:var(--r-medio);
  border:2px solid var(--linha);
  margin-bottom:var(--e4);
}
.leitor-texto{
  font-size:calc(1.05rem * var(--escala));
  line-height:1.75;
  white-space:pre-line;
}
html[data-leitura="g"] .leitor-texto{ font-size:calc(1.3rem * var(--escala)); }
html[data-leitura="gg"] .leitor-texto{ font-size:calc(1.6rem * var(--escala)); line-height:1.8; }
.leitor-navegacao{
  display:flex; gap:var(--e3); margin-top:var(--e5);
}
.leitor-navegacao .btn{ flex:1; }

/* ============================ IA ============================ */

.chat{
  display:flex; flex-direction:column; gap:var(--e3);
  padding-bottom:var(--e4);
}
.balao{
  max-width:86%; padding:var(--e3) var(--e4);
  border-radius:var(--r-medio);
  white-space:pre-line; line-height:1.6;
}
.balao--vox{
  align-self:flex-start;
  background:linear-gradient(135deg, #8B6BE0, var(--roxo));
  color:#fff;
  border-bottom-left-radius:var(--r-pequeno);
}
.balao--eu{
  align-self:flex-end;
  background:var(--superficie); color:var(--tinta);
  border:2px solid var(--linha);
  border-bottom-right-radius:var(--r-pequeno);
}
.ia-topicos{ display:grid; gap:var(--e2); }
.ia-envio{
  position:sticky; bottom:calc(var(--barra-altura) + var(--e2));
  display:flex; gap:var(--e2); align-items:flex-end;
  background:var(--creme); padding-top:var(--e3);
}
.ia-envio textarea{
  flex:1; min-height:var(--alvo-min); max-height:140px;
  padding:var(--e3); font:inherit;
  border:2px solid var(--linha-campo); border-radius:var(--r-medio);
  background:var(--superficie); color:var(--tinta); resize:none;
}
.ia-aviso{
  margin-top:var(--e3);
  font-size:calc(.8rem * var(--escala));
  color:var(--tinta-suave); text-align:center;
  border-top:1px solid var(--linha); padding-top:var(--e3);
}

/* ========================== perfil ========================== */

.resumo{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:var(--e3);
}
.resumo .item{
  display:flex; flex-direction:column; align-items:center; gap:var(--e1);
  padding:var(--e3) var(--e2);
  background:var(--superficie); border:2px solid var(--linha);
  border-radius:var(--r-medio); text-align:center;
}
.resumo .numero{ font-size:calc(1.6rem * var(--escala)); font-weight:800; color:var(--roxo); }
.resumo .nome{ font-size:calc(.78rem * var(--escala)); color:var(--tinta-suave); }

.favoritos{ display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--e2); }
.favoritos .item{
  display:flex; flex-direction:column; align-items:center; gap:var(--e1);
  padding:var(--e2);
  background:var(--superficie); border:2px solid var(--linha);
  border-radius:var(--r-medio);
  font-size:calc(.72rem * var(--escala)); font-weight:700; text-align:center;
}
.favoritos img{ width:100%; aspect-ratio:1; object-fit:contain; }

/* ======================== onboarding ======================== */

/* O gradiente cobre a janela inteira; só o conteúdo fica numa coluna estreita —
   sem isso, em desktop os campos de login esticavam de ponta a ponta da tela. */
body:has(> .onboarding){
  background:
    radial-gradient(120% 60% at 50% 0%, #F3ECFD 0%, transparent 60%),
    linear-gradient(180deg, var(--creme) 0%, #F6F1FD 100%);
}
.onboarding{
  min-height:100dvh;
  display:flex; flex-direction:column;
  width:100%; max-width:480px; margin:0 auto;
  padding:var(--e5) var(--e4) var(--e6);
}
.onboarding .marca{ text-align:center; margin-bottom:var(--e5); }
.onboarding .marca img{ margin:0 auto; width:190px; }
.onboarding figure{ margin:0 0 var(--e4); }
.onboarding figure img{
  width:100%; border-radius:var(--r-medio);
  border:2px solid var(--linha);
}
.onboarding .passos{
  display:flex; gap:var(--e2); justify-content:center; margin-bottom:var(--e4);
}
.onboarding .passos i{
  width:10px; height:10px; border-radius:var(--r-pill);
  background:var(--linha); display:block;
}
.onboarding .passos i[data-atual="1"]{ width:28px; background:var(--roxo); }
.onboarding .texto{ text-align:center; color:var(--tinta); max-width:36ch; margin:0 auto; }
.onboarding .rodape{ margin-top:auto; padding-top:var(--e5); display:grid; gap:var(--e3); }

/* ===================== escolha de avatar ===================== */

.personagens{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--e3);
}
.personagens label{
  display:flex; flex-direction:column; align-items:center; gap:var(--e1);
  padding:var(--e2); cursor:pointer;
  background:var(--superficie);
  border:2px solid var(--linha); border-radius:var(--r-medio);
  font-size:calc(.78rem * var(--escala)); font-weight:700;
  min-height:var(--alvo-min);
}
.personagens label:has(input:checked){
  border-color:var(--roxo); background:var(--lilas-claro);
}
.personagens img{ width:100%; aspect-ratio:1; object-fit:contain; }
.personagens input{ position:absolute; opacity:0; pointer-events:none; }

/* ======================= Modo Criança ======================= */

html[data-crianca="1"] .barra{ border-top-width:3px; }
.crianca-faixa{
  display:flex; align-items:center; gap:var(--e2);
  margin:0 calc(var(--margem-tela, var(--e4)) * -1) var(--e3);
  padding:var(--e2) var(--margem-tela, var(--e4));
  background:var(--lilas-claro);
  color:var(--roxo-escuro); font-weight:700;
  font-size:calc(.8rem * var(--escala));
}
.crianca-faixa svg{ width:20px; height:20px; flex:none; }
.crianca-faixa .btn{ flex:none; }
.crianca-atalhos{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--e3);
}
.crianca-atalho{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--e2);
  min-height:160px; padding:var(--e4);
  border-radius:var(--r-medio); border:2px solid transparent;
  color:var(--tinta); text-decoration:none; font-weight:800;
  font-size:calc(1.1rem * var(--escala)); text-align:center;
}
.crianca-atalho svg{ width:52px; height:52px; }
.crianca-atalho--cartoes{ background:var(--painel-lilas); }
.crianca-atalho--rotina { background:var(--painel-azul); }
.crianca-atalho--historias{ background:var(--painel-ciano); }
.crianca-atalho--emergencia{ background:var(--painel-vermelho); color:#7E1B1B; }

/* ====================== busca ARASAAC ====================== */

.pictogramas{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr));
  gap:var(--e2); margin-top:var(--e3);
  max-height:320px; overflow-y:auto;
}
.pictogramas button{
  padding:var(--e2); background:var(--superficie);
  border:2px solid var(--linha); border-radius:var(--r-pequeno);
  cursor:pointer; min-height:92px;
}
.pictogramas button:hover, .pictogramas button[aria-pressed="true"]{
  border-color:var(--roxo); background:var(--lilas-claro);
}
.pictogramas img{ width:100%; aspect-ratio:1; object-fit:contain; }

/* ==================== relatório (gráficos) ==================== */

.barras{ display:flex; flex-direction:column; gap:var(--e3); }
.barras .linha-barra{ display:grid; grid-template-columns:1fr 3fr auto; gap:var(--e3); align-items:center; }
.barras .nome{ font-weight:700; font-size:calc(.85rem * var(--escala)); }
.barras .trilho{ height:20px; background:var(--lilas-claro); border-radius:var(--r-pill); overflow:hidden; }
.barras .valor-barra{ display:block; height:100%; background:var(--roxo); border-radius:var(--r-pill); }
.barras .valor{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--tinta-suave); }