/* ══════════════════════════════════════════════════════════════════════
   FEATURE: streak.css
   Sistema de rachas: hover-card + modal + popup (variante mobile).
   Extraído de learning.css y responsive.css en Round 1.3.

   NOTA: Los dark mode overrides ([data-theme="dark"] .streak-*) siguen
   en learning.css por ahora — funcionan vía mayor especificidad.
   Las referencias pequeñas dispersas (.streak-badge en dashboard,
   .streak-visual-* en dashboard, .stat-streak-stat en learn topbar)
   se moverán con sus páginas respectivas en Round 3.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Streak Pulse, Badge Tiers, @keyframes heartbeat ─────────────── */
/* ── 1. Streak Heartbeat ─────────────────────────────────────────────── */
.streak-pulse {
  display: inline-flex;
  animation: heartbeat var(--streak-speed, 1.5s) ease-in-out infinite;
}

.streak-pulse--dead {
  animation: none;
  opacity: 0.35;
  filter: grayscale(1);
}

.streak-pulse--dead .streak-pulse {
  animation: none;
}

@keyframes heartbeat {

  0%,
  100% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.18);
  }

  35% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.12);
  }
}

/* Streak tier glows */
.streak-badge--warm {
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2) !important;
  border-color: #FFB74D !important;
  color: #E65100 !important;
  box-shadow: 0 0 12px rgba(255, 152, 0, 0.2);
}

.streak-badge--hot {
  background: linear-gradient(135deg, #FFEBEE, #FFCDD2) !important;
  border-color: #EF5350 !important;
  color: #C62828 !important;
  box-shadow: 0 0 16px rgba(244, 67, 54, 0.25);
}

.streak-badge--perfect {
  background: linear-gradient(135deg, #FFF8E1, #FFECB3) !important;
  border-color: #FFD54F !important;
  color: #F57F17 !important;
  box-shadow: 0 0 20px rgba(255, 193, 7, 0.35), 0 0 40px rgba(255, 193, 7, 0.15);
}

/* ── 2. Streak Hover Card + Full Modal ──────────────────────────────── */
.streak-hover-card {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  display: flex;
  flex-direction: column;
  background: var(--bg-white, #fff);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-subtle);
  z-index: 1000;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100dvh - 120px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
  pointer-events: none;
}

/* Inside the shell sidebar, use fixed positioning to avoid clipping */
.shell-side-col .streak-hover-card {
  position: fixed;
  top: auto;
  right: 28px;
  width: 360px;
  max-height: calc(100dvh - 80px);
}

.streak-hover-card.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.streak-hover-handle {
  display: none;
  /* Only visible on mobile */
}

/* Top Section (Soft Background) */
.streak-hover-top {
  background: linear-gradient(135deg, #FAF5FF 0%, #F3E8FF 100%);
  padding: 28px 24px;
}

.streak-hover-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.streak-hover-hero-left {
  display: flex;
  flex-direction: column;
}

.streak-hover-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}

.streak-hover-count {
  font-size: 2.4rem;
  font-weight: 900;
  color: #7C3AED;
  line-height: 1;
}

.streak-hover-label {
  font-size: 1.3rem;
  font-weight: 800;
  color: #9333EA;
  opacity: 0.9;
}

.streak-hover-msg {
  font-size: 0.95rem;
  color: #6B7280;
  margin: 10px 0 0;
  line-height: 1.4;
  font-weight: 600;
  max-width: 240px;
}

.streak-hover-flame {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.25;
}

.streak-hover-flame-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* Week Dots in White Box */
.streak-hover-week-box {
  background: var(--bg-white);
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.streak-hover-week {
  display: flex;
  justify-content: space-between;
}

.streak-dot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.streak-dot-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: #9CA3AF;
  text-transform: uppercase;
}

.streak-dot-col.is-today .streak-dot-name {
  color: #F59E0B;
  /* Orange for today as per screenshot */
  font-weight: 800;
}

.streak-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.streak-dot.active {
  background: #F59E0B;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.streak-dot.active .streak-check-icon {
  font-size: 16px;
  color: #292524;
  font-weight: 700;
  font-variation-settings: 'FILL' 1;
}

/* Today, not yet earned — refined "pending" state (Emil-style).
   Was: bright cyan gradient + ice shimmer (loud).
   Now: warm amber dashed outline with a quiet breathing ring. */
.streak-dot.at-risk {
  background: var(--bg-white, #fff);
  border: 2px dashed rgba(245, 158, 11, 0.55);
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  animation: streakBreathe 2.8s ease-in-out infinite;
}

.streak-dot.at-risk .streak-ice-icon {
  font-size: 14px;
  color: #d97706;
  font-variation-settings: 'FILL' 0;
  opacity: 0.85;
}

@keyframes streakBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.0); }
  50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.14); }
}

/* "Just earned" — one-time celebration on the dot that just turned active.
   Applied + auto-removed by JS after the animation completes. */
.streak-dot.just-earned {
  animation: streakSpring 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}
@keyframes streakSpring {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
  45%  { transform: scale(1.22); box-shadow: 0 0 0 10px rgba(245, 158, 11, 0.18); }
  100% { transform: scale(1);    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }
}

/* ── Countdown chip — "Quedan Xh para mantener tu racha" ─────────────── */
.streak-countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.22);
  color: #92400E;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.streak-countdown .material-symbols-outlined {
  font-size: 14px;
  color: #d97706;
  font-variation-settings: 'FILL' 0;
}
.streak-countdown strong {
  font-weight: 800;
  color: #78350F;
}
/* < 1 hour left — escalate to red coral with urgency pulse */
.streak-countdown.is-urgent {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.32);
  color: #991b1b;
  animation: streakUrgentPulse 1.4s ease-in-out infinite;
}
.streak-countdown.is-urgent .material-symbols-outlined,
.streak-countdown.is-urgent strong {
  color: #b91c1c;
}
@keyframes streakUrgentPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15); }
}
@media (prefers-reduced-motion: reduce) {
  .streak-dot.at-risk,
  .streak-dot.just-earned,
  .streak-countdown.is-urgent {
    animation: none !important;
  }
}

/* Bottom Section — Duolingo-style stacked layout */
.streak-hover-bottom {
  background: var(--bg-white);
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Friends Card — vertical hero with gradient fade ── */
.streak-hover-friends-card {
  background: linear-gradient(145deg, #7C3AED 0%, #6D28D9 100%);
  border-radius: 18px;
  color: white;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Hero image container with gradient fade edges */
.streak-hover-friends-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 0;
  position: relative;
}

/* Gradient fade — smooths the bottom edge into the purple card */
.streak-hover-friends-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(to bottom, transparent, #7C3AED);
  pointer-events: none;
  z-index: 2;
}

.streak-hover-friends-img {
  width: 220px;
  height: auto;
  max-height: 160px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* Text + button body */
.streak-hover-friends-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 20px 18px;
  gap: 6px;
}

.streak-hover-friends-body strong {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.2px;
}

.streak-hover-friends-body span {
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0.9;
  margin-bottom: 6px;
}

.streak-hover-friends-btn {
  background: var(--bg-white);
  color: #7C3AED;
  border: none;
  border-radius: 12px;
  padding: 11px 16px;
  width: 100%;
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.streak-hover-friends-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* ── Sociedad de Rachas Section ── */
.streak-hover-sociedad {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--bg-white);
  border: 1.5px solid var(--border-subtle, #E5E7EB);
  border-radius: 16px;
  padding: 16px;
}

.streak-sociedad-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #F3E8FF 0%, #EDE9FE 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.streak-sociedad-icon .material-symbols-outlined {
  font-size: 24px;
  color: #7C3AED;
  font-variation-settings: 'FILL' 1;
}

.streak-sociedad-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.streak-sociedad-info strong {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary, #1F2937);
  line-height: 1.3;
}

.streak-sociedad-info span {
  font-size: 0.78rem;
  color: var(--text-muted, #6B7280);
  line-height: 1.45;
  font-weight: 500;
}

/* ── Full-width CTA Button ── */
.streak-hover-cta {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  color: white;
  border: none;
  border-radius: 14px;
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
  margin-top: auto;
}

.streak-hover-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(124, 58, 237, 0.4);
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
}

/* ── Full Modal Overlay ── */

.streak-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.streak-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.streak-modal {
  width: 450px;
  max-height: 85dvh;
  background: var(--bg-white, #fff);
  border-radius: 18px;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.95) translateY(10px);
  /* Propiedades explícitas + ease-out fuerte: `ease` arranca lento y se siente
     perezoso justo en el instante que el usuario mira. Es un modal (no un popover
     anclado), así que el transform-origin se queda centrado. */
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

.streak-modal-overlay.open .streak-modal {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.streak-modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px 0;
  position: relative;
}

.streak-modal-close {
  position: absolute;
  left: 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  /* Touch target mínimo 44x44 (antes era ~32px con padding:4px) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 10px;
  transition: background 0.15s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-tap-highlight-color: transparent;
}

/* Hover solo en punteros finos: en táctil el :hover se queda "pegado" tras el tap */
@media (hover: hover) and (pointer: fine) {
  .streak-modal-close:hover {
    background: rgba(0, 0, 0, 0.05);
  }
}

/* Feedback de press: confirma que la interfaz escuchó el toque */
.streak-modal-close:active {
  transform: scale(0.92);
}

.streak-modal-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

/* Modal Tabs */
.streak-modal-tabs {
  display: flex;
  border-bottom: 2px solid var(--border-subtle);
  margin-top: 14px;
}

.streak-modal-tab {
  flex: 1;
  padding: 12px 0;
  min-height: 44px; /* touch target */
  background: none;
  border: none;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .streak-modal-tab:hover {
    color: var(--text-primary);
  }
}

.streak-modal-tab:active {
  transform: scale(0.97);
}

.streak-modal-tab.active {
  color: #7C3AED;
}

.streak-modal-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: #7C3AED;
  border-radius: 3px 3px 0 0;
}

/* Modal Panels */
.streak-modal-panel {
  padding: 0 22px 22px;
  overflow-y: auto;
  /* 110px = header + tabs */
  max-height: calc(85dvh - 110px);
  overscroll-behavior: contain;
}

/* Modal Hero */
.streak-modal-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0 16px;
  border-bottom: 1px solid #F1F5F9;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #F3E8FF 0%, #FDF2F8 100%);
  margin: 0 -22px;
  padding: 22px 22px 16px;
}

.streak-modal-hero-count {
  font-size: 2rem;
  font-weight: 900;
  color: #7C3AED;
  line-height: 1;
}

.streak-modal-hero-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #9333EA;
  margin-top: 2px;
  display: block;
}

.streak-modal-hero-flame {
  opacity: 0.2;
}

.streak-modal-hero-flame .material-symbols-outlined {
  font-size: 48px;
  color: #C084FC;
}

/* Modal Reminder */
.streak-modal-reminder {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #FFFBEB;
  border: 1.5px solid #FDE68A;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 18px 0;
}

.streak-modal-reminder-icon {
  font-size: 24px;
  color: #F59E0B;
  flex-shrink: 0;
}

.streak-modal-reminder div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.streak-modal-reminder span {
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.4;
}

.streak-modal-reminder-link {
  font-size: 0.78rem;
  font-weight: 800;
  color: #7C3AED;
  text-decoration: none;
}

.streak-modal-reminder-link:hover {
  text-decoration: underline;
}

/* Calendar (inside modal) */
.streak-modal-section-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 16px 0 10px;
}

.streak-calendar {
  background: var(--bg-white, #fff);
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px;
}

.streak-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.streak-cal-arrow {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px;
  border-radius: 8px;
  transition: background 0.15s;
}

.streak-cal-arrow:hover {
  background: rgba(0, 0, 0, 0.05);
}

.streak-cal-month {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}

.streak-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.streak-cal-header {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 6px 0;
}

.streak-cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  font-size: 0.82rem;
  color: var(--text-primary);
  border-radius: 50%;
  font-weight: 500;
}

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

.streak-cal-day.is-future {
  color: #CBD5E1;
}

.streak-cal-day.is-today span {
  background: #E9D5FF;
  color: #7C3AED;
  font-weight: 800;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.streak-cal-day.has-streak span {
  background: linear-gradient(135deg, #A855F7, #7C3AED);
  color: white;
  font-weight: 700;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* At-risk day (today not completed — ice) */
.streak-cal-day.at-risk span {
  background: var(--bg-white, #fff);
  color: #d97706;
  font-weight: 800;
  border: 2px dashed rgba(245, 158, 11, 0.55);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: streakBreathe 2.8s ease-in-out infinite;
}

/* Streak Goal */
.streak-goal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-white, #fff);
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px 16px;
}

.streak-goal-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.streak-goal-marker .material-symbols-outlined {
  font-size: 20px;
  color: #F59E0B;
}

.streak-goal-marker span:last-child {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-primary);
}

.streak-goal-end .material-symbols-outlined {
  color: #7C3AED;
}

.streak-goal-track {
  flex: 1;
  height: 10px;
  background: #F1F5F9;
  border-radius: 10px;
  overflow: hidden;
}

.streak-goal-fill {
  height: 100%;
  background: linear-gradient(90deg, #A855F7, #7C3AED);
  border-radius: 10px;
  transition: width 0.5s ease;
}

/* Society */
.streak-society-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--bg-white, #fff);
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px 16px;
}

.streak-society-icon {
  font-size: 28px;
  color: #9CA3AF;
  flex-shrink: 0;
}

.streak-society-icon.unlocked {
  color: #F59E0B;
}

.streak-society-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Friends Tab (in modal) */
.streak-friends-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
}

.streak-friends-icon-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.streak-friends-flame {
  font-size: 48px;
  color: #A855F7;
  position: absolute;
  top: 0;
}

.streak-friends-people {
  font-size: 36px;
  color: #7C3AED;
  position: absolute;
  bottom: 8px;
}

.streak-friends-text {
  font-size: 1rem;
  color: var(--text-primary);
  line-height: 1.5;
  max-width: 280px;
  margin-bottom: 24px;
}

.streak-friends-text strong {
  color: #7C3AED;
}

.streak-friends-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 40px;
  background: linear-gradient(135deg, #A855F7, #7C3AED);
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.streak-friends-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

.streak-friends-cta .material-symbols-outlined {
  font-size: 20px;
}

/* ── Responsive: Mobile Full-Screen Modal ── */
@media (max-width: 768px) {
  .streak-hover-card {
    width: calc(100vw - 32px);
    right: -60px;
  }

  /* Overlay fades in while sheet slides up */
  .streak-modal-overlay {
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    transition: background 0.45s ease, visibility 0.45s;
    /* Ancla el overlay al viewport DINÁMICO. Con `inset: 0`, el elemento fixed se
       resuelve contra el viewport grande (lvh, el tamaño con las barras del
       navegador ocultas), que se extiende por debajo del área visible cuando la
       barra inferior está desplegada. Al fijar la altura, `bottom` se ignora
       (top + bottom + height está sobre-restringido) y el borde inferior del
       overlay pasa a coincidir con el borde inferior REAL visible. */
    height: 100dvh;
  }

  .streak-modal-overlay.open {
    background: rgba(0, 0, 0, 0.5);
  }

  /* Sheet: slides up from bottom with iOS spring curve */
  .streak-modal {
    width: 100%;
    height: auto;
    max-height: 92dvh; /* bottom sheet: deja ver una franja del scrim arriba */
    /* El sheet se desliza; no se desvanece (el fade rompería la continuidad
       espacial del gesto y del drag-to-dismiss). */
    opacity: 1;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
  }

  .streak-modal-overlay.open .streak-modal {
    transform: translateY(0);
  }

  /* Drag handle pill */
  .streak-modal-handle {
    display: block !important;
    width: 36px;
    height: 4px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
    cursor: grab;
  }

  [data-theme="dark"] .streak-modal-handle {
    background: rgba(255, 255, 255, 0.2);
  }

  .streak-modal-header {
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
    padding-left: 20px;
    padding-right: 20px;
    flex-shrink: 0;
  }

  .streak-modal-tabs {
    flex-shrink: 0;
  }

  .streak-modal-panel {
    flex: 1;
    /* Sin esto un flex child no encoge (min-height: auto por defecto) y el
       contenido desborda el sheet en vez de scrollear dentro. */
    min-height: 0;
    overflow-y: auto;
    max-height: none;
    -webkit-overflow-scrolling: touch;
    /* Corta el scroll chaining hacia el body: es lo que hacía que el navegador
       mostrara/ocultara sus barras al llegar al final del scroll interno. */
    overscroll-behavior: contain;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* ── 3. Streak Popup (variante alternativa) ─────────────────────────── */
.streak-popup {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 380px;
  max-height: 85vh;
  background: var(--bg-white, #fff);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border-subtle);
  z-index: 1000;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}

.streak-popup.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.streak-popup-inner {
  overflow-y: auto;
  max-height: 85vh;
  padding: 0;
}

/* Close */
.streak-popup-close {
  position: absolute;
  top: 12px;
  left: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px;
  border-radius: 8px;
  transition: background 0.15s;
  z-index: 2;
}

.streak-popup-close:hover {
  background: rgba(0, 0, 0, 0.05);
}

.streak-popup-title {
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
  padding: 14px 0 0;
  color: var(--text-primary);
}

/* ── Tabs ── */
.streak-popup-tabs {
  display: flex;
  border-bottom: 2px solid var(--border-subtle);
  margin-top: 12px;
}

.streak-popup-tab {
  flex: 1;
  padding: 12px 0;
  background: none;
  border: none;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}

.streak-popup-tab:hover {
  color: var(--text-primary);
}

.streak-popup-tab.active {
  color: #7C3AED;
}

.streak-popup-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: #7C3AED;
  border-radius: 3px 3px 0 0;
}

/* ── Panels ── */
.streak-popup-panel {
  padding: 0 20px 20px;
}

/* ── Hero ── */
.streak-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 20px 16px;
  background: linear-gradient(135deg, #F3E8FF 0%, #FDF2F8 100%);
}

.streak-hero-left {
  display: flex;
  flex-direction: column;
}

.streak-hero-count {
  font-size: 2.2rem;
  font-weight: 900;
  color: #7C3AED;
  line-height: 1;
}

.streak-hero-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #9333EA;
  margin-top: 2px;
}

.streak-hero-flame {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.25;
}

.streak-hero-flame .material-symbols-outlined {
  font-size: 56px;
  color: #C084FC;
}

/* ── Reminder ── */
.streak-reminder {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-white, #fff);
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 16px 20px 0;
}

.streak-reminder-icon {
  font-size: 28px;
  color: #F59E0B;
  flex-shrink: 0;
}

.streak-reminder-text {
  font-size: 0.85rem;
  color: var(--text-primary);
  display: block;
  line-height: 1.4;
}

.streak-reminder-link {
  font-size: 0.78rem;
  font-weight: 800;
  color: #7C3AED;
  text-decoration: none;
  margin-top: 4px;
  display: inline-block;
}

.streak-reminder-link:hover {
  text-decoration: underline;
}

/* ── Week Dots ── */
.streak-week {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px;
}

.streak-dot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.streak-dot-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.streak-dot-col.is-today .streak-dot-name {
  color: #7C3AED;
  font-weight: 800;
}

.streak-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.streak-dot.active {
  background: #F59E0B;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.streak-dot.active .streak-check-icon {
  font-size: 16px;
  color: #292524;
  font-weight: 700;
  font-variation-settings: 'FILL' 1;
}

/* ── Calendar ── */
.streak-calendar-section {
  padding-top: 8px;
}

.streak-section-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.streak-calendar {
  background: var(--bg-white, #fff);
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px;
}

.streak-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.streak-cal-arrow {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px;
  border-radius: 8px;
  transition: background 0.15s;
}

.streak-cal-arrow:hover {
  background: rgba(0, 0, 0, 0.05);
}

.streak-cal-month {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}

.streak-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.streak-cal-header {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 6px 0;
}

.streak-cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  font-size: 0.82rem;
  color: var(--text-primary);
  border-radius: 50%;
  position: relative;
  font-weight: 500;
}

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

.streak-cal-day.is-future {
  color: #CBD5E1;
}

.streak-cal-day.is-today span {
  background: #E9D5FF;
  color: #7C3AED;
  font-weight: 800;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.streak-cal-day.has-streak span {
  background: linear-gradient(135deg, #A855F7, #7C3AED);
  color: white;
  font-weight: 700;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.streak-cal-day.at-risk span {
  background: var(--bg-white, #fff);
  color: #d97706;
  font-weight: 800;
  border: 2px dashed rgba(245, 158, 11, 0.55);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: streakBreathe 2.8s ease-in-out infinite;
}

/* ── Streak Goal ── */
.streak-goal-section {
  margin-top: 16px;
}

.streak-goal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-white, #fff);
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px 16px;
}

.streak-goal-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.streak-goal-marker .material-symbols-outlined {
  font-size: 20px;
  color: #F59E0B;
}

.streak-goal-marker span:last-child {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-primary);
}

.streak-goal-start .material-symbols-outlined {
  color: #A855F7;
}

.streak-goal-track {
  flex: 1;
  height: 10px;
  background: #F1F5F9;
  border-radius: 10px;
  overflow: hidden;
}

.streak-goal-fill {
  height: 100%;
  background: linear-gradient(90deg, #A855F7, #7C3AED);
  border-radius: 10px;
  transition: width 0.5s ease;
}

/* ── Sociedad ── */
.streak-society {
  margin-top: 16px;
}

.streak-society-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--bg-white, #fff);
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px 16px;
}

.streak-society-icon {
  font-size: 28px;
  color: #9CA3AF;
  flex-shrink: 0;
  margin-top: 2px;
}

.streak-society-icon.unlocked {
  color: #F59E0B;
}

.streak-society-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* ── Friends Tab ── */
.streak-friends-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
}

.streak-friends-icon-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.streak-friends-flame {
  font-size: 48px;
  color: #A855F7;
  position: absolute;
  top: 0;
}

.streak-friends-people {
  font-size: 36px;
  color: #7C3AED;
  position: absolute;
  bottom: 8px;
}

.streak-friends-text {
  font-size: 1rem;
  color: var(--text-primary);
  line-height: 1.5;
  max-width: 280px;
  margin-bottom: 24px;
}

.streak-friends-text strong {
  color: #7C3AED;
}

.streak-friends-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 40px;
  background: linear-gradient(135deg, #A855F7, #7C3AED);
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.streak-friends-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

.streak-friends-cta .material-symbols-outlined {
  font-size: 20px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .streak-popup {
    width: calc(100vw - 32px);
    right: -60px;
  }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .streak-popup {
    width: calc(100vw - 32px);
    right: -60px;
  }
}

/* ── 4. Mobile Streak Hover Card (from responsive.css ≤768px) ───────── */
@media (max-width: 768px) {
  /* ── Mobile Streak Bottom Sheet ── */
  .streak-hover-card {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: auto !important;
    max-height: 85dvh !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(100%) scale(1) !important;
    opacity: 1 !important;
    visibility: hidden;
    z-index: 2100 !important;
    overscroll-behavior: contain;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.4s !important;
    background: var(--bg-white, #fff) !important;
    pointer-events: auto !important;
  }

  .streak-hover-card.open {
    transform: translateY(0) scale(1) !important;
    visibility: visible !important;
  }

  .streak-hover-handle {
    display: block !important;
    width: 40px;
    height: 5px;
    background: #E5E7EB;
    border-radius: 3px;
    margin: 12px auto 8px;
  }
}



/* ══════════════════════════════════════════════════════════════════════
   DARK MODE — Streak (extracted from learning.css in Round 11)
   ══════════════════════════════════════════════════════════════════════ */
/* ── Streak Hover Card ── */
/* ── Streak Hover Card ── */
[data-theme="dark"] .streak-hover-card {
  background: var(--bg-white);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .streak-hover-top {
  background: var(--bg-primary);
}

[data-theme="dark"] .streak-hover-bottom {
  background: var(--bg-secondary);
}

[data-theme="dark"] .streak-hover-week-box {
  background: var(--bg-secondary);
}

[data-theme="dark"] .streak-hover-msg {
  color: var(--text-secondary);
}

[data-theme="dark"] .streak-hover-count {
  color: #A78BFA;
}

[data-theme="dark"] .streak-hover-label {
  color: #C4B5FD;
}

[data-theme="dark"] .streak-dot {
  background: var(--bg-elevated);
}

[data-theme="dark"] .streak-dot.active {
  background: #F59E0B;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}

[data-theme="dark"] .streak-dot.active .streak-check-icon {
  color: #292524;
}

[data-theme="dark"] .streak-dot.at-risk {
  background: linear-gradient(135deg, #38BDF8, #0EA5E9);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

[data-theme="dark"] .streak-dot.at-risk .streak-ice-icon {
  color: #fff;
}

[data-theme="dark"] .streak-dot-name {
  color: var(--text-secondary);
}

/* ── Streak Modal ── */
/* ── Streak Modal ── */
[data-theme="dark"] .streak-modal-overlay {
  background: rgba(0, 0, 0, 0.78);
}

[data-theme="dark"] .streak-modal {
  background: var(--bg-white);
  border: 1px solid var(--border);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .streak-modal-title {
  color: var(--text-primary);
}

[data-theme="dark"] .streak-modal-close {
  color: var(--text-secondary);
}

[data-theme="dark"] .streak-modal-close:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .streak-modal-tab {
  color: var(--text-secondary);
}

[data-theme="dark"] .streak-modal-tab.active {
  color: var(--violet);
  border-bottom-color: var(--violet);
}

/* Hero → dark purple gradient */
[data-theme="dark"] .streak-modal-hero {
  background: linear-gradient(135deg, rgba(108, 43, 255, 0.18) 0%, rgba(124, 58, 237, 0.08) 100%);
  border-bottom-color: var(--border);
}

[data-theme="dark"] .streak-modal-hero-count {
  color: #A78BFA;
}

[data-theme="dark"] .streak-modal-hero-label {
  color: #C4B5FD;
}

[data-theme="dark"] .streak-modal-hero-flame .material-symbols-outlined {
  color: #7C3AED;
}

/* Reminder → dark themed (no yellow) */
[data-theme="dark"] .streak-modal-reminder {
  background: rgba(108, 43, 255, 0.08);
  border-color: rgba(108, 43, 255, 0.2);
}

[data-theme="dark"] .streak-modal-reminder span {
  color: var(--text-primary);
}

[data-theme="dark"] .streak-modal-reminder-icon {
  color: #A78BFA;
}

[data-theme="dark"] .streak-modal-reminder-link {
  color: #A78BFA;
}

/* Calendar → dark */
[data-theme="dark"] .streak-calendar {
  background: var(--bg-secondary);
  border-color: var(--border);
}

[data-theme="dark"] .streak-cal-month {
  color: var(--text-primary);
}

[data-theme="dark"] .streak-cal-header {
  color: var(--text-secondary);
}

[data-theme="dark"] .streak-cal-day {
  color: var(--text-primary);
}

[data-theme="dark"] .streak-cal-day.is-future {
  color: var(--text-secondary);
  opacity: 0.4;
}

[data-theme="dark"] .streak-cal-day.is-today span {
  background: rgba(108, 43, 255, 0.3);
  color: #C4B5FD;
}

[data-theme="dark"] .streak-cal-day.has-streak span {
  background: linear-gradient(135deg, #7C3AED, #6C2BFF);
}

[data-theme="dark"] .streak-cal-day.at-risk span {
  background: linear-gradient(135deg, #38BDF8, #0EA5E9);
  color: white;
}

[data-theme="dark"] .streak-cal-arrow {
  color: var(--text-secondary);
}

[data-theme="dark"] .streak-cal-arrow:hover {
  background: var(--bg-hover);
}

/* Goal bar → dark */
[data-theme="dark"] .streak-goal-bar {
  background: var(--bg-secondary);
  border-color: var(--border);
}

[data-theme="dark"] .streak-goal-track {
  background: var(--bg-elevated);
}

[data-theme="dark"] .streak-goal-marker span:last-child {
  color: var(--text-primary);
}

/* Society card → dark */
[data-theme="dark"] .streak-society-card {
  background: var(--bg-secondary);
  border-color: var(--border);
}

[data-theme="dark"] .streak-society-card p {
  color: var(--text-secondary);
}

/* Section title */
[data-theme="dark"] .streak-modal-section-title {
  color: var(--text-primary);
}

/* Friends panel → dark */
[data-theme="dark"] .streak-friends-empty {
  color: var(--text-primary);
}

[data-theme="dark"] .streak-friends-text {
  color: var(--text-secondary);
}

[data-theme="dark"] .streak-friends-text strong {
  color: var(--text-primary);
}

[data-theme="dark"] .streak-friends-cta {
  background: var(--violet);
  color: #fff;
}

/* ── Streak Popup (old hover) ── */
/* ── Streak Popup (old hover) ── */
[data-theme="dark"] .streak-hero {
  background: var(--bg-primary);
}

[data-theme="dark"] .streak-popup-panel {
  background: var(--bg-white);
}

[data-theme="dark"] .streak-reminder {
  background: var(--bg-secondary);
  border-color: var(--border);
}

[data-theme="dark"] .streak-popup-title {
  color: var(--text-primary);
}

/* ── Racha Fria / Streak Freeze ── */
/* ── Racha Fria / Streak Freeze ── */
.streak-dot.frozen {
  background: #E0F2FE;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

[data-theme="dark"] .streak-dot.frozen {
  background: #0C4A6E;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25);
}

.streak-cal-day.frozen-streak span {
  background: linear-gradient(135deg, #38BDF8, #0EA5E9);
  color: white;
  font-weight: 700;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* MVP: XP oculto hasta lanzamiento completo */