/* Bella V2 — Porta HOJE (Scrapbook, Lovable 12/05/2026).
 * Polaroid header + "o que cuida" (sticky cards) + "recortes" (timeline) + FAB.
 */

.hoje-screen {
  font-family: var(--font-serif);
  color: var(--foreground);
  max-width: 440px;
  margin: 0 auto;
  /* tokens locais que o redesign usa e que não existem em tokens.css
     (senão `var(--sage-deep)` resolve vazio e some o ✓/borda). */
  --sage-deep: oklch(0.46 0.05 165);
  --peach-ink: oklch(0.4 0.1 45);
}

/* ─── Header padrão (porta-head compartilhado) ────────────────────────────── */
.hoje-header {
  padding: 4px 4px 4px;
}
.polaroid-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.polaroid {
  position: relative;
  transform: rotate(-3deg);
  flex-shrink: 0;
}
.polaroid-tape {
  position: absolute;
  top: -8px; left: 50%;
  width: 48px; height: 12px;
  transform: translateX(-50%) rotate(3deg);
  background: oklch(0.86 0.08 90 / 0.75);
  border-radius: 1px;
  border-left: 1px dashed oklch(0.24 0.03 35 / 0.08);
  border-right: 1px dashed oklch(0.24 0.03 35 / 0.08);
  box-shadow: 0 1px 3px oklch(0.24 0.03 35 / 0.18);
}
.polaroid-frame {
  background: var(--card);
  padding: 5px 5px 8px;
  box-shadow: var(--bella-shadow-card);
}
.polaroid-img,
.polaroid-inicial {
  width: 68px;
  height: 68px;
  background: var(--muted);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}
.polaroid-inicial {
  font-family: var(--font-hand);
  font-size: 40px;
  color: var(--terracotta);
  line-height: 1;
}
.polaroid-meta {
  padding-top: 4px;
  line-height: 1.15;
  flex: 1;
  min-width: 0;
}
.kicker {
  font-family: var(--font-ui);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted-foreground);
  margin: 0;
}
.diario-nome {
  font-family: var(--font-hand);
  font-size: 38px;
  color: var(--foreground);
  line-height: 1;
  margin: 4px 0 0;
  font-weight: 500;
}
.diario-idade {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--muted-foreground);
  margin: 6px 0 0;
}
/* Frase do header (igual às outras portas) — alinha o bloco de texto à altura
   da foto e equilibra a pílula do Assistente IA no topo direito. */
.diario-tag {
  display: inline-block;
  margin-top: 7px;
  font-size: 18px;
}
/* ─── Section heads + kickers ─────────────────────────────────────────────── */
.hoje-section { margin-top: 32px; }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}
.section-title-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.15;
  color: var(--foreground);
  margin: 2px 0 0;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.hand-tag {
  font-family: var(--font-hand);
  font-size: 20px;
  color: var(--terracotta);
  transform: rotate(-2deg);
  display: inline-block;
}

.empty-soft {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted-foreground);
  margin: 8px 0 0;
}

/* ─── BLOCO 1 + 1.5: estado geral (semáforo) + chips (redesign 24/06) ──────── */
/* Topo da Home, sem respiro longo entre si — leitura de estado num relance.    */
.hoje-section#hoje-estado { margin-top: 20px; }
.hoje-section#hoje-chips  { margin-top: 12px; }

/* ─── Pílula de estado geral — T2 (handoff 24/06/2026) ─── */
.hoje-estado {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px;           /* alvo de toque ≥ 44px + padding visual */
  padding: 12px 12px 12px 16px;
  border-radius: 16px;
  border: 1px solid oklch(0.24 0.03 35 / 0.08);
  box-shadow: var(--bella-shadow-card);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s cubic-bezier(0.23,1,0.32,1);
  text-align: left;
}
.hoje-estado:active { transform: scale(0.985); }

/* Ponto colorido */
.hoje-estado-dot {
  flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%;
}

/* Corpo central (título + subtítulo) */
.hoje-estado-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.hoje-estado-titulo {
  font-family: var(--font-ui); font-style: normal;
  font-size: 15px; font-weight: 600; line-height: 1.25;
}
.hoje-estado-sub {
  font-family: var(--font-ui); font-style: normal;
  font-size: 12.5px; font-weight: 400; line-height: 1.3;
  color: #A87A6E;
}

/* Botão de navegação circular (30px) */
.hoje-estado-arrow {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 18px; font-style: normal;
  color: #fff; line-height: 1;
}

/* ─── Variante vermelho (episódio ativo / alerta) ─── */
.hoje-estado-vermelho {
  background: #FBEDE9;
  border: 1px solid #E8C4BA;
  border-left: 5px solid var(--wine);
  box-shadow: 0 2px 8px rgba(122, 48, 48, 0.10);
}
.hoje-estado-vermelho .hoje-estado-dot {
  background: var(--wine);
  animation: hoje-estado-pulse 2s ease-in-out infinite;
}
.hoje-estado-vermelho .hoje-estado-titulo { color: var(--wine); }
.hoje-estado-vermelho .hoje-estado-arrow  { background: var(--wine); }

/* ─── Variante verde (tudo em dia / calmo) ─── */
.hoje-estado-verde {
  background: #E9F0EB;
  border: 1px solid #C3D6CB;
  border-left: 5px solid var(--sage);
}
.hoje-estado-verde .hoje-estado-dot  { background: var(--sage); }
.hoje-estado-verde .hoje-estado-titulo { color: var(--c-saude-deep); }
.hoje-estado-verde .hoje-estado-sub  { color: oklch(0.5 0.04 165); }
.hoje-estado-verde .hoje-estado-arrow { background: var(--sage); }

/* ─── Variante laranja (aviso / pendência) ─── */
.hoje-estado-laranja {
  background: color-mix(in oklab, var(--terracotta) 10%, var(--card));
  border: 1px solid color-mix(in oklab, var(--terracotta) 25%, transparent);
  border-left: 5px solid var(--terracotta);
}
.hoje-estado-laranja .hoje-estado-dot    { background: var(--terracotta); }
.hoje-estado-laranja .hoje-estado-titulo { color: var(--c-hoje-deep); }
.hoje-estado-laranja .hoje-estado-arrow  { background: var(--terracotta); }

/* Pulso: escala + opacidade (não só opacidade) */
@keyframes hoje-estado-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.45); opacity: 0.35; }
}

.hoje-chips-row {
  display: flex; gap: 8px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  /* padding-right: espaço após o último chip quando há overflow horizontal */
  padding: 0 16px 2px 0;
}
.hoje-chips-row::-webkit-scrollbar { display: none; }
.hoje-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--radius-pill);
  background: var(--card); border: 1px solid oklch(0.24 0.03 35 / 0.08); box-shadow: var(--bella-shadow-card);
  font-family: var(--font-ui); font-size: 12px; color: var(--foreground);
  cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s cubic-bezier(0.23,1,0.32,1);
}
.hoje-chip:active { transform: scale(0.96); }
.hoje-chip-ico { display: inline-flex; line-height: 0; color: var(--muted-foreground); }
.hoje-chip-label { font-weight: 600; }
.hoje-chip-state { font-size: 11px; }
.hoje-chip.is-ok   .hoje-chip-state { color: var(--c-saude-deep); }
.hoje-chip.is-ok   .hoje-chip-ico   { color: var(--sage-deep); }
.hoje-chip.is-warn .hoje-chip-state { color: var(--c-hoje-deep); }
.hoje-chip.is-warn { border-color: color-mix(in oklab, var(--terracotta) 30%, transparent); }

/* Separador entre zonas (reusa o tracejado .dashed-rule-h do scrapbook). */
/* margin:22px de cada lado = separador visual claro entre zonas.
   A seção logo após tem margin-top:0 porque o sep já provê 22px abaixo. */
.hoje-sep { height: 1px; margin: 22px 0; }
.hoje-sep + .hoje-section { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .hoje-estado, .hoje-chip { transition: none; }
  .hoje-estado-vermelho .hoje-estado-dot { animation: none; transform: none; }
}

/* ─── Sticky cards ("o que cuida") ────────────────────────────────────────── */
.cuida-cards { display: flex; flex-direction: column; gap: 20px; }

.sticky-card {
  position: relative;
  background: var(--card);
  padding: 16px 16px 16px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-radius: var(--radius);
  box-shadow: var(--bella-shadow-card);
  border: 1px solid oklch(0.24 0.03 35 / 0.06);
}
.sticky-card-l1 { transform: rotate(-1deg); }
.sticky-card-r1 { transform: rotate(1deg); }

.sticky-tape {
  position: absolute;
  top: -10px; left: 24px;
  width: 64px; height: 14px;
  border-radius: 2px;
  box-shadow: 0 1px 3px oklch(0.24 0.03 35 / 0.15);
  border-left: 1px dashed oklch(0.24 0.03 35 / 0.08);
  border-right: 1px dashed oklch(0.24 0.03 35 / 0.08);
}
.sticky-tape-peach { background: color-mix(in oklab, var(--peach) 55%, transparent); }
.sticky-tape-terra { background: color-mix(in oklab, var(--terracotta) 40%, transparent); }
.sticky-tape-sage  { background: color-mix(in oklab, var(--sage) 40%, transparent); }
.sticky-tape-rotate-l { transform: rotate(-2deg); }
.sticky-tape-rotate-r { transform: rotate(3deg); }

.sticky-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sticky-icon-peach {
  background: color-mix(in oklab, var(--peach) 30%, var(--card));
  color: var(--foreground);
}
.sticky-icon-terra {
  background: color-mix(in oklab, var(--terracotta) 15%, var(--card));
  color: var(--terracotta);
}
.sticky-icon-sage {
  background: color-mix(in oklab, var(--sage) 22%, var(--card));
  color: var(--sage);
}

.sticky-body { flex: 1; min-width: 0; }
.sticky-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--foreground);
  margin: 0;
  line-height: 1.3;
}
.sticky-sub {
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--muted-foreground);
  margin: 4px 0 0;
  line-height: 1.4;
}
.sticky-sub em { font-style: italic; }
.sticky-cta {
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 7px 14px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.sticky-cta:disabled { opacity: 0.6; }
.sticky-card-done { opacity: 0.6; }
.sticky-card-done .sticky-cta { display: none; }
.sticky-check {
  display: inline-block;
  margin-top: 6px;
  font-size: 18px;
  color: var(--sage);
  background: transparent;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.sticky-check:active { transform: scale(0.9); }
/* "Dado por" — quem registrou a dose + hora real */
.sticky-por {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted-foreground);
  margin: 3px 0 0;
  line-height: 1.3;
}
/* Suspender — ação secundária discreta no card de dose */
.sticky-suspender {
  margin-top: 8px;
  margin-left: 10px;
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-foreground);
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sticky-suspender:hover { color: var(--foreground); }
.sticky-card-done .sticky-suspender { display: none; }

/* ─── Hand-tag variantes ──────────────────────────────────────────────────── */
.hand-tag-sage  { color: var(--sage); }
.hand-tag-terra { color: var(--terracotta); }
.hand-tag-wine  { color: var(--wine); }

/* ─── Notas consulta (modo pré-consulta) ──────────────────────────────────── */
.notas-card {
  background: var(--card);
  border: 1px solid oklch(0.24 0.03 35 / 0.06);
  border-left: 3px solid var(--terracotta);
  box-shadow: var(--bella-shadow-card);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.notas-lista {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notas-lista li {
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--foreground);
  line-height: 1.5;
}
.notas-lista li small {
  display: block;
  font-style: italic;
  font-size: 11px;
  color: var(--muted-foreground);
  margin-top: 2px;
}

/* ─── Fralda card ─────────────────────────────────────────────────────────── */
/* Estado silenciado: linha discreta (auto-quiet quando a fralda não é usada há
   ~7 dias). Sem grade/sem cobrança — toque expande pro card cheio. */
.fralda-quiet {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  background: transparent;
  border: 1px dashed oklch(0.24 0.03 35 / 0.18);
  border-radius: var(--radius);
  color: oklch(0.5 0.03 40);
  font-family: var(--font-ui);
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fralda-quiet:active { transform: scale(0.99); }
.fralda-quiet > span:nth-child(2) { flex: 1; text-align: left; }
.fralda-quiet svg { color: var(--terracotta); opacity: 0.7; }
.fralda-quiet-chev { opacity: 0.4; }

.fralda-card {
  position: relative;
  background: var(--card);
  border: 1px solid oklch(0.24 0.03 35 / 0.06);
  border-left: 3px solid var(--peach);
  box-shadow: var(--bella-shadow-card);
  border-radius: var(--radius);
  padding: 18px 16px 14px;
}
/* Variante fichário/scrapbook (opção C): papel kraft, sem faixa peach */
.fralda-card-kraft {
  background: #ECE0C8;
  border: 1px solid #D9C9A8;
  border-left: 1px solid #D9C9A8;
}
.fralda-pergunta {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
  margin: 0 0 10px;
}
.fralda-botoes {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}
.fralda-resposta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.fralda-respondido {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--foreground);
  margin: 0;
}
/* ─── Tira de mini-polaroids (opção C — fichário/scrapbook) ─── */
.fralda-tira {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center; /* hoje (maior) fica centralizado verticalmente na tira */
  gap: 5px;
  padding: 10px 2px 2px;
}
.fralda-pol {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 3px 3px 4px;
  background: #FFFDF8;
  border: 1px solid #E4D9C5;
  border-radius: 3px;
  box-shadow: 0 1px 3px oklch(0.24 0.03 35 / 0.14);
  cursor: pointer;
  transform: rotate(var(--rot, 0deg));
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.fralda-pol:active { transform: rotate(var(--rot, 0deg)) scale(0.93); }
.fralda-pol:disabled { cursor: default; opacity: 0.45; box-shadow: none; }
.fralda-pol-tape {
  position: absolute;
  top: -5px; left: 50%;
  width: 22px; height: 9px;
  transform: translateX(-50%) rotate(-6deg);
  background: color-mix(in oklab, var(--peach) 50%, transparent);
  border-radius: 1px;
}
.fralda-pol:disabled .fralda-pol-tape { display: none; }
.fralda-pol-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #F2EAD9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fralda-pol-num {
  position: absolute;
  top: 2px; left: 3px;
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 600;
  color: var(--muted-foreground);
  opacity: 0.7;
}
.fralda-pol-mark { display: flex; align-items: center; justify-content: center; }
.fralda-pol-coco .fralda-pol-mark { color: var(--terracotta); }
.fralda-pol-coco .fralda-pol-mark svg { display: block; }
.fralda-pol-nao .fralda-pol-mark {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--muted-foreground); opacity: 0.5;
}
.fralda-pol-vazio .fralda-pol-mark {
  width: 12px; height: 12px; border-radius: 3px;
  border: 1.5px solid #CFC4B2;
}
.fralda-pol-day {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--foreground);
  text-align: center;
  padding-top: 3px;
}
/* HOJE: maior, reto e em destaque no centro da tira (3 antes + 3 depois). */
.fralda-pol.is-hoje {
  transform: scale(1.18);
  z-index: 2;
  border-color: color-mix(in oklab, var(--terracotta) 45%, #E4D9C5);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--peach) 80%, transparent), 0 3px 8px oklch(0.24 0.03 35 / 0.2);
}
.fralda-pol.is-hoje:active { transform: scale(1.1); }
.fralda-pol.is-hoje .fralda-pol-day {
  font-weight: 600;
  color: var(--terracotta);
}
/* Nota do dia: tira de papel branca presa por "clipe" (decorativo) */
.fralda-nota-clip {
  position: relative;
  margin: 14px 0 0;
  background: #FFFDF8;
  border: 1px solid #E4D9C5;
  border-radius: 4px;
  padding: 9px 12px 9px 14px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted-foreground);
  line-height: 1.4;
  box-shadow: 0 1px 3px oklch(0.24 0.03 35 / 0.1);
}
.fralda-nota-clip::before {
  content: "";
  position: absolute;
  top: -7px; left: 16px;
  width: 11px; height: 22px;
  border: 2px solid #9A8F7A;
  border-radius: 6px;
  opacity: 0.55;
}
.fralda-acoes-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.fralda-acoes-row .sc-cta-ghost { flex: 1; }
.fralda-acoes-row-right { justify-content: flex-end; }
.fralda-acoes-row-right .sc-cta-ghost { flex: 0 0 auto; }

/* Sugestão de padrão (diarreia/constipação) — tom calmo, NÃO alarme. */
.fralda-padrao {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0 4px;
  padding: 11px 13px;
  background: #FBF3E8;
  border: 1px solid #E8D6BE;
  border-left: 3px solid var(--terracotta);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.fralda-padrao:active { transform: scale(0.995); }
.fralda-padrao-ico { font-size: 18px; line-height: 1.3; flex: 0 0 auto; }
.fralda-padrao-txt {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--foreground);
}
.fralda-padrao-cta {
  margin: 5px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--terracotta);
}

/* ─── Ficha de registro das fezes (cor → textura → perguntas) ──────────────── */
.fz-q {
  margin: 2px 0 12px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--foreground);
}
.fz-sub {
  margin: 16px 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--danger);
  text-transform: uppercase;
}
.fz-paleta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.fz-paleta-alarme { grid-template-columns: repeat(3, 1fr); }
.fz-sw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}
.fz-sw-dot {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 50%;
  box-shadow: 0 1px 3px oklch(0.24 0.03 35 / 0.18);
}
.fz-sw-warn {
  position: absolute;
  right: -3px; top: -3px;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  background: var(--danger);
  color: #fff;
  font-size: 12px; font-weight: 800;
  border-radius: 50%;
  border: 2px solid var(--card);
}
.fz-sw-lbl {
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  color: var(--muted-foreground);
}
.fz-sw.is-sel {
  border-color: var(--terracotta);
  background: #FBF3E8;
}
.fz-sw.is-sel .fz-sw-lbl { color: var(--foreground); font-weight: 600; }

.fz-texturas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.fz-tx {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--foreground);
  text-align: left;
}
.fz-tx-emoji { font-size: 17px; }
.fz-tx.is-sel { border-color: var(--terracotta); background: #FBF3E8; font-weight: 600; }

.fz-acoes { margin-top: 16px; }
.fz-acoes .sc-cta, .fz-acoes .sc-cta-outline { width: 100%; }
.fz-acoes .sc-cta-outline { margin-top: 8px; }
.fz-disclaimer { margin-top: 14px; line-height: 1.5; }

/* ─── Modal: histórico de fralda ──────────────────────────────────────────── */
/* Histórico de fralda — reusa os primitivos scrapbook globais (section-head,
   scrap-tape, tone-*, rot-*, hand-tag, kicker) pra ficar igual à Saúde/Hoje. */
.fh-head { margin-top: 24px; margin-bottom: 12px; }
.fh-head:first-child { margin-top: 2px; }
.fh-hint { font-family: var(--font-serif); font-style: italic; font-size: 11.5px; color: var(--muted-foreground); margin: 10px 0 0; text-align: center; }

/* Card de papel padrão (= card da Hoje/Saúde): recebe .scrap-tape + tone + rot */
.fh-paper {
  position: relative;
  background: var(--card);
  border: 1px solid oklch(0.24 0.03 35 / 0.06);
  box-shadow: var(--bella-shadow-card);
  border-radius: var(--radius);
  padding: 18px 14px 14px;
}

/* Resumo (4 números) */
.fh-resumo { display: flex; gap: 6px; }
.fh-r { flex: 1; min-width: 0; text-align: center; }
.fh-r b {
  display: block; font-family: var(--font-serif); font-size: 18px; font-weight: 700;
  color: var(--terracotta); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fh-r b.fh-alerta { color: var(--wine); }
.fh-r span {
  display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted-foreground); margin-top: 4px;
}

/* Padrão por dia da semana */
.fh-dow-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.fh-dow { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fh-dow-cell {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
}
.fh-dow-alto  { background: var(--terracotta); color: var(--terracotta-foreground); }
.fh-dow-medio { background: color-mix(in oklab, var(--terracotta) 45%, var(--card)); color: var(--terracotta); }
.fh-dow-baixo { background: color-mix(in oklab, var(--terracotta) 18%, var(--card)); color: var(--terracotta); }
.fh-dow-vazio { background: color-mix(in oklab, var(--muted) 35%, var(--card)); color: var(--muted-foreground); }
.fh-dow-lbl { font-size: 10px; color: var(--muted-foreground); }

/* Calendário/heatmap 30 dias (dentro do card de papel) */
.fh-hm-grid { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; }
.fh-hm-cell {
  position: relative; aspect-ratio: 1 / 1; border-radius: 6px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 30%, var(--card));
  color: var(--muted-foreground);
  font-family: var(--font-ui); font-size: 10px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.fh-hm-cell:active { transform: scale(0.9); }
/* cocô = tint claro + ícone terracota (visível; antes era branco-sobre-terracota → sumia) */
.fh-hm-cell.is-coco {
  background: color-mix(in oklab, var(--terracotta) 20%, var(--card));
  border-color: color-mix(in oklab, var(--terracotta) 36%, var(--card));
  color: var(--terracotta);
}
.fh-hm-cell.is-nao  { background: color-mix(in oklab, var(--muted) 60%, var(--card)); }
.fh-hm-cell.is-hoje { box-shadow: 0 0 0 2px color-mix(in oklab, var(--peach) 65%, transparent); }
.fh-hm-cell svg { display: block; }
.fh-hm-nota { position: absolute; top: -3px; right: -2px; font-size: 8px; }
/* Marcador de cor de alarme no calendário */
.fh-hm-warn {
  position: absolute; top: -4px; left: -3px;
  width: 13px; height: 13px; display: grid; place-items: center;
  background: var(--danger); color: #fff;
  font-size: 9px; font-weight: 800; border-radius: 50%;
  border: 1.5px solid var(--card);
}

/* Legenda das cores de alarme sob o calendário */
.fh-legenda {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  margin-top: 10px; justify-content: center;
}
.fh-legenda-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-ui); font-size: 10.5px; color: var(--muted-foreground);
}
.fh-legenda-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }

/* Leituras recentes — card de papel com bolinha da cor + meta legível */
.fh-leitura {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left; cursor: pointer;
}
.fh-leitura:active { opacity: 0.85; }
.fh-leitura-dot {
  position: relative; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  box-shadow: 0 1px 2px oklch(0.24 0.03 35 / 0.18);
}
.fh-leitura-warn {
  position: absolute; top: -5px; right: -5px;
  width: 15px; height: 15px; display: grid; place-items: center;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 800; border-radius: 50%;
  border: 2px solid var(--card);
}
.fh-leitura-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fh-leitura-head {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--terracotta);
}
.fh-leitura-meta {
  font-family: var(--font-serif); font-style: italic; font-size: 14px;
  color: var(--foreground); line-height: 1.35;
}

/* Anotações — cada nota é um mini-card de papel com fita (= cards da Saúde) */
.fh-notas { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.fh-notas-vazio {
  font-family: var(--font-serif); font-size: 13px; color: var(--muted-foreground);
  font-style: italic; text-align: center; padding: 14px 8px; line-height: 1.5;
}
.fh-nota { display: block; width: 100%; text-align: left; cursor: pointer; }
.fh-nota:active { opacity: 0.85; }
.fh-nota-head {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--terracotta);
  margin-bottom: 6px;
}
.fh-nota-head svg { color: var(--terracotta); flex-shrink: 0; }
.fh-nota-txt {
  display: block; font-family: var(--font-serif); font-style: italic; font-size: 14px;
  color: var(--foreground); line-height: 1.45;
}

/* ─── Modal: editor de um dia de fralda ───────────────────────────────────── */
.fde-estado { font-size: 12px; color: var(--muted-foreground); margin: 0 0 14px; text-align: center; }
.fde-estado strong { color: var(--foreground); }
.fde-acoes { display: flex; flex-direction: column; gap: 8px; }
.fde-acoes .sc-cta,
.fde-acoes .sc-cta-outline { width: 100%; }
.fde-acoes .sc-cta-outline:disabled { opacity: 0.4; cursor: not-allowed; }
.fde-apagar {
  background: transparent;
  border: none;
  padding: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--muted-foreground);
  text-decoration: underline;
  cursor: pointer;
}

/* ─── Banner (meds suspensos) ─────────────────────────────────────────────── */
.hoje-banner {
  background: var(--card);
  border: 1px solid oklch(0.24 0.03 35 / 0.06);
  box-shadow: var(--bella-shadow-card);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hoje-banner-warn { border-left: 3px solid var(--peach); }
.hoje-banner-episodio { border-left: 3px solid var(--terracotta); }
.hoje-banner-episodio .hoje-banner-icon {
  background: color-mix(in oklab, var(--terracotta) 20%, var(--card));
  color: var(--terracotta);
}
/* Lista de meds suspensos com reativar inline */
.hoje-susp-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.hoje-susp-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hoje-susp-nome {
  flex: 1;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: 12.5px;
  color: var(--foreground);
}
.hoje-susp-ate {
  font-style: italic;
  font-size: 11px;
  color: var(--muted-foreground);
}
.hoje-banner-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--peach) 22%, var(--card));
  color: var(--peach);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hoje-banner-body { flex: 1; min-width: 0; }
.hoje-banner-title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
  margin: 0;
}
.hoje-banner-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--muted-foreground);
  margin: 2px 0 0;
}

/* Grupo de botões no card de episódio ativo */
.hoje-banner-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

/* ─── Ações pendentes ─────────────────────────────────────────────────────── */
.acoes-pendentes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card);
  border: 1px solid oklch(0.24 0.03 35 / 0.06);
  box-shadow: var(--bella-shadow-card);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.acao-pendente-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--foreground);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  padding: 2px 0;
}
.acao-pendente-item:active { opacity: 0.7; }
.acao-pendente-desc { flex: 1; min-width: 0; }
.acao-pendente-chev {
  flex-shrink: 0;
  color: var(--muted-foreground);
  display: inline-flex;
  align-items: center;
}
.acao-chip {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 60%, var(--card));
  color: var(--muted-foreground);
  flex-shrink: 0;
}
.acao-chip-medicamento    { background: color-mix(in oklab, var(--sage) 22%, var(--card)); color: oklch(0.32 0.05 165); }
.acao-chip-alimentacao    { background: color-mix(in oklab, var(--peach) 28%, var(--card)); color: oklch(0.35 0.08 35); }
.acao-chip-rotina         { background: color-mix(in oklab, var(--muted) 60%, var(--card)); color: var(--muted-foreground); }
.acao-chip-retorno        { background: color-mix(in oklab, var(--terracotta) 14%, var(--card)); color: var(--terracotta); }
.acao-chip-encaminhamento { background: color-mix(in oklab, var(--wine) 14%, var(--card)); color: var(--wine); }

/* ─── Esta semana (resumo) ────────────────────────────────────────────────── */
.resumo-semana {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--muted-foreground);
  margin: 0;
  background: var(--card);
  border: 1px solid oklch(0.24 0.03 35 / 0.06);
  box-shadow: var(--bella-shadow-card);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.resumo-semana strong {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 18px;
  color: var(--foreground);
  font-weight: 500;
  margin: 0 2px;
}

/* ─── Link Evolução (atalho) ──────────────────────────────────────────────── */
.hoje-link-evolucao {
  margin-top: 22px;
  width: 100%;
  background: transparent;
  border: 1px dashed oklch(0.24 0.03 35 / 0.18);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--foreground);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.hoje-link-evolucao:active { background: oklch(0.24 0.03 35 / 0.04); }
.hoje-link-evolucao .hoje-link-icon { color: var(--peach); display: inline-flex; line-height: 0; }
.hoje-link-evolucao em { font-style: italic; color: var(--peach); }
.hoje-link-chev { color: var(--muted-foreground); display: inline-flex; line-height: 0; }

/* ─── Recortes (timeline) ─────────────────────────────────────────────────── */
.recortes-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.recortes-list::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background-image: linear-gradient(
    to bottom,
    oklch(0.24 0.03 35 / 0.35) 0 6px,
    transparent 6px 12px
  );
  background-size: 1px 12px;
  background-repeat: repeat-y;
}

.recorte-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.recorte-dot {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--bella-shadow-card);
  border: 4px solid var(--background);
  position: relative;
  z-index: 2;
}
.recorte-dot-marco    { background: var(--sage); color: var(--sage-foreground); }
.recorte-dot-saude    { background: var(--terracotta); color: var(--terracotta-foreground); }
.recorte-dot-consulta { background: var(--peach); color: var(--peach-foreground); }
.recorte-dot-vacina   { background: var(--terracotta); color: var(--terracotta-foreground); }

.recorte-body { padding-top: 2px; flex: 1; min-width: 0; }
.recorte-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.recorte-tag {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.recorte-tag-marco    { color: var(--sage); }
.recorte-tag-saude    { color: var(--terracotta); }
.recorte-tag-consulta { color: oklch(0.45 0.03 35); }
.recorte-tag-vacina   { color: var(--terracotta); }
.recorte-when {
  font-family: var(--font-serif);
  font-size: 11px;
  color: var(--muted-foreground);
}
.recorte-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
  margin: 4px 0 0;
  line-height: 1.3;
}
.recorte-detail {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--muted-foreground);
  margin: 4px 0 0;
  line-height: 1.5;
}

/* ─── FAB câmera (atalho OCR receita/carteirinha) ─────────────────────────── */
.hoje-fab {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 130px);
  transform: translateX(-50%) rotate(3deg);
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-fab);
  border: 4px solid var(--background);
  z-index: 35;
  transition: transform 0.18s ease;
}
.hoje-fab:active { transform: translateX(-50%) rotate(3deg) scale(0.94); }
.hoje-fab-icon { display: inline-flex; line-height: 0; }
.hoje-fab-label {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 105px);
  transform: translateX(-50%) rotate(-2deg);
  font-family: var(--font-hand);
  font-size: 15px;
  color: var(--foreground);
  background: color-mix(in oklab, var(--background) 80%, transparent);
  padding: 2px 8px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 34;
}

/* ════════════════════════════════════════════════════════════════════════════
   REDESIGN 07/06 — Hoje (porta de entrada). Doc: docs/HOJE_REDESIGN_PLAN.md.
   Mantém scrapbook (washi tape + leve rotação), com cor por card. Classes
   dedicadas (.dose-card/.hz-card) pra NÃO mexer na .sticky-card global (Saúde).
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Saudação da Bella (1 nudge útil/dia) ─── */
.bella-nudge {
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in oklab, var(--peach) 13%, var(--card));
  border: 1px solid color-mix(in oklab, var(--peach) 26%, var(--card));
  border-radius: 14px; padding: 10px 13px;
}
.bella-nudge-bee {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in oklab, var(--peach) 36%, var(--card));
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.bella-nudge p {
  margin: 0; font-family: var(--font-serif); font-size: 13.5px; line-height: 1.35; color: var(--foreground);
}
.bella-nudge p b { font-weight: 600; }

/* ─── Prompt do dia (gancho contextual: vacina/ações/epi/peso/marco) ─── */
.prompt-card {
  position: relative;
  display: flex; gap: 11px; align-items: flex-start;
  background: color-mix(in oklab, var(--sage) 12%, var(--card));
  border: 1px solid color-mix(in oklab, var(--sage) 28%, var(--card));
  border-radius: 14px; padding: 12px 13px;
}
.prompt-card-urgente {
  background: color-mix(in oklab, var(--terra) 11%, var(--card));
  border-color: color-mix(in oklab, var(--terra) 30%, var(--card));
}
.prompt-card-epi {
  background: color-mix(in oklab, var(--peach) 14%, var(--card));
  border-color: color-mix(in oklab, var(--peach) 30%, var(--card));
}
.prompt-card-bela { flex-shrink: 0; width: 30px; height: 30px; object-fit: contain; margin-top: 1px; }
.prompt-card-body { flex: 1; min-width: 0; }
.prompt-card-msg {
  margin: 0; font-family: var(--font-serif); font-size: 13.5px; line-height: 1.4; color: var(--foreground);
}
.prompt-card-msg strong { font-weight: 600; }
.prompt-card-fonte { margin: 5px 0 0; font-size: 11px; color: rgba(42,26,14,0.55); font-style: italic; }
.prompt-card-ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.prompt-card-cta {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  background: var(--terra, var(--foreground)); color: #fff; border: none;
}
.prompt-card-cta:active { transform: scale(0.97); }
.prompt-card-cta-ghost {
  background: transparent; color: var(--foreground);
  border: 1px solid color-mix(in oklab, var(--foreground) 22%, transparent);
}
.prompt-card-x {
  position: absolute; top: 6px; right: 8px;
  width: 26px; height: 26px; border: none; background: transparent;
  font-size: 19px; line-height: 1; color: rgba(42,26,14,0.4); cursor: pointer;
}

/* ─── Resumo de crescimento na Hoje (medidas + sparkline) ─── */
.hoje-evol-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--card);
  border: 1px solid oklch(0.24 0.03 35 / 0.06);
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--bella-shadow-card);
  padding: 14px;
}
.hoje-evol-card:active { transform: scale(0.995); }
.hoje-med-grid { display: flex; gap: 10px; justify-content: space-between; align-items: flex-end; text-align: center; }
.hoje-med { flex: 1; }
.hoje-med-val { display: block; font-size: 20px; font-weight: 600; color: var(--blue, var(--sage)); line-height: 1; }
.hoje-med-unit { display: block; font-size: 10px; color: var(--brownL, rgba(42,26,14,0.55)); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.3px; }
.hoje-spark { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--blue, var(--sage)); }
.hoje-spark-svg { flex: 1; height: 30px; width: 100%; overflow: visible; }
.hoje-spark-delta { font-size: 11px; font-weight: 600; white-space: nowrap; }

/* ─── Washi tape reutilizável (cor pelo tom do card) ─── */
.scrap-tape {
  position: absolute; top: -9px; left: 22px; width: 56px; height: 13px; border-radius: 2px;
  box-shadow: 0 1px 3px oklch(0.24 0.03 35 / 0.15);
  border-left: 1px dashed oklch(0.24 0.03 35 / 0.08);
  border-right: 1px dashed oklch(0.24 0.03 35 / 0.08);
  transform: rotate(-3deg); z-index: 1;
  background: color-mix(in oklab, var(--peach) 56%, transparent);
}
.rot-l { transform: rotate(-1.1deg); }
.rot-r { transform: rotate(1.1deg); }
.rot-r > .scrap-tape { transform: rotate(3deg); left: auto; right: 22px; }
.tone-sage  > .scrap-tape { background: color-mix(in oklab, var(--sage) 42%, transparent); }
.tone-terra > .scrap-tape { background: color-mix(in oklab, var(--terracotta) 42%, transparent); }
.tone-wine  > .scrap-tape { background: color-mix(in oklab, var(--wine) 32%, transparent); }

/* ─── Card de dose (status à direita, mais enxuto) ─── */
.dose-list { gap: 15px; }                 /* densidade só nas doses (era 20px do .cuida-cards) */
.dose-card {
  position: relative; background: var(--card);
  padding: 13px 13px 13px 16px;
  display: flex; gap: 12px; align-items: center;
  border-radius: var(--radius); box-shadow: var(--bella-shadow-card);
  border: 1px solid oklch(0.24 0.03 35 / 0.06);
}
.dose-ico {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.dose-body { flex: 1; min-width: 0; }
.dose-title { font-family: var(--font-serif); font-size: 15.5px; font-weight: 600; color: var(--foreground); margin: 0; line-height: 1.25; }
.dose-sub { font-family: var(--font-serif); font-size: 12px; color: var(--muted-foreground); margin: 2px 0 0; line-height: 1.3; }
.dose-sub em { font-style: italic; }
/* Selo de episódio ativo no card de dose (med receitado por causa de um episódio) */
.dose-episodio-chip {
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 100%;
  margin: 4px 0 0;
  padding: 2px 9px;
  background: #FBF3E8;
  border: 1px solid #E8D6BE;
  border-radius: 999px;
  font-family: var(--font-ui, inherit);
  font-size: 10.5px; font-weight: 600;
  color: var(--terracotta);
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dose-episodio-chip:active { transform: scale(0.98); }
.dose-por { font-family: var(--font-ui); font-size: 10.5px; color: var(--muted-foreground); margin: 3px 0 0; line-height: 1.3; }
.dose-acoes { display: flex; gap: 14px; align-items: center; margin-top: 5px; }
.dose-suspender, .dose-editar {
  background: transparent; border: none; padding: 0;
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; color: var(--muted-foreground);
  letter-spacing: 0.02em; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.dose-suspender:hover, .dose-editar:hover { color: var(--foreground); }
/* Status — botão redondo grande à direita (como V1, com destaque) */
.dose-status {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; font-family: var(--font-ui); background: var(--card);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s cubic-bezier(0.23,1,0.32,1), background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.dose-status:active { transform: scale(0.9); }
/* pendente: só o anel (borda) na cor do tom — o glifo ○ fica oculto p/ não duplicar */
.dose-status.pending { border: 2px solid currentColor; font-size: 0; }
.dose-status.pending::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: currentColor; opacity: 0.28;
}
/* aplicado: delicado mas aparente — círculo sage clarinho + ✓ sage (não branco-sobre-cheio) */
.dose-status.done {
  background: color-mix(in oklab, var(--sage) 22%, var(--card));
  border: 2px solid color-mix(in oklab, var(--sage) 55%, var(--card));
  color: var(--sage-deep) !important;
  font-size: 21px; font-weight: 700;
}
.dose-card.is-done { background: color-mix(in oklab, var(--sage) 6%, var(--card)); }
/* travada: ainda falta >15min pro horário — anel apagado, sem clique */
.dose-status.pending.is-locked { opacity: 0.38; cursor: not-allowed; }
.dose-status.pending.is-locked:active { transform: none; }
.dose-status.pending.is-locked::after { opacity: 0.16; }
.dose-locked {
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 600;
  color: var(--muted-foreground); letter-spacing: 0.02em; margin: 3px 0 0;
}

/* Tons que se alternam (alegria + diferenciação) */
.tone-peach .dose-ico { background: color-mix(in oklab, var(--peach) 32%, var(--card)); color: var(--peach-ink); }
.tone-peach .dose-status.pending { color: var(--peach-ink); }
.tone-sage  .dose-ico { background: color-mix(in oklab, var(--sage) 26%, var(--card)); color: var(--sage-deep); }
.tone-sage  .dose-status.pending { color: var(--sage-deep); }
.tone-terra .dose-ico { background: color-mix(in oklab, var(--terracotta) 16%, var(--card)); color: var(--terracotta); }
.tone-terra .dose-status.pending { color: var(--terracotta); }
.tone-wine  .dose-ico { background: color-mix(in oklab, var(--wine) 15%, var(--card)); color: var(--wine); }
.tone-wine  .dose-status.pending { color: var(--wine); }
.tone-peach .dose-ico [data-svg], .tone-sage .dose-ico [data-svg],
.tone-terra .dose-ico [data-svg], .tone-wine .dose-ico [data-svg] { display: inline-flex; line-height: 0; }

/* ─── Recomendações da pediatra ─── */
.reco-lista { display: flex; flex-direction: column; gap: 12px; }
.reco-card {
  position: relative;
  background: color-mix(in oklab, var(--sage) 8%, var(--card));
  border: 1px solid color-mix(in oklab, var(--sage) 24%, var(--card));
  border-left: 4px solid var(--sage-deep);
  border-radius: var(--radius); box-shadow: var(--bella-shadow-card);
  padding: 14px 15px 13px;
}
.reco-card .scrap-tape { background: color-mix(in oklab, var(--sage) 42%, transparent); }
.reco-text { font-family: var(--font-serif); font-size: 14px; line-height: 1.4; color: var(--foreground); margin: 0; }
.reco-ok {
  margin-top: 10px; border: 1px solid var(--sage-deep); background: var(--card); color: var(--sage-deep);
  font-family: var(--font-ui); font-weight: 600; font-size: 12px; border-radius: 999px; padding: 6px 14px;
  cursor: pointer; transition: transform 0.14s cubic-bezier(0.23,1,0.32,1);
}
.reco-ok:active { transform: scale(0.96); }
.reco-ok:disabled { opacity: 0.5; }

/* ─── Perfil incompleto (housekeeping, 1 slot/vez) ─── */
.perfil-card {
  position: relative;
  background: color-mix(in oklab, var(--terracotta) 7%, var(--card));
  border: 1px solid color-mix(in oklab, var(--terracotta) 22%, var(--card));
  border-left: 4px solid var(--terracotta);
  border-radius: var(--radius); box-shadow: var(--bella-shadow-card);
  padding: 14px 36px 13px 15px; /* folga à direita pro × */
  /* Entrada discreta — é raro/dismissível, então pode ter delicadeza (sem scale(0)). */
  animation: perfil-in 0.22s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes perfil-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .perfil-card { animation: none; } }
.perfil-card .scrap-tape { background: color-mix(in oklab, var(--terracotta) 40%, transparent); }
.perfil-msg { font-family: var(--font-serif); font-size: 14px; line-height: 1.4; color: var(--foreground); margin: 0; }
.perfil-msg b { font-weight: 600; }
.perfil-ctas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 11px; }
.perfil-input {
  flex: 1; min-width: 120px; font-size: 16px; /* 16px evita zoom no iOS */
  font-family: var(--font-ui); padding: 8px 11px; border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--terracotta) 28%, var(--card));
  background: var(--card); color: var(--foreground);
}
.perfil-input:focus { outline: none; border-color: var(--terracotta); }
.perfil-btn {
  flex: 1; min-width: 110px; font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  border-radius: 999px; padding: 9px 14px; cursor: pointer;
  border: 1px solid var(--terracotta); background: var(--card); color: var(--terracotta);
  transition: transform 0.14s cubic-bezier(0.23, 1, 0.32, 1);
}
.perfil-btn-primary { background: var(--terracotta); color: var(--terracotta-foreground); border-color: var(--terracotta); }
.perfil-btn:active { transform: scale(0.97); }
.perfil-btn:disabled { opacity: 0.5; }
.perfil-dismiss {
  position: absolute; top: 8px; right: 9px; width: 24px; height: 24px; line-height: 1;
  border: none; background: transparent; color: var(--muted-foreground); font-size: 19px;
  cursor: pointer; border-radius: 50%; transition: transform 0.14s cubic-bezier(0.23, 1, 0.32, 1);
}
.perfil-dismiss:active { transform: scale(0.9); }

/* ─── Horizonte (consulta + vacina lado a lado, compactos) ─── */
/* Scroll horizontal: ~2 cards visíveis + peek do 3º (redesign 24/06). */
.hz-row {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  /* padding-top dá espaço pro .scrap-tape (position:absolute; top:-9px) aparecer
     sem ser clipped pelo overflow-x:auto — padrão pra "overflow no eixo cruzado" */
  padding: 12px 2px 4px;
  margin: -12px -2px 0;
}
.hz-row::-webkit-scrollbar { display: none; }
.hz-card {
  position: relative; flex: 0 0 46%; min-width: 158px; max-width: 300px;
  scroll-snap-align: start; background: var(--card);
  border: 1px solid oklch(0.24 0.03 35 / 0.06); border-radius: 12px; box-shadow: var(--bella-shadow-card);
  padding: 13px 12px; display: flex; gap: 10px; align-items: flex-start;
}
.hz-ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.hz-ico [data-svg] { display: inline-flex; line-height: 0; }
.tone-terra .hz-ico { background: color-mix(in oklab, var(--terracotta) 15%, var(--card)); color: var(--terracotta); }
.tone-sage  .hz-ico { background: color-mix(in oklab, var(--sage) 22%, var(--card)); color: var(--sage-deep); }
.tone-wine  .hz-ico { background: color-mix(in oklab, var(--wine) 14%, var(--card)); color: var(--wine); }
.hz-body { min-width: 0; }
.hz-title { font-family: var(--font-serif); font-size: 13.5px; font-weight: 600; color: var(--foreground); margin: 0; line-height: 1.2; }
.hz-sub { font-family: var(--font-serif); font-size: 11px; color: var(--muted-foreground); margin: 2px 0 0; line-height: 1.35; }
.hz-sub em { font-style: italic; }

/* ─── Ambiente recolhível (resumo + recortes) ─── */
.hoje-ambiente {
  margin-top: 24px; border-top: 1px dashed oklch(0.24 0.03 35 / 0.16); padding-top: 4px;
}
.hoje-ambiente > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--muted-foreground);
  padding: 10px 2px; -webkit-tap-highlight-color: transparent;
}
.hoje-ambiente > summary::-webkit-details-marker { display: none; }
.hoje-ambiente-chev { transition: transform 0.18s ease; }
.hoje-ambiente[open] .hoje-ambiente-chev { transform: rotate(90deg); }
.hoje-ambiente .hoje-section:first-of-type { margin-top: 8px; }


/* ─── Orientações não-lidas da pediatra ──────────────────────────────────── */
.hoje-screen .orient-card {
  background: color-mix(in oklab, var(--wine) 5%, var(--card));
  border-radius: 14px;
  padding: 14px 16px 12px;
  margin-bottom: 10px;
  border: 1.5px solid color-mix(in oklab, var(--wine) 18%, transparent);
  border-left: 4px solid var(--wine);
}
.hoje-screen .orient-card-header {
  margin-bottom: 10px;
}
.hoje-screen .orient-card-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wine);
  opacity: 0.75;
  margin-bottom: 2px;
}
.hoje-screen .orient-card-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.25;
}
.hoje-screen .orient-card-meta {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted-foreground);
  margin-top: 2px;
}
.hoje-screen .orient-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.hoje-screen .orient-chip {
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.3;
  padding: 3px 8px;
  border-radius: 20px;
  font-weight: 500;
  background: color-mix(in oklab, var(--wine) 10%, var(--card));
  color: color-mix(in oklab, var(--wine) 75%, var(--foreground));
  border: 1px solid color-mix(in oklab, var(--wine) 22%, transparent);
  max-width: 100%;
  word-break: break-word;
}
.hoje-screen .orient-card-conduta {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--foreground);
  white-space: pre-wrap;
  margin-bottom: 8px;
  padding: 10px 12px;
  background: color-mix(in oklab, var(--wine) 4%, var(--background));
  border-radius: 8px;
}
.hoje-screen .orient-medidas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--muted-foreground);
}
.hoje-screen .orient-medidas strong {
  color: var(--foreground);
  font-weight: 600;
}
.hoje-screen .orient-card-validade {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--muted-foreground);
  margin-bottom: 10px;
}
.hoje-screen .orient-card-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ─── Card de episódio ativo — redesign 23/06/2026 ────────────────────────── */
.hoje-epis {
  background: var(--card);
  border: 1px solid oklch(0.24 0.03 35 / 0.06);
  border-left: 3px solid var(--terracotta);
  border-radius: var(--radius);
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hoje-epis-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hoje-epis-ico {
  flex-shrink: 0;
  background: color-mix(in oklab, var(--terracotta) 18%, var(--card));
  color: var(--terracotta);
}
.hoje-epis-info { flex: 1; min-width: 0; }
.hoje-epis-titulo {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hoje-epis-dia {
  font-size: 11px;
  color: var(--muted-foreground);
  margin-top: 1px;
}
.hoje-epis-encerrar {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 13px;
  border: 1px solid color-mix(in oklab, var(--sage) 50%, transparent);
  background: transparent;
  font-size: 11px;
  color: var(--sage);
  cursor: pointer;
  font-family: var(--font-sans);
  white-space: nowrap;
  min-height: 32px;
}
.hoje-epis-status {
  background: color-mix(in oklab, var(--terracotta) 8%, var(--card));
  border-radius: calc(var(--radius) - 2px);
  padding: 10px 12px;
}
.hoje-epis-status-temp {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.hoje-epis-temp-big {
  font-size: 26px;
  font-weight: 600;
  color: var(--terracotta);
  line-height: 1;
}
.hoje-epis-nota {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--foreground);
  line-height: 1.4;
  margin: 0 0 2px;
}
.hoje-epis-meta {
  font-size: 11px;
  color: var(--muted-foreground);
}
.hoje-epis-meta-empty {
  text-align: center;
  padding: 4px 0;
}
.hoje-epis-dose {
  font-size: 11px;
  color: var(--muted-foreground);
  width: 100%;
  margin-top: 5px;
  padding-top: 6px;
  border-top: 1px solid oklch(0.24 0.03 35 / 0.06);
}
.sc-cta.hoje-epis-cta {
  width: 100%;
  justify-content: center;
}
.hoje-epis-secundario {
  background: none;
  border: none;
  padding: 0;
  font-size: 11.5px;
  color: var(--muted-foreground);
  text-align: center;
  cursor: pointer;
  font-family: var(--font-serif);
  font-style: italic;
  min-height: 32px;
}

/* ─── Histórico de doses (modal 📊 do card "o que cuida") ────────────────────
   Visão dias (14/30): grid tingido por adesão; visão meses (90d/6m/1a): barras.
   Cores: completo=sage · parcial=laranja · zero=terracota suave · fora=cinza. */
.hd-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.hd-chip {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  padding: 5px 11px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--muted-foreground);
}
.hd-chip.is-on {
  background: color-mix(in oklab, var(--terracotta) 14%, var(--card));
  border-color: var(--terracotta);
  color: var(--terracotta);
  font-weight: 600;
}
.hd-resumo { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hd-pct {
  font-family: var(--font-hand, inherit);
  font-size: 34px; font-weight: 700; line-height: 1;
  padding: 10px 12px; border-radius: 12px;
}
.hd-pct.is-alto  { color: #4a6b4f; background: color-mix(in oklab, var(--sage) 22%, transparent); }
.hd-pct.is-medio { color: #8a6d3b; background: color-mix(in oklab, orange 14%, transparent); }
.hd-pct.is-baixo { color: #8a4a3b; background: color-mix(in oklab, var(--terracotta) 16%, transparent); }
.hd-resumo-txt { font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--foreground); }
.hd-resumo-txt span { color: var(--muted-foreground); font-size: 12px; }
.hd-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hd-cell {
  aspect-ratio: 1; border-radius: 8px;
  border: 1px solid var(--border);
  font-family: var(--font-ui); font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--muted-foreground);
}
.hd-cell.is-full    { background: color-mix(in oklab, var(--sage) 34%, var(--card)); border-color: color-mix(in oklab, var(--sage) 60%, var(--border)); color: #3d5941; font-weight: 600; }
.hd-cell.is-parcial { background: color-mix(in oklab, orange 22%, var(--card)); border-color: color-mix(in oklab, orange 45%, var(--border)); color: #7a5c2e; font-weight: 600; }
.hd-cell.is-zero    { background: color-mix(in oklab, var(--terracotta) 18%, var(--card)); border-color: color-mix(in oklab, var(--terracotta) 40%, var(--border)); color: #7c4335; }
.hd-cell.is-fora    { opacity: 0.38; }
.hd-cell.is-hoje    { outline: 2px solid var(--terracotta); outline-offset: 1px; }
.hd-cell.is-sel     { box-shadow: 0 0 0 2px var(--foreground) inset; }
.hd-detalhe {
  margin-top: 10px; padding: 10px 12px;
  background: color-mix(in oklab, var(--sage) 8%, var(--card));
  border: 1px solid var(--border); border-radius: 10px;
  font-family: var(--font-ui); font-size: 13px;
}
.hd-det-head { font-weight: 600; margin-bottom: 4px; }
.hd-det-lista { list-style: none; margin: 0; padding: 0; }
.hd-det-lista li { padding: 2px 0; color: var(--foreground); }
.hd-det-vazio { color: var(--muted-foreground); font-style: italic; }
.hd-dica { font-family: var(--font-ui); font-size: 11px; color: var(--muted-foreground); margin-top: 8px; text-align: center; }
.hd-meses { display: flex; flex-direction: column; gap: 8px; }
.hd-mes { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 12px; }
.hd-mes-lbl { flex: none; width: 44px; color: var(--muted-foreground); }
.hd-mes-bar { flex: 1; height: 14px; border-radius: 999px; background: color-mix(in oklab, var(--border) 55%, transparent); overflow: hidden; position: relative; }
.hd-mes-fill { display: block; height: 100%; border-radius: 999px; }
.hd-mes-fill.is-alto  { background: color-mix(in oklab, var(--sage) 70%, white); }
.hd-mes-fill.is-medio { background: color-mix(in oklab, orange 55%, white); }
.hd-mes-fill.is-baixo { background: color-mix(in oklab, var(--terracotta) 55%, white); }
.hd-mes-vazio { font-size: 10px; color: var(--muted-foreground); padding-left: 8px; line-height: 14px; }
.hd-mes-num { flex: none; min-width: 86px; text-align: right; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.hd-nota { font-family: var(--font-ui); font-size: 11px; line-height: 1.5; color: var(--muted-foreground); margin-top: 14px; font-style: italic; }

/* ─── Card de Pesquisa (enquete) ────────────────────────────────────────────── */
.ck-card-enquete {
  background: linear-gradient(135deg, color-mix(in oklab, var(--sage) 12%, var(--card)) 0%, color-mix(in oklab, var(--peach) 8%, var(--card)) 100%);
  border: 1.5px solid color-mix(in oklab, var(--sage) 40%, var(--border));
  border-radius: 16px;
  padding: 16px;
  margin: 0;
}
.enq-card-intro {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--foreground);
  margin: 0 0 12px 0;
  font-weight: 500;
}
.enq-card-ctas {
  display: flex;
  gap: 8px;
}
.enq-card-ctas .perfil-btn {
  flex: 1;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 10px;
}
.enq-card-ctas .perfil-btn-primary {
  background: var(--sage);
  color: white;
  font-weight: 600;
}
.enq-card-ctas .perfil-btn-primary:active {
  opacity: 0.9;
}
.enq-card-ctas .perfil-btn-secondary {
  background: transparent;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  font-weight: 500;
}
.enq-card-ctas .perfil-btn-secondary:active {
  background: color-mix(in oklab, var(--border) 40%, transparent);
}