/* KairSun Web — Pantalla Flow y Racha (mock 1:1, CSS puro, sin JS).
 *
 * Clon HTML/CSS de las pantallas reales de KairSun-App:
 *  - Flow  = lib/features/water/presentation/flow_celebration_screen.dart
 *            (modo recibo) + widgets/flow/flow_ignition_hero.dart +
 *            widgets/gp_area_progress_row.dart + home_gp_history_sheet.dart
 *            (_GpTodayHero / _GpCompanionHero).
 *  - Racha = lib/features/home/presentation/widgets/home_streak_history_sheet.dart
 *            + widgets/home_streak_protectors.dart +
 *            widgets/flow/flow_month_graph.dart (+ painter) +
 *            models/home_streak_hero_message.dart.
 *  - Postal = presentation/share/flow_streak_share_card.dart +
 *            flow_streak_share_preview.dart / _cta.dart.
 *  - Copys = lib/l10n/app_es.arb (claves citadas en docs/screens/49_flow.md).
 *
 * Usa el contrato de assets/css/screens/ks-screens-base.css (.phone/--u,
 * .ks-view, tokens --ks-*, .t-*). Todo el interior mide calc(N * var(--u)) =
 * N dp de la app (iPhone base 393 x 852); el único 999px es el radio de
 * píldora, igual que el base. Sin !important, sin estilos inline, sin fuentes
 * externas.
 *
 * Simplificaciones honestas (detalladas en docs/screens/49_flow.md):
 *  - El Lottie de racha (assets/Streak_Icon/Streak.json, ya copiado en
 *    /assets/images/app/flow/) se reemplaza por una llama CSS estática; no se
 *    carga player.
 *  - El cilindro SkillProgressBar (~37.8 dp) se dibuja como cápsula de 20 dp
 *    (mismo criterio que el mock hermano de Home).
 *  - Las conexiones del calendario son barras CSS de centro a centro (rayo
 *    7 dp + glow + hairline) y nunca cruzan de semana, como el painter real.
 *  - La postal 360x640 se dibuja a escala 0.6125 (--p) dentro del preview.
 */

/* ── Página ─────────────────────────────────────────────────────────────── */
.fl-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 18px;
}
.fl-view { display: flex; flex-direction: column; align-items: center; }
.fl-toolbar .ks-view__tabs { margin-bottom: 16px; }
.fl-toolbar .ks-view__tabs label { text-transform: uppercase; letter-spacing: 0.06em; }

.fl-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  align-items: start;
}

.phone--flow .phone__caption,
.phone--streak .phone__caption,
.phone--share .phone__caption { margin-top: 10px; }

/* ── Raíz de las caras + tokens reales ──────────────────────────────────── */
.rg {
  /* Racha: tokens.warning = acento de home_streak_history_sheet.dart:88 */
  --rg-streak: #EAB308;
  /* KairGold (kair_gold.dart): CTA y postal desde 2026-10-01 */
  --rg-gold-light: #FFE9B8;
  --rg-gold: #FFD777;
  --rg-gold-deep: #E8A93E;
  --rg-gold-ink: #2A1C05;
  /* Flow: HomeC.flow / acentos por módulo (home_internals.dart:59-66) */
  --rg-flow: #FFD700;
  --rg-water: #00D4FF;
  --rg-mood: #B06EFF;
  --rg-routine: #FFB800;
  --rg-skills: #00FFF0;
  /* Superficies y tinta dark (kair_tokens.dart) */
  --rg-surface: #09090B;
  --rg-elev: #18181B;
  --rg-ink: #F8FAFC;
  --rg-ink2: #CBD5E1;
  --rg-muted: #94A3B8;

  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--rg-ink);
  font-family: var(--ks-font);
  -webkit-font-smoothing: antialiased;
}

.rg svg.ic {
  display: block;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  fill: currentColor;
  flex: 0 0 auto;
}
.rg svg.ic--stroke { fill: none; stroke: currentColor; }

.rg :is(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--ks-gold);
  outline-offset: 2px;
  border-radius: 6px;
}
.rg button {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: inherit;
}
.rg button:disabled { cursor: default; }

/* CTA de oro KairGold (flow_streak_share_cta.dart / kairsun_cta_button.dart) */
.rg-cta {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  min-height: calc(54 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  padding: calc(15 * var(--u)) calc(24 * var(--u));
  border-radius: calc(18 * var(--u));
  background: linear-gradient(135deg, var(--rg-gold-light) 0%, var(--rg-gold) 52%, var(--rg-gold-deep) 100%);
  border: calc(1.4 * var(--u)) solid rgba(255, 255, 255, 0.55);
  color: var(--rg-gold-ink);
  font-size: calc(17 * var(--u));
  font-weight: 900;
  letter-spacing: calc(0.9 * var(--u));
  text-transform: uppercase;
  overflow: hidden;
  box-shadow:
    0 calc(4 * var(--u)) 0 rgba(90, 66, 20, 0.95),
    0 0 calc(20 * var(--u)) rgba(255, 215, 119, 0.38),
    0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.rg-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(26 * var(--u));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent);
  pointer-events: none;
}
.rg-cta > svg.ic { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.rg-cta:active { transform: translateY(calc(2 * var(--u))); }
.rg-cta--secondary {
  color: var(--rg-gold);
  background: rgba(255, 215, 119, 0.06);
  border-color: rgba(255, 215, 119, 0.60);
  box-shadow: none;
}
.rg-cta--secondary::before { display: none; }

/* ── Llama CSS compartida (reemplazo del Lottie Streak.json) ────────────── */
.rg-flame { position: absolute; display: block; pointer-events: none; }
.rg-flame i {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  display: block;
}
.rg-flame i:nth-child(1) {
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background: radial-gradient(circle at 50% 74%, rgba(255, 140, 0, 0.9), rgba(255, 77, 0, 0.55) 68%, transparent 78%);
  filter: blur(calc(2 * var(--u)));
  opacity: 0.85;
}
.rg-flame i:nth-child(2) {
  bottom: 6%;
  width: 74%;
  height: 84%;
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: linear-gradient(180deg, #FFE9B8 0%, #FFD700 46%, #FF8C00 100%);
}
.rg-flame i:nth-child(3) {
  bottom: 14%;
  width: 34%;
  height: 48%;
  border-radius: 50% 50% 44% 44% / 62% 62% 38% 38%;
  background: #FFF7D6;
  opacity: 0.95;
}

/* ════════════════════════════════════════════════════════════════════════
 * CARA FLOW — recibo del día (FlowCelebrationScreen en modo recibo)
 * ════════════════════════════════════════════════════════════════════════ */
.rg--flow {
  align-items: center;
  row-gap: calc(9 * var(--u));
  padding: calc(42 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u));
  overflow: hidden;
  background:
    radial-gradient(calc(330 * var(--u)) calc(330 * var(--u)) at 50% -8%, rgba(26, 18, 0, 0.95), rgba(9, 8, 10, 0) 68%),
    var(--rg-surface);
}
.rg--flow::before {
  content: "";
  position: absolute;
  top: calc(108 * var(--u));
  left: 50%;
  width: calc(150 * var(--u));
  height: calc(150 * var(--u));
  margin-left: calc(-75 * var(--u));
  border-radius: 50%;
  border: calc(1.2 * var(--u)) solid rgba(255, 215, 0, 0.10);
  box-shadow:
    0 0 0 calc(46 * var(--u)) rgba(255, 215, 0, 0.035),
    0 0 0 calc(96 * var(--u)) rgba(255, 215, 0, 0.018);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .rg--flow::before { animation: rg-ring 2.4s linear infinite; }
}
@keyframes rg-ring {
  from { transform: scale(0.62); opacity: 0.9; }
  to { transform: scale(1.45); opacity: 0; }
}

/* Hero: anillo 132 + disco 84 + fuego (flow_ignition_hero.dart:44,234) */
.rg-hero {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}
.rg-dial {
  position: relative;
  width: calc(132 * var(--u));
  height: calc(132 * var(--u));
  display: grid;
  place-items: center;
}
.rg-dial__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #1A1200;
  border: calc(2.5 * var(--u)) solid rgba(255, 215, 0, 0.75);
  box-shadow:
    0 0 calc(34 * var(--u)) calc(6 * var(--u)) rgba(255, 215, 0, 0.40),
    0 0 calc(70 * var(--u)) calc(16 * var(--u)) rgba(255, 215, 0, 0.17);
}
@media (prefers-reduced-motion: no-preference) {
  .rg-dial__ring { animation: rg-breathe 2s ease-in-out infinite; }
}
@keyframes rg-breathe {
  0%, 100% { box-shadow: 0 0 calc(30 * var(--u)) calc(5 * var(--u)) rgba(255, 215, 0, 0.34), 0 0 calc(64 * var(--u)) calc(14 * var(--u)) rgba(255, 215, 0, 0.14); }
  50% { box-shadow: 0 0 calc(38 * var(--u)) calc(8 * var(--u)) rgba(255, 215, 0, 0.48), 0 0 calc(76 * var(--u)) calc(20 * var(--u)) rgba(255, 215, 0, 0.20); }
}
.rg-flame--dial {
  width: calc(104 * var(--u));
  height: calc(122 * var(--u));
  left: 50%;
  top: calc(4 * var(--u));
  translate: -50% 0;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .rg-flame--dial i:nth-child(2),
  .rg-flame--postal i:nth-child(2) { animation: rg-flicker 1.6s ease-in-out infinite; }
}
@keyframes rg-flicker {
  0%, 100% { transform: scaleY(1) scaleX(1); opacity: 1; }
  50% { transform: scaleY(1.06) scaleX(0.97); opacity: 0.94; }
}
.rg-dial__disc {
  position: relative;
  z-index: 2;
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.78) 0 45%, rgba(0, 0, 0, 0.34) 78%, transparent 100%);
  font-size: calc(42 * var(--u));
  font-weight: 900;
  line-height: 1;
  color: #FFF3C4;
  text-shadow: 0 0 calc(18 * var(--u)) rgba(255, 215, 0, 0.80);
}

/* Título ceremonial con degradado (flow_celebration_screen.dart:574-589) */
.rg-title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--ks-display);
  font-size: calc(30 * var(--u));
  font-weight: 700;
  letter-spacing: calc(2 * var(--u));
  line-height: 1.1;
  text-align: center;
  background: linear-gradient(90deg, #FFD700 0%, #FFFFFF 50%, #FFD700 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rg-motto {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: calc(320 * var(--u));
  font-size: calc(14 * var(--u));
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, 0.60);
}

/* Tarjetas del recibo: r22, vidrio con tinte del oro de Flow */
.rg-card {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: calc(22 * var(--u));
  padding: calc(14 * var(--u)) calc(18 * var(--u));
}
.rg-card--pillars {
  background: rgba(255, 215, 0, 0.05);
  border: calc(1.3 * var(--u)) solid rgba(255, 215, 0, 0.20);
}
.rg-eyebrow {
  margin: 0 0 calc(9 * var(--u));
  font-size: calc(10 * var(--u));
  font-weight: 800;
  letter-spacing: calc(1.4 * var(--u));
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* Los cuatro pilares (flow_celebration_screen.dart:743-853) */
.rg-pillarrow {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}
.rg-pillarrow + .rg-pillarrow { margin-top: calc(6 * var(--u)); }
.rg-pmark {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: calc(1 * var(--u)) solid;
  color: var(--rg-a);
  background: var(--rg-a16);
  border-color: var(--rg-a45);
}
.rg-pmark svg.ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.rg-plabel {
  flex: 1 1 auto;
  min-width: 0;
  font-size: calc(13 * var(--u));
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rg-pcheck { width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: var(--rg-a); }
.rg-pillarrow--water { --rg-a: var(--rg-water); --rg-a16: rgba(0, 212, 255, 0.16); --rg-a45: rgba(0, 212, 255, 0.45); }
.rg-pillarrow--mood { --rg-a: var(--rg-mood); --rg-a16: rgba(176, 110, 255, 0.16); --rg-a45: rgba(176, 110, 255, 0.45); }
.rg-pillarrow--routine { --rg-a: var(--rg-routine); --rg-a16: rgba(255, 184, 0, 0.16); --rg-a45: rgba(255, 184, 0, 0.45); }
.rg-pillarrow--skills { --rg-a: var(--rg-skills); --rg-a16: rgba(0, 255, 240, 0.16); --rg-a45: rgba(0, 255, 240, 0.45); }

/* GP del día: tope 100 + desglose real por área (home_gp_history_sheet.dart:720)
 * caps = gpDailyAreaCap (gp_economy.dart:10-28): Rutina 25, Skills 50, Water 15, Mood 10 */
.rg-card--gp {
  padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u));
  background: rgba(255, 215, 0, 0.06);
  border: calc(1.3 * var(--u)) solid rgba(255, 215, 0, 0.22);
}
.rg-gphead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(8 * var(--u));
}
.rg-gphead__title {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  color: var(--rg-flow);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: calc(0.8 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
}
.rg-gphead__title svg.ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.rg-gphead__cap {
  font-size: calc(16 * var(--u));
  font-weight: 900;
  color: var(--rg-gold-light);
  text-shadow: 0 0 calc(18 * var(--u)) rgba(255, 215, 0, 0.45);
  white-space: nowrap;
}
.rg-gphead__cap em {
  font-style: normal;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: calc(0.6 * var(--u));
  color: var(--rg-muted);
  text-shadow: none;
}
.rg-gprows { margin-top: calc(8 * var(--u)); }
.rg-gprow {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.rg-gprow + .rg-gprow { margin-top: calc(8 * var(--u)); }
/* El accent del módulo vive en la fila: lo heredan la píldora, el carril y el
 * valor completo (misma receta tinted de gp_area_progress_row.dart:179-245). */
.rg-gprow--water { --rg-a: var(--rg-water); --rg-a14: rgba(0, 212, 255, 0.14); --rg-a30: rgba(0, 212, 255, 0.30); --rg-a32: rgba(0, 212, 255, 0.32); --rg-a48: rgba(0, 212, 255, 0.48); }
.rg-gprow--routine { --rg-a: var(--rg-routine); --rg-a14: rgba(255, 184, 0, 0.14); --rg-a30: rgba(255, 184, 0, 0.30); --rg-a32: rgba(255, 184, 0, 0.32); --rg-a48: rgba(255, 184, 0, 0.48); }
.rg-gprow--skills { --rg-a: var(--rg-skills); --rg-a14: rgba(0, 255, 240, 0.14); --rg-a30: rgba(0, 255, 240, 0.30); --rg-a32: rgba(0, 255, 240, 0.32); --rg-a48: rgba(0, 255, 240, 0.48); }
.rg-gprow--mood { --rg-a: var(--rg-mood); --rg-a14: rgba(176, 110, 255, 0.14); --rg-a30: rgba(176, 110, 255, 0.30); --rg-a32: rgba(176, 110, 255, 0.32); --rg-a48: rgba(176, 110, 255, 0.48); }
.rg-areapill {
  flex: 0 0 auto;
  height: calc(26 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--u));
  padding: 0 calc(8 * var(--u));
  border-radius: 999px;
  border: calc(1 * var(--u)) solid;
  font-size: calc(10.5 * var(--u));
  font-weight: 800;
  letter-spacing: calc(0.4 * var(--u));
  white-space: nowrap;
}
.rg-areapill--water,
.rg-areapill--routine,
.rg-areapill--skills,
.rg-areapill--mood {
  width: calc(68 * var(--u));
  color: var(--rg-a);
  background: linear-gradient(180deg, var(--rg-a30), var(--rg-a14));
  border-color: var(--rg-a48);
}
.rg-areapill--mood {
  color: #C9A2FF;
}
.rg-areapill--value {
  width: calc(60 * var(--u));
  font-weight: 600;
  color: var(--rg-ink);
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.14);
}
.rg-areapill--value b { font-size: inherit; font-weight: inherit; }
.rg-areapill--value.is-full {
  color: var(--rg-a);
  background: linear-gradient(180deg, var(--rg-a30), var(--rg-a14));
  border-color: var(--rg-a48);
  font-weight: 900;
}
.rg-areapill__check {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  color: currentColor;
}
.rg-lane {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: calc(20 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: calc(0.7 * var(--u)) solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 calc(3 * var(--u)) calc(16 * var(--u)) calc(-6 * var(--u)) var(--rg-a32),
    inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.rg-lane__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rg-a48), var(--rg-a));
}
.rg-lane__fill::after {
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.30);
}
.rg-lane--water .rg-lane__fill { width: 100%; }
.rg-lane--routine .rg-lane__fill { width: 100%; }
.rg-lane--skills .rg-lane__fill { width: 78%; }
.rg-lane--mood .rg-lane__fill { width: 50%; }

/* Franja de la mascota + burbuja de fuente principal (home_gp_history_sheet.dart:351) */
.rg-bubble-row {
  position: relative;
  z-index: 1;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.rg-pet {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  max-height: calc(125 * var(--u));
  display: flex;
  align-items: flex-end;
}
.rg-pet__glow {
  position: absolute;
  bottom: calc(4 * var(--u));
  left: 50%;
  translate: -50% 0;
  width: calc(96 * var(--u));
  height: calc(20 * var(--u));
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 255, 240, 0.30), transparent);
  pointer-events: none;
}
.rg-pet img {
  position: relative;
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.45));
}
.rg-bubble {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: calc(9 * var(--u)) calc(12 * var(--u)) calc(9 * var(--u)) calc(16 * var(--u));
  border-radius: calc(4 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u));
  background: #143D3D;
  border: calc(1 * var(--u)) solid rgba(0, 255, 240, 0.45);
  box-shadow:
    0 0 calc(18 * var(--u)) calc(-6 * var(--u)) rgba(0, 255, 240, 0.16),
    0 calc(6 * var(--u)) calc(12 * var(--u)) calc(-6 * var(--u)) rgba(0, 0, 0, 0.6);
}
.rg-bubble__tail {
  position: absolute;
  left: calc(-9 * var(--u));
  top: 50%;
  translate: 0 -50%;
  width: calc(10 * var(--u));
  height: calc(18 * var(--u));
  background: #143D3D;
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
.rg-bubble__head {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.rg-namechip {
  display: inline-flex;
  align-items: center;
  padding: calc(3 * var(--u)) calc(10 * var(--u));
  border-radius: 999px;
  background: rgba(0, 255, 240, 0.12);
  border: calc(1 * var(--u)) solid rgba(0, 255, 240, 0.36);
  color: var(--rg-skills);
  font-size: calc(10.5 * var(--u));
  font-weight: 800;
}
.rg-bubble__eyebrow {
  min-width: 0;
  font-size: calc(10 * var(--u));
  font-weight: 800;
  letter-spacing: calc(1 * var(--u));
  text-transform: uppercase;
  color: var(--rg-skills);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rg-bubble__msg {
  margin: calc(5 * var(--u)) 0 0;
  font-size: calc(14 * var(--u));
  font-weight: 600;
  line-height: 1.35;
  color: var(--rg-ink);
}
.rg-bubble__msg b { color: var(--rg-skills); font-weight: 800; }

/* ════════════════════════════════════════════════════════════════════════
 * CARA RACHA — hoja fullscreen (home_streak_history_sheet.dart)
 * ════════════════════════════════════════════════════════════════════════ */
.rg--streak {
  padding-top: calc(40 * var(--u));
  overflow: hidden;
  background:
    radial-gradient(calc(430 * var(--u)) calc(430 * var(--u)) at 50% -10%, rgba(234, 179, 8, 0.15), rgba(9, 9, 11, 0) 72%),
    linear-gradient(180deg, rgba(234, 179, 8, 0.09), rgba(9, 9, 11, 0) 34%),
    var(--rg-surface);
}

/* Appbar: botón 48, píldora 48 con “TU RACHA DE FLOW · {usuario}” (línea 370) */
.rg-bar {
  flex: 0 0 auto;
  height: calc(54 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: 0 calc(12 * var(--u));
}
.rg-bar__btn {
  flex: 0 0 auto;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(16 * var(--u));
  color: var(--rg-streak);
  background: rgba(255, 255, 255, 0.05);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.10);
}
.rg-bar__btn svg.ic { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.rg-bar__title {
  flex: 1 1 auto;
  min-width: 0;
  height: calc(48 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.16), rgba(255, 255, 255, 0.08));
  border: calc(0.9 * var(--u)) solid rgba(234, 179, 8, 0.45);
  box-shadow: 0 0 calc(18 * var(--u)) calc(-6 * var(--u)) rgba(234, 179, 8, 0.16);
  font-size: calc(12.5 * var(--u));
  font-weight: 800;
  letter-spacing: calc(0.6 * var(--u));
  text-transform: uppercase;
  color: var(--rg-ink);
  white-space: nowrap;
  overflow: hidden;
}
.rg-bar__title i {
  flex: 0 0 auto;
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 50%;
  background: rgba(234, 179, 8, 0.9);
}
.rg-bar__title b {
  min-width: 0;
  font-weight: 900;
  letter-spacing: calc(0.5 * var(--u));
  color: var(--rg-streak);
  overflow: hidden;
  text-overflow: ellipsis;
}
.rg-bar__slot { flex: 0 0 auto; width: calc(64 * var(--u)); height: calc(34 * var(--u)); }

/* Cuerpo full-bleed: hero 24 / calendario 45 / protectores 31 (líneas 187-272) */
.rg-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  padding-top: calc(12 * var(--u));
}

/* Vidrio de la hoja: r20 + gradiente + hairline del acento (línea 514) */
.rg-glass {
  position: relative;
  border-radius: calc(20 * var(--u));
  padding: calc(12 * var(--u));
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.14), rgba(255, 255, 255, 0.08));
  border: calc(0.9 * var(--u)) solid rgba(234, 179, 8, 0.40);
  box-shadow:
    0 0 calc(22 * var(--u)) calc(-8 * var(--u)) rgba(234, 179, 8, 0.10),
    0 calc(8 * var(--u)) calc(14 * var(--u)) calc(-6 * var(--u)) rgba(0, 0, 0, 0.60),
    0 calc(-1 * var(--u)) calc(4 * var(--u)) calc(-2 * var(--u)) rgba(255, 255, 255, 0.05);
}

/* Héroe: mascota izquierda + burbuja con piquito y píldora de días (línea 660) */
.rg-hero2 {
  flex: 0 0 calc(146 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(12 * var(--u));
}
.rg-hero2__pet {
  position: relative;
  flex: 0 0 auto;
  height: calc(125.4 * var(--u));
  display: flex;
  align-items: flex-end;
}
.rg-hero2__glow {
  position: absolute;
  bottom: calc(6 * var(--u));
  left: 0;
  right: 0;
  height: calc(22 * var(--u));
  background: radial-gradient(closest-side, rgba(234, 179, 8, 0.32), transparent);
  pointer-events: none;
}
.rg-hero2__pet img {
  position: relative;
  height: 100%;
  width: auto;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.45));
}
.rg-hero2__col {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(4 * var(--u));
}
.rg-bubble2 {
  position: relative;
  padding: calc(6 * var(--u)) calc(12 * var(--u)) calc(6 * var(--u)) calc(16 * var(--u));
  border-radius: calc(6 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)) calc(6 * var(--u));
  background: #372F18;
  border: calc(1 * var(--u)) solid rgba(234, 179, 8, 0.50);
  box-shadow:
    0 0 calc(18 * var(--u)) calc(-6 * var(--u)) rgba(234, 179, 8, 0.16),
    0 calc(6 * var(--u)) calc(12 * var(--u)) calc(-6 * var(--u)) rgba(0, 0, 0, 0.60);
}
.rg-bubble2::after {
  content: "";
  position: absolute;
  left: calc(-9 * var(--u));
  top: 50%;
  translate: 0 -50%;
  width: calc(10 * var(--u));
  height: calc(20 * var(--u));
  background: #372F18;
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
.rg-bubble2 p {
  margin: 0;
  font-size: calc(15 * var(--u));
  font-weight: 600;
  line-height: 1.3;
  color: var(--rg-ink);
}
.rg-bubble2 b { color: #F1D46F; font-weight: 900; }
.rg-tone {
  position: absolute;
  top: calc(-7 * var(--u));
  right: calc(-8 * var(--u));
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: calc(2 * var(--u)) solid var(--rg-elev);
  background: linear-gradient(135deg, var(--rg-gold-light) 0%, var(--rg-gold) 52%, var(--rg-gold-deep) 100%);
  color: var(--rg-gold-ink);
  box-shadow: 0 0 calc(10 * var(--u)) calc(-1 * var(--u)) rgba(255, 215, 119, 0.45);
}
.rg-tone svg.ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.rg-streakpill {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(5 * var(--u)) calc(12 * var(--u));
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.34), rgba(234, 179, 8, 0.18));
  border: calc(0.8 * var(--u)) solid rgba(234, 179, 8, 0.58);
  box-shadow: 0 0 calc(10 * var(--u)) calc(-3 * var(--u)) rgba(234, 179, 8, 0.24);
  color: var(--rg-ink);
  font-size: calc(12 * var(--u));
  font-weight: 900;
  letter-spacing: calc(0.1 * var(--u));
  line-height: 1.15;
  white-space: nowrap;
  vertical-align: middle;
}
.rg-streakpill svg.ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: var(--rg-gold); }
.rg-hair {
  height: calc(1 * var(--u));
  background: linear-gradient(90deg, rgba(234, 179, 8, 0), rgba(234, 179, 8, 0.34), rgba(234, 179, 8, 0));
}
.rg-best {
  font-size: calc(12 * var(--u));
  font-weight: 800;
  letter-spacing: calc(0.2 * var(--u));
  color: rgba(234, 179, 8, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Calendario: riel de mes + grilla domingo→sábado (flow_month_graph.dart) */
.rg-cal {
  flex: 1 1 auto;
  min-height: calc(270 * var(--u));
  display: flex;
  flex-direction: column;
}
.rg-cal__head {
  flex: 0 0 calc(54 * var(--u));
  display: flex;
  align-items: center;
  padding: 0 calc(2 * var(--u));
  border-radius: calc(16 * var(--u));
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.13), rgba(234, 179, 8, 0.02));
  border: calc(0.8 * var(--u)) solid rgba(234, 179, 8, 0.22);
}
.rg-mbtn {
  flex: 0 0 auto;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(14 * var(--u));
  color: var(--rg-streak);
  background: rgba(234, 179, 8, 0.12);
}
.rg-mbtn svg.ic { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.rg-mbtn:disabled { color: rgba(148, 163, 184, 0.55); background: transparent; }
.rg-cal__label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rg-cal__label strong { font-size: calc(15 * var(--u)); font-weight: 700; letter-spacing: calc(0.2 * var(--u)); }
.rg-cal__label small {
  margin-top: calc(1 * var(--u));
  font-size: calc(10 * var(--u));
  font-weight: 600;
  letter-spacing: calc(0.2 * var(--u));
  line-height: 1.2;
  color: var(--rg-ink2);
}
.rg-cal__weekdays {
  flex: 0 0 calc(16 * var(--u));
  margin-top: calc(8 * var(--u));
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
}
.rg-cal__weekdays span {
  text-align: center;
  font-size: calc(10.5 * var(--u));
  font-weight: 600;
  letter-spacing: calc(0.4 * var(--u));
  color: var(--rg-muted);
}
.rg-grid {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: calc(8 * var(--u));
  display: grid;
  grid-template-rows: repeat(5, 1fr);
}
.rg-week {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  place-items: center;
}
.rg-node {
  position: relative;
  z-index: 1;
  width: calc(31 * var(--u));
  height: calc(31 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(10.5 * var(--u));
  border: calc(1.3 * var(--u)) solid transparent;
  font-size: calc(11.5 * var(--u));
  line-height: 1;
}
.rg-node b { font-weight: 700; }
.rg-node--blank { border-color: transparent; background: transparent; }
.rg-node--flow {
  background: linear-gradient(180deg, #BF9420, #8E6D2A);
  border-color: rgba(234, 179, 8, 0.90);
  color: #231A00;
  box-shadow: 0 0 calc(11 * var(--u)) calc(-3 * var(--u)) rgba(234, 179, 8, 0.22);
}
.rg-node--flow.is-run {
  background: linear-gradient(180deg, #DCA80E, #A97F1C);
  border-width: calc(1.6 * var(--u));
  border-color: var(--rg-streak);
  box-shadow: 0 0 calc(16 * var(--u)) calc(-3 * var(--u)) rgba(234, 179, 8, 0.38);
}
.rg-node--unknown {
  background: rgba(24, 24, 27, 0.35);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--rg-muted);
  font-weight: 600;
}
.rg-node--unknown::after {
  content: "";
  position: absolute;
  bottom: calc(2.4 * var(--u));
  width: calc(3.4 * var(--u));
  height: calc(3.4 * var(--u));
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.45);
}
.rg-node--future { background: transparent; color: rgba(248, 250, 252, 0.55); font-weight: 600; }
.rg-node.is-today {
  border-width: calc(1.8 * var(--u));
  border-color: var(--rg-streak);
  box-shadow: 0 0 calc(14 * var(--u)) calc(-2 * var(--u)) rgba(234, 179, 8, 0.34);
}
.rg-node__today {
  position: absolute;
  bottom: calc(1.8 * var(--u));
  width: calc(8 * var(--u));
  height: calc(2.6 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--rg-streak);
}
.rg-node__star {
  position: absolute;
  top: calc(-3 * var(--u));
  right: calc(-4 * var(--u));
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  padding: calc(1.6 * var(--u));
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(9, 9, 11, 0.92);
  color: var(--rg-streak);
  box-shadow: 0 0 calc(8 * var(--u)) calc(-1 * var(--u)) rgba(234, 179, 8, 0.45);
}
.rg-link {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: calc(var(--rg-l) * 100% / 7);
  width: calc(var(--rg-w) * 100% / 7);
  height: calc(7 * var(--u));
  translate: 0 -50%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rg-streak), #F5D96B 55%, var(--rg-streak));
  box-shadow: 0 0 calc(9 * var(--u)) rgba(234, 179, 8, 0.55);
}
.rg-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: calc(1.6 * var(--u));
  translate: 0 -50%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.30);
}
.rg-link--p01 { --rg-l: 0.5; --rg-w: 1; }
.rg-link--p12 { --rg-l: 1.5; --rg-w: 1; }
.rg-link--p23 { --rg-l: 2.5; --rg-w: 1; }
.rg-link--p34 { --rg-l: 3.5; --rg-w: 1; }
.rg-link--p45 { --rg-l: 4.5; --rg-w: 1; }
.rg-link--p56 { --rg-l: 5.5; --rg-w: 1; }

/* Protectores: saldo factual, sin venta (home_streak_protectors.dart) */
.rg-prot {
  flex: 0 0 calc(196 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.rg-prot__head {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.rg-prot__emblem {
  flex: 0 0 auto;
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(10.6 * var(--u));
  background: linear-gradient(135deg, #F7D66A 0%, var(--rg-streak) 55%, #8E6D2A 100%);
  border: calc(1.2 * var(--u)) solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 calc(12 * var(--u)) calc(-2 * var(--u)) rgba(234, 179, 8, 0.40);
  color: #FFFFFF;
}
.rg-prot__emblem svg.ic { width: calc(19 * var(--u)); height: calc(19 * var(--u)); filter: drop-shadow(0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.40)); }
.rg-prot__titles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(2 * var(--u));
}
.rg-prot__titles strong { font-size: calc(15 * var(--u)); font-weight: 700; }
.rg-mastery {
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  padding: calc(1 * var(--u)) calc(7 * var(--u));
  border-radius: 999px;
  background: rgba(234, 179, 8, 0.10);
  border: calc(1 * var(--u)) solid rgba(234, 179, 8, 0.34);
  font-size: calc(10.5 * var(--u));
  font-weight: 700;
  color: var(--rg-ink2);
  white-space: nowrap;
}
.rg-mastery svg.ic { width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: var(--rg-streak); }
.rg-prot__info {
  flex: 0 0 auto;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  display: grid;
  place-items: center;
  color: var(--rg-streak);
}
.rg-prot__info svg.ic { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.rg-prot__stats {
  display: flex;
  gap: calc(8 * var(--u));
}
.rg-pstat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: calc(6 * var(--u)) calc(5 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(255, 255, 255, 0.04);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 calc(1.5 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.40);
}
.rg-pstat.is-active {
  border-color: rgba(234, 179, 8, 0.34);
  box-shadow:
    inset 0 calc(1.5 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.40),
    0 0 calc(12 * var(--u)) calc(-4 * var(--u)) rgba(234, 179, 8, 0.25);
}
.rg-pstat__dot {
  flex: 0 0 auto;
  width: calc(19 * var(--u));
  height: calc(19 * var(--u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.10);
  border: calc(1 * var(--u)) solid rgba(148, 163, 184, 0.22);
  color: var(--rg-muted);
}
.rg-pstat.is-active .rg-pstat__dot {
  background: rgba(234, 179, 8, 0.18);
  border-color: rgba(234, 179, 8, 0.55);
  color: var(--rg-streak);
}
.rg-pstat__dot svg.ic { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.rg-pstat b { font-size: calc(14 * var(--u)); font-weight: 900; }
.rg-pstat small {
  min-width: 0;
  font-size: calc(10 * var(--u));
  font-weight: 600;
  color: var(--rg-ink2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rg-prot__railrow {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.rg-rail {
  flex: 1 1 auto;
  min-width: 0;
  height: calc(34 * var(--u));
  display: flex;
  gap: calc(6 * var(--u));
}
.rg-slot {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  place-items: center;
  border-radius: calc(9.5 * var(--u));
  background: rgba(148, 163, 184, 0.07);
  border: calc(1 * var(--u)) solid rgba(148, 163, 184, 0.16);
  box-shadow: inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.40);
  color: rgba(148, 163, 184, 0.75);
}
.rg-slot svg.ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.rg-slot--on {
  background: linear-gradient(135deg, #F7D66A 0%, var(--rg-streak) 55%, #8E6D2A 100%);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow:
    0 0 calc(12 * var(--u)) calc(-2 * var(--u)) rgba(234, 179, 8, 0.40),
    0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(60, 46, 6, 0.60);
  color: #FFFFFF;
}
.rg-slot--on svg.ic { width: calc(17 * var(--u)); height: calc(17 * var(--u)); filter: drop-shadow(0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.40)); }
.rg-invpil {
  flex: 0 0 auto;
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  border-radius: 999px;
  background: rgba(234, 179, 8, 0.08);
  border: calc(1 * var(--u)) solid rgba(234, 179, 8, 0.30);
  font-size: calc(11 * var(--u));
  font-weight: 800;
  color: var(--rg-ink2);
  white-space: nowrap;
}
.rg-prot__reward {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.rg-reward {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: calc(8 * var(--u));
  border-radius: 999px;
  background: rgba(234, 179, 8, 0.12);
  border: calc(0.8 * var(--u)) solid rgba(234, 179, 8, 0.22);
}
.rg-reward__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 71%;
  border-radius: 999px;
  background: linear-gradient(90deg, #F5D96B, var(--rg-streak));
  box-shadow: 0 0 calc(10 * var(--u)) calc(-1 * var(--u)) rgba(234, 179, 8, 0.45);
}
.rg-prot__reward small {
  font-size: calc(11.5 * var(--u));
  font-weight: 600;
  color: var(--rg-ink2);
  white-space: nowrap;
}
.rg-prot__remaining {
  margin: 0;
  font-size: calc(11 * var(--u));
  color: var(--rg-muted);
}
.rg-prot__buyrow {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.rg-buypill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.10);
  border: calc(1 * var(--u)) solid rgba(148, 163, 184, 0.30);
  font-size: calc(10.5 * var(--u));
  letter-spacing: calc(0.2 * var(--u));
  color: var(--rg-muted);
  white-space: nowrap;
}
.rg-buypill svg.ic { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.rg-prot__buyrow small {
  min-width: 0;
  font-size: calc(11 * var(--u));
  line-height: 1.2;
  color: var(--rg-ink2);
}
.rg-footnote {
  margin: 0;
  text-align: center;
  font-size: calc(11 * var(--u));
  font-weight: 600;
  letter-spacing: calc(0.4 * var(--u));
  color: var(--rg-muted);
}

/* ════════════════════════════════════════════════════════════════════════
 * POSTAL — preview de la vitrina (flow_streak_share_preview.dart) al 0.6125
 * ════════════════════════════════════════════════════════════════════════ */
.rg--share {
  justify-content: flex-end;
  overflow: hidden;
  background:
    radial-gradient(calc(420 * var(--u)) calc(420 * var(--u)) at 50% 0%, rgba(234, 179, 8, 0.10), rgba(9, 9, 11, 0) 70%),
    var(--rg-surface);
}
.rg-share__ghost { position: absolute; inset: 0; pointer-events: none; }
.rg-share__ghostbar {
  position: absolute;
  top: calc(18 * var(--u));
  left: 50%;
  translate: -50% 0;
  width: calc(250 * var(--u));
  height: calc(44 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.06);
}
.rg-share__ghostbar i {
  position: absolute;
  top: calc(50 * var(--u));
  left: 0;
  right: 0;
  height: calc(120 * var(--u));
  background: radial-gradient(closest-side, rgba(234, 179, 8, 0.06), transparent);
}
.rg-sheet {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 calc(20 * var(--u)) calc(16 * var(--u));
  border-radius: calc(36 * var(--u)) calc(36 * var(--u)) 0 0;
  background: linear-gradient(180deg, rgba(234, 179, 8, 0.10) 0%, #14161C 42%);
  border-top: calc(1.4 * var(--u)) solid rgba(234, 179, 8, 0.55);
  box-shadow: 0 calc(-20 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.50);
}
.rg-sheet__top { position: relative; width: 100%; height: calc(48 * var(--u)); }
.rg-sheet__handle {
  position: absolute;
  top: calc(4 * var(--u));
  left: 50%;
  translate: -50% 0;
  width: calc(44 * var(--u));
  height: calc(5 * var(--u));
  border-radius: calc(3 * var(--u));
  background: rgba(248, 250, 252, 0.22);
}
.rg-sheet__close {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  display: grid;
  place-items: center;
  color: rgba(248, 250, 252, 0.72);
}
.rg-sheet__close svg.ic { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.rg-sheet__title {
  margin: 0;
  font-family: var(--ks-display);
  font-size: calc(22 * var(--u));
  font-weight: 700;
  letter-spacing: calc(1.8 * var(--u));
  text-transform: uppercase;
  text-align: center;
  color: var(--rg-ink);
}
.rg-sheet__sub {
  max-width: calc(320 * var(--u));
  margin: calc(4 * var(--u)) 0 0;
  font-size: calc(12 * var(--u));
  line-height: 1.35;
  text-align: center;
  color: var(--rg-ink2);
}
.rg-frame {
  flex: 0 0 auto;
  width: calc(220.5 * var(--u));
  height: calc(392 * var(--u));
  margin-top: calc(12 * var(--u));
  padding: calc(2 * var(--u));
  border-radius: calc(28 * var(--u));
  border: calc(1.6 * var(--u)) solid rgba(255, 215, 119, 0.55);
  box-shadow:
    0 0 calc(30 * var(--u)) calc(-4 * var(--u)) rgba(255, 215, 119, 0.22),
    0 calc(12 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.35);
}
.rg-frame + .rg-cta { margin-top: calc(14 * var(--u)); }
.rg-cta + .rg-cta { margin-top: calc(12 * var(--u)); }
.rg-sheet__footnote {
  margin: calc(8 * var(--u)) 0 0;
  font-size: calc(10.5 * var(--u));
  line-height: 1.3;
  text-align: center;
  color: var(--rg-muted);
}

/* Lienzo postal 360x640 (flow_streak_share_card.dart) a escala 0.6125 */
.rg-postal {
  --p: calc(0.6125 * var(--u));
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(26 * var(--u));
  padding: calc(24 * var(--p)) calc(28 * var(--p)) calc(22 * var(--p));
  background: linear-gradient(180deg, #04070E 0%, #0A1424 45%, #0D1A2C 100%);
}
.rg-postal__aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(calc(230 * var(--p)) calc(160 * var(--p)) at 50% -12%, rgba(255, 215, 119, 0.18), transparent 70%),
    radial-gradient(calc(180 * var(--p)) calc(140 * var(--p)) at 50% 82%, rgba(255, 215, 119, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0.30) 100%);
}
.rg-postal__embers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(calc(1.4 * var(--p)) calc(1.4 * var(--p)) at 12% 52%, rgba(255, 215, 119, 0.10), transparent 100%),
    radial-gradient(calc(1.8 * var(--p)) calc(1.8 * var(--p)) at 24% 78%, rgba(255, 255, 255, 0.08), transparent 100%),
    radial-gradient(calc(1.2 * var(--p)) calc(1.2 * var(--p)) at 37% 64%, rgba(255, 215, 119, 0.12), transparent 100%),
    radial-gradient(calc(1.6 * var(--p)) calc(1.6 * var(--p)) at 52% 88%, rgba(255, 215, 119, 0.09), transparent 100%),
    radial-gradient(calc(2 * var(--p)) calc(2 * var(--p)) at 66% 58%, rgba(255, 255, 255, 0.07), transparent 100%),
    radial-gradient(calc(1.3 * var(--p)) calc(1.3 * var(--p)) at 78% 74%, rgba(255, 215, 119, 0.11), transparent 100%),
    radial-gradient(calc(1.7 * var(--p)) calc(1.7 * var(--p)) at 89% 48%, rgba(255, 215, 119, 0.08), transparent 100%),
    radial-gradient(calc(1.2 * var(--p)) calc(1.2 * var(--p)) at 45% 42%, rgba(255, 255, 255, 0.06), transparent 100%);
}
.rg-postal__head {
  position: relative;
  z-index: 1;
  height: calc(20 * var(--p));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--p));
}
.rg-postal__brand {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--p));
  font-family: var(--ks-display);
  font-size: calc(12.5 * var(--p));
  font-weight: 700;
  letter-spacing: calc(2.6 * var(--p));
  text-transform: uppercase;
  color: rgba(247, 243, 232, 0.77);
}
.rg-postal__brand svg.ic { width: calc(16 * var(--p)); height: calc(16 * var(--p)); color: var(--rg-gold); }
.rg-postal__best {
  font-size: calc(10.5 * var(--p));
  font-weight: 800;
  letter-spacing: calc(1.1 * var(--p));
  text-transform: uppercase;
  color: rgba(247, 243, 232, 0.56);
  white-space: nowrap;
}
.rg-postal__eyebrow {
  position: relative;
  z-index: 1;
  margin: calc(16 * var(--p)) 0 0;
  font-family: var(--ks-display);
  font-size: calc(12.5 * var(--p));
  font-weight: 700;
  letter-spacing: calc(3.4 * var(--p));
  text-transform: uppercase;
  text-align: center;
  color: var(--rg-gold);
}
.rg-postal__mark {
  position: relative;
  z-index: 1;
  width: calc(118 * var(--p));
  height: calc(118 * var(--p));
  margin: calc(12 * var(--p)) auto 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 0 calc(36 * var(--p)) calc(-6 * var(--p)) rgba(255, 215, 119, 0.28);
  background: radial-gradient(closest-side, rgba(255, 215, 119, 0.30), rgba(255, 215, 119, 0));
}
.rg-postal__mark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: calc(104 * var(--p));
  height: calc(104 * var(--p));
  border-radius: 50%;
  background: rgba(255, 215, 119, 0.08);
  border: calc(1.1 * var(--p)) solid rgba(255, 215, 119, 0.35);
}
.rg-flame--postal {
  position: relative;
  width: calc(56 * var(--p));
  height: calc(67 * var(--p));
  z-index: 1;
}
.rg-postal__verified {
  position: absolute;
  right: calc(2 * var(--p));
  bottom: calc(2 * var(--p));
  width: calc(24 * var(--p));
  height: calc(24 * var(--p));
  color: var(--rg-gold);
  filter: drop-shadow(0 calc(2 * var(--p)) calc(4 * var(--p)) rgba(0, 0, 0, 0.60));
  z-index: 2;
}
.rg-postal__days {
  position: relative;
  z-index: 1;
  margin: calc(6 * var(--p)) auto 0;
  height: calc(84 * var(--p));
  display: flex;
  align-items: center;
  font-family: var(--ks-display);
  font-size: calc(84 * var(--p));
  font-weight: 700;
  line-height: 1;
  letter-spacing: calc(-2 * var(--p));
  color: var(--rg-gold-light);
  text-shadow:
    0 0 calc(30 * var(--p)) rgba(255, 157, 46, 0.60),
    0 0 calc(12 * var(--p)) rgba(255, 215, 119, 0.40);
}
.rg-postal__label {
  position: relative;
  z-index: 1;
  margin: calc(4 * var(--p)) 0 0;
  font-size: calc(11.5 * var(--p));
  font-weight: 800;
  letter-spacing: calc(3.4 * var(--p));
  text-transform: uppercase;
  text-align: center;
  color: rgba(247, 243, 232, 0.77);
}
.rg-postal__headline {
  position: relative;
  z-index: 1;
  max-width: calc(292 * var(--p));
  margin: calc(14 * var(--p)) auto 0;
  font-family: var(--ks-display);
  font-size: calc(24 * var(--p));
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: calc(0.3 * var(--p));
  text-align: center;
  color: #F7F3E8;
}
.rg-postal__motto {
  position: relative;
  z-index: 1;
  margin: calc(6 * var(--p)) 0 0;
  font-size: calc(13 * var(--p));
  font-weight: 500;
  letter-spacing: calc(0.8 * var(--p));
  text-align: center;
  color: rgba(247, 243, 232, 0.56);
}
.rg-postal__name {
  position: relative;
  z-index: 1;
  align-self: center;
  margin: calc(12 * var(--p)) auto calc(4 * var(--p));
  padding: calc(5 * var(--p)) calc(14 * var(--p));
  border-radius: 999px;
  background: rgba(255, 215, 119, 0.10);
  border: calc(1 * var(--p)) solid rgba(255, 215, 119, 0.42);
  font-size: calc(13 * var(--p));
  font-weight: 800;
  letter-spacing: calc(0.5 * var(--p));
  color: #F7F3E8;
}
.rg-postal__petwrap {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}
.rg-postal__pet {
  height: calc(128 * var(--p));
  max-height: 100%;
  width: auto;
  filter: drop-shadow(0 calc(8 * var(--p)) calc(14 * var(--p)) rgba(0, 0, 0, 0.55));
}
.rg-postal__foot {
  flex: 0 0 auto;
  height: calc(1 * var(--p));
  margin-top: calc(10 * var(--p));
  background: linear-gradient(90deg, rgba(255, 215, 119, 0), rgba(255, 215, 119, 0.40), rgba(255, 215, 119, 0));
}
.rg-postal__wordmark {
  flex: 0 0 auto;
  margin-top: calc(9 * var(--p));
  font-family: var(--ks-display);
  font-size: calc(11 * var(--p));
  font-weight: 700;
  letter-spacing: calc(4.6 * var(--p));
  text-transform: uppercase;
  text-align: center;
  color: rgba(247, 243, 232, 0.56);
}

/* ── Calma pedida por el sistema ─────────────────────────────────────────
 * El base global ya apaga animaciones y transiciones; acá se deja explícito
 * que la llama (sin Lottie/player) queda congelada en su forma estática. */
@media (prefers-reduced-motion: reduce) {
  .rg-flame i:nth-child(2) { animation: none; }
}