/* =========================================================
   Gelatina Calendar · capa visual 2026
   Bienvenida temática, ambiente animado y tres nuevos diseños.
   Se carga después de styles.css para conservar los cuatro
   diseños originales sin reescribir sus reglas.
   ========================================================= */

:root {
  --motion-ease: cubic-bezier(0.22, 0.75, 0.22, 1);
  --welcome-frame: var(--line);
}

/* ---------- Accesibilidad y navegación ---------- */

.skip-link {
  position: fixed;
  top: 12px;
  left: 14px;
  z-index: 200;
  padding: 10px 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transform: translateY(-160%);
  transition: transform 0.2s var(--motion-ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline-offset: 3px;
}

.month-view:focus {
  outline: none;
}

.month-view:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ---------- Ambiente de cada diseño ---------- */

.ambient-layer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient-layer span {
  position: absolute;
  display: block;
  opacity: 0;
}

@keyframes ambientDrift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.92); opacity: 0.18; }
  45% { opacity: 0.62; }
  100% { transform: translate3d(26px, -34px, 0) rotate(28deg) scale(1.08); opacity: 0.16; }
}

@keyframes ambientPulse {
  0%, 100% { transform: scale(0.72); opacity: 0.16; }
  50% { transform: scale(1.28); opacity: 0.78; }
}

@keyframes ambientRise {
  0% { transform: translate3d(0, 24vh, 0) scale(0.75); opacity: 0; }
  12% { opacity: 0.65; }
  82% { opacity: 0.42; }
  100% { transform: translate3d(22px, -72vh, 0) scale(1.15); opacity: 0; }
}

@keyframes ambientSway {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg); opacity: 0.2; }
  50% { transform: translate3d(18px, -14px, 0) rotate(12deg); opacity: 0.52; }
}

@keyframes ambientScan {
  0% { transform: translate3d(0, -12vh, 0); opacity: 0; }
  18% { opacity: 0.46; }
  80% { opacity: 0.2; }
  100% { transform: translate3d(0, 112vh, 0); opacity: 0; }
}

@keyframes ambientLeaf {
  0% { transform: translate3d(-8vw, -12vh, 0) rotate(-25deg); opacity: 0; }
  12% { opacity: 0.46; }
  72% { opacity: 0.34; }
  100% { transform: translate3d(24vw, 112vh, 0) rotate(170deg); opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .ambient-layer {
    display: block;
  }

  :root:not([data-design]) .ambient-layer span:nth-child(1),
  :root:not([data-design]) .ambient-layer span:nth-child(2),
  :root:not([data-design]) .ambient-layer span:nth-child(3) {
    display: block;
    width: 300px;
    height: 300px;
    border-radius: 48% 52% 55% 45%;
    background: radial-gradient(circle at 34% 30%, rgba(255, 157, 137, 0.22), rgba(226, 86, 63, 0.05) 58%, transparent 72%);
    animation: ambientDrift 26s var(--motion-ease) infinite alternate;
  }

  :root:not([data-design]) .ambient-layer span:nth-child(1) {
    top: -70px;
    right: -60px;
  }

  :root:not([data-design]) .ambient-layer span:nth-child(2) {
    bottom: 8%;
    left: -110px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle at 52% 42%, rgba(183, 136, 51, 0.17), rgba(183, 136, 51, 0.04) 56%, transparent 72%);
    animation-delay: -9s;
  }

  :root:not([data-design]) .ambient-layer span:nth-child(3) {
    top: 42%;
    right: 18%;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(95, 128, 105, 0.13), transparent 70%);
    animation-delay: -16s;
  }

  :root[data-design="victoriana"] .ambient-layer span {
    width: 6px;
    height: 6px;
    background: rgba(154, 120, 52, 0.6);
    transform: rotate(45deg);
    animation: ambientDrift 22s var(--motion-ease) infinite alternate;
  }

  :root[data-design="victoriana"] .ambient-layer span:nth-child(1) { top: 12%; left: 7%; animation-delay: -1s; }
  :root[data-design="victoriana"] .ambient-layer span:nth-child(2) { top: 28%; left: 72%; width: 4px; height: 4px; animation-delay: -7s; }
  :root[data-design="victoriana"] .ambient-layer span:nth-child(3) { top: 61%; left: 16%; animation-delay: -11s; }
  :root[data-design="victoriana"] .ambient-layer span:nth-child(4) { top: 78%; left: 84%; width: 5px; height: 5px; animation-delay: -3s; }
  :root[data-design="victoriana"] .ambient-layer span:nth-child(5) { top: 43%; left: 42%; width: 3px; height: 3px; animation-delay: -18s; }
  :root[data-design="victoriana"] .ambient-layer span:nth-child(6) { top: 86%; left: 52%; animation-delay: -13s; }
  :root[data-design="victoriana"] .ambient-layer span:nth-child(7) { top: 9%; left: 38%; width: 4px; height: 4px; animation-delay: -21s; }
  :root[data-design="victoriana"] .ambient-layer span:nth-child(8) { top: 52%; left: 91%; width: 3px; height: 3px; animation-delay: -15s; }
  :root[data-design="victoriana"] .ambient-layer span:nth-child(9) { top: 34%; left: 24%; width: 5px; height: 5px; animation-delay: -5s; }
  :root[data-design="victoriana"] .ambient-layer span:nth-child(10) { top: 70%; left: 62%; width: 4px; height: 4px; animation-delay: -9s; }

  :root[data-design="futurista"] .ambient-layer span {
    width: 2px;
    height: 12vh;
    background: linear-gradient(180deg, transparent, rgba(34, 211, 238, 0.6), transparent);
    animation: ambientScan 14s linear infinite;
  }

  :root[data-design="futurista"] .ambient-layer span:nth-child(1) { left: 8%; animation-delay: -2s; }
  :root[data-design="futurista"] .ambient-layer span:nth-child(2) { left: 24%; animation-delay: -9s; height: 8vh; }
  :root[data-design="futurista"] .ambient-layer span:nth-child(3) { left: 43%; animation-delay: -5s; }
  :root[data-design="futurista"] .ambient-layer span:nth-child(4) { left: 63%; animation-delay: -12s; height: 6vh; }
  :root[data-design="futurista"] .ambient-layer span:nth-child(5) { left: 81%; animation-delay: -7s; }
  :root[data-design="futurista"] .ambient-layer span:nth-child(6) { left: 93%; animation-delay: -15s; height: 9vh; }
  :root[data-design="futurista"] .ambient-layer span:nth-child(7) { left: 34%; animation-delay: -17s; height: 5vh; }
  :root[data-design="futurista"] .ambient-layer span:nth-child(8) { left: 54%; animation-delay: -4s; height: 10vh; }
  :root[data-design="futurista"] .ambient-layer span:nth-child(9) { left: 73%; animation-delay: -19s; height: 5vh; }
  :root[data-design="futurista"] .ambient-layer span:nth-child(10) { left: 16%; animation-delay: -13s; height: 7vh; }

  :root[data-design="ajedrez"] .ambient-layer span {
    width: 9px;
    height: 9px;
    border: 1px solid rgba(166, 127, 54, 0.45);
    background: rgba(31, 77, 58, 0.08);
    animation: ambientDrift 28s var(--motion-ease) infinite alternate;
  }

  :root[data-design="ajedrez"] .ambient-layer span:nth-child(odd) {
    background: rgba(166, 127, 54, 0.16);
  }

  :root[data-design="ajedrez"] .ambient-layer span:nth-child(1) { top: 15%; left: 6%; animation-delay: -2s; }
  :root[data-design="ajedrez"] .ambient-layer span:nth-child(2) { top: 26%; left: 86%; animation-delay: -8s; }
  :root[data-design="ajedrez"] .ambient-layer span:nth-child(3) { top: 48%; left: 12%; animation-delay: -14s; }
  :root[data-design="ajedrez"] .ambient-layer span:nth-child(4) { top: 64%; left: 78%; animation-delay: -5s; }
  :root[data-design="ajedrez"] .ambient-layer span:nth-child(5) { top: 82%; left: 38%; animation-delay: -19s; }
  :root[data-design="ajedrez"] .ambient-layer span:nth-child(6) { top: 8%; left: 58%; animation-delay: -11s; }
  :root[data-design="ajedrez"] .ambient-layer span:nth-child(7) { top: 38%; left: 92%; animation-delay: -22s; }
  :root[data-design="ajedrez"] .ambient-layer span:nth-child(8) { top: 72%; left: 22%; animation-delay: -3s; }
  :root[data-design="ajedrez"] .ambient-layer span:nth-child(9) { top: 53%; left: 58%; animation-delay: -16s; }
  :root[data-design="ajedrez"] .ambient-layer span:nth-child(10) { top: 90%; left: 66%; animation-delay: -9s; }

  :root[data-design="catolica"] .ambient-layer span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 223, 158, 0.95), rgba(207, 158, 76, 0.18) 65%, transparent 75%);
    box-shadow: 0 0 12px rgba(231, 189, 112, 0.5);
    animation: ambientRise 19s linear infinite;
  }

  :root[data-design="catolica"] .ambient-layer span:nth-child(1) { left: 9%; animation-delay: -2s; }
  :root[data-design="catolica"] .ambient-layer span:nth-child(2) { left: 20%; animation-delay: -9s; width: 3px; }
  :root[data-design="catolica"] .ambient-layer span:nth-child(3) { left: 33%; animation-delay: -14s; }
  :root[data-design="catolica"] .ambient-layer span:nth-child(4) { left: 47%; animation-delay: -5s; width: 5px; height: 5px; }
  :root[data-design="catolica"] .ambient-layer span:nth-child(5) { left: 59%; animation-delay: -17s; }
  :root[data-design="catolica"] .ambient-layer span:nth-child(6) { left: 69%; animation-delay: -7s; width: 3px; }
  :root[data-design="catolica"] .ambient-layer span:nth-child(7) { left: 78%; animation-delay: -12s; }
  :root[data-design="catolica"] .ambient-layer span:nth-child(8) { left: 86%; animation-delay: -1s; width: 4px; }
  :root[data-design="catolica"] .ambient-layer span:nth-child(9) { left: 93%; animation-delay: -15s; width: 3px; }
  :root[data-design="catolica"] .ambient-layer span:nth-child(10) { left: 40%; animation-delay: -19s; width: 2px; height: 2px; }

  :root[data-design="catolica"] .ambient-layer::before {
    content: "";
    position: absolute;
    top: -30vh;
    left: 12%;
    width: 60vw;
    height: 90vh;
    background: conic-gradient(from 196deg at 50% 0%, transparent 0deg, rgba(247, 221, 163, 0.09) 10deg, transparent 22deg, rgba(247, 221, 163, 0.06) 31deg, transparent 44deg);
    filter: blur(6px);
    pointer-events: none;
  }

  :root[data-design="mar"] .ambient-layer span {
    width: 9px;
    height: 9px;
    border: 1px solid rgba(145, 231, 233, 0.48);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.5), transparent 42%);
    animation: ambientRise 22s linear infinite;
  }

  :root[data-design="mar"] .ambient-layer span:nth-child(1) { left: 6%; animation-delay: -3s; }
  :root[data-design="mar"] .ambient-layer span:nth-child(2) { left: 16%; animation-delay: -10s; width: 15px; height: 15px; }
  :root[data-design="mar"] .ambient-layer span:nth-child(3) { left: 27%; animation-delay: -16s; width: 5px; height: 5px; }
  :root[data-design="mar"] .ambient-layer span:nth-child(4) { left: 38%; animation-delay: -6s; width: 12px; height: 12px; }
  :root[data-design="mar"] .ambient-layer span:nth-child(5) { left: 49%; animation-delay: -19s; }
  :root[data-design="mar"] .ambient-layer span:nth-child(6) { left: 58%; animation-delay: -1s; width: 4px; height: 4px; }
  :root[data-design="mar"] .ambient-layer span:nth-child(7) { left: 68%; animation-delay: -12s; width: 18px; height: 18px; }
  :root[data-design="mar"] .ambient-layer span:nth-child(8) { left: 79%; animation-delay: -8s; width: 6px; height: 6px; }
  :root[data-design="mar"] .ambient-layer span:nth-child(9) { left: 88%; animation-delay: -21s; width: 11px; height: 11px; }
  :root[data-design="mar"] .ambient-layer span:nth-child(10) { left: 94%; animation-delay: -14s; width: 4px; height: 4px; }

  :root[data-design="mar"] .ambient-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 42% at 72% -12%, rgba(255, 232, 174, 0.16), transparent 65%),
      repeating-radial-gradient(ellipse at 52% 112%, transparent 0 44px, rgba(125, 218, 221, 0.045) 45px 46px);
    pointer-events: none;
  }

  :root[data-design="jungla"] .ambient-layer span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 224, 139, 0.95), rgba(202, 183, 88, 0.12) 62%, transparent 75%);
    box-shadow: 0 0 10px rgba(233, 210, 120, 0.5);
    animation: ambientPulse 5.5s ease-in-out infinite;
  }

  :root[data-design="jungla"] .ambient-layer span:nth-child(1) { top: 18%; left: 8%; animation-delay: -1s; }
  :root[data-design="jungla"] .ambient-layer span:nth-child(2) { top: 37%; left: 76%; animation-delay: -3s; }
  :root[data-design="jungla"] .ambient-layer span:nth-child(3) { top: 62%; left: 19%; width: 4px; height: 4px; animation-delay: -2s; }
  :root[data-design="jungla"] .ambient-layer span:nth-child(4) { top: 78%; left: 84%; animation-delay: -4s; }
  :root[data-design="jungla"] .ambient-layer span:nth-child(5) { top: 49%; left: 52%; width: 3px; height: 3px; animation-delay: -2.6s; }

  :root[data-design="jungla"] .ambient-layer span:nth-child(n + 6) {
    width: 14px;
    height: 8px;
    border-radius: 70% 0 70% 0;
    background: linear-gradient(135deg, rgba(95, 167, 111, 0.5), rgba(31, 83, 51, 0.18));
    box-shadow: none;
    animation: ambientLeaf 28s linear infinite;
  }

  :root[data-design="jungla"] .ambient-layer span:nth-child(6) { left: 4%; animation-delay: -4s; }
  :root[data-design="jungla"] .ambient-layer span:nth-child(7) { left: 30%; animation-delay: -13s; }
  :root[data-design="jungla"] .ambient-layer span:nth-child(8) { left: 55%; animation-delay: -21s; width: 18px; height: 10px; }
  :root[data-design="jungla"] .ambient-layer span:nth-child(9) { left: 72%; animation-delay: -8s; }
  :root[data-design="jungla"] .ambient-layer span:nth-child(10) { left: 90%; animation-delay: -17s; }

  :root[data-design="jungla"] .ambient-layer::before {
    content: "";
    position: absolute;
    top: -24vh;
    right: 4%;
    width: 72vw;
    height: 92vh;
    background: conic-gradient(from 206deg at 70% 0%, transparent 0deg, rgba(248, 225, 154, 0.08) 8deg, transparent 19deg, rgba(248, 225, 154, 0.05) 27deg, transparent 38deg);
    filter: blur(7px);
    pointer-events: none;
  }
}

/* ---------- Microinteracciones generales ---------- */

.day-number,
.event-chip,
.panel,
.star-pill,
.day-flag,
.design-choice,
.month-controls .icon-btn,
.month-controls .stepper {
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
    box-shadow 0.2s ease, transform 0.18s var(--motion-ease);
}

.day-cell:hover .day-number {
  transform: translateY(-1px);
}

.event-chip:hover {
  transform: translateY(-1px);
}

.icon-btn:hover {
  transform: translateY(-1px);
}

.design-choice:hover {
  transform: translateY(-1px);
}

.ambient-layer + .auth-screen .auth-topbar .brand-mark {
  transition: transform 0.3s var(--motion-ease);
}

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

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

@keyframes welcomeVisualIn {
  from { opacity: 0; transform: scale(1.035); }
  to { opacity: 1; transform: scale(1); }
}

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

@keyframes emblemHalo {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.08); opacity: 0.9; }
}

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

@keyframes bubbleFloat {
  0% { transform: translate3d(0, 30px, 0) scale(0.8); opacity: 0; }
  18% { opacity: 0.65; }
  80% { opacity: 0.35; }
  100% { transform: translate3d(10px, -190px, 0) scale(1.1); opacity: 0; }
}

@keyframes leafFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-10deg); opacity: 0.3; }
  50% { transform: translate3d(8px, -16px, 0) rotate(12deg); opacity: 0.55; }
}

@keyframes glassShimmer {
  0%, 100% { opacity: 0.24; transform: scaleY(0.96); }
  50% { opacity: 0.48; transform: scaleY(1.03); }
}

@media (prefers-reduced-motion: no-preference) {
  .calendar-app:not([hidden]) .topbar {
    animation: appFade 0.45s var(--motion-ease) both;
  }

  .calendar-app:not([hidden]) .year-rail {
    animation: appRise 0.55s var(--motion-ease) both;
  }

  .calendar-app:not([hidden]) .calendar-stage {
    animation: appRise 0.55s 0.05s var(--motion-ease) both;
  }

  .calendar-app:not([hidden]) .insights {
    animation: appRise 0.55s 0.1s var(--motion-ease) both;
  }

  .welcome-visual {
    animation: welcomeVisualIn 0.7s var(--motion-ease) both;
  }

  .welcome-content > * {
    animation: welcomeItemIn 0.5s var(--motion-ease) both;
  }

  .welcome-content > *:nth-child(1) { animation-delay: 0.08s; }
  .welcome-content > *:nth-child(2) { animation-delay: 0.13s; }
  .welcome-content > *:nth-child(3) { animation-delay: 0.18s; }
  .welcome-content > *:nth-child(4) { animation-delay: 0.23s; }
  .welcome-content > *:nth-child(5) { animation-delay: 0.28s; }
  .welcome-content > *:nth-child(6) { animation-delay: 0.33s; }
  .welcome-content > *:nth-child(7) { animation-delay: 0.36s; }
  .welcome-content > *:nth-child(8) { animation-delay: 0.39s; }

  .welcome-emblem-ring {
    animation: slowSpin 46s linear infinite;
  }

  .welcome-emblem-wrap::after {
    animation: emblemHalo 6s ease-in-out infinite;
  }
}

/* =========================================================
   Pantalla de bienvenida
   ========================================================= */

.auth-screen {
  background: transparent;
}

.auth-stage {
  width: 100%;
  max-width: 1140px;
  padding: 24px 30px 54px;
}

.welcome-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(310px, 0.86fr) minmax(0, 1.14fr);
  width: min(1040px, 100%);
  min-height: 606px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--welcome-frame);
  border-radius: 34px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: left;
}

.welcome-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.welcome-panel::after {
  content: "";
  display: none;
}

.welcome-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 42px 40px 34px;
  overflow: hidden;
  isolation: isolate;
  color: #fff7ef;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 241, 219, 0.38), transparent 34%),
    radial-gradient(circle at 86% 78%, rgba(107, 31, 23, 0.55), transparent 46%),
    linear-gradient(158deg, #ee7259 0%, #cd4a37 48%, #7a2b21 100%);
}

.welcome-visual > * {
  position: relative;
  z-index: 2;
}

.welcome-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 15% 8%, rgba(255, 255, 255, 0.16), transparent 26%),
    linear-gradient(180deg, transparent 48%, rgba(39, 12, 9, 0.28));
  pointer-events: none;
}

.welcome-visual::after {
  content: "";
  position: absolute;
  right: -116px;
  bottom: -126px;
  z-index: 0;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.035), 0 0 0 66px rgba(255, 255, 255, 0.02);
  pointer-events: none;
}

.welcome-aura {
  position: absolute;
  top: 14%;
  left: 50%;
  z-index: 0;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 248, 238, 0.24), transparent 68%);
  transform: translateX(-50%);
  filter: blur(10px);
  pointer-events: none;
}

.welcome-orb {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.welcome-orb-a {
  top: -66px;
  right: -52px;
  width: 180px;
  height: 180px;
  background: rgba(255, 255, 255, 0.06);
}

.welcome-orb-b {
  bottom: 16%;
  left: -74px;
  width: 150px;
  height: 150px;
  background: rgba(255, 231, 207, 0.07);
}

.welcome-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.welcome-scene span {
  position: absolute;
  display: block;
  border-radius: 44% 56% 58% 42%;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.13);
  animation: ambientDrift 18s var(--motion-ease) infinite alternate;
}

.welcome-scene span:nth-child(1) { top: 17%; right: 18%; width: 44px; height: 40px; animation-delay: -3s; }
.welcome-scene span:nth-child(2) { top: 67%; right: 10%; width: 20px; height: 19px; animation-delay: -8s; opacity: 0.55; }
.welcome-scene span:nth-child(3) { bottom: 12%; right: 28%; width: 28px; height: 26px; animation-delay: -12s; opacity: 0.4; }
.welcome-scene span:nth-child(4) { top: 8%; left: 14%; width: 12px; height: 12px; animation-delay: -6s; opacity: 0.5; }
.welcome-scene span:nth-child(5) { top: 25%; left: 8%; width: 7px; height: 7px; animation-delay: -15s; opacity: 0.35; }

.welcome-emblem-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 142px;
  height: 142px;
  margin: auto;
  flex: none;
}

.welcome-emblem-wrap::after {
  content: "";
  position: absolute;
  inset: -22px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 231, 0.3), transparent 66%);
  pointer-events: none;
}

.welcome-emblem-ring {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(255, 255, 255, 0.46);
  border-radius: 50%;
}

.welcome-emblem {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 45px rgba(36, 10, 7, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.welcome-emblem .icon {
  width: 1em;
  height: 1em;
  color: #fff8f0;
  font-size: 56px;
  stroke-width: 1.25;
  filter: drop-shadow(0 5px 12px rgba(33, 10, 7, 0.25));
}

.welcome-visual-copy {
  display: grid;
  gap: 5px;
  margin-top: auto;
  padding-top: 24px;
}

.welcome-theme-kicker {
  color: rgba(255, 248, 239, 0.6);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.27em;
  line-height: 1.5;
  text-transform: uppercase;
}

.welcome-design-name {
  font-family: var(--font-display);
  font-size: 35px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.welcome-design-tag {
  color: rgba(255, 248, 239, 0.74);
  font-size: 11.5px;
  line-height: 1.55;
}

.welcome-visual-foot {
  display: block;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.17);
  color: rgba(255, 248, 239, 0.46);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.welcome-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 48px 52px 38px;
  background: var(--surface);
}

.welcome-content::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 52px;
  width: 44px;
  height: 2px;
  background: var(--accent);
  opacity: 0.7;
}

.welcome-content .welcome-jelly {
  width: 54px;
  height: 54px;
  margin: 0 0 23px;
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(23, 24, 28, 0.09);
}

.welcome-content .welcome-jelly svg {
  width: 36px;
  height: 36px;
}

.welcome-content .eyebrow {
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 8.5px;
  letter-spacing: 0.22em;
}

.welcome-content h1 {
  max-width: 470px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(43px, 4.2vw, 60px);
  font-weight: 400;
  letter-spacing: -0.036em;
  line-height: 0.96;
}

.welcome-content h1 em {
  color: var(--accent);
  font-weight: 400;
}

.welcome-content .welcome-copy {
  max-width: 432px;
  margin: 17px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.welcome-content .welcome-actions {
  width: 100%;
  max-width: 356px;
  margin: 27px 0 0;
  gap: 10px;
}

.welcome-content .welcome-login,
.welcome-content .welcome-register {
  width: 100%;
}

.welcome-content .welcome-restore {
  align-self: flex-start;
  margin: 15px 0 0;
  color: var(--muted);
  font-size: 9.5px;
}

.welcome-content .welcome-restore:hover {
  color: var(--ink);
}

.welcome-content .welcome-feedback {
  max-width: 356px;
  margin: 13px 0 0;
  text-align: left;
}

.welcome-content .welcome-foot {
  max-width: 380px;
  margin: 24px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  color: var(--muted-soft);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

/* Bienvenida · Victoriano */

:root[data-design="victoriana"] .welcome-panel {
  border-color: #b89354;
  border-radius: 5px;
  box-shadow: inset 0 0 0 6px var(--surface), inset 0 0 0 7px #d4be91, var(--shadow-lg);
}

:root[data-design="victoriana"] .welcome-visual {
  padding: 42px 38px 32px;
  color: #f8ecd7;
  background:
    radial-gradient(circle at 72% 8%, rgba(201, 160, 97, 0.22), transparent 42%),
    radial-gradient(circle at 10% 88%, rgba(122, 47, 41, 0.4), transparent 48%),
    linear-gradient(158deg, #4d211c 0%, #341914 52%, #21110d 100%);
}

:root[data-design="victoriana"] .welcome-visual::before {
  background: none;
}

:root[data-design="victoriana"] .welcome-visual::after {
  content: "";
  position: absolute;
  top: -68px;
  right: -74px;
  left: auto;
  bottom: auto;
  width: 330px;
  height: 330px;
  border: 0;
  border-radius: 0;
  background: var(--gold);
  opacity: 0.25;
  -webkit-mask: url("assets/ornament-victoriana.svg") center / contain no-repeat;
  mask: url("assets/ornament-victoriana.svg") center / contain no-repeat;
  box-shadow: none;
}

:root[data-design="victoriana"] .welcome-orb {
  border-color: rgba(201, 160, 97, 0.22);
  background: rgba(201, 160, 97, 0.06);
}

:root[data-design="victoriana"] .welcome-emblem {
  border-radius: 50%;
  border-color: rgba(226, 196, 137, 0.58);
  background: rgba(33, 17, 13, 0.46);
  box-shadow: inset 0 0 0 5px rgba(201, 160, 97, 0.14), 0 18px 45px rgba(10, 5, 3, 0.45);
}

:root[data-design="victoriana"] .welcome-emblem-ring {
  border: 1px solid rgba(201, 160, 97, 0.5);
  box-shadow: inset 0 0 0 5px rgba(201, 160, 97, 0.13);
}

:root[data-design="victoriana"] .welcome-emblem .icon {
  color: #e2c489;
}

:root[data-design="victoriana"] .welcome-theme-kicker,
:root[data-design="victoriana"] .welcome-design-tag {
  color: rgba(248, 236, 215, 0.72);
}

:root[data-design="victoriana"] .welcome-design-name {
  font-family: "Cinzel", Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.18;
}

:root[data-design="victoriana"] .welcome-visual-copy {
  text-align: center;
}

:root[data-design="victoriana"] .welcome-visual-foot {
  text-align: center;
  border-top-color: rgba(201, 160, 97, 0.24);
}

:root[data-design="victoriana"] .welcome-content {
  background:
    radial-gradient(600px 330px at 110% -10%, rgba(154, 120, 52, 0.09), transparent 65%),
    var(--surface);
}

:root[data-design="victoriana"] .welcome-content h1 {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.1;
}

:root[data-design="victoriana"] .welcome-content h1 em {
  color: var(--accent);
}

:root[data-design="victoriana"] .welcome-content .eyebrow {
  color: var(--gold);
  letter-spacing: 0.25em;
}

:root[data-design="victoriana"] .welcome-content::before {
  background: linear-gradient(90deg, var(--gold), transparent);
}

:root[data-design="victoriana"] .welcome-scene span {
  border-radius: 0;
  background: rgba(201, 160, 97, 0.25);
  border-color: rgba(201, 160, 97, 0.3);
  transform: rotate(45deg);
}

/* Bienvenida · Futurista */

:root[data-design="futurista"] .welcome-panel {
  border-color: rgba(7, 134, 156, 0.42);
  border-radius: 2px;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.14), var(--shadow-lg);
}

:root[data-design="futurista"] .welcome-visual {
  padding: 42px 38px 32px;
  color: #dffbff;
  background:
    linear-gradient(rgba(34, 211, 238, 0.055) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(34, 211, 238, 0.055) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(circle at 70% 10%, rgba(34, 211, 238, 0.24), transparent 44%),
    linear-gradient(155deg, #071e27 0%, #03131a 65%, #020b0f 100%);
}

:root[data-design="futurista"] .welcome-visual::before {
  background:
    repeating-linear-gradient(180deg, transparent 0 6px, rgba(34, 211, 238, 0.035) 7px 8px),
    linear-gradient(180deg, rgba(34, 211, 238, 0.06), transparent 34%);
}

:root[data-design="futurista"] .welcome-visual::after {
  top: 22%;
  right: -90px;
  bottom: auto;
  left: auto;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(34, 211, 238, 0.04), 0 0 0 58px rgba(34, 211, 238, 0.02);
}

:root[data-design="futurista"] .welcome-emblem {
  border-radius: 2px;
  border-color: rgba(34, 211, 238, 0.5);
  background: rgba(4, 26, 34, 0.72);
  box-shadow: inset 0 0 22px rgba(34, 211, 238, 0.14), 0 0 40px rgba(34, 211, 238, 0.12);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

:root[data-design="futurista"] .welcome-emblem-ring {
  border: 1px dashed rgba(34, 211, 238, 0.32);
}

:root[data-design="futurista"] .welcome-emblem .icon {
  color: #75e9f7;
}

:root[data-design="futurista"] .welcome-design-name {
  font-family: "Orbitron", "Segoe UI", sans-serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.09em;
  line-height: 1.25;
  text-transform: uppercase;
}

:root[data-design="futurista"] .welcome-theme-kicker {
  color: rgba(117, 233, 247, 0.68);
  letter-spacing: 0.32em;
}

:root[data-design="futurista"] .welcome-design-tag {
  color: rgba(211, 246, 251, 0.65);
  font-family: "Rajdhani", "Segoe UI", sans-serif;
  letter-spacing: 0.04em;
}

:root[data-design="futurista"] .welcome-visual-foot {
  border-top-color: rgba(34, 211, 238, 0.18);
  color: rgba(117, 233, 247, 0.48);
}

:root[data-design="futurista"] .welcome-scene span {
  border-radius: 0;
  width: 22px;
  height: 2px;
  background: rgba(34, 211, 238, 0.5);
  border: 0;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.4);
}

:root[data-design="futurista"] .welcome-content h1 {
  font-family: "Orbitron", "Segoe UI", sans-serif;
  font-size: clamp(32px, 3.25vw, 45px);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.08;
}

:root[data-design="futurista"] .welcome-content .welcome-jelly {
  border-radius: 2px;
}

:root[data-design="futurista"] .welcome-content .welcome-login,
:root[data-design="futurista"] .welcome-content .welcome-register {
  border-radius: 2px;
}

:root[data-design="futurista"] .welcome-content::before {
  width: 64px;
  height: 1px;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}

:root[data-design="futurista"] .welcome-content::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 24px;
  width: 46px;
  height: 46px;
  border-top: 1px solid rgba(7, 134, 156, 0.36);
  border-right: 1px solid rgba(7, 134, 156, 0.36);
}

/* Bienvenida · Ajedrez */

:root[data-design="ajedrez"] .welcome-panel {
  border-color: #b9a781;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(166, 127, 54, 0.3), var(--shadow-lg);
}

:root[data-design="ajedrez"] .welcome-visual {
  padding: 42px 38px 32px;
  color: #f6efdf;
  background:
    linear-gradient(45deg, rgba(242, 236, 221, 0.055) 25%, transparent 25%, transparent 75%, rgba(242, 236, 221, 0.055) 75%) 0 0 / 84px 84px,
    linear-gradient(45deg, rgba(242, 236, 221, 0.055) 25%, transparent 25%, transparent 75%, rgba(242, 236, 221, 0.055) 75%) 42px 42px / 84px 84px,
    radial-gradient(circle at 74% 10%, rgba(217, 189, 132, 0.2), transparent 46%),
    linear-gradient(155deg, #1d3527 0%, #13251b 55%, #0b1710 100%);
}

:root[data-design="ajedrez"] .welcome-visual::before {
  background: radial-gradient(circle at 20% 90%, rgba(166, 127, 54, 0.12), transparent 40%);
}

:root[data-design="ajedrez"] .welcome-visual::after {
  top: -50px;
  right: -60px;
  bottom: auto;
  left: auto;
  width: 300px;
  height: 300px;
  border: 0;
  border-radius: 0;
  background: var(--gold);
  opacity: 0.22;
  -webkit-mask: url("assets/ornament-ajedrez.svg") center / contain no-repeat;
  mask: url("assets/ornament-ajedrez.svg") center / contain no-repeat;
  box-shadow: none;
}

:root[data-design="ajedrez"] .welcome-emblem-ring {
  border-radius: 4px;
  border: 1px solid rgba(217, 189, 132, 0.48);
  transform: rotate(45deg);
  inset: 8px;
}

:root[data-design="ajedrez"] .welcome-emblem {
  background: rgba(9, 22, 14, 0.5);
  border-color: rgba(217, 189, 132, 0.5);
}

:root[data-design="ajedrez"] .welcome-emblem .icon {
  color: #e3ce9f;
}

:root[data-design="ajedrez"] .welcome-design-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 35px;
  font-style: italic;
  letter-spacing: -0.005em;
}

:root[data-design="ajedrez"] .welcome-visual-copy {
  text-align: center;
}

:root[data-design="ajedrez"] .welcome-visual-foot {
  text-align: center;
  border-top-color: rgba(217, 189, 132, 0.22);
}

:root[data-design="ajedrez"] .welcome-content h1 {
  font-family: "Playfair Display", "Instrument Serif", Georgia, serif;
  font-size: clamp(38px, 3.8vw, 54px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

:root[data-design="ajedrez"] .welcome-content h1 em {
  font-style: italic;
}

:root[data-design="ajedrez"] .welcome-scene span {
  border-radius: 0;
  background: rgba(217, 189, 132, 0.2);
  border-color: rgba(217, 189, 132, 0.24);
}

/* Bienvenida · Luz y fe */

:root[data-design="catolica"] .welcome-panel {
  border-color: var(--gold);
  border-radius: 24px 24px 8px 8px;
  box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px rgba(177, 132, 61, 0.5), var(--shadow-lg);
  --welcome-frame: var(--gold);
}

:root[data-design="catolica"] .welcome-visual {
  color: #fbf1dd;
  background:
    linear-gradient(90deg, rgba(255, 247, 227, 0.055) 1px, transparent 1px) 0 0 / 56px 100%,
    radial-gradient(ellipse at 50% 4%, rgba(249, 217, 148, 0.4), transparent 44%),
    linear-gradient(168deg, #4a2e15 0%, #2a1b0d 52%, #150d06 100%);
}

:root[data-design="catolica"] .welcome-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 224, 166, 0.1), transparent 30%),
    radial-gradient(circle at 50% 36%, rgba(243, 203, 122, 0.12), transparent 46%);
  z-index: 0;
}

:root[data-design="catolica"] .welcome-visual::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 26px;
  bottom: 64px;
  left: 26px;
  z-index: 0;
  width: auto;
  height: auto;
  border: 1px solid rgba(224, 187, 116, 0.26);
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  box-shadow: inset 0 0 38px rgba(243, 203, 122, 0.06);
  pointer-events: none;
}

:root[data-design="catolica"] .welcome-aura {
  background: radial-gradient(circle, rgba(255, 231, 178, 0.35), transparent 66%);
}

:root[data-design="catolica"] .welcome-orb {
  border-color: rgba(224, 187, 116, 0.22);
  background: rgba(243, 203, 122, 0.05);
}

:root[data-design="catolica"] .welcome-emblem-wrap {
  width: 150px;
  height: 150px;
}

:root[data-design="catolica"] .welcome-emblem-ring {
  border: 1px solid rgba(224, 187, 116, 0.45);
  box-shadow: 0 0 0 5px rgba(224, 187, 116, 0.06);
}

:root[data-design="catolica"] .welcome-emblem {
  width: 112px;
  height: 112px;
  border-color: rgba(232, 198, 132, 0.55);
  background: radial-gradient(circle at 50% 30%, rgba(255, 238, 199, 0.18), rgba(78, 47, 19, 0.34));
  box-shadow: inset 0 0 0 6px rgba(223, 185, 113, 0.08), 0 18px 45px rgba(12, 6, 2, 0.45);
}

:root[data-design="catolica"] .welcome-emblem .icon {
  color: #f0d39a;
  font-size: 66px;
}

:root[data-design="catolica"] .welcome-theme-kicker {
  color: rgba(240, 211, 154, 0.72);
  letter-spacing: 0.3em;
}

:root[data-design="catolica"] .welcome-design-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

:root[data-design="catolica"] .welcome-design-tag {
  color: rgba(251, 241, 221, 0.68);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 15px;
}

:root[data-design="catolica"] .welcome-visual-copy {
  text-align: center;
}

:root[data-design="catolica"] .welcome-visual-foot {
  text-align: center;
  border-top-color: rgba(224, 187, 116, 0.22);
  color: rgba(240, 211, 154, 0.44);
}

:root[data-design="catolica"] .welcome-scene span {
  top: auto;
  bottom: 14%;
  width: 14px;
  height: 100px;
  border: 0;
  border-radius: 50% 50% 4px 4px;
  background: linear-gradient(180deg, rgba(255, 226, 160, 0.24), rgba(194, 133, 55, 0.02));
  filter: blur(2px);
  animation: glassShimmer 8s ease-in-out infinite;
}

:root[data-design="catolica"] .welcome-scene span:nth-child(1) { left: 12%; height: 148px; animation-delay: -2s; }
:root[data-design="catolica"] .welcome-scene span:nth-child(2) { left: 27%; height: 104px; animation-delay: -5s; }
:root[data-design="catolica"] .welcome-scene span:nth-child(3) { left: 45%; height: 170px; animation-delay: -1s; }
:root[data-design="catolica"] .welcome-scene span:nth-child(4) { left: 64%; height: 120px; animation-delay: -6s; }
:root[data-design="catolica"] .welcome-scene span:nth-child(5) { left: 82%; height: 140px; animation-delay: -3s; }

:root[data-design="catolica"] .welcome-content {
  background:
    radial-gradient(480px 300px at 100% 0%, rgba(197, 154, 83, 0.08), transparent 62%),
    var(--surface);
}

:root[data-design="catolica"] .welcome-content h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(48px, 4.6vw, 66px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.92;
}

:root[data-design="catolica"] .welcome-content .eyebrow {
  color: var(--gold);
  letter-spacing: 0.27em;
}

:root[data-design="catolica"] .welcome-content .welcome-jelly {
  border-radius: 50% 50% 12px 12px;
}

:root[data-design="catolica"] .welcome-content::before {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

:root[data-design="catolica"] .welcome-content .welcome-login,
:root[data-design="catolica"] .welcome-content .welcome-register {
  border-radius: 8px;
}

/* Bienvenida · Mar Pacífico */

:root[data-design="mar"] .welcome-panel {
  border-color: #acd4d3;
  border-radius: 34px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 38px 100px rgba(4, 52, 64, 0.24);
}

:root[data-design="mar"] .welcome-visual {
  color: #ecfeff;
  background:
    radial-gradient(ellipse at 50% -12%, rgba(209, 251, 249, 0.52), transparent 42%),
    linear-gradient(178deg, #0f8b96 0%, #086374 44%, #043746 72%, #02222c 100%);
}

:root[data-design="mar"] .welcome-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(from 187deg at 50% -8%, rgba(255, 255, 255, 0.055) 0 4deg, transparent 4deg 13deg),
    repeating-radial-gradient(ellipse at 50% 112%, transparent 0 42px, rgba(185, 245, 242, 0.055) 43px 44px);
  -webkit-mask: linear-gradient(180deg, #000 0%, transparent 74%);
  mask: linear-gradient(180deg, #000 0%, transparent 74%);
}

:root[data-design="mar"] .welcome-visual::after {
  content: "";
  position: absolute;
  right: -92px;
  bottom: -120px;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(176, 239, 238, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgba(176, 239, 238, 0.035), 0 0 0 70px rgba(176, 239, 238, 0.02);
}

:root[data-design="mar"] .welcome-aura {
  background: radial-gradient(circle, rgba(205, 250, 250, 0.3), transparent 68%);
}

:root[data-design="mar"] .welcome-orb {
  border-color: rgba(185, 245, 242, 0.18);
  background: rgba(185, 245, 242, 0.045);
}

:root[data-design="mar"] .welcome-emblem {
  border: 2px solid rgba(213, 250, 249, 0.48);
  background: radial-gradient(circle at 42% 30%, rgba(213, 250, 249, 0.27), rgba(5, 51, 66, 0.34));
  box-shadow: inset 0 0 24px rgba(155, 235, 235, 0.14), 0 20px 44px rgba(2, 25, 34, 0.35);
}

:root[data-design="mar"] .welcome-emblem-ring {
  border-color: rgba(213, 250, 249, 0.34);
}

:root[data-design="mar"] .welcome-emblem .icon {
  color: #e4fdff;
}

:root[data-design="mar"] .welcome-design-name {
  font-family: "Marcellus", Georgia, serif;
  font-size: 35px;
  letter-spacing: 0.005em;
}

:root[data-design="mar"] .welcome-theme-kicker {
  color: rgba(228, 253, 255, 0.62);
}

:root[data-design="mar"] .welcome-design-tag {
  color: rgba(228, 253, 255, 0.72);
}

:root[data-design="mar"] .welcome-visual-foot {
  border-top-color: rgba(185, 245, 242, 0.2);
  color: rgba(228, 253, 255, 0.44);
}

:root[data-design="mar"] .welcome-scene span {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(204, 250, 249, 0.5);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: bubbleFloat 9s linear infinite;
}

:root[data-design="mar"] .welcome-scene span:nth-child(1) { left: 18%; top: 58%; width: 16px; height: 16px; animation-delay: -1s; }
:root[data-design="mar"] .welcome-scene span:nth-child(2) { left: 33%; top: 78%; width: 7px; height: 7px; animation-delay: -4s; }
:root[data-design="mar"] .welcome-scene span:nth-child(3) { left: 59%; top: 66%; width: 22px; height: 22px; animation-delay: -7s; }
:root[data-design="mar"] .welcome-scene span:nth-child(4) { left: 74%; top: 82%; width: 6px; height: 6px; animation-delay: -2s; }
:root[data-design="mar"] .welcome-scene span:nth-child(5) { left: 86%; top: 50%; width: 12px; height: 12px; animation-delay: -5s; }

:root[data-design="mar"] .welcome-content {
  background:
    radial-gradient(520px 340px at 108% 0%, rgba(11, 125, 135, 0.07), transparent 62%),
    var(--surface);
}

:root[data-design="mar"] .welcome-content h1 {
  font-family: "Marcellus", Georgia, serif;
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1;
}

:root[data-design="mar"] .welcome-content .welcome-jelly {
  border-radius: 50%;
}

:root[data-design="mar"] .welcome-content .welcome-login,
:root[data-design="mar"] .welcome-content .welcome-register {
  border-radius: 999px;
}

:root[data-design="mar"] .welcome-content .welcome-login {
  background: linear-gradient(140deg, #0b7d87, #075f68);
  border-color: #0b7d87;
  color: #f2ffff;
}

/* Bienvenida · Jungla */

:root[data-design="jungla"] .welcome-panel {
  border-color: #b4c9a9;
  border-radius: 34px 12px 34px 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 38px 100px rgba(9, 43, 24, 0.24);
}

:root[data-design="jungla"] .welcome-visual {
  color: #f2f8e8;
  background:
    radial-gradient(ellipse at 78% -8%, rgba(255, 228, 151, 0.3), transparent 40%),
    radial-gradient(circle at 12% 80%, rgba(43, 117, 66, 0.42), transparent 48%),
    linear-gradient(158deg, #24633e 0%, #123f27 52%, #082112 100%);
}

:root[data-design="jungla"] .welcome-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    conic-gradient(from 204deg at 76% 0%, transparent 0deg, rgba(248, 225, 154, 0.1) 7deg, transparent 17deg, rgba(248, 225, 154, 0.06) 25deg, transparent 35deg),
    radial-gradient(circle at 20% 30%, rgba(126, 196, 139, 0.1), transparent 42%);
}

:root[data-design="jungla"] .welcome-visual::after {
  content: "";
  position: absolute;
  right: -76px;
  bottom: -86px;
  width: 330px;
  height: 330px;
  border: 0;
  border-radius: 0;
  background: #d7e6c1;
  opacity: 0.2;
  -webkit-mask: url("assets/ornament-jungla.svg") center / contain no-repeat;
  mask: url("assets/ornament-jungla.svg") center / contain no-repeat;
  box-shadow: none;
}

:root[data-design="jungla"] .welcome-orb {
  border-color: rgba(203, 235, 190, 0.16);
  background: rgba(103, 179, 117, 0.06);
}

:root[data-design="jungla"] .welcome-emblem-ring {
  border-color: rgba(213, 235, 190, 0.4);
}

:root[data-design="jungla"] .welcome-emblem {
  border-color: rgba(222, 241, 200, 0.38);
  border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%;
  background: rgba(7, 32, 17, 0.4);
  box-shadow: inset 0 0 26px rgba(166, 216, 147, 0.11), 0 20px 44px rgba(3, 18, 8, 0.4);
}

:root[data-design="jungla"] .welcome-emblem .icon {
  color: #e9f6d8;
}

:root[data-design="jungla"] .welcome-design-name {
  font-family: "Fraunces", "Instrument Serif", Georgia, serif;
  font-size: 37px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

:root[data-design="jungla"] .welcome-theme-kicker {
  color: rgba(232, 244, 216, 0.58);
}

:root[data-design="jungla"] .welcome-design-tag {
  color: rgba(232, 244, 216, 0.72);
}

:root[data-design="jungla"] .welcome-visual-foot {
  border-top-color: rgba(203, 235, 190, 0.18);
  color: rgba(232, 244, 216, 0.42);
}

:root[data-design="jungla"] .welcome-scene span {
  width: 16px;
  height: 9px;
  border: 0;
  border-radius: 72% 0 72% 0;
  background: linear-gradient(135deg, rgba(189, 230, 170, 0.55), rgba(80, 148, 96, 0.12));
  animation: leafFloat 7s ease-in-out infinite;
}

:root[data-design="jungla"] .welcome-scene span:nth-child(1) { left: 12%; top: 20%; animation-delay: -1s; }
:root[data-design="jungla"] .welcome-scene span:nth-child(2) { left: 78%; top: 34%; width: 20px; height: 11px; animation-delay: -3s; }
:root[data-design="jungla"] .welcome-scene span:nth-child(3) { left: 24%; top: 70%; animation-delay: -5s; }
:root[data-design="jungla"] .welcome-scene span:nth-child(4) { left: 68%; top: 82%; width: 12px; height: 7px; animation-delay: -2s; }
:root[data-design="jungla"] .welcome-scene span:nth-child(5) {
  left: 50%;
  top: 16%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f4e6a0;
  box-shadow: 0 0 12px rgba(244, 230, 160, 0.8);
  animation: ambientPulse 4s ease-in-out infinite;
}

:root[data-design="jungla"] .welcome-content {
  background:
    radial-gradient(540px 360px at 105% 0%, rgba(201, 154, 55, 0.07), transparent 62%),
    var(--surface);
}

:root[data-design="jungla"] .welcome-content h1 {
  font-family: "Fraunces", "Instrument Serif", Georgia, serif;
  font-size: clamp(42px, 4.2vw, 58px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.98;
}

:root[data-design="jungla"] .welcome-content .welcome-jelly {
  border-radius: 18px 6px 18px 6px;
}

:root[data-design="jungla"] .welcome-content .welcome-login,
:root[data-design="jungla"] .welcome-content .welcome-register {
  border-radius: 14px;
}

:root[data-design="jungla"] .welcome-content .welcome-login {
  background: linear-gradient(145deg, #176543, #0f4d32);
  border-color: #176543;
  color: #f4fbf0;
}

/* =========================================================
   Diseño 5 · Luz y fe (católica)
   ========================================================= */

:root[data-design="catolica"] {
  --bg: #f3ead9;
  --bg-deep: #e9dcc4;
  --surface: #fdf8ee;
  --surface-2: #f7efe0;
  --surface-alt: #f6ecdb;
  --surface-other: #eadfcb;
  --hover-bg: #f6ecdb;
  --today-bg: #f6e7cf;
  --field-bg: #fbf5e9;
  --ink: #2b1e14;
  --ink-soft: #4b3828;
  --muted: #80705c;
  --muted-soft: #ad9c85;
  --line: #ded0b8;
  --line-strong: #c8b28c;
  --accent: #8a5a24;
  --accent-strong: #6d4417;
  --accent-soft: #f2e3c8;
  --gold: #b1843d;
  --gold-soft: #f4e7ca;
  --positive: #5d7458;
  --positive-soft: #edf0e2;
  --danger: #9a3e2c;
  --font-ui: "Lora", Georgia, serif;
  --font-display: "Cormorant Garamond", "Cinzel", Georgia, serif;
  --radius-xl: 14px;
  --radius-lg: 10px;
  --radius-md: 7px;
  --radius-sm: 4px;
  --shadow-sm: 0 1px 0 rgba(91, 63, 31, 0.06), 0 16px 34px rgba(91, 63, 31, 0.08);
  --shadow-lg: 0 34px 96px rgba(43, 28, 14, 0.42);
  --topbar-bg: rgba(243, 234, 217, 0.9);
  --mobile-bg: rgba(243, 234, 217, 0.96);
  --today-grad-a: #5d3c1f;
  --today-grad-b: #24160b;
  --brand-bg: #2b1d11;
  --brand-jelly: #e0b66c;
  --brand-shine: #fff3dc;
}

:root[data-design="catolica"] .page-wash {
  background:
    radial-gradient(900px 540px at 88% -10%, rgba(177, 132, 61, 0.2), transparent 62%),
    radial-gradient(760px 500px at -8% 15%, rgba(122, 71, 34, 0.1), transparent 64%),
    radial-gradient(620px 440px at 52% 108%, rgba(197, 166, 106, 0.08), transparent 66%),
    repeating-linear-gradient(90deg, rgba(137, 98, 44, 0.022) 0 1px, transparent 1px 64px);
}

:root[data-design="catolica"] .page-wash::before,
:root[data-design="catolica"] .page-wash::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-color: var(--gold);
  -webkit-mask: url("assets/ornament-catolica.svg") center / contain no-repeat;
  mask: url("assets/ornament-catolica.svg") center / contain no-repeat;
}

:root[data-design="catolica"] .page-wash::before {
  top: -74px;
  right: -60px;
  width: min(430px, 42vw);
  aspect-ratio: 1;
  opacity: 0.32;
}

:root[data-design="catolica"] .page-wash::after {
  bottom: -70px;
  left: -50px;
  width: min(340px, 34vw);
  aspect-ratio: 1;
  opacity: 0.18;
}

:root[data-design="catolica"] .brand-name {
  font-family: var(--font-display);
  font-size: 31px;
  font-weight: 600;
  letter-spacing: 0.005em;
}

:root[data-design="catolica"] .brand-sub {
  color: var(--gold);
  letter-spacing: 0.26em;
}

:root[data-design="catolica"] .eyebrow {
  color: var(--gold);
  letter-spacing: 0.24em;
}

:root[data-design="catolica"] .month-title-line h1 {
  font-size: clamp(46px, 4.6vw, 68px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

:root[data-design="catolica"] .month-year {
  border-color: var(--gold);
  background: var(--surface);
  color: var(--gold);
  letter-spacing: 0.18em;
}

:root[data-design="catolica"] .btn-primary {
  border-color: #a87a3c;
  background: linear-gradient(150deg, #936329, #6d4417);
  color: #fff8ec;
  box-shadow: 0 8px 20px rgba(90, 55, 20, 0.24), inset 0 1px 0 rgba(255, 244, 220, 0.22);
}

:root[data-design="catolica"] .btn-primary:hover {
  border-color: #c2934f;
  background: linear-gradient(150deg, #a77334, #7a4d1c);
  box-shadow: 0 11px 26px rgba(90, 55, 20, 0.3);
}

:root[data-design="catolica"] .icon-btn {
  border-radius: 7px;
}

:root[data-design="catolica"] .calendar-card {
  position: relative;
  border-color: var(--line-strong);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(177, 132, 61, 0.2), 0 18px 42px rgba(91, 63, 31, 0.09);
}

:root[data-design="catolica"] .calendar-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 2;
  border: 1px solid rgba(177, 132, 61, 0.18);
  border-radius: 9px;
  pointer-events: none;
}

:root[data-design="catolica"] .weekdays {
  border-bottom-color: var(--line-strong);
  background: var(--surface-alt);
}

:root[data-design="catolica"] .weekdays span {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
}

:root[data-design="catolica"] .weekdays span:nth-child(6),
:root[data-design="catolica"] .weekdays span:nth-child(7) {
  color: var(--accent);
}

:root[data-design="catolica"] .day-number {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
}

:root[data-design="catolica"] .day-cell.is-today .day-number {
  background: var(--accent);
  box-shadow: 0 2px 0 var(--gold);
}

:root[data-design="catolica"] .event-chip {
  border: 1px solid rgba(177, 132, 61, 0.18);
  border-radius: 4px;
}

:root[data-design="catolica"] .chip-dot {
  transform: rotate(45deg);
}

:root[data-design="catolica"] .today-card {
  border: 1px solid var(--gold);
  border-radius: 12px;
  background:
    radial-gradient(circle at 72% 0%, rgba(240, 211, 154, 0.16), transparent 46%),
    linear-gradient(150deg, var(--today-grad-a), var(--today-grad-b));
  box-shadow: inset 0 0 0 4px rgba(201, 160, 97, 0.12), 0 20px 44px rgba(43, 28, 14, 0.24);
}

:root[data-design="catolica"] .today-card::before {
  content: "";
  position: absolute;
  top: -48px;
  left: 50%;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(224, 187, 116, 0.2);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 18px rgba(224, 187, 116, 0.04);
  pointer-events: none;
}

:root[data-design="catolica"] .panel,
:root[data-design="catolica"] .year-rail {
  border-color: var(--line-strong);
  border-radius: 10px;
}

:root[data-design="catolica"] .event-modal,
:root[data-design="catolica"] .profile-modal,
:root[data-design="catolica"] .share-modal {
  border: 1px solid var(--gold);
  border-radius: 16px;
  box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px rgba(177, 132, 61, 0.24), var(--shadow-lg);
}

:root[data-design="catolica"] .text-input,
:root[data-design="catolica"] .switch-line,
:root[data-design="catolica"] .cat-option,
:root[data-design="catolica"] .reminder-option span,
:root[data-design="catolica"] .day-event {
  background: var(--field-bg);
}

:root[data-design="catolica"] .text-input,
:root[data-design="catolica"] .weekday-options span,
:root[data-design="catolica"] .share-scope-btn {
  border-radius: 6px;
}

:root[data-design="catolica"] .toast {
  border-color: var(--gold);
  background: #2b1c11;
  color: #fbf1dd;
}

:root[data-design="catolica"] .auth-flow-card {
  border-color: var(--gold);
  border-radius: 18px;
  box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px rgba(177, 132, 61, 0.24), var(--shadow-lg);
}

/* =========================================================
   Diseño 6 · Mar Pacífico
   ========================================================= */

:root[data-design="mar"] {
  --bg: #e7f2f1;
  --bg-deep: #d8e9e8;
  --surface: #f7fdfc;
  --surface-2: #eef8f7;
  --surface-alt: #e9f6f5;
  --surface-other: #dcecea;
  --hover-bg: #e9f7f6;
  --today-bg: #d9f2f1;
  --field-bg: #f1fbfa;
  --ink: #0b2f38;
  --ink-soft: #1e4a54;
  --muted: #5e7d85;
  --muted-soft: #94afb4;
  --line: #cde2e1;
  --line-strong: #aacac9;
  --accent: #0b7d87;
  --accent-strong: #075f68;
  --accent-soft: #d5f0ef;
  --gold: #c98f4d;
  --gold-soft: #f7ead8;
  --positive: #4f8a6d;
  --positive-soft: #e2f2ea;
  --danger: #b6483b;
  --font-ui: "Manrope", "Segoe UI", sans-serif;
  --font-display: "Marcellus", Georgia, serif;
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 0 rgba(5, 67, 78, 0.04), 0 18px 38px rgba(7, 84, 96, 0.1);
  --shadow-lg: 0 34px 96px rgba(3, 49, 60, 0.34);
  --topbar-bg: rgba(231, 242, 241, 0.88);
  --mobile-bg: rgba(231, 242, 241, 0.96);
  --today-grad-a: #0a4a57;
  --today-grad-b: #03181f;
  --brand-bg: #062b34;
  --brand-jelly: #72dfe2;
  --brand-shine: #e1feff;
}

:root[data-design="mar"] .page-wash {
  background:
    radial-gradient(1100px 620px at 84% -18%, rgba(94, 211, 213, 0.26), transparent 62%),
    radial-gradient(860px 520px at -6% 14%, rgba(7, 125, 135, 0.1), transparent 64%),
    repeating-radial-gradient(ellipse at 54% 118%, transparent 0 42px, rgba(11, 125, 135, 0.045) 43px 44px);
}

:root[data-design="mar"] .page-wash::before,
:root[data-design="mar"] .page-wash::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-color: var(--accent);
  -webkit-mask: url("assets/ornament-mar.svg") center / contain no-repeat;
  mask: url("assets/ornament-mar.svg") center / contain no-repeat;
}

:root[data-design="mar"] .page-wash::before {
  top: -76px;
  right: -58px;
  width: min(430px, 42vw);
  aspect-ratio: 1;
  opacity: 0.2;
  transform: scaleX(-1);
}

:root[data-design="mar"] .page-wash::after {
  bottom: -82px;
  left: -52px;
  width: min(370px, 36vw);
  aspect-ratio: 1;
  opacity: 0.13;
}

:root[data-design="mar"] .brand-name {
  font-family: var(--font-display);
  font-size: 29px;
  letter-spacing: 0.005em;
}

:root[data-design="mar"] .brand-sub {
  color: var(--accent);
  letter-spacing: 0.28em;
}

:root[data-design="mar"] .eyebrow {
  color: var(--accent-strong);
  letter-spacing: 0.23em;
}

:root[data-design="mar"] .month-title-line h1 {
  font-size: clamp(46px, 4.5vw, 66px);
  font-weight: 400;
  letter-spacing: -0.015em;
}

:root[data-design="mar"] .month-year {
  border-color: var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-strong);
  letter-spacing: 0.14em;
}

:root[data-design="mar"] .btn-primary {
  border-color: var(--accent);
  background: linear-gradient(145deg, #0b8b95, #075f68);
  color: #f2ffff;
  box-shadow: 0 10px 24px rgba(5, 84, 96, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

:root[data-design="mar"] .btn-primary:hover {
  border-color: var(--accent-strong);
  background: linear-gradient(145deg, #0a7c86, #064e57);
  box-shadow: 0 13px 30px rgba(5, 84, 96, 0.3);
}

:root[data-design="mar"] .btn,
:root[data-design="mar"] .month-year,
:root[data-design="mar"] .star-pill,
:root[data-design="mar"] .day-flag {
  border-radius: 999px;
}

:root[data-design="mar"] .icon-btn {
  border-radius: 50%;
}

:root[data-design="mar"] .calendar-card {
  position: relative;
  border-color: var(--line-strong);
  border-radius: 26px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 22px 48px rgba(7, 84, 96, 0.1);
}

:root[data-design="mar"] .calendar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
  pointer-events: none;
}

:root[data-design="mar"] .weekdays {
  border-bottom-color: var(--line-strong);
  background: var(--surface-alt);
}

:root[data-design="mar"] .weekdays span {
  color: var(--accent-strong);
  letter-spacing: 0.16em;
}

:root[data-design="mar"] .weekdays span:nth-child(6),
:root[data-design="mar"] .weekdays span:nth-child(7) {
  color: #48828a;
}

:root[data-design="mar"] .day-cell:hover {
  background: var(--hover-bg);
  box-shadow: inset 0 0 0 1px rgba(11, 125, 135, 0.12);
}

:root[data-design="mar"] .day-number {
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 12px;
}

:root[data-design="mar"] .day-cell.is-today .day-number {
  background: var(--accent);
  box-shadow: 0 4px 12px rgba(11, 125, 135, 0.3);
}

:root[data-design="mar"] .event-chip {
  border: 1px solid rgba(11, 125, 135, 0.12);
  border-radius: 8px;
}

:root[data-design="mar"] .event-chip:hover {
  border-color: rgba(11, 125, 135, 0.3);
  box-shadow: 0 4px 12px rgba(7, 84, 96, 0.08);
}

:root[data-design="mar"] .today-card {
  border: 1px solid rgba(186, 236, 235, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 80% -6%, rgba(255, 221, 159, 0.24), transparent 46%),
    linear-gradient(160deg, #0d6c7b 0%, var(--today-grad-a) 48%, var(--today-grad-b) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 22px 48px rgba(3, 49, 60, 0.26);
}

:root[data-design="mar"] .today-card::before {
  content: "";
  position: absolute;
  left: -40px;
  bottom: -70px;
  width: 260px;
  height: 160px;
  border: 1px solid rgba(172, 240, 240, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(172, 240, 240, 0.035), 0 0 0 38px rgba(172, 240, 240, 0.02);
  pointer-events: none;
}

:root[data-design="mar"] .panel,
:root[data-design="mar"] .year-rail {
  border-color: var(--line-strong);
  border-radius: 22px;
}

:root[data-design="mar"] .event-modal,
:root[data-design="mar"] .profile-modal,
:root[data-design="mar"] .share-modal,
:root[data-design="mar"] .auth-flow-card {
  border-color: var(--line-strong);
  border-radius: 26px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--shadow-lg);
}

:root[data-design="mar"] .text-input,
:root[data-design="mar"] .switch-line,
:root[data-design="mar"] .cat-option,
:root[data-design="mar"] .reminder-option span,
:root[data-design="mar"] .day-event {
  background: var(--field-bg);
}

:root[data-design="mar"] .text-input,
:root[data-design="mar"] .weekday-options span,
:root[data-design="mar"] .share-scope,
:root[data-design="mar"] .share-scope-btn,
:root[data-design="mar"] .series-option span {
  border-radius: 12px;
}

:root[data-design="mar"] .toast {
  border-color: rgba(94, 211, 213, 0.24);
  border-radius: 999px;
  background: #062b34;
  color: #e6fdfd;
}

/* =========================================================
   Diseño 7 · Jungla
   ========================================================= */

:root[data-design="jungla"] {
  --bg: #edf3e5;
  --bg-deep: #e2ecd8;
  --surface: #fbfdf7;
  --surface-2: #f3f8ed;
  --surface-alt: #f0f6e8;
  --surface-other: #e3ecdb;
  --hover-bg: #f1f7e9;
  --today-bg: #e4f1d9;
  --field-bg: #f7fbf1;
  --ink: #13251a;
  --ink-soft: #2f4b36;
  --muted: #67806c;
  --muted-soft: #9caf9d;
  --line: #d5e1cb;
  --line-strong: #b9cba9;
  --accent: #176543;
  --accent-strong: #0f4d32;
  --accent-soft: #dcedde;
  --gold: #c99a37;
  --gold-soft: #f5eac9;
  --positive: #4d8658;
  --positive-soft: #e5f1e3;
  --danger: #a3432f;
  --font-ui: "Manrope", "Segoe UI", sans-serif;
  --font-display: "Fraunces", "Instrument Serif", Georgia, serif;
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 0 rgba(19, 56, 33, 0.04), 0 18px 38px rgba(19, 56, 33, 0.09);
  --shadow-lg: 0 34px 96px rgba(9, 43, 24, 0.36);
  --topbar-bg: rgba(237, 243, 229, 0.88);
  --mobile-bg: rgba(237, 243, 229, 0.96);
  --today-grad-a: #1b4a2d;
  --today-grad-b: #06150d;
  --brand-bg: #0c2c1b;
  --brand-jelly: #9ce6ab;
  --brand-shine: #ecffed;
}

:root[data-design="jungla"] .page-wash {
  background:
    radial-gradient(980px 560px at 88% -12%, rgba(201, 154, 55, 0.16), transparent 60%),
    radial-gradient(860px 540px at -8% 16%, rgba(23, 101, 67, 0.11), transparent 64%),
    radial-gradient(680px 480px at 50% 112%, rgba(89, 142, 92, 0.08), transparent 66%),
    repeating-linear-gradient(118deg, rgba(46, 94, 56, 0.018) 0 1px, transparent 1px 12px);
}

:root[data-design="jungla"] .page-wash::before,
:root[data-design="jungla"] .page-wash::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-color: var(--accent);
  -webkit-mask: url("assets/ornament-jungla.svg") center / contain no-repeat;
  mask: url("assets/ornament-jungla.svg") center / contain no-repeat;
}

:root[data-design="jungla"] .page-wash::before {
  top: -70px;
  right: -62px;
  width: min(450px, 44vw);
  aspect-ratio: 1;
  opacity: 0.18;
}

:root[data-design="jungla"] .page-wash::after {
  bottom: -92px;
  left: -58px;
  width: min(390px, 38vw);
  aspect-ratio: 1;
  opacity: 0.12;
  transform: scaleX(-1);
}

:root[data-design="jungla"] .brand-name {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

:root[data-design="jungla"] .brand-sub {
  color: var(--gold);
  letter-spacing: 0.25em;
}

:root[data-design="jungla"] .eyebrow {
  color: var(--accent-strong);
  letter-spacing: 0.22em;
}

:root[data-design="jungla"] .month-title-line h1 {
  font-size: clamp(45px, 4.4vw, 64px);
  font-weight: 500;
  letter-spacing: -0.03em;
}

:root[data-design="jungla"] .month-year {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--accent-strong);
  letter-spacing: 0.14em;
}

:root[data-design="jungla"] .btn-primary {
  border-color: var(--accent);
  background: linear-gradient(145deg, #1e744e, #0f4d32);
  color: #f3fbf0;
  box-shadow: 0 10px 24px rgba(15, 77, 50, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

:root[data-design="jungla"] .btn-primary:hover {
  border-color: #2a8359;
  background: linear-gradient(145deg, #25855b, #0c442b);
  box-shadow: 0 13px 30px rgba(15, 77, 50, 0.28);
}

:root[data-design="jungla"] .calendar-card {
  position: relative;
  border-color: var(--line-strong);
  border-radius: 26px 12px 26px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 22px 48px rgba(19, 56, 33, 0.09);
}

:root[data-design="jungla"] .calendar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

:root[data-design="jungla"] .weekdays {
  border-bottom-color: var(--line-strong);
  background: var(--surface-alt);
}

:root[data-design="jungla"] .weekdays span {
  color: var(--accent-strong);
  letter-spacing: 0.16em;
}

:root[data-design="jungla"] .weekdays span:nth-child(6),
:root[data-design="jungla"] .weekdays span:nth-child(7) {
  color: var(--gold);
}

:root[data-design="jungla"] .day-number {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
}

:root[data-design="jungla"] .day-cell.is-today .day-number {
  background: var(--accent);
  box-shadow: 0 3px 0 var(--gold);
}

:root[data-design="jungla"] .event-chip {
  border: 1px solid rgba(23, 101, 67, 0.12);
  border-radius: 10px;
}

:root[data-design="jungla"] .event-chip:hover {
  border-color: rgba(23, 101, 67, 0.3);
  box-shadow: 0 4px 12px rgba(19, 56, 33, 0.08);
}

:root[data-design="jungla"] .today-card {
  border: 1px solid rgba(173, 213, 155, 0.16);
  border-radius: 24px 10px 24px 10px;
  background:
    conic-gradient(from 206deg at 80% 0%, rgba(247, 225, 155, 0.11) 0 9deg, transparent 10deg 30deg),
    radial-gradient(circle at 18% 0%, rgba(115, 182, 122, 0.18), transparent 42%),
    linear-gradient(155deg, #1e5635 0%, var(--today-grad-a) 44%, var(--today-grad-b) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 22px 48px rgba(9, 43, 24, 0.26);
}

:root[data-design="jungla"] .today-card::before {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -50px;
  width: 200px;
  height: 200px;
  background: #c8e4bd;
  opacity: 0.12;
  -webkit-mask: url("assets/ornament-jungla.svg") center / contain no-repeat;
  mask: url("assets/ornament-jungla.svg") center / contain no-repeat;
  pointer-events: none;
}

:root[data-design="jungla"] .panel,
:root[data-design="jungla"] .year-rail {
  border-color: var(--line-strong);
  border-radius: 22px;
}

:root[data-design="jungla"] .event-modal,
:root[data-design="jungla"] .profile-modal,
:root[data-design="jungla"] .share-modal,
:root[data-design="jungla"] .auth-flow-card {
  border-color: var(--line-strong);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--shadow-lg);
}

:root[data-design="jungla"] .text-input,
:root[data-design="jungla"] .switch-line,
:root[data-design="jungla"] .cat-option,
:root[data-design="jungla"] .reminder-option span,
:root[data-design="jungla"] .day-event {
  background: var(--field-bg);
}

:root[data-design="jungla"] .text-input,
:root[data-design="jungla"] .weekday-options span,
:root[data-design="jungla"] .share-scope,
:root[data-design="jungla"] .share-scope-btn,
:root[data-design="jungla"] .series-option span {
  border-radius: 12px;
}

:root[data-design="jungla"] .toast {
  border-color: rgba(173, 213, 155, 0.22);
  background: #0d2a19;
  color: #eef7e9;
}

/* ---------- Variantes oscuras de los nuevos diseños ---------- */

:root[data-design="catolica"][data-theme="dark"] {
  --bg: #15100b;
  --bg-deep: #0e0a07;
  --surface: #1f1710;
  --surface-2: #271d14;
  --surface-alt: #231a12;
  --surface-other: #2d2218;
  --hover-bg: #2a2016;
  --today-bg: #2b2013;
  --field-bg: #241a12;
  --ink: #f6ecdb;
  --ink-soft: #e2d2bb;
  --muted: #b8a78f;
  --muted-soft: #8d7b64;
  --line: #3b2d1f;
  --line-strong: #57432c;
  --accent: #d9b06b;
  --accent-strong: #e8c88b;
  --accent-soft: #3a2b18;
  --gold: #d8ac61;
  --gold-soft: #332716;
  --positive: #9fbf9a;
  --positive-soft: #23301e;
  --danger: #ff9d86;
  --topbar-bg: rgba(21, 16, 11, 0.9);
  --mobile-bg: rgba(21, 16, 11, 0.96);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 38px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 34px 100px rgba(0, 0, 0, 0.66);
  --today-grad-a: #4a3218;
  --today-grad-b: #120b06;
  --brand-bg: #f1ddba;
  --brand-jelly: #4b3115;
  --brand-shine: #fff8ec;
}

:root[data-design="catolica"][data-theme="dark"] .page-wash {
  background:
    radial-gradient(920px 560px at 86% -10%, rgba(217, 176, 107, 0.12), transparent 62%),
    radial-gradient(760px 500px at -8% 16%, rgba(136, 93, 43, 0.12), transparent 64%),
    repeating-linear-gradient(90deg, rgba(226, 200, 155, 0.018) 0 1px, transparent 1px 64px);
}

:root[data-design="catolica"][data-theme="dark"] .btn-primary {
  border-color: #d9b06b;
  background: linear-gradient(150deg, #e2bd7d, #c29752);
  color: #241608;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

:root[data-design="catolica"][data-theme="dark"] .btn-primary:hover {
  border-color: #f0d49e;
  background: linear-gradient(150deg, #edcd93, #cea65f);
}

:root[data-design="catolica"][data-theme="dark"] .calendar-card {
  box-shadow: inset 0 0 0 1px rgba(217, 176, 107, 0.16), 0 20px 48px rgba(0, 0, 0, 0.34);
}

:root[data-design="catolica"][data-theme="dark"] .calendar-card::before {
  border-color: rgba(217, 176, 107, 0.14);
}

:root[data-design="catolica"][data-theme="dark"] .today-card {
  box-shadow: inset 0 0 0 4px rgba(217, 176, 107, 0.1), 0 20px 44px rgba(0, 0, 0, 0.4);
}

:root[data-design="mar"][data-theme="dark"] {
  --bg: #041a22;
  --bg-deep: #031219;
  --surface: #08242e;
  --surface-2: #0c2e39;
  --surface-alt: #0a2933;
  --surface-other: #103643;
  --hover-bg: #0d3340;
  --today-bg: #0d3a44;
  --field-bg: #0a2a34;
  --ink: #e9f8f9;
  --ink-soft: #c4e3e6;
  --muted: #8fb6bd;
  --muted-soft: #628b94;
  --line: #16414b;
  --line-strong: #235c68;
  --accent: #5fd7dc;
  --accent-strong: #8ae8ec;
  --accent-soft: #0b3a42;
  --gold: #e7b878;
  --gold-soft: #2d2418;
  --positive: #8dd3b0;
  --positive-soft: #102e25;
  --danger: #ff9f90;
  --topbar-bg: rgba(4, 26, 34, 0.9);
  --mobile-bg: rgba(4, 26, 34, 0.96);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32), 0 18px 38px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 34px 100px rgba(0, 0, 0, 0.68);
  --today-grad-a: #0a4a57;
  --today-grad-b: #03181f;
  --brand-bg: #c7fbfc;
  --brand-jelly: #063640;
  --brand-shine: #ffffff;
}

:root[data-design="mar"][data-theme="dark"] .page-wash {
  background:
    radial-gradient(1100px 620px at 84% -18%, rgba(95, 219, 221, 0.14), transparent 62%),
    radial-gradient(860px 520px at -6% 14%, rgba(20, 127, 137, 0.12), transparent 64%),
    repeating-radial-gradient(ellipse at 54% 118%, transparent 0 42px, rgba(95, 219, 221, 0.03) 43px 44px);
}

:root[data-design="mar"][data-theme="dark"] .btn-primary {
  border-color: #5fd7dc;
  background: linear-gradient(145deg, #6ce2e6, #37b8c1);
  color: #04252a;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}

:root[data-design="mar"][data-theme="dark"] .btn-primary:hover {
  border-color: #9af0f3;
  background: linear-gradient(145deg, #8aebee, #48cbd2);
}

:root[data-design="mar"][data-theme="dark"] .calendar-card,
:root[data-design="mar"][data-theme="dark"] .event-modal,
:root[data-design="mar"][data-theme="dark"] .profile-modal,
:root[data-design="mar"][data-theme="dark"] .share-modal,
:root[data-design="mar"][data-theme="dark"] .auth-flow-card {
  box-shadow: inset 0 1px 0 rgba(151, 235, 237, 0.08), var(--shadow-lg);
}

:root[data-design="mar"][data-theme="dark"] .toast {
  border-color: rgba(95, 215, 220, 0.24);
  background: #0a313b;
}

:root[data-design="jungla"][data-theme="dark"] {
  --bg: #07160f;
  --bg-deep: #040f0a;
  --surface: #0c2216;
  --surface-2: #112b1c;
  --surface-alt: #0f2718;
  --surface-other: #173522;
  --hover-bg: #133020;
  --today-bg: #193b25;
  --field-bg: #102719;
  --ink: #eef7e8;
  --ink-soft: #d1e5c9;
  --muted: #98b599;
  --muted-soft: #6d8a70;
  --line: #23402b;
  --line-strong: #365b40;
  --accent: #7ad197;
  --accent-strong: #a3e6b9;
  --accent-soft: #173a25;
  --gold: #e1b866;
  --gold-soft: #332a17;
  --positive: #8ed3a0;
  --positive-soft: #153321;
  --danger: #ff9a82;
  --topbar-bg: rgba(7, 22, 15, 0.9);
  --mobile-bg: rgba(7, 22, 15, 0.96);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32), 0 18px 38px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 34px 100px rgba(0, 0, 0, 0.68);
  --today-grad-a: #1b4a2d;
  --today-grad-b: #06150d;
  --brand-bg: #d5f5d9;
  --brand-jelly: #0d2f19;
  --brand-shine: #ffffff;
}

:root[data-design="jungla"][data-theme="dark"] .page-wash {
  background:
    radial-gradient(980px 560px at 88% -12%, rgba(225, 184, 102, 0.1), transparent 60%),
    radial-gradient(860px 540px at -8% 16%, rgba(122, 209, 151, 0.1), transparent 64%),
    repeating-linear-gradient(118deg, rgba(122, 209, 151, 0.014) 0 1px, transparent 1px 12px);
}

:root[data-design="jungla"][data-theme="dark"] .btn-primary {
  border-color: #7ad197;
  background: linear-gradient(145deg, #8ade9f, #56b876);
  color: #072414;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}

:root[data-design="jungla"][data-theme="dark"] .btn-primary:hover {
  border-color: #a8ecb9;
  background: linear-gradient(145deg, #a3e7b2, #68c987);
}

:root[data-design="jungla"][data-theme="dark"] .calendar-card,
:root[data-design="jungla"][data-theme="dark"] .event-modal,
:root[data-design="jungla"][data-theme="dark"] .profile-modal,
:root[data-design="jungla"][data-theme="dark"] .share-modal,
:root[data-design="jungla"][data-theme="dark"] .auth-flow-card {
  box-shadow: inset 0 1px 0 rgba(152, 213, 170, 0.08), var(--shadow-lg);
}

:root[data-design="jungla"][data-theme="dark"] .toast {
  border-color: rgba(122, 209, 151, 0.2);
  background: #0a2415;
}

/* ---------- Muestras de los nuevos diseños ---------- */

.design-swatch-catolica {
  border-color: #b89354;
  background: linear-gradient(135deg, #fbf3e2 46%, #8a5a24 100%);
}

.design-swatch-catolica i {
  top: 7px;
  left: 12px;
  width: 10px;
  height: 19px;
  border: 1px solid #a87a3c;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}

.design-swatch-catolica b {
  top: 13px;
  left: 15px;
  width: 4px;
  height: 9px;
  background: #8a5a24;
  box-shadow: 0 -2px 0 #8a5a24;
}

.design-swatch-catolica b::after {
  content: "";
  position: absolute;
  top: 2px;
  left: -2px;
  width: 8px;
  height: 1px;
  background: #8a5a24;
}

.design-swatch-mar {
  border-color: #4e9ba4;
  background: linear-gradient(160deg, #0c7f8d 0%, #0a5c6d 55%, #052f40 100%);
}

.design-swatch-mar i {
  right: 6px;
  bottom: 8px;
  left: 6px;
  height: 7px;
  border-top: 1px solid rgba(186, 246, 244, 0.8);
  border-radius: 50%;
  box-shadow: 0 -3px 0 rgba(186, 246, 244, 0.4), 0 -6px 0 rgba(186, 246, 244, 0.2);
}

.design-swatch-mar b {
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffdda2;
  opacity: 0.75;
}

.design-swatch-jungla {
  border-color: #4c845d;
  background: linear-gradient(160deg, #1f6a42 0%, #113f28 58%, #082112 100%);
}

.design-swatch-jungla i {
  left: 7px;
  bottom: 6px;
  width: 16px;
  height: 20px;
  border: 1px solid rgba(220, 244, 205, 0.55);
  border-radius: 80% 0 80% 0;
  transform: rotate(-12deg);
}

.design-swatch-jungla b {
  top: 6px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #efdc93;
  box-shadow: 0 0 6px rgba(239, 220, 147, 0.7);
}

/* ---------- Ajustes de las muestras y selector ---------- */

.design-choice:last-child:nth-child(odd) {
  grid-column: span 2;
}

:root[data-design="catolica"] .design-choice[aria-pressed="true"] {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}

:root[data-design="mar"] .design-choice[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

:root[data-design="jungla"] .design-choice[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* =========================================================
   Adaptación a tamaños de pantalla
   ========================================================= */

@media (max-width: 1080px) {
  .auth-stage {
    padding: 20px 24px 46px;
  }

  .welcome-panel {
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
    min-height: 570px;
  }

  .welcome-visual {
    padding: 36px 32px 30px;
  }

  .welcome-content {
    padding: 42px 40px 34px;
  }

  .welcome-content::before {
    left: 40px;
  }

  .welcome-content h1 {
    font-size: clamp(40px, 4.4vw, 54px);
  }

  :root[data-design="catolica"] .welcome-content h1 {
    font-size: clamp(44px, 4.8vw, 58px);
  }
}

@media (max-width: 860px) {
  .auth-stage {
    max-width: 660px;
    align-items: flex-start;
    padding: 16px 20px 40px;
  }

  .welcome-panel {
    grid-template-columns: minmax(0, 1fr);
    width: min(620px, 100%);
    min-height: 0;
    border-radius: 28px;
  }

  .welcome-visual {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    min-height: 200px;
    padding: 28px 30px;
  }

  .welcome-emblem-wrap {
    width: 98px;
    height: 98px;
    margin: 0;
    flex: none;
  }

  .welcome-emblem {
    width: 76px;
    height: 76px;
  }

  .welcome-emblem .icon {
    font-size: 42px;
  }

  .welcome-visual-copy {
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .welcome-design-name {
    font-size: 28px;
  }

  .welcome-visual-foot {
    display: none;
  }

  .welcome-visual::after {
    width: 240px;
    height: 240px;
  }

  .welcome-content {
    padding: 32px 30px 30px;
  }

  .welcome-content::before {
    top: 20px;
    left: 30px;
  }

  .welcome-content h1 {
    max-width: 520px;
    font-size: clamp(38px, 6.6vw, 50px);
  }

  .welcome-content .welcome-copy {
    max-width: 500px;
  }

  .welcome-content .welcome-actions {
    max-width: 500px;
  }

  .welcome-content .welcome-foot {
    max-width: 500px;
  }

  :root[data-design="victoriana"] .welcome-visual,
  :root[data-design="ajedrez"] .welcome-visual {
    align-items: center;
  }

  :root[data-design="victoriana"] .welcome-visual-copy,
  :root[data-design="ajedrez"] .welcome-visual-copy,
  :root[data-design="victoriana"] .welcome-visual-foot,
  :root[data-design="ajedrez"] .welcome-visual-foot {
    text-align: left;
  }

  :root[data-design="catolica"] .welcome-visual,
  :root[data-design="jungla"] .welcome-visual {
    min-height: 220px;
  }

  .welcome-scene span:nth-child(n + 4) {
    display: none;
  }
}

@media (max-width: 720px) {
  .auth-stage {
    padding: 12px 15px 34px;
  }

  .welcome-panel {
    border-radius: 25px;
  }

  .welcome-visual {
    min-height: 178px;
    padding: 24px 23px;
  }

  .welcome-content {
    padding: 30px 23px 27px;
  }

  .welcome-content::before {
    left: 23px;
  }

  .welcome-content .welcome-jelly {
    width: 48px;
    height: 48px;
    margin-bottom: 19px;
    border-radius: 14px;
  }

  .welcome-content .welcome-jelly svg {
    width: 32px;
    height: 32px;
  }

  .welcome-content h1 {
    font-size: clamp(36px, 9.6vw, 48px);
  }

  .welcome-content .welcome-copy {
    margin-top: 14px;
    font-size: 12.5px;
  }

  .welcome-content .welcome-actions {
    margin-top: 22px;
  }

  .welcome-content .welcome-foot {
    margin-top: 20px;
    font-size: 8.5px;
  }

  .welcome-emblem-wrap {
    width: 84px;
    height: 84px;
  }

  .welcome-emblem {
    width: 66px;
    height: 66px;
  }

  .welcome-emblem .icon {
    font-size: 36px;
  }

  .welcome-design-name {
    font-size: 25px;
  }

  .welcome-theme-kicker {
    font-size: 7px;
  }

  .welcome-design-tag {
    font-size: 10px;
  }

  :root[data-design="victoriana"] .welcome-design-name {
    font-size: 22px;
  }

  :root[data-design="futurista"] .welcome-panel {
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  }

  :root[data-design="catolica"] .welcome-visual,
  :root[data-design="jungla"] .welcome-visual {
    min-height: 188px;
  }

  .design-choice:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .ambient-layer span:nth-child(n + 7) {
    display: none;
  }
}

@media (max-width: 560px) {
  .auth-topbar {
    padding: 15px 16px;
  }

  .auth-stage {
    padding: 8px 10px 30px;
  }

  .welcome-panel {
    border-radius: 22px;
  }

  .welcome-visual {
    gap: 14px;
    min-height: 158px;
    padding: 20px 18px;
  }

  .welcome-emblem-wrap {
    width: 70px;
    height: 70px;
  }

  .welcome-emblem {
    width: 56px;
    height: 56px;
  }

  .welcome-emblem .icon {
    font-size: 30px;
  }

  .welcome-emblem-wrap::after {
    inset: -12px;
  }

  .welcome-design-name {
    font-size: 22px;
  }

  .welcome-design-tag {
    font-size: 9px;
  }

  :root[data-design="victoriana"] .welcome-design-name,
  :root[data-design="catolica"] .welcome-design-name,
  :root[data-design="jungla"] .welcome-design-name {
    font-size: 20px;
  }

  :root[data-design="catolica"] .welcome-visual,
  :root[data-design="jungla"] .welcome-visual {
    min-height: 170px;
  }

  .welcome-content {
    padding: 26px 18px 23px;
  }

  .welcome-content::before {
    top: 15px;
    left: 18px;
    width: 32px;
  }

  .welcome-content .welcome-jelly {
    width: 42px;
    height: 42px;
    margin-bottom: 16px;
  }

  .welcome-content .welcome-jelly svg {
    width: 28px;
    height: 28px;
  }

  .welcome-content h1 {
    font-size: clamp(33px, 10vw, 42px);
  }

  .welcome-content .welcome-copy {
    font-size: 12px;
    line-height: 1.65;
  }

  .welcome-content .welcome-login {
    min-height: 46px;
  }

  .welcome-content .welcome-register {
    min-height: 42px;
  }

  .welcome-content .welcome-foot {
    margin-top: 17px;
    padding-top: 12px;
    font-size: 8px;
  }

  .welcome-scene span:nth-child(n + 3) {
    display: none;
  }

  .design-choices {
    grid-template-columns: minmax(0, 1fr);
  }

  .design-choice:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

@media (max-width: 380px) {
  .auth-topbar {
    padding: 12px;
  }

  .auth-stage {
    padding: 6px 8px 24px;
  }

  .welcome-visual {
    min-height: 146px;
    padding: 17px 15px;
  }

  .welcome-emblem-wrap {
    width: 62px;
    height: 62px;
  }

  .welcome-emblem {
    width: 50px;
    height: 50px;
  }

  .welcome-emblem .icon {
    font-size: 27px;
  }

  .welcome-design-name {
    font-size: 20px;
  }

  .welcome-design-tag {
    font-size: 8.5px;
  }

  .welcome-content {
    padding: 23px 15px 21px;
  }

  .welcome-content::before {
    left: 15px;
  }

  .welcome-content h1 {
    font-size: 32px;
  }

  .welcome-content .welcome-foot {
    font-size: 7.5px;
  }
}

/* ---------- Contraste y legibilidad ---------- */

/* El acento se aclara en los temas oscuros: el número de hoy necesita tinta propia. */
:root {
  --on-accent: #050807;
}

:root[data-theme="light"][data-design="victoriana"],
:root[data-theme="light"][data-design="ajedrez"],
:root[data-theme="light"][data-design="catolica"],
:root[data-theme="light"][data-design="mar"],
:root[data-theme="light"][data-design="jungla"] {
  --on-accent: #ffffff;
}

.day-cell.is-today .day-number {
  color: var(--on-accent);
}

:root[data-design="futurista"][data-theme="light"] .day-cell.is-today .day-number {
  color: #010a0c;
}

.side-subhead,
.month-summary,
.legend,
.count-pill {
  color: var(--ink-soft);
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  .ambient-layer {
    display: none !important;
  }

  .welcome-panel,
  .welcome-visual,
  .welcome-content > *,
  .welcome-emblem-ring,
  .welcome-emblem-wrap::after,
  .calendar-app:not([hidden]) .topbar,
  .calendar-app:not([hidden]) .year-rail,
  .calendar-app:not([hidden]) .calendar-stage,
  .calendar-app:not([hidden]) .insights,
  .welcome-scene span,
  .skip-link {
    animation: none !important;
    transition: none !important;
  }

  .welcome-scene span {
    opacity: 0.35 !important;
  }
}