/* Mundo Duolingo + Fluent Emoji 3D, ajustado para mulheres de 45 a 70 anos:
   letra grande, toque grande, contraste AA. O verde-pena claro só preenche e decora;
   texto e botão com texto usam os tons escuros para passar no contraste. */
@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito.woff2") format("woff2");
  font-weight: 600 900;
  font-display: swap;
}

:root {
  --verde: #58cc02;
  --verde-botao: #2f7d00;
  --verde-sombra: #1f5600;
  --verde-texto: #2b7a00;
  --verde-claro: #d7ffb8;
  --azul-texto: #0e6fa8;
  --azul-claro: #ddf4ff;
  --laranja-texto: #b35400;
  --mostarda: #ffc800;
  --cinza-linha: #e5e5e5;
  --cinza-sombra: #b8b8b8;
  --borda-toque: #c9c9c9;
  --check-vazio: #8c8c8c;
  --texto: #3c3c3c;
  --suave: #5f6368;
  --fundo: #ffffff;
  --raio: 20px;
  --abas: 84px;
  --solta: cubic-bezier(.16, 1, .3, 1);
  font-size: 125%; /* 20px no padrão, e acompanha a letra que ela escolheu no celular */
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding: 96px 0 140px; }
body {
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 700;
  background: var(--fundo);
  color: var(--texto);
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--verde-claro); color: var(--texto); }
img { display: block; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
:focus-visible { outline: 4px solid var(--azul-texto); outline-offset: 3px; border-radius: 12px; }

main { max-width: 520px; margin: 0 auto; padding: 0 16px calc(var(--abas) + 112px + env(safe-area-inset-bottom)); }

.carregando { min-height: 80vh; display: grid; place-content: center; justify-items: center; gap: 16px; color: var(--suave); text-align: center; }
.carregando img { animation: aceno 1.2s var(--solta) infinite alternate; }

/* ---------- barra de status (topo) ---------- */
.status {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  margin: 0 -16px; padding: 12px 16px;
  background: var(--fundo); border-bottom: 2px solid var(--cinza-linha);
}
.pilula { display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: 1.1rem; }
.pilula img { width: 36px; height: 36px; }
.pilula.fogo { color: var(--laranja-texto); }
.pilula.fogo.apagado img { filter: grayscale(1); opacity: .6; }
.pilula.fogo.apagado { color: var(--suave); }
.pilula.dia { color: var(--azul-texto); }
.pilula.zap {
  min-height: 56px; padding: 0 18px; border-radius: 999px; text-decoration: none; font-size: .95rem;
  background: var(--verde-botao); color: #fff; box-shadow: 0 4px 0 var(--verde-sombra);
  transition: transform .08s, box-shadow .08s;
}
.pilula.zap:active { transform: translateY(4px); box-shadow: none; }
.pilula.zap svg { width: 26px; height: 26px; fill: #fff; }

/* ---------- saudação ---------- */
.ola { display: flex; align-items: center; gap: 14px; padding: 24px 0 8px; }
.ola img { width: 72px; height: 72px; flex: none; transform-origin: 70% 80%; animation: aceno .9s var(--solta) 2 alternate; }
.ola h1 { font-size: 1.6rem; font-weight: 900; line-height: 1.15; }
.ola p { color: var(--suave); font-size: .95rem; margin-top: 2px; }

h2 { font-size: 1.25rem; font-weight: 900; line-height: 1.2; }
.secao { margin-top: 32px; }
.secao > h2 { margin-bottom: 14px; }

/* ---------- cartão base (borda + sombra sólida, como no Duolingo) ---------- */
/* Cartão parado tem só borda; a sombra que afunda fica para o que se toca. */
.cartao { border: 2px solid var(--cinza-linha); border-radius: var(--raio); padding: 18px; }

/* ---------- progresso do dia ---------- */
.progresso { margin-top: 16px; }
.progresso .topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.progresso .conta { color: var(--verde-texto); font-weight: 900; font-variant-numeric: tabular-nums; }
.barra { height: 22px; border-radius: 999px; background: var(--cinza-linha); margin-top: 12px; overflow: hidden; }
.barra i {
  display: block; height: 100%; border-radius: inherit; background: var(--verde);
  transform-origin: left; transition: transform .6s var(--solta);
  position: relative;
}
.barra i::after { content: ""; position: absolute; left: 12px; right: 12px; top: 5px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .35); }

/* ---------- checklist ---------- */
.lista { list-style: none; padding: 0; display: grid; gap: 14px; }
.item {
  width: 100%; min-height: 76px; display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border: 2px solid var(--borda-toque); border-radius: var(--raio);
  box-shadow: 0 4px 0 var(--cinza-sombra); background: #fff; font-size: 1rem;
  transition: transform .08s, box-shadow .08s, background .2s, border-color .2s;
}
.item img { width: 52px; height: 52px; flex: none; }
.item .rotulo { flex: 1; line-height: 1.25; }
.item .rotulo small { display: block; font-size: .9rem; color: var(--verde-texto); font-weight: 800; }
.item:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
.check {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--check-vazio); display: grid; place-items: center;
}
.check svg { width: 24px; height: 24px; stroke: #fff; stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.item.feito { background: var(--verde-claro); border-color: var(--verde); box-shadow: 0 4px 0 var(--verde); }
.item.feito .check { background: var(--verde); border-color: var(--verde); animation: pop .35s var(--solta); }
.item.feito .check svg { opacity: 1; }

.aviso { display: flex; gap: 14px; align-items: center; background: var(--verde-claro); border-color: var(--verde); margin-top: 16px; }
.aviso img { width: 56px; height: 56px; flex: none; }

.festa { display: flex; gap: 14px; align-items: center; margin-top: 16px; background: var(--verde-claro); border-color: var(--verde); animation: subir .5s var(--solta); }
.festa img { width: 64px; height: 64px; flex: none; }
.festa strong { display: block; font-size: 1.15rem; font-weight: 900; color: var(--verde-texto); }

/* ---------- banheiro ---------- */
.opcoes { display: grid; gap: 12px; }
.opcao {
  width: 100%; min-height: 72px; display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; border: 2px solid var(--borda-toque); border-radius: var(--raio);
  box-shadow: 0 4px 0 var(--cinza-sombra); background: #fff; font-size: 1rem;
  transition: transform .08s, box-shadow .08s;
}
.opcao img { width: 48px; height: 48px; flex: none; }
.opcao:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
.opcao .rotulo { flex: 1; }
.opcao .check { width: 36px; height: 36px; border: 0; }
.opcao:not(.escolhida) .check { visibility: hidden; }
.opcao.escolhida { background: var(--azul-claro); border: 3px solid var(--azul-texto); box-shadow: 0 4px 0 var(--azul-texto); color: var(--azul-texto); }
.opcao.escolhida .check { background: var(--azul-texto); }
.opcao.escolhida .check svg { opacity: 1; }
.vezes .opcao .check { width: 28px; height: 28px; }
.vezes .opcao .check svg { width: 18px; height: 18px; }
.vezes { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: 12px; }
.vezes .opcao { justify-content: center; gap: 8px; font-size: 1.1rem; font-weight: 900; }
.pular { margin-top: 14px; min-height: 56px; padding: 0 8px; color: var(--azul-texto); font-weight: 900; font-size: 1rem; text-decoration: underline; text-underline-offset: 4px; }
h3 { font-size: 1.1rem; font-weight: 900; margin: 22px 0 12px; }

/* ---------- dica ---------- */
.dica { display: flex; gap: 14px; align-items: flex-start; background: var(--azul-claro); border-color: #b9e6fb; }
.dica img { width: 56px; height: 56px; flex: none; }
.dica h2 { font-size: 1.1rem; color: var(--azul-texto); margin-bottom: 4px; }
.dica p { font-weight: 700; }

/* ---------- botões ---------- */
.botao {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 64px;
  padding: 0 20px; border-radius: 18px; text-decoration: none; text-align: center;
  font-weight: 900; font-size: 1.05rem; letter-spacing: .02em;
  background: var(--verde-botao); color: #fff; box-shadow: 0 5px 0 var(--verde-sombra);
  transition: transform .08s, box-shadow .08s; margin-top: 32px;
}
.botao:active { transform: translateY(5px); box-shadow: 0 0 0 transparent; }
.botao svg { width: 28px; height: 28px; fill: #fff; flex: none; }


/* ---------- recado (toast) ---------- */
.recado {
  position: fixed; left: 16px; right: 16px; margin: 0 auto; bottom: calc(var(--abas) + 18px + env(safe-area-inset-bottom)); z-index: 3;
  max-width: 420px; padding: 14px 16px; border-radius: 16px;
  background: var(--texto); color: #fff; font-size: .95rem;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s, transform .35s var(--solta);
}
.recado.visivel { opacity: 1; transform: none; }

/* ---------- abas ---------- */
.abas {
  position: fixed; inset: auto 0 0 0; z-index: 4;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  min-height: var(--abas); padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: #fff; border-top: 2px solid var(--cinza-linha);
}
.abas[hidden] { display: none; }
.abas button {
  min-width: 0; overflow-wrap: break-word; min-height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 2px solid transparent; border-radius: 16px; font-size: .9rem; font-weight: 900; color: var(--suave); text-align: center; line-height: 1.1;
}
.abas img { width: 40px; height: 40px; filter: grayscale(.6); opacity: .8; }
.abas button[aria-current="page"] { border-color: var(--azul-texto); background: var(--azul-claro); color: var(--azul-texto); }
.abas button[aria-current="page"] img { filter: none; opacity: 1; }

.pendente { display: flex; align-items: center; gap: 10px; justify-content: center; color: var(--suave); font-size: .9rem; margin-top: 20px; }
.pendente img { width: 32px; height: 32px; }

/* ---------- evolução ---------- */
.titulo-tela { display: flex; align-items: center; gap: 14px; padding: 24px 0 4px; }
.titulo-tela img { width: 64px; height: 64px; }
.titulo-tela h1 { font-size: 1.6rem; font-weight: 900; }

.comparacao { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 12px; margin-top: 20px; }
.comparacao .cartao { text-align: center; padding: 16px 10px; }
.comparacao .rotulo { font-size: .9rem; color: var(--suave); }
.comparacao .numero { font-size: 2.6rem; font-weight: 900; line-height: 1.1; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.comparacao .agora { border-color: var(--verde); background: var(--verde-claro); }
.sem-dados { font-size: 1rem; color: var(--suave); margin: 14px 0 6px; }
.comparacao .agora .numero { color: var(--verde-texto); }
.frase { margin-top: 16px; text-align: center; font-size: 1.05rem; }

.mes-nome { text-transform: capitalize; }
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 4px; text-align: center; margin-top: 14px; }
.calendario b { font-size: .9rem; color: var(--suave); font-weight: 900; }
.calendario .curto { display: none; }
.calendario span {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  font-size: .9rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--texto);
}
/* Forma diferente por estado (círculo cheio, quadrado, círculo tracejado), não só cor. */
.marca.normal { background: var(--verde); color: var(--texto); border-radius: 50%; }
.marca.dificuldade { background: var(--mostarda); color: var(--texto); border-radius: 8px; }
.marca.nao { background: #fff; color: var(--texto); border: 3px dashed var(--check-vazio); border-radius: 50%; }
.calendario .hoje { outline: 3px solid var(--azul-texto); outline-offset: 2px; }
.legenda { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 10px; font-size: .9rem; }
.legenda li { display: flex; align-items: center; gap: 10px; }
.legenda i { width: 26px; height: 26px; flex: none; }

.constancia { display: flex; align-items: center; gap: 14px; }
.constancia img { width: 56px; height: 56px; flex: none; }
.constancia p { flex: 1; }
.constancia strong { color: var(--verde-texto); font-weight: 900; }

/* ---------- tratamento ---------- */
.passos { list-style: none; padding: 0; display: grid; gap: 14px; counter-reset: passo; }
.passos li { display: flex; align-items: center; gap: 14px; counter-increment: passo; }
.passos li::before {
  content: counter(passo); flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--verde-botao); color: #fff; font-weight: 900;
}
.uso-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.uso-topo img { width: 64px; height: 64px; }
.nota { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--azul-claro); color: var(--azul-texto); }

/* O caminho: a trilha de fases do Duolingo. */
.trilha { list-style: none; padding: 8px 0 0; display: grid; gap: 28px; }
.trilha li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
/* O zigue-zague mexe só no círculo; o texto fica centrado e nunca sai da tela. */
.trilha li:nth-child(2) .no { transform: translateX(-48px); }
.trilha li:nth-child(3) .no { transform: translateX(36px); }
.trilha li:nth-child(4) .no { transform: translateX(-20px); }
.no {
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cinza-linha); box-shadow: 0 7px 0 var(--cinza-sombra); position: relative;
}
.no img { width: 60px; height: 60px; filter: grayscale(1); opacity: .45; }
.passou .no { background: var(--verde); box-shadow: 0 7px 0 var(--verde-sombra); }
.atual .no { background: var(--verde); box-shadow: 0 7px 0 var(--verde-sombra); width: 112px; height: 112px; }
.atual .no::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 5px solid var(--verde-claro); }
.passou .no img, .atual .no img { filter: none; opacity: 1; }
.trilha strong { font-weight: 900; font-size: 1rem; }
.trilha li > span:last-child { color: var(--suave); font-size: .9rem; }
.selo { position: absolute; right: -4px; bottom: -4px; width: 36px; height: 36px; border-radius: 50%; background: var(--verde-botao); border: 3px solid #fff; display: grid; place-items: center; }
.selo svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.balao {
  background: #fff; border: 2px solid var(--cinza-linha); border-radius: 14px; padding: 6px 14px;
  font-weight: 900; color: var(--verde-texto); font-size: .9rem; position: relative; margin-bottom: 6px;
  animation: flutua 2.4s ease-in-out 3;
}
.balao::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; background: #fff; border: 2px solid var(--cinza-linha); border-top: 0; border-left: 0; transform: translateX(-50%) rotate(45deg); }

.erro { min-height: 70vh; display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; padding: 0 12px; }
.erro img { width: 96px; height: 96px; }
.erro .botao { margin-top: 8px; }
img.inline { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.25em; }

@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes subir { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes aceno { from { transform: rotate(-12deg); } to { transform: rotate(14deg); } }
@keyframes flutua { 50% { transform: translateY(-4px); } }

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

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Letra grande no celular (zoom ou fonte do sistema): o texto quebra, nada sai da tela. */
.ola > div, .titulo-tela h1, .mes-nome, .uso-topo h2, .passos li, .item .rotulo, .opcao .rotulo, .aviso p, .festa p, .dica > div, .constancia p, .progresso .topo h2 {
  min-width: 0; overflow-wrap: break-word;
}
@media (max-width: 320px) {
  .ola img, .titulo-tela img { width: 48px; height: 48px; }
  /* Tela estreita: o emoji sobe e o texto ganha a largura toda, palavra inteira. */
  .ola, .titulo-tela, .aviso, .dica, .festa, .constancia { flex-direction: column; align-items: flex-start; }
  .item, .opcao { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .item .rotulo, .opcao .rotulo { flex-basis: 100%; order: 3; }
  .item .check, .opcao .check { margin-left: auto; }
  .item img, .opcao img { width: 36px; height: 36px; }
  .calendario { gap: 4px 2px; }
  .calendario .longo { display: none; }
  .calendario .curto { display: inline; }
  .abas img { width: 30px; height: 30px; }
  .abas { gap: 2px; padding-left: 4px; padding-right: 4px; }
  .abas button { font-size: .8rem; }
  .cartao { padding: 14px 10px; }
  .progresso .topo { flex-wrap: wrap; }
  .uso-topo { flex-direction: column; align-items: flex-start; gap: 8px; }
  .uso-topo img { width: 44px; height: 44px; }
  .trilha li .no { transform: none !important; }
}


/* Só com zoom de 200% (tela lógica de ~195px): o texto já sai em dobro, então pode encolher aqui. */
@media (max-width: 260px) {
  /* As abas ficam só com o emoji grande; o nome continua para o leitor de tela. */
  .abas .rot-aba { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .abas img { width: 40px; height: 40px; }
  .calendario span, .calendario b { font-size: .7rem; }
}

/* PC: o app vira uma coluna de celular no centro, com as abas presas a ela. */
@media (min-width: 700px) {
  body { background: #eef6e8; }
  main { background: var(--fundo); min-height: 100vh; border-inline: 2px solid var(--cinza-linha); }
  .abas { max-width: 520px; margin: 0 auto; border-inline: 2px solid var(--cinza-linha); }
}