/* ============================================================
   Bicharada — App pós-login (Janela 3)
   Onboarding, formulário de pet, dashboard, cards, modal, toast.
   Usa os tokens de css/base.css e reaproveita classes de css/auth.css
   (.field, .field-input, .btn, .auth-card…).
   ============================================================ */

/* Modo "app": o dashboard ocupa a tela toda (o padrão .app-root de
   auth.css centraliza um cartão; aqui esticamos e alinhamos ao topo). */
.app-root.app-mode {
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

/* Crédito discreto da AUCA (Janela 13): rodapé das telas de auth e da
   tela de Ajustes. Pequeno, baixo contraste, nunca compete com o conteúdo. */
.auca-credit {
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.55;
  color: var(--cor-texto);
  margin-top: 20px;
}
.auca-credit-link {
  color: var(--cor-primaria);
  font-weight: 600;
  text-decoration: none;
}
.auca-credit-link:hover { text-decoration: underline; }

/* ---------- Onboarding: boas-vindas ------------------------- */
.welcome-emoji {
  font-size: 3.25rem;
  margin-bottom: 8px;
  animation: welcome-bounce 1.6s ease-in-out infinite;
}
@keyframes welcome-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-emoji { animation: none; }
}

.welcome-pets {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 1.4rem;
  margin: 18px 0 24px;
  opacity: 0.9;
}
.welcome .btn--primary { margin-top: 4px; }
.welcome-signout { display: block; margin: 16px auto 0; }

/* ---------- Formulário de pet ------------------------------- */
.pet-form-card { max-width: 440px; }
.pet-form { gap: 18px; }

/* Foto: preview circular + ações */
.photo-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.photo-preview {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cor-fundo);
  box-shadow: var(--sombra);
}
.photo-preview--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  opacity: 0.5;
  border: 2px dashed rgba(26, 26, 46, 0.15);
  box-shadow: none;
}
.photo-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.photo-remove { color: var(--cor-destaque); }

/* Botão fino (usado como label de upload e em erros) */
.btn--slim {
  width: auto;
  padding: 9px 16px;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Grade de espécies */
.species-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.species {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  background: var(--cor-fundo);
  border: 1.5px solid transparent;
  border-radius: 12px;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.species:active { transform: scale(0.96); }
.species.is-selected {
  border-color: var(--cor-primaria);
  background: rgba(45, 212, 160, 0.12);
}
.species-emoji { font-size: 1.5rem; line-height: 1; }
.species-label { font-size: 0.72rem; font-weight: 600; opacity: 0.85; }

/* Segmentado (sexo / castrado) */
.segmented {
  display: flex;
  gap: 8px;
}
.segmented-btn {
  flex: 1;
  padding: 11px 8px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 1.5px solid transparent;
  border-radius: 12px;
  transition: border-color 0.15s, background 0.15s;
}
.segmented-btn.is-selected {
  border-color: var(--cor-primaria);
  background: rgba(45, 212, 160, 0.12);
  color: #12876a;
}
.field-hint--inline {
  display: inline;
  margin: 0 0 0 4px;
  font-weight: 500;
}

.pet-form-cancel { display: block; margin: 4px auto 0; }

/* ---------- Dashboard --------------------------------------- */
.app-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: rgba(249, 247, 244, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(26, 26, 46, 0.06);
}
.topbar-brand { display: flex; align-items: center; gap: 8px; }
.topbar-logo { border-radius: 8px; }
.topbar-name {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--cor-primaria);
}
.topbar-signout {
  background: none;
  border: none;
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.7;
  padding: 6px 8px;
  border-radius: 8px;
}
.topbar-signout:hover { opacity: 1; background: rgba(26, 26, 46, 0.05); }

.app-content {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 20px calc(32px + env(safe-area-inset-bottom));
}

.app-head { margin-bottom: 18px; }
.app-h1 { font-size: 1.6rem; }
.app-sub { opacity: 0.7; font-size: 0.95rem; margin-top: 2px; }

.app-loading,
.app-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 0;
  opacity: 0.85;
  text-align: center;
}

/* Grade / card de pet */
.pet-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .pet-grid { grid-template-columns: 1fr 1fr; }
}

.pet-card {
  background: #fff;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px;
  animation: auth-in 0.3s ease;
}

.pet-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.pet-avatar {
  border-radius: 50%;
  object-fit: cover;
  background: var(--cor-fundo);
  flex-shrink: 0;
}
.pet-avatar--lg { width: 60px; height: 60px; }
.pet-avatar--sm { width: 44px; height: 44px; }
.pet-avatar--emoji {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pet-avatar--lg.pet-avatar--emoji { font-size: 1.9rem; }
.pet-avatar--sm.pet-avatar--emoji { font-size: 1.4rem; }

.pet-card-info { flex: 1; min-width: 0; }
.pet-card-nome {
  font-size: 1.15rem;
  line-height: 1.2;
  word-break: break-word;
}
.pet-card-especie {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cor-primaria);
  margin-top: 1px;
}
.pet-card-detalhes {
  font-size: 0.82rem;
  opacity: 0.7;
  margin-top: 3px;
}
.pet-card-detalhes--vazio { font-style: italic; opacity: 0.55; }

.pet-card-acoes { display: flex; gap: 4px; flex-shrink: 0; }
.icon-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: var(--cor-fundo);
  border: none;
  border-radius: 10px;
  transition: background 0.15s, transform 0.1s;
}
.icon-btn:hover { background: #efece7; }
.icon-btn:active { transform: scale(0.94); }
.icon-btn--danger:hover { background: rgba(255, 107, 107, 0.14); }

/* Módulos (convites para preencher) */
.modulo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.modulo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 10px;
  background: var(--cor-fundo);
  border: none;
  border-radius: 12px;
  transition: background 0.15s, transform 0.1s;
}
.modulo:hover { background: #efece7; }
.modulo:active { transform: scale(0.98); }
.modulo-emoji { font-size: 1.2rem; line-height: 1; flex-shrink: 0; }
.modulo-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.modulo-label { font-size: 0.82rem; font-weight: 700; }
.modulo-convite { font-size: 0.72rem; opacity: 0.65; }
.modulo-seta {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cor-primaria);
  flex-shrink: 0;
}

.btn--add {
  margin-top: 20px;
  background: #fff;
  color: var(--cor-primaria);
  border: 1.5px dashed var(--cor-primaria);
}
.btn--add:hover:not(:disabled) { background: rgba(45, 212, 160, 0.08); }

/* ---------- Modal ------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(26, 26, 46, 0.45);
  animation: fade-in 0.15s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: var(--raio);
  box-shadow: 0 12px 40px rgba(26, 26, 46, 0.25);
  padding: 24px;
  text-align: center;
  animation: auth-in 0.2s ease;
}
.modal-emoji { font-size: 2.4rem; margin-bottom: 6px; }
.modal-title { font-size: 1.25rem; }
.modal-text { font-size: 0.92rem; opacity: 0.75; margin: 8px 0 20px; line-height: 1.5; }
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { margin: 0; }

.btn--danger { background: var(--cor-destaque); color: #fff; }
.btn--danger:hover:not(:disabled) { background: #e85555; }
.btn--danger.is-loading, .btn--danger:disabled { opacity: 0.65; }

/* ---------- Toast ------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  z-index: 200;
  max-width: calc(100vw - 40px);
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: var(--cor-texto);
  box-shadow: 0 6px 20px rgba(26, 26, 46, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast--success { background: #12876a; }
.toast--error { background: #c0392b; }

/* Banner de atualização do app (Janela 11.2): reusa o visual do toast,
   mas é persistente e interativo — precisa receber cliques. */
.toast--update {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 20px;
}
.toast-update-msg { white-space: nowrap; }
.toast-update-btn {
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--cor-texto);
  background: var(--cor-cta, #ffb347);
  cursor: pointer;
}
.toast-update-btn:hover { filter: brightness(1.05); }
.toast-update-btn:disabled { opacity: 0.7; cursor: default; }

/* ---------- Modal em modo formulário ------------------------ */
/* Reusa .modal, mas alinhado à esquerda e mais largo p/ um form. */
.modal--form {
  max-width: 420px;
  text-align: left;
}
.modal-title--left { text-align: left; }
.saude-form { gap: 14px; margin-top: 16px; }
.field-textarea {
  resize: vertical;
  min-height: 68px;
  line-height: 1.4;
  font-family: inherit;
}
.saude-form-actions { margin-top: 4px; }

/* ---------- Tela de Saúde ----------------------------------- */
.saude-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.saude-back {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  opacity: 0.7;
  padding: 4px 0;
}
.saude-back:hover { opacity: 1; }
.saude-head-pet { display: flex; align-items: center; gap: 12px; }
.saude-head-txt { min-width: 0; }
.saude-title { font-size: 1.5rem; }

/* Abas dos sub-módulos */
.saude-tabs {
  display: flex;
  gap: 6px;
  background: #fff;
  border-radius: 14px;
  padding: 5px;
  box-shadow: var(--sombra);
  margin-bottom: 18px;
}
.saude-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 6px;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--cor-texto);
  background: none;
  border: none;
  border-radius: 10px;
  opacity: 0.6;
  transition: background 0.15s, opacity 0.15s, color 0.15s;
}
.saude-tab.is-selected {
  background: rgba(45, 212, 160, 0.14);
  color: #12876a;
  opacity: 1;
}
.saude-tab-emoji { font-size: 1rem; line-height: 1; }
@media (max-width: 380px) {
  .saude-tab-emoji { display: none; }
  .saude-tab { font-size: 0.82rem; }
}

/* Lista de registros */
.saude-list { display: flex; flex-direction: column; gap: 10px; }
.saude-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sombra);
  padding: 14px;
  animation: auth-in 0.25s ease;
}
.saude-item-main { flex: 1; min-width: 0; }
.saude-item-topo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.saude-item-titulo {
  font-size: 1.02rem;
  line-height: 1.25;
  word-break: break-word;
}
.saude-item-linha {
  font-size: 0.85rem;
  opacity: 0.72;
  margin-top: 3px;
  word-break: break-word;
}
.saude-item-acoes { display: flex; gap: 4px; flex-shrink: 0; }

/* Badges de status (vacina / medicamento) */
.saude-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.4;
}
.saude-badge.is-vencida { background: rgba(255, 107, 107, 0.16); color: #c0392b; }
.saude-badge.is-proxima { background: rgba(255, 179, 71, 0.22); color: #a9690a; }
.saude-badge.is-emdia  { background: rgba(45, 212, 160, 0.16); color: #12876a; }
.saude-badge.is-ativo  { background: rgba(45, 212, 160, 0.16); color: #12876a; }
.saude-badge.is-encerrado { background: rgba(26, 26, 46, 0.08); color: rgba(26, 26, 46, 0.6); }

/* Estado vazio de uma aba */
.saude-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 16px;
  text-align: center;
  opacity: 0.75;
}
.saude-vazio-emoji { font-size: 2.4rem; }
.saude-add { margin-top: 14px; }

/* ---------- Tela de Cuidados (Janela 5a) -------------------- */
/* Item de cuidado: como .saude-item, mas em coluna — o topo tem
   título + badge, depois as linhas, e por fim a barra de ações (o
   botão "Feito hoje" ocupa a largura e os ícones ficam à direita). */
.cuidado-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sombra);
  padding: 14px;
  animation: auth-in 0.25s ease;
}
.cuidado-item-topo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.cuidado-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
/* "Feito hoje" toma o espaço que sobra; os ícones ficam compactos. */
.cuidado-feito { flex: 1; white-space: nowrap; }
.cuidado-vazio-dica {
  font-size: 0.82rem;
  opacity: 0.7;
  max-width: 34ch;
}

/* Histórico de execuções (dentro do modal --form) */
.cuidado-hist { margin-top: 14px; }
.cuidado-hist-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
}
.cuidado-hist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--cor-fundo);
  border-radius: 12px;
  padding: 10px 12px;
}
.cuidado-hist-info { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.cuidado-hist-data { font-weight: 700; font-size: 0.92rem; }
.cuidado-hist-gasto { font-size: 0.85rem; opacity: 0.72; }
.cuidado-hist-vazio {
  text-align: center;
  opacity: 0.7;
  padding: 22px 8px;
  font-size: 0.9rem;
}
.cuidado-hist-add { margin-top: 14px; }

/* Módulo do dashboard com pendência (cuidado atrasado): convite em
   coral para pedir atenção. */
.modulo--alerta .modulo-convite { color: var(--cor-destaque); opacity: 0.9; font-weight: 600; }

/* ---------- Tela de Notificações (Janela 5b) ----------------- */
.topbar-acoes { display: flex; align-items: center; gap: 2px; }
.topbar-btn {
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 8px;
  opacity: 0.85;
}
.topbar-btn:hover { opacity: 1; background: rgba(26, 26, 46, 0.05); }

.notif-wrap { display: flex; flex-direction: column; gap: 14px; }
.notif-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sombra);
  padding: 16px;
  animation: auth-in 0.25s ease;
}
.notif-card-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.notif-status { font-size: 0.9rem; opacity: 0.75; line-height: 1.5; margin-bottom: 12px; }
.notif-status--on { color: var(--cor-primaria); opacity: 1; font-weight: 600; }
.notif-status--off { color: var(--cor-destaque); opacity: 1; }
.notif-card .btn { margin: 0; }

/* Ajustes — Minha assinatura (Janela 14): linha de ações do cartão */
.notif-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.notif-acoes .link { font-size: 0.85rem; }

/* Linha de tipo de alerta: emoji + rótulo/descrição + switch */
.notif-tipo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(26, 26, 46, 0.06);
}
.notif-tipo-emoji { font-size: 1.3rem; }
.notif-tipo-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-tipo-label { font-weight: 700; font-size: 0.95rem; }
.notif-tipo-desc { font-size: 0.8rem; opacity: 0.65; line-height: 1.35; }

/* Switch (botão role="switch"): trilho + bolinha via ::after */
.notif-switch {
  flex-shrink: 0;
  width: 46px;
  height: 26px;
  border: none;
  border-radius: 13px;
  background: rgba(26, 26, 46, 0.18);
  position: relative;
  transition: background 0.18s ease;
  cursor: pointer;
}
.notif-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(26, 26, 46, 0.25);
  transition: transform 0.18s ease;
}
.notif-switch.is-on { background: var(--cor-primaria); }
.notif-switch.is-on::after { transform: translateX(20px); }

@media (prefers-reduced-motion: reduce) {
  .modal, .modal-backdrop, .pet-card, .saude-item, .cuidado-item, .notif-card, .fin-item { animation: none; }
  .notif-switch, .notif-switch::after { transition: none; }
  .fin-bar-fill { transition: none; }
}

/* ---------- Tela de Financeiro (Janela 6) ------------------- */

/* Seletor de mês: ‹ Julho de 2026 › */
.fin-mes-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}
.fin-mes-btn {
  background: #fff;
  border: none;
  box-shadow: var(--sombra);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--cor-texto);
  opacity: 0.85;
}
.fin-mes-btn:hover { opacity: 1; }
.fin-mes-btn:active { transform: scale(0.94); }
.fin-mes-label {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.05rem;
  min-width: 148px;
  text-align: center;
}

/* Resumo do mês (reusa .notif-card como cartão) */
.fin-resumo-wrap { margin-bottom: 16px; }
.fin-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.fin-total-label { font-size: 0.9rem; opacity: 0.7; }
.fin-total-valor {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--cor-primaria);
}
.fin-total-qtd { font-size: 0.82rem; opacity: 0.6; margin-top: 2px; }

.fin-cat-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(26, 26, 46, 0.06);
}
.fin-cat-row { display: flex; flex-direction: column; gap: 5px; }
.fin-cat-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.9rem;
}
.fin-cat-nome { font-weight: 600; min-width: 0; }
.fin-cat-emoji { font-size: 0.95rem; }
.fin-cat-valor { font-weight: 700; flex-shrink: 0; }
.fin-bar {
  height: 7px;
  border-radius: 4px;
  background: rgba(26, 26, 46, 0.07);
  overflow: hidden;
}
.fin-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--cor-primaria);
  transition: width 0.3s ease;
  min-width: 3px;
}
.fin-todos {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(26, 26, 46, 0.06);
  font-size: 0.85rem;
  opacity: 0.75;
}
.fin-todos strong { color: var(--cor-texto); opacity: 1; }

/* Item de lançamento: emoji da categoria + corpo + ações */
.fin-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sombra);
  padding: 14px;
  animation: auth-in 0.25s ease;
}
.fin-item-cat {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-fundo);
  border-radius: 10px;
}
.fin-item-main { flex: 1; min-width: 0; }
.fin-item-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.fin-item-titulo { font-size: 0.98rem; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.fin-item-valor {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
}
.fin-item-acoes { display: flex; gap: 4px; flex-shrink: 0; }

/* Grade de categorias no formulário (5 fixas) */
.fin-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.fin-cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  background: var(--cor-fundo);
  border: 1.5px solid transparent;
  border-radius: 12px;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.fin-cat-btn:active { transform: scale(0.96); }
.fin-cat-btn.is-selected {
  border-color: var(--cor-primaria);
  background: rgba(45, 212, 160, 0.12);
}
.fin-cat-btn-emoji { font-size: 1.4rem; line-height: 1; }
.fin-cat-btn-label { font-size: 0.72rem; font-weight: 600; opacity: 0.85; text-align: center; }

/* Valor + data lado a lado no formulário */
.fin-form-linha { display: flex; gap: 12px; }
.fin-form-linha .field { flex: 1; min-width: 0; }

/* Linha "salvar estabelecimento" / "lançar no financeiro" (checkbox) */
.fin-save-estab {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 4px;
  font-size: 0.85rem;
  opacity: 0.85;
  cursor: pointer;
}
.fin-save-estab input { width: 16px; height: 16px; accent-color: var(--cor-primaria); flex-shrink: 0; }

/* ---------- Tela de Peso (Janela 7) ------------------------- */

/* Resumo: peso atual em destaque + tendência (reusa .notif-card) */
.peso-resumo { margin-bottom: 16px; }
.peso-atual-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.peso-atual-bloco { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.peso-atual-label { font-size: 0.9rem; opacity: 0.7; }
.peso-atual-valor {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--cor-primaria);
  line-height: 1.1;
}
.peso-atual-sub { font-size: 0.82rem; opacity: 0.65; margin-top: 8px; }

/* Cartão do gráfico: altura fixa para o Chart.js medir o container */
.peso-grafico-card { margin-bottom: 16px; }
.peso-grafico-wrap {
  position: relative;
  height: 220px;
  width: 100%;
}
.peso-canvas { display: block; }

/* Item da lista de registros (reusa .saude-item) */
.peso-item-valor { color: var(--cor-primaria); }
.peso-item-var {
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.6;
  white-space: nowrap;
}

/* Seletor de unidade g/kg no formulário (reusa .segmented) */
.peso-unidade { margin-top: 2px; }

/* ============================================================
   Trial + conversão (Janela 9)
   ============================================================ */

/* Badge de trial no cabeçalho do dashboard: pílula discreta com
   dias restantes + CTA. Vira alaranjado nos últimos 2 dias. */
.trial-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  border: 1px solid var(--cor-primaria);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cor-primaria) 10%, transparent);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.trial-badge:hover { filter: brightness(0.96); }
.trial-badge--urgente {
  border-color: var(--cor-cta);
  background: color-mix(in srgb, var(--cor-cta) 14%, transparent);
}
.trial-badge-cta {
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cor-primaria);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
}
.trial-badge--urgente .trial-badge-cta { background: var(--cor-cta); }

/* Tela de conversão: lista do que o usuário construiu no trial */
.conversao-lista {
  list-style: none;
  margin: 14px 0 4px;
  padding: 12px 16px;
  border-radius: var(--raio);
  background: color-mix(in srgb, var(--cor-primaria) 8%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.conversao-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.94rem;
  font-weight: 600;
}
.conversao-item-emoji { font-size: 1.1rem; }

.conversao-acoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.conversao-acoes .link { align-self: center; }