/* Acertijo del Día — cal2.css */
:root {
  --background: 220 20% 98.6%;
  --foreground: 240 10% 12%;
  --card: 0 0% 100%;
  --primary: 250 85% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 18% 95.8%;
  --muted-foreground: 240 4% 46%;
  --border: 240 6% 88%;
  --radius: 0.75rem;
  --shell-bar-bg: hsla(243, 26%, 87%, 0.96);

  --green: hsl(152 62% 42%);
  --green-bg: hsl(148 52% 93%);

  /* Cell elevation system */
  --cell-bg: hsl(0 0% 100%);
  --cell-border: hsl(240 8% 91%);
  --cell-shadow: 0 1px 3px hsl(240 20% 15% / 0.055), 0 1px 2px hsl(240 20% 15% / 0.04);
  --cell-shadow-hover: 0 4px 12px hsl(240 20% 15% / 0.1), 0 1px 4px hsl(240 20% 15% / 0.06);
  --cell-radius: 10px;
  --grid-gap: 5px;
}

[data-theme="dark"] {
  --background: 242 12% 8%;
  --foreground: 220 15% 92%;
  --card: 242 10% 12%;
  --primary: 252 80% 68%;
  --primary-foreground: 0 0% 100%;
  --secondary: 242 10% 16%;
  --muted-foreground: 240 5% 58%;
  --border: 240 6% 22%;
  --shell-bar-bg: hsla(243, 20%, 12%, 0.96);

  --green: hsl(152 62% 62%);
  --green-bg: hsl(148 36% 13%);

  /* Cell elevation — violet-tinted depth */
  --cell-bg: hsl(242 10% 14%);
  --cell-border: hsl(242 8% 20%);
  --cell-shadow: 0 1px 3px hsl(242 44% 3% / 0.4), 0 1px 2px hsl(242 44% 3% / 0.28);
  --cell-shadow-hover: 0 8px 22px hsl(242 44% 3% / 0.6), 0 2px 6px hsl(242 40% 5% / 0.35);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; background: hsl(var(--background)); color: hsl(var(--foreground)); }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "cv02","cv03","cv04","cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  padding-bottom: 56px;
}
button { cursor: pointer; font: inherit; border: 0; background: transparent; color: inherit; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

/* ═══════════════════════════════════════════
   PAGE LAYOUT
   ═══════════════════════════════════════════ */
.cal-page {
  width: min(52rem, calc(100% - 2.5rem));
  margin-inline: auto;
  padding: 5.8rem 0 4rem;
}


/* ═══════════════════════════════════════════
   MONTH NAVIGATION
   ═══════════════════════════════════════════ */
.month-nav {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 1.35rem; gap: 1rem;
}
.month-info h1 {
  font-family: "Crimson Pro", serif;
  font-size: clamp(1.9rem, 4.5vw, 2.5rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.05;
  color: hsl(var(--foreground)); text-transform: capitalize;
}
.month-info p {
  margin-top: 0.25rem;
  font-size: 0.82rem; font-weight: 480; color: hsl(var(--muted-foreground));
}
.month-info p strong { font-weight: 700; color: hsl(var(--foreground)); }
.nav-controls { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.nav-arrow {
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1.5px solid hsl(var(--border));
  background: hsl(var(--card)); color: hsl(var(--muted-foreground));
  display: grid; place-items: center;
  box-shadow: 0 1px 3px hsl(240 20% 10% / 0.04);
  transition: all 0.14s ease;
}
.nav-arrow:hover:not(:disabled) {
  border-color: hsl(250 60% 80%); color: hsl(var(--primary));
  background: hsl(250 72% 97%);
  box-shadow: 0 2px 8px hsl(250 80% 60% / 0.12);
  transform: scale(1.05);
}
[data-theme="dark"] .nav-arrow:hover:not(:disabled) {
  background: hsl(250 25% 18%);
  border-color: hsl(var(--primary) / 0.4);
  box-shadow: 0 2px 8px hsl(250 80% 60% / 0.2);
}
.nav-arrow:disabled { opacity: 0.28; pointer-events: none; }
.nav-today {
  height: 2.2rem; padding: 0 0.88rem;
  border-radius: 999px; border: 1.5px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: 0 1px 3px hsl(240 20% 10% / 0.04);
  font-size: 0.74rem; font-weight: 700; letter-spacing: -0.01em;
  color: hsl(var(--muted-foreground));
  transition: all 0.14s ease;
}
.nav-today:hover { border-color: hsl(250 60% 80%); color: hsl(var(--primary)); background: hsl(250 72% 97%); }
[data-theme="dark"] .nav-today:hover { background: hsl(250 25% 18%); border-color: hsl(var(--primary) / 0.4); }
.nav-today[hidden] { display: none; }

/* ═══════════════════════════════════════════
   STATS STRIP — dark gourmet
   ═══════════════════════════════════════════ */
.stats {
  display: flex; align-items: stretch;
  margin-bottom: 1.3rem;
  background: linear-gradient(145deg, hsl(258 36% 14%) 0%, hsl(254 30% 20%) 100%);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 0 hsla(0 0% 100% / 0.04) inset, 0 12px 40px hsl(240 20% 10% / 0.1), 0 2px 8px hsl(240 20% 10% / 0.04);
}
.stat {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.2rem; padding: 1.1rem 0.6rem; position: relative;
}
.stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px; background: hsla(0 0% 100% / 0.08);
}
.stat-n {
  font-size: clamp(1.7rem, 3.5vw, 2.2rem);
  font-weight: 900; letter-spacing: -0.04em; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
}
.stat-n.c-green  { color: hsl(152 72% 62%); }
.stat-n.c-amber  { color: hsl(42 96% 65%); }
.stat-n.c-dim    { color: hsla(0 0% 100% / 0.32); }
.stat-label {
  font-size: 0.63rem; font-weight: 680;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: hsla(0 0% 100% / 0.4);
}
.stat-bar {
  flex: 1.3; display: flex; flex-direction: column;
  justify-content: center; gap: 0.45rem;
  padding: 1.1rem 1.3rem 1.1rem 1.1rem; position: relative;
}
.stat-bar::before {
  content: ""; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px; background: hsla(0 0% 100% / 0.08);
}
.stat-bar-head { display: flex; justify-content: space-between; align-items: baseline; }
.stat-bar-head span { font-size: 0.65rem; font-weight: 660; letter-spacing: 0.02em; color: hsla(0 0% 100% / 0.4); }
.stat-bar-head strong { font-size: 1.05rem; font-weight: 850; color: hsla(0 0% 100% / 0.88); letter-spacing: -0.02em; }
.stat-track { height: 5px; border-radius: 99px; background: hsla(0 0% 100% / 0.08); overflow: hidden; }
.stat-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, hsl(250 80% 72%), hsl(280 68% 76%));
  transition: width 0.8s cubic-bezier(0.22,1,0.36,1);
}
.stat-streak { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.15rem; }
.stat-streak svg { color: hsl(28 90% 56%); }
.stat-streak span { font-size: 0.64rem; font-weight: 680; color: hsla(0 0% 100% / 0.55); letter-spacing: -0.01em; }

/* ═══════════════════════════════════════════
   CALENDAR CARD
   ═══════════════════════════════════════════ */
.cal-card {
  background: hsl(var(--secondary) / 0.5);
  border: 1px solid hsl(var(--border) / 0.7);
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 1px 0 hsla(0 0% 100% / 0.7) inset, 0 4px 16px hsl(240 20% 10% / 0.06);
}
[data-theme="dark"] .cal-card {
  background: hsl(240 10% 10%);
  box-shadow: 0 1px 0 hsla(255 20% 28% / 0.3) inset, 0 12px 30px hsl(240 46% 4% / 0.4);
}

/* Weekday headers */
.cal-head {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: hsl(248 35% 98%); border-bottom: 1px solid hsl(var(--border) / 0.5);
}
[data-theme="dark"] .cal-head { background: hsl(var(--secondary)); }
.cal-hd {
  padding: 0.68rem 0; text-align: center;
  font-size: 0.64rem; font-weight: 750;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: hsl(var(--muted-foreground) / 0.7);
  user-select: none;
}
.cal-hd.wk { color: hsl(var(--muted-foreground) / 0.55); }

/* Grid */
.cal-body {
  padding: var(--grid-gap);
  overflow: hidden;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--grid-gap);
}
.cal-grid.anim {
  animation: gridFade 0.22s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes gridFade { from { opacity:0; transform: translateY(5px); } }

/* ─── SECTION COLOR TOKENS ─── */
.sec-logica-pura         { --sec-h: 250; --sec-s: 72%; --sec-l: 58%; }
.sec-territorio-numerico { --sec-h: 212; --sec-s: 82%; --sec-l: 50%; }
.sec-trampa-visual       { --sec-h: 168; --sec-s: 60%; --sec-l: 38%; }
.sec-jugadas-maestras    { --sec-h: 26;  --sec-s: 92%; --sec-l: 52%; }
.sec-factor-azar         { --sec-h: 338; --sec-s: 72%; --sec-l: 54%; }
.sec-ingenio-eterno      { --sec-h: 44;  --sec-s: 92%; --sec-l: 46%; }
.sec-default             { --sec-h: 240; --sec-s: 6%;  --sec-l: 58%; }

/* ─── CELLS — base ─── */
.c {
  min-height: 7.6rem;
  padding: 0.58rem 0.62rem 0.52rem;
  display: flex; flex-direction: column;
  background: var(--cell-bg);
  border: 1px solid var(--cell-border);
  border-top: 2.5px solid hsl(var(--sec-h, 240) var(--sec-s, 6%) var(--sec-l, 78%) / 0.45);
  border-radius: var(--cell-radius);
  box-shadow: var(--cell-shadow);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  user-select: none;
  will-change: transform;
  overflow: hidden;
}

.c.blank {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ─── DAY NUMBER ─── */
.c-num {
  font-size: 0.64rem; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1;
  color: hsl(240 5% 62%);
  transition: color 0.12s ease;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 0.3rem;
}
[data-theme="dark"] .c-num { color: hsl(var(--muted-foreground) / 0.5); }

.c-num-solo {
  display: block; align-self: flex-end;
  color: hsl(var(--muted-foreground) / 0.2);
  margin-bottom: auto;
}

.c.today .c-num {
  background: hsl(var(--primary));
  color: #fff; font-weight: 770;
  padding: 0.14rem 0.38rem;
  border-radius: 4px;
  box-shadow: 0 2px 8px hsl(250 85% 55% / 0.32);
}

/* ─── PUZZLE TITLE ─── */
.c-title {
  font-family: "Crimson Pro", serif;
  font-size: 0.92rem; font-weight: 600; line-height: 1.24;
  color: hsl(240 10% 18%);
  letter-spacing: -0.022em;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
  flex: 1;
  transition: color 0.13s ease;
}
[data-theme="dark"] .c-title { color: hsl(var(--foreground) / 0.85); }

.c.click:hover .c-title {
  color: hsl(var(--sec-h, 250) var(--sec-s, 72%) calc(var(--sec-l, 58%) - 10%));
}
[data-theme="dark"] .c.click:hover .c-title {
  color: hsl(var(--sec-h, 250) var(--sec-s, 72%) calc(var(--sec-l, 58%) + 20%));
}

.c.today .c-title      { color: hsl(252 42% 20%); font-weight: 700; }
.c.streak-member .c-title { color: hsl(28 52% 20%); }
[data-theme="dark"] .c.today .c-title      { color: hsl(252 70% 90%); }
[data-theme="dark"] .c.streak-member .c-title { color: hsl(36 62% 78%); }

/* ─── FOOT ROW ─── */
.c-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-top: 0.3rem; flex-shrink: 0;
}

/* ─── CHECK BADGE ─── */
.c-check {
  width: 0.95rem; height: 0.95rem; border-radius: 50%;
  background: var(--green-bg); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ─── LEVEL DOTS ─── */
.lvl {
  display: inline-flex; align-items: center;
  gap: 3px;
}
.lv {
  width: 5px; height: 5px; border-radius: 50%;
  background: hsl(240 5% 84%);
  transition: background 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}
[data-theme="dark"] .lv { background: hsl(240 5% 26%); }
.lv.a {
  background: hsl(var(--sec-h, 240) var(--sec-s, 6%) var(--sec-l, 58%));
}
[data-theme="dark"] .lv.a {
  background: hsl(var(--sec-h, 240) var(--sec-s, 6%) calc(var(--sec-l, 58%) + 12%));
  box-shadow: 0 0 4px hsl(var(--sec-h, 240) var(--sec-s, 6%) var(--sec-l, 58%) / 0.35);
}

/* ─── STATES: FUTURE, TODAY, SOLVED, STREAK ─── */
.c.future {
  background: transparent;
  border: 1px solid hsl(var(--border) / 0.28);
  border-top: 1px solid hsl(var(--border) / 0.28);
  box-shadow: none;
  cursor: default;
}
[data-theme="dark"] .c.future {
  border-color: hsl(var(--border) / 0.14);
}

.c.today {
  background: linear-gradient(168deg, hsl(250 60% 97.5%) 0%, hsl(265 55% 96%) 100%);
  border-color: hsl(250 55% 80% / 0.38);
  border-top-color: hsl(var(--primary));
  border-top-width: 2.5px;
  box-shadow:
    0 0 0 3px hsl(var(--primary) / 0.08),
    0 4px 20px hsl(250 80% 56% / 0.09),
    var(--cell-shadow);
}
[data-theme="dark"] .c.today {
  background: linear-gradient(168deg, hsl(250 28% 18%) 0%, hsl(265 24% 15%) 100%);
  border-color: hsl(250 50% 42% / 0.38);
  border-top-color: hsl(var(--primary));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 0 3px hsl(var(--primary) / 0.14),
    0 6px 24px hsl(250 58% 10% / 0.55);
}

.c.click:has(.c-check) {
  background: hsl(152 45% 98.5%);
  border-top-color: hsl(152 58% 44%);
}
[data-theme="dark"] .c.click:has(.c-check) {
  background: linear-gradient(168deg, hsl(152 22% 14%) 0%, hsl(152 18% 11%) 100%);
  border-top-color: hsl(152 58% 48%);
  box-shadow: 0 0 0 1px rgba(74,222,128,0.06) inset, var(--cell-shadow);
}

.c.streak-member {
  background: hsl(36 75% 98%);
  border-top-color: hsl(36 88% 50%);
}
[data-theme="dark"] .c.streak-member {
  background: hsl(36 24% 13%);
  border-top-color: hsl(38 72% 50%);
}
.c.streak-member.today {
  background: linear-gradient(168deg, hsl(250 60% 97.5%) 0%, hsl(265 55% 96%) 100%);
  border-top-color: hsl(var(--primary));
}
[data-theme="dark"] .c.streak-member.today {
  background: linear-gradient(168deg, hsl(250 26% 17.5%) 0%, hsl(265 22% 19.5%) 100%);
}
.c.streak-member .c-num { color: hsl(30 72% 42%); }
[data-theme="dark"] .c.streak-member .c-num { color: hsl(36 68% 64%); }

/* ─── HOVER / ACTIVE ─── */
.c.click { cursor: pointer; }
.c.click:hover {
  transform: translateY(-2px);
  box-shadow: var(--cell-shadow-hover);
  background: hsl(250 50% 99.2%);
  border-top-color: hsl(var(--sec-h, 250) var(--sec-s, 72%) var(--sec-l, 58%));
  border-color: hsl(250 46% 88% / 0.5);
}
[data-theme="dark"] .c.click:hover {
  background: hsl(240 8% 17.5%);
  border-color: hsl(250 38% 50% / 0.22);
  border-top-color: hsl(var(--sec-h, 250) var(--sec-s, 72%) var(--sec-l, 58%));
  box-shadow: var(--cell-shadow-hover);
}
.c.click:active { transform: translateY(0) scale(0.99); transition-duration: 75ms; }
.c.today.click:hover {
  background: linear-gradient(168deg, hsl(250 60% 96.5%) 0%, hsl(265 52% 95%) 100%);
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12), 0 6px 26px hsl(250 80% 54% / 0.13);
}
[data-theme="dark"] .c.today.click:hover {
  background: linear-gradient(168deg, hsl(250 26% 19.5%) 0%, hsl(265 22% 21.5%) 100%);
}
.c.click:has(.c-check):hover { background: hsl(152 44% 97.2%); border-top-color: hsl(152 58% 44%); }
[data-theme="dark"] .c.click:has(.c-check):hover { background: hsl(152 20% 16%); }
.c.streak-member.click:hover { background: hsl(36 70% 96.5%); }
[data-theme="dark"] .c.streak-member.click:hover { background: hsl(36 24% 16%); }

/* ─── LEVEL BARS (in modal) ─── */
/* (cell rules already defined above — this ensures modal also shows them) */

/* ─── LOADING / ERROR ─── */
.cal-loading, .cal-error {
  grid-column: 1 / -1; padding: 3rem 1rem; text-align: center;
  font-size: 0.9rem; color: hsl(var(--muted-foreground));
}
.cal-error { color: hsl(0 60% 50%); }

/* ═══════════════════════════════════════════
   LEGEND
   ═══════════════════════════════════════════ */
.legend {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.55rem 1.3rem; margin-top: 1.2rem; padding: 0 0.15rem;
}
.leg { display: flex; align-items: center; gap: 0.38rem; font-size: 0.72rem; font-weight: 510; color: hsl(var(--muted-foreground)); }
.leg-dot { width: 1rem; height: 1rem; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ld-solved  { background: var(--green-bg); color: var(--green); }
.ld-pending { border: 1.5px solid hsl(var(--border)); }
.ld-today   { background: hsl(var(--primary)); }

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: hsl(230 25% 8% / 0.6);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  display: flex; align-items: flex-end; justify-content: center;
  animation: bdIn 0.2s ease both;
}
@keyframes bdIn { from { opacity: 0; } }

.modal-dialog {
  width: min(38rem, 100%);
  background: hsl(0 0% 100%);
  border-radius: 26px 26px 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 0);
  position: relative;
  animation: dlgUp 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
  max-height: 94dvh;
  overflow-y: auto;
  /* Refined shadow — depth + bloom */
  box-shadow:
    0 1px 0 hsl(0 0% 100% / 0.7) inset,
    0 -1px 0 hsl(240 15% 88%) inset,
    0 -40px 80px hsl(230 30% 12% / 0.22),
    0 -4px 24px hsl(230 30% 12% / 0.08);
}
@keyframes dlgUp { from { opacity: 0; transform: translateY(32px); } }

[data-theme="dark"] .modal-dialog {
  background: linear-gradient(180deg, hsl(242 12% 14%) 0%, hsl(242 10% 10%) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 1px 0 hsl(255 20% 28% / 0.3) inset,
    0 -40px 80px hsl(240 50% 3% / 0.75),
    0 -8px 24px hsl(240 40% 5% / 0.4);
}

/* Drag handle */
.modal-dialog::before {
  content: "";
  display: block;
  width: 2rem; height: 3px; border-radius: 99px;
  background: hsl(240 6% 84%);
  margin: 0.7rem auto 0;
}
[data-theme="dark"] .modal-dialog::before { background: hsl(240 6% 26%); }

/* ─── SECTION BAND — top-pinned color strip ─── */
.dlg-band {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.78rem 3.2rem 0.7rem 1.75rem;
  border-bottom: 1px solid hsl(var(--sec-h, 240) var(--sec-s, 6%) var(--sec-l, 78%) / 0.2);
  background: linear-gradient(
    135deg,
    hsl(var(--sec-h, 240) var(--sec-s, 6%) var(--sec-l, 78%) / 0.09) 0%,
    hsl(var(--sec-h, 240) var(--sec-s, 6%) var(--sec-l, 78%) / 0.04) 100%
  );
  position: relative;
}
/* left accent line */
.dlg-band::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: hsl(var(--sec-h, 240) var(--sec-s, 6%) var(--sec-l, 58%));
  border-radius: 0 2px 2px 0;
}
[data-theme="dark"] .dlg-band {
  background: linear-gradient(
    135deg,
    hsl(var(--sec-h, 240) var(--sec-s, 6%) var(--sec-l, 58%) / 0.12) 0%,
    hsl(var(--sec-h, 240) var(--sec-s, 6%) var(--sec-l, 58%) / 0.05) 100%
  );
  border-bottom-color: hsl(var(--sec-h, 240) var(--sec-s, 6%) var(--sec-l, 58%) / 0.22);
}
.dlg-section-label {
  font-size: 0.62rem; font-weight: 780;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: hsl(var(--sec-h, 240) var(--sec-s, 6%) calc(var(--sec-l, 58%) - 14%));
  padding-left: 0.6rem;
}
[data-theme="dark"] .dlg-section-label {
  color: hsl(var(--sec-h, 240) var(--sec-s, 6%) calc(var(--sec-l, 58%) + 20%));
}
.dlg-date-label {
  font-size: 0.62rem; font-weight: 560;
  color: hsl(var(--muted-foreground) / 0.65);
  text-transform: capitalize;
}

/* ─── CLOSE BUTTON ─── */
.modal-close {
  position: absolute; top: 0.8rem; right: 1rem;
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  background: hsl(var(--secondary));
  color: hsl(var(--muted-foreground));
  display: grid; place-items: center;
  transition: background 0.12s ease, color 0.12s ease;
  z-index: 2;
}
.modal-close:hover { background: hsl(250 28% 90%); color: hsl(var(--foreground)); }
[data-theme="dark"] .modal-close:hover { background: hsl(240 6% 22%); }

/* ─── BODY ─── */
.dlg-body {
  padding: 1.15rem 1.75rem 1.6rem;
}

.dlg-title {
  font-family: "Crimson Pro", serif;
  font-size: 2.1rem; font-weight: 600;
  letter-spacing: -0.032em; line-height: 1.08;
  color: hsl(240 12% 14%);
  padding-right: 1.5rem;
  margin-bottom: 0.82rem;
}
[data-theme="dark"] .dlg-title { color: hsl(var(--foreground)); }

/* ─── INTRO ─── */
.dlg-intro {
  font-size: 0.875rem; line-height: 1.72;
  color: hsl(240 8% 44%);
  margin-bottom: 1.35rem;
  letter-spacing: -0.003em;
  padding-left: 0.88rem;
  border-left: 2px solid hsl(var(--sec-h, 240) var(--sec-s, 6%) var(--sec-l, 58%) / 0.35);
}
[data-theme="dark"] .dlg-intro {
  color: hsl(var(--foreground) / 0.5);
  border-left-color: hsl(var(--sec-h, 240) var(--sec-s, 6%) var(--sec-l, 58%) / 0.28);
}

/* ─── META ROW ─── */
.dlg-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.78rem 0;
  border-top: 1px solid hsl(var(--border) / 0.55);
  border-bottom: 1px solid hsl(var(--border) / 0.55);
  margin-bottom: 1.2rem;
}
.dlg-meta-left { display: flex; align-items: center; gap: 0.55rem; }
.dlg-diff-name {
  font-size: 0.71rem; font-weight: 650;
  color: hsl(var(--muted-foreground));
  letter-spacing: -0.003em;
}

/* Status chips */
.dlg-status {
  display: inline-flex; align-items: center; gap: 0.28rem;
  padding: 0.23rem 0.64rem; border-radius: 999px;
  font-size: 0.67rem; font-weight: 740;
  letter-spacing: 0.008em;
}
.dlg-status.solved  { background: var(--green-bg); color: var(--green); }
.dlg-status.pending {
  background: hsl(var(--secondary));
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
}
.dlg-status.today   {
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / 0.16);
}

/* ─── CTA ─── */
.btn-prim {
  display: flex; align-items: center; justify-content: center; gap: 0.48rem;
  width: 100%; padding: 0.98rem 1.25rem; border-radius: 15px;
  font-size: 0.94rem; font-weight: 760; letter-spacing: -0.014em;
  background: linear-gradient(140deg, hsl(var(--primary)) 0%, hsl(272 58% 66%) 100%);
  color: #fff;
  box-shadow:
    0 4px 20px hsl(250 80% 50% / 0.26),
    inset 0 1px 0 hsl(0 0% 100% / 0.18),
    inset 0 -1px 0 hsl(250 80% 40% / 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-prim:hover {
  transform: translateY(-1.5px);
  box-shadow:
    0 8px 28px hsl(250 80% 50% / 0.34),
    inset 0 1px 0 hsl(0 0% 100% / 0.22),
    inset 0 -1px 0 hsl(250 80% 40% / 0.18);
}
.btn-prim:active { transform: translateY(0); transition-duration: 70ms; }

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 680px) {
  :root { --grid-gap: 4px; --cell-radius: 8px; }
  .cal-page { width: calc(100% - 2rem); }
  .c { min-height: 5.8rem; padding: 0.5rem 0.5rem 0.44rem; }
  .c-title { font-size: 0.85rem; }
  .stat-bar { display: none; }
  .dlg-body { padding: 1rem 1.4rem 1.5rem; }
  .dlg-band { padding-left: 1.4rem; padding-right: 3rem; }
  .dlg-section-label { padding-left: 0.5rem; }
  .dlg-title { font-size: 1.75rem; }
}

@media (max-width: 440px) {
  :root { --grid-gap: 3px; --cell-radius: 6px; }
  .c { min-height: 4.6rem; padding: 0.38rem 0.36rem 0.32rem; }
  .c-title { display: none; }
  .c-foot { margin-top: auto; }
  .c-check { width: 0.8rem; height: 0.8rem; margin-left: auto; }
  .stats { flex-wrap: wrap; border-radius: 14px; }
  .stat { padding: 0.85rem 0.4rem; }
  .stat-n { font-size: 1.5rem; }
  .month-info h1 { font-size: 1.7rem; }

  /* Micro-puntos de nivel */
  .lvl { gap: 2.5px; }
  .lv { width: 4px; height: 4px; }

  /* Tinte de sección como fondo */
  .c.click {
    background: hsl(var(--sec-h, 240) var(--sec-s, 6%) 97%);
  }
  [data-theme="dark"] .c.click {
    background: hsl(var(--sec-h, 240) calc(var(--sec-s, 6%) * 0.4) 13%);
  }
  .c.click:has(.c-check) { background: hsl(152 45% 98.5%); }
  [data-theme="dark"] .c.click:has(.c-check) { background: hsl(152 20% 13%); }
  .c.today { background: linear-gradient(168deg, hsl(250 60% 97.5%) 0%, hsl(265 55% 96%) 100%); }
  .c.streak-member { background: hsl(36 75% 98%); }
  [data-theme="dark"] .c.streak-member { background: hsl(36 24% 13%); }
}

/* ═══════════════════════════════════════════
   OUT-OF-WINDOW CELLS (faded past 45 days)
   ═══════════════════════════════════════════ */
.c.out-of-window { opacity: 0.35; }

/* ═══════════════════════════════════════════
   ARCHIVE CTA — persistent link to full archive
   ═══════════════════════════════════════════ */
.cal-archive-cta {
  display: flex; flex-direction: column; align-items: center;
  margin-top: 2rem;
}
.cal-archive-fade {
  width: 100%; height: 2.5rem;
  background: linear-gradient(to bottom, transparent, hsl(var(--background)));
  border-radius: 0 0 12px 12px;
  margin-bottom: 0.8rem;
  display: none;
}
.cal-archive-fade.visible { display: block; }

.cal-archive-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.72rem 1.5rem;
  border-radius: 999px;
  border: 1.5px solid hsl(var(--border));
  background: hsl(var(--card));
  font-size: 0.82rem; font-weight: 640; letter-spacing: -0.01em;
  color: hsl(var(--muted-foreground));
  box-shadow: 0 1px 4px hsl(240 20% 10% / 0.04);
  transition: all 0.18s ease;
}
.cal-archive-link svg {
  opacity: 0.5;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.cal-archive-link:hover {
  border-color: hsl(var(--primary) / 0.4);
  color: hsl(var(--primary));
  background: hsl(250 72% 97.5%);
  box-shadow: 0 4px 16px hsl(250 80% 60% / 0.1);
  transform: translateY(-1px);
}
.cal-archive-link:hover svg { opacity: 1; transform: translateX(2px); }
[data-theme="dark"] .cal-archive-link {
  background: hsl(240 8% 14%);
  color: hsl(var(--muted-foreground));
}
[data-theme="dark"] .cal-archive-link:hover {
  background: hsl(250 18% 18%);
  border-color: hsl(var(--primary) / 0.32);
  color: hsl(var(--primary));
  box-shadow: 0 4px 16px hsl(250 80% 60% / 0.15);
}

/* Dark mode: modal close button hover */
[data-theme="dark"] .modal-close {
  background: hsl(240 8% 16%);
}

/* Dark mode: modal intro text */
[data-theme="dark"] .dlg-intro {
  color: hsl(var(--foreground) / 0.5);
}

/* Dark mode: calendar heading */
[data-theme="dark"] .cal-head {
  border-bottom-color: hsl(var(--border) / 0.5);
}

/* ═══════════════════════════════════════════
   SUPPORT CTA
   ═══════════════════════════════════════════ */
:root {
  --muted: hsl(var(--muted-foreground));
  --fg: hsl(var(--foreground));
  --border-color: hsl(var(--border));
}
[data-theme="dark"] {
  --muted: hsl(var(--muted-foreground));
  --fg: hsl(var(--foreground));
  --border-color: hsl(var(--border));
}
.support-cta {
  display: grid;
  grid-template-columns: 44px 1fr 16px;
  align-items: center;
  gap: 0.9rem;
  margin: 2.4rem 0 0;
  padding: 1.3rem 1.2rem;
  border: 1px solid #4b3c72;
  border-radius: 20px;
  background: radial-gradient(circle at 16% 0, rgba(255,255,255,0.18), transparent 38%), linear-gradient(135deg, #241f2c, #4b3c72);
  box-shadow: 0 12px 32px rgba(45,39,54,0.18);
  color: #fff;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.support-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(45,39,54,0.26); }
.support-cta-icon {
  width: 44px; height: 44px; border-radius: 14px;
  background: rgba(255,255,255,0.13);
  display: grid; place-items: center; flex-shrink: 0;
}
.support-cta-body strong { display: block; font-size: 1rem; font-weight: 860; letter-spacing: -0.02em; }
.support-cta-body p { margin: 0.18rem 0 0; font-size: 0.76rem; font-weight: 500; color: rgba(255,255,255,0.7); line-height: 1.4; }
.support-cta-arrow { opacity: 0.7; flex-shrink: 0; }

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.site-footer-std {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border-color);
}
[data-theme="dark"] .site-footer-std { border-top-color: var(--border-color); }
.footer-top-std { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem; }
.footer-links-std { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 0.6rem; }
.footer-links-std a { font-size: 0.75rem; font-weight: 500; color: var(--muted); transition: color 0.12s ease; }
.footer-links-std a:hover { color: var(--fg); }
.footer-legal-std a { font-size: 0.72rem; color: var(--muted); opacity: 0.72; }
.footer-sep-std { font-size: 0.68rem; color: var(--muted); opacity: 0.5; user-select: none; }
.footer-copy-std { text-align: center; font-size: 0.72rem; color: var(--muted); opacity: 0.7; line-height: 1.4; }
.heart-std { color: #fb7185; }