/* /assets/css/wellness.css — o sistema visual AYRA WELLNESS
   O que é: a identidade do documento "AYRA — UX Primeira Etapa / V2".
   Onde fica: /assets/css/wellness.css
   Carrega DEPOIS do app.css, de propósito: a primeira parte redefine os
   TOKENS que o app.css criou, e a segunda traz os componentes da jornada.

   ⚠️ TODO NÚMERO DESTE ARQUIVO FOI MEDIDO NO PDF, NÃO ESTIMADO.

   As cores foram lidas dos objetos vetoriais do documento e conferidas
   amostrando os pixels das páginas renderizadas. As medidas saíram dos
   retângulos do próprio arquivo. As fontes, dos spans de texto.

   A ESCALA — e por que ela é 1,2745

   O mockup desenha a tela do telefone com 306pt de largura. Um aparelho de
   390px de largura (o alvo mais comum hoje) dá 390 / 306 = 1,2745. Não é
   chute: o PDF exige "alvos de toque >= 44 px", e a pílula ativa da barra
   inferior, que mede 34pt no desenho, vira 43,3px nessa escala — exatamente
   o mínimo pedido. A escala se confirma sozinha.

   Cada medida abaixo traz o valor original em pt no comentário, para
   conferência contra o documento ser leitura e não caçada.

   POR QUE REDEFINIR TOKEN EM VEZ DE REESCREVER AS TELAS

   Mesmo movimento que virou o /admin para o modelo Jiade em 03/09: os NOMES
   dos tokens antigos são mantidos e só o VALOR muda. As telas existentes usam
   esses nomes em centenas de lugares, então trocar o valor repinta o app
   inteiro sem tocar em nenhuma página. */

/* ===============================================================
   1. TOKENS
   =============================================================== */
:root,
[data-theme="black"],
[data-theme="white"],
[data-theme="wellness"] {
  color-scheme: light;

  /* ---- As cores, exatamente as do documento ---- */
  --luminous:    #F7FAFC;   /* base da tela */
  --ice:         #DDEAF7;   /* Ice Blue: card ativo, chips, pílula da barra */
  --ice-fundo:   #E6EDF4;
  --ink:         #0E1F33;   /* Ink Navy: texto, faixa, botão primário */
  --ink-2:       #465A70;   /* apoio: data, subtítulo, rótulo de seção */
  --linha:       #E1E7EE;
  --linha-forte: #BFC5CC;
  --signal:      #2F6BFF;   /* Signal Blue: SÓ progresso e estado ativo */
  --signal-soft: #E8EFFF;
  --sobre-ink:   #F7FAFC;   /* texto sobre a faixa e o botão navy */

  /* ---- Os nomes antigos, apontando para o sistema novo ---- */
  --bg:            var(--luminous);
  --bg-fundo:      #EEF3F7;
  --bg-sidebar:    #FFFFFF;
  --surface-1:     #FFFFFF;
  --surface-2:     var(--ice-fundo);
  --surface-3:     var(--ice);
  --border:        var(--linha);
  --border-strong: var(--linha-forte);
  --text-1:        var(--ink);
  --text-2:        var(--ink-2);
  --text-3:        var(--ink-2);
  --shadow-card:   0 1px 2px rgb(14 31 51 / .04), 0 8px 24px rgb(14 31 51 / .05);
  --sobre-aura:    var(--sobre-ink);

  --aura:        var(--signal);
  --aura-claro:  #5C88FF;
  --aura-soft:   var(--signal-soft);
  --ceu:         var(--signal);
  --ceu-text:    var(--signal);
  --ceu-soft:    var(--signal-soft);
  --vida:        #1F9D74;
  --vida-text:   #1F9D74;
  --vida-soft:   #E3F4EE;
  --ambar:       #B4740A;
  --ambar-soft:  #FBF0DC;
  --alerta-cor:  #C2384F;
  --alerta-soft: #FBE9EC;
  --verde-ok:    #1F9D74;
  --noite:       var(--ink);

  /* A identidade nova é chapada: sem gradiente e sem brilho. */
  --grad-aura:  var(--ink);
  --grad-noite: var(--luminous);
  --glow-aura:  none;
  --glow-azul:  none;
  --glow-verde: none;

  /* ---- Tipografia: Inter 400/500/600, e só ---- */
  --fonte: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Tamanhos: pt do documento × 1,2745 */
  --fs-h1:      28px;   /* 22pt · "Bom dia, Ricardo." */
  --fs-titulo:  29px;   /* 23pt · "Vamos organizar seu dia" */
  --fs-secao:   19px;   /* 15pt · "Suas rotinas" */
  --fs-faixa:   17px;   /* 13pt · "0 de 6 rotinas revisadas" */
  --fs-corpo:   15px;   /* 12pt · subtítulos e itens de lista */
  --fs-data:    14px;   /* 11pt · "Sábado, 05 de setembro" */
  --fs-card:    13px;   /* 10pt · nome da rotina, item da barra */
  --fs-mini:    12px;   /* 9pt  · estado do card, selos */

  /* ---- Forma: raios medidos no documento ---- */
  --r-xs:   8px;
  --r-sm:  11px;   /*  9pt · pílula da barra inferior */
  --r-md:  17px;   /* 13pt · cards e barra */
  --r-lg:  18px;   /* 14pt · faixa navy */
  --r-pill: 999px;

  /* ---- Espaço ---- */
  --ay-margem:   22px;   /* 17pt · margem lateral da tela */
  --ay-card-pad: 13px;   /* 10pt · respiro interno do card */
  --ay-gap-col:  13px;   /* 10pt · entre as duas colunas */
  --ay-gap-lin:  10px;   /*  8pt · entre as linhas de cards */

  --toque: 44px;         /* alvo mínimo exigido pelo documento */
}

html, body {
  background: var(--luminous);
  color: var(--ink);
  font-family: var(--fonte);
  -webkit-font-smoothing: antialiased;
}

/* O tema antigo pintava o fundo com o gradiente Noite. */
body::before { display: none !important; }

/* ===============================================================
   2. ESQUELETO
   =============================================================== */
.ay-tela {
  max-width: 390px;              /* a largura do mockup */
  margin-inline: auto;
  padding: 0 var(--ay-margem);
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}
.ay-tela--limpa { padding-bottom: 2.5rem; }

.ay-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 20px 0 12px;
}
.ay-marca { display: block; width: auto; }

/* 34pt → 43px, e é o mesmo tamanho da pílula da barra inferior. */
.ay-avatar {
  width: 43px; height: 43px; border-radius: var(--r-pill);
  background: var(--ice); color: var(--ink);
  display: grid; place-items: center; flex: none;
  font-size: var(--fs-card); font-weight: 600; letter-spacing: .02em;
  text-decoration: none;
}

.ay-saudacao { margin: 14px 0 0; }
.ay-saudacao h1 {
  margin: 0; font-size: var(--fs-h1); line-height: 1.14;
  font-weight: 600; letter-spacing: -.02em; color: var(--ink);
}
.ay-saudacao p { margin: 8px 0 0; font-size: var(--fs-data); color: var(--ink-2); }

.ay-selo {
  display: block; margin: 20px 0 10px;
  font-size: var(--fs-mini); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.ay-titulo {
  margin: 0; font-size: var(--fs-titulo); line-height: 1.18;
  font-weight: 600; letter-spacing: -.02em; color: var(--ink);
}
.ay-sub { margin: 10px 0 0; font-size: var(--fs-corpo); line-height: 1.5; color: var(--ink-2); }

/* ===============================================================
   3. FAIXA NAVY — 274 × 69pt, raio 14pt, respiro 14pt
   =============================================================== */
.ay-faixa {
  margin: 20px 0 0; padding: 18px;
  min-height: 88px;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--ink); color: var(--sobre-ink); border-radius: var(--r-lg);
}
.ay-faixa__selo {
  display: block; font-size: var(--fs-mini); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sobre-ink);
}
.ay-faixa__valor {
  display: block; margin-top: 9px;
  font-size: var(--fs-faixa); font-weight: 600; letter-spacing: -.01em;
}

/* ===============================================================
   4. AS SEIS ROTINAS — cards de 132 × 79pt, raio 13pt
   =============================================================== */
.ay-secao { margin: 22px 0 12px; font-size: var(--fs-secao); font-weight: 600; color: var(--ink); }

.ay-rotinas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--ay-gap-col); row-gap: var(--ay-gap-lin);
}
.ay-rotina {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 101px; padding: var(--ay-card-pad);
  background: #fff; border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  transition: transform var(--dur-fast) var(--ease-out);
}
.ay-rotina:active { transform: scale(.99); }

/* Rotina com cadastro ativo ganha a superfície Ice Blue — sem percentual e
   sem barra de progresso. O documento parava aí; em 16/09 o Rodrigo pediu
   também o check verde no canto, porque só o Ice Blue não bastava para a
   pessoa perceber de relance que aquela rotina já está configurada.
   O verde é o --verde-ok do próprio sistema, não uma cor nova. */
.ay-rotina--ativa { background: var(--ice); }

.ay-rotina__topo   { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ay-rotina__ok {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--verde-ok); color: #fff;
}
.ay-rotina__ok svg { stroke-width: 2.5; }

.ay-rotina__icone  { display: block; color: var(--ink); }
.ay-rotina__texto  { display: block; margin-top: auto; padding-top: 10px; }
.ay-rotina__nome   { display: block; font-size: var(--fs-card); font-weight: 600; color: var(--ink); }
.ay-rotina__estado { display: block; margin-top: 5px; font-size: var(--fs-mini); font-weight: 400; color: var(--ink); }

/* ===============================================================
   5. BOTÕES — o primário é a faixa navy em forma de botão
   =============================================================== */
/* ⚠️ O RÓTULO FICA À ESQUERDA, não centralizado. É assim em todos os botões
   do documento ("Começar", "Continuar configuração", "Revisar e ativar",
   "+ Registrar atividade"), e é o que dá a leitura de lista ao empilhá-los.
   Medido: botão de 274 × 45pt, texto começando a 15pt da borda. */
.ay-btn {
  display: flex; align-items: center; justify-content: flex-start; gap: .5rem;
  width: 100%; min-height: 57px; padding: 15px 19px;
  border: 0; border-radius: var(--r-md); cursor: pointer;
  font-family: var(--fonte); font-size: var(--fs-corpo); font-weight: 500;
  text-decoration: none; text-align: left;
  background: var(--ink); color: var(--sobre-ink);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
/* Só o link de rodapé ("Já tenho conta • Entrar") é centralizado. */
.ay-btn--centro { justify-content: center; text-align: center; }
.ay-btn:hover  { opacity: .92; }
.ay-btn:active { transform: scale(.99); }
.ay-btn[disabled], .ay-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

.ay-btn--secundario { background: var(--ice); color: var(--ink); }
.ay-btn--vazio      { background: transparent; color: var(--ink); border: 1px solid var(--linha-forte); }
.ay-btn--texto {
  background: transparent; color: var(--ink-2); min-height: var(--toque);
  font-weight: 400; font-size: var(--fs-corpo);
}
.ay-btn--texto:hover { color: var(--ink); }

.ay-acoes { display: grid; gap: 10px; margin-top: 24px; }

/* ===============================================================
   6. CAMPOS

   "Rótulos permanecem visíveis após digitar" — o rótulo é um <label> acima do
   campo, nunca um placeholder fazendo as vezes dele. E "Erros próximos ao
   campo": a mensagem nasce colada embaixo, não num alerta no topo da página.
   =============================================================== */
.ay-campo { display: block; margin-top: 18px; }
.ay-campo__rotulo {
  display: block; margin-bottom: 8px;
  font-size: var(--fs-card); font-weight: 400; color: var(--ink);
}
.ay-campo input[type="text"],
.ay-campo input[type="email"],
.ay-campo input[type="tel"],
.ay-campo input[type="password"],
.ay-campo input[type="number"],
.ay-campo input[type="time"],
.ay-campo input[type="date"],
.ay-campo select,
.ay-campo textarea {
  width: 100%; min-height: 54px; padding: 15px 16px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--linha); border-radius: var(--r-md);
  font-family: var(--fonte); font-size: 16px;  /* 16px: não deixa o iOS dar zoom */
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ay-campo input::placeholder { color: #9AA6B5; }
.ay-campo input:focus-visible,
.ay-campo select:focus-visible,
.ay-campo textarea:focus-visible {
  outline: none; border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-soft);
}
.ay-campo__ajuda { display: block; margin-top: 8px; font-size: var(--fs-mini); color: var(--ink-2); line-height: 1.5; }
.ay-campo__erro {
  display: flex; gap: 6px; align-items: flex-start; margin-top: 8px;
  font-size: var(--fs-mini); font-weight: 500; color: var(--alerta-cor);
}
.ay-campo--erro input, .ay-campo--erro select { border-color: var(--alerta-cor); }

/* Código de verificação: campo único, que aceita colar. */
.ay-codigo input {
  font-size: 26px !important; font-weight: 600;
  letter-spacing: .42em; text-indent: .42em; text-align: center;
  font-variant-numeric: tabular-nums;
}

.ay-caixa {
  background: #fff; border-radius: var(--r-md);
  padding: 16px 18px; margin-top: 16px;
}
.ay-caixa--ice { background: var(--ice); }
.ay-caixa p { margin: 0; font-size: var(--fs-corpo); line-height: 1.5; color: var(--ink); }
.ay-caixa p + p { margin-top: 8px; }

.ay-aviso {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 16px; margin-top: 16px; border-radius: var(--r-md);
  font-size: var(--fs-card); line-height: 1.5;
}
.ay-aviso--erro { background: var(--alerta-soft); color: #8E1F33; }
.ay-aviso--ok   { background: var(--vida-soft);   color: #11624A; }
.ay-aviso--nota { background: var(--ice);         color: var(--ink); }

/* ===============================================================
   7. PROGRESSO

   Signal Blue aparece AQUI, e é o lugar para o qual ele foi reservado:
   "progresso e estados ativos".
   =============================================================== */
.ay-progresso { display: flex; gap: 6px; margin: 20px 0; }
.ay-progresso span { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--ice); }
.ay-progresso span.feito { background: var(--signal); }

.ay-passo-conta { font-size: var(--fs-card); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ===============================================================
   8. CHECKLIST — tela 15
   =============================================================== */
.ay-lista { display: grid; gap: 8px; margin-top: 18px; }
.ay-lista__item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 16px 18px;
  background: #fff; border-radius: var(--r-md);
  text-decoration: none; color: inherit;
}
.ay-lista__item--feito { background: var(--ice); }
.ay-lista__nome   { font-size: var(--fs-corpo); font-weight: 500; color: var(--ink); }
.ay-lista__estado { font-size: var(--fs-card); font-weight: 400; color: var(--ink); }
.ay-conta { margin-top: 16px; font-size: var(--fs-data); color: var(--ink); }

/* ===============================================================
   9. AGENDA DO DIA — tela 22
   =============================================================== */
.ay-agenda { margin-top: 14px; }
.ay-agenda__item {
  display: grid; grid-template-columns: 62px 16px 1fr;
  align-items: start; gap: 10px; padding-bottom: 22px;
}
.ay-agenda__hora {
  font-size: var(--fs-card); color: var(--ink-2); padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
/* O trilho precisa de align-self:stretch para virar a LINHA CONTÍNUA do
   documento. Sem isso ele herda o align-items:start da linha, encolhe para a
   altura do próprio conteúdo (zero) e sobram só os pontos soltos. */
.ay-agenda__trilho {
  position: relative; justify-self: center; align-self: stretch;
  width: 1px; background: var(--linha);
  margin-bottom: -22px;          /* emenda com a linha seguinte */
}
.ay-agenda__item:last-child .ay-agenda__trilho { background: transparent; }
.ay-agenda__ponto {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--linha-forte);
}
.ay-agenda__item--proxima .ay-agenda__ponto { background: var(--signal); width: 10px; height: 10px; }
.ay-agenda__nome   { font-size: var(--fs-corpo); font-weight: 600; color: var(--ink); }
.ay-agenda__estado { margin-top: 3px; font-size: var(--fs-card); color: var(--ink-2); }

/* ===============================================================
   10. BARRA INFERIOR — 290 × 45pt, raio 13pt; pílula 60 × 34pt, raio 9pt

   Os quatro itens têm a MESMA cor de texto; quem marca o ativo é a pílula
   Ice Blue. É assim no documento.
   =============================================================== */
.ay-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: center;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--luminous) 70%, rgb(247 250 252 / 0));
  pointer-events: none;
}
.ay-nav__lista {
  display: flex; width: 100%; max-width: 370px; gap: 4px;
  padding: 5px; background: #fff; border-radius: var(--r-md);
  box-shadow: var(--shadow-card); pointer-events: auto;
}
.ay-nav a {
  flex: 1; min-height: 43px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); text-decoration: none;
  font-size: var(--fs-card); font-weight: 500; color: var(--ink);
}
.ay-nav a.esta-ativo { background: var(--ice); }

/* ===============================================================
   11. AULA GUIADA — telas 09 a 14

   "O componente explicado fica em destaque; os demais ficam suavizados."
   =============================================================== */
.ay-aula__palco { margin-top: 16px; }
.ay-aula__suave { opacity: .3; pointer-events: none; }
.ay-aula__foco {
  background: #fff; border-radius: var(--r-md);
  padding: 16px 18px; box-shadow: var(--shadow-card);
}
.ay-aula__selo {
  display: block; font-size: var(--fs-mini); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.ay-aula__valor { display: block; margin-top: 8px; font-size: var(--fs-faixa); font-weight: 600; color: var(--ink); }
.ay-aula__nota  { display: block; margin-top: 10px; font-size: var(--fs-mini); color: var(--ink-2); line-height: 1.5; }
.ay-aula__rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linha);
}

/* ===============================================================
   12. REGISTRO RÁPIDO — telas 23 e 24
   =============================================================== */
.ay-chips { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 16px; }
.ay-chip {
  position: relative;
  min-height: 54px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--r-md);
  font-size: var(--fs-corpo); font-weight: 500; color: var(--ink); cursor: pointer;
}
/* "Uma opção selecionada fica identificada visualmente E POR TEXTO": o
   :checked pinta, e o rótulo ganha a palavra "selecionado" para leitor de
   tela e para quem não distingue a cor. */
.ay-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ay-chip:has(input:checked) { background: var(--signal-soft); border-color: var(--signal); font-weight: 600; }
.ay-chip:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 3px; }
/* A marca da opção escolhida para quem não enxerga a cor: uma palavra
   lida pelo leitor de tela. NÃO é um símbolo desenhado — nenhum dos dois
   documentos põe um ✓ dentro do chip, e acrescentar um seria desenhar
   outra coisa. A cor continua sendo o sinal visual. */
.ay-chip:has(input:checked) .ay-chip__txt::after {
  content: " (selecionado)";
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.ay-total { margin-top: 18px; font-size: 26px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.ay-total small { font-size: var(--fs-card); font-weight: 400; color: var(--ink-2); }

/* ===============================================================
   13. CONVERSA SIMULADA — tela 07
   =============================================================== */
.ay-conversa { display: grid; gap: 8px; margin-top: 16px; }
.ay-balao {
  max-width: 85%; padding: 12px 14px; border-radius: var(--r-md);
  font-size: var(--fs-card); line-height: 1.5;
}
.ay-balao--dela { justify-self: end; background: var(--ice); color: var(--ink); border-bottom-right-radius: 4px; }
.ay-balao--ayra { justify-self: start; background: #fff; border-bottom-left-radius: 4px; box-shadow: var(--shadow-card); }

/* ===============================================================
   14. PASSOS NUMERADOS — tela 06
   =============================================================== */
.ay-passos { display: grid; gap: 16px; margin-top: 18px; padding: 0; list-style: none; }
.ay-passos li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.ay-passos b {
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: var(--r-pill); background: var(--ice); color: var(--ink);
  font-size: var(--fs-card); font-weight: 600;
}
.ay-passos strong { display: block; font-size: var(--fs-corpo); font-weight: 600; color: var(--ink); }
.ay-passos span   { display: block; margin-top: 3px; font-size: var(--fs-card); color: var(--ink-2); line-height: 1.5; }

/* ===============================================================
   15. MOVIMENTO REDUZIDO E TEXTO AMPLIADO
   =============================================================== */
@media (prefers-reduced-motion: reduce) {
  .ay-btn, .ay-rotina { transition: none; }
  .ay-btn:active, .ay-rotina:active { transform: none; }
}

/* "A composição não reduz fontes para espremer a página inteira na tela."
   Em telas muito estreitas o grid de dois vira um — a fonte não encolhe. */
@media (max-width: 340px) {
  .ay-rotinas { grid-template-columns: 1fr; }
  .ay-chips   { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ===============================================================
   16. ROTINA DE ÁGUA — "AYRA WELLNESS / ROTINA DE ÁGUA / UX V1"

   ⚠️ MESMA REGRA DA PARTE DE CIMA: todo número daqui foi MEDIDO nos
   objetos vetoriais do PDF da rotina de água, não estimado. Os valores em
   pt aparecem no comentário para conferência; a escala é a mesma 1,2745
   do mockup (306pt → 390px).

   Conferência que fecha sozinha: o cartão de volume mede 274 × 161pt, o
   botão 274 × 45pt e a barra de progresso 244 × 8pt — os mesmos 274pt de
   largura útil da primeira entrega, o que confirma que os dois documentos
   desenham a mesma tela.
   =============================================================== */

/* ---- Cores medidas neste documento ---- */
:root,
[data-theme="black"],
[data-theme="white"],
[data-theme="wellness"] {
  /* Areia: o cartão de pausa (tela 14) e o de pendência (tela 23). É a
     terceira superfície do sistema, e a única quente — serve justamente
     para dizer "isto está suspenso" sem usar vermelho de erro. */
  --areia:  #E9E3DB;
  /* Trilho da barra de progresso. Não é o Ice: é mais escuro, para o
     preenchimento Signal ficar legível mesmo em 1% (tela 07 com 0%). */
  --trilho: #C9D6E6;
}

/* ===============================================================
   16.1 CABEÇALHO DO MÓDULO — wordmark + "Ajustes"
   Telas 07, 08. 11pt/500 Ink, à direita, sem caixa.
   =============================================================== */
.ay-topo__acao {
  font-size: var(--fs-data); font-weight: 500; color: var(--ink);
  text-decoration: none; padding: 10px 2px; min-height: var(--toque);
  display: inline-flex; align-items: center;
}
.ay-topo__acao:hover { opacity: .75; }

/* O título do módulo é 29pt — maior que o das telas de cadastro (23pt).
   "Água" é o nome do lugar, não a pergunta da etapa. */
.ay-titulo--modulo { font-size: 37px; line-height: 1.1; margin-top: 10px; }

/* "Hoje • 05 set    Histórico" — 11pt/400 Ink-2, logo abaixo do título. */
.ay-subnav {
  display: flex; align-items: center; gap: 20px;
  margin-top: 12px; font-size: var(--fs-data); color: var(--ink-2);
}
.ay-subnav a { color: var(--ink-2); text-decoration: none; }
.ay-subnav a:hover { color: var(--ink); }

/* ===============================================================
   16.2 CARTÃO DE VOLUME — 274 × 161pt, raio 13pt, respiro 16pt
   O centro da experiência: telas 07, 08, 10, 14, 17, 19, 22, 23.
   =============================================================== */
.ay-volume {
  margin-top: 22px; padding: 26px 20px 24px;
  background: var(--ice); border-radius: var(--r-md);
}
.ay-volume--areia  { background: var(--areia); }
.ay-volume--branco { background: #fff; }

/* A linha do rótulo: gota + "VOLUME REGISTRADO" (10pt/600, caixa alta). */
.ay-volume__topo { display: flex; align-items: center; gap: 12px; }
.ay-volume__topo svg { width: 26px; height: 27px; flex: none; color: var(--ink); }
.ay-volume__selo {
  font-size: var(--fs-card); font-weight: 600; color: var(--ink);
  letter-spacing: .06em; text-transform: uppercase;
}
/* A variante em caixa baixa das telas 19, 22 e 23 ("Total confirmado",
   "Valor atual", "Último total confirmado"): 11pt/500, sem caixa alta. */
.ay-volume__rotulo {
  display: block; font-size: var(--fs-data); font-weight: 500; color: var(--ink);
}

/* 32pt no dashboard, 28pt nas telas de lista. Peso 600, quase sem
   entrelinha: o número é o assunto. */
.ay-volume__numero {
  display: block; margin-top: 12px;
  font-size: 41px; font-weight: 600; line-height: 1.05;
  letter-spacing: -.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ay-volume--menor .ay-volume__numero { font-size: 36px; }
.ay-volume__sub {
  display: block; margin-top: 11px;
  font-size: var(--fs-corpo); color: var(--ink);
}
.ay-volume__sub--fraco { color: var(--ink-2); font-size: var(--fs-card); }

/* ===============================================================
   16.3 BARRA DE PROGRESSO — 244 × 8pt, trilho C9D6E6, preenchimento Signal

   "O total pode superar 100%; a barra visual para em 100%." O número
   acima dela guarda a verdade (103,75%); a barra guarda a proporção.
   =============================================================== */
.ay-barra {
  margin-top: 24px; height: 10px; border-radius: var(--r-pill);
  background: var(--trilho); overflow: hidden;
}
.ay-barra > span {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: var(--signal);
}
/* A da tela 17, que vive fora do cartão. */
.ay-barra--solta { margin-top: 20px; }

/* ===============================================================
   16.4 BLOCO DE DADO — "Próximo lembrete / 14:15 • 100 ml / WhatsApp…"
   Telas 07 e 08. 12pt/600, 16pt/600 e 10pt/400.
   =============================================================== */
.ay-bloco { margin-top: 30px; }
.ay-bloco__rotulo { display: block; font-size: var(--fs-corpo); font-weight: 600; color: var(--ink); }
.ay-bloco__valor  { display: block; margin-top: 8px; font-size: 20px; font-weight: 600; color: var(--ink); }
.ay-bloco__nota   { display: block; margin-top: 10px; font-size: var(--fs-card); color: var(--ink-2); }

/* ===============================================================
   16.5 BARRA INFERIOR DO MÓDULO — Hoje · Histórico · Evolução

   ⚠️ NÃO TEM CARTÃO E NÃO TEM PÍLULA, ao contrário da barra global de
   quatro itens. No documento são três rótulos soltos, centralizados, 10pt
   com a MESMA cor. Foi conferido ampliando a página: não há fundo, não há
   marcador do item ativo.

   Quem diz em que tela você está é o título grande logo acima ("Água",
   "Seus registros", "Sua evolução"); para leitor de tela, o aria-current
   do item. Pintar um ativo aqui seria desenhar outra coisa.
   =============================================================== */
.ay-navmod {
  display: flex; justify-content: center; gap: 20px;
  margin: 34px 0 6px;
}
.ay-navmod a {
  font-size: var(--fs-card); font-weight: 500; color: var(--ink);
  text-decoration: none; padding: 12px 6px;
  min-height: var(--toque); display: inline-flex; align-items: center;
}
.ay-navmod a:hover { opacity: .75; }

/* ===============================================================
   16.6 PASSOS DO TUTORIAL — tela 02
   Cartões Ice empilhados: "01  Configure" + a explicação.
   =============================================================== */
.ay-guia { display: grid; gap: 12px; margin-top: 22px; }
.ay-guia__item { padding: 18px 20px; background: var(--ice); border-radius: var(--r-md); }
.ay-guia__titulo { display: block; font-size: 18px; font-weight: 600; color: var(--ink); }
.ay-guia__titulo b { font-weight: 600; margin-right: 8px; }
.ay-guia__texto { display: block; margin-top: 10px; font-size: var(--fs-corpo); color: var(--ink); }

/* ===============================================================
   16.7 SELETOR DE UNIDADE — 132 × 40pt cada, gap 10pt (tela 03)
   O escolhido é Navy; o outro é Ice. Dois estados, sem terceiro.
   =============================================================== */
.ay-seg { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; margin-top: 16px; }
.ay-seg label {
  position: relative; min-height: 51px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ice); color: var(--ink); border-radius: var(--r-md);
  font-size: var(--fs-corpo); font-weight: 500; cursor: pointer;
}
.ay-seg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ay-seg label:has(input:checked) { background: var(--ink); color: var(--sobre-ink); }
.ay-seg label:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 3px; }

/* ===============================================================
   16.8 DIAS DA SEMANA — 7 quadrados de 33 × 34pt (tela 05)
   =============================================================== */
.ay-dias { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.ay-dias label {
  position: relative; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--r-sm);
  font-size: var(--fs-corpo); font-weight: 500; color: var(--ink-2); cursor: pointer;
}
.ay-dias input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ay-dias label:has(input:checked) {
  background: var(--ice); border-color: var(--ice); color: var(--ink); font-weight: 600;
}
.ay-dias label:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }

/* A faixa de horas: dois campos dentro de UMA caixa, com "até" no meio.
   274 × 44pt, como qualquer outro campo (tela 05). */
.ay-faixa-horas {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding: 8px 16px; min-height: 56px;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--r-md);
}
.ay-faixa-horas input {
  border: 0 !important; background: transparent !important; padding: 6px 0 !important;
  min-height: auto !important; width: auto !important; flex: 1;
  font-size: 16px; color: var(--ink);
}
.ay-faixa-horas span { font-size: var(--fs-corpo); color: var(--ink-2); flex: none; }

/* ===============================================================
   16.9 RESUMO DA REVISÃO — tela 06
   Um cartão Ice com pares rótulo/valor. Nada de tabela.
   =============================================================== */
.ay-resumo { margin-top: 22px; padding: 22px 20px; background: var(--ice); border-radius: var(--r-md); }
.ay-resumo dt { font-size: var(--fs-card); color: var(--ink-2); }
.ay-resumo dd { margin: 6px 0 0; font-size: var(--fs-corpo); font-weight: 500; color: var(--ink); }
.ay-resumo div + div { margin-top: 18px; }

/* Os dois links soltos da tela 06: "Editar dados   Salvar rascunho". */
.ay-linha-acoes { display: flex; gap: 26px; margin-top: 22px; flex-wrap: wrap; }
.ay-linha-acoes button,
.ay-linha-acoes a {
  background: none; border: 0; padding: 10px 0; cursor: pointer;
  font-family: var(--fonte); font-size: var(--fs-corpo); font-weight: 500;
  color: var(--ink); text-decoration: none;
  min-height: var(--toque); display: inline-flex; align-items: center;
}
.ay-linha-acoes button:hover, .ay-linha-acoes a:hover { opacity: .7; }

/* ===============================================================
   16.10 OPÇÕES EMPILHADAS — tela 13 ("Pausar 30 minutos", …)
   Cartões Ice de altura de botão, rótulo à esquerda. 274 × 45pt.
   =============================================================== */
.ay-opcoes { display: grid; gap: 14px; margin-top: 26px; }
.ay-opcoes button, .ay-opcoes a {
  display: flex; align-items: center; justify-content: flex-start;
  width: 100%; min-height: 57px; padding: 15px 19px;
  border: 0; border-radius: var(--r-md); cursor: pointer;
  background: var(--ice); color: var(--ink);
  font-family: var(--fonte); font-size: var(--fs-corpo); font-weight: 500;
  text-align: left; text-decoration: none;
}
.ay-opcoes button:hover, .ay-opcoes a:hover { opacity: .88; }

/* ===============================================================
   16.11 CARTÃO DE PAUSA E DE PENDÊNCIA — telas 14 e 23
   Superfície areia. "Pausa até 15:07" / "250 ml pendentes".
   =============================================================== */
.ay-areia {
  margin-top: 18px; padding: 20px; border-radius: var(--r-md);
  background: var(--areia); color: var(--ink);
}
.ay-areia__titulo { display: block; font-size: 20px; font-weight: 600; }
.ay-areia__texto { display: block; margin-top: 10px; font-size: var(--fs-corpo); color: var(--ink); line-height: 1.5; }

/* ===============================================================
   16.12 LISTA DE REGISTROS — tela 19
   hora (11pt) · volume (14pt/600) · origem (9pt Ink-2), separados por
   uma linha. Colunas medidas: 0 / 68pt / 177pt.
   =============================================================== */
.ay-registros { margin-top: 24px; }
.ay-registros__item {
  display: grid; grid-template-columns: 87px 1fr auto;
  align-items: baseline; gap: 10px;
  padding: 18px 0; border-bottom: 1px solid var(--linha);
  color: inherit; text-decoration: none;
}
.ay-registros__item:first-child { border-top: 1px solid var(--linha); }
.ay-registros__hora { font-size: var(--fs-data); color: var(--ink); font-variant-numeric: tabular-nums; }
.ay-registros__ml { font-size: 18px; font-weight: 600; color: var(--ink); }
.ay-registros__origem { font-size: var(--fs-mini); color: var(--ink-2); }
.ay-registros__vazio { padding: 22px 0; font-size: var(--fs-corpo); color: var(--ink-2); line-height: 1.5; }

/* ===============================================================
   16.13 GRÁFICO DE 7 DIAS — tela 20

   Medidas do documento: cartão 274 × 173pt; barras de 22pt de largura a
   cada 35pt; o nível da meta fica a 76pt do chão. As barras PODEM passar
   da linha da meta — no exemplo do próprio PDF, o dia de 4,15 L passa.
   "Não apagar o excedente."
   =============================================================== */
.ay-graf { margin-top: 22px; padding: 18px; background: var(--ice); border-radius: var(--r-md); }
.ay-graf__selo {
  display: block; font-size: var(--fs-mini); font-weight: 600; color: var(--ink);
  letter-spacing: .06em; text-transform: uppercase;
}
.ay-graf__palco {
  position: relative; margin-top: 20px; height: 124px;
  display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); align-items: end;
}
/* A linha da meta, com o rótulo encostado nela pela direita. */
.ay-graf__meta { position: absolute; left: 0; right: 0; height: 1px; background: var(--ink-2); }
.ay-graf__meta b {
  position: absolute; right: 0; bottom: 4px;
  font-size: var(--fs-mini); font-weight: 400; color: var(--ink);
}
.ay-graf__col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.ay-graf__barra { width: 28px; background: var(--signal); border-radius: 2px; }
.ay-graf__sd { margin-bottom: 26px; font-size: var(--fs-mini); color: var(--ink); }
.ay-graf__eixo {
  display: grid; grid-template-columns: repeat(7, minmax(0,1fr));
  margin-top: 6px; text-align: center;
}
.ay-graf__eixo span { font-size: var(--fs-mini); color: var(--ink); font-variant-numeric: tabular-nums; }

/* ===============================================================
   16.14 MÉTRICAS — "3,63 L · média em 6 dias com dados"
   Valor grande à esquerda (23pt na primeira, 18pt nas outras), descrição
   ao lado, alinhadas pela base.
   =============================================================== */
.ay-metricas { margin-top: 26px; display: grid; gap: 22px; }
.ay-metrica { display: grid; grid-template-columns: 144px 1fr; align-items: baseline; gap: 10px; }
.ay-metrica b { font-size: 23px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ay-metrica--destaque b { font-size: 29px; }
.ay-metrica span { font-size: var(--fs-data); color: var(--ink); }
.ay-rodape-nota { margin-top: 30px; font-size: var(--fs-card); color: var(--ink-2); }

/* ===============================================================
   16.15 LISTA DE AJUSTES — tela 21
   Itens Ice empilhados, rótulo à esquerda; é a mesma forma das opções.
   =============================================================== */
.ay-ajustes { display: grid; gap: 12px; margin-top: 22px; }
.ay-ajustes a {
  display: flex; align-items: center; justify-content: flex-start;
  min-height: 54px; padding: 15px 19px;
  background: var(--ice); border-radius: var(--r-md);
  font-size: var(--fs-corpo); color: var(--ink); text-decoration: none;
}
.ay-ajustes a:hover { opacity: .88; }
.ay-perigo { margin-top: 34px; }
.ay-perigo h2 { margin: 0; font-size: var(--fs-corpo); font-weight: 600; color: var(--ink); }
.ay-perigo p { margin: 12px 0 0; font-size: var(--fs-corpo); color: var(--ink-2); line-height: 1.5; }

/* Os chips de quantidade rápida (tela 09) têm o rótulo À ESQUERDA, com
   12pt de recuo — não centralizado. Medido: chip em x=67, texto em x=79. */
.ay-chip {
  justify-content: flex-start; padding-left: 15px;
  background: var(--ice); border-color: var(--ice); min-height: 55px;
}
.ay-chip:has(input:checked) { background: var(--signal-soft); border-color: var(--signal); }

/* Nota de rodapé de campo, no tamanho do documento (11pt). */
.ay-nota { display: block; margin-top: 18px; font-size: var(--fs-data); color: var(--ink-2); line-height: 1.5; }

/* Um link de texto solto, alinhado à esquerda com o resto da coluna
   ("Alterar data e horário", "Desfazer registro"). 11pt/500 Ink. */
.ay-link {
  display: inline-flex; align-items: center; min-height: var(--toque);
  padding: 10px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--fonte); font-size: var(--fs-data); font-weight: 500;
  color: var(--ink); text-decoration: none;
}
.ay-link:hover { opacity: .7; }

/* ===============================================================
   16.16 A AÇÃO PRINCIPAL ENCOSTA NO RODAPÉ

   Medido no documento: em TODAS as telas de cadastro e de registro o
   botão está no mesmo lugar — y=693 numa tela que vai de 166 a 775. Não é
   coincidência de conteúdo curto; é a composição. O conteúdo sobe, o
   botão fica embaixo, e é assim que o polegar alcança a ação sem mudar a
   pegada do aparelho.

   Com conteúdo longo o espaçador encolhe até o mínimo e tudo volta a
   fluir normalmente — nada some e nada fica sobreposto.
   =============================================================== */
.ay-tela--fundo {
  display: flex; flex-direction: column;
  /* vh primeiro, svh depois: o segundo é o certo em telefone (desconta a
     barra do navegador), mas quem não conhece a unidade ignora a linha e
     fica com o vh — e não com altura nenhuma. */
  min-height: 100vh;
  min-height: 100svh;
}

/* A barra do módulo encosta no rodapé — no documento ela está no chão da
   tela nas seis telas que a mostram. O espaço livre é absorvido pelo
   PRIMEIRO bloco marcado com `ay-fim`, e não pela barra: assim as ações
   descem junto com ela, em vez de ficarem sozinhas no meio da tela. */
.ay-tela--fundo > .ay-navmod:only-of-type { margin-top: auto; }
.ay-tela--fundo > .ay-fim ~ .ay-navmod   { margin-top: 34px; }

/* Nas telas sem barra do módulo, `ay-fim` diz qual bloco vai para baixo. */
.ay-tela--fundo > .ay-fim { margin-top: auto; }

/* Um formulário que ocupa a tela: os campos ficam no alto, o botão no pé.
   Sem isto o botão subiria junto com o último campo e sobraria um vazio
   embaixo — o contrário do que o documento desenha. */
.ay-tela--fundo > .ay-forma { display: flex; flex-direction: column; flex: 1 1 auto; }
.ay-tela--fundo > .ay-forma > .ay-fim { margin-top: auto; }

/* ===============================================================
   16.17 O DESLOCAMENTO DE 232px QUE SOBROU DO DESENHO ANTIGO

   O app.css tem, desde antes desta identidade, uma regra de desktop que
   reserva espaço para uma SIDEBAR de 232px à esquerda:

       @media (min-width: 64rem) { .tela-app { padding-left: var(--lateral); } }

   Aquela sidebar é a `.nav-inferior`, que acima de 1024px deixava de ser
   barra e virava coluna fixa. O sistema WELLNESS não tem sidebar: a
   navegação é a pílula flutuante `.ay-nav`, centralizada na janela em
   qualquer largura.

   O resultado era o menu desalinhado da página: o conteúdo ficava
   centralizado nos 1208px que sobravam depois do recuo (centro em 836px
   numa janela de 1440), e a barra, que é `position: fixed`, centralizava
   nos 1440 inteiros (centro em 720). 116px de diferença — visível a olho
   nu, e só no desktop, que é por onde ninguém olhou até agora.

   A correção não pode ser tirar o recuo de todo mundo: OITO telas antigas
   (evolução, perfil, treinos, metas, comunidade, publicar, saúde, painel)
   ainda desenham a `.nav-inferior` de verdade, e nelas o recuo é o que
   impede o conteúdo de passar por baixo da coluna. Então a regra abaixo
   devolve o recuo a zero SÓ onde a sidebar não existe — que é a pergunta
   certa, e a única que não depende de alguém lembrar de marcar a tela.

   Quando as oito migrarem para a barra nova, este bloco inteiro sai, e a
   regra do app.css junto.
   =============================================================== */
@media (min-width: 64rem) {
  .tela-app:not(:has(.nav-inferior)) { padding-left: 0; }
}

@media (max-width: 340px) {
  .ay-metrica { grid-template-columns: 1fr; gap: 2px; }
  .ay-graf__barra { width: 20px; }
}

/* Os campos de hora e data do documento aparecem como TEXTO — "08:00 até
   22:00", "05/09/2026" —, sem o relógio nem o calendário que o navegador
   desenha por conta própria. Escondido o ícone, tocar no campo continua
   abrindo o seletor nativo do aparelho; só o enfeite sai. */
.ay-faixa-horas input::-webkit-calendar-picker-indicator,
.ay-campo input[type="date"]::-webkit-calendar-picker-indicator,
.ay-campo input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0; width: 0; padding: 0; margin: 0;
}

/* ===============================================================
   17. SUPLEMENTAÇÃO — "AYRA WELLNESS / SUPLEMENTAÇÃO / UX V1"

   A paleta deste documento é EXATAMENTE a mesma da rotina de água —
   conferido amostrando os objetos vetoriais das 18 páginas: Ink #0E1F33,
   Ice #DDEAF7, Luminous #F7FAFC, Signal #2F6BFF, trilho #C9D6E6 e areia
   #E9E3DB, sem nenhuma cor nova. Então esta seção não cria token; cria só
   as formas que este módulo tem e o outro não.

   As medidas, como sempre, foram lidas do PDF e estão em pt no comentário.
   =============================================================== */

/* ===============================================================
   17.1 BARRA DO MÓDULO COM PÍLULA — cinco áreas

   ⚠️ DIFERENTE DA BARRA DA ÁGUA, e de propósito: lá são três rótulos
   soltos, sem cartão; aqui é uma barra branca de 288 × 34pt com uma pílula
   Ice de 55 × 24pt marcando a área atual. Os dois documentos desenham
   coisas diferentes, e cada um manda no seu módulo.

   A pílula (24pt → 31px) é MENOR que o alvo de toque exigido, então quem
   recebe o toque é o link inteiro (43px, a altura da barra) e a pílula é
   só a marca visual dentro dele. Assim o desenho é o do documento e o alvo
   é o do requisito de acessibilidade.
   =============================================================== */
.ay-navsup {
  display: flex; gap: 2px;
  width: 100%; max-width: 367px;
  margin: 30px auto 4px;
  padding: 5px;
  background: #fff; border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.ay-navsup a {
  flex: 1; min-height: 43px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--ink);
}
.ay-navsup a span {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 31px; border-radius: var(--r-sm);
  font-size: var(--fs-mini); font-weight: 500; line-height: 1;
}
.ay-navsup a[aria-current] span { background: var(--ice); }
.ay-navsup a:hover span { opacity: .7; }

/* O "+" do cabeçalho: 20pt/500, à direita, sem caixa (telas 11 e 12). */
.ay-topo__mais {
  font-size: 25px; font-weight: 500; line-height: 1; color: var(--ink);
  text-decoration: none; min-width: var(--toque); min-height: var(--toque);
  display: inline-flex; align-items: center; justify-content: center;
}
.ay-topo__mais:hover { opacity: .7; }

/* "Suplementação" não cabe nos 29pt do título da água; o documento usa
   24pt nesta tela. É a palavra que manda no tamanho, não o capricho. */
.ay-titulo--sup { font-size: 31px; line-height: 1.12; margin-top: 8px; }

/* ===============================================================
   17.2 PAINEL DE ADESÃO — 274 × 114pt, Navy, raio 14pt

   O número grande e a leitura do denominador lado a lado, e o detalhe
   embaixo. É a faixa navy da primeira entrega crescida para caber a
   conta inteira: "67% · 4 de 6 doses vencidas · 1 não realizada · 1 sem
   confirmação".
   =============================================================== */
.ay-painel {
  margin-top: 24px; padding: 19px;
  background: var(--ink); color: var(--sobre-ink); border-radius: var(--r-lg);
}
.ay-painel__selo {
  display: block; font-size: var(--fs-mini); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--sobre-ink);
}
.ay-painel__linha {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-top: 10px;
}
.ay-painel__valor {
  font-size: 41px; font-weight: 600; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.ay-painel__contexto { font-size: var(--fs-card); font-weight: 500; }
/* "Sem dados" é frase, não número: nos 41px do valor ela fica maior que o
   cartão. A classe `--vazio` é posta pela tela no caso sem divisor. */
.ay-painel__valor--vazio { font-size: 23px; letter-spacing: 0; }
.ay-duo__valor--vazio    { font-size: 19px; }
.ay-painel__rodape {
  display: block; margin-top: 18px;
  font-size: var(--fs-card); font-weight: 400; color: var(--sobre-ink);
}

/* ===============================================================
   17.3 CARTÃO DE DOSE — 274 × 65pt, raio 13pt

   Nome, dose e momento à esquerda; o estado à direita. A superfície diz
   o que está acontecendo: Ice para o que está em dia, areia para o que
   espera resposta — a mesma areia da pausa da água, pela mesma razão
   (suspenso, não errado).
   =============================================================== */
.ay-doses { display: grid; gap: 10px; margin-top: 12px; }
.ay-dose {
  display: block; padding: 13px 17px;
  background: var(--ice); border-radius: var(--r-md);
  text-decoration: none; color: inherit;
}
.ay-dose--espera { background: var(--areia); }
.ay-dose--neutra { background: #fff; }
.ay-dose__nome { display: block; font-size: var(--fs-faixa); font-weight: 600; color: var(--ink); }
.ay-dose__baixo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-top: 8px;
}
.ay-dose__meta   { font-size: var(--fs-card); color: var(--ink-2); }
.ay-dose__estado { font-size: var(--fs-mini); font-weight: 500; color: var(--ink); flex: none; }

/* Título de seção do módulo: 13pt/600 ("Próxima dose"). */
.ay-secao-sup { margin: 22px 0 0; font-size: var(--fs-faixa); font-weight: 600; color: var(--ink); }

/* ===============================================================
   17.4 LINHA DO TEMPO DO DIA — tela 12

   hora à esquerda, produto e estado à direita, separados por um fio.
   Duas linhas na coluna da direita, ao contrário da lista de registros da
   água, que tem três colunas numa linha só.
   =============================================================== */
.ay-tempo { margin-top: 20px; }
.ay-tempo__item {
  display: grid; grid-template-columns: 72px 1fr; gap: 12px;
  padding: 16px 0; border-bottom: 1px solid var(--linha);
  text-decoration: none; color: inherit;
}
.ay-tempo__item:first-child { border-top: 1px solid var(--linha); }
.ay-tempo__hora {
  font-size: var(--fs-card); color: var(--ink-2); padding-top: 3px;
  font-variant-numeric: tabular-nums;
}
.ay-tempo__nome   { display: block; font-size: var(--fs-faixa); font-weight: 600; color: var(--ink); }
.ay-tempo__estado { display: block; margin-top: 5px; font-size: var(--fs-card); color: var(--ink-2); }

/* ===============================================================
   17.5 UNIDADES DA DOSE — tela 04

   Quatro chips numa linha (g · mg · ml · cáps.) e dois maiores na outra
   (sachê · Outros). É um grid de quatro colunas onde os dois últimos
   ocupam duas — foi assim que o documento resolveu, e a proporção some se
   virar uma fila só que quebra sozinha.
   =============================================================== */
.ay-unidades { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.ay-unidades label {
  position: relative; min-height: 51px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ice); color: var(--ink); border-radius: var(--r-md);
  font-size: var(--fs-corpo); font-weight: 500; cursor: pointer; text-align: center;
}
.ay-unidades label.larga { grid-column: span 2; }
.ay-unidades input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ay-unidades label:has(input:checked) { background: var(--ink); color: var(--sobre-ink); }
.ay-unidades label:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 3px; }

/* A prévia da dose montada ("5 g por consumo"), num cartão Ice alto. */
.ay-previa {
  margin-top: 22px; padding: 26px 20px;
  background: var(--ice); border-radius: var(--r-md);
  font-size: 23px; font-weight: 600; color: var(--ink);
}

/* ===============================================================
   17.6 ESCOLHAS EMPILHADAS — telas 05, 06 e 27

   "As escolhas dependentes aparecem progressivamente, sem uma lista
   extensa de combinações." Cada opção é uma linha alta e tocável; a
   escolhida fica Ice, como o card de rotina configurada.
   =============================================================== */
.ay-escolhas { display: grid; gap: 10px; margin-top: 18px; }
.ay-escolhas label {
  position: relative; min-height: 54px; padding: 15px 18px;
  display: flex; align-items: center;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--r-md);
  font-size: var(--fs-corpo); color: var(--ink); cursor: pointer;
}
.ay-escolhas input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ay-escolhas label:has(input:checked) {
  background: var(--ice); border-color: var(--ice); font-weight: 600;
}
.ay-escolhas label:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Antes · Durante · Depois — três colunas iguais (tela 07). */
.ay-tri { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.ay-tri label {
  position: relative; min-height: 51px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ice); color: var(--ink); border-radius: var(--r-md);
  font-size: var(--fs-corpo); font-weight: 500; cursor: pointer;
}
.ay-tri input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ay-tri label:has(input:checked) { background: var(--ink); color: var(--sobre-ink); }
.ay-tri label:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 3px; }

/* ===============================================================
   17.7 INDICADORES DA SEMANA E DA EVOLUÇÃO — telas 23, 24, 31 e 32
   =============================================================== */

/* Dois indicadores lado a lado ("Cobertura · Pontualidade"). */
.ay-duo { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 26px; }
.ay-duo__rotulo { display: block; font-size: var(--fs-card); color: var(--ink-2); }
.ay-duo__valor  { display: block; margin-top: 8px; font-size: 29px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* A comparação entre períodos: valor grande e, ao lado, o antes e a
   variação em pontos percentuais (tela 24). */
.ay-compara { display: grid; gap: 22px; margin-top: 24px; }
.ay-compara__item { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; }
.ay-compara__rotulo { grid-column: 1 / -1; font-size: var(--fs-card); color: var(--ink-2); }
.ay-compara__valor  { font-size: 29px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ay-compara__antes  { font-size: var(--fs-card); color: var(--ink-2); text-align: right; }

/* Adesão por evento: rótulo à esquerda, percentual à direita (tela 32). */
.ay-ranking { margin-top: 22px; }
.ay-ranking__item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 15px 0; border-bottom: 1px solid var(--linha);
}
.ay-ranking__item:first-child { border-top: 1px solid var(--linha); }
.ay-ranking__nome { font-size: var(--fs-corpo); color: var(--ink); }
.ay-ranking__pct  { font-size: var(--fs-faixa); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ===============================================================
   17.8 CHECKLIST DO GRUPO — tela 18

   "Cada produto mantém sua janela e seu próprio estado." A caixa marcada
   muda o fundo e o peso; quem não distingue a cor lê a palavra, que fica
   no próprio rótulo e não num pseudo-elemento decorativo.
   =============================================================== */
.ay-checklist { display: grid; gap: 10px; margin-top: 18px; }
.ay-checklist label {
  position: relative; padding: 15px 18px;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--r-md);
  cursor: pointer;
}
.ay-checklist input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ay-checklist label:has(input:checked) { background: var(--ice); border-color: var(--ice); }
.ay-checklist label:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }
.ay-checklist__nome   { display: block; font-size: var(--fs-corpo); font-weight: 600; color: var(--ink); }
.ay-checklist__estado { display: block; margin-top: 6px; font-size: var(--fs-card); color: var(--ink-2); }

@media (max-width: 340px) {
  .ay-navsup a span { font-size: 10px; }
  .ay-duo { grid-template-columns: 1fr; }
}

/* ===============================================================
   18. PARA REGISTRAR AGORA — o toque único (24/09/2026)

   A pergunta que a notificação fez, repetida no app com os mesmos botões.
   Card branco como os da agenda; os dois botões dividem a largura, com o
   primário em navy (a resposta mais comum) e o outro em Ice Blue. Altura
   mínima de 44px: é o alvo de toque do documento, e aqui ele é o assunto.
   =============================================================== */
.ay-pendentes { display: grid; gap: 10px; margin-top: 12px; }
.ay-pendente {
  background: #fff; border: 1px solid var(--linha); border-radius: var(--r-md);
  padding: 14px 16px;
}
.ay-pendente__topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--ink); text-decoration: none;
}
.ay-pendente__nome    { display: block; font-size: var(--fs-corpo); font-weight: 600; }
.ay-pendente__detalhe { display: block; margin-top: 4px; font-size: var(--fs-card); color: var(--ink-2); }
.ay-pendente__ir      { flex: none; font-size: var(--fs-card); color: var(--ink-2); }
.ay-pendente__acoes   { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ay-pendente__acoes form { margin: 0; }
.ay-pendente__acoes .ay-btn {
  min-height: var(--toque); padding: 10px 12px; justify-content: center; text-align: center;
  font-size: var(--fs-card);
}
@media (max-width: 340px) { .ay-pendente__acoes { grid-template-columns: 1fr; } }

/* ===============================================================
   19. NOTIFICAÇÕES NESTE APARELHO — /notificacoes e o convite do início

   O estado vem do navegador (só ele sabe se ESTE aparelho recebe), então a
   tela nasce com o bloco "verificando" e o push.js troca pelo certo. Sem
   JavaScript, fica a explicação — que é a verdade: sem JS não há push.
   =============================================================== */
.ay-push [data-push-bloco] { display: none; }
.ay-push[data-estado="verificando"] [data-push-bloco="verificando"],
.ay-push[data-estado="ativa"]        [data-push-bloco="ativa"],
.ay-push[data-estado="inativa"]      [data-push-bloco="inativa"],
.ay-push[data-estado="negada"]       [data-push-bloco="negada"],
.ay-push[data-estado="ios_instalar"] [data-push-bloco="ios_instalar"],
.ay-push[data-estado="sem_suporte"]  [data-push-bloco="sem_suporte"] { display: block; }

.ay-push__estado {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-size: var(--fs-card); font-weight: 500; color: var(--ink);
}
.ay-push__ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--linha-forte); }
.ay-push__ponto--ok { background: var(--verde-ok); }
.ay-push__passos { margin: 12px 0 0; padding-left: 20px; font-size: var(--fs-corpo); line-height: 1.6; color: var(--ink); }
.ay-push__passos li + li { margin-top: 4px; }
.ay-push__aparelhos { display: grid; gap: 8px; margin-top: 12px; }
.ay-push__aparelho {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 14px; background: var(--ice); border-radius: var(--r-sm);
  font-size: var(--fs-card); color: var(--ink);
}
.ay-push__aparelho span:last-child { color: var(--ink-2); }

.ay-convite-push { display: none; }
.ay-convite-push.ay-convite-push--ver { display: block; }
.ay-convite-push .ay-caixa { display: flex; gap: 14px; align-items: flex-start; }
.ay-convite-push__texto { flex: 1; }
.ay-convite-push__fechar {
  flex: none; width: var(--toque); height: var(--toque); margin: -10px -10px 0 0;
  border: 0; background: transparent; color: var(--ink-2); font-size: 22px; line-height: 1; cursor: pointer;
}