/* Bella V2 — Hoje V3 "launcher" (gated, ver js/core/flags.js homeV3Emails).
 * Grade de cards grandes, 1 toque = detalhe. Tokens do scrapbook; cor do tile
 * é a da PORTA de destino (nunca gravidade — diretiva 0.1). */

.hv3-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.hv3-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--bella-shadow-card);
  min-height: 104px;
  padding: 14px 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease;
  font-family: var(--font-ui);
}
.hv3-card:active { transform: scale(0.97); }

.hv3-tile {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hv3-tile-terra    { background: color-mix(in oklab, var(--terracotta) 14%, var(--card)); color: var(--terracotta); }
.hv3-tile-saude    { background: color-mix(in oklab, var(--sage) 20%, var(--card));       color: var(--sage-deep, oklch(0.46 0.05 165)); }
.hv3-tile-evolucao { background: color-mix(in oklab, var(--peach) 16%, var(--card));      color: var(--peach-ink, oklch(0.4 0.1 45)); }
.hv3-tile-mais     { background: color-mix(in oklab, var(--wine) 11%, var(--card));       color: var(--wine); }

.hv3-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--foreground);
  text-align: center;
  line-height: 1.3;
}

.hv3-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  font-size: 9.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
  background: var(--background);
  border: 1px solid var(--input);
  border-radius: 100px;
  padding: 2px 7px;
}

/* ─── Fixar favoritos ─── */
.hv3-acoes {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
  margin-bottom: -4px;
}
.hv3-fix-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hv3-fix-btn.ativo {
  color: var(--terracotta);
  border-color: var(--terracotta);
  background: color-mix(in oklab, var(--terracotta) 8%, var(--card));
}
.hv3-fix-dica {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted-foreground);
  margin: 10px 0 -6px;
}
/* A estrela só existe no modo fixar (o JS nem emite fora dele). Vazada quando
   não está fixado, cheia quando está — sem contagem e sem cor de estado, que
   aqui seria ruído numa grade já densa. */
.hv3-fix-marca {
  position: absolute;
  top: 7px;
  left: 7px;
  color: var(--border);
  display: flex;
}
.hv3-fix-marca.on { color: var(--terracotta); }
.hv3-grid-fixando .hv3-card {
  border-style: dashed;
}
.hv3-grid-fixando .hv3-card.fixado {
  border-style: solid;
  border-color: color-mix(in oklab, var(--terracotta) 45%, var(--border));
}

/* ─── Modal "Registrar mamada" ─── */
.hv3-mamada-hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted-foreground);
  margin: 0 0 14px;
}
.hv3-mamada-lados {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.hv3-lado {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 64px;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--terracotta) 30%, transparent);
  background: color-mix(in oklab, var(--terracotta) 10%, var(--card));
  color: var(--terracotta);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hv3-lado:active { transform: scale(0.97); }
.hv3-lado:disabled { opacity: 0.6; }
.hv3-mamada-links {
  display: flex;
  gap: 18px;
}
.hv3-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--muted-foreground);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.hv3-mamada-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--foreground);
  margin: 0 0 14px;
}
.hv3-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terracotta);
  animation: hv3-pulse 1.6s ease-in-out infinite;
}
@keyframes hv3-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .hv3-dot { animation: none; } }
.hv3-mamada-encerrar {
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 100px;
  background: var(--terracotta);
  color: var(--terracotta-foreground);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hv3-mamada-encerrar:active { transform: scale(0.98); }
.hv3-mamada-encerrar:disabled { opacity: 0.5; cursor: wait; }

/* ─── Modal "Registrar momento" ─── */
.hv3-mom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.hv3-mom-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 68px;
  border-radius: 12px;
  border: 1px solid var(--input);
  background: var(--card);
  color: var(--terracotta);
  font-family: var(--font-ui);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--bella-shadow-card);
}
.hv3-mom-btn:active { transform: scale(0.97); }
.hv3-mom-btn:disabled { opacity: 0.6; }
.hv3-mom-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--foreground);
}
.hv3-mom-n {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}
/* Satélite "ajustar/desfazer o último" — só aparece com contagem > 0.
   Espelha o badge de contagem (canto oposto) e tem alvo de toque próprio,
   maior que o ícone, pra não exigir pontaria no meio do botão grande. */
.hv3-mom-sat {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--muted-foreground);
  opacity: 0.75;
}
.hv3-mom-sat:active { opacity: 1; color: var(--terracotta); }
.hv3-mom-pares {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.hv3-mom-par {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hv3-mom-tema {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted-foreground);
  width: 76px;
  flex-shrink: 0;
}
.hv3-mom-chip {
  border: 1px solid var(--input);
  background: var(--card);
  border-radius: 100px;
  padding: 7px 14px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--foreground);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hv3-mom-chip.is-on {
  background: color-mix(in oklab, var(--terracotta) 12%, var(--card));
  border-color: color-mix(in oklab, var(--terracotta) 35%, transparent);
  color: var(--terracotta);
  font-weight: 600;
}
.hv3-mom-chip:disabled { opacity: 0.6; }