/* Meu Dia — tokens extraídos da spec do Claude Design (frame 1e).
   Nenhum vermelho existe neste sistema: atraso não tem cor. */

:root {
  /* 1 · Paleta */
  --fundo: #F5F2FB;
  --superficie: #FFFFFF;
  --superficie-2: #EFE8FF;
  --borda: #E6E0F5;
  --borda-2: #DED5F5;
  --primaria: #7B4BF0;
  --primaria-sombra: #5A2FD1;
  --sucesso: #1FC16B;
  --sucesso-sombra: #14944F;
  --sucesso-suave: #E7F7EE;
  --sucesso-texto: #2F6A50;
  --destaque: #FFB020;
  --destaque-suave: #FFF0D6;
  --destaque-texto: #8A5A00;
  --cofre: #0F8C7A;
  --cofre-sombra: #0A6154;
  --cofre-claro: #B9EDE4;
  --cofre-suave: #E4F6F3;
  --cofre-borda: #CFE9E4;
  --cofre-trilha: #E3EFEC;
  --tinta: #1B1830;          /* 13,4:1 */
  --tinta-2: #6E6A85;        /* 4,9:1  */
  --tinta-inversa-2: #BFB8D8;
  --trilha: #EDE7FA;

  /* acentos de ícone — sempre em pastilha clara, nunca como texto */
  --ac-roxo: #7B4BF0;        --pa-roxo: #EFE8FF;
  --ac-turquesa: #00B39A;    --pa-turquesa: #E4F6F3;
  --ac-laranja: #FF8A3D;     --pa-laranja: #FFF0E2;
  --ac-rosa: #FF7AC4;        --pa-rosa: #FFE9F4;
  --ac-cofre: #0F8C7A;       --pa-cofre: #E4F6F3;
  --ac-destaque: #FFB020;    --pa-destaque: #FFF0D6;

  /* 3 · Espaçamento (base 4) e raios */
  --r-pastilha-p: 12px;
  --r-pastilha: 15px;
  --r-linha: 18px;
  --r-cartao: 20px;
  --r-botao: 22px;
  --r-painel: 26px;
  --r-folha: 34px;
  --margem: 16px;

  --nav-h: 72px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  /* Impede o zoom por duplo-toque de atrapalhar quem toca rápido nos cartões */
  touch-action: manipulation;
  user-select: none;
}

button { font-family: inherit; color: inherit; cursor: pointer; }

#tela {
  position: fixed;
  inset: 0 0 var(--nav-h) 0;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
}

.rolagem { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 16px; }
.sem-rolagem { flex: 1; overflow: hidden; }

/* ---------- topo: saldos ---------- */

.saldos { padding: 8px var(--margem) 0; display: flex; gap: 12px; flex: none; }

.saldo {
  flex: 1; height: 78px; padding: 12px 14px;
  border-radius: 22px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.saldo-carteira { background: var(--superficie); border-bottom: 4px solid var(--borda); }
.saldo-cofre {
  background: var(--cofre); border-bottom: 4px solid var(--cofre-sombra);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.saldo-rotulo {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-2);
}
.saldo-cofre .saldo-rotulo { color: var(--cofre-claro); }
.saldo-valor { display: flex; align-items: baseline; gap: 5px; }
.saldo-valor b { font-size: 32px; font-weight: 900; line-height: 1; display: inline-block; }
.saldo-valor span { font-size: 12px; font-weight: 700; color: var(--tinta-2); }
.saldo-cofre .saldo-valor b { color: #fff; }
.saldo-cofre .saldo-valor span { color: var(--cofre-claro); }

.recebendo { color: var(--sucesso) !important; animation: mdPulse 300ms ease-out; }

/* ---------- saudação e sequência ---------- */

.saudacao { padding: 14px var(--margem) 0; display: flex; align-items: center; justify-content: space-between; flex: none; }
.saudacao-esq { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { width: 40px; height: 40px; border-radius: 20px; background: var(--borda); border: 2px solid #fff; flex: none; }
.saudacao-texto { min-width: 0; }
.saudacao-nome { font-size: 19px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.15; }
/* Cabe embaixo do nome sem passar dos 40px do avatar — não custa altura na tela. */
.saudacao-data { font-size: 12px; font-weight: 800; color: var(--tinta-2); white-space: nowrap; }

.sequencia {
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: 16px; background: var(--destaque-suave); flex: none;
}
.sequencia-pontos { display: flex; gap: 3px; }
.sequencia-pontos i { width: 6px; height: 6px; border-radius: 3px; background: var(--destaque); }
.sequencia-pontos i.vazio { background: #F0DFBA; }
.sequencia b { font-size: 13px; font-weight: 800; color: var(--destaque-texto); }

/* ---------- painel do bloco ---------- */

.bloco {
  margin: 14px var(--margem) 0;
  background: var(--superficie-2);
  border-radius: var(--r-painel);
  padding: 14px 12px 12px;
  flex: none;
}
.bloco-topo { display: flex; align-items: center; gap: 8px; padding: 0 4px 10px; }
.bloco-topo h2 { margin: 0; font-size: 17px; font-weight: 900; letter-spacing: .01em; }
.bloco-topo .restam { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--primaria); }
.bloco-lista { position: relative; display: flex; flex-direction: column; gap: 9px; }

/* 4 · Estados do cartão de tarefa */

.tarefa {
  display: flex; align-items: center; gap: 12px;
  height: 70px; padding: 0 14px; width: 100%;
  border: 0; border-bottom: 4px solid var(--borda);
  border-radius: var(--r-cartao);
  background: var(--superficie);
  text-align: left;
  transition: transform 60ms ease-out;
}
.tarefa:active { transform: translateY(2px); }

.tarefa-icone {
  width: 44px; height: 44px; border-radius: var(--r-pastilha);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.tarefa-texto { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tarefa-nome { font-size: 17px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarefa-apoio { font-size: 13px; font-weight: 800; color: var(--tinta-2); }
.tarefa-alvo {
  width: 36px; height: 36px; border-radius: 18px; flex: none;
  border: 3px solid var(--borda-2);
  display: flex; align-items: center; justify-content: center;
}
.tarefa-alvo svg { display: none; }

/* Transição — o único momento em que a cor toma o cartão todo */
.tarefa.marcando {
  background: var(--sucesso);
  border-bottom-color: transparent;
  animation: mdPop 180ms cubic-bezier(.34,1.56,.64,1);
}
.tarefa.marcando .tarefa-nome { color: #fff; }
.tarefa.marcando .tarefa-apoio { color: #EAFBF1; }
.tarefa.marcando .tarefa-icone { background: rgba(255,255,255,.22) !important; }
.tarefa.marcando .tarefa-icone [stroke] { stroke: #fff !important; }
.tarefa.marcando .tarefa-icone [fill]:not([fill="none"]) { fill: #fff !important; }
.tarefa.marcando .tarefa-alvo { background: #fff; border-color: #fff; }
.tarefa.marcando .tarefa-alvo svg { display: block; animation: mdCheck 220ms cubic-bezier(.34,1.56,.64,1) 60ms both; }

/* Marcado (repouso) — satisfeito, não protagonista. Sem risco no texto. */
.feito {
  display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 14px;
  border-radius: var(--r-linha);
  background: var(--sucesso-suave);
}
.feito-nome { font-size: 15px; font-weight: 700; color: var(--sucesso-texto); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feito-pts { font-size: 14px; font-weight: 900; color: var(--sucesso); }

.feito.resumo {
  width: 100%; border: 0; text-align: left;
  transition: transform 60ms ease-out;
}
.feito.resumo:active { transform: translateY(1px); }
.feito.resumo .feito-pts { margin-right: 4px; }

/* Fora do horário: nem verde nem vermelho — neutro, sem cobrança */
.feito.neutro { background: var(--borda); }
.feito.neutro .feito-nome { color: var(--tinta-2); }
.feito.neutro .feito-pts { color: var(--tinta-2); font-weight: 800; font-size: 13px; }

/* ---------- seções e metas da semana ---------- */

.secao { margin: 12px var(--margem) 0; flex: none; }
.secao-titulo {
  font-size: 11px; font-weight: 800; color: var(--tinta-2);
  letter-spacing: .06em; text-transform: uppercase;
  padding-left: 4px; margin-bottom: 6px;
}
.pilha { display: flex; flex-direction: column; gap: 8px; }

.cota {
  display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 14px; width: 100%;
  border: 0; border-bottom: 3px solid var(--borda);
  border-radius: var(--r-linha); background: var(--superficie);
  text-align: left;
  transition: transform 60ms ease-out;
}
.cota:active { transform: translateY(2px); }
.cota-icone { width: 34px; height: 34px; border-radius: var(--r-pastilha-p); display: flex; align-items: center; justify-content: center; flex: none; }
.cota-nome { flex: 1; font-size: 15px; font-weight: 800; }
.cota-barras { display: flex; gap: 4px; align-items: center; }
.cota-barras i { height: 8px; border-radius: 4px; background: var(--borda-2); }
.cota-barras i.cheia { background: var(--primaria); }
.cota-conta { font-size: 13px; font-weight: 800; color: var(--tinta-2); width: 46px; text-align: right; }
.cota-pts { font-size: 14px; font-weight: 900; color: var(--destaque); width: 28px; text-align: right; }
.cota.completa .cota-nome { color: var(--sucesso-texto); }

.botao-extra {
  width: 100%; height: 48px; border-radius: var(--r-linha);
  background: var(--superficie); border: 2px dashed #C9BEEA;
  color: var(--primaria); font-size: 15px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 60ms ease-out;
}
.botao-extra:active { transform: translateY(1px); }

/* ---------- navegação ---------- */

#nav {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--nav-h);
  background: var(--superficie); border-top: 1px solid var(--borda);
  display: flex; align-items: center; padding: 0 8px;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 20;
}
#nav button {
  flex: 1; height: 56px; border: 0; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--tinta-2); font-size: 11px; font-weight: 800;
}
#nav button.ativo { color: var(--primaria); font-weight: 900; }
#nav button.ativo.cofre { color: var(--cofre); }

/* ---------- cabeçalho de tela interna ---------- */

.cabecalho { padding: 2px var(--margem) 10px; display: flex; align-items: center; gap: 10px; flex: none; }
.cabecalho h1 { margin: 0; font-size: 26px; font-weight: 900; flex: 1; }
.pilula {
  display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border-radius: 17px; font-size: 15px; font-weight: 900;
}
.pilula-carteira { background: var(--destaque-suave); color: var(--destaque-texto); }
.pilula-cofre { background: var(--cofre); color: #fff; }

/* ---------- loja ---------- */

.grupo { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; }
.grupo i { width: 10px; height: 10px; border-radius: 5px; flex: none; }
.grupo b { font-size: 14px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.grupo span { font-size: 12px; font-weight: 800; color: var(--tinta-2); }

.premio {
  padding: 12px 12px 12px 14px; border-radius: var(--r-cartao);
  background: var(--superficie); border-bottom: 4px solid var(--borda);
  display: flex; flex-direction: column; gap: 9px;
}
.premio.do-cofre { border-bottom-color: var(--cofre-borda); }
.premio-linha { display: flex; align-items: center; gap: 12px; }
.premio-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.premio-nome { font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.premio-custo { font-size: 13px; font-weight: 800; color: var(--tinta-2); }
.selo-meta { font-size: 11px; font-weight: 900; color: var(--cofre); background: #D8F0EB; border-radius: 8px; padding: 2px 7px; }
.premio-faltam { font-size: 14px; font-weight: 900; color: var(--primaria); }
.premio.do-cofre .premio-faltam { color: var(--cofre); }

.botao-trocar {
  height: 48px; padding: 0 18px; border: 0;
  border-bottom: 4px solid var(--sucesso-sombra); border-radius: 16px;
  background: var(--sucesso); color: #fff; font-size: 15px; font-weight: 900;
  transition: transform 60ms ease-out; flex: none;
}
.botao-trocar:active { transform: translateY(2px); }

.barra { height: 12px; border-radius: 6px; background: var(--trilha); overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: 6px; background: var(--destaque); }
.premio.do-cofre .barra { background: var(--cofre-trilha); }
.premio.do-cofre .barra > i { background: var(--cofre); }

.premio-especial {
  padding: 16px; border-radius: 24px; background: var(--tinta);
  display: flex; flex-direction: column; gap: 12px;
}
.premio-especial .premio-nome { font-size: 18px; font-weight: 900; color: #fff; }
.premio-especial .premio-custo { color: var(--tinta-inversa-2); }
.premio-especial .barra { height: 14px; border-radius: 7px; background: rgba(255,255,255,.16); }
.premio-especial .barra > i { background: var(--destaque); border-radius: 7px; }
.premio-especial .rodape { display: flex; justify-content: space-between; font-size: 13px; font-weight: 800; }
.premio-especial .rodape b { color: var(--destaque); }
.premio-especial .rodape span { color: var(--tinta-inversa-2); }

/* ---------- cofre ---------- */

/* Preenche o #tela (que já termina acima da navegação), não a janela inteira. */
.cofre-tela { flex: 1; min-height: 0; background: var(--cofre); display: flex; flex-direction: column; margin-top: -1px; }
.cofre-topo { padding: 6px 20px 0; display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.cofre-etiqueta {
  display: flex; align-items: center; gap: 8px; color: var(--cofre-claro);
  font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.cofre-numero { font-size: 76px; font-weight: 900; line-height: 1.1; color: #fff; letter-spacing: -.02em; }
.cofre-sub { font-size: 15px; font-weight: 800; color: var(--cofre-claro); margin-top: -4px; }

.cofre-folha {
  flex: 1; min-height: 0; margin-top: 18px; background: var(--fundo);
  border-radius: var(--r-folha) var(--r-folha) 0 0;
  padding: 18px var(--margem) 20px;
  overflow-y: auto;
}

.cartao-meta {
  padding: 14px; border-radius: 24px; background: var(--superficie);
  border-bottom: 4px solid var(--borda);
  display: flex; flex-direction: column; gap: 11px;
}
.cartao-meta-linha { display: flex; align-items: center; gap: 12px; }
.cartao-meta-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cartao-meta-rotulo { font-size: 12px; font-weight: 900; color: var(--tinta-2); letter-spacing: .05em; text-transform: uppercase; }
.cartao-meta-nome { font-size: 20px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-meta-pc { font-size: 26px; font-weight: 900; color: var(--cofre); }
.barra-meta { height: 18px; border-radius: 9px; background: var(--cofre-trilha); overflow: hidden; }
.barra-meta > i { display: block; height: 100%; border-radius: 9px; background: var(--cofre); box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.cartao-meta-faltam { font-size: 14px; font-weight: 800; color: var(--tinta-2); }

.botao-guardar {
  margin-top: 14px; width: 100%; height: 60px; border: 0;
  border-bottom: 5px solid var(--primaria-sombra); border-radius: var(--r-botao);
  background: var(--primaria); color: #fff; font-size: 18px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform 60ms ease-out;
}
.botao-guardar:active { transform: translateY(3px); }
.botao-guardar[disabled] { opacity: .45; }
.legenda { text-align: center; font-size: 13px; font-weight: 800; color: var(--tinta-2); margin-top: 8px; }

.cartao-juros {
  margin-top: 16px; padding: 14px; border-radius: 24px;
  background: var(--sucesso-suave); display: flex; align-items: center; gap: 12px;
}
.juros-barras { display: flex; align-items: flex-end; gap: 3px; height: 44px; flex: none; }
.juros-barras i { width: 9px; border-radius: 3px; }
.cartao-juros-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cartao-juros-texto b { font-size: 17px; font-weight: 900; }
.cartao-juros-texto span { font-size: 14px; font-weight: 800; color: var(--sucesso-texto); }
.cartao-juros > b { font-size: 24px; font-weight: 900; color: var(--sucesso); }

.botao-linha {
  margin-top: 12px; width: 100%; height: 54px;
  border: 2px solid var(--borda); border-radius: 20px; background: var(--superficie);
  font-size: 16px; font-weight: 800;
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
  transition: transform 60ms ease-out;
}
.botao-linha:active { transform: translateY(1px); }
.botao-linha span { display: flex; align-items: center; gap: 10px; }

/* ---------- semana ---------- */

.tabela-semana { background: var(--superficie); border-radius: var(--r-painel); padding: 14px 12px; border-bottom: 4px solid var(--borda); }
.semana-cab, .semana-linha { display: grid; grid-template-columns: 1fr repeat(7, 26px); align-items: center; gap: 4px; }
.semana-cab span { font-size: 11px; font-weight: 900; color: var(--tinta-2); text-align: center; }
.semana-cab span:first-child { text-align: left; }
.semana-linha { height: 38px; }
.semana-linha > b { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca { width: 22px; height: 22px; border-radius: 11px; margin: 0 auto; background: var(--borda); }
.marca.ok { background: var(--sucesso); }
.marca.fora { background: var(--borda-2); }
.marca.na { background: transparent; border: 2px dashed var(--borda); box-sizing: border-box; }
.semana-cab span.hoje { color: var(--primaria); }

/* ---------- extrato ---------- */

.mov { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-linha); background: var(--superficie); }
.mov-icone { width: 34px; height: 34px; border-radius: var(--r-pastilha-p); display: flex; align-items: center; justify-content: center; flex: none; font-size: 15px; font-weight: 900; }
.mov-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mov-desc { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mov-data { font-size: 12px; font-weight: 800; color: var(--tinta-2); }
.mov-valor { font-size: 16px; font-weight: 900; flex: none; }
.mov-valor.mais { color: var(--sucesso); }
.mov-valor.menos { color: var(--tinta-2); }

/* ---------- folha modal ---------- */

#folha { position: fixed; inset: 0; z-index: 40; display: none; }
#folha.aberta { display: block; }
.folha-fundo { position: absolute; inset: 0; background: rgba(27,24,48,.45); }
.folha-corpo {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88%; overflow-y: auto;
  background: var(--fundo); border-radius: var(--r-folha) var(--r-folha) 0 0;
  padding: 8px var(--margem) calc(20px + env(safe-area-inset-bottom));
  animation: mdSobe 220ms cubic-bezier(.2,.9,.3,1);
}
.folha-puxador { width: 44px; height: 5px; border-radius: 3px; background: var(--borda-2); margin: 6px auto 12px; }
.folha-corpo h2 { margin: 0 0 4px; font-size: 22px; font-weight: 900; }
.folha-corpo p.ajuda { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--tinta-2); line-height: 1.5; }

.campo { width: 100%; height: 54px; border: 2px solid var(--borda); border-radius: var(--r-linha); background: var(--superficie); padding: 0 14px; font-family: inherit; font-size: 17px; font-weight: 800; color: var(--tinta); margin-bottom: 10px; }
.campo:focus { outline: none; border-color: var(--primaria); }
textarea.campo { height: auto; padding: 12px 14px; line-height: 1.4; }

.botao-primario {
  width: 100%; height: 58px; border: 0;
  border-bottom: 5px solid var(--primaria-sombra); border-radius: var(--r-botao);
  background: var(--primaria); color: #fff; font-size: 17px; font-weight: 900;
  transition: transform 60ms ease-out; margin-top: 4px;
}
.botao-primario:active { transform: translateY(3px); }
.botao-primario[disabled] { opacity: .45; }
.botao-primario.verde { background: var(--sucesso); border-bottom-color: var(--sucesso-sombra); }
.botao-primario.cofre { background: var(--cofre); border-bottom-color: var(--cofre-sombra); }

.botao-secundario {
  width: 100%; height: 50px; border: 2px solid var(--borda); border-radius: var(--r-linha);
  background: transparent; font-size: 16px; font-weight: 800; margin-top: 8px;
}

.escolha { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-bottom: 3px solid var(--borda); border-radius: var(--r-linha); background: var(--superficie); text-align: left; margin-bottom: 8px; }
.escolha b { flex: 1; font-size: 16px; font-weight: 800; }
.escolha span { font-size: 14px; font-weight: 900; color: var(--destaque); }

/* ---------- formulário do editor de tarefa ---------- */

.rotulo {
  display: block; font-size: 12px; font-weight: 900; color: var(--tinta-2);
  letter-spacing: .05em; text-transform: uppercase; margin: 14px 0 6px;
}
.rotulo .opcional { font-weight: 800; text-transform: none; letter-spacing: 0; opacity: .8; }

.opcoes { display: flex; gap: 8px; margin-bottom: 4px; }
.opcoes.tres .opcao { padding: 10px 8px; }
.opcao {
  flex: 1; min-width: 0; padding: 12px; border: 2px solid var(--borda);
  border-radius: var(--r-linha); background: var(--superficie); text-align: left;
}
.opcao b { display: block; font-size: 15px; font-weight: 900; }
.opcao small { display: block; font-size: 12px; font-weight: 700; color: var(--tinta-2); margin-top: 2px; line-height: 1.3; }
.opcao.on { border-color: var(--primaria); background: var(--superficie-2); }
.opcao.on b { color: var(--primaria); }

.dias-linha { display: flex; gap: 6px; margin-bottom: 10px; }
.dia-chip {
  flex: 1; height: 48px; border: 2px solid var(--borda); border-radius: 14px;
  background: var(--superficie); font-size: 15px; font-weight: 900; color: var(--tinta-2);
}
.dia-chip.on { background: var(--primaria); border-color: var(--primaria-sombra); color: #fff; }

.cor-chip { flex: 1; height: 44px; border: 3px solid; border-radius: 14px; opacity: .5; }
.cor-chip.on { opacity: 1; box-shadow: 0 0 0 3px var(--fundo), 0 0 0 5px var(--tinta); }

.forma-chip {
  flex: 1; height: 48px; border: 2px solid var(--borda); border-radius: 14px;
  background: var(--superficie); display: flex; align-items: center; justify-content: center;
}
.forma-chip.on { border-color: var(--primaria); background: var(--superficie-2); }

.teclado-pin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.teclado-pin button { height: 62px; border: 0; border-bottom: 4px solid var(--borda); border-radius: var(--r-linha); background: var(--superficie); font-size: 24px; font-weight: 900; }
.pin-visor { display: flex; justify-content: center; gap: 12px; margin: 10px 0 16px; }
.pin-visor i { width: 16px; height: 16px; border-radius: 8px; background: var(--borda-2); }
.pin-visor i.cheio { background: var(--primaria); }

/* ---------- modo dos pais ---------- */

.cartao { background: var(--superficie); border-radius: var(--r-painel); border-bottom: 4px solid var(--borda); padding: 14px; margin-bottom: 12px; }
.cartao h3 { margin: 0 0 10px; font-size: 16px; font-weight: 900; }
.linha-conf { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--borda); }
.linha-conf:first-of-type { border-top: 0; }
.linha-conf b { flex: 1; font-size: 15px; font-weight: 800; }
.linha-conf small { font-size: 12px; font-weight: 800; color: var(--tinta-2); display: block; }
.mini { height: 40px; padding: 0 14px; border: 0; border-bottom: 3px solid var(--borda); border-radius: 14px; background: var(--superficie-2); font-size: 14px; font-weight: 900; color: var(--primaria); }
.mini.verde { background: var(--sucesso); color: #fff; border-bottom-color: var(--sucesso-sombra); }
.mini.neutro { background: var(--borda); color: var(--tinta-2); }
.num { width: 68px; height: 40px; border: 2px solid var(--borda); border-radius: 12px; background: var(--superficie); text-align: center; font-family: inherit; font-size: 16px; font-weight: 900; color: var(--tinta); }

.chave { position: relative; width: 52px; height: 32px; border-radius: 16px; background: var(--borda-2); border: 0; flex: none; transition: background 150ms; }
.chave i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 13px; background: #fff; transition: transform 150ms cubic-bezier(.2,.9,.3,1); }
.chave.on { background: var(--sucesso); }
.chave.on i { transform: translateX(20px); }

.tabs-pai { display: flex; gap: 8px; padding: 0 var(--margem) 10px; flex: none; overflow-x: auto; }
.tabs-pai button { flex: 1 0 auto; min-width: 74px; }

/* Configuração alterada não vai sozinha: uma regra que vale para a rotina de uma criança
   merece um "salvar" explícito, não propagação a cada tecla digitada. */
.barra-salvar {
  display: flex; align-items: center; gap: 10px;
  margin: 0 var(--margem) 10px; padding: 10px 12px;
  border-radius: var(--r-linha); background: var(--destaque-suave); flex: none;
}
.barra-salvar span { flex: 1; font-size: 14px; font-weight: 800; color: var(--destaque-texto); }

#sync { font-size: 12px; font-weight: 800; color: var(--tinta-2); text-align: right; }
#sync.erro, #sync.offline { color: var(--destaque-texto); }

.adesao-barra { height: 10px; border-radius: 5px; background: var(--trilha); overflow: hidden; margin-top: 6px; }
.adesao-barra > i { display: block; height: 100%; border-radius: 5px; background: var(--primaria); }
.adesao-barra > i.baixa { background: var(--destaque); }

/* ---------- avisos ---------- */

#aviso {
  position: fixed; left: 16px; right: 16px; bottom: calc(var(--nav-h) + 14px);
  z-index: 50; display: none;
  background: var(--tinta); color: #fff;
  border-radius: var(--r-linha); padding: 14px 16px;
  font-size: 15px; font-weight: 800; line-height: 1.35;
  box-shadow: 0 10px 30px rgba(27,24,48,.3);
}
#aviso.visivel { display: block; animation: mdSobe 220ms cubic-bezier(.2,.9,.3,1); }

.vazio { text-align: center; padding: 30px 20px; color: var(--tinta-2); font-size: 15px; font-weight: 700; line-height: 1.5; }

/* ---------- 5 · celebração ---------- */

#camada-celebra { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.confete { position: absolute; }
.pastilha-voo {
  position: absolute; padding: 5px 12px; border-radius: 14px;
  background: var(--destaque); color: #3D2A00;
  font-size: 16px; font-weight: 900; white-space: nowrap;
}

@keyframes mdPop   { 0%{transform:scale(1)} 40%{transform:scale(1.045)} 100%{transform:scale(1)} }
@keyframes mdCheck { 0%{transform:scale(.3);opacity:0} 60%{transform:scale(1.15);opacity:1} 100%{transform:scale(1);opacity:1} }
@keyframes mdPulse { 0%{transform:scale(1)} 45%{transform:scale(1.18)} 100%{transform:scale(1)} }
@keyframes mdSobe  { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }

@keyframes c1 {0%{transform:translate(0,0) scale(0);opacity:1}30%{transform:translate(-52px,-34px) scale(1)}100%{transform:translate(-78px,26px) scale(.7);opacity:0}}
@keyframes c2 {0%{transform:translate(0,0) scale(0);opacity:1}30%{transform:translate(-24px,-52px) scale(1) rotate(90deg)}100%{transform:translate(-34px,24px) scale(.7) rotate(200deg);opacity:0}}
@keyframes c3 {0%{transform:translate(0,0) scale(0);opacity:1}30%{transform:translate(10px,-58px) scale(1)}100%{transform:translate(16px,22px) scale(.7);opacity:0}}
@keyframes c4 {0%{transform:translate(0,0) scale(0);opacity:1}30%{transform:translate(44px,-44px) scale(1) rotate(-60deg)}100%{transform:translate(66px,20px) scale(.7) rotate(-180deg);opacity:0}}
@keyframes c5 {0%{transform:translate(0,0) scale(0);opacity:1}30%{transform:translate(72px,-18px) scale(1)}100%{transform:translate(104px,28px) scale(.7);opacity:0}}
@keyframes c6 {0%{transform:translate(0,0) scale(0);opacity:1}30%{transform:translate(-72px,-6px) scale(1) rotate(45deg)}100%{transform:translate(-108px,32px) scale(.7) rotate(160deg);opacity:0}}
@keyframes c7 {0%{transform:translate(0,0) scale(0);opacity:1}30%{transform:translate(30px,-30px) scale(1)}100%{transform:translate(46px,34px) scale(.7);opacity:0}}
@keyframes c8 {0%{transform:translate(0,0) scale(0);opacity:1}30%{transform:translate(-6px,-40px) scale(1) rotate(-30deg)}100%{transform:translate(-8px,30px) scale(.7) rotate(-140deg);opacity:0}}

/* Reduzir movimento: sem confete e sem voo — só cor, tique e pulso. */
body.sem-movimento .confete,
body.sem-movimento .pastilha-voo { display: none; }
body.sem-movimento .folha-corpo,
body.sem-movimento #aviso.visivel { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .confete, .pastilha-voo { display: none; }
  .folha-corpo, #aviso.visivel { animation: none; }
}