/* ═══════════════════════════════════════════════════════
   MUSA PLANNER v3.0 — Stylesheet principal
   ═══════════════════════════════════════════════════════
   Carregado quando usuário tem profile.appVersion === 'v3'
   Prefixo de classes: .v3-* (isolado da v2)
   Paleta: pearl + champagne + magenta discreto + rose gold
   ═══════════════════════════════════════════════════════ */

/* ─── TOKENS ─── */
:root {
  /* Paleta premium v3 */
  --v3-pearl: #FAFAFA;
  --v3-champagne: #FBF4F0;
  --v3-champagne-deep: #F5E4E8;
  --v3-magenta: #B83A6B;
  --v3-magenta-soft: rgba(184, 58, 107, 0.08);
  --v3-magenta-mid: rgba(184, 58, 107, 0.15);
  --v3-rose-gold: #D4956A;
  --v3-gold: #C9A961;
  --v3-gold-deep: #8B6F1E;
  --v3-grafite: #2A2420;
  --v3-taupe: #8A7D75;
  --v3-sage: #9CAF88;
  --v3-sage-deep: #6B8559;
  --v3-terracotta: #C87465;

  /* Glass */
  --v3-glass: rgba(255, 255, 255, 0.65);
  --v3-glass-strong: rgba(255, 255, 255, 0.82);
  --v3-glass-border: rgba(255, 255, 255, 0.8);

  /* Sombras refinadas */
  --v3-shadow-soft: 0 4px 20px rgba(42, 36, 32, 0.04);
  --v3-shadow-card: 0 8px 32px rgba(184, 58, 107, 0.06);
  --v3-shadow-float: 0 10px 30px rgba(184, 58, 107, 0.15);

  /* Radius */
  --v3-r-sm: 12px;
  --v3-r-md: 18px;
  --v3-r-lg: 22px;
  --v3-r-xl: 28px;
}

/* ─── BODY REDEFINIDO QUANDO V3 ATIVA ─── */
body.v3-active {
  background: linear-gradient(135deg, var(--v3-champagne) 0%, var(--v3-pearl) 40%, var(--v3-champagne-deep) 100%);
  background-attachment: fixed;
  font-family: 'Outfit', 'Nunito', sans-serif;
  color: var(--v3-grafite);
  min-height: 100vh;
  padding-bottom: 90px; /* espaço pro bottom nav */
}

body.v3-active .app {
  max-width: 480px;
  margin: 0 auto;
  padding-bottom: 100px;
}

/* ─── TIPOGRAFIA ─── */
.v3-display { font-family: 'Fraunces', 'Nunito', serif; font-weight: 500; letter-spacing: -0.3px; }
.v3-display-italic { font-family: 'Fraunces', 'Nunito', serif; font-weight: 500; font-style: italic; }
.v3-body { font-family: 'Outfit', 'Nunito', sans-serif; }

/* ─── HEADER V3 — não-fixo, logo + data ─── */
.v3-header {
  padding: 14px 20px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  /* NÃO fixo — rola junto com conteúdo */
  position: relative;
  z-index: 5;
}

.v3-header-logo {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.18s ease;
}
.v3-header-logo:hover {
  opacity: 0.75;
}
.v3-header-logo svg {
  height: 26px;
  width: auto;
  display: block;
}

.v3-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.v3-header-data {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  color: var(--v3-taupe);
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.v3-header-hora {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--v3-grafite);
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
}

/* Compatibilidade com classes legadas (no caso de aparecerem em algum lugar) */
.v3-greeting,
.v3-greeting-small,
.v3-greeting-big,
.v3-greeting-big .v3-name {
  /* Mantido pra evitar erros de seletor — visual neutro */
  display: revert;
}

/* ─── SECTION TITLE ─── */
.v3-section-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 16px;
  margin: 24px 16px 12px;
  color: var(--v3-grafite);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.2px;
}

.v3-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(184, 58, 107, 0.15) 0%, transparent 100%);
}

.v3-section-sub {
  font-size: 11px;
  color: var(--v3-taupe);
  font-weight: 400;
  font-family: 'Outfit', sans-serif;
  font-style: normal;
  margin-left: auto;
}

/* ─── CARD BASE (Glass) ─── */
.v3-card {
  background: var(--v3-glass-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--v3-glass-border);
  border-radius: var(--v3-r-xl);
  box-shadow: var(--v3-shadow-card);
}

.v3-card-soft {
  background: var(--v3-glass);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--v3-r-md);
}

/* ─── BOTTOM NAV V3 ─── */
.v3-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  max-width: 480px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding: 12px 8px calc(20px + env(safe-area-inset-bottom));
  z-index: 100;
}

.v3-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: var(--v3-r-md);
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
}

.v3-nav-item:active { transform: scale(0.96); }

.v3-nav-item.v3-active {
  background: var(--v3-magenta-soft);
}

.v3-nav-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--v3-taupe);
  transition: all 0.2s ease;
}

.v3-nav-item.v3-active .v3-nav-icon {
  color: var(--v3-magenta);
}

.v3-nav-label {
  font-size: 10px;
  color: var(--v3-taupe);
  font-weight: 500;
  letter-spacing: 0.2px;
}

.v3-nav-item.v3-active .v3-nav-label {
  color: var(--v3-magenta);
  font-weight: 600;
}

.v3-nav-item.v3-locked .v3-nav-icon { opacity: 0.35; }
.v3-nav-item.v3-locked .v3-nav-label { opacity: 0.5; }

.v3-nav-lock {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  width: 12px;
  height: 12px;
  background: var(--v3-rose-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 7px;
  font-weight: 700;
}

.v3-nav-countdown {
  font-size: 8px;
  color: var(--v3-rose-gold);
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-top: 1px;
}

/* ─── PÁGINA (container de cada aba) ─── */
.v3-page {
  padding: 6px 16px 16px;
  animation: v3FadeIn 0.3s ease-out;
}

@keyframes v3FadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.v3-page-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 26px;
  color: var(--v3-grafite);
  letter-spacing: -0.5px;
  padding: 10px 0 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.v3-page-title em {
  color: var(--v3-magenta);
  font-style: italic;
  font-weight: 500;
}

.v3-page-title-sub {
  font-size: 11px;
  color: var(--v3-taupe);
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
}

/* ─── ABA EU — Profile hero ─── */
.v3-profile-hero {
  text-align: center;
  padding: 14px 0 8px;
}

.v3-avatar-frame {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 14px;
}

.v3-avatar-crown {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 32px;
  filter: drop-shadow(0 2px 6px rgba(201, 169, 97, 0.4));
  z-index: 3;
}

.v3-avatar-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(from 180deg, var(--v3-gold), var(--v3-rose-gold), var(--v3-magenta), var(--v3-rose-gold), var(--v3-gold));
  box-shadow: 0 8px 24px rgba(184, 58, 107, 0.2);
}

.v3-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--v3-champagne-deep) 0%, #EFD4B8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  border: 3px solid white;
}

.v3-profile-name {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--v3-grafite);
  letter-spacing: -0.3px;
}

.v3-profile-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: linear-gradient(135deg, #F4E8C8 0%, #EFD4B8 100%);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--v3-grafite);
  margin-top: 6px;
  letter-spacing: 0.3px;
}

.v3-profile-level-badge em {
  font-family: 'Fraunces', serif;
  font-style: italic;
}

/* ─── XP CARD ─── */
.v3-xp-card {
  padding: 16px 18px;
  margin-top: 16px;
}

.v3-xp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.v3-xp-current {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--v3-magenta);
}

.v3-xp-current span {
  font-size: 12px;
  color: var(--v3-taupe);
  font-weight: 400;
  font-family: 'Outfit', sans-serif;
}

.v3-xp-next {
  font-size: 11px;
  color: var(--v3-taupe);
  text-align: right;
}

.v3-xp-next strong {
  display: block;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  color: var(--v3-grafite);
  font-size: 14px;
}

.v3-xp-bar {
  height: 10px;
  background: var(--v3-magenta-soft);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.v3-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--v3-rose-gold) 0%, var(--v3-magenta) 100%);
  border-radius: 10px;
  position: relative;
  transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.v3-xp-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: v3Shimmer 2.5s infinite;
}

@keyframes v3Shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

.v3-xp-hint {
  font-size: 10px;
  color: var(--v3-taupe);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
  font-family: 'Fraunces', serif;
}

/* ─── PÓDIO ─── */
.v3-tabs-mini {
  display: flex;
  gap: 6px;
  background: var(--v3-magenta-soft);
  padding: 3px;
  border-radius: 12px;
  margin: 0 16px 12px;
}

.v3-tab-mini {
  flex: 1;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--v3-taupe);
  text-align: center;
  border-radius: 9px;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
}

.v3-tab-mini.v3-active {
  background: white;
  color: var(--v3-magenta);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(184, 58, 107, 0.08);
}

.v3-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px 10px;
}

.v3-podium-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.v3-podium-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--v3-champagne-deep) 0%, #EFD4B8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: 3px solid white;
  box-shadow: 0 4px 12px rgba(184, 58, 107, 0.15);
  margin-bottom: 8px;
}

.v3-podium-avatar.v3-gold {
  border-color: var(--v3-gold);
  width: 58px;
  height: 58px;
  font-size: 30px;
}

.v3-podium-avatar.v3-silver { border-color: #B5B5B5; }
.v3-podium-avatar.v3-bronze { border-color: #C68968; }

.v3-podium-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--v3-grafite);
  margin-bottom: 2px;
}

.v3-podium-xp {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--v3-magenta);
}

.v3-podium-base {
  width: 72px;
  background: var(--v3-glass);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px 14px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10px 0;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--v3-magenta);
}

.v3-podium-base.v3-gold {
  height: 60px;
  background: linear-gradient(180deg, rgba(201, 169, 97, 0.25) 0%, rgba(201, 169, 97, 0.1) 100%);
  color: var(--v3-gold-deep);
}

.v3-podium-base.v3-silver { height: 44px; }
.v3-podium-base.v3-bronze { height: 34px; }

.v3-my-rank {
  background: var(--v3-glass-strong);
  backdrop-filter: blur(15px);
  border: 1px solid var(--v3-magenta-mid);
  border-radius: var(--v3-r-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 16px;
}

.v3-my-rank-pos {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--v3-magenta);
  min-width: 44px;
}

.v3-my-rank-info { flex: 1; }

.v3-my-rank-label {
  font-size: 10px;
  color: var(--v3-taupe);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.v3-my-rank-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--v3-grafite);
}

.v3-my-rank-chip {
  padding: 4px 10px;
  background: var(--v3-magenta-soft);
  color: var(--v3-magenta);
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
}

/* ─── TROFÉUS GRID ─── */
.v3-trophy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 16px;
}

.v3-trophy {
  aspect-ratio: 1;
  background: var(--v3-glass);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.v3-trophy:active { transform: scale(0.95); }

.v3-trophy.v3-locked {
  opacity: 0.35;
  filter: grayscale(1);
}

.v3-trophy.v3-new::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: var(--v3-magenta);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(184, 58, 107, 0.2);
}

/* ─── MENU LIST ─── */
.v3-menu-list {
  padding: 0 16px;
}

.v3-menu-item {
  background: var(--v3-glass);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--v3-r-md);
  padding: 14px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.v3-menu-item:active {
  transform: scale(0.98);
  background: var(--v3-magenta-soft);
}

.v3-menu-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--v3-magenta-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.v3-menu-label {
  font-size: 14px;
  color: var(--v3-grafite);
  flex: 1;
}

.v3-menu-arrow {
  color: var(--v3-taupe);
  font-size: 18px;
}

/* ─── MODAL CINEMATOGRÁFICO DE DESBLOQUEIO ─── */
.v3-unlock-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(212, 149, 106, 0.35) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(184, 58, 107, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(201, 169, 97, 0.2) 0%, transparent 50%),
    linear-gradient(180deg, var(--v3-champagne) 0%, var(--v3-champagne-deep) 50%, #FBECE8 100%);
  animation: v3OverlayFade 0.5s ease-out;
}

.v3-unlock-overlay.v3-show {
  display: flex;
}

@keyframes v3OverlayFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.v3-unlock-close {
  position: absolute;
  top: calc(40px + env(safe-area-inset-top));
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--v3-grafite);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.v3-unlock-content {
  max-width: 380px;
  padding: 40px 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.v3-unlock-tag {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(201, 169, 97, 0.2);
  color: var(--v3-gold-deep);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 20px;
  margin-bottom: 28px;
  border: 1px solid rgba(201, 169, 97, 0.3);
  animation: v3FadeDown 0.8s ease-out;
}

@keyframes v3FadeDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.v3-unlock-halo {
  position: relative;
  width: 160px;
  height: 160px;
  margin-bottom: 32px;
  animation: v3IconReveal 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes v3IconReveal {
  0% { transform: scale(0.4) rotate(-180deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.v3-halo-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(212, 149, 106, 0.4), transparent, rgba(184, 58, 107, 0.4), transparent);
  animation: v3Spin 10s linear infinite;
}

.v3-halo-ring::before {
  content: '';
  position: absolute;
  inset: 3px;
  background: linear-gradient(135deg, var(--v3-champagne) 0%, var(--v3-champagne-deep) 100%);
  border-radius: 50%;
}

@keyframes v3Spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.v3-halo-glow {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 169, 97, 0.25) 0%, transparent 70%);
  filter: blur(20px);
  animation: v3Pulse 3s ease-in-out infinite;
}

@keyframes v3Pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

.v3-halo-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  filter: drop-shadow(0 8px 20px rgba(184, 58, 107, 0.25));
}

.v3-unlock-pretitle {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--v3-taupe);
  margin-bottom: 10px;
  animation: v3FadeUp 1s ease-out 0.3s both;
}

.v3-unlock-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 42px;
  line-height: 1;
  color: var(--v3-grafite);
  letter-spacing: -1.5px;
  margin-bottom: 6px;
  animation: v3FadeUp 1s ease-out 0.5s both;
}

.v3-unlock-title em {
  color: var(--v3-magenta);
  font-style: italic;
  font-weight: 600;
}

.v3-unlock-subtitle {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 400;
  color: var(--v3-rose-gold);
  margin-bottom: 26px;
  animation: v3FadeUp 1s ease-out 0.7s both;
}

@keyframes v3FadeUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.v3-unlock-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--v3-grafite);
  max-width: 280px;
  margin-bottom: 28px;
  animation: v3FadeUp 1s ease-out 0.9s both;
}

.v3-unlock-cta {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--v3-magenta) 0%, var(--v3-rose-gold) 100%);
  color: white;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: none;
  border-radius: var(--v3-r-md);
  box-shadow: 0 10px 30px rgba(184, 58, 107, 0.3);
  cursor: pointer;
  animation: v3FadeUp 1s ease-out 1.2s both;
  transition: transform 0.2s ease;
}

.v3-unlock-cta:active { transform: scale(0.98); }

/* ─── SUB-PAGE HEADER (sub-telas tipo Jornada Financeira) ─── */
.v3-subpage-header {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.v3-back-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--v3-glass);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--v3-grafite);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

.v3-subpage-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--v3-grafite);
  letter-spacing: -0.2px;
}

.v3-subpage-title em {
  color: var(--v3-magenta);
  font-style: italic;
}

/* ─── BOTÕES PADRÃO ─── */
.v3-btn-primary {
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--v3-magenta) 0%, var(--v3-rose-gold) 100%);
  color: white;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: var(--v3-r-md);
  box-shadow: 0 6px 20px rgba(184, 58, 107, 0.25);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.v3-btn-primary:active { transform: scale(0.97); }

.v3-btn-secondary {
  padding: 12px 18px;
  background: white;
  color: var(--v3-magenta);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--v3-magenta-mid);
  border-radius: var(--v3-r-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.v3-btn-secondary:active { transform: scale(0.97); background: var(--v3-magenta-soft); }

/* ─── CHIPS ─── */
.v3-chip {
  padding: 5px 12px;
  background: var(--v3-magenta-soft);
  color: var(--v3-magenta);
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.v3-chip.v3-gold {
  background: linear-gradient(135deg, #F4E8C8 0%, #EFD4B8 100%);
  color: var(--v3-gold-deep);
}

.v3-chip.v3-sage {
  background: rgba(156, 175, 136, 0.15);
  color: var(--v3-sage-deep);
}

/* ─── LOADING SPINNER ─── */
.v3-loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--v3-magenta-soft);
  border-top-color: var(--v3-magenta);
  border-radius: 50%;
  animation: v3RotateLoading 0.8s linear infinite;
}

@keyframes v3RotateLoading {
  to { transform: rotate(360deg); }
}

/* ─── OCULTAR ELEMENTOS V2 QUANDO V3 ATIVA ─── */
body.v3-active .header:not(.v3-header) { display: none !important; }
body.v3-active .sidebar,
body.v3-active .menu-btn { display: none !important; }

/* ─── UTILITÁRIOS ─── */
.v3-hidden { display: none !important; }
.v3-only { display: none; }
body.v3-active .v3-only { display: block; }
body.v3-active .v2-only { display: none !important; }

.v3-text-center { text-align: center; }
.v3-mt-sm { margin-top: 8px; }
.v3-mt-md { margin-top: 16px; }
.v3-mt-lg { margin-top: 24px; }

/* ─── SAFE AREA iOS ─── */
@supports (padding: max(0px)) {
  body.v3-active {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .v3-bottom-nav {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════════════
   ABA CICLO — estilos específicos
   ═══════════════════════════════════════════════════════ */

/* Loading */
.v3-ciclo-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
}

/* Tela de ativação */
.v3-ciclo-ativacao {
  padding: 8px 16px 40px;
}

.v3-ciclo-hero {
  text-align: center;
  padding: 20px 16px 24px;
}

.v3-ciclo-hero-icon {
  font-size: 52px;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 12px rgba(166, 140, 201, 0.3));
}

.v3-ciclo-hero-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--v3-grafite);
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}

.v3-ciclo-hero-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--v3-taupe);
  max-width: 320px;
  margin: 0 auto;
}

.v3-ciclo-form {
  margin-top: 20px;
}

.v3-form-group {
  margin-bottom: 18px;
}

.v3-form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--v3-grafite);
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}

.v3-form-group small {
  display: block;
  font-size: 10px;
  color: var(--v3-taupe);
  margin-top: 6px;
  line-height: 1.4;
  font-style: italic;
  font-family: 'Fraunces', serif;
}

.v3-input {
  width: 100%;
  padding: 14px 14px;
  border: 1px solid rgba(184, 58, 107, 0.15);
  border-radius: var(--v3-r-md);
  background: white;
  font-size: 14px;
  color: var(--v3-grafite);
  font-family: 'Outfit', sans-serif;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.v3-input:focus {
  border-color: var(--v3-magenta);
  box-shadow: 0 0 0 3px var(--v3-magenta-soft);
}

select.v3-input {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23B83A6B' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.v3-full-width { width: 100%; }

.v3-ciclo-pular {
  width: 100%;
  padding: 14px;
  background: transparent;
  border: none;
  color: var(--v3-taupe);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 12px;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
}

/* Tela "pulei" */
.v3-ciclo-pulado {
  text-align: center;
  padding: 40px 24px;
}

.v3-ciclo-pulado-icon {
  font-size: 52px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.v3-ciclo-pulado-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--v3-taupe);
  margin-bottom: 20px;
  font-family: 'Fraunces', serif;
  font-style: italic;
}

/* Hero card da fase */
.v3-ciclo-hero-card {
  background: linear-gradient(135deg, rgba(166, 140, 201, 0.18) 0%, rgba(215, 107, 118, 0.1) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--v3-r-xl);
  padding: 20px 18px;
  margin: 8px 16px 0;
  position: relative;
  overflow: hidden;
}

.v3-ciclo-hero-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(166, 140, 201, 0.3) 0%, transparent 70%);
  border-radius: 50%;
}

.v3-ciclo-hero-card.v3-fase-menstrual { background: linear-gradient(135deg, rgba(215, 107, 118, 0.18) 0%, rgba(184, 58, 107, 0.1) 100%); }
.v3-ciclo-hero-card.v3-fase-menstrual::before { background: radial-gradient(circle, rgba(215, 107, 118, 0.3) 0%, transparent 70%); }

.v3-ciclo-hero-card.v3-fase-folicular { background: linear-gradient(135deg, rgba(156, 175, 136, 0.18) 0%, rgba(212, 149, 106, 0.1) 100%); }
.v3-ciclo-hero-card.v3-fase-folicular::before { background: radial-gradient(circle, rgba(156, 175, 136, 0.3) 0%, transparent 70%); }

.v3-ciclo-hero-card.v3-fase-ovulatoria { background: linear-gradient(135deg, rgba(212, 149, 106, 0.2) 0%, rgba(201, 169, 97, 0.15) 100%); }
.v3-ciclo-hero-card.v3-fase-ovulatoria::before { background: radial-gradient(circle, rgba(212, 149, 106, 0.3) 0%, transparent 70%); }

.v3-ciclo-hero-card.v3-fase-lutea { background: linear-gradient(135deg, rgba(166, 140, 201, 0.18) 0%, rgba(184, 58, 107, 0.08) 100%); }
.v3-ciclo-hero-card.v3-fase-lutea::before { background: radial-gradient(circle, rgba(166, 140, 201, 0.3) 0%, transparent 70%); }

.v3-ciclo-hero-card.v3-fase-modulado { background: linear-gradient(135deg, rgba(212, 149, 106, 0.15) 0%, rgba(184, 58, 107, 0.08) 100%); }
.v3-ciclo-hero-card.v3-fase-modulado::before { background: radial-gradient(circle, rgba(212, 149, 106, 0.3) 0%, transparent 70%); }

.v3-ciclo-hero-card.v3-atraso { background: linear-gradient(135deg, rgba(201, 169, 97, 0.2) 0%, rgba(212, 149, 106, 0.15) 100%); }

.v3-ciclo-hero-label {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(166, 140, 201, 0.25);
  color: #6B4A9A;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 20px;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}

.v3-ciclo-hero-card.v3-fase-menstrual .v3-ciclo-hero-label { background: rgba(215, 107, 118, 0.25); color: #8B3A43; }
.v3-ciclo-hero-card.v3-fase-folicular .v3-ciclo-hero-label { background: rgba(156, 175, 136, 0.3); color: #4F6B3D; }
.v3-ciclo-hero-card.v3-fase-ovulatoria .v3-ciclo-hero-label { background: rgba(212, 149, 106, 0.3); color: #8B5A2F; }
.v3-ciclo-hero-card.v3-fase-lutea .v3-ciclo-hero-label { background: rgba(166, 140, 201, 0.3); color: #5D4182; }
.v3-ciclo-hero-card.v3-fase-modulado .v3-ciclo-hero-label,
.v3-ciclo-hero-card.v3-atraso .v3-ciclo-hero-label { background: rgba(212, 149, 106, 0.25); color: #8B5A2F; }

.v3-ciclo-hero-moon {
  font-size: 44px;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 12px rgba(166, 140, 201, 0.3));
  position: relative;
  z-index: 2;
}

.v3-ciclo-hero-nome {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--v3-grafite);
  letter-spacing: -0.3px;
  margin-bottom: 4px;
  position: relative;
  z-index: 2;
}

.v3-ciclo-hero-day {
  font-size: 11px;
  color: var(--v3-taupe);
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}

.v3-ciclo-hero-message {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--v3-grafite);
  position: relative;
  z-index: 2;
  margin-bottom: 8px;
}

.v3-ciclo-registrar-menstruacao {
  margin-top: 12px;
  position: relative;
  z-index: 2;
}

/* Aviso contraceptivo */
.v3-ciclo-aviso {
  background: rgba(201, 169, 97, 0.12);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: var(--v3-r-md);
  padding: 12px 14px;
  margin: 12px 16px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--v3-grafite);
  font-family: 'Fraunces', serif;
  font-style: italic;
}

/* Calendário */
.v3-ciclo-calendar {
  background: var(--v3-glass-strong);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--v3-r-lg);
  padding: 16px;
  margin: 0 16px;
}

.v3-cal-header {
  margin-bottom: 12px;
}

.v3-cal-month {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 15px;
}

.v3-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}

.v3-cal-weekdays > div {
  text-align: center;
  font-size: 9px;
  color: var(--v3-taupe);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 0;
}

.v3-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.v3-cal-day {
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--v3-grafite);
  position: relative;
}

.v3-cal-day.v3-empty { visibility: hidden; }

.v3-cal-day.v3-fase-menstrual { background: rgba(215, 107, 118, 0.35); color: #8B3A43; font-weight: 600; }
.v3-cal-day.v3-fase-folicular { background: rgba(156, 175, 136, 0.3); color: #4F6B3D; }
.v3-cal-day.v3-fase-ovulatoria { background: rgba(212, 149, 106, 0.4); color: #8B5A2F; font-weight: 600; }
.v3-cal-day.v3-fase-lutea { background: rgba(166, 140, 201, 0.3); color: #5D4182; }

.v3-cal-day.v3-today {
  background: var(--v3-magenta) !important;
  color: white !important;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(184, 58, 107, 0.35);
}

.v3-cal-day.v3-today::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 2px solid var(--v3-magenta);
  border-radius: 50%;
  opacity: 0.3;
}

.v3-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(184, 58, 107, 0.08);
}

.v3-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--v3-taupe);
}

.v3-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.v3-legend-dot.v3-fase-menstrual { background: rgba(215, 107, 118, 0.7); }
.v3-legend-dot.v3-fase-folicular { background: rgba(156, 175, 136, 0.7); }
.v3-legend-dot.v3-fase-ovulatoria { background: rgba(212, 149, 106, 0.8); }
.v3-legend-dot.v3-fase-lutea { background: rgba(166, 140, 201, 0.7); }

/* Recomendações */
.v3-ciclo-recos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px;
}

.v3-ciclo-reco {
  background: var(--v3-glass);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--v3-r-md);
  padding: 14px;
}

.v3-ciclo-reco-icon {
  font-size: 20px;
  margin-bottom: 8px;
}

.v3-ciclo-reco-label {
  font-size: 10px;
  color: var(--v3-taupe);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  font-weight: 600;
}

.v3-ciclo-reco-text {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--v3-grafite);
  line-height: 1.45;
}

/* Registro rápido */
.v3-ciclo-registro {
  padding: 0 16px;
}

.v3-registro-row {
  background: var(--v3-glass);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--v3-r-md);
  padding: 12px 14px;
  margin-bottom: 8px;
}

.v3-registro-row.v3-registro-sintomas {
  display: block;
}

.v3-registro-row:not(.v3-registro-sintomas) {
  display: flex;
  align-items: center;
  gap: 10px;
}

.v3-registro-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--v3-grafite);
  min-width: 60px;
}

.v3-registro-sintomas .v3-registro-label {
  margin-bottom: 10px;
  display: block;
}

.v3-registro-chips {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}

.v3-registro-chips.v3-wrap {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.v3-registro-chip {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  background: var(--v3-magenta-soft);
  color: var(--v3-taupe);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  transition: all 0.2s ease;
}

.v3-registro-chip:active {
  transform: scale(0.95);
}

.v3-registro-chip.v3-active {
  background: var(--v3-magenta);
  color: white;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   CICLO v2 — calendário interativo, modal, indicadores
   ═══════════════════════════════════════════════════════ */

/* Header do calendário com navegação */
.v3-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.v3-cal-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--v3-magenta-soft);
  border: none;
  color: var(--v3-magenta);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: inherit;
}

.v3-cal-nav-btn:active { transform: scale(0.92); }

/* Dia clicável */
.v3-cal-day.v3-cal-clickable {
  cursor: pointer;
  transition: transform 0.15s ease;
  position: relative;
}

.v3-cal-day.v3-cal-clickable:active {
  transform: scale(0.9);
}

.v3-cal-num {
  position: relative;
  z-index: 2;
}

/* Menstruação registrada — vermelho forte */
.v3-cal-day.v3-marc-menstruacao {
  background: rgba(215, 107, 118, 0.55) !important;
  color: #8B3A43 !important;
  font-weight: 700 !important;
  border: 2px solid rgba(215, 107, 118, 0.8);
  box-sizing: border-box;
}

/* Previsão futura — tracejado */
.v3-cal-day.v3-marc-prevista {
  background: transparent !important;
  color: rgba(215, 107, 118, 0.8) !important;
  border: 1.5px dashed rgba(215, 107, 118, 0.55);
  box-sizing: border-box;
}

/* Pontinhos indicadores no canto */
.v3-cal-dots {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  z-index: 2;
}

.v3-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
}

.v3-dot-pink { background: #EC6BB5; }
.v3-dot-purple { background: #A68CC9; }
.v3-dot-gold { background: var(--v3-gold); }

/* Legenda bolinhas de marcação prevista/menstruação */
.v3-legend-dot.v3-marc-prevista-dot {
  background: transparent;
  border: 1.5px dashed rgba(215, 107, 118, 0.7);
}
.v3-legend-dot.v3-marc-menstruacao-dot {
  background: rgba(215, 107, 118, 0.7);
  border: 1.5px solid rgba(215, 107, 118, 0.9);
}

/* Hint abaixo do calendário */
.v3-cal-hint {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(184, 58, 107, 0.06);
  text-align: center;
  font-size: 11px;
  color: var(--v3-taupe);
  font-family: 'Fraunces', serif;
  font-style: italic;
}

/* Próxima menstruação prevista */
.v3-ciclo-proxima {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(215, 107, 118, 0.1);
  border-radius: 12px;
  border: 1px dashed rgba(215, 107, 118, 0.3);
  font-size: 12px;
  color: var(--v3-grafite);
  position: relative;
  z-index: 2;
  font-family: 'Fraunces', serif;
}

.v3-ciclo-proxima strong {
  color: #8B3A43;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   MODAL DE EDIÇÃO DO DIA
   ═══════════════════════════════════════════════════════ */

.v3-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 36, 32, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9990;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

@media (min-width: 640px) {
  .v3-modal-overlay {
    align-items: center;
  }
}

.v3-modal-overlay.v3-show { opacity: 1; }

.v3-modal {
  background: linear-gradient(180deg, var(--v3-champagne) 0%, var(--v3-pearl) 100%);
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  border-radius: 28px 28px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 -20px 60px rgba(42, 36, 32, 0.15);
}

@media (min-width: 640px) {
  .v3-modal { border-radius: 28px; max-height: 85vh; }
}

.v3-modal-overlay.v3-show .v3-modal { transform: translateY(0); }

.v3-modal-small { max-height: 60vh; }

.v3-modal-header {
  padding: 20px 22px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid rgba(184, 58, 107, 0.08);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}

.v3-modal-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 28px;
  color: var(--v3-magenta);
  letter-spacing: -0.5px;
  line-height: 1;
}

.v3-modal-title span {
  font-weight: 400;
  font-size: 20px;
  color: var(--v3-taupe);
  font-style: italic;
  margin-left: 4px;
}

.v3-modal-subtitle {
  font-size: 11px;
  color: var(--v3-taupe);
  margin-top: 4px;
  letter-spacing: 0.3px;
}

.v3-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--v3-magenta-soft);
  border: none;
  color: var(--v3-magenta);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
}

.v3-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 22px 20px;
}

.v3-modal-body::-webkit-scrollbar { width: 4px; }
.v3-modal-body::-webkit-scrollbar-thumb { background: rgba(184, 58, 107, 0.2); border-radius: 4px; }

.v3-modal-section {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(184, 58, 107, 0.06);
}
.v3-modal-section:last-child {
  border-bottom: none;
  padding-bottom: 8px;
  margin-bottom: 0;
}

.v3-modal-section-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--v3-grafite);
  margin-bottom: 12px;
  letter-spacing: -0.2px;
}

.v3-modal-subsection {
  font-size: 11px;
  color: var(--v3-taupe);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 14px 0 8px;
  font-weight: 600;
}

/* Toggle row (switch) */
.v3-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--v3-r-md);
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--v3-grafite);
}

.v3-toggle-row small {
  display: block;
  font-size: 10px;
  color: var(--v3-taupe);
  margin-top: 2px;
  font-style: italic;
  font-family: 'Fraunces', serif;
}

.v3-toggle-row input[type="checkbox"] {
  display: none;
}

.v3-toggle-switch {
  width: 44px;
  height: 24px;
  background: rgba(184, 58, 107, 0.15);
  border-radius: 12px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s ease;
}

.v3-toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(42, 36, 32, 0.15);
  transition: transform 0.25s ease;
}

.v3-toggle-row input[type="checkbox"]:checked + .v3-toggle-switch {
  background: var(--v3-magenta);
}

.v3-toggle-row input[type="checkbox"]:checked + .v3-toggle-switch::after {
  transform: translateX(20px);
}

.v3-toggle-row input[type="checkbox"]:disabled + .v3-toggle-switch {
  opacity: 0.4;
}

/* Toggles mini (grid de sinais corporais) */
.v3-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.v3-toggle-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  font-size: 12px;
  color: var(--v3-grafite);
  cursor: pointer;
  transition: all 0.2s ease;
}

.v3-toggle-mini input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(184, 58, 107, 0.3);
  border-radius: 5px;
  background: white;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.v3-toggle-mini input[type="checkbox"]:checked {
  background: var(--v3-magenta);
  border-color: var(--v3-magenta);
}

.v3-toggle-mini input[type="checkbox"]:checked::after {
  content: '✓';
  color: white;
  font-size: 12px;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.v3-toggle-mini:has(input:checked) {
  background: var(--v3-magenta-soft);
  border-color: var(--v3-magenta-mid);
}

/* Chips (fluxo, sintomas, muco) */
.v3-chips-row {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}

.v3-chips-row.v3-chips-wrap {
  flex-wrap: wrap;
}

.v3-chip-btn {
  padding: 8px 14px;
  background: white;
  border: 1px solid rgba(184, 58, 107, 0.15);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--v3-grafite);
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.v3-chip-btn:active { transform: scale(0.94); }

.v3-chip-btn.v3-active {
  background: var(--v3-magenta);
  color: white;
  border-color: var(--v3-magenta);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(184, 58, 107, 0.2);
}

/* Textarea */
.v3-textarea {
  width: 100%;
  min-height: 70px;
  padding: 12px 14px;
  background: white;
  border: 1px solid rgba(184, 58, 107, 0.15);
  border-radius: var(--v3-r-md);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: var(--v3-grafite);
  resize: vertical;
  outline: none;
}

.v3-textarea:focus {
  border-color: var(--v3-magenta);
  box-shadow: 0 0 0 3px var(--v3-magenta-soft);
}

.v3-textarea::placeholder {
  color: var(--v3-taupe);
  font-style: italic;
  font-family: 'Fraunces', serif;
}

.v3-char-count {
  text-align: right;
  font-size: 10px;
  color: var(--v3-taupe);
  margin-top: 4px;
  letter-spacing: 0.5px;
}

/* Footer do modal */
.v3-modal-footer {
  display: flex;
  gap: 10px;
  padding: 14px 22px 22px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(184, 58, 107, 0.08);
}

.v3-modal-footer .v3-btn-primary,
.v3-modal-footer .v3-btn-secondary {
  flex: 1;
}

/* ═══════════════════════════════════════════════════════
   CICLO — Configurações (botões, modal danger)
   ═══════════════════════════════════════════════════════ */

/* Ícone ⚙️ no hero card */
.v3-ciclo-config-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  z-index: 3;
  transition: transform 0.2s ease;
  font-family: inherit;
}

.v3-ciclo-config-icon:active {
  transform: scale(0.9);
}

/* Botão "text" (link discreto pro fim da aba) */
.v3-btn-text {
  padding: 12px;
  background: transparent;
  border: none;
  color: var(--v3-taupe);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(184, 58, 107, 0.25);
}

.v3-btn-text:hover { color: var(--v3-magenta); }
.v3-btn-text:active { transform: scale(0.97); }

/* Botão danger (desativar tracker) */
.v3-btn-danger {
  padding: 12px 18px;
  background: var(--v3-terracotta);
  color: white;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: var(--v3-r-md);
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.v3-btn-danger:active {
  transform: scale(0.97);
}

.v3-btn-danger.v3-pulse {
  animation: v3DangerPulse 1s ease-in-out infinite;
}

@keyframes v3DangerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 116, 101, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(200, 116, 101, 0); }
}

/* Seção danger no modal de config */
.v3-modal-danger {
  background: rgba(200, 116, 101, 0.06);
  border-radius: var(--v3-r-md);
  padding: 16px;
  margin-top: 8px;
}

.v3-modal-danger .v3-modal-section-title {
  color: var(--v3-terracotta);
}

/* ═══════════════════════════════════════════════════════
   PÓDIO — usuária no pódio (destaque) + celebração
   ═══════════════════════════════════════════════════════ */

.v3-podium-slot.v3-podium-user .v3-podium-avatar {
  border-color: var(--v3-magenta) !important;
  box-shadow: 0 4px 20px rgba(184, 58, 107, 0.35);
  transform: scale(1.05);
}

.v3-podium-slot.v3-podium-user .v3-podium-name {
  color: var(--v3-magenta);
  font-weight: 700;
}

.v3-podium-slot.v3-podium-user .v3-podium-xp {
  font-weight: 700;
}

.v3-podium-slot.v3-podium-user::before {
  content: '✨';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  filter: drop-shadow(0 2px 4px rgba(201, 169, 97, 0.5));
  animation: v3SparkleFloat 2s ease-in-out infinite;
  z-index: 5;
}

.v3-podium-slot {
  position: relative;
}

@keyframes v3SparkleFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

.v3-my-rank-celebration {
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.15) 0%, rgba(184, 58, 107, 0.1) 100%) !important;
  border-color: var(--v3-gold) !important;
}

.v3-my-rank-celebration .v3-my-rank-pos {
  font-size: 24px !important;
}

/* Pulse pra botão secondary em modo confirmar */
.v3-btn-secondary.v3-confirm-pulse {
  animation: v3DangerPulse 1s ease-in-out infinite;
  background: var(--v3-magenta-soft);
  color: var(--v3-magenta);
  border-color: var(--v3-magenta);
}

/* ═══════════════════════════════════════════════════════
   NOTIFICATIONS — página, status, tutorial, toggles
   ═══════════════════════════════════════════════════════ */

/* Botão voltar no header da página */
.v3-back-btn {
  background: transparent;
  border: none;
  color: var(--v3-magenta);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px 8px 0;
  cursor: pointer;
  display: inline-block;
  margin-right: 12px;
}

.v3-back-btn:active { opacity: 0.6; }

/* Status da permissão */
.v3-notif-status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin: 0 16px 8px;
  border-radius: var(--v3-r-lg);
  background: var(--v3-glass);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.v3-notif-status-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.v3-notif-status-text {
  flex: 1;
  font-size: 12px;
  line-height: 1.5;
  color: var(--v3-grafite);
}

.v3-notif-status-text strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.v3-notif-status.v3-notif-warning {
  background: rgba(201, 169, 97, 0.12);
  border-color: rgba(201, 169, 97, 0.25);
}

.v3-notif-status.v3-notif-ok {
  background: rgba(156, 175, 136, 0.15);
  border-color: rgba(156, 175, 136, 0.3);
}

.v3-notif-status.v3-notif-pending {
  background: linear-gradient(135deg, rgba(184, 58, 107, 0.1) 0%, rgba(212, 149, 106, 0.08) 100%);
  border-color: rgba(184, 58, 107, 0.2);
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}

.v3-notif-status.v3-notif-pending .v3-notif-status-icon { font-size: 36px; }
.v3-notif-status.v3-notif-pending .v3-notif-status-text { text-align: center; }

.v3-notif-test-btn {
  flex-shrink: 0;
  padding: 8px 16px !important;
  font-size: 12px !important;
}

/* Tabs do tutorial (iOS / Android) */
.v3-notif-tabs {
  display: flex;
  gap: 6px;
  margin: 0 16px 12px;
  padding: 4px;
  background: var(--v3-glass);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.v3-notif-tab {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--v3-taupe);
  cursor: pointer;
  transition: all 0.2s ease;
}

.v3-notif-tab.v3-active {
  background: var(--v3-magenta);
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(184, 58, 107, 0.2);
}

/* Tutorial steps */
.v3-tutorial {
  margin: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.v3-tutorial-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  background: white;
  border-radius: var(--v3-r-md);
  border: 1px solid rgba(184, 58, 107, 0.1);
}

.v3-tutorial-step.v3-tutorial-final {
  background: linear-gradient(135deg, rgba(156, 175, 136, 0.12) 0%, rgba(201, 169, 97, 0.08) 100%);
  border-color: rgba(156, 175, 136, 0.3);
}

.v3-tutorial-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--v3-magenta);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.v3-tutorial-step.v3-tutorial-final .v3-tutorial-number {
  background: #4F6B3D;
  font-size: 16px;
}

.v3-tutorial-content {
  flex: 1;
}

.v3-tutorial-content strong {
  display: block;
  font-size: 13px;
  color: var(--v3-grafite);
  margin-bottom: 4px;
  font-weight: 600;
}

.v3-tutorial-content p {
  font-size: 12px;
  color: var(--v3-taupe);
  line-height: 1.5;
  margin: 0;
}

/* Notification sections (toggles + controls) */
.v3-notif-section {
  margin: 0 16px 10px;
  background: white;
  border-radius: var(--v3-r-md);
  border: 1px solid rgba(184, 58, 107, 0.08);
  overflow: hidden;
}

.v3-notif-section .v3-toggle-row {
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.v3-notif-section .v3-toggle-row small {
  font-size: 11px;
  color: var(--v3-taupe);
  font-style: italic;
  display: block;
  margin-top: 2px;
}

.v3-notif-controls {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(184, 58, 107, 0.06);
  background: var(--v3-pearl);
}

.v3-notif-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--v3-grafite);
}

.v3-notif-time-row:last-child { margin-bottom: 0; }

.v3-notif-time-row label {
  font-weight: 500;
  flex: 1;
}

.v3-input-sm {
  max-width: 100px;
  padding: 8px 10px !important;
  font-size: 13px !important;
}

input[type="number"].v3-input-sm {
  width: 70px;
  text-align: center;
}

input[type="time"].v3-input-sm {
  width: 110px;
}

.v3-notif-water-controls .v3-notif-time-row {
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════
   ABA ALMA — devocional, afirmação, reflexões, streak
   ═══════════════════════════════════════════════════════ */

#v3-page-alma {
  padding-bottom: 120px;
}

/* Hero card */
.v3-alma-hero {
  margin: 0 16px 16px;
  padding: 24px 22px 28px;
  border-radius: var(--v3-r-xl);
  background: linear-gradient(135deg, rgba(184, 58, 107, 0.08) 0%, rgba(212, 149, 106, 0.06) 100%);
  border: 1px solid rgba(184, 58, 107, 0.12);
  text-align: center;
}

.v3-alma-saudacao {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--v3-magenta);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.v3-alma-versiculo-hero {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.6;
  color: var(--v3-grafite);
  margin-bottom: 12px;
}

.v3-alma-ref-hero {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--v3-magenta);
  letter-spacing: 0.4px;
}

/* Streak card */
.v3-alma-streak-card {
  margin: 0 16px 14px;
  padding: 14px 18px;
  border-radius: var(--v3-r-md);
  background: white;
  border: 1px solid rgba(201, 169, 97, 0.2);
  display: flex;
  align-items: center;
  gap: 14px;
}

.v3-alma-streak-icone {
  font-size: 28px;
  flex-shrink: 0;
}

.v3-alma-streak-info {
  flex: 1;
}

.v3-alma-streak-numero {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--v3-trophy-gold);
  line-height: 1;
}

.v3-alma-streak-label {
  font-size: 11px;
  color: var(--v3-taupe);
  letter-spacing: 0.4px;
}

.v3-alma-streak-recorde {
  font-size: 10px;
  color: var(--v3-taupe);
  font-style: italic;
  text-align: right;
}

/* Cards principais (devocional, afirmação, reflexão) */
.v3-alma-card {
  margin: 0 16px 14px;
  padding: 18px 18px 16px;
  background: white;
  border-radius: var(--v3-r-md);
  border: 1px solid rgba(184, 58, 107, 0.1);
  transition: all 0.3s ease;
}

.v3-alma-card.v3-alma-card-feita {
  background: linear-gradient(135deg, rgba(156, 175, 136, 0.08) 0%, rgba(201, 169, 97, 0.05) 100%);
  border-color: rgba(156, 175, 136, 0.25);
}

.v3-alma-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.v3-alma-card-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--v3-magenta);
}

.v3-alma-card-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #4F6B3D;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.v3-alma-card-versiculo {
  font-family: 'Fraunces', serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.6;
  color: var(--v3-grafite);
  margin-bottom: 8px;
}

.v3-alma-card-ref {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--v3-magenta);
  letter-spacing: 0.3px;
  margin-bottom: 14px;
}

.v3-alma-card-reflexao {
  font-size: 13px;
  line-height: 1.6;
  color: var(--v3-grafite);
  margin-bottom: 12px;
}

.v3-alma-card-pergunta {
  font-family: 'Fraunces', serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--v3-magenta);
  padding: 10px 12px;
  background: rgba(184, 58, 107, 0.05);
  border-left: 3px solid var(--v3-magenta);
  border-radius: 0 8px 8px 0;
  margin-bottom: 14px;
}

.v3-alma-card-pergunta-grande {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  font-style: italic;
  line-height: 1.55;
  color: var(--v3-grafite);
  padding: 14px 16px;
  background: rgba(184, 58, 107, 0.06);
  border-left: 3px solid var(--v3-magenta);
  border-radius: 0 8px 8px 0;
  margin-bottom: 12px;
}

.v3-alma-afirmacao-texto {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-style: italic;
  line-height: 1.55;
  color: var(--v3-grafite);
  text-align: center;
  padding: 16px 12px;
  margin-bottom: 14px;
}

.v3-alma-card-btn {
  width: 100%;
}

.v3-alma-card-feito {
  text-align: center;
  font-size: 12px;
  color: #4F6B3D;
  font-weight: 600;
  padding: 10px;
  font-style: italic;
}

/* Textarea de reflexão */
.v3-alma-textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  border: 1px solid rgba(184, 58, 107, 0.15);
  border-radius: 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--v3-grafite);
  background: var(--v3-pearl);
  resize: vertical;
  margin-bottom: 8px;
  outline: none;
  transition: border-color 0.2s ease;
}

.v3-alma-textarea:focus {
  border-color: var(--v3-magenta);
  background: white;
}

.v3-alma-textarea-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--v3-taupe);
  margin-bottom: 12px;
}

.v3-alma-xp-hint {
  font-style: italic;
  color: var(--v3-magenta);
}

.v3-alma-xp-feito {
  color: #4F6B3D;
  font-weight: 600;
}

/* Botão histórico */
.v3-alma-historico-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 16px 16px 0;
  padding: 14px;
  background: transparent;
  border: 1px dashed rgba(184, 58, 107, 0.3);
  border-radius: var(--v3-r-md);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--v3-magenta);
  cursor: pointer;
  transition: all 0.2s ease;
}

.v3-alma-historico-btn:active {
  background: rgba(184, 58, 107, 0.05);
}

/* Modal histórico */
.v3-alma-historico-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.v3-alma-historico-entry {
  padding: 14px;
  background: var(--v3-pearl);
  border-radius: 12px;
  border-left: 3px solid var(--v3-magenta);
}

.v3-alma-historico-data {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--v3-magenta);
  margin-bottom: 6px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.v3-alma-historico-pergunta {
  font-family: 'Fraunces', serif;
  font-size: 12px;
  font-style: italic;
  color: var(--v3-taupe);
  margin-bottom: 8px;
  line-height: 1.4;
}

.v3-alma-historico-texto {
  font-size: 13px;
  line-height: 1.6;
  color: var(--v3-grafite);
}

/* Toast XP da Alma */
.v3-alma-toast-xp {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 14px 22px;
  background: white;
  border-radius: 30px;
  box-shadow: 0 8px 24px rgba(184, 58, 107, 0.25);
  border: 1px solid rgba(184, 58, 107, 0.15);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--v3-magenta);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.v3-alma-toast-xp.v3-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.v3-alma-error {
  text-align: center;
  padding: 40px 20px;
  color: var(--v3-taupe);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════
   ALMA — Hero compact, calendário, header do dia
   ═══════════════════════════════════════════════════════ */

.v3-alma-hero-compact {
  padding: 16px 22px 18px;
  margin-bottom: 12px;
}

.v3-alma-hero-compact .v3-alma-saudacao {
  margin-bottom: 0;
}

/* Calendário */
.v3-alma-calendario {
  margin: 0 16px 12px;
  padding: 14px 14px 10px;
  background: white;
  border-radius: var(--v3-r-md);
  border: 1px solid rgba(184, 58, 107, 0.1);
}

.v3-alma-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.v3-alma-cal-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--v3-grafite);
  text-transform: capitalize;
}

.v3-alma-cal-nav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(184, 58, 107, 0.08);
  color: var(--v3-magenta);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.v3-alma-cal-nav:active {
  background: var(--v3-magenta);
  color: white;
}

.v3-alma-cal-semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 6px;
}

.v3-alma-cal-dia-semana {
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--v3-taupe);
  padding: 4px 0;
  letter-spacing: 0.4px;
}

.v3-alma-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.v3-alma-cal-empty {
  aspect-ratio: 1;
}

.v3-alma-cal-dia {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s ease;
  position: relative;
  padding: 2px;
}

.v3-alma-cal-numero {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--v3-grafite);
  line-height: 1;
}

.v3-alma-cal-dia:active {
  background: rgba(184, 58, 107, 0.06);
}

.v3-alma-cal-dia.v3-alma-cal-hoje {
  background: rgba(184, 58, 107, 0.1);
}

.v3-alma-cal-dia.v3-alma-cal-hoje .v3-alma-cal-numero {
  color: var(--v3-magenta);
  font-weight: 700;
}

.v3-alma-cal-dia.v3-alma-cal-selecionado {
  background: var(--v3-magenta);
  box-shadow: 0 2px 8px rgba(184, 58, 107, 0.3);
}

.v3-alma-cal-dia.v3-alma-cal-selecionado .v3-alma-cal-numero {
  color: white;
  font-weight: 700;
}

.v3-alma-cal-dia.v3-alma-cal-futuro .v3-alma-cal-numero {
  color: rgba(120, 100, 90, 0.4);
}

.v3-alma-cal-dia.v3-alma-cal-futuro:not(.v3-alma-cal-selecionado) {
  cursor: default;
}

.v3-alma-cal-dots {
  display: flex;
  gap: 2px;
  margin-top: 2px;
  height: 4px;
  align-items: center;
}

.v3-alma-cal-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

.v3-alma-dot-devocional { background: #B83A6B; }
.v3-alma-dot-afirmacao  { background: #D4956A; }
.v3-alma-dot-reflexao   { background: #C9A961; }

.v3-alma-cal-selecionado .v3-alma-dot-devocional,
.v3-alma-cal-selecionado .v3-alma-dot-afirmacao,
.v3-alma-cal-selecionado .v3-alma-dot-reflexao {
  background: white;
}

.v3-alma-cal-legenda {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(184, 58, 107, 0.06);
  font-size: 10px;
  color: var(--v3-taupe);
}

.v3-alma-cal-legenda span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Header do dia selecionado */
.v3-alma-dia-header {
  margin: 0 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--v3-pearl);
  border-radius: 10px;
}

.v3-alma-dia-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--v3-grafite);
  text-transform: capitalize;
}

.v3-alma-dia-badge {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.v3-alma-badge-hoje {
  background: var(--v3-magenta);
  color: white;
}

.v3-alma-badge-futuro {
  background: rgba(120, 100, 90, 0.15);
  color: var(--v3-taupe);
}

.v3-alma-badge-passado {
  background: rgba(201, 169, 97, 0.2);
  color: #8B6F2A;
}

/* Textarea readonly (dia futuro) */
.v3-alma-textarea-readonly {
  padding: 16px;
  text-align: center;
  font-family: 'Fraunces', serif;
  font-size: 13px;
  font-style: italic;
  color: var(--v3-taupe);
  background: var(--v3-pearl);
  border-radius: 12px;
  border: 1px dashed rgba(184, 58, 107, 0.15);
}

/* ═══════════════════════════════════════════════════════
   ALMA — Escala dourada progressiva (1/2/3 atividades)
   Aplicada como fundo do círculo do dia
   ═══════════════════════════════════════════════════════ */

.v3-alma-cal-dia.v3-alma-progresso-1 {
  background: rgba(201, 169, 97, 0.18);
}

.v3-alma-cal-dia.v3-alma-progresso-2 {
  background: rgba(201, 169, 97, 0.45);
}

.v3-alma-cal-dia.v3-alma-progresso-3 {
  background: linear-gradient(135deg, #D4B068 0%, #C9A961 100%);
  box-shadow: 0 2px 6px rgba(201, 169, 97, 0.35);
}

.v3-alma-cal-dia.v3-alma-progresso-3 .v3-alma-cal-numero {
  color: white;
  font-weight: 700;
}

/* Quando selecionado, magenta vence o dourado (estado de navegação > estado de progresso) */
.v3-alma-cal-dia.v3-alma-cal-selecionado.v3-alma-progresso-1,
.v3-alma-cal-dia.v3-alma-cal-selecionado.v3-alma-progresso-2,
.v3-alma-cal-dia.v3-alma-cal-selecionado.v3-alma-progresso-3 {
  background: var(--v3-magenta);
  box-shadow: 0 2px 8px rgba(184, 58, 107, 0.3);
}

.v3-alma-cal-dia.v3-alma-cal-selecionado.v3-alma-progresso-3 .v3-alma-cal-numero {
  color: white;
}

/* Pontinhos contrastando melhor sobre fundo dourado intenso */
.v3-alma-progresso-3 .v3-alma-dot-devocional,
.v3-alma-progresso-3 .v3-alma-dot-afirmacao,
.v3-alma-progresso-3 .v3-alma-dot-reflexao {
  background: white;
  opacity: 0.95;
}

/* ═══════════════════════════════════════════════════════
   ABA MUSA IA — Chat conversacional
   ═══════════════════════════════════════════════════════ */

#v3-page-musa {
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 64px; /* espaço pro bottom nav */
  display: none; /* default oculto */
  flex-direction: column;
  z-index: 5;
}

/* Quando ativo, vira flex */
#v3-page-musa[style*="display: flex"],
#v3-page-musa[style*="display:flex"] {
  display: flex !important;
}

.v3-musa-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--v3-pearl);
}

/* Header da Musa */
.v3-musa-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: white;
  border-bottom: 1px solid rgba(184, 58, 107, 0.08);
  flex-shrink: 0;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.v3-musa-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #B83A6B 0%, #D4956A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.v3-musa-header-info {
  flex: 1;
  min-width: 0;
}

.v3-musa-nome {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--v3-grafite);
}

.v3-musa-status {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  color: var(--v3-taupe);
  font-weight: 500;
}

/* Área de mensagens */
.v3-musa-mensagens {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.v3-musa-loading {
  text-align: center;
  padding: 20px;
  color: var(--v3-taupe);
  font-size: 13px;
  font-style: italic;
}

/* Mensagens */
.v3-musa-msg {
  display: flex;
  max-width: 85%;
}

.v3-musa-msg-user {
  align-self: flex-end;
  justify-content: flex-end;
}

.v3-musa-msg-musa {
  align-self: flex-start;
  justify-content: flex-start;
}

.v3-musa-msg-bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.v3-musa-msg-user .v3-musa-msg-bubble {
  background: linear-gradient(135deg, #B83A6B 0%, #A0335E 100%);
  color: white;
  border-bottom-right-radius: 6px;
}

.v3-musa-msg-musa .v3-musa-msg-bubble {
  background: white;
  color: var(--v3-grafite);
  border: 1px solid rgba(184, 58, 107, 0.06);
  border-bottom-left-radius: 6px;
}

.v3-musa-msg-bubble strong {
  font-weight: 700;
  color: inherit;
}

/* Typing indicator */
.v3-musa-typing .v3-musa-msg-bubble {
  display: flex;
  gap: 4px;
  padding: 14px 16px;
}

.v3-musa-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--v3-magenta);
  opacity: 0.4;
  animation: v3-musa-typing 1.4s infinite;
}

.v3-musa-dot:nth-child(2) { animation-delay: 0.2s; }
.v3-musa-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes v3-musa-typing {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Empty state */
.v3-musa-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--v3-taupe);
}

.v3-musa-empty-icone {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.6;
}

.v3-musa-empty-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--v3-grafite);
  margin-bottom: 8px;
}

.v3-musa-empty-texto {
  font-size: 13px;
  line-height: 1.55;
  max-width: 280px;
  margin: 0 auto;
}

/* Input area */
.v3-musa-input-area {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px;
  background: white;
  border-top: 1px solid rgba(184, 58, 107, 0.08);
  flex-shrink: 0;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.v3-musa-input {
  flex: 1;
  border: 1px solid rgba(184, 58, 107, 0.15);
  border-radius: 22px;
  padding: 10px 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  resize: none;
  outline: none;
  background: var(--v3-pearl);
  color: var(--v3-grafite);
  max-height: 120px;
  transition: border-color 0.15s ease;
}

.v3-musa-input:focus {
  border-color: var(--v3-magenta);
  background: white;
}

.v3-musa-enviar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #B83A6B 0%, #A0335E 100%);
  color: white;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.v3-musa-enviar:disabled {
  background: rgba(184, 58, 107, 0.2);
  cursor: not-allowed;
}

.v3-musa-enviar:not(:disabled):active {
  transform: scale(0.95);
}

/* Aviso */
.v3-musa-aviso {
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  color: var(--v3-taupe);
  padding: 8px 14px 12px;
  background: white;
  font-style: italic;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════
   MUSA — Sugestões clicáveis no empty state
   ═══════════════════════════════════════════════════════ */

.v3-musa-sugestoes {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.v3-musa-sugestoes-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  color: var(--v3-taupe);
  font-style: italic;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}

.v3-musa-chip {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: white;
  border: 1px solid rgba(184, 58, 107, 0.15);
  border-radius: 22px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--v3-magenta);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.v3-musa-chip:active {
  background: rgba(184, 58, 107, 0.08);
  transform: scale(0.98);
}

.v3-musa-chip:hover {
  border-color: var(--v3-magenta);
  background: rgba(184, 58, 107, 0.04);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUSA PLANNER v3.0 — Aba Hoje (CSS Premium — Sessão 2A)
   ═══════════════════════════════════════════════════════════════════════════
   Princípios:
   - Light theme (off-white, nude, magenta, rose-gold, gradient magenta→orange)
   - Outfit + Fraunces (titulos do score)
   - Animações CSS, não JS
   - Re-render granular (transições CSS no DOM existente)
   - Mobile-first; quebra para desktop em min-width: 768px
   ═══════════════════════════════════════════════════════════════════════════ */

#v3-page-hoje {
  display: none;
  font-family: 'Outfit', sans-serif;
  color: var(--v3-grafite, #2A2420);
  background: linear-gradient(180deg, #FFF9F4 0%, #FFFCFA 100%);
  min-height: 100%;
  position: relative;
}

/* ── Loading & erro ─────────────────────────────────────────────────────── */
.v3hoje-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.v3hoje-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(233, 30, 99, 0.15);
  border-top-color: #E91E63;
  border-radius: 50%;
  animation: v3hoje-spin 0.7s linear infinite;
}
@keyframes v3hoje-spin {
  to { transform: rotate(360deg); }
}
.v3hoje-erro {
  padding: 40px 20px;
  text-align: center;
  color: #B83A6B;
  font-size: 15px;
  line-height: 1.5;
}

/* ── Wrap geral ─────────────────────────────────────────────────────────── */
.v3hoje-wrap {
  padding-bottom: 100px;
  max-width: 720px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER — saudação + data
   ═══════════════════════════════════════════════════════════════════════════ */
.v3hoje-header {
  padding: 22px 18px 14px;
  text-align: left;
}
.v3hoje-header-saud {
  font-family: 'Fraunces', 'Outfit', serif;
  font-size: 22px;
  font-weight: 400;
  color: #4A3F38;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.v3hoje-header-saud strong {
  font-weight: 600;
  background: linear-gradient(90deg, #E91E63 0%, #FF8A4B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.v3hoje-header-data {
  margin-top: 4px;
  font-size: 13px;
  color: #9A8B82;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0.2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCORE STICKY — anel + frase contextual
   ═══════════════════════════════════════════════════════════════════════════ */
.v3hoje-score-sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 8px 14px 12px;
  background: linear-gradient(180deg, rgba(255,249,244,0.96) 0%, rgba(255,249,244,0.88) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(233, 30, 99, 0.06);
}

.v3hoje-score-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF7F1 100%);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 24px -8px rgba(233, 30, 99, 0.12),
    0 2px 6px rgba(74, 63, 56, 0.04);
  border: 1px solid rgba(233, 30, 99, 0.06);
}

/* Anel SVG */
.v3hoje-ring-wrap {
  position: relative;
  width: 92px;
  height: 92px;
  flex-shrink: 0;
}
.v3hoje-ring {
  width: 100%;
  height: 100%;
}
.v3hoje-ring #v3hoje-ring-progress {
  transition: stroke-dashoffset 0.7s cubic-bezier(0.34, 1.2, 0.64, 1);
  filter: drop-shadow(0 1px 2px rgba(233, 30, 99, 0.2));
}
.v3hoje-ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 600;
  color: #2A2420;
  letter-spacing: -0.5px;
}
.v3hoje-ring-num small {
  font-size: 12px;
  font-weight: 500;
  color: #9A8B82;
  margin-left: 1px;
  letter-spacing: 0;
}

/* Texto ao lado do anel */
.v3hoje-score-info {
  flex: 1;
  min-width: 0;
}
.v3hoje-score-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #B83A6B;
  margin-bottom: 4px;
}
.v3hoje-score-progresso {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  color: #2A2420;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.v3hoje-score-progresso #v3hoje-feitos {
  font-weight: 600;
  color: #E91E63;
  transition: color 0.3s ease;
}
.v3hoje-score-progresso #v3hoje-total {
  color: #4A3F38;
}
.v3hoje-score-sep {
  font-size: 14px;
  color: #9A8B82;
  font-weight: 400;
  margin: 0 1px;
}
.v3hoje-score-tag {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: #9A8B82;
  font-weight: 400;
  margin-left: 4px;
}

/* Frase contextual */
.v3hoje-frase-wrap {
  margin-top: 10px;
  padding: 0 4px;
}
.v3hoje-frase {
  font-size: 14px;
  font-weight: 500;
  color: #6E5D52;
  line-height: 1.4;
  padding: 8px 12px;
  border-left: 3px solid #E91E63;
  background: linear-gradient(90deg, rgba(233, 30, 99, 0.04) 0%, transparent 100%);
  border-radius: 0 10px 10px 0;
  transition: opacity 0.25s ease;
  min-height: 20px;
}
.v3hoje-frase.is-fading {
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUB-TABS — sticky abaixo do score
   ═══════════════════════════════════════════════════════════════════════════ */
.v3hoje-subtabs {
  position: sticky;
  top: 0;
  z-index: 25;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 14px 14px 0;
  padding: 4px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  border: 1px solid rgba(233, 30, 99, 0.06);
  box-shadow: 0 2px 10px -4px rgba(74, 63, 56, 0.08);
}
.v3hoje-subtab {
  position: relative;
  z-index: 2;
  padding: 10px 8px;
  background: transparent;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #9A8B82;
  cursor: pointer;
  border-radius: 10px;
  transition: color 0.25s ease;
  letter-spacing: 0.1px;
}
.v3hoje-subtab.is-active {
  color: #E91E63;
  font-weight: 600;
}
.v3hoje-subtab-indicador {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: calc((100% - 8px) / 3);
  background: linear-gradient(135deg, rgba(233, 30, 99, 0.10) 0%, rgba(255, 138, 75, 0.10) 100%);
  border: 1px solid rgba(233, 30, 99, 0.15);
  border-radius: 10px;
  transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
  z-index: 1;
  pointer-events: none;
}
.v3hoje-subtab-indicador[data-pos="0"] { transform: translateX(4px); }
.v3hoje-subtab-indicador[data-pos="1"] { transform: translateX(calc(100% + 4px)); }
.v3hoje-subtab-indicador[data-pos="2"] { transform: translateX(calc(200% + 4px)); }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTEÚDO (sub-aba) — animação de entrada
   ═══════════════════════════════════════════════════════════════════════════ */
.v3hoje-conteudo {
  padding: 14px;
}
.v3hoje-conteudo.is-entering > * {
  animation: v3hoje-fade-up 0.35s ease both;
}
@keyframes v3hoje-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.v3hoje-sub {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATS CARDS — Mais Feito + Mês Atual
   ═══════════════════════════════════════════════════════════════════════════ */
.v3hoje-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.v3hoje-stat-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid rgba(233, 30, 99, 0.06);
  box-shadow: 0 2px 8px -4px rgba(74, 63, 56, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.v3hoje-stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(233, 30, 99, 0.15);
}
.v3hoje-stat-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(233, 30, 99, 0.08) 0%, rgba(255, 138, 75, 0.08) 100%);
  border-radius: 10px;
  font-size: 18px;
  flex-shrink: 0;
}
.v3hoje-stat-body {
  flex: 1;
  min-width: 0;
}
.v3hoje-stat-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #B83A6B;
  margin-bottom: 2px;
}
.v3hoje-stat-val {
  font-size: 14px;
  font-weight: 600;
  color: #2A2420;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v3hoje-stat-val-empty {
  color: #9A8B82;
  font-weight: 400;
  font-style: italic;
}
.v3hoje-stat-sub {
  font-size: 11px;
  color: #9A8B82;
  margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOCO (compromissos / hidratação / humor)
   ═══════════════════════════════════════════════════════════════════════════ */
.v3hoje-bloco {
  background: #FFFFFF;
  border-radius: 18px;
  border: 1px solid rgba(233, 30, 99, 0.06);
  box-shadow: 0 4px 14px -6px rgba(74, 63, 56, 0.06);
  overflow: hidden;
}

.v3hoje-bloco-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
}
.v3hoje-bloco-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #2A2420;
  letter-spacing: -0.1px;
}
.v3hoje-bloco-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(233, 30, 99, 0.10) 0%, rgba(255, 138, 75, 0.10) 100%);
  color: #E91E63;
  font-size: 13px;
  font-weight: 700;
}
.v3hoje-bloco-acoes {
  display: flex;
  gap: 6px;
}
.v3hoje-btn-ic {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid rgba(233, 30, 99, 0.12);
  background: rgba(233, 30, 99, 0.04);
  color: #B83A6B;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.v3hoje-btn-ic:hover:not(:disabled) {
  background: rgba(233, 30, 99, 0.10);
  transform: translateY(-1px);
}
.v3hoje-btn-ic:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-style: dashed;
}

/* Barra de progresso da lista */
.v3hoje-progresso-bar {
  position: relative;
  margin: 4px 16px 12px;
  height: 6px;
  background: rgba(233, 30, 99, 0.08);
  border-radius: 999px;
  overflow: visible;
}
.v3hoje-progresso-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #E91E63 0%, #FF8A4B 100%);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
  box-shadow: 0 0 8px rgba(233, 30, 99, 0.35);
}
.v3hoje-progresso-text {
  position: absolute;
  right: 0;
  top: -22px;
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: 12px;
  color: #9A8B82;
  font-weight: 500;
}
.v3hoje-progresso-text #v3hoje-progresso-feitos {
  color: #E91E63;
  font-weight: 700;
  font-size: 13px;
}
.v3hoje-progresso-pct {
  margin-left: 6px;
  color: #B83A6B;
  font-weight: 600;
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LISTA DE COMPROMISSOS
   ═══════════════════════════════════════════════════════════════════════════ */
.v3hoje-lista {
  display: flex;
  flex-direction: column;
  padding: 0 8px 8px;
}

.v3hoje-lista-vazia {
  padding: 28px 16px;
  text-align: center;
  color: #9A8B82;
  font-size: 14px;
  line-height: 1.5;
}
.v3hoje-lista-vazia span {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: #B89F92;
  font-style: italic;
}

.v3hoje-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  border-radius: 12px;
  background: transparent;
  border-left: 3px solid var(--cat-cor, #E91E63);
  margin: 4px 0;
  transition: background 0.25s ease, opacity 0.3s ease;
  position: relative;
}
.v3hoje-item:hover {
  background: rgba(233, 30, 99, 0.025);
}
.v3hoje-item.is-feito {
  opacity: 0.55;
}
.v3hoje-item.is-feito .v3hoje-item-nome {
  text-decoration: line-through;
  text-decoration-color: rgba(74, 63, 56, 0.4);
  color: #9A8B82;
}
.v3hoje-item.is-pop {
  animation: v3hoje-item-pop 0.45s cubic-bezier(0.34, 1.6, 0.64, 1);
}
@keyframes v3hoje-item-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.025); }
  100% { transform: scale(1); }
}

.v3hoje-item-handle {
  color: #D4C5BA;
  font-size: 11px;
  letter-spacing: -2px;
  cursor: grab;
  user-select: none;
  width: 12px;
  flex-shrink: 0;
  opacity: 0.5;
}

.v3hoje-item-check {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 2px solid var(--cat-cor, #E91E63);
  background: transparent;
  color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.34, 1.6, 0.64, 1);
  padding: 0;
}
.v3hoje-item-check:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 4px rgba(233, 30, 99, 0.06);
}
.v3hoje-item-check svg {
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.2s ease;
}
.v3hoje-item.is-feito .v3hoje-item-check {
  background: var(--cat-cor, #E91E63);
  color: #FFFFFF;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.18);
}
.v3hoje-item.is-feito .v3hoje-item-check svg {
  opacity: 1;
  transform: scale(1);
}

.v3hoje-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v3hoje-item-nome {
  font-size: 14px;
  font-weight: 500;
  color: #2A2420;
  line-height: 1.25;
  letter-spacing: -0.1px;
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
.v3hoje-item-cat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #9A8B82;
  font-weight: 400;
}
.v3hoje-item-cat-emoji {
  font-size: 12px;
}

.v3hoje-item-xp {
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(233, 30, 99, 0.10) 0%, rgba(255, 138, 75, 0.10) 100%);
  color: #B83A6B;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 1px solid rgba(233, 30, 99, 0.10);
  transition: all 0.25s ease;
}
.v3hoje-item.is-feito .v3hoje-item-xp {
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLOATING XP — bolha que sobe ao completar
   ═══════════════════════════════════════════════════════════════════════════ */
.v3hoje-float-xp {
  position: fixed;
  z-index: 9999;
  padding: 6px 12px;
  background: linear-gradient(135deg, #E91E63 0%, #FF8A4B 100%);
  color: #FFFFFF;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(233, 30, 99, 0.4);
  pointer-events: none;
  animation: v3hoje-float-up 1.1s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
  letter-spacing: 0.5px;
}
@keyframes v3hoje-float-up {
  0%   { opacity: 0; transform: translateY(4px) scale(0.85); }
  15%  { opacity: 1; transform: translateY(0) scale(1.05); }
  25%  { transform: translateY(-2px) scale(1); }
  100% { opacity: 0; transform: translateY(-50px) scale(0.95); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONFETE DOURADO — quando bate 100%
   ═══════════════════════════════════════════════════════════════════════════ */
.v3hoje-confete-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
}
.v3hoje-confete {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  animation: v3hoje-confete-fall 1.8s cubic-bezier(0.55, 0, 0.45, 1) forwards;
  opacity: 0.95;
}
@keyframes v3hoje-confete-fall {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) translateX(var(--dx, 0)) rotate(var(--rot, 360deg)); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLACEHOLDERS PREMIUM — Hidratação/Humor inline + Sub-abas Esta semana/Agenda
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bloco placeholder dentro da aba Hoje (hidratação + humor) */
.v3hoje-bloco-placeholder {
  background: linear-gradient(135deg, #FFFCFA 0%, #FFF6EE 100%);
  border-style: dashed;
  border-color: rgba(233, 30, 99, 0.15);
}
.v3hoje-placeholder-conteudo {
  padding: 16px 20px 22px;
  text-align: center;
}
.v3hoje-placeholder-msg {
  font-size: 14px;
  font-weight: 600;
  color: #B83A6B;
  margin-bottom: 4px;
}
.v3hoje-placeholder-mini {
  font-size: 12px;
  color: #9A8B82;
  font-style: italic;
  line-height: 1.4;
}

/* Sub-aba placeholder (Esta semana + Agenda) — card maior, premium */
.v3hoje-sub-placeholder {
  align-items: center;
}
.v3hoje-placeholder-card {
  width: 100%;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF7F1 100%);
  border-radius: 22px;
  padding: 36px 24px 28px;
  text-align: center;
  border: 1px dashed rgba(233, 30, 99, 0.18);
  box-shadow: 0 6px 20px -10px rgba(233, 30, 99, 0.10);
  position: relative;
  overflow: hidden;
}
.v3hoje-placeholder-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, rgba(233, 30, 99, 0.06) 0%, transparent 70%);
  pointer-events: none;
}
.v3hoje-placeholder-icon {
  font-size: 38px;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 4px rgba(233, 30, 99, 0.15));
}
.v3hoje-placeholder-titulo {
  font-family: 'Fraunces', 'Outfit', serif;
  font-size: 20px;
  font-weight: 600;
  color: #2A2420;
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}
.v3hoje-placeholder-desc {
  font-size: 13px;
  color: #6E5D52;
  line-height: 1.5;
  margin-bottom: 22px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.v3hoje-placeholder-eta {
  margin-top: 18px;
  display: inline-block;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(233, 30, 99, 0.08) 0%, rgba(255, 138, 75, 0.08) 100%);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #B83A6B;
  border: 1px solid rgba(233, 30, 99, 0.12);
}

/* Mini gráfico de barras (Esta semana) */
.v3hoje-mini-chart {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  height: 90px;
  padding: 8px 0;
  position: relative;
  z-index: 1;
}
.v3hoje-mini-bar {
  width: 18px;
  height: var(--h, 50%);
  background: linear-gradient(180deg, #FF8A4B 0%, #E91E63 100%);
  border-radius: 4px 4px 0 0;
  opacity: 0.5;
  animation: v3hoje-mini-bar-grow 0.9s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
.v3hoje-mini-bar:nth-child(1) { animation-delay: 0.0s; }
.v3hoje-mini-bar:nth-child(2) { animation-delay: 0.05s; }
.v3hoje-mini-bar:nth-child(3) { animation-delay: 0.1s; }
.v3hoje-mini-bar:nth-child(4) { animation-delay: 0.15s; }
.v3hoje-mini-bar:nth-child(5) { animation-delay: 0.2s; }
.v3hoje-mini-bar:nth-child(6) { animation-delay: 0.25s; }
.v3hoje-mini-bar:nth-child(7) { animation-delay: 0.3s; }
@keyframes v3hoje-mini-bar-grow {
  from { height: 0; opacity: 0; }
  to   { height: var(--h, 50%); opacity: 0.5; }
}

/* Mini calendário (Agenda) */
.v3hoje-mini-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  max-width: 280px;
  margin: 8px auto 0;
  position: relative;
  z-index: 1;
}
.v3hoje-mini-cel {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #9A8B82;
  background: rgba(233, 30, 99, 0.04);
  border-radius: 6px;
  font-weight: 500;
  opacity: 0.7;
}
.v3hoje-mini-cel.is-hoje {
  background: linear-gradient(135deg, #E91E63 0%, #FF8A4B 100%);
  color: #FFFFFF;
  font-weight: 700;
  opacity: 1;
  box-shadow: 0 2px 6px rgba(233, 30, 99, 0.35);
}
.v3hoje-mini-dot {
  position: absolute;
  bottom: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #FF8A4B;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVO — desktop
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .v3hoje-wrap {
    padding: 0 12px 100px;
  }
  .v3hoje-header {
    padding: 28px 18px 16px;
  }
  .v3hoje-header-saud {
    font-size: 26px;
  }
  .v3hoje-score-card {
    padding: 18px 22px;
  }
  .v3hoje-ring-wrap {
    width: 104px;
    height: 104px;
  }
  .v3hoje-ring {
    width: 100%;
    height: 100%;
  }
  .v3hoje-ring-num {
    font-size: 30px;
  }
  .v3hoje-stats-row {
    gap: 14px;
  }
  .v3hoje-stat-card {
    padding: 14px 16px;
  }
  .v3hoje-stat-icon {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }
  .v3hoje-item {
    padding: 14px 12px;
  }
  .v3hoje-item-nome {
    font-size: 15px;
  }
  .v3hoje-item-check {
    width: 30px;
    height: 30px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUSA PLANNER v3.0 — Aba Hoje (CSS Sessão 2B)
   Navegador com gráfico + hidratação + humor + modais + toast
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── NAVEGADOR DE DIAS COM GRÁFICO ──────────────────────────────────────── */
.v3hoje-navegador {
  padding: 0 14px 6px;
  position: relative;
}

.v3hoje-nav-wrap {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 12px 6px 8px;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF7F1 100%);
  border-radius: 18px;
  border: 1px solid rgba(233, 30, 99, 0.06);
  box-shadow: 0 2px 8px -4px rgba(74, 63, 56, 0.06);
}

.v3hoje-nav-seta {
  flex-shrink: 0;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #B83A6B;
  font-size: 24px;
  font-weight: 300;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.2s ease, transform 0.2s ease;
  font-family: 'Outfit', sans-serif;
  line-height: 1;
}
.v3hoje-nav-seta:hover {
  background: rgba(233, 30, 99, 0.06);
  transform: scale(1.05);
}
.v3hoje-nav-seta:active {
  transform: scale(0.95);
}

.v3hoje-nav-centro {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* SVG do gráfico */
.v3hoje-graf-svg {
  width: 100%;
  height: 56px;
  display: block;
  overflow: visible;
}
.v3hoje-graf-area {
  transition: d 0.4s ease;
}
.v3hoje-graf-linha {
  filter: drop-shadow(0 1px 2px rgba(233, 30, 99, 0.25));
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  animation: v3hoje-graf-draw 0.7s ease-out;
}
@keyframes v3hoje-graf-draw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

.v3hoje-graf-ponto {
  fill: #FFFFFF;
  stroke: #E91E63;
  stroke-width: 2;
  transition: r 0.3s cubic-bezier(0.34, 1.6, 0.64, 1), stroke-width 0.3s ease, fill 0.3s ease;
  cursor: pointer;
}
.v3hoje-graf-ponto.is-ativo {
  fill: #E91E63;
  stroke: #FFFFFF;
  stroke-width: 3;
  filter: drop-shadow(0 2px 4px rgba(233, 30, 99, 0.35));
}
.v3hoje-graf-ponto.is-futuro {
  fill: rgba(233, 30, 99, 0.25);
  stroke: rgba(233, 30, 99, 0.35);
  stroke-width: 1.5;
}

/* Labels dos dias */
.v3hoje-graf-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 2px;
  margin-top: -2px;
}
.v3hoje-graf-dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 2px 4px;
  border-radius: 8px;
  gap: 1px;
  transition: background 0.2s ease, transform 0.15s ease;
  position: relative;
}
.v3hoje-graf-dia:hover {
  background: rgba(233, 30, 99, 0.04);
}
.v3hoje-graf-dia:active {
  transform: scale(0.95);
}
.v3hoje-graf-letra {
  font-size: 9px;
  font-weight: 600;
  color: #9A8B82;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1;
}
.v3hoje-graf-numero {
  font-family: 'Fraunces', serif;
  font-size: 14px;
  font-weight: 500;
  color: #4A3F38;
  line-height: 1.1;
}
.v3hoje-graf-dia.is-hoje .v3hoje-graf-letra {
  color: #B83A6B;
  font-weight: 700;
}
.v3hoje-graf-dia.is-hoje .v3hoje-graf-numero {
  color: #E91E63;
  font-weight: 600;
}
.v3hoje-graf-dia.is-ativo {
  background: linear-gradient(135deg, rgba(233, 30, 99, 0.10) 0%, rgba(255, 138, 75, 0.10) 100%);
  border: 1px solid rgba(233, 30, 99, 0.18);
}
.v3hoje-graf-dia.is-ativo .v3hoje-graf-letra {
  color: #E91E63;
}
.v3hoje-graf-dia.is-ativo .v3hoje-graf-numero {
  color: #2A2420;
  font-weight: 600;
}
.v3hoje-graf-dia.is-futuro .v3hoje-graf-letra,
.v3hoje-graf-dia.is-futuro .v3hoje-graf-numero {
  color: #C9BAB0;
}

/* ── AVISO XP FORA DA TOLERÂNCIA ────────────────────────────────────────── */
.v3hoje-aviso-xp {
  padding: 12px 14px;
  background: linear-gradient(135deg, #FFF6E5 0%, #FFFAF0 100%);
  border: 1px solid rgba(255, 152, 0, 0.25);
  border-radius: 12px;
  font-size: 12px;
  color: #6E5028;
  line-height: 1.45;
}
.v3hoje-aviso-xp strong {
  color: #B57A1A;
}

/* ── MODO PASSADO / FUTURO ──────────────────────────────────────────────── */
.v3hoje-wrap.is-futuro .v3hoje-item {
  cursor: not-allowed;
  opacity: 0.7;
}
.v3hoje-wrap.is-futuro .v3hoje-item-check {
  cursor: not-allowed;
  opacity: 0.4;
}
.v3hoje-wrap.is-futuro .v3hoje-item-check:hover {
  transform: none;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOCO HIDRATAÇÃO REAL
   ═══════════════════════════════════════════════════════════════════════════ */
.v3hoje-meta-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: rgba(0, 188, 212, 0.08);
  border: 1px solid rgba(0, 188, 212, 0.18);
  color: #0097A7;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v3hoje-meta-btn:hover {
  background: rgba(0, 188, 212, 0.15);
}
.v3hoje-meta-edit-icon {
  font-size: 10px;
  opacity: 0.6;
}

.v3hoje-agua-conteudo {
  padding: 4px 16px 16px;
}

.v3hoje-agua-barra {
  position: relative;
  height: 70px;
  background: linear-gradient(180deg, rgba(0, 188, 212, 0.05) 0%, rgba(0, 188, 212, 0.10) 100%);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 188, 212, 0.10);
}

.v3hoje-agua-onda {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #4FC3D7 0%, #00ACC1 60%, #00838F 100%);
  border-radius: 14px 0 0 14px;
  transition: width 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
  overflow: hidden;
  box-shadow: 0 0 12px rgba(0, 188, 212, 0.25) inset;
}
.v3hoje-agua-onda-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  animation: v3hoje-onda-mover 4s linear infinite;
}
@keyframes v3hoje-onda-mover {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.v3hoje-agua-valor {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  color: #00558E;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  pointer-events: none;
}
.v3hoje-agua-onda + .v3hoje-agua-valor #v3hoje-agua-litros,
.v3hoje-agua-onda + .v3hoje-agua-valor .v3hoje-agua-unidade {
  /* mantém legível */
}
.v3hoje-agua-unidade {
  font-size: 14px;
  font-weight: 500;
  margin-left: -2px;
  color: #00558E;
}
.v3hoje-agua-de {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: #6E5D52;
  font-weight: 400;
  margin: 0 4px;
  opacity: 0.8;
}
.v3hoje-agua-meta {
  font-size: 14px;
  font-weight: 500;
  color: #6E5D52;
}

.v3hoje-agua-controles {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.v3hoje-agua-btn {
  flex: 1;
  border: none;
  border-radius: 14px;
  padding: 14px 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.v3hoje-agua-btn:active:not(:disabled) {
  transform: scale(0.97);
}
.v3hoje-agua-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.v3hoje-agua-btn-menos {
  background: rgba(0, 188, 212, 0.08);
  color: #0097A7;
  border: 1px solid rgba(0, 188, 212, 0.18);
  flex: 0.3;
  font-weight: 500;
  font-size: 13px;
}
.v3hoje-agua-btn-menos:hover:not(:disabled) {
  background: rgba(0, 188, 212, 0.15);
}

.v3hoje-agua-btn-mais {
  background: linear-gradient(135deg, #00ACC1 0%, #0288D1 100%);
  color: #FFFFFF;
  font-weight: 700;
  letter-spacing: 0.4px;
  flex: 0.7;
  box-shadow: 0 4px 14px -4px rgba(0, 172, 193, 0.5);
}
.v3hoje-agua-btn-mais:hover:not(:disabled) {
  box-shadow: 0 6px 18px -4px rgba(0, 172, 193, 0.6);
  transform: translateY(-1px);
}
.v3hoje-agua-btn-icone {
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOCO HUMOR REAL — sliders 0-10 com gradient
   ═══════════════════════════════════════════════════════════════════════════ */
.v3hoje-mood-mini-help {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #B83A6B;
  background: rgba(233, 30, 99, 0.06);
  padding: 4px 9px;
  border-radius: 999px;
}

.v3hoje-mood-conteudo {
  padding: 4px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.v3hoje-mood-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v3hoje-mood-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.v3hoje-mood-emoji {
  font-size: 16px;
}
.v3hoje-mood-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: #4A3F38;
}
.v3hoje-mood-valor {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--mood-cor, #E91E63);
  min-width: 28px;
  text-align: right;
  line-height: 1;
}

.v3hoje-mood-slider-wrap {
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
}

.v3hoje-mood-track {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: visible;
}

.v3hoje-mood-track-grad {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg,
    #E57373 0%,
    #FFB74D 30%,
    #FFD54F 50%,
    #AED581 75%,
    #4FC3F7 100%);
  opacity: 0.35;
}

.v3hoje-mood-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg,
    #E57373 0%,
    #FFB74D 30%,
    #FFD54F 50%,
    #AED581 75%,
    #4FC3F7 100%);
  transition: width 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
  box-shadow: 0 0 8px rgba(0,0,0,0.06) inset;
}

.v3hoje-mood-thumb {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--mood-cor, #E91E63);
  transform: translateY(-50%);
  transition: left 0.25s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.3s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  pointer-events: none;
}

.v3hoje-mood-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.v3hoje-mood-input:disabled {
  cursor: not-allowed;
}
.v3hoje-mood-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
}
.v3hoje-mood-input::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAIS — Bottom sheet
   ═══════════════════════════════════════════════════════════════════════════ */
.v3hoje-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(40, 28, 22, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: v3hoje-overlay-in 0.25s ease;
}
@keyframes v3hoje-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.v3hoje-modal {
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  background: #FFFFFF;
  border-radius: 22px 22px 0 0;
  padding: 8px 18px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: v3hoje-modal-in 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
  box-shadow: 0 -8px 32px -8px rgba(74, 63, 56, 0.25);
}
@keyframes v3hoje-modal-in {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.v3hoje-modal-handle {
  width: 40px;
  height: 4px;
  background: rgba(74, 63, 56, 0.18);
  border-radius: 999px;
  margin: 4px auto 14px;
}

.v3hoje-modal-titulo {
  font-family: 'Fraunces', 'Outfit', serif;
  font-size: 22px;
  font-weight: 600;
  color: #2A2420;
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}

.v3hoje-modal-desc {
  font-size: 13px;
  color: #6E5D52;
  margin-bottom: 18px;
  line-height: 1.4;
}

.v3hoje-modal-acoes {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.v3hoje-modal-btn {
  flex: 1;
  padding: 13px 14px;
  border-radius: 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}
.v3hoje-modal-btn-cancel {
  background: rgba(74, 63, 56, 0.05);
  color: #6E5D52;
}
.v3hoje-modal-btn-cancel:hover {
  background: rgba(74, 63, 56, 0.1);
}
.v3hoje-modal-btn-ok {
  background: linear-gradient(135deg, #E91E63 0%, #FF8A4B 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 14px -4px rgba(233, 30, 99, 0.45);
}
.v3hoje-modal-btn-ok:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(233, 30, 99, 0.55);
}

/* ── Modal META ─────────────────────────────────────────────────────────── */
.v3hoje-meta-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 22px 0;
}
.v3hoje-meta-step {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(0, 188, 212, 0.08);
  border: 1px solid rgba(0, 188, 212, 0.18);
  color: #0097A7;
  font-size: 26px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Outfit', sans-serif;
  line-height: 1;
}
.v3hoje-meta-step:hover {
  background: rgba(0, 188, 212, 0.15);
  transform: scale(1.05);
}
.v3hoje-meta-step:active {
  transform: scale(0.95);
}
.v3hoje-meta-display {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'Fraunces', serif;
  font-size: 44px;
  font-weight: 600;
  color: #00558E;
  min-width: 100px;
  justify-content: center;
}
.v3hoje-meta-display-unidade {
  font-size: 22px;
  color: #4A3F38;
}

/* ── Modal NOVO HÁBITO ──────────────────────────────────────────────────── */
.v3hoje-form-grupo {
  margin-bottom: 18px;
}
.v3hoje-form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #B83A6B;
  margin-bottom: 8px;
}
.v3hoje-form-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(74, 63, 56, 0.10);
  background: #FFFCFA;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: #2A2420;
  transition: border-color 0.2s ease, background 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.v3hoje-form-input:focus {
  outline: none;
  border-color: #E91E63;
  background: #FFFFFF;
}

/* Chips de categoria */
.v3hoje-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.v3hoje-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(74, 63, 56, 0.04);
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #6E5D52;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v3hoje-cat-chip-emoji {
  font-size: 13px;
}
.v3hoje-cat-chip:hover {
  background: rgba(74, 63, 56, 0.08);
}
.v3hoje-cat-chip.is-selected {
  background: rgba(233, 30, 99, 0.06);
  border-color: var(--cat-cor, #E91E63);
  color: var(--cat-cor, #E91E63);
  font-weight: 600;
}

/* Atalhos dias */
.v3hoje-dias-atalhos {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.v3hoje-dia-atalho {
  flex: 1;
  padding: 7px 8px;
  background: rgba(233, 30, 99, 0.04);
  border: 1px solid rgba(233, 30, 99, 0.10);
  border-radius: 9px;
  color: #B83A6B;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v3hoje-dia-atalho:hover {
  background: rgba(233, 30, 99, 0.08);
}

/* Chips de dia da semana */
.v3hoje-dia-chips {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.v3hoje-dia-chip {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(74, 63, 56, 0.04);
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #6E5D52;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v3hoje-dia-chip:hover {
  background: rgba(74, 63, 56, 0.08);
}
.v3hoje-dia-chip.is-selected {
  background: linear-gradient(135deg, rgba(233, 30, 99, 0.10) 0%, rgba(255, 138, 75, 0.10) 100%);
  border-color: #E91E63;
  color: #E91E63;
}

/* ── Modal EDITAR LISTA ─────────────────────────────────────────────────── */
.v3hoje-edit-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
  margin: 4px -4px 12px;
  padding: 0 4px;
}

.v3hoje-edit-vazio {
  padding: 30px 16px;
  text-align: center;
  color: #9A8B82;
  font-size: 13px;
}

.v3hoje-edit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #FFFCFA;
  border-left: 3px solid var(--cat-cor, #E91E63);
  border-top: 1px solid rgba(74, 63, 56, 0.05);
  border-right: 1px solid rgba(74, 63, 56, 0.05);
  border-bottom: 1px solid rgba(74, 63, 56, 0.05);
}
.v3hoje-edit-emoji {
  font-size: 18px;
  flex-shrink: 0;
}
.v3hoje-edit-info {
  flex: 1;
  min-width: 0;
}
.v3hoje-edit-nome {
  font-size: 13px;
  font-weight: 500;
  color: #2A2420;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v3hoje-edit-cat {
  font-size: 11px;
  color: #9A8B82;
  margin-top: 1px;
}
.v3hoje-edit-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.v3hoje-edit-btn-edit {
  background: rgba(124, 77, 255, 0.08);
  color: #5E35B1;
}
.v3hoje-edit-btn-edit:hover {
  background: rgba(124, 77, 255, 0.15);
}
.v3hoje-edit-btn-del {
  background: rgba(229, 57, 53, 0.06);
  color: #C62828;
  font-size: 18px;
  font-weight: 300;
}
.v3hoje-edit-btn-del:hover {
  background: rgba(229, 57, 53, 0.12);
}

.v3hoje-edit-add {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, rgba(233, 30, 99, 0.06) 0%, rgba(255, 138, 75, 0.06) 100%);
  border: 1.5px dashed rgba(233, 30, 99, 0.25);
  border-radius: 12px;
  color: #B83A6B;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v3hoje-edit-add:hover {
  background: linear-gradient(135deg, rgba(233, 30, 99, 0.12) 0%, rgba(255, 138, 75, 0.12) 100%);
  border-color: rgba(233, 30, 99, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════════════════ */
.v3hoje-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: rgba(42, 36, 32, 0.92);
  color: #FFF8F0;
  padding: 11px 18px;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 6px 20px -6px rgba(74, 63, 56, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: v3hoje-toast-in 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
  pointer-events: none;
  letter-spacing: 0.1px;
  white-space: nowrap;
  max-width: 90vw;
}
.v3hoje-toast.is-out {
  animation: v3hoje-toast-out 0.4s ease forwards;
}
@keyframes v3hoje-toast-in {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes v3hoje-toast-out {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, 10px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AJUSTES RESPONSIVOS — desktop
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .v3hoje-graf-svg {
    height: 64px;
  }
  .v3hoje-nav-seta {
    width: 36px;
    font-size: 28px;
  }
  .v3hoje-graf-numero {
    font-size: 16px;
  }
  .v3hoje-graf-letra {
    font-size: 10px;
  }
  .v3hoje-mood-conteudo {
    gap: 18px;
  }
  .v3hoje-modal {
    border-radius: 22px;
    max-height: 86vh;
    margin-bottom: 8vh;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUSA PLANNER v3.0 — Sessão 2.5 (Frase do Dia + Diário + Gratidões + Período)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FRASE DO DIA ───────────────────────────────────────────────────────── */
.v3hoje-frase-dia {
  padding: 4px 14px 0;
}
.v3hoje-fdd-card {
  position: relative;
  padding: 18px 20px 16px 26px;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF3F8 100%);
  border-radius: 16px;
  border: 1px solid rgba(233, 30, 99, 0.10);
  box-shadow: 0 2px 8px -3px rgba(74, 63, 56, 0.06);
  overflow: hidden;
}
.v3hoje-fdd-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #E91E63 0%, #FF8A4B 100%);
  border-radius: 4px 0 0 4px;
}
.v3hoje-fdd-aspas {
  position: absolute;
  top: -2px;
  left: 8px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 56px;
  font-weight: 700;
  color: rgba(233, 30, 99, 0.12);
  line-height: 1;
  pointer-events: none;
}
.v3hoje-fdd-texto {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.55;
  color: #3A2D26;
  letter-spacing: 0.1px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.v3hoje-fdd-autor {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #B83A6B;
  letter-spacing: 0.5px;
  text-align: right;
}

@media (min-width: 768px) {
  .v3hoje-fdd-texto { font-size: 16px; }
  .v3hoje-fdd-aspas { font-size: 64px; left: 10px; }
}

/* ── CHIPS DE PERÍODO (no modal Novo Hábito) ───────────────────────────── */
.v3hoje-per-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.v3hoje-per-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(74, 63, 56, 0.04);
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #6E5D52;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v3hoje-per-chip-emoji { font-size: 13px; }
.v3hoje-per-chip:hover { background: rgba(74, 63, 56, 0.08); }
.v3hoje-per-chip.is-selected {
  background: rgba(255, 138, 75, 0.08);
  border-color: var(--per-cor, #FF8A4B);
  color: var(--per-cor, #FF8A4B);
  font-weight: 600;
}

/* ── ITEM — badge do período ────────────────────────────────────────────── */
.v3hoje-item-per {
  margin-left: 4px;
  font-size: 11px;
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOCO DIÁRIO — papel de carta, Fraunces, auto-save
   ═══════════════════════════════════════════════════════════════════════════ */
.v3hoje-diario-conteudo {
  padding: 8px 16px 18px;
}

/* Estado vazio */
.v3hoje-diario-vazio {
  text-align: center;
  padding: 8px 12px 6px;
}
.v3hoje-diario-vazio-msg {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: #6E5D52;
  margin-bottom: 16px;
  line-height: 1.4;
}
.v3hoje-diario-abrir-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #FFF3F8 0%, #FFEEE5 100%);
  border: 1.5px solid rgba(233, 30, 99, 0.18);
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #B83A6B;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px -3px rgba(233, 30, 99, 0.18);
}
.v3hoje-diario-abrir-btn:hover {
  background: linear-gradient(135deg, #FFE9F2 0%, #FFE0CD 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px rgba(233, 30, 99, 0.30);
}
.v3hoje-diario-abrir-btn:active {
  transform: scale(0.98);
}
.v3hoje-diario-abrir-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.v3hoje-diario-pena { font-size: 16px; }

/* Estado preview (já tem texto, fechado) */
.v3hoje-diario-preview {
  position: relative;
  padding: 14px 16px;
  background: linear-gradient(180deg, #FFFCF8 0%, #FDF6EE 100%);
  border-radius: 14px;
  border: 1px solid rgba(74, 63, 56, 0.08);
  /* Linhas de papel de carta */
  background-image:
    linear-gradient(180deg, #FFFCF8 0%, #FDF6EE 100%),
    repeating-linear-gradient(0deg, transparent, transparent 23px, rgba(180, 100, 70, 0.07) 23px, rgba(180, 100, 70, 0.07) 24px);
}
.v3hoje-diario-preview-texto {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
  color: #4A3F38;
  margin-bottom: 12px;
  /* clamp em 2 linhas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v3hoje-diario-continuar {
  background: transparent;
  border: none;
  color: #B83A6B;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.2s ease;
}
.v3hoje-diario-continuar:hover {
  color: #E91E63;
}
.v3hoje-diario-continuar:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Estado editor (textarea aberta) */
.v3hoje-diario-editor-wrap {
  display: flex;
  flex-direction: column;
}
.v3hoje-diario-textarea {
  width: 100%;
  min-height: 200px;
  max-height: 60vh;
  padding: 16px 18px;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(180, 100, 70, 0.10) 27px, rgba(180, 100, 70, 0.10) 28px),
    linear-gradient(180deg, #FFFCF8 0%, #FDF6EE 100%);
  border: 1px solid rgba(74, 63, 56, 0.10);
  border-radius: 14px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-style: italic;
  line-height: 28px; /* casa com as linhas de fundo */
  color: #2A2420;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.v3hoje-diario-textarea:focus {
  border-color: rgba(233, 30, 99, 0.30);
  box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.08);
}
.v3hoje-diario-textarea::placeholder {
  color: rgba(74, 63, 56, 0.35);
  font-style: italic;
}

.v3hoje-diario-editor-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 4px;
}
.v3hoje-diario-status {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  color: #9A8B82;
  font-style: italic;
  transition: color 0.3s ease;
}
.v3hoje-diario-fechar {
  background: rgba(74, 63, 56, 0.06);
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #6E5D52;
  cursor: pointer;
  transition: background 0.2s ease;
}
.v3hoje-diario-fechar:hover {
  background: rgba(74, 63, 56, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABA ALMA — Plugin de gratidões
   ═══════════════════════════════════════════════════════════════════════════ */
#v3grat-container {
  margin-top: 20px;
  padding: 0 16px;
}

.v3grat-bloco {
  padding: 18px 18px 16px;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF8F0 100%);
  border-radius: 18px;
  border: 1px solid rgba(255, 152, 0, 0.12);
  box-shadow: 0 4px 14px -6px rgba(74, 63, 56, 0.08);
}

.v3grat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.v3grat-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #2A2420;
}
.v3grat-icon { font-size: 18px; }

.v3grat-status {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.v3grat-status-ok {
  color: #00897B;
  background: rgba(0, 137, 123, 0.10);
  padding: 4px 10px;
  border-radius: 999px;
}
.v3grat-status-meio {
  color: #C77800;
  background: rgba(255, 152, 0, 0.10);
  padding: 4px 10px;
  border-radius: 999px;
}

.v3grat-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-style: italic;
  color: #9A8B82;
  margin-bottom: 14px;
}

.v3grat-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.v3grat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.v3grat-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF9800 0%, #FF6E40 100%);
  color: #FFFFFF;
  font-family: 'Fraunces', serif;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px -2px rgba(255, 152, 0, 0.4);
}

.v3grat-input {
  flex: 1;
  background: rgba(255, 152, 0, 0.04);
  border: 1.5px solid transparent;
  border-bottom: 1.5px solid rgba(255, 152, 0, 0.15);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: #2A2420;
  outline: none;
  transition: all 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.v3grat-input:focus {
  background: #FFFCF6;
  border-color: rgba(255, 152, 0, 0.35);
  box-shadow: 0 2px 8px -2px rgba(255, 152, 0, 0.18);
}
.v3grat-input::placeholder {
  color: rgba(74, 63, 56, 0.35);
  font-style: italic;
  font-size: 13px;
}

@media (min-width: 768px) {
  .v3grat-titulo { font-size: 18px; }
  .v3grat-input { font-size: 15px; padding: 10px 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUSA PLANNER v3.0 — Sessão 3 (Painel)
   Filtros, gráfico de área, radar, insights, hook IA
   ═══════════════════════════════════════════════════════════════════════════ */

.v3hoje-sub-painel {
  padding: 0 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.v3hoje-sub-painel > * {
  min-width: 0;
  max-width: 100%;
}

/* ── FILTROS ────────────────────────────────────────────────────────────── */
.v3pnl-filtros {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 2px 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.v3pnl-filtros::-webkit-scrollbar { display: none; }

.v3pnl-filtro {
  flex-shrink: 0;
  padding: 8px 14px;
  background: rgba(74, 63, 56, 0.04);
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #6E5D52;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.v3pnl-filtro:hover {
  background: rgba(74, 63, 56, 0.08);
}
.v3pnl-filtro.is-active {
  background: linear-gradient(135deg, rgba(233, 30, 99, 0.10) 0%, rgba(255, 138, 75, 0.10) 100%);
  border-color: #E91E63;
  color: #E91E63;
}

/* ── LOADING ────────────────────────────────────────────────────────────── */
.v3pnl-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 14px;
}
.v3pnl-loading-anel {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(233, 30, 99, 0.10);
  border-top-color: #E91E63;
  border-radius: 50%;
  animation: v3pnl-spin 0.9s linear infinite;
}
@keyframes v3pnl-spin {
  to { transform: rotate(360deg); }
}
.v3pnl-loading-msg {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: #9A8B82;
  font-style: italic;
}

.v3pnl-erro {
  padding: 30px 20px;
  text-align: center;
  color: #9A8B82;
  font-size: 13px;
}

/* ── BLOCO BASE ─────────────────────────────────────────────────────────── */
.v3pnl-bloco {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(233, 30, 99, 0.06);
  box-shadow: 0 2px 8px -3px rgba(74, 63, 56, 0.06);
}
.v3pnl-bloco-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: #2A2420;
  margin-bottom: 14px;
  letter-spacing: -0.1px;
}

/* ── RESUMO (3 cards numéricos) ─────────────────────────────────────────── */
.v3pnl-resumo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.v3pnl-card-num {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF7F1 100%);
  border-radius: 16px;
  padding: 14px 10px 10px;
  text-align: center;
  border: 1px solid rgba(233, 30, 99, 0.08);
  box-shadow: 0 2px 6px -2px rgba(74, 63, 56, 0.06);
}
.v3pnl-card-num-valor {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  background: linear-gradient(135deg, #E91E63 0%, #FF8A4B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 4px;
}
.v3pnl-card-num-valor small {
  font-size: 14px;
  -webkit-text-fill-color: #B83A6B;
  background: none;
  margin-left: 1px;
}
.v3pnl-card-num-label {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #9A8B82;
}

/* ── GRÁFICO DE ÁREA ────────────────────────────────────────────────────── */
.v3pnl-graf {
  width: 100%;
  height: 110px;
  display: block;
  overflow: visible;
}
.v3pnl-graf-labels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  margin-top: 6px;
  padding: 0 12px;
}
.v3pnl-graf-labels span {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  color: #9A8B82;
  text-align: center;
}

/* ── RADAR ──────────────────────────────────────────────────────────────── */
.v3pnl-radar-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0 12px;
}
.v3pnl-radar {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  overflow: visible;
}
.v3pnl-radar-poly {
  filter: drop-shadow(0 2px 6px rgba(233, 30, 99, 0.20));
  animation: v3pnl-radar-in 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  transform-origin: 140px 140px;
}
@keyframes v3pnl-radar-in {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.v3pnl-radar-label {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 500;
  fill: #4A3F38;
}
.v3pnl-radar-legenda {
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  color: #9A8B82;
  font-style: italic;
}
.v3pnl-radar-vazio {
  padding: 30px 16px;
  text-align: center;
  color: #9A8B82;
  font-size: 12px;
  font-style: italic;
}

/* ── INSIGHTS ───────────────────────────────────────────────────────────── */
.v3pnl-insights {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v3pnl-insight {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF7F1 100%);
  border-radius: 14px;
  border: 1px solid rgba(233, 30, 99, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.v3pnl-insight:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(74, 63, 56, 0.08);
}
.v3pnl-insight-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(255, 138, 75, 0.08);
  border-radius: 12px;
}
.v3pnl-insight-body {
  flex: 1;
  min-width: 0;
}
.v3pnl-insight-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #B83A6B;
  margin-bottom: 1px;
}
.v3pnl-insight-valor {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #2A2420;
  line-height: 1.15;
  margin-bottom: 1px;
}
.v3pnl-insight-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: #6E5D52;
  line-height: 1.35;
}

/* ── HOOK IA ────────────────────────────────────────────────────────────── */
.v3pnl-ia-card {
  position: relative;
  text-align: center;
  padding: 22px 18px 18px;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF3F8 60%, #FFEDE0 100%);
  border: 1px solid rgba(124, 77, 255, 0.10);
}
.v3pnl-ia-bloqueada {
  opacity: 0.85;
}
.v3pnl-ia-cadeado {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 16px;
  opacity: 0.5;
}
.v3pnl-ia-emoji {
  font-size: 36px;
  margin-bottom: 8px;
  line-height: 1;
}
.v3pnl-ia-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #2A2420;
  margin-bottom: 6px;
  letter-spacing: -0.1px;
}
.v3pnl-ia-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: #6E5D52;
  line-height: 1.45;
  margin-bottom: 14px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.v3pnl-ia-tag {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(124, 77, 255, 0.08);
  border: 1px solid rgba(124, 77, 255, 0.18);
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #5E35B1;
  letter-spacing: 0.4px;
}
.v3pnl-ia-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #7C4DFF 0%, #E91E63 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px -4px rgba(124, 77, 255, 0.4);
  letter-spacing: 0.3px;
}
.v3pnl-ia-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(124, 77, 255, 0.5);
}
.v3pnl-ia-btn:active {
  transform: scale(0.97);
}

.v3pnl-ia-mini {
  margin-top: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  color: #9A8B82;
  font-style: italic;
  letter-spacing: 0.2px;
}

/* ── DESKTOP ────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .v3pnl-bloco-titulo { font-size: 16px; }
  .v3pnl-card-num-valor { font-size: 30px; }
  .v3pnl-graf { height: 130px; }
  .v3pnl-insight-valor { font-size: 18px; }
  .v3pnl-ia-titulo { font-size: 19px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUSA PLANNER v3.0 — Sessão 4 (Agenda + Eventos do dia)
   Lembretes, calendário mensal, modal de criação, ícones SVG
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── BLOCO EVENTOS DO DIA (na sub-aba Hoje) ─────────────────────────────── */
.v3hoje-eventos-conteudo {
  padding: 6px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.v3hoje-eventos-loading,
.v3hoje-eventos-vazio-msg {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: #9A8B82;
  text-align: center;
  padding: 12px 0 8px;
}

.v3hoje-eventos-vazio {
  text-align: center;
  padding: 4px 0 0;
}

.v3hoje-eventos-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  margin-top: 6px;
  background: linear-gradient(135deg, rgba(233, 30, 99, 0.04) 0%, rgba(255, 138, 75, 0.04) 100%);
  border: 1.5px dashed rgba(233, 30, 99, 0.20);
  border-radius: 999px;
  color: #B83A6B;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: center;
}
.v3hoje-eventos-add:hover {
  background: linear-gradient(135deg, rgba(233, 30, 99, 0.08) 0%, rgba(255, 138, 75, 0.08) 100%);
  border-color: rgba(233, 30, 99, 0.35);
}
.v3hoje-eventos-add svg {
  width: 14px;
  height: 14px;
  color: currentColor;
}
.v3hoje-eventos-add-fim {
  margin-top: 8px;
}

/* ── EVENTO (card individual, usado em Hoje + Agenda) ───────────────────── */
.v3hoje-evento {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid rgba(74, 63, 56, 0.06);
  border-left: 3px solid var(--evt-cor, #9A8B82);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.v3hoje-evento:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px -3px rgba(74, 63, 56, 0.10);
}
.v3hoje-evento.is-concluido .v3hoje-evento-titulo {
  text-decoration: line-through;
  color: #9A8B82;
}
.v3hoje-evento.is-concluido {
  opacity: 0.7;
}
.v3hoje-evento.is-pagamento {
  background: linear-gradient(135deg, #FFFFFF 0%, rgba(0, 137, 123, 0.03) 100%);
}

.v3hoje-evento-icone {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(74, 63, 56, 0.04);
  color: var(--evt-cor, #9A8B82);
}
.v3hoje-evento-icone svg {
  width: 18px;
  height: 18px;
}

.v3hoje-evento-body {
  flex: 1;
  min-width: 0;
}

.v3hoje-evento-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #2A2420;
  line-height: 1.3;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.v3hoje-evento-rep {
  display: inline-flex;
  align-items: center;
  color: #9A8B82;
}
.v3hoje-evento-rep svg {
  width: 12px;
  height: 12px;
}

.v3hoje-evento-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  color: #6E5D52;
  flex-wrap: wrap;
}

.v3hoje-evento-hora {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.v3hoje-evento-hora svg {
  width: 11px;
  height: 11px;
  color: #9A8B82;
}

.v3hoje-evento-tipo {
  font-weight: 600;
  letter-spacing: 0.2px;
}

.v3hoje-evento-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: #6E5D52;
  margin-top: 5px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.v3hoje-evento-check {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(74, 63, 56, 0.18);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: transparent;
}
.v3hoje-evento-check svg {
  width: 14px;
  height: 14px;
}
.v3hoje-evento-check:hover {
  border-color: #E91E63;
}
.v3hoje-evento-check.is-done {
  background: linear-gradient(135deg, #E91E63 0%, #FF8A4B 100%);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 2px 6px -2px rgba(233, 30, 99, 0.35);
}
.v3hoje-evento-check.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border: 2px dashed rgba(74, 63, 56, 0.18);
}

/* ── SUB-ABA AGENDA ─────────────────────────────────────────────────────── */
.v3hoje-sub-agenda {
  padding: 0 14px 30px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.v3agd-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 12px;
}

/* CALENDÁRIO */
.v3agd-cal-wrap {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF7F1 100%);
  border-radius: 18px;
  padding: 14px 12px;
  border: 1px solid rgba(233, 30, 99, 0.06);
  box-shadow: 0 2px 8px -3px rgba(74, 63, 56, 0.06);
  margin-top: 10px;
}

.v3agd-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.v3agd-cal-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: #2A2420;
  letter-spacing: -0.2px;
  text-transform: capitalize;
}
.v3agd-cal-nav {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(233, 30, 99, 0.04);
  color: #B83A6B;
  font-size: 22px;
  font-weight: 300;
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  transition: all 0.2s ease;
  line-height: 1;
}
.v3agd-cal-nav:hover {
  background: rgba(233, 30, 99, 0.10);
}

.v3agd-cal-semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.v3agd-cal-ds {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #9A8B82;
  text-align: center;
  padding: 4px 0;
}

.v3agd-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.v3agd-cal-vazia {
  aspect-ratio: 1;
}
.v3agd-cal-dia {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  transition: all 0.18s ease;
  padding: 2px;
}
.v3agd-cal-dia:hover {
  background: rgba(233, 30, 99, 0.04);
}
.v3agd-cal-num {
  font-size: 13px;
  font-weight: 500;
  color: #4A3F38;
  line-height: 1;
}
.v3agd-cal-dia.is-hoje .v3agd-cal-num {
  color: #E91E63;
  font-weight: 700;
}
.v3agd-cal-dia.is-selecionado {
  background: linear-gradient(135deg, rgba(233, 30, 99, 0.10) 0%, rgba(255, 138, 75, 0.10) 100%);
  border-color: #E91E63;
}
.v3agd-cal-dia.is-selecionado .v3agd-cal-num {
  color: #E91E63;
  font-weight: 700;
}

.v3agd-cal-pontos {
  display: flex;
  gap: 2px;
  margin-top: 3px;
  height: 4px;
}
.v3agd-cal-ponto {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

/* DIA SELECIONADO — lista */
.v3agd-dia-wrap {
  margin-top: 18px;
}

.v3agd-dia-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 12px;
}

.v3agd-dia-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  color: #2A2420;
  text-transform: capitalize;
  flex: 1;
  min-width: 0;
}

.v3agd-fab {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #E91E63 0%, #FF8A4B 100%);
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px -4px rgba(233, 30, 99, 0.45);
  transition: all 0.2s ease;
}
.v3agd-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(233, 30, 99, 0.55);
}
.v3agd-fab:active {
  transform: scale(0.95);
}
.v3agd-fab svg {
  width: 18px;
  height: 18px;
}

.v3agd-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.v3agd-vazio {
  padding: 28px 20px;
  text-align: center;
  background: rgba(74, 63, 56, 0.02);
  border: 1px dashed rgba(74, 63, 56, 0.10);
  border-radius: 14px;
}
.v3agd-vazio-msg {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: #9A8B82;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL CRIAR/EDITAR LEMBRETE
   ═══════════════════════════════════════════════════════════════════════════ */
.v3hoje-modal-lembrete {
  /* Reusa estrutura .v3hoje-modal padrão */
}

/* Chips de tipo */
.v3lemb-tipo-chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.v3lemb-tipo-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(74, 63, 56, 0.04);
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #6E5D52;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}
.v3lemb-tipo-chip:hover {
  background: rgba(74, 63, 56, 0.08);
}
.v3lemb-tipo-chip.is-selected {
  background: var(--tipo-bg, rgba(233, 30, 99, 0.08));
  border-color: var(--tipo-cor, #E91E63);
  color: var(--tipo-cor, #E91E63);
  font-weight: 600;
}
.v3lemb-tipo-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.v3lemb-tipo-ic svg {
  width: 18px;
  height: 18px;
  color: var(--tipo-cor, #6E5D52);
}
.v3lemb-tipo-chip.is-selected .v3lemb-tipo-ic svg {
  color: var(--tipo-cor, #E91E63);
}

/* Data + hora lado a lado */
.v3lemb-grupo-data {
  display: flex;
  gap: 10px;
}
.v3lemb-data-col {
  flex: 1;
  min-width: 0;
}

.v3lemb-opcional {
  font-size: 9px;
  font-weight: 500;
  color: #9A8B82;
  letter-spacing: 0.3px;
  margin-left: 4px;
  text-transform: none;
}

/* Recorrência */
.v3lemb-rec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.v3lemb-rec-chip {
  padding: 7px 12px;
  background: rgba(74, 63, 56, 0.04);
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: #6E5D52;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v3lemb-rec-chip:hover {
  background: rgba(74, 63, 56, 0.08);
}
.v3lemb-rec-chip.is-selected {
  background: rgba(124, 77, 255, 0.08);
  border-color: #7C4DFF;
  color: #5E35B1;
  font-weight: 600;
}

/* Textarea de detalhes */
.v3lemb-textarea {
  min-height: 70px;
  max-height: 140px;
  resize: vertical;
  font-family: 'Outfit', sans-serif;
  line-height: 1.5;
}

/* Botão deletar */
.v3lemb-btn-del {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(229, 57, 53, 0.06);
  color: #C62828;
}
.v3lemb-btn-del:hover {
  background: rgba(229, 57, 53, 0.12);
}
.v3lemb-btn-del svg {
  width: 14px;
  height: 14px;
}

.v3lemb-aviso-rec {
  margin: -2px 0 14px;
  padding: 8px 12px;
  background: rgba(124, 77, 255, 0.06);
  border-left: 3px solid #7C4DFF;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  color: #5E35B1;
  font-style: italic;
  line-height: 1.4;
}

/* ── DESKTOP ────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .v3agd-cal-num { font-size: 14px; }
  .v3agd-cal-titulo { font-size: 17px; }
  .v3hoje-evento-titulo { font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUSA PLANNER v3.0 — Sessão 5 (Hambúrguer + Padrões da Aba Ciclo)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── BOTÃO HAMBÚRGUER NA ABA EU ─────────────────────────────────────────── */
.v3-profile-hero {
  position: relative;
}

.v3-hamb-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(233, 30, 99, 0.12);
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF7F1 100%);
  color: #B83A6B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 20;
  box-shadow: 0 2px 8px -2px rgba(74, 63, 56, 0.10);
}
.v3-hamb-btn:hover {
  background: linear-gradient(135deg, #FFF3F8 0%, #FFEEE5 100%);
  border-color: rgba(233, 30, 99, 0.25);
  color: #E91E63;
  transform: scale(1.04);
}
.v3-hamb-btn:active {
  transform: scale(0.95);
}
.v3-hamb-btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

/* ── DRAWER LATERAL ─────────────────────────────────────────────────────── */
.v3-hamb-drawer {
  position: fixed;
  inset: 0;
  z-index: 9500;
  pointer-events: none;
}

.v3-hamb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(40, 28, 22, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: auto;
}
.v3-hamb-drawer.is-aberto .v3-hamb-overlay {
  opacity: 1;
}

.v3-hamb-painel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(85vw, 360px);
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF7F1 100%);
  box-shadow: -8px 0 32px -8px rgba(74, 63, 56, 0.25);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.34, 1.0, 0.64, 1);
  pointer-events: auto;
  overflow: hidden;
}
.v3-hamb-drawer.is-aberto .v3-hamb-painel {
  transform: translateX(0);
}

.v3-hamb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 20px 16px;
  border-bottom: 1px solid rgba(74, 63, 56, 0.06);
  flex-shrink: 0;
}
.v3-hamb-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: #2A2420;
  letter-spacing: -0.3px;
}
.v3-hamb-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: rgba(74, 63, 56, 0.04);
  color: #6E5D52;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.v3-hamb-close:hover {
  background: rgba(74, 63, 56, 0.10);
  color: #2A2420;
}
.v3-hamb-close svg {
  width: 18px;
  height: 18px;
}

.v3-hamb-conteudo {
  padding: 14px 16px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

.v3-hamb-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.v3-hamb-divider {
  height: 1px;
  background: rgba(74, 63, 56, 0.06);
  margin: 14px 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PADRÕES DA ABA CICLO
   ═══════════════════════════════════════════════════════════════════════════ */

/* Estado vazio */
.v3-padroes-vazio {
  margin: 0 16px;
  padding: 30px 22px;
  text-align: center;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF7F1 100%);
  border-radius: 18px;
  border: 1px dashed rgba(233, 30, 99, 0.20);
}
.v3-padroes-vazio-icon {
  font-size: 38px;
  margin-bottom: 10px;
  opacity: 0.7;
}
.v3-padroes-vazio-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: #2A2420;
  margin-bottom: 6px;
}
.v3-padroes-vazio-msg {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: #6E5D52;
  line-height: 1.5;
}

/* Wrap geral */
.v3-padroes-wrap {
  margin: 0 16px;
  padding: 16px;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF7F1 100%);
  border-radius: 18px;
  border: 1px solid rgba(233, 30, 99, 0.06);
  box-shadow: 0 2px 8px -3px rgba(74, 63, 56, 0.06);
}

/* 3 cards numéricos */
.v3-padroes-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 18px;
}
.v3-padroes-card {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 12px 8px 10px;
  text-align: center;
  border: 1px solid rgba(233, 30, 99, 0.06);
}
.v3-padroes-card-valor {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: #2A2420;
  line-height: 1;
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}
.v3-padroes-card-valor small {
  font-size: 11px;
  color: #9A8B82;
  font-weight: 500;
  font-family: 'Outfit', sans-serif;
}
.v3-padroes-reg {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.1px;
}
.v3-padroes-card-label {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #9A8B82;
}

/* Gráfico de barras */
.v3-padroes-graf-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #B83A6B;
  margin-bottom: 8px;
}

.v3-padroes-graf {
  position: relative;
  height: 110px;
  background: rgba(74, 63, 56, 0.02);
  border-radius: 12px;
  padding: 6px;
  margin-bottom: 18px;
}

.v3-padroes-barras {
  display: flex;
  align-items: flex-end;
  height: 100%;
  gap: 3px;
  padding-bottom: 2px;
}

.v3-padroes-barra {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.v3-padroes-barra:hover {
  opacity: 0.85;
}
.v3-padroes-barra-fill {
  width: 100%;
  background: #E91E63;
  border-radius: 4px 4px 0 0;
  min-height: 3px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 3px;
  transition: height 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.v3-padroes-barra-num {
  font-family: 'Outfit', sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.3px;
}

/* Linha da média */
.v3-padroes-graf-linha-media {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74, 63, 56, 0.30) 10%, rgba(74, 63, 56, 0.30) 90%, transparent);
  pointer-events: none;
  z-index: 1;
}
.v3-padroes-graf-linha-media::before {
  content: '';
  position: absolute;
  inset: 0;
  border-top: 1px dashed rgba(74, 63, 56, 0.40);
}
.v3-padroes-media-label {
  position: absolute;
  right: 0;
  top: -16px;
  font-family: 'Outfit', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #6E5D52;
  background: #FFF7F1;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.2px;
  border: 1px solid rgba(74, 63, 56, 0.08);
}

/* Próximas menstruações */
.v3-padroes-prox-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #B83A6B;
  margin-bottom: 8px;
}
.v3-padroes-prox-lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.v3-padroes-prox {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 11px 8px;
  text-align: center;
  border: 1px solid rgba(233, 30, 99, 0.06);
}
.v3-padroes-prox-prim {
  background: linear-gradient(135deg, rgba(233, 30, 99, 0.05) 0%, rgba(255, 138, 75, 0.05) 100%);
  border-color: rgba(233, 30, 99, 0.20);
}
.v3-padroes-prox-data {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: #2A2420;
  line-height: 1.1;
}
.v3-padroes-prox-prim .v3-padroes-prox-data {
  color: #E91E63;
}
.v3-padroes-prox-data span {
  font-size: 10px;
  color: #9A8B82;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-family: 'Outfit', sans-serif;
  margin-left: 2px;
}
.v3-padroes-prox-meta {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  color: #6E5D52;
  margin-top: 3px;
  font-style: italic;
}

.v3-padroes-rodape {
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  color: #9A8B82;
  font-style: italic;
  text-align: center;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(74, 63, 56, 0.04);
}

/* ── DESKTOP ────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .v3-hamb-painel { width: 360px; }
  .v3-padroes-card-valor { font-size: 24px; }
  .v3-padroes-prox-data { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUSA PLANNER v3.0 — Sessão 6.1.b (Aba Finanças · Fase 1)
   Tela bloqueada (Mockup A) — usada quando dia < 1
   ═══════════════════════════════════════════════════════════════════════════ */

.v3-fin-blocked,
.v3-fin-comingsoon {
  padding: 30px 24px 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: calc(100vh - 90px);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF4F0 100%);
}

/* ─── ÍCONE BLOQUEADO ───────────────────────────────────────────────────── */
.v3-fin-blocked-icon {
  position: relative;
  width: 130px;
  height: 130px;
  margin: 30px 0 24px;
  animation: v3-fin-icon-in 0.7s cubic-bezier(0.34, 1.5, 0.64, 1);
}
@keyframes v3-fin-icon-in {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

.v3-fin-blocked-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(74, 139, 122, 0.05) 0%, rgba(212, 149, 106, 0.10) 100%);
  border: 1px dashed rgba(184, 58, 107, 0.20);
}

.v3-fin-blocked-svg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8A7D75;
  opacity: 0.55;
}
.v3-fin-blocked-svg svg {
  width: 50px;
  height: 50px;
}

.v3-fin-blocked-lock {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #B83A6B 0%, #D4956A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(184, 58, 107, 0.30);
  border: 3px solid #FFFFFF;
}
.v3-fin-blocked-lock svg {
  width: 18px;
  height: 18px;
}

/* ─── TAG ───────────────────────────────────────────────────────────────── */
.v3-fin-blocked-tag {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(184, 58, 107, 0.06);
  color: #B83A6B;
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 20px;
  margin-bottom: 16px;
  border: 1px solid rgba(184, 58, 107, 0.15);
}

/* ─── TÍTULO E SUB ──────────────────────────────────────────────────────── */
.v3-fin-blocked-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.8px;
  color: #2A2420;
  margin-bottom: 8px;
}
.v3-fin-blocked-title em {
  color: #B83A6B;
  font-style: italic;
  font-weight: 600;
}

.v3-fin-blocked-sub {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 400;
  color: #D4956A;
  margin-bottom: 22px;
}

.v3-fin-blocked-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: #8A7D75;
  max-width: 280px;
  margin-bottom: 28px;
}

/* ─── CARD DE PROGRESSO ─────────────────────────────────────────────────── */
.v3-fin-blocked-progress {
  width: 100%;
  max-width: 380px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(184, 58, 107, 0.10);
  border-radius: 18px;
  padding: 18px 18px 16px;
  margin-bottom: 24px;
  text-align: left;
  box-shadow: 0 2px 8px -3px rgba(74, 63, 56, 0.08);
}

.v3-fin-blocked-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.v3-fin-blocked-progress-label {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #B83A6B;
}

.v3-fin-blocked-progress-pct {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: #2A2420;
}

.v3-fin-blocked-progress-bar {
  height: 8px;
  background: rgba(74, 63, 56, 0.06);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}

.v3-fin-blocked-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #B83A6B, #D4956A);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(184, 58, 107, 0.30);
  transition: width 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.v3-fin-blocked-progress-msg {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: #2A2420;
  line-height: 1.4;
}
.v3-fin-blocked-progress-msg b {
  color: #B83A6B;
  font-weight: 600;
}

/* ─── PREVIEW DAS FEATURES ──────────────────────────────────────────────── */
.v3-fin-blocked-preview {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.v3-fin-blocked-prev {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(74, 63, 56, 0.05);
  border-radius: 12px;
  text-align: left;
  opacity: 0.85;
}

.v3-fin-blocked-prev-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(74, 139, 122, 0.06);
  color: #4A8B7A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.85;
}
.v3-fin-blocked-prev-icon svg {
  width: 16px;
  height: 16px;
}

.v3-fin-blocked-prev-text {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: #2A2420;
  line-height: 1.35;
  flex: 1;
}

.v3-fin-blocked-prev-lock {
  color: #8A7D75;
  opacity: 0.4;
  flex-shrink: 0;
}
.v3-fin-blocked-prev-lock svg {
  width: 12px;
  height: 12px;
  stroke-width: 2;
}

/* ─── BOTÃO VOLTAR ──────────────────────────────────────────────────────── */
.v3-fin-blocked-back {
  width: 100%;
  max-width: 380px;
  padding: 14px;
  background: transparent;
  border: 1.5px solid rgba(74, 63, 56, 0.12);
  border-radius: 14px;
  color: #8A7D75;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v3-fin-blocked-back:hover {
  background: rgba(74, 63, 56, 0.04);
  color: #2A2420;
  border-color: rgba(74, 63, 56, 0.20);
}

/* ─── DESKTOP ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .v3-fin-blocked-title { font-size: 40px; }
  .v3-fin-blocked-icon { width: 140px; height: 140px; }
  .v3-fin-blocked-svg svg { width: 56px; height: 56px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUSA PLANNER v3.0 — Sessão 6.1.b — Fase 2
   Aba Finanças funcional: hero, sub-tabs, Resumo, Transações, modal
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cores semânticas dessa sessão */
:root {
  --v3-fin-emerald: #4A8B7A;
  --v3-fin-emerald-soft: rgba(74, 139, 122, 0.08);
  --v3-fin-coral: #D67560;
  --v3-fin-coral-soft: rgba(214, 117, 96, 0.08);
}

/* ─── APP CONTAINER ─────────────────────────────────────────────────────── */
.v3-fin-app {
  padding: 0 16px 90px;
  min-height: calc(100vh - 80px);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF4F0 100%);
}

.v3-fin-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
}
.v3-fin-loading-anel {
  width: 36px; height: 36px;
  border: 3px solid rgba(184, 58, 107, 0.10);
  border-top-color: #B83A6B;
  border-radius: 50%;
  animation: v3-fin-spin 0.9s linear infinite;
}
@keyframes v3-fin-spin {
  to { transform: rotate(360deg); }
}

/* ─── HEADER DA PÁGINA ──────────────────────────────────────────────────── */
.v3-fin-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 20px 0 10px;
}
.v3-fin-page-header-left h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.6px;
  color: #2A2420;
  line-height: 1;
}
.v3-fin-page-header-left h2 em {
  color: #B83A6B;
  font-style: italic;
  font-weight: 600;
}
.v3-fin-page-header-left p {
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-size: 12px;
  color: #8A7D75;
  margin-top: 4px;
}
.v3-fin-page-header-right {
  display: flex;
  gap: 6px;
}
.v3-fin-icon-btn {
  width: 36px; height: 36px;
  border-radius: 11px;
  border: 1px solid rgba(74, 63, 56, 0.08);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2A2420;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v3-fin-icon-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(184, 58, 107, 0.20);
}
.v3-fin-icon-btn svg {
  width: 16px; height: 16px;
}

/* ─── NAV DE MÊS ────────────────────────────────────────────────────────── */
.v3-fin-mes-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px;
  margin-bottom: 14px;
}
.v3-fin-mes-arrow {
  width: 32px; height: 32px;
  border: none;
  background: rgba(184, 58, 107, 0.04);
  color: #B83A6B;
  font-size: 22px;
  font-weight: 300;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Outfit', sans-serif;
  line-height: 1;
}
.v3-fin-mes-arrow:hover {
  background: rgba(184, 58, 107, 0.10);
}
.v3-fin-mes-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #2A2420;
}
.v3-fin-mes-titulo em {
  font-style: normal;
  color: #D4956A;
}

/* ─── HERO SALDO ────────────────────────────────────────────────────────── */
.v3-fin-hero {
  background: linear-gradient(135deg, #FFFFFF 0%, #FBF4F0 100%);
  border: 1px solid rgba(184, 58, 107, 0.10);
  border-radius: 22px;
  padding: 18px 18px 16px;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px -6px rgba(74, 63, 56, 0.10);
  position: relative;
  overflow: hidden;
}
.v3-fin-hero::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 58, 107, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.v3-fin-hero-label {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8A7D75;
  margin-bottom: 4px;
}
.v3-fin-hero-valor {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -1px;
  color: #2A2420;
  margin-bottom: 14px;
}
.v3-fin-hero-valor.is-positivo { color: var(--v3-fin-emerald); }
.v3-fin-hero-valor.is-negativo { color: var(--v3-fin-coral); }

.v3-fin-hero-row {
  display: flex;
  gap: 8px;
}
.v3-fin-hero-mini {
  flex: 1;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(74, 63, 56, 0.05);
  border-radius: 14px;
}
.v3-fin-hero-mini-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Outfit', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #8A7D75;
  margin-bottom: 2px;
}
.v3-fin-hero-mini-label svg {
  width: 12px; height: 12px;
  stroke-width: 2;
}
.v3-fin-hero-mini.is-entrada .v3-fin-hero-mini-label { color: var(--v3-fin-emerald); }
.v3-fin-hero-mini.is-saida   .v3-fin-hero-mini-label { color: var(--v3-fin-coral); }
.v3-fin-hero-mini-valor {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #2A2420;
}

/* ─── CTA ADICIONAR ─────────────────────────────────────────────────────── */
.v3-fin-cta-add {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #B83A6B 0%, #D4956A 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 6px 18px -4px rgba(184, 58, 107, 0.35);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.v3-fin-cta-add:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -4px rgba(184, 58, 107, 0.45);
}
.v3-fin-cta-add:active {
  transform: scale(0.98);
}
.v3-fin-cta-add svg {
  width: 16px; height: 16px;
  stroke-width: 2.2;
}

/* ─── SUB-TABS ──────────────────────────────────────────────────────────── */
.v3-fin-subtabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  margin-bottom: 14px;
  scrollbar-width: none;
}
.v3-fin-subtabs::-webkit-scrollbar { display: none; }
.v3-fin-subtab {
  flex-shrink: 0;
  padding: 7px 13px;
  background: rgba(74, 63, 56, 0.04);
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #8A7D75;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.v3-fin-subtab:hover {
  background: rgba(74, 63, 56, 0.08);
}
.v3-fin-subtab.is-active {
  background: linear-gradient(135deg, rgba(184, 58, 107, 0.10) 0%, rgba(212, 149, 106, 0.10) 100%);
  border-color: #B83A6B;
  color: #B83A6B;
}

/* ─── BLOCO GENÉRICO ────────────────────────────────────────────────────── */
.v3-fin-bloco {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 58, 107, 0.06);
  border-radius: 18px;
  padding: 14px 14px 12px;
  margin-bottom: 12px;
}
.v3-fin-bloco-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.v3-fin-bloco-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 14px;
  color: #2A2420;
}
.v3-fin-bloco-action {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #B83A6B;
  background: transparent;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
}

/* ─── ORÇAMENTO ─────────────────────────────────────────────────────────── */
.v3-fin-orc-vazio {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: #8A7D75;
  font-style: italic;
  padding: 4px 0 6px;
}
.v3-fin-orc-numeros {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}
.v3-fin-orc-usado {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #2A2420;
}
.v3-fin-orc-de {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: #8A7D75;
}
.v3-fin-orc-total {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: #8A7D75;
}
.v3-fin-orc-bar {
  height: 9px;
  background: rgba(74, 63, 56, 0.06);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.v3-fin-orc-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.v3-fin-orc-restante {
  display: flex;
  justify-content: space-between;
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  color: #8A7D75;
}
.v3-fin-orc-restante b {
  color: var(--v3-fin-emerald);
  font-weight: 600;
}

/* ─── LISTA DE TRANSAÇÕES ───────────────────────────────────────────────── */
.v3-fin-trans-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v3-fin-trans-lista-full {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 58, 107, 0.06);
  border-radius: 18px;
  padding: 6px 12px;
}

.v3-fin-trans {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(74, 63, 56, 0.04);
  cursor: pointer;
  transition: background 0.18s ease;
}
.v3-fin-trans:last-child { border-bottom: none; }
.v3-fin-trans:hover {
  background: rgba(184, 58, 107, 0.02);
}

.v3-fin-trans-icone {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(74, 63, 56, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--cat-cor, #B83A6B);
}
.v3-fin-trans-icone.is-entrada {
  background: var(--v3-fin-emerald-soft);
  color: var(--v3-fin-emerald);
}
.v3-fin-trans-icone svg {
  width: 16px; height: 16px;
}

.v3-fin-trans-body {
  flex: 1;
  min-width: 0;
}
.v3-fin-trans-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #2A2420;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v3-fin-trans-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  color: #8A7D75;
  margin-top: 2px;
  flex-wrap: wrap;
}
.v3-fin-trans-meta-cat {
  padding: 1px 6px;
  background: rgba(184, 58, 107, 0.06);
  border-radius: 6px;
  color: #B83A6B;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.v3-fin-trans-meta-meio {
  padding: 1px 6px;
  background: rgba(74, 139, 122, 0.06);
  border-radius: 6px;
  color: var(--v3-fin-emerald);
  font-weight: 600;
  letter-spacing: 0.2px;
}
.v3-fin-trans-meta-rec {
  display: inline-flex;
  align-items: center;
  color: #8A7D75;
  opacity: 0.7;
}
.v3-fin-trans-meta-rec svg {
  width: 11px; height: 11px;
}

.v3-fin-trans-valor {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--v3-fin-coral);
  flex-shrink: 0;
}
.v3-fin-trans-valor.is-entrada {
  color: var(--v3-fin-emerald);
}

/* ─── ESTADO VAZIO ──────────────────────────────────────────────────────── */
.v3-fin-vazio-mes {
  padding: 32px 20px;
  text-align: center;
  background: rgba(74, 63, 56, 0.02);
  border: 1px dashed rgba(74, 63, 56, 0.10);
  border-radius: 14px;
  margin-top: 6px;
}
.v3-fin-vazio-msg {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  color: #2A2420;
  margin-bottom: 4px;
}
.v3-fin-vazio-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: #8A7D75;
}

.v3-fin-breve {
  padding: 50px 20px;
  text-align: center;
}
.v3-fin-breve-msg {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: #8A7D75;
}

/* ─── FERRAMENTAS DA SUB-ABA TRANSAÇÕES ─────────────────────────────────── */
.v3-fin-trans-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.v3-fin-search {
  position: relative;
  width: 100%;
}
.v3-fin-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: #8A7D75;
  pointer-events: none;
}
.v3-fin-search input {
  width: 100%;
  padding: 10px 12px 10px 34px;
  background: #FFFFFF;
  border: 1px solid rgba(74, 63, 56, 0.08);
  border-radius: 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: #2A2420;
  outline: none;
  transition: border-color 0.2s ease;
}
.v3-fin-search input:focus {
  border-color: #B83A6B;
}
.v3-fin-search input::placeholder {
  color: #9A8B82;
}

.v3-fin-filtros {
  display: flex;
  gap: 6px;
}
.v3-fin-filtro {
  flex: 1;
  padding: 8px 10px;
  background: rgba(74, 63, 56, 0.04);
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #8A7D75;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v3-fin-filtro.is-active {
  background: linear-gradient(135deg, rgba(184, 58, 107, 0.10) 0%, rgba(212, 149, 106, 0.10) 100%);
  border-color: #B83A6B;
  color: #B83A6B;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL — Nova / Editar Transação
   ═══════════════════════════════════════════════════════════════════════════ */
.v3-fin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(40, 28, 22, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: v3-fin-overlay-in 0.25s ease-out;
}
@keyframes v3-fin-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.v3-fin-modal {
  background: #FFFFFF;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  border-radius: 26px 26px 0 0;
  display: flex;
  flex-direction: column;
  animation: v3-fin-modal-in 0.32s cubic-bezier(0.34, 1.2, 0.64, 1);
}
@keyframes v3-fin-modal-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.v3-fin-modal-handle {
  width: 38px; height: 4px;
  background: rgba(74, 63, 56, 0.18);
  border-radius: 999px;
  margin: 10px auto 6px;
  flex-shrink: 0;
}

.v3-fin-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px 10px;
  flex-shrink: 0;
}

.v3-fin-modal-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  color: #2A2420;
  letter-spacing: -0.3px;
}

.v3-fin-modal-close {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(74, 63, 56, 0.04);
  border: none;
  color: #6E5D52;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.v3-fin-modal-close:hover {
  background: rgba(74, 63, 56, 0.10);
}
.v3-fin-modal-close svg {
  width: 16px; height: 16px;
}

.v3-fin-modal-body {
  padding: 4px 20px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

.v3-fin-form-label {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #B83A6B;
  margin-bottom: 7px;
  margin-top: 14px;
}
.v3-fin-form-label:first-child {
  margin-top: 4px;
}

.v3-fin-opcional {
  font-size: 9px;
  font-weight: 500;
  color: #8A7D75;
  letter-spacing: 0.3px;
  margin-left: 4px;
  text-transform: none;
}

.v3-fin-input {
  width: 100%;
  padding: 12px 14px;
  background: #FBF4F0;
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: #2A2420;
  outline: none;
  transition: all 0.2s ease;
}
.v3-fin-input:focus {
  background: #FFFFFF;
  border-color: #B83A6B;
}

.v3-fin-input-valor {
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.5px;
  background: #FFFFFF;
  border-color: #B83A6B;
}
.v3-fin-input-valor.is-entrada {
  color: var(--v3-fin-emerald);
  border-color: var(--v3-fin-emerald);
}
.v3-fin-input-valor.is-saida {
  color: var(--v3-fin-coral);
  border-color: var(--v3-fin-coral);
}

.v3-fin-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7D75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 36px;
}

/* Toggle Entrada / Saída */
.v3-fin-toggle-tipo {
  display: flex;
  background: rgba(74, 63, 56, 0.04);
  padding: 4px;
  border-radius: 14px;
  margin-bottom: 14px;
}
.v3-fin-toggle-btn {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #8A7D75;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.v3-fin-toggle-btn svg {
  width: 14px; height: 14px;
  stroke-width: 2;
}
.v3-fin-toggle-btn.is-active {
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(74, 63, 56, 0.08);
}
.v3-fin-toggle-btn.is-active.is-entrada { color: var(--v3-fin-emerald); }
.v3-fin-toggle-btn.is-active.is-saida   { color: var(--v3-fin-coral); }

/* Métodos de pagamento */
.v3-fin-meio-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.v3-fin-meio-chip {
  padding: 12px 6px;
  background: rgba(74, 63, 56, 0.04);
  border: 1.5px solid transparent;
  border-radius: 12px;
  text-align: center;
  color: #8A7D75;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.v3-fin-meio-chip svg {
  width: 16px; height: 16px;
  stroke-width: 1.8;
}
.v3-fin-meio-label {
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
}
.v3-fin-meio-chip.is-active {
  background: rgba(184, 58, 107, 0.08);
  border-color: #B83A6B;
  color: #B83A6B;
}

/* Categoria + botão criar */
.v3-fin-cat-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.v3-fin-cat-row .v3-fin-input { flex: 1; }
.v3-fin-btn-inline {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1.5px solid rgba(184, 58, 107, 0.20);
  background: rgba(184, 58, 107, 0.04);
  color: #B83A6B;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.v3-fin-btn-inline:hover {
  background: rgba(184, 58, 107, 0.08);
  border-color: #B83A6B;
}
.v3-fin-btn-inline svg {
  width: 16px; height: 16px;
  stroke-width: 2;
}

/* Recorrência chips */
.v3-fin-rec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.v3-fin-rec-chip {
  padding: 7px 12px;
  background: rgba(74, 63, 56, 0.04);
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: #6E5D52;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v3-fin-rec-chip:hover {
  background: rgba(74, 63, 56, 0.08);
}
.v3-fin-rec-chip.is-selected {
  background: rgba(124, 77, 255, 0.08);
  border-color: #7C4DFF;
  color: #5E35B1;
  font-weight: 600;
}

.v3-fin-rec-ate-grupo {
  margin-top: 4px;
}

/* Footer do modal */
.v3-fin-modal-footer {
  display: flex;
  gap: 10px;
  padding: 12px 20px 22px;
  border-top: 1px solid rgba(74, 63, 56, 0.06);
  background: rgba(255, 255, 255, 0.95);
  flex-shrink: 0;
}

.v3-fin-modal-cancel,
.v3-fin-modal-del,
.v3-fin-modal-ok {
  flex: 1;
  padding: 13px;
  border-radius: 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.v3-fin-modal-cancel {
  background: transparent;
  border: 1.5px solid rgba(74, 63, 56, 0.12);
  color: #8A7D75;
}
.v3-fin-modal-cancel:hover {
  background: rgba(74, 63, 56, 0.04);
}
.v3-fin-modal-del {
  background: rgba(229, 57, 53, 0.06);
  border: 1.5px solid transparent;
  color: #C62828;
}
.v3-fin-modal-del:hover {
  background: rgba(229, 57, 53, 0.12);
}
.v3-fin-modal-del svg {
  width: 14px; height: 14px;
}
.v3-fin-modal-ok {
  background: linear-gradient(135deg, #B83A6B 0%, #D4956A 100%);
  border: none;
  color: #FFFFFF;
  box-shadow: 0 4px 14px -4px rgba(184, 58, 107, 0.40);
}
.v3-fin-modal-ok:hover {
  box-shadow: 0 6px 18px -4px rgba(184, 58, 107, 0.50);
  transform: translateY(-1px);
}

/* ─── DESKTOP ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .v3-fin-page-header-left h2 { font-size: 32px; }
  .v3-fin-hero-valor { font-size: 40px; }
  .v3-fin-trans-titulo { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUSA PLANNER v3.0 — Sessão 6.1.b — Fase 3.1
   Gráficos (donut/linha/radar) + Sub-aba Categorias + Modal Orçamento
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── ORÇAMENTO — TAG META + BOTÃO EDITAR ───────────────────────────────── */
.v3-fin-orc-tag {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(184, 58, 107, 0.10);
  color: #B83A6B;
  font-family: 'Outfit', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 6px;
  margin-left: 6px;
  vertical-align: middle;
}
.v3-fin-bloco-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.v3-fin-bloco-action svg {
  width: 11px; height: 11px;
}

/* ─── GRÁFICOS — LOADING & VAZIO ────────────────────────────────────────── */
.v3-fin-grafico-loading {
  padding: 60px 20px;
  text-align: center;
}
.v3-fin-grafico-loading .v3-fin-loading-anel {
  margin: 0 auto 12px;
}
.v3-fin-grafico-loading-msg {
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-size: 12.5px;
  color: #8A7D75;
}
.v3-fin-grafico-vazio {
  padding: 24px 12px;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-size: 12.5px;
  color: #8A7D75;
}

/* ─── DONUT ─────────────────────────────────────────────────────────────── */
.v3-fin-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 6px 0 4px;
}
.v3-fin-donut {
  flex-shrink: 0;
}
.v3-fin-donut-legenda {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.v3-fin-donut-leg-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}
.v3-fin-donut-leg-cor {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.v3-fin-donut-leg-nome {
  flex: 1;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: #2A2420;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v3-fin-donut-leg-valor {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: #2A2420;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.v3-fin-donut-leg-valor span {
  font-size: 10.5px;
  color: #8A7D75;
  font-weight: 500;
}

/* ─── LINHA 6 MESES ─────────────────────────────────────────────────────── */
.v3-fin-linha {
  width: 100%;
  height: auto;
  margin: 4px 0;
}
.v3-fin-linha-leg {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 8px 0 4px;
}
.v3-fin-linha-leg-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  color: #6E5D52;
}
.v3-fin-linha-leg-cor {
  width: 12px; height: 3px;
  border-radius: 2px;
}

/* ─── RADAR ─────────────────────────────────────────────────────────────── */
.v3-fin-radar {
  width: 100%;
  height: auto;
  margin: 4px 0;
}

/* ─── SUB-ABA CATEGORIAS ────────────────────────────────────────────────── */
.v3-fin-cats-wrap {
  padding-bottom: 16px;
}

.v3-fin-cta-secundario {
  background: rgba(184, 58, 107, 0.06) !important;
  color: #B83A6B !important;
  box-shadow: none !important;
  border: 1.5px dashed rgba(184, 58, 107, 0.30) !important;
  margin-bottom: 14px !important;
}
.v3-fin-cta-secundario:hover {
  background: rgba(184, 58, 107, 0.10) !important;
  border-color: #B83A6B !important;
}

.v3-fin-cats-section-title {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8A7D75;
  margin: 14px 4px 8px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.v3-fin-cats-section-title span {
  font-weight: 500;
  color: #B5A99F;
  letter-spacing: 0.5px;
}

.v3-fin-cats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.v3-fin-cat-card {
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 58, 107, 0.06);
  border-radius: 14px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v3-fin-cat-card:hover {
  border-color: rgba(184, 58, 107, 0.20);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(184, 58, 107, 0.20);
}

.v3-fin-cat-card-icone {
  width: 40px; height: 40px;
  margin: 0 auto 6px;
  border-radius: 11px;
  background: rgba(74, 63, 56, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cat-cor, #B83A6B);
}
.v3-fin-cat-card-icone svg {
  width: 18px; height: 18px;
}

.v3-fin-cat-card-nome {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: #2A2420;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v3-fin-cat-card-tag {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 1px 5px;
  background: linear-gradient(135deg, #B83A6B, #D4956A);
  color: #FFFFFF;
  font-family: 'Outfit', sans-serif;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 5px;
}

/* ─── MODAL CATEGORIA — ÍCONES E CORES ──────────────────────────────────── */
.v3-fin-modal-cat .v3-fin-modal-body {
  padding-bottom: 8px;
}

.v3-fin-icone-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.v3-fin-icone-btn {
  aspect-ratio: 1;
  background: rgba(74, 63, 56, 0.04);
  border: 1.5px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8A7D75;
  transition: all 0.18s ease;
}
.v3-fin-icone-btn svg {
  width: 16px; height: 16px;
}
.v3-fin-icone-btn:hover {
  background: rgba(74, 63, 56, 0.08);
}
.v3-fin-icone-btn.is-active {
  background: rgba(184, 58, 107, 0.10);
  border-color: var(--cat-cor, #B83A6B);
  color: var(--cat-cor, #B83A6B);
}

.v3-fin-cores-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
.v3-fin-cor-btn {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
}
.v3-fin-cor-btn:hover {
  transform: scale(1.08);
}
.v3-fin-cor-btn.is-active {
  border-color: #2A2420;
  transform: scale(1.10);
}
.v3-fin-cor-btn.is-active::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.v3-fin-cat-preview {
  margin-top: 16px;
  padding: 14px;
  background: rgba(184, 58, 107, 0.04);
  border: 1px dashed rgba(184, 58, 107, 0.20);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.v3-fin-cat-preview .v3-fin-cat-card-icone {
  margin: 0;
  flex-shrink: 0;
}
.v3-fin-cat-preview .v3-fin-cat-card-nome {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
}

/* ─── MODAL ORÇAMENTO ───────────────────────────────────────────────────── */
.v3-fin-modal-orc .v3-fin-modal-titulo em {
  color: #D4956A;
  font-style: italic;
  font-weight: 600;
}

.v3-fin-orc-modos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}
.v3-fin-orc-modo {
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: #FBF4F0;
  border: 1.5px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v3-fin-orc-modo:hover {
  background: rgba(184, 58, 107, 0.04);
}
.v3-fin-orc-modo.is-active {
  background: #FFFFFF;
  border-color: #B83A6B;
  box-shadow: 0 2px 8px -2px rgba(184, 58, 107, 0.15);
}
.v3-fin-orc-modo-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #2A2420;
  margin-bottom: 2px;
}
.v3-fin-orc-modo.is-active .v3-fin-orc-modo-titulo {
  color: #B83A6B;
}
.v3-fin-orc-modo-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  color: #8A7D75;
}

.v3-fin-orc-modal-info {
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-size: 11px;
  color: #8A7D75;
  margin-top: 6px;
  padding: 0 4px;
}

/* ─── DESKTOP ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .v3-fin-cats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .v3-fin-donut-wrap {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
  }
  .v3-fin-donut-legenda {
    max-width: 240px;
  }
  .v3-fin-icone-grid {
    grid-template-columns: repeat(11, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUSA PLANNER v3.0 — Sessão 6.1.b — Fase 3.2
   Filtros nos gráficos + Sub-aba Cartões + Modal cartão + Modal fatura
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── FILTROS DE GRÁFICOS ───────────────────────────────────────────────── */
.v3-fin-graficos-filtros {
  margin-bottom: 14px;
}

.v3-fin-graf-periodo-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.v3-fin-graf-periodo {
  flex: 1;
  padding: 8px 10px;
  background: rgba(74, 63, 56, 0.04);
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #8A7D75;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v3-fin-graf-periodo:hover {
  background: rgba(74, 63, 56, 0.08);
}
.v3-fin-graf-periodo.is-active {
  background: linear-gradient(135deg, rgba(184, 58, 107, 0.10) 0%, rgba(212, 149, 106, 0.10) 100%);
  border-color: #B83A6B;
  color: #B83A6B;
}

.v3-fin-graf-cat-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  background: rgba(74, 63, 56, 0.04);
  border: 1.5px solid transparent;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: #6E5D52;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v3-fin-graf-cat-btn svg {
  width: 13px; height: 13px;
}
.v3-fin-graf-cat-btn:hover {
  background: rgba(74, 63, 56, 0.08);
}
.v3-fin-graf-cat-btn.is-open {
  background: rgba(184, 58, 107, 0.10);
  color: #B83A6B;
  border-color: #B83A6B;
}

.v3-fin-graf-cat-painel {
  margin-top: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 58, 107, 0.10);
  border-radius: 14px;
  animation: v3-fin-painel-slide 0.25s ease-out;
}
@keyframes v3-fin-painel-slide {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.v3-fin-graf-cat-acoes {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(74, 63, 56, 0.06);
}
.v3-fin-graf-cat-acao {
  background: transparent;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: #B83A6B;
  cursor: pointer;
  padding: 4px 0;
}
.v3-fin-graf-cat-acao.is-link {
  color: #8A7D75;
  font-weight: 500;
}

.v3-fin-graf-cat-vazio {
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-size: 12px;
  color: #8A7D75;
  text-align: center;
  padding: 12px;
}

.v3-fin-graf-cat-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.v3-fin-graf-cat-chk {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}
.v3-fin-graf-cat-chk:hover {
  background: rgba(184, 58, 107, 0.04);
}
.v3-fin-graf-cat-chk-cor {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.4;
  transition: opacity 0.18s ease;
}
.v3-fin-graf-cat-chk.is-on .v3-fin-graf-cat-chk-cor {
  opacity: 1;
}
.v3-fin-graf-cat-chk-nome {
  flex: 1;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: #2A2420;
  opacity: 0.55;
  transition: opacity 0.18s ease;
}
.v3-fin-graf-cat-chk.is-on .v3-fin-graf-cat-chk-nome {
  opacity: 1;
}
.v3-fin-graf-cat-chk-mark {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(74, 63, 56, 0.20);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: transparent;
  transition: all 0.18s ease;
}
.v3-fin-graf-cat-chk.is-on .v3-fin-graf-cat-chk-mark {
  background: #B83A6B;
  border-color: #B83A6B;
  color: #FFFFFF;
}

/* Subtítulo discreto nos blocos de gráfico */
.v3-fin-bloco-sub {
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-size: 11px;
  font-weight: 400;
  color: #8A7D75;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 6px;
}

/* Resumo agregado do período (semestre/ano) */
.v3-fin-graf-resumo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.v3-fin-graf-resumo-item {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 58, 107, 0.06);
  border-radius: 14px;
  padding: 12px;
}
.v3-fin-graf-resumo-label {
  font-family: 'Outfit', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8A7D75;
  margin-bottom: 4px;
}
.v3-fin-graf-resumo-valor {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #2A2420;
}
.v3-fin-graf-resumo-valor.is-entrada { color: #4A8B7A; }
.v3-fin-graf-resumo-valor.is-saida   { color: #D67560; }


/* ═══════════════════════════════════════════════════════════════════════════
   SUB-ABA CARTÕES
   ═══════════════════════════════════════════════════════════════════════════ */

.v3-fin-cartoes-vazio {
  padding: 50px 20px;
  text-align: center;
}
.v3-fin-cartoes-vazio-icone {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(184, 58, 107, 0.08);
  color: #B83A6B;
}
.v3-fin-cartoes-vazio-icone svg {
  width: 28px; height: 28px;
}
.v3-fin-cartoes-vazio-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  color: #2A2420;
  margin-bottom: 6px;
}
.v3-fin-cartoes-vazio-msg {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: #8A7D75;
  line-height: 1.5;
  margin-bottom: 22px;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}

.v3-fin-cartoes-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.v3-fin-cartao-item {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 58, 107, 0.06);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v3-fin-cartao-item:hover {
  border-color: rgba(184, 58, 107, 0.20);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -8px rgba(184, 58, 107, 0.15);
}

/* Card visual do cartão */
.v3-fin-cartao-art {
  position: relative;
  aspect-ratio: 1.586 / 1; /* proporção real de cartão de crédito */
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #FFFFFF;
  overflow: hidden;
}
.v3-fin-cartao-art::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -20%;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.v3-fin-cartao-art::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.10) 0%, transparent 70%);
  pointer-events: none;
}
.v3-fin-cartao-pin {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 3px 9px;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #FFFFFF;
  z-index: 2;
}
.v3-fin-cartao-art-logo {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
  z-index: 1;
}
.v3-fin-cartao-art-logo svg {
  height: 30px;
  width: auto;
  max-width: 70px;
}
.v3-fin-cartao-art-apelido {
  position: relative;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Info embaixo */
.v3-fin-cartao-info {
  padding: 14px 14px 12px;
}
.v3-fin-cartao-info-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.v3-fin-cartao-info-banco {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #2A2420;
}
.v3-fin-cartao-info-final {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  color: #8A7D75;
  letter-spacing: 0.3px;
}
.v3-fin-cartao-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: #6E5D52;
  margin-bottom: 5px;
}
.v3-fin-cartao-info-row b {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  color: #2A2420;
}

.v3-fin-cartao-bar {
  height: 5px;
  background: rgba(74, 63, 56, 0.06);
  border-radius: 999px;
  overflow: hidden;
  margin: 6px 0 8px;
}
.v3-fin-cartao-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.v3-fin-cartao-meta {
  display: flex;
  justify-content: space-between;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  color: #8A7D75;
  margin-bottom: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(74, 63, 56, 0.08);
}

.v3-fin-cartao-ver-fatura {
  width: 100%;
  padding: 9px;
  background: rgba(184, 58, 107, 0.06);
  color: #B83A6B;
  border: 1px solid rgba(184, 58, 107, 0.20);
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.2s ease;
}
.v3-fin-cartao-ver-fatura svg {
  width: 13px; height: 13px;
}
.v3-fin-cartao-ver-fatura:hover {
  background: rgba(184, 58, 107, 0.12);
}

/* ─── MODAL CARTÃO ──────────────────────────────────────────────────────── */
.v3-fin-cartao-preview {
  margin: 0 -4px 14px;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px -8px rgba(74, 63, 56, 0.30);
}
.v3-fin-cartao-preview .v3-fin-cartao-art {
  border-radius: 14px;
}

.v3-fin-bancos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}

.v3-fin-banco-chip {
  background: transparent;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v3-fin-banco-chip:hover {
  border-color: rgba(184, 58, 107, 0.20);
}
.v3-fin-banco-chip.is-active {
  border-color: #B83A6B;
}

.v3-fin-banco-chip-art {
  aspect-ratio: 1.586 / 1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.v3-fin-banco-chip-art::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -30%;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
}
.v3-fin-banco-chip-art svg {
  height: 65%;
  width: auto;
  max-width: 80%;
  position: relative;
  z-index: 1;
}
.v3-fin-banco-chip-nome {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #2A2420;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v3-fin-card-datas-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.v3-fin-card-principal {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: rgba(74, 63, 56, 0.04);
  border: 1.5px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v3-fin-card-principal:hover {
  background: rgba(74, 63, 56, 0.06);
}
.v3-fin-card-principal.is-on {
  background: rgba(184, 58, 107, 0.06);
  border-color: rgba(184, 58, 107, 0.30);
}
.v3-fin-card-principal input {
  display: none;
}
.v3-fin-card-principal-box {
  width: 22px; height: 22px;
  border-radius: 7px;
  border: 1.5px solid rgba(74, 63, 56, 0.20);
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.18s ease;
}
.v3-fin-card-principal.is-on .v3-fin-card-principal-box {
  background: #B83A6B;
  border-color: #B83A6B;
  color: #FFFFFF;
}
.v3-fin-card-principal-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #2A2420;
  margin-bottom: 2px;
}
.v3-fin-card-principal-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  color: #8A7D75;
}

/* ─── MODAL TRANSAÇÃO — DROPDOWN CARTÃO E CTA ───────────────────────────── */
.v3-fin-cartao-vazio-modal {
  padding: 14px;
  background: rgba(184, 58, 107, 0.04);
  border: 1px dashed rgba(184, 58, 107, 0.30);
  border-radius: 12px;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: #8A7D75;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.v3-fin-btn-link {
  background: transparent;
  border: none;
  color: #B83A6B;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

/* ─── MODAL FATURA ──────────────────────────────────────────────────────── */
.v3-fin-fat-resumo {
  background: linear-gradient(135deg, #FFFFFF 0%, #FBF4F0 100%);
  border: 1px solid rgba(184, 58, 107, 0.10);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.v3-fin-fat-resumo::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 58, 107, 0.10) 0%, transparent 70%);
}
.v3-fin-fat-resumo-label {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8A7D75;
  margin-bottom: 6px;
  position: relative;
}
.v3-fin-fat-resumo-valor {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.8px;
  color: #B83A6B;
  margin-bottom: 6px;
  position: relative;
}
.v3-fin-fat-resumo-ciclo {
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-size: 12px;
  color: #8A7D75;
  position: relative;
}

.v3-fin-modal-fat .v3-fin-modal-body {
  padding-bottom: 24px;
}

/* ─── DESKTOP ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .v3-fin-cartoes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .v3-fin-bancos-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUSA PLANNER v3.0 — Sessão 6.1.b — Fase 3.3.A
   Parcelas + Sub-aba Recorrentes + Modal escolha virtual + Edição de regra
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── BLOCOS DE PARCELAS / RECORRÊNCIA NO MODAL ─────────────────────────── */
.v3-fin-parc-bloco,
.v3-fin-rec-bloco {
  margin-top: 18px;
  padding: 14px;
  background: rgba(74, 63, 56, 0.03);
  border: 1px solid rgba(74, 63, 56, 0.06);
  border-radius: 14px;
}

.v3-fin-rec-bloco {
  background: rgba(124, 77, 255, 0.04);
  border-color: rgba(124, 77, 255, 0.10);
}

.v3-fin-parc-header {
  margin-bottom: 10px;
}

.v3-fin-parc-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #B83A6B;
  margin-bottom: 2px;
}
.v3-fin-rec-bloco .v3-fin-parc-titulo {
  color: #5E35B1;
}

.v3-fin-parc-help {
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-size: 11.5px;
  color: #8A7D75;
  line-height: 1.3;
}

/* Chips de parcelas */
.v3-fin-parc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.v3-fin-parc-chip {
  padding: 7px 13px;
  background: #FFFFFF;
  border: 1.5px solid rgba(74, 63, 56, 0.10);
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #6E5D52;
  cursor: pointer;
  transition: all 0.18s ease;
  min-width: 48px;
}
.v3-fin-parc-chip:hover {
  border-color: rgba(184, 58, 107, 0.30);
}
.v3-fin-parc-chip.is-selected {
  background: #B83A6B;
  border-color: #B83A6B;
  color: #FFFFFF;
}

.v3-fin-parc-info {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(184, 58, 107, 0.06);
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: #2A2420;
  text-align: center;
}
.v3-fin-parc-info b {
  color: #B83A6B;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
}

/* Sufixo de parcela na lista de transações: "(2/12)" */
.v3-fin-trans-parc {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #8A7D75;
  letter-spacing: 0.3px;
}

/* Marca visual de transação virtual (recorrência expandida) */
.v3-trans-virtual {
  position: relative;
}
.v3-trans-virtual::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 30px;
  background: linear-gradient(180deg, #7C4DFF, #5E35B1);
  border-radius: 0 3px 3px 0;
  transform: translateY(-50%);
  opacity: 0.65;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUB-ABA RECORRENTES
   ═══════════════════════════════════════════════════════════════════════════ */

.v3-fin-rec-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.v3-fin-rec-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(124, 77, 255, 0.10);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v3-fin-rec-item:hover {
  border-color: rgba(124, 77, 255, 0.30);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(124, 77, 255, 0.15);
}
.v3-fin-rec-item.is-pausada {
  opacity: 0.55;
  border-color: rgba(74, 63, 56, 0.10);
}
.v3-fin-rec-item.is-pausada:hover {
  opacity: 0.85;
}

.v3-fin-rec-item-body {
  flex: 1;
  min-width: 0;
}

.v3-fin-rec-item-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #2A2420;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.v3-fin-rec-item-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.v3-fin-rec-item-prox {
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-size: 11px;
  color: #5E35B1;
  font-weight: 500;
}
.v3-fin-rec-item.is-pausada .v3-fin-rec-item-prox {
  color: #8A7D75;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 9.5px;
}

.v3-fin-rec-item-direita {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.v3-fin-rec-item-valor {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  color: #D67560;
}
.v3-fin-rec-item-valor.is-entrada {
  color: #4A8B7A;
}

/* Toggle switch (estilo iOS) */
.v3-fin-rec-toggle {
  width: 38px;
  height: 22px;
  background: rgba(74, 63, 56, 0.18);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: background 0.22s ease;
}
.v3-fin-rec-toggle.is-on {
  background: #7C4DFF;
}
.v3-fin-rec-toggle-knob {
  width: 18px;
  height: 18px;
  background: #FFFFFF;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
  transition: transform 0.22s ease;
}
.v3-fin-rec-toggle.is-on .v3-fin-rec-toggle-knob {
  transform: translateX(16px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL — Escolha ao tocar em virtual
   ═══════════════════════════════════════════════════════════════════════════ */

.v3-fin-modal-escolha .v3-fin-modal-body {
  padding-bottom: 20px;
}

.v3-fin-virt-info {
  padding: 14px;
  background: rgba(124, 77, 255, 0.06);
  border-left: 3px solid #7C4DFF;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #2A2420;
  margin-bottom: 14px;
}
.v3-fin-virt-info b {
  color: #5E35B1;
  font-weight: 600;
}

.v3-fin-virt-opcao {
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: #FBF4F0;
  border: 1.5px solid transparent;
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v3-fin-virt-opcao:hover {
  background: #FFFFFF;
  border-color: rgba(184, 58, 107, 0.30);
  transform: translateY(-1px);
}
.v3-fin-virt-opcao.is-perigo {
  background: rgba(229, 57, 53, 0.04);
}
.v3-fin-virt-opcao.is-perigo:hover {
  background: rgba(229, 57, 53, 0.08);
  border-color: rgba(229, 57, 53, 0.30);
}

.v3-fin-virt-opcao-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #2A2420;
  margin-bottom: 3px;
}
.v3-fin-virt-opcao.is-perigo .v3-fin-virt-opcao-titulo {
  color: #C62828;
}

.v3-fin-virt-opcao-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  color: #8A7D75;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AVISO FLUTUANTE (toast estilizado para edição de regra)
   ═══════════════════════════════════════════════════════════════════════════ */

.v3-fin-aviso-flutuante {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  max-width: 90vw;
  width: 360px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #5E35B1 0%, #7C4DFF 100%);
  color: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 12px 30px -8px rgba(94, 53, 177, 0.40);
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  line-height: 1.4;
  animation: v3-fin-aviso-in 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.v3-fin-aviso-flutuante b {
  font-size: 13px;
  font-weight: 700;
}
.v3-fin-aviso-flutuante.is-saindo {
  animation: v3-fin-aviso-out 0.4s ease forwards;
}
@keyframes v3-fin-aviso-in {
  from { opacity: 0; transform: translate(-50%, -20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes v3-fin-aviso-out {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, -20px); }
}

/* ─── DESKTOP ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .v3-fin-rec-lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUSA PLANNER v3.0 — Sessão 6.1.b — Fase 3.3.B
   Modal de export PDF da Aba Finanças
   ═══════════════════════════════════════════════════════════════════════════ */

.v3-fin-modal-pdf .v3-fin-modal-body {
  padding-bottom: 16px;
}

.v3-fin-pdf-info {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: #2A2420;
  line-height: 1.5;
  padding: 12px 14px;
  background: rgba(184, 58, 107, 0.05);
  border-left: 3px solid #B83A6B;
  border-radius: 10px;
  margin-bottom: 12px;
}

.v3-fin-pdf-aviso {
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-size: 11px;
  color: #8A7D75;
  line-height: 1.4;
  padding: 10px 12px;
  background: rgba(74, 139, 122, 0.05);
  border: 1px dashed rgba(74, 139, 122, 0.25);
  border-radius: 10px;
  margin-top: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUSA PLANNER v3.0 — Sessão 6.2.A — Perfil Público
   Modais: avatar picker, nome público, privacidade
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── PREVIEW DO AVATAR ESCOLHIDO ───────────────────────────────────────── */
.v3-pp-preview {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.v3-pp-preview img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FBF4F0 0%, #FFFFFF 100%);
  padding: 8px;
  box-shadow: 0 8px 24px -8px rgba(184, 58, 107, 0.30);
  border: 3px solid #FFFFFF;
}

/* ─── LABEL DAS SEÇÕES ──────────────────────────────────────────────────── */
.v3-pp-section-label {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #B83A6B;
  margin: 16px 0 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.v3-pp-shuffle {
  background: rgba(184, 58, 107, 0.08);
  border: 1px solid rgba(184, 58, 107, 0.20);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #B83A6B;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  transition: all 0.18s ease;
}
.v3-pp-shuffle:hover {
  background: rgba(184, 58, 107, 0.14);
}

/* ─── PICKER DE ESTILOS (6 chips) ───────────────────────────────────────── */
.v3-pp-styles-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.v3-pp-style-chip {
  background: #FFFFFF;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 8px 4px 6px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.v3-pp-style-chip:hover {
  background: #FBF4F0;
}
.v3-pp-style-chip.is-active {
  border-color: #B83A6B;
  background: rgba(184, 58, 107, 0.06);
}
.v3-pp-style-chip img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FBF4F0 0%, #FFFFFF 100%);
}
.v3-pp-style-label {
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: #2A2420;
}

/* ─── PICKER DE VARIAÇÕES (8 seeds) ─────────────────────────────────────── */
.v3-pp-seeds-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.v3-pp-seed-chip {
  background: #FFFFFF;
  border: 2px solid transparent;
  border-radius: 50%;
  padding: 4px;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v3-pp-seed-chip:hover {
  transform: scale(1.05);
}
.v3-pp-seed-chip.is-active {
  border-color: #B83A6B;
  background: rgba(184, 58, 107, 0.08);
  transform: scale(1.05);
  box-shadow: 0 4px 12px -4px rgba(184, 58, 107, 0.30);
}
.v3-pp-seed-chip img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* ─── MODAL DE NOME ─────────────────────────────────────────────────────── */
.v3-pp-nome-info {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: #2A2420;
  line-height: 1.5;
  padding: 12px 14px;
  background: rgba(184, 58, 107, 0.05);
  border-left: 3px solid #B83A6B;
  border-radius: 10px;
  margin-bottom: 14px;
}

.v3-pp-nome-hint {
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-size: 11px;
  color: #8A7D75;
  margin-top: 6px;
  text-align: right;
}

/* ─── MODAL DE PRIVACIDADE ──────────────────────────────────────────────── */
.v3-pp-priv-explica {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: #2A2420;
  line-height: 1.6;
  padding: 14px;
  background: rgba(212, 149, 106, 0.06);
  border-radius: 12px;
  margin-bottom: 16px;
}
.v3-pp-priv-explica b {
  color: #B83A6B;
  font-weight: 700;
}

.v3-pp-priv-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  background: rgba(74, 63, 56, 0.04);
  border: 1.5px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 12px;
}
.v3-pp-priv-toggle.is-on {
  background: rgba(74, 139, 122, 0.06);
  border-color: rgba(74, 139, 122, 0.25);
}

.v3-pp-priv-info {
  flex: 1;
}

.v3-pp-priv-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #2A2420;
  margin-bottom: 3px;
}

.v3-pp-priv-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  color: #8A7D75;
}
.v3-pp-priv-toggle.is-on .v3-pp-priv-sub {
  color: #4A8B7A;
}

.v3-pp-priv-aviso {
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-size: 11.5px;
  color: #8A7D75;
  line-height: 1.5;
  padding: 10px 12px;
  background: rgba(74, 63, 56, 0.03);
  border-radius: 10px;
}

/* ─── DESKTOP ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .v3-pp-modal-avatar,
  .v3-pp-modal-nome,
  .v3-pp-modal-privacidade {
    max-width: 480px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUSA PLANNER v3.0 — Sessão 6.2.A — Mensagem 2
   Avatar DiceBear + indicadores de tap + Pódio real (loading/empty)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── AVATAR DICEBEAR NA ABA EU ─────────────────────────────────────────── */
.v3-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, #FBF4F0 0%, #FFFFFF 100%);
}

/* Avatar clickable + lápis flutuante */
.v3-avatar-frame.v3-avatar-clickable {
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease;
}
.v3-avatar-frame.v3-avatar-clickable:hover {
  transform: scale(1.03);
}
.v3-avatar-frame.v3-avatar-clickable:active {
  transform: scale(0.97);
}

.v3-avatar-edit-badge {
  position: absolute;
  bottom: 0;
  right: 4px;
  width: 26px;
  height: 26px;
  background: #B83A6B;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid #FFFFFF;
  box-shadow: 0 2px 8px -2px rgba(184, 58, 107, 0.40);
  z-index: 3;
  pointer-events: none;
}

/* Nome clickable + lápis */
.v3-profile-name-clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.v3-profile-name-clickable:hover {
  background: rgba(184, 58, 107, 0.06);
}
.v3-profile-name-pencil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #B83A6B;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.v3-profile-name-clickable:hover .v3-profile-name-pencil {
  opacity: 1;
}

/* ─── PÓDIO LOADING ─────────────────────────────────────────────────────── */
.v3-podium-async {
  min-height: 240px;
}

.v3-podium-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  text-align: center;
}

.v3-podium-loading-anel {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(184, 58, 107, 0.15);
  border-top-color: #B83A6B;
  border-radius: 50%;
  animation: v3-podium-spin 0.8s linear infinite;
}

@keyframes v3-podium-spin {
  to { transform: rotate(360deg); }
}

.v3-podium-loading-msg {
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-size: 12.5px;
  color: #8A7D75;
}

/* ─── PÓDIO EMPTY STATE ─────────────────────────────────────────────────── */
.v3-podium-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px 50px;
  text-align: center;
}

.v3-podium-empty-icon {
  font-size: 38px;
  margin-bottom: 4px;
  opacity: 0.6;
}

.v3-podium-empty-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  color: #2A2420;
  margin-bottom: 4px;
}

.v3-podium-empty-msg {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: #8A7D75;
  line-height: 1.5;
  max-width: 280px;
}

/* ─── PÓDIO REAL — IMG NO AVATAR ────────────────────────────────────────── */
.v3-podium-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Slot vazio (menos de 3 musas no escopo) */
.v3-podium-empty-slot {
  opacity: 0.45;
}
.v3-podium-empty-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: #B5A096;
}
.v3-podium-name-empty {
  font-style: italic;
  color: #B5A096 !important;
}

/* Tag "(você)" mais discreta */
.v3-podium-name em {
  font-style: italic;
  color: #B83A6B;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUSA PLANNER v3.0 — Sessão 6.2.B — Conquistas + Sala de Troféus
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── ANEL/SVG DOS TROFÉUS — efeitos por raridade ────────────────────────── */
.v3-trof-svg {
  display: block;
  filter: drop-shadow(0 2px 6px rgba(74, 63, 56, 0.10));
}
.v3-trof-svg.v3-trof-on {
  animation: v3-trof-shine 3s ease-in-out infinite;
}
.v3-trof-svg.v3-trof-epica {
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.55));
}
.v3-trof-svg.v3-trof-mitica {
  filter: drop-shadow(0 0 16px rgba(255, 107, 157, 0.65))
          drop-shadow(0 0 24px rgba(124, 77, 255, 0.40));
  animation: v3-trof-mitica-rotate 6s linear infinite, v3-trof-shine 2s ease-in-out infinite;
}

@keyframes v3-trof-shine {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
@keyframes v3-trof-mitica-rotate {
  0%, 100% { filter: hue-rotate(0deg) drop-shadow(0 0 16px rgba(255, 107, 157, 0.65)) drop-shadow(0 0 24px rgba(124, 77, 255, 0.40)); }
  50%      { filter: hue-rotate(40deg) drop-shadow(0 0 18px rgba(124, 77, 255, 0.65)) drop-shadow(0 0 28px rgba(255, 107, 157, 0.50)); }
}

/* ─── MODAL DE CELEBRAÇÃO (desbloqueio) ──────────────────────────────────── */
.v3-trof-celebra-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 36, 32, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: v3-trof-overlay-in 0.35s ease-out;
}
.v3-trof-celebra-overlay.is-saindo {
  animation: v3-trof-overlay-out 0.3s ease-in forwards;
}
@keyframes v3-trof-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes v3-trof-overlay-out {
  to { opacity: 0; }
}

.v3-trof-celebra-modal {
  background: linear-gradient(135deg, #FFFFFF 0%, #FBF4F0 100%);
  border-radius: 24px;
  padding: 28px 22px 24px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px -12px rgba(184, 58, 107, 0.40);
  animation: v3-trof-modal-in 0.55s cubic-bezier(0.34, 1.5, 0.64, 1);
}
.v3-trof-celebra-modal::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.20) 0%, transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
}
@keyframes v3-trof-modal-in {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.v3-trof-celebra-confete {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle 3px at 15% 12%, #FFD700, transparent),
    radial-gradient(circle 2px at 75% 8%, #B83A6B, transparent),
    radial-gradient(circle 4px at 30% 20%, #FF6B9D, transparent),
    radial-gradient(circle 2px at 88% 18%, #7C4DFF, transparent),
    radial-gradient(circle 3px at 50% 6%, #D4956A, transparent),
    radial-gradient(circle 3px at 12% 88%, #FFD700, transparent),
    radial-gradient(circle 2px at 90% 92%, #B83A6B, transparent);
  animation: v3-trof-confete 1.8s ease-out;
}
@keyframes v3-trof-confete {
  0% { transform: translateY(-20px); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(20px); opacity: 0.4; }
}

.v3-trof-celebra-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: #B83A6B;
  margin-bottom: 18px;
  position: relative;
  letter-spacing: -0.3px;
}

.v3-trof-celebra-lista {
  position: relative;
}
.v3-trof-celebra-lista.is-multi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-height: 60vh;
  overflow-y: auto;
}

.v3-trof-celebra-item {
  padding: 14px 8px;
}
.v3-trof-celebra-lista.is-multi .v3-trof-celebra-item {
  padding: 10px 4px;
}

.v3-trof-celebra-item .v3-trof-svg {
  margin: 0 auto 10px;
}

.v3-trof-celebra-nome {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: #2A2420;
  margin-bottom: 4px;
}
.v3-trof-celebra-lista.is-multi .v3-trof-celebra-nome {
  font-size: 13px;
}

.v3-trof-celebra-rar {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.v3-trof-celebra-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: #6E5D52;
  line-height: 1.4;
  font-style: italic;
}
.v3-trof-celebra-lista.is-multi .v3-trof-celebra-desc {
  font-size: 11px;
}

.v3-trof-celebra-btn {
  margin-top: 18px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #B83A6B 0%, #D4956A 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  box-shadow: 0 6px 18px -4px rgba(184, 58, 107, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.v3-trof-celebra-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -4px rgba(184, 58, 107, 0.45);
}
.v3-trof-celebra-btn:active {
  transform: translateY(1px);
}

/* ─── BADGES DE RARIDADE ────────────────────────────────────────────────── */
.v3-trof-rar-comum {
  background: rgba(212, 149, 106, 0.15);
  color: #8B6F1E;
}
.v3-trof-rar-rara {
  background: linear-gradient(135deg, rgba(184, 58, 107, 0.12), rgba(212, 149, 106, 0.12));
  color: #B83A6B;
}
.v3-trof-rar-epica {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.18), rgba(184, 58, 107, 0.15));
  color: #B8860B;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
}
.v3-trof-rar-mitica {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.18), rgba(124, 77, 255, 0.18));
  color: #7C4DFF;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SALA DE TROFÉUS (modal full-screen)
   ═══════════════════════════════════════════════════════════════════════════ */

.v3-trof-sala-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #FBF4F0 0%, #FFFFFF 100%);
  z-index: 10000;
  overflow-y: auto;
  animation: v3-trof-sala-in 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.v3-trof-sala-overlay.is-saindo {
  animation: v3-trof-sala-out 0.28s ease-in forwards;
}
@keyframes v3-trof-sala-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes v3-trof-sala-out {
  to { opacity: 0; transform: translateY(20px); }
}

.v3-trof-sala {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 60px;
}

.v3-trof-sala-head {
  position: sticky;
  top: 0;
  background: rgba(251, 244, 240, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 14px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
  border-bottom: 1px solid rgba(184, 58, 107, 0.08);
}

.v3-trof-sala-close {
  background: rgba(184, 58, 107, 0.06);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B83A6B;
  cursor: pointer;
  transition: background 0.18s ease;
}
.v3-trof-sala-close:hover {
  background: rgba(184, 58, 107, 0.12);
}

.v3-trof-sala-head h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: #2A2420;
  margin: 0;
  letter-spacing: -0.5px;
}

.v3-trof-sala-body {
  padding-top: 20px;
}

/* ─── PROGRESSO ─────────────────────────────────────────────────────────── */
.v3-trof-progresso {
  background: linear-gradient(135deg, #FFFFFF 0%, #FBF4F0 100%);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px -8px rgba(184, 58, 107, 0.15);
  border: 1px solid rgba(184, 58, 107, 0.06);
}

.v3-trof-progresso-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 36px;
  font-weight: 600;
  color: #B83A6B;
  line-height: 1;
  letter-spacing: -1px;
}
.v3-trof-progresso-num span {
  font-size: 18px;
  color: #8A7D75;
  font-weight: 400;
  letter-spacing: 0;
}

.v3-trof-progresso-label {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-style: italic;
  color: #8A7D75;
  margin-top: 4px;
  margin-bottom: 12px;
}

.v3-trof-progresso-bar {
  height: 6px;
  background: rgba(74, 63, 56, 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.v3-trof-progresso-fill {
  height: 100%;
  background: linear-gradient(90deg, #B83A6B 0%, #D4956A 100%);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* ─── FILTROS ───────────────────────────────────────────────────────────── */
.v3-trof-filtros {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.v3-trof-filtros::-webkit-scrollbar {
  display: none;
}

.v3-trof-filtro {
  flex-shrink: 0;
  padding: 7px 14px;
  background: rgba(74, 63, 56, 0.04);
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #6E5D52;
  cursor: pointer;
  transition: all 0.18s ease;
}
.v3-trof-filtro:hover {
  background: rgba(74, 63, 56, 0.08);
}
.v3-trof-filtro.is-active {
  background: linear-gradient(135deg, rgba(184, 58, 107, 0.10), rgba(212, 149, 106, 0.10));
  border-color: #B83A6B;
  color: #B83A6B;
}

/* ─── TOGGLE DE SOM ─────────────────────────────────────────────────────── */
.v3-trof-som-row {
  margin-bottom: 16px;
}

.v3-trof-som-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(74, 63, 56, 0.03);
  border-radius: 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #2A2420;
  cursor: pointer;
}

/* ─── GRID DE TROFÉUS ───────────────────────────────────────────────────── */
.v3-trof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.v3-trof-card {
  background: #FFFFFF;
  border: 1px solid rgba(184, 58, 107, 0.08);
  border-radius: 16px;
  padding: 16px 12px 14px;
  text-align: center;
  transition: all 0.22s ease;
  position: relative;
}
.v3-trof-card.is-on {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFAF6 100%);
  border-color: rgba(184, 58, 107, 0.15);
  box-shadow: 0 4px 16px -10px rgba(184, 58, 107, 0.20);
}
.v3-trof-card.is-on:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px -10px rgba(184, 58, 107, 0.30);
}
.v3-trof-card.is-off {
  background: rgba(255, 255, 255, 0.5);
}

.v3-trof-card-svg {
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
}

.v3-trof-card-nome {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  color: #2A2420;
  margin-bottom: 5px;
  line-height: 1.2;
}
.v3-trof-card.is-off .v3-trof-card-nome {
  color: #8A7D75;
}

.v3-trof-card-rar {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.v3-trof-card.is-off .v3-trof-card-rar {
  opacity: 0.55;
}

.v3-trof-card-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  color: #6E5D52;
  line-height: 1.4;
  font-style: italic;
  min-height: 28px;
}
.v3-trof-card.is-off .v3-trof-card-desc {
  color: #9A8B82;
}

.v3-trof-card-data {
  font-family: 'Outfit', sans-serif;
  font-size: 9.5px;
  color: #B83A6B;
  font-weight: 600;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(184, 58, 107, 0.15);
  letter-spacing: 0.3px;
}

/* ─── DESKTOP ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .v3-trof-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUSA PLANNER v3.0 — Entrega 1 (refinos pré-migração)
   Modal de Alterar Senha
   ═══════════════════════════════════════════════════════════════════════════ */

.v3-pwd-info {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: #2A2420;
  line-height: 1.5;
  padding: 12px 14px;
  background: rgba(212, 149, 106, 0.08);
  border-left: 3px solid #D4956A;
  border-radius: 10px;
  margin-bottom: 16px;
}

.v3-pwd-erro {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(214, 117, 96, 0.08);
  border: 1px solid rgba(214, 117, 96, 0.30);
  border-left: 3px solid #D67560;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: #C62828;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUSA PLANNER v3.0 — Entrega 2 (refinos pré-migração)
   Logo PNG no header + Modal Meus Dados v3 + Tela Progresso Físico v3
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Logo PNG no header (com fallback SVG) ─────────────────────────────── */
.v3-header-logo-img {
  height: 32px;
  width: auto;
  max-width: 180px;
  display: block;
  object-fit: contain;
}
.v3-header-logo-svg {
  height: 26px;
  width: auto;
  display: block;
}

/* ─── MODAL Meus Dados v3 ───────────────────────────────────────────────── */
.v3-dados-info {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: #2A2420;
  line-height: 1.5;
  padding: 12px 14px;
  background: rgba(184, 58, 107, 0.05);
  border-left: 3px solid #B83A6B;
  border-radius: 10px;
  margin-bottom: 18px;
}
.v3-dados-info b { color: #B83A6B; font-weight: 700; }

.v3-dados-grupo {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(74, 63, 56, 0.10);
}
.v3-dados-grupo:last-of-type {
  border-bottom: none;
  padding-bottom: 4px;
}

.v3-dados-grupo-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #B83A6B;
  margin-bottom: 12px;
}

.v3-dados-textarea {
  resize: vertical;
  min-height: 60px;
  max-height: 120px;
  font-family: 'Outfit', sans-serif;
  line-height: 1.4;
}

.v3-dados-hint {
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-size: 11px;
  color: #8A7D75;
  margin-top: 4px;
}

.v3-dados-cidade-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
}

.v3-dados-readonly {
  background: rgba(74, 63, 56, 0.04) !important;
  color: #8A7D75 !important;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TELA PROGRESSO FÍSICO V3 (modal full-screen)
   ═══════════════════════════════════════════════════════════════════════════ */

.v3-saude-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #FBF4F0 0%, #FFFFFF 100%);
  z-index: 10000;
  overflow-y: auto;
  animation: v3-trof-sala-in 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.v3-saude-overlay.is-saindo {
  animation: v3-trof-sala-out 0.28s ease-in forwards;
}

.v3-saude-tela {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 60px;
}

.v3-saude-head {
  position: sticky;
  top: 0;
  background: rgba(251, 244, 240, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 14px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
  border-bottom: 1px solid rgba(184, 58, 107, 0.08);
}

.v3-saude-back {
  background: rgba(184, 58, 107, 0.06);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B83A6B;
  cursor: pointer;
  transition: background 0.18s ease;
  flex-shrink: 0;
}
.v3-saude-back:hover { background: rgba(184, 58, 107, 0.12); }

.v3-saude-head h2 {
  flex: 1;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: #2A2420;
  margin: 0;
  letter-spacing: -0.5px;
}

.v3-saude-pdf {
  background: rgba(184, 58, 107, 0.06);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B83A6B;
  cursor: pointer;
  transition: background 0.18s ease;
  flex-shrink: 0;
}
.v3-saude-pdf:hover { background: rgba(184, 58, 107, 0.12); }

.v3-saude-body { padding-top: 20px; }

/* Loading */
.v3-saude-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 20px;
  text-align: center;
}
.v3-saude-loading-msg {
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-size: 12.5px;
  color: #8A7D75;
}

/* Empty state */
.v3-saude-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 50px 20px;
}
.v3-saude-vazio-icone {
  font-size: 50px;
  margin-bottom: 12px;
  opacity: 0.7;
}
.v3-saude-vazio-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: #2A2420;
  margin-bottom: 6px;
}
.v3-saude-vazio-msg {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: #8A7D75;
  line-height: 1.5;
  max-width: 320px;
  margin-bottom: 22px;
}

/* CTA novo registro */
.v3-saude-cta-novo {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #B83A6B 0%, #D4956A 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  box-shadow: 0 6px 16px -6px rgba(184, 58, 107, 0.40);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.v3-saude-cta-novo:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -6px rgba(184, 58, 107, 0.50);
}
.v3-saude-cta-novo:active { transform: translateY(1px); }

/* Hero do registro mais recente */
.v3-saude-hero {
  background: linear-gradient(135deg, #FFFFFF 0%, #FBF4F0 100%);
  border: 1px solid rgba(184, 58, 107, 0.15);
  border-radius: 20px;
  padding: 18px 18px 14px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.v3-saude-hero::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 58, 107, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.v3-saude-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -8px rgba(184, 58, 107, 0.20);
  border-color: rgba(184, 58, 107, 0.30);
}

.v3-saude-hero-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  position: relative;
}

.v3-saude-hero-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #2A2420;
  letter-spacing: -0.3px;
}

.v3-saude-hero-data {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #B83A6B;
  letter-spacing: 0.5px;
}

.v3-saude-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  position: relative;
}
@media (min-width: 480px) {
  .v3-saude-hero-grid { grid-template-columns: repeat(4, 1fr); }
}

.v3-saude-hero-stat {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(184, 58, 107, 0.06);
}
.v3-saude-hero-label {
  font-family: 'Outfit', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #8A7D75;
  margin-bottom: 4px;
}
.v3-saude-hero-valor {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: #2A2420;
  letter-spacing: -0.5px;
  line-height: 1;
}
.v3-saude-hero-valor span {
  font-size: 12px;
  color: #8A7D75;
  font-weight: 400;
}

.v3-saude-delta {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  margin-top: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}
.v3-saude-delta.is-down { background: rgba(74, 139, 122, 0.10); color: #4A8B7A; }
.v3-saude-delta.is-up   { background: rgba(214, 117, 96, 0.10); color: #D67560; }

.v3-saude-hero-objetivo {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(212, 149, 106, 0.08);
  border-left: 3px solid #D4956A;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: #2A2420;
  line-height: 1.5;
  position: relative;
}
.v3-saude-hero-objetivo span:first-child {
  font-weight: 700;
  color: #D4956A;
  margin-right: 4px;
}

.v3-saude-prazo {
  margin-top: 4px;
  font-style: italic;
  font-size: 11.5px;
  color: #8A7D75;
}

.v3-saude-hero-tap {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  color: #B83A6B;
  text-align: right;
  margin-top: 12px;
  font-style: italic;
  position: relative;
}

/* Section title */
.v3-saude-section-title {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #B83A6B;
  margin: 22px 0 10px;
}

/* Lista de cards do histórico */
.v3-saude-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.v3-saude-card {
  background: #FFFFFF;
  border: 1px solid rgba(184, 58, 107, 0.08);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: all 0.18s ease;
}
.v3-saude-card:hover {
  border-color: rgba(184, 58, 107, 0.25);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -6px rgba(184, 58, 107, 0.20);
}

.v3-saude-card-info { flex: 1; min-width: 0; }
.v3-saude-card-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #2A2420;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v3-saude-card-data {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  color: #8A7D75;
}

.v3-saude-card-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.v3-saude-card-peso {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  color: #B83A6B;
}
.v3-saude-delta-mini {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
}
.v3-saude-delta-mini.is-down { background: rgba(74, 139, 122, 0.10); color: #4A8B7A; }
.v3-saude-delta-mini.is-up   { background: rgba(214, 117, 96, 0.10); color: #D67560; }

/* Editor de registro */
.v3-saude-edit-grupo-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #B83A6B;
  margin: 18px 0 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(74, 63, 56, 0.10);
}
.v3-saude-edit-grupo-titulo:first-child {
  border-top: none;
  padding-top: 0;
}

.v3-saude-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.v3-saude-edit-campo .v3-fin-form-label {
  margin-top: 4px;
  margin-bottom: 4px;
}

.v3-saude-textarea {
  resize: vertical;
  min-height: 60px;
  max-height: 100px;
  font-family: 'Outfit', sans-serif;
  line-height: 1.4;
}

/* Fix: editor de registro de Saúde precisa ficar ACIMA da tela full-screen de Saúde
   (overlay 10000) — sem isso, o editor abre invisível atrás */
.v3-saude-editor-overlay {
  z-index: 10010 !important;
}