/* =========================================================
   Gelatina Calendar · capa de ambientación 2026
   Escenas temáticas, tablero de ajedrez, océano inmersivo,
   microinteracciones y arte de bienvenida.
   Se carga después de themes.css.
   ========================================================= */

:root {
  --scene-ease: cubic-bezier(0.22, 0.75, 0.22, 1);
  --scene-gold: rgba(166, 127, 54, 0.5);
  --scene-teal: rgba(11, 125, 135, 0.5);
  --board-light: #f7f1e2;
  --board-dark: #26352b;
  --board-line: rgba(31, 77, 58, 0.2);
  --piece-dark: #18231b;
  --piece-light: #fbf5e6;
}

/* ---------- Mundo temático ---------- */

.theme-world {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.theme-world .world {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

:root:not([data-design]) .world-gelatina,
:root[data-design="victoriana"] .world-victoriana,
:root[data-design="futurista"] .world-futurista,
:root[data-design="ajedrez"] .world-ajedrez,
:root[data-design="catolica"] .world-catolica,
:root[data-design="mar"] .world-mar,
:root[data-design="jungla"] .world-jungla {
  display: block;
}

.theme-world .world > * {
  position: absolute;
  pointer-events: none;
}

/* ---------- Gelatina ---------- */

.world-gelatina::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 46% 32% at 88% 4%, rgba(226, 86, 63, 0.13), transparent 70%),
    radial-gradient(ellipse 38% 30% at 2% 34%, rgba(183, 136, 51, 0.12), transparent 70%),
    radial-gradient(ellipse 50% 36% at 68% 96%, rgba(95, 128, 105, 0.1), transparent 72%);
}

.gel-blob {
  border-radius: 46% 54% 58% 42% / 48% 41% 59% 52%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.85), transparent 24%),
    radial-gradient(circle at 38% 34%, rgba(255, 160, 137, 0.34), rgba(226, 86, 63, 0.13) 62%, transparent 78%);
  box-shadow: inset 0 0 26px rgba(255, 255, 255, 0.35);
  opacity: 0.55;
  animation: gelFloat 18s var(--scene-ease) infinite alternate;
}

.gel-blob-a {
  top: 6%;
  right: -8%;
  width: clamp(240px, 26vw, 420px);
  aspect-ratio: 1.05;
}

.gel-blob-b {
  bottom: 4%;
  left: -9%;
  width: clamp(190px, 22vw, 350px);
  aspect-ratio: 0.92;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.8), transparent 24%),
    radial-gradient(circle at 42% 36%, rgba(215, 186, 121, 0.3), rgba(183, 136, 51, 0.1) 62%, transparent 78%);
  animation-delay: -7s;
}

.gel-blob-c {
  top: 54%;
  right: 12%;
  width: clamp(70px, 8vw, 130px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 33% 29%, rgba(255, 255, 255, 0.75), transparent 26%),
    radial-gradient(circle, rgba(109, 160, 126, 0.24), transparent 72%);
  animation-delay: -12s;
}

.gel-spark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fffcea;
  box-shadow: 0 0 14px 3px rgba(255, 221, 173, 0.55);
  opacity: 0.55;
  animation: sparkDrift 9s ease-in-out infinite;
}

.gel-spark-a { top: 23%; left: 12%; }
.gel-spark-b { top: 71%; left: 76%; width: 4px; height: 4px; animation-delay: -3s; }
.gel-spark-c { top: 44%; left: 49%; width: 3px; height: 3px; animation-delay: -6s; }

/* ---------- Victoriano ---------- */

.world-victoriana::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 42% 34% at 100% 0%, rgba(122, 47, 41, 0.11), transparent 70%),
    radial-gradient(ellipse 44% 34% at 0% 100%, rgba(154, 120, 52, 0.12), transparent 72%),
    repeating-linear-gradient(45deg, rgba(122, 47, 41, 0.018) 0 1px, transparent 1px 18px);
}

.world-flourish {
  width: clamp(260px, 32vw, 520px);
  aspect-ratio: 1;
  background: linear-gradient(145deg, rgba(154, 120, 52, 0.5), rgba(122, 47, 41, 0.18));
  -webkit-mask-image: url("assets/ornament-victoriana.svg");
  mask-image: url("assets/ornament-victoriana.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.2;
  animation: slowTurn 90s linear infinite;
}

.flourish-a {
  top: -9%;
  left: -8%;
}

.flourish-b {
  right: -10%;
  bottom: -12%;
  transform: rotate(180deg);
  opacity: 0.16;
}

.victorian-seal {
  right: 7%;
  bottom: 9%;
  display: grid;
  place-items: center;
  width: clamp(74px, 8vw, 112px);
  aspect-ratio: 1;
  border: 1px solid rgba(122, 47, 41, 0.32);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(154, 120, 52, 0.08), 0 0 0 6px rgba(122, 47, 41, 0.15);
  color: rgba(122, 47, 41, 0.36);
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: 0;
  opacity: 0.55;
  transform: rotate(-9deg);
}

.gold-mote {
  width: 5px;
  height: 5px;
  background: #c9a45e;
  transform: rotate(45deg);
  opacity: 0.34;
  animation: goldMote 16s ease-in-out infinite alternate;
}

.mote-a { top: 17%; left: 8%; }
.mote-b { top: 36%; left: 82%; width: 3px; height: 3px; animation-delay: -5s; }
.mote-c { top: 62%; left: 19%; width: 4px; height: 4px; animation-delay: -9s; }
.mote-d { top: 79%; left: 68%; animation-delay: -3s; }
.mote-e { top: 9%; left: 48%; width: 2px; height: 2px; animation-delay: -12s; }
.mote-f { top: 51%; left: 93%; width: 3px; height: 3px; animation-delay: -7s; }

/* ---------- Futurista ---------- */

.world-futurista::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 48% 34% at 94% 2%, rgba(34, 211, 238, 0.11), transparent 68%),
    radial-gradient(ellipse 40% 30% at 2% 82%, rgba(139, 92, 246, 0.09), transparent 70%),
    linear-gradient(180deg, transparent 58%, rgba(7, 134, 156, 0.045));
}

.hud-floor {
  right: -18%;
  bottom: -30%;
  left: -18%;
  height: 62vh;
  background:
    linear-gradient(rgba(7, 134, 156, 0.09) 1px, transparent 1px) 0 0 / 100% 42px,
    linear-gradient(90deg, rgba(7, 134, 156, 0.09) 1px, transparent 1px) 0 0 / 42px 100%;
  transform: perspective(420px) rotateX(63deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%);
  mask-image: linear-gradient(180deg, transparent, #000 45%);
  opacity: 0.72;
  animation: floorDrift 22s linear infinite;
}

.hud-ring {
  border: 1px solid rgba(7, 134, 156, 0.22);
  border-radius: 50%;
  opacity: 0.55;
}

.hud-ring::before,
.hud-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(7, 134, 156, 0.15);
  inset: 12%;
}

.hud-ring::after {
  inset: 28%;
  border-style: solid;
  border-color: rgba(177, 124, 22, 0.16);
}

.hud-ring-a {
  top: -18%;
  right: -12%;
  width: clamp(330px, 42vw, 660px);
  aspect-ratio: 1;
  animation: slowTurn 70s linear infinite reverse;
}

.hud-ring-b {
  top: -6%;
  right: 4%;
  width: clamp(150px, 18vw, 280px);
  aspect-ratio: 1;
  animation: slowTurn 38s linear infinite;
}

.hud-bracket {
  width: 62px;
  height: 62px;
  border-top: 2px solid rgba(7, 134, 156, 0.28);
  border-left: 2px solid rgba(7, 134, 156, 0.28);
}

.bracket-tl { top: 12%; left: 3%; }
.bracket-br {
  right: 3%;
  bottom: 14%;
  border-top: 0;
  border-left: 0;
  border-right: 2px solid rgba(177, 124, 22, 0.25);
  border-bottom: 2px solid rgba(177, 124, 22, 0.25);
}

.hud-beam {
  width: 1px;
  height: 26vh;
  background: linear-gradient(180deg, transparent, rgba(34, 211, 238, 0.38), transparent);
  opacity: 0.55;
  animation: beamFall 12s linear infinite;
}

.beam-a { top: -26vh; left: 28%; }
.beam-b { top: -26vh; right: 21%; animation-delay: -6s; height: 18vh; }

.hud-node {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(7, 134, 156, 0.5);
  background: rgba(7, 134, 156, 0.12);
  transform: rotate(45deg);
  animation: nodePulse 5s ease-in-out infinite;
}

.node-a { top: 29%; right: 14%; }
.node-b { bottom: 21%; left: 10%; animation-delay: -2s; }
.node-c { top: 64%; right: 6%; animation-delay: -4s; width: 4px; height: 4px; }

/* ---------- Ajedrez ---------- */

.world-ajedrez::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 58% 44% at 84% 12%, rgba(166, 127, 54, 0.13), transparent 68%),
    radial-gradient(ellipse 50% 40% at 4% 90%, rgba(31, 77, 58, 0.11), transparent 70%);
}

.chess-aura {
  top: 8%;
  right: 4%;
  width: clamp(280px, 34vw, 540px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(166, 127, 54, 0.18);
  box-shadow: 0 0 0 22px rgba(166, 127, 54, 0.035), 0 0 0 58px rgba(31, 77, 58, 0.03);
}

.chess-coordinates {
  right: 4%;
  bottom: 6%;
  color: rgba(31, 77, 58, 0.18);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 11px;
  font-style: italic;
  letter-spacing: 1.15em;
  text-transform: uppercase;
}

.chess-coordinates::before {
  content: "a  b  c  d  e  f  g  h";
}

.scene-piece {
  width: clamp(96px, 12vw, 190px);
  height: auto;
  color: var(--piece-dark);
  fill: currentColor;
  stroke: rgba(251, 245, 230, 0.22);
  stroke-width: 0.7;
  opacity: 0.17;
  filter: drop-shadow(0 20px 24px rgba(28, 36, 31, 0.3));
  animation: pieceMeditate 22s var(--scene-ease) infinite alternate;
}

.scene-piece.piece-a {
  top: 12%;
  left: -3%;
  color: var(--piece-dark);
}

.scene-piece.piece-b {
  right: -3%;
  bottom: 2%;
  width: clamp(130px, 16vw, 250px);
  color: var(--piece-light);
  stroke: rgba(28, 36, 31, 0.32);
  opacity: 0.3;
  animation-delay: -6s;
}

.scene-piece.piece-c {
  right: 10%;
  top: 8%;
  width: clamp(76px, 8vw, 130px);
  color: var(--piece-light);
  stroke: rgba(28, 36, 31, 0.28);
  opacity: 0.24;
  animation-delay: -11s;
}

.scene-piece.piece-d {
  bottom: 12%;
  left: 9%;
  width: clamp(56px, 5vw, 88px);
  color: var(--piece-dark);
  opacity: 0.13;
  animation-delay: -16s;
}

.chess-square {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(166, 127, 54, 0.22);
  background: rgba(31, 77, 58, 0.045);
  box-shadow: 18px 18px 0 rgba(31, 77, 58, 0.025);
  transform: rotate(2deg);
}

.square-a { top: 18%; right: 22%; width: 36px; height: 36px; }
.square-b { bottom: 28%; left: 5%; transform: rotate(-4deg); }
.square-c { bottom: 8%; right: 29%; width: 26px; height: 26px; transform: rotate(7deg); }

/* ---------- Católica ---------- */

.world-catolica::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 38% at 82% -4%, rgba(216, 164, 77, 0.2), transparent 68%),
    radial-gradient(ellipse 42% 32% at 0% 90%, rgba(108, 48, 40, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(255, 248, 230, 0.08), transparent 46%);
}

.cathedral-rays {
  top: -30vh;
  right: 8%;
  width: 78vw;
  height: 100vh;
  background: conic-gradient(
    from 208deg at 60% 0%,
    transparent 0deg,
    rgba(247, 221, 163, 0.06) 3deg,
    rgba(247, 221, 163, 0.12) 7deg,
    rgba(247, 221, 163, 0.06) 11deg,
    transparent 16deg,
    rgba(247, 221, 163, 0.04) 20deg,
    rgba(247, 221, 163, 0.08) 24deg,
    rgba(247, 221, 163, 0.04) 29deg,
    transparent 34deg,
    rgba(207, 133, 147, 0.05) 44deg,
    transparent 55deg
  );
  opacity: 0.8;
  animation: raysShift 24s ease-in-out infinite alternate;
}

.rose-window {
  top: 5%;
  right: 3%;
  width: clamp(240px, 28vw, 440px);
  aspect-ratio: 1;
  border: 1px solid rgba(177, 132, 61, 0.25);
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(168, 51, 54, 0.16) 0 24deg, rgba(216, 164, 77, 0.17) 24deg 48deg, rgba(52, 99, 121, 0.14) 48deg 72deg, rgba(86, 111, 63, 0.12) 72deg 96deg, rgba(168, 51, 54, 0.16) 96deg 120deg, rgba(216, 164, 77, 0.17) 120deg 144deg, rgba(52, 99, 121, 0.14) 144deg 168deg, rgba(86, 111, 63, 0.12) 168deg 192deg, rgba(168, 51, 54, 0.16) 192deg 216deg, rgba(216, 164, 77, 0.17) 216deg 240deg, rgba(52, 99, 121, 0.14) 240deg 264deg, rgba(86, 111, 63, 0.12) 264deg 288deg, rgba(168, 51, 54, 0.16) 288deg 312deg, rgba(216, 164, 77, 0.17) 312deg 336deg, rgba(52, 99, 121, 0.14) 336deg 360deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 12%, #000 12.5% 13.5%, transparent 14% 26%, #000 26.5% 28%, transparent 28.5% 100%);
  mask-image: radial-gradient(circle, transparent 0 12%, #000 12.5% 13.5%, transparent 14% 26%, #000 26.5% 28%, transparent 28.5% 100%);
  opacity: 0.55;
  box-shadow: 0 0 0 14px rgba(177, 132, 61, 0.04), 0 0 70px rgba(216, 164, 77, 0.16);
}

.rose-window::before,
.rose-window::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(177, 132, 61, 0.24);
  inset: 18%;
}

.rose-window::after {
  inset: 38%;
  border-color: rgba(177, 132, 61, 0.34);
}

.rose-window i {
  position: absolute;
  inset: 47%;
  border-radius: 50%;
  background: rgba(216, 164, 77, 0.3);
  box-shadow: 0 0 18px rgba(216, 164, 77, 0.32);
}

.cathedral-arch {
  bottom: -20%;
  left: 50%;
  width: min(72vw, 980px);
  height: 64vh;
  border: 1px solid rgba(177, 132, 61, 0.14);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 72% 72% 0 0;
  transform: translateX(-50%);
  box-shadow: 0 0 0 22px rgba(177, 132, 61, 0.025);
}

.candle {
  bottom: 5%;
  width: 5px;
  height: 74px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(226, 196, 138, 0.5), rgba(177, 132, 61, 0.15));
  opacity: 0.5;
}

.candle i {
  position: absolute;
  top: -13px;
  left: 50%;
  width: 7px;
  height: 15px;
  border-radius: 50% 50% 44% 44%;
  background: radial-gradient(circle at 50% 66%, #fff7d8, #e6b45d 48%, rgba(230, 180, 93, 0));
  filter: blur(0.3px);
  transform: translateX(-50%);
  animation: candleFlicker 3.8s ease-in-out infinite;
}

.candle-a { left: 8%; }
.candle-b { right: 10%; height: 58px; animation-delay: -1.4s; }
.candle-c { right: 4%; height: 40px; opacity: 0.34; animation-delay: -2.2s; }

.faith-mote {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 233, 174, 0.95), rgba(216, 164, 77, 0.16) 66%, transparent 78%);
  box-shadow: 0 0 12px rgba(231, 189, 112, 0.5);
  opacity: 0.5;
  animation: faithRise 18s linear infinite;
}

.faith-a { left: 9%; animation-delay: -2s; }
.faith-b { left: 23%; animation-delay: -8s; width: 3px; height: 3px; }
.faith-c { left: 48%; animation-delay: -13s; }
.faith-d { left: 72%; animation-delay: -5s; width: 2px; height: 2px; }

/* ---------- Mar Pacífico ---------- */

.world-mar::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(212, 242, 240, 0.16) 0%, transparent 34%, rgba(5, 73, 86, 0.06) 68%, rgba(4, 50, 62, 0.22) 100%),
    radial-gradient(ellipse 72% 48% at 74% -10%, rgba(255, 235, 177, 0.24), transparent 66%);
}

.sea-light {
  top: -20vh;
  left: 18%;
  width: 74vw;
  height: 98vh;
  background: conic-gradient(
    from 188deg at 50% 0%,
    transparent 0deg,
    rgba(255, 245, 205, 0.07) 2deg,
    rgba(255, 245, 205, 0.18) 5deg,
    rgba(255, 245, 205, 0.07) 9deg,
    transparent 13deg,
    rgba(158, 235, 233, 0.05) 16deg,
    rgba(158, 235, 233, 0.12) 19deg,
    rgba(158, 235, 233, 0.05) 23deg,
    transparent 29deg,
    rgba(255, 245, 205, 0.04) 33deg,
    rgba(255, 245, 205, 0.1) 38deg,
    rgba(255, 245, 205, 0.04) 43deg,
    transparent 50deg
  );
  opacity: 0.7;
  animation: raysShift 18s ease-in-out infinite alternate;
}

.sea-caustic {
  inset: 0;
  background:
    repeating-radial-gradient(ellipse 44% 26% at 20% 12%, transparent 0 28px, rgba(151, 232, 231, 0.07) 29px 30px),
    repeating-radial-gradient(ellipse 36% 22% at 82% 26%, transparent 0 34px, rgba(255, 247, 214, 0.05) 35px 36px);
  opacity: 0.9;
  animation: causticDrift 26s ease-in-out infinite alternate;
}

.sea-wave {
  right: -20%;
  bottom: -18%;
  left: -20%;
  height: 46vh;
  border-radius: 48% 52% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, rgba(11, 125, 135, 0.09), rgba(4, 50, 62, 0.02));
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  animation: waveSway 20s ease-in-out infinite alternate;
}

.sea-wave.wave-b {
  bottom: -28%;
  height: 52vh;
  background: linear-gradient(180deg, rgba(11, 125, 135, 0.055), rgba(4, 50, 62, 0.03));
  animation-delay: -7s;
}

.sea-wave.wave-c {
  bottom: -40%;
  height: 60vh;
  background: rgba(4, 50, 62, 0.035);
  animation-delay: -13s;
}

.sea-fish {
  width: clamp(44px, 5vw, 74px);
  height: auto;
  color: rgba(11, 125, 135, 0.4);
  fill: currentColor;
  opacity: 0.55;
  animation: fishSwim 34s linear infinite;
}

.fish-a { top: 22%; left: -10%; }
.fish-b {
  top: 43%;
  left: -10%;
  width: clamp(28px, 3vw, 46px);
  color: rgba(201, 143, 77, 0.44);
  animation-delay: -11s;
  animation-duration: 42s;
}

.fish-c {
  top: 70%;
  left: -10%;
  width: clamp(58px, 6vw, 92px);
  color: rgba(11, 125, 135, 0.28);
  animation-delay: -23s;
  animation-duration: 48s;
}

.fish-b,
.fish-c {
  transform: scaleX(-1);
}

.sea-jelly {
  width: clamp(70px, 8vw, 120px);
  height: auto;
  color: rgba(125, 218, 221, 0.4);
  fill: currentColor;
  opacity: 0.45;
  animation: jellyBob 14s ease-in-out infinite;
}

.jelly-a { top: 18%; right: 7%; }
.jelly-b {
  right: 22%;
  bottom: 22%;
  width: clamp(46px, 4.6vw, 70px);
  color: rgba(201, 143, 77, 0.3);
  animation-delay: -6s;
}

.sea-kelp {
  bottom: -3%;
  width: clamp(64px, 7vw, 108px);
  height: auto;
  color: rgba(11, 125, 135, 0.45);
  fill: none;
  opacity: 0.55;
  transform-origin: 50% 100%;
  animation: kelpSway 8s ease-in-out infinite alternate;
}

.kelp-a { left: 2%; }
.kelp-b { left: 11%; width: clamp(40px, 4vw, 64px); opacity: 0.32; animation-delay: -3s; }

.sea-coral {
  right: 2%;
  bottom: -2%;
  width: clamp(84px, 9vw, 148px);
  height: auto;
  color: rgba(201, 143, 77, 0.42);
  fill: none;
  opacity: 0.5;
}

.sea-bubble {
  width: 11px;
  height: 11px;
  border: 1px solid rgba(125, 218, 221, 0.46);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.62), transparent 44%);
  opacity: 0;
  animation: bubbleUp 18s linear infinite;
}

.bubble-a { left: 16%; bottom: -4%; animation-delay: -2s; }
.bubble-b { left: 32%; bottom: -4%; width: 6px; height: 6px; animation-delay: -7s; }
.bubble-c { left: 55%; bottom: -4%; width: 16px; height: 16px; animation-delay: -11s; }
.bubble-d { left: 68%; bottom: -4%; width: 8px; height: 8px; animation-delay: -15s; }
.bubble-e { left: 81%; bottom: -4%; width: 4px; height: 4px; animation-delay: -5s; }
.bubble-f { left: 92%; bottom: -4%; width: 12px; height: 12px; animation-delay: -16s; }

/* ---------- Jungla ---------- */

.world-jungla::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 48% 36% at 78% -6%, rgba(248, 225, 154, 0.2), transparent 68%),
    radial-gradient(ellipse 48% 36% at 0% 100%, rgba(23, 101, 67, 0.14), transparent 72%),
    linear-gradient(180deg, transparent 45%, rgba(19, 86, 54, 0.05));
}

.jungle-light {
  top: -24vh;
  right: 2%;
  width: 82vw;
  height: 104vh;
  background: conic-gradient(
    from 202deg at 62% 0%,
    transparent 0deg,
    rgba(250, 235, 166, 0.08) 3deg,
    rgba(250, 235, 166, 0.16) 7deg,
    rgba(250, 235, 166, 0.08) 11deg,
    transparent 16deg,
    rgba(250, 235, 166, 0.05) 19deg,
    rgba(250, 235, 166, 0.11) 22deg,
    rgba(250, 235, 166, 0.05) 27deg,
    transparent 34deg,
    rgba(151, 214, 139, 0.04) 38deg,
    rgba(151, 214, 139, 0.09) 42deg,
    rgba(151, 214, 139, 0.04) 47deg,
    transparent 54deg
  );
  opacity: 0.8;
  animation: raysShift 22s ease-in-out infinite alternate;
}

.jungle-vine {
  top: -8%;
  width: 2px;
  height: 60vh;
  border-radius: 50%;
  background: linear-gradient(180deg, transparent, rgba(23, 101, 67, 0.4), transparent);
  transform-origin: 50% 0;
  animation: vineSway 12s ease-in-out infinite alternate;
}

.vine-a { left: 4%; }
.vine-b { right: 6%; height: 46vh; animation-delay: -4s; }
.vine-c { left: 78%; height: 32vh; opacity: 0.45; animation-delay: -8s; }

.jungle-leaf {
  width: clamp(110px, 14vw, 220px);
  height: auto;
  color: rgba(23, 101, 67, 0.4);
  fill: currentColor;
  opacity: 0.16;
  transform-origin: 50% 90%;
  animation: leafSway 13s ease-in-out infinite alternate;
}

.leaf-a { bottom: -8%; left: -4%; transform: rotate(22deg); }
.leaf-b { top: -7%; right: -3%; width: clamp(150px, 18vw, 280px); transform: rotate(158deg); animation-delay: -5s; opacity: 0.13; }
.leaf-c { bottom: 6%; right: 4%; width: clamp(80px, 9vw, 140px); transform: rotate(-26deg); animation-delay: -9s; opacity: 0.12; }
.leaf-d { top: 30%; left: -7%; width: clamp(70px, 8vw, 120px); transform: rotate(64deg); animation-delay: -2s; opacity: 0.1; }

.jungle-butterfly {
  top: 24%;
  right: 14%;
  width: 42px;
  height: auto;
  color: rgba(201, 154, 55, 0.55);
  fill: currentColor;
  opacity: 0.55;
  animation: butterflyFlight 20s ease-in-out infinite;
}

.firefly {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 184, 0.98), rgba(201, 154, 55, 0.16) 66%, transparent 78%);
  box-shadow: 0 0 12px rgba(233, 210, 120, 0.62);
  opacity: 0.6;
  animation: fireflyPulse 6s ease-in-out infinite;
}

.firefly-a { top: 20%; left: 12%; }
.firefly-b { top: 38%; left: 72%; animation-delay: -1.4s; }
.firefly-c { top: 59%; left: 24%; width: 4px; height: 4px; animation-delay: -3s; }
.firefly-d { top: 76%; left: 82%; animation-delay: -4.2s; }
.firefly-e { top: 48%; left: 49%; width: 3px; height: 3px; animation-delay: -2.2s; }
.firefly-f { top: 86%; left: 38%; animation-delay: -5s; }

/* ---------- Animaciones del mundo ---------- */

@keyframes gelFloat {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.98); }
  50% { transform: translate3d(-14px, 18px, 0) rotate(5deg) scale(1.03); }
  100% { transform: translate3d(18px, -12px, 0) rotate(-4deg) scale(1.01); }
}

@keyframes sparkDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.8); opacity: 0.2; }
  50% { transform: translate3d(10px, -22px, 0) scale(1.25); opacity: 0.8; }
}

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

@keyframes goldMote {
  0% { transform: translate3d(0, 0, 0) rotate(45deg); opacity: 0.12; }
  50% { opacity: 0.55; }
  100% { transform: translate3d(14px, -26px, 0) rotate(160deg); opacity: 0.2; }
}

@keyframes floorDrift {
  from { transform: perspective(420px) rotateX(63deg) translate3d(0, 0, 0); }
  to { transform: perspective(420px) rotateX(63deg) translate3d(0, 42px, 0); }
}

@keyframes beamFall {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 0.55; }
  80% { opacity: 0.2; }
  100% { transform: translateY(140vh); opacity: 0; }
}

@keyframes nodePulse {
  0%, 100% { opacity: 0.2; transform: rotate(45deg) scale(0.8); }
  50% { opacity: 0.8; transform: rotate(45deg) scale(1.15); }
}

@keyframes pieceMeditate {
  0% { transform: translate3d(0, 0, 0) rotate(-1deg); }
  55% { transform: translate3d(6px, -10px, 0) rotate(1.5deg); }
  100% { transform: translate3d(-4px, 4px, 0) rotate(-0.5deg); }
}

@keyframes raysShift {
  from { transform: translateX(-3%) rotate(-1.5deg); opacity: 0.55; }
  to { transform: translateX(3%) rotate(1.5deg); opacity: 0.9; }
}

@keyframes candleFlicker {
  0%, 100% { transform: translateX(-50%) scale(1) rotate(-2deg); opacity: 0.72; }
  35% { transform: translateX(-50%) scale(1.12, 0.92) rotate(3deg); opacity: 0.96; }
  70% { transform: translateX(-50%) scale(0.92, 1.1) rotate(-3deg); opacity: 0.62; }
}

@keyframes faithRise {
  0% { transform: translate3d(0, 30vh, 0) scale(0.8); opacity: 0; }
  15% { opacity: 0.6; }
  82% { opacity: 0.32; }
  100% { transform: translate3d(18px, -72vh, 0) scale(1.15); opacity: 0; }
}

@keyframes causticDrift {
  from { transform: scale(1.02) translate3d(-1%, 0, 0) rotate(-0.6deg); opacity: 0.55; }
  to { transform: scale(1.08) translate3d(1%, -1%, 0) rotate(0.8deg); opacity: 0.95; }
}

@keyframes waveSway {
  from { transform: translate3d(-2%, 6px, 0) scaleX(1.02); }
  to { transform: translate3d(2%, -4px, 0) scaleX(1.04); }
}

@keyframes fishSwim {
  0% { transform: translate3d(-14vw, 0, 0) scaleX(var(--fish-flip, 1)); opacity: 0; }
  8% { opacity: 0.55; }
  90% { opacity: 0.45; }
  100% { transform: translate3d(112vw, -12px, 0) scaleX(var(--fish-flip, 1)); opacity: 0; }
}

.fish-b,
.fish-c {
  --fish-flip: -1;
}

@keyframes jellyBob {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg) scale(0.98); }
  50% { transform: translate3d(-8px, -22px, 0) rotate(2deg) scale(1.04); }
}

@keyframes kelpSway {
  from { transform: rotate(-3deg) skewX(2deg); }
  to { transform: rotate(4deg) skewX(-3deg); }
}

@keyframes bubbleUp {
  0% { transform: translate3d(0, 20vh, 0) scale(0.6); opacity: 0; }
  14% { opacity: 0.65; }
  82% { opacity: 0.35; }
  100% { transform: translate3d(24px, -88vh, 0) scale(1.15); opacity: 0; }
}

@keyframes vineSway {
  from { transform: rotate(-2deg); }
  to { transform: rotate(3deg); }
}

@keyframes leafSway {
  from { transform: rotate(var(--leaf-rotate, 0deg)) translate3d(0, 0, 0); }
  to { transform: rotate(calc(var(--leaf-rotate, 0deg) + 4deg)) translate3d(6px, -5px, 0); }
}

@keyframes butterflyFlight {
  0% { transform: translate3d(0, 0, 0) rotate(-6deg); }
  24% { transform: translate3d(-42vw, 10vh, 0) rotate(8deg); }
  48% { transform: translate3d(-18vw, 22vh, 0) rotate(-4deg); }
  72% { transform: translate3d(-56vw, 6vh, 0) rotate(6deg); }
  100% { transform: translate3d(0, 0, 0) rotate(-6deg); }
}

@keyframes fireflyPulse {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.8); opacity: 0.18; }
  45% { transform: translate3d(14px, -12px, 0) scale(1.25); opacity: 0.82; }
  70% { transform: translate3d(6px, -20px, 0) scale(0.9); opacity: 0.32; }
}

/* ---------- Adaptación del mundo a oscuro ---------- */

:root[data-theme="dark"] .gel-blob {
  opacity: 0.3;
}

:root[data-theme="dark"] .victorian-seal {
  color: rgba(224, 187, 113, 0.42);
  border-color: rgba(224, 187, 113, 0.28);
}

:root[data-theme="dark"] .gold-mote {
  background: #e0bb71;
}

:root[data-theme="dark"] .hud-floor,
:root[data-theme="dark"] .hud-ring,
:root[data-theme="dark"] .hud-bracket {
  opacity: 0.55;
}

:root[data-theme="dark"] .scene-piece.piece-a,
:root[data-theme="dark"] .scene-piece.piece-d {
  color: #e9e3d2;
  stroke: rgba(0, 0, 0, 0.35);
  opacity: 0.14;
}

:root[data-theme="dark"] .scene-piece.piece-b,
:root[data-theme="dark"] .scene-piece.piece-c {
  color: #0d130e;
  stroke: rgba(224, 187, 113, 0.28);
  opacity: 0.42;
}

:root[data-theme="dark"] .chess-coordinates {
  color: rgba(224, 187, 113, 0.2);
}

:root[data-theme="dark"] .rose-window {
  opacity: 0.82;
  box-shadow: 0 0 0 14px rgba(224, 187, 113, 0.035), 0 0 90px rgba(216, 164, 77, 0.24);
}

:root[data-theme="dark"] .candle {
  opacity: 0.68;
}

:root[data-theme="dark"] .world-mar::before {
  background:
    linear-gradient(180deg, rgba(20, 108, 118, 0.08) 0%, transparent 32%, rgba(2, 35, 44, 0.38) 72%, rgba(1, 20, 26, 0.68) 100%),
    radial-gradient(ellipse 72% 48% at 74% -10%, rgba(255, 235, 177, 0.12), transparent 66%);
}

:root[data-theme="dark"] .sea-wave {
  background: linear-gradient(180deg, rgba(36, 156, 166, 0.12), rgba(1, 20, 26, 0.08));
  border-top-color: rgba(141, 234, 232, 0.12);
}

:root[data-theme="dark"] .sea-fish {
  color: rgba(141, 234, 232, 0.46);
}

:root[data-theme="dark"] .sea-jelly {
  color: rgba(141, 234, 232, 0.5);
}

:root[data-theme="dark"] .sea-kelp {
  color: rgba(111, 209, 178, 0.42);
}

:root[data-theme="dark"] .jungle-leaf {
  color: rgba(147, 219, 150, 0.34);
}

:root[data-theme="dark"] .jungle-vine {
  background: linear-gradient(180deg, transparent, rgba(147, 219, 150, 0.32), transparent);
}

:root[data-theme="dark"] .firefly {
  opacity: 0.72;
}

/* ---------- Bienvenida · arte temático ---------- */

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

.welcome-theme-art > * {
  position: absolute;
  display: none;
  pointer-events: none;
}

.welcome-gel {
  border-radius: 46% 54% 58% 42%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.7), transparent 26%),
    radial-gradient(circle, rgba(255, 214, 197, 0.2), rgba(255, 255, 255, 0.03) 62%, transparent 78%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0.7;
}

:root:not([data-design]) .welcome-theme-art .welcome-gel { display: block; }
.welcome-gel-a { top: 12%; left: -10%; width: 150px; height: 140px; animation: gelFloat 16s var(--scene-ease) infinite alternate; }
.welcome-gel-b { top: 40%; right: -12%; width: 190px; height: 180px; animation-delay: -6s; animation: gelFloat 20s var(--scene-ease) infinite alternate; }
.welcome-gel-c { bottom: 24%; left: 36%; width: 50px; height: 48px; opacity: 0.35; animation-delay: -11s; animation: gelFloat 13s var(--scene-ease) infinite alternate; }

.welcome-victorian-frame {
  inset: 18px;
  border: 1px solid rgba(255, 240, 214, 0.2);
  box-shadow: inset 0 0 0 5px rgba(255, 240, 214, 0.03);
}

:root[data-design="victoriana"] .welcome-theme-art .welcome-victorian-frame { display: block; }

.welcome-art {
  width: 100px;
  height: auto;
  fill: currentColor;
  stroke: none;
}

.welcome-art.art-fleur {
  right: 7%;
  bottom: 12%;
  width: 120px;
  color: rgba(246, 232, 204, 0.2);
  transform: rotate(14deg);
  animation: pieceMeditate 18s ease-in-out infinite alternate;
}

:root[data-design="victoriana"] .welcome-theme-art .art-fleur { display: block; }

.welcome-hud-ring {
  border: 1px solid rgba(148, 247, 255, 0.26);
  border-radius: 50%;
  animation: slowTurn 40s linear infinite;
}

.welcome-hud-ring::before {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px dashed rgba(148, 247, 255, 0.22);
  border-radius: 50%;
}

.welcome-hud-a { top: -20%; right: -16%; width: 300px; height: 300px; }
.welcome-hud-b { top: -4%; right: 4%; width: 150px; height: 150px; animation-direction: reverse; animation-duration: 26s; }

.welcome-hud-grid {
  inset: 0;
  background:
    linear-gradient(rgba(148, 247, 255, 0.07) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(148, 247, 255, 0.07) 1px, transparent 1px) 0 0 / 34px 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 62%);
  mask-image: linear-gradient(180deg, transparent, #000 62%);
  opacity: 0.55;
}

:root[data-design="futurista"] .welcome-theme-art .welcome-hud-ring,
:root[data-design="futurista"] .welcome-theme-art .welcome-hud-grid { display: block; }

.welcome-art.art-chess-a {
  right: 2%;
  bottom: 4%;
  width: 150px;
  color: rgba(255, 248, 233, 0.18);
  transform: rotate(7deg);
  animation: pieceMeditate 20s ease-in-out infinite alternate;
}

.welcome-art.art-chess-b {
  right: 18%;
  bottom: 29%;
  width: 76px;
  color: rgba(15, 25, 18, 0.32);
  transform: rotate(-10deg);
  animation: pieceMeditate 16s ease-in-out infinite alternate-reverse;
}

:root[data-design="ajedrez"] .welcome-theme-art .art-chess-a,
:root[data-design="ajedrez"] .welcome-theme-art .art-chess-b { display: block; }

.welcome-rose {
  top: -20%;
  right: -12%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(245, 214, 150, 0.18) 0 24deg, rgba(122, 47, 41, 0.14) 24deg 48deg, rgba(92, 130, 118, 0.12) 48deg 72deg, rgba(245, 214, 150, 0.18) 72deg 96deg, rgba(122, 47, 41, 0.14) 96deg 120deg, rgba(92, 130, 118, 0.12) 120deg 144deg, rgba(245, 214, 150, 0.18) 144deg 168deg, rgba(122, 47, 41, 0.14) 168deg 192deg, rgba(92, 130, 118, 0.12) 192deg 216deg, rgba(245, 214, 150, 0.18) 216deg 240deg, rgba(122, 47, 41, 0.14) 240deg 264deg, rgba(92, 130, 118, 0.12) 264deg 288deg, rgba(245, 214, 150, 0.18) 288deg 312deg, rgba(122, 47, 41, 0.14) 312deg 336deg, rgba(92, 130, 118, 0.12) 336deg 360deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 13%, #000 13.5% 14.5%, transparent 15% 28%, #000 28.5% 30%, transparent 30.5% 100%);
  mask-image: radial-gradient(circle, transparent 0 13%, #000 13.5% 14.5%, transparent 15% 28%, #000 28.5% 30%, transparent 30.5% 100%);
  opacity: 0.8;
}

.welcome-arch {
  bottom: -26%;
  left: 4%;
  width: 92%;
  height: 70%;
  border: 1px solid rgba(245, 214, 150, 0.2);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 80% 80% 0 0;
}

.welcome-art.art-cross {
  right: 12%;
  bottom: 17%;
  width: 38px;
  color: rgba(245, 214, 150, 0.42);
}

:root[data-design="catolica"] .welcome-theme-art .welcome-rose,
:root[data-design="catolica"] .welcome-theme-art .welcome-arch,
:root[data-design="catolica"] .welcome-theme-art .art-cross { display: block; }

.welcome-art.art-fish {
  top: 31%;
  right: 9%;
  width: 76px;
  color: rgba(225, 254, 255, 0.24);
  fill: currentColor;
  animation: fishSwimWelcome 24s linear infinite;
}

.welcome-art.art-jelly {
  right: 18%;
  bottom: 4%;
  width: 76px;
  color: rgba(225, 254, 255, 0.2);
  fill: currentColor;
  animation: jellyBob 14s ease-in-out infinite;
}

:root[data-design="mar"] .welcome-theme-art .art-fish,
:root[data-design="mar"] .welcome-theme-art .art-jelly { display: block; }

@keyframes fishSwimWelcome {
  0% { transform: translate3d(0, 0, 0) scaleX(1); opacity: 0; }
  16% { opacity: 0.8; }
  80% { opacity: 0.55; }
  100% { transform: translate3d(-260px, 26px, 0) scaleX(1); opacity: 0; }
}

.welcome-art.art-leaf-a {
  bottom: -12%;
  left: -7%;
  width: 190px;
  color: rgba(226, 255, 224, 0.14);
  fill: currentColor;
  transform: rotate(26deg);
  animation: leafSway 14s ease-in-out infinite alternate;
}

.welcome-art.art-leaf-b {
  top: -14%;
  right: -8%;
  width: 220px;
  color: rgba(226, 255, 224, 0.1);
  fill: currentColor;
  transform: rotate(148deg);
  animation: leafSway 18s ease-in-out infinite alternate-reverse;
}

.welcome-art.art-butterfly {
  top: 24%;
  right: 19%;
  width: 38px;
  color: rgba(242, 224, 139, 0.48);
  fill: currentColor;
  animation: pieceMeditate 12s ease-in-out infinite alternate;
}

:root[data-design="jungla"] .welcome-theme-art .art-leaf-a,
:root[data-design="jungla"] .welcome-theme-art .art-leaf-b,
:root[data-design="jungla"] .welcome-theme-art .art-butterfly { display: block; }

/* =========================================================
   Superficies del calendario · base
   ========================================================= */

.calendar-card {
  isolation: isolate;
}

.calendar-ambience {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  contain: layout paint style;
}

.calendar-ambience > span {
  position: absolute;
  display: block;
  inset: 0;
  pointer-events: none;
}

.calendar-light,
.calendar-wave {
  opacity: 0;
}

.chess-ghost {
  position: absolute;
  top: 12%;
  left: 10%;
  z-index: 6;
  width: clamp(26px, 3.2vw, 42px);
  opacity: 0;
  color: var(--piece-light);
  pointer-events: none;
  filter: drop-shadow(0 10px 12px rgba(12, 18, 14, 0.45));
}

.chess-ghost svg {
  display: block;
  width: 100%;
  height: auto;
  fill: currentColor;
  stroke: rgba(28, 36, 31, 0.42);
  stroke-width: 0.7;
}

.chip-piece {
  display: none;
  width: 11px;
  height: 14px;
  flex: none;
  fill: currentColor;
  stroke-width: 0.7;
}

.event-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "dot time"
    "title title";
  align-items: center;
  align-content: center;
  gap: 1px 5px;
  padding: 4px 6px;
}

.event-chip .chip-dot {
  grid-area: dot;
}

.event-chip .chip-time {
  grid-area: time;
  font-size: 8px;
  line-height: 1.15;
}

.event-chip .chip-title {
  display: -webkit-box;
  grid-area: title;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 9.5px;
  line-height: 1.2;
}

.event-chip:not(:has(.chip-time)) {
  grid-template-areas: "dot title";
}

.day-cell.is-selected {
  z-index: 2;
  box-shadow: inset 0 0 0 2px var(--accent);
}

.calendar-card.is-month-enter .day-cell {
  animation: cellSettle 0.48s var(--scene-ease) both;
  animation-delay: calc(var(--cell-i, 0) * 9ms);
}

@keyframes cellSettle {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   Gelatina · superficies blandas y brillo de gelatina
   ========================================================= */

:root:not([data-design]) .calendar-card {
  border-color: rgba(226, 86, 63, 0.16);
  background: linear-gradient(164deg, #fffdf9 0%, #fdf9f3 54%, #fbf3e9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 20px 44px rgba(120, 60, 40, 0.1);
}

:root:not([data-design]) .weekdays {
  border-bottom-color: rgba(226, 86, 63, 0.16);
  background: linear-gradient(180deg, #fff8f3, #fdf0ea);
}

:root:not([data-design]) .weekdays span {
  color: #b4624f;
}

:root:not([data-design]) .weekdays span:nth-child(6),
:root:not([data-design]) .weekdays span:nth-child(7) {
  color: #c58b52;
}

:root:not([data-design]) .day-cell:hover {
  background: radial-gradient(130% 110% at 50% 0%, #fffdfa, #fdf1e9);
  box-shadow: inset 0 0 0 1px rgba(226, 86, 63, 0.12);
}

:root:not([data-design]) .calendar-light {
  opacity: 1;
  background:
    radial-gradient(44% 30% at 6% 0%, rgba(255, 188, 167, 0.22), transparent 70%),
    radial-gradient(38% 28% at 100% 102%, rgba(255, 214, 150, 0.18), transparent 72%);
}

:root:not([data-design]) .calendar-ambience::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent);
  pointer-events: none;
}

:root:not([data-design]) .event-chip {
  border: 1px solid rgba(226, 86, 63, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(120, 60, 40, 0.06);
}

:root:not([data-design]) .event-chip:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 10px rgba(120, 60, 40, 0.12);
  filter: saturate(1.08);
}

:root:not([data-design]) .month-title-line h1 {
  background: linear-gradient(118deg, var(--ink) 52%, #cf5a45 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-theme="dark"]:root:not([data-design]) .month-title-line h1 {
  background: linear-gradient(118deg, #f4f0e8 46%, #ff9d89 98%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-theme="dark"]:root:not([data-design]) .calendar-card {
  border-color: rgba(255, 157, 137, 0.12);
  background: linear-gradient(164deg, #1d1f24 0%, #191b20 56%, #17181c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 22px 48px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"]:root:not([data-design]) .weekdays {
  border-bottom-color: rgba(255, 157, 137, 0.12);
  background: linear-gradient(180deg, #22252b, #1c1e23);
}

[data-theme="dark"]:root:not([data-design]) .weekdays span {
  color: #e6a291;
}

[data-theme="dark"]:root:not([data-design]) .calendar-ambience::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent);
}

/* =========================================================
   Ajedrez · tablero, marco de madera y piezas
   ========================================================= */

:root[data-design="ajedrez"] {
  --board-ivory: #f6efdd;
  --board-ivory-deep: #ebdfc6;
  --board-charcoal: #2b3b31;
  --board-slate: #1f2c25;
  --board-wood-a: #6d4626;
  --board-wood-b: #452a16;
  --board-brass: #d8b775;
  --board-ink: #1c241f;
  --board-cream: #f7f1e2;
}

:root[data-design="ajedrez"] .calendar-card {
  padding: clamp(7px, 0.75vw, 11px);
  border: 1px solid #241509;
  border-radius: 6px;
  background:
    repeating-linear-gradient(92deg, transparent 0 17px, rgba(255, 226, 174, 0.05) 17px 18px, transparent 18px 34px),
    linear-gradient(126deg, var(--board-wood-a), #57351c 38%, #3b2310 76%, var(--board-wood-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 170, 0.22),
    0 0 0 1px rgba(216, 183, 117, 0.38),
    0 26px 54px rgba(30, 18, 8, 0.32),
    0 4px 0 #2a170a;
}

:root[data-design="ajedrez"] .calendar-card::before {
  top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
  z-index: 5;
  width: auto;
  height: auto;
  border: 1px solid rgba(232, 203, 143, 0.55);
  border-radius: 3px;
  background: none;
  box-shadow: inset 0 0 0 2px rgba(30, 18, 8, 0.5);
  opacity: 1;
}

:root[data-design="ajedrez"] .weekdays {
  border-bottom: 1px solid #6e4c24;
  background: linear-gradient(180deg, #f0dcae, #d6b57a 46%, #b98e4c);
  box-shadow: inset 0 1px 0 rgba(255, 248, 226, 0.6), inset 0 -1px 0 rgba(90, 60, 25, 0.35);
}

:root[data-design="ajedrez"] .weekdays span {
  padding: 11px;
  color: #2a1c0d;
  font-family: var(--font-display);
  font-size: 9px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: none;
  text-shadow: 0 1px 0 rgba(255, 248, 226, 0.4);
}

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

:root[data-design="ajedrez"] .calendar-grid {
  overflow: hidden;
  border: 1px solid #1a1109;
  border-radius: 2px;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.26);
}

:root[data-design="ajedrez"] .calendar-grid .day-cell {
  min-height: 104px;
  padding: 8px;
  border-right: 1px solid rgba(28, 36, 31, 0.24);
  border-bottom: 1px solid rgba(28, 36, 31, 0.24);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

:root[data-design="ajedrez"] .calendar-grid .day-cell:nth-child(odd) {
  background: linear-gradient(150deg, #fbf6e9 0%, var(--board-ivory) 58%, var(--board-ivory-deep) 100%);
}

:root[data-design="ajedrez"] .calendar-grid .day-cell:nth-child(even) {
  background: linear-gradient(155deg, #34473b 0%, var(--board-charcoal) 55%, var(--board-slate) 100%);
  border-right-color: rgba(10, 16, 12, 0.42);
  border-bottom-color: rgba(10, 16, 12, 0.42);
}

:root[data-design="ajedrez"] .calendar-grid .day-cell:nth-child(7n) {
  border-right: 0;
}

:root[data-design="ajedrez"] .calendar-grid .day-cell:nth-last-child(-n + 7) {
  border-bottom: 0;
}

:root[data-design="ajedrez"] .day-cell.is-other:nth-child(odd) {
  background: linear-gradient(150deg, #efe6d2, #e5d8bd);
}

:root[data-design="ajedrez"] .day-cell.is-other:nth-child(even) {
  background: linear-gradient(155deg, #25352c, #19241e);
}

:root[data-design="ajedrez"] .day-cell:nth-child(odd) .day-number {
  color: var(--board-ink);
}

:root[data-design="ajedrez"] .day-cell:nth-child(even) .day-number {
  color: var(--board-cream);
}

:root[data-design="ajedrez"] .day-cell.is-other:nth-child(odd) .day-number {
  color: #8d8068;
}

:root[data-design="ajedrez"] .day-cell.is-other:nth-child(even) .day-number {
  color: #93a395;
}

:root[data-design="ajedrez"] .day-number {
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

:root[data-design="ajedrez"] .day-cell.is-today .day-number {
  background: linear-gradient(145deg, #f2daa6, #c9a25c);
  color: #201607;
  box-shadow: 0 0 0 2px rgba(247, 241, 226, 0.55), 0 0 18px rgba(230, 197, 133, 0.55);
}

:root[data-design="ajedrez"] .day-cell.is-today {
  box-shadow: inset 0 0 0 1px rgba(216, 183, 117, 0.55), inset 0 0 34px rgba(230, 197, 133, 0.14);
}

:root[data-design="ajedrez"] .day-star {
  color: #e7c98b;
  filter: drop-shadow(0 0 5px rgba(231, 201, 139, 0.45));
}

:root[data-design="ajedrez"] .day-cell:nth-child(odd):hover {
  background: linear-gradient(150deg, #fffdf5, #f7edd8);
  box-shadow: inset 0 0 0 1px rgba(166, 127, 54, 0.42), inset 0 0 28px rgba(255, 235, 186, 0.5);
}

:root[data-design="ajedrez"] .day-cell:nth-child(even):hover {
  background: linear-gradient(155deg, #45573f, #314136);
  box-shadow: inset 0 0 0 1px rgba(231, 201, 139, 0.5), inset 0 0 30px rgba(231, 201, 139, 0.16);
}

:root[data-design="ajedrez"] .day-cell.is-selected,
:root[data-design="ajedrez"] .day-cell.is-selected:hover {
  z-index: 2;
  box-shadow: inset 0 0 0 2px #e6c788, inset 0 0 38px rgba(230, 199, 136, 0.28);
}

:root[data-design="ajedrez"] .day-cell:focus-visible {
  outline: 2px solid #e6c788;
  outline-offset: -2px;
}

:root[data-design="ajedrez"] .event-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11px;
  grid-template-areas:
    "time piece"
    "title title";
  align-items: start;
  align-content: center;
  gap: 1px 3px;
  min-height: 21px;
  padding: 3px 5px 4px;
  border: 1px solid rgba(43, 31, 17, 0.18);
  border-left: 2px solid var(--cat);
  border-radius: 2px;
  background: linear-gradient(150deg, rgba(255, 252, 244, 0.98), rgba(243, 233, 212, 0.97));
  color: #1b241e;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65), 0 2px 5px rgba(14, 20, 16, 0.16);
}

:root[data-design="ajedrez"] .event-chip:hover {
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(14, 20, 16, 0.22);
}

:root[data-design="ajedrez"] .event-chip .chip-dot {
  display: none;
}

:root[data-design="ajedrez"] .chip-piece {
  grid-area: piece;
  display: block;
  width: 11px;
  height: 14px;
  margin-top: -1px;
  justify-self: end;
  transition: transform 0.2s var(--scene-ease);
}

:root[data-design="ajedrez"] .event-chip:hover .chip-piece {
  animation: pieceStep 0.5s var(--scene-ease);
}

@keyframes pieceStep {
  0% { transform: translate(0, 0) rotate(0deg); }
  38% { transform: translate(-2px, -2px) rotate(-5deg); }
  72% { transform: translate(1px, 0) rotate(2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

:root[data-design="ajedrez"] .chip-piece[data-tone="light"] {
  color: #fdf8ec;
  stroke: rgba(38, 53, 43, 0.8);
  filter: drop-shadow(0 0 1px rgba(38, 53, 43, 0.55));
}

:root[data-design="ajedrez"] .chip-piece[data-tone="dark"] {
  color: #26352b;
  stroke: rgba(247, 241, 226, 0.45);
}

:root[data-design="ajedrez"] .chip-time {
  grid-area: time;
  align-self: center;
  color: #6a5837;
  font-size: 8px;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

:root[data-design="ajedrez"] .chip-title {
  display: -webkit-box;
  grid-area: title;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 9px;
  line-height: 1.24;
}

:root[data-design="ajedrez"] .event-chip:not(:has(.chip-time)) {
  grid-template-areas: "title piece";
  align-items: center;
}

:root[data-design="ajedrez"] .more-events {
  color: #7a6b50;
}

:root[data-design="ajedrez"] .day-cell:nth-child(even) .more-events {
  color: rgba(247, 241, 226, 0.66);
}

:root[data-design="ajedrez"] .calendar-light {
  opacity: 0.55;
  background:
    radial-gradient(58% 40% at 10% -8%, rgba(255, 235, 183, 0.34), transparent 68%),
    radial-gradient(66% 58% at 106% 108%, rgba(12, 20, 15, 0.24), transparent 62%);
  mix-blend-mode: soft-light;
}

:root[data-design="ajedrez"] .calendar-ambience::before {
  content: "";
  position: absolute;
  right: 3%;
  bottom: 2%;
  width: 120px;
  height: 120px;
  background-color: var(--gold);
  opacity: 0.06;
  -webkit-mask: url("assets/ornament-ajedrez.svg") center / contain no-repeat;
  mask: url("assets/ornament-ajedrez.svg") center / contain no-repeat;
  pointer-events: none;
}

:root[data-design="ajedrez"] .chess-ghost {
  color: #f6e8c6;
  filter: drop-shadow(0 10px 12px rgba(12, 18, 14, 0.5));
}

:root[data-design="ajedrez"] .calendar-card.is-month-enter .chess-ghost {
  animation: knightTour 2.8s var(--scene-ease) 0.25s both;
}

@keyframes knightTour {
  0% { opacity: 0; left: 9%; top: 16%; transform: rotate(-7deg) scale(0.86); }
  12% { opacity: 0.5; }
  30% { left: 31%; top: 25%; transform: rotate(4deg) scale(0.95); }
  48% { left: 47%; top: 41%; transform: rotate(-3deg) scale(1); }
  64% { opacity: 0.42; left: 63%; top: 57%; transform: rotate(5deg) scale(0.96); }
  82% { left: 78%; top: 72%; transform: rotate(-2deg) scale(0.9); opacity: 0.26; }
  100% { opacity: 0; left: 88%; top: 82%; transform: rotate(0deg) scale(0.84); }
}

:root[data-design="ajedrez"][data-theme="dark"] .calendar-card {
  background:
    repeating-linear-gradient(92deg, transparent 0 17px, rgba(255, 226, 174, 0.04) 17px 18px, transparent 18px 34px),
    linear-gradient(126deg, #4b2f1a, #36200f 40%, #241407 80%, #1b0f06);
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 170, 0.16),
    0 0 0 1px rgba(216, 183, 117, 0.28),
    0 28px 58px rgba(0, 0, 0, 0.48),
    0 4px 0 #150b05;
}

:root[data-design="ajedrez"][data-theme="dark"] .calendar-light {
  opacity: 0.38;
}

:root[data-design="ajedrez"][data-theme="dark"] .weekdays {
  background: linear-gradient(180deg, #e3ca97, #c5a367 46%, #a67f45);
}

:root[data-design="ajedrez"][data-theme="dark"] .weekdays span {
  color: #231708;
}

:root[data-design="ajedrez"][data-theme="dark"] .weekdays span:nth-child(6),
:root[data-design="ajedrez"][data-theme="dark"] .weekdays span:nth-child(7) {
  color: #5a2e16;
}

/* =========================================================
   Mar Pacífico · ventana al océano
   ========================================================= */

:root[data-design="mar"] .calendar-card {
  border: 1px solid rgba(146, 230, 230, 0.42);
  border-radius: 26px;
  background:
    radial-gradient(120% 78% at 14% -12%, rgba(180, 247, 245, 0.3), transparent 56%),
    radial-gradient(82% 62% at 100% 0%, rgba(255, 228, 168, 0.18), transparent 56%),
    linear-gradient(168deg, #0e7787 0%, #075463 38%, #053948 68%, #032832 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -34px 64px rgba(1, 20, 27, 0.5),
    0 30px 60px rgba(3, 49, 60, 0.28);
}

:root[data-design="mar"] .calendar-card::before {
  box-shadow: inset 0 0 0 1px rgba(198, 250, 248, 0.26), inset 0 24px 46px rgba(255, 255, 255, 0.05);
}

:root[data-design="mar"] .weekdays {
  border-bottom: 1px solid rgba(190, 244, 243, 0.28);
  background: linear-gradient(180deg, rgba(217, 255, 254, 0.2), rgba(5, 58, 70, 0.3));
  backdrop-filter: blur(6px);
}

:root[data-design="mar"] .weekdays span {
  color: #ddfbfa;
  letter-spacing: 0.18em;
  text-shadow: 0 1px 8px rgba(2, 40, 50, 0.55);
}

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

:root[data-design="mar"] .calendar-grid .day-cell {
  border-right-color: rgba(190, 244, 243, 0.13);
  border-bottom-color: rgba(190, 244, 243, 0.13);
  background: rgba(5, 56, 68, 0.22);
  transition: background 0.22s ease, box-shadow 0.22s ease;
}

:root[data-design="mar"] .calendar-grid .day-cell:nth-child(7n) {
  border-right: 0;
}

:root[data-design="mar"] .calendar-grid .day-cell:nth-last-child(-n + 7) {
  border-bottom: 0;
}

:root[data-design="mar"] .day-cell:nth-child(odd) {
  background: rgba(8, 78, 90, 0.18);
}

:root[data-design="mar"] .day-cell:nth-child(even) {
  background: rgba(4, 44, 55, 0.28);
}

:root[data-design="mar"] .day-cell:hover {
  background: radial-gradient(90% 90% at 50% 0%, rgba(173, 246, 244, 0.2), rgba(7, 69, 82, 0.34));
  box-shadow: inset 0 0 0 1px rgba(190, 250, 248, 0.26);
}

:root[data-design="mar"] .day-cell.is-other {
  background: rgba(3, 34, 43, 0.32);
}

:root[data-design="mar"] .day-cell.is-other .day-number {
  color: rgba(215, 246, 246, 0.42);
}

:root[data-design="mar"] .day-number {
  border-radius: 999px;
  color: #effefe;
  font-family: var(--font-display);
  font-size: 12.5px;
  text-shadow: 0 1px 8px rgba(2, 30, 38, 0.5);
}

:root[data-design="mar"] .day-cell.is-today {
  background: radial-gradient(90% 100% at 22% 4%, rgba(209, 255, 252, 0.22), rgba(7, 84, 96, 0.34) 72%);
  box-shadow: inset 0 0 0 1px rgba(197, 248, 246, 0.42), inset 0 0 34px rgba(151, 232, 231, 0.18);
}

:root[data-design="mar"] .day-cell.is-today .day-number {
  background: linear-gradient(150deg, #fffaea, #e8d1a4);
  color: #063a44;
  box-shadow: 0 0 0 2px rgba(255, 251, 235, 0.35), 0 4px 14px rgba(1, 28, 35, 0.35);
  text-shadow: none;
}

:root[data-design="mar"] .day-star {
  color: #f2d9a2;
  filter: drop-shadow(0 0 6px rgba(242, 217, 162, 0.5));
}

:root[data-design="mar"] .day-cell.is-selected {
  box-shadow: inset 0 0 0 2px rgba(205, 250, 248, 0.65), inset 0 0 40px rgba(151, 232, 231, 0.2);
}

:root[data-design="mar"] .event-chip {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 2px solid var(--cat);
  border-radius: 8px;
  background: linear-gradient(150deg, rgba(243, 255, 254, 0.97), rgba(205, 242, 241, 0.92));
  color: #06333d;
  box-shadow: 0 4px 10px rgba(1, 30, 38, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

:root[data-design="mar"] .event-chip:hover {
  filter: none;
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 7px 16px rgba(1, 30, 38, 0.24);
}

:root[data-design="mar"] .chip-time {
  color: #226872;
}

:root[data-design="mar"] .more-events {
  color: rgba(224, 250, 249, 0.7);
}

:root[data-design="mar"] .calendar-light {
  opacity: 0.7;
  background:
    conic-gradient(from 196deg at 42% -20%, transparent 0 6deg, rgba(208, 255, 250, 0.16) 7deg 10deg, transparent 11deg 18deg, rgba(255, 245, 200, 0.12) 19deg 22deg, transparent 23deg 60deg),
    radial-gradient(58% 50% at 72% -10%, rgba(255, 239, 180, 0.24), transparent 70%);
  animation: seaLightDrift 20s ease-in-out infinite alternate;
}

:root[data-design="mar"] .calendar-wave {
  top: auto;
  bottom: -18%;
  height: 46%;
  opacity: 0.8;
  border-radius: 46% 54% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, rgba(159, 245, 241, 0.13), rgba(4, 50, 62, 0.04));
  box-shadow: 0 -1px 0 rgba(190, 250, 248, 0.24), 0 -18px 34px rgba(159, 245, 241, 0.06);
  animation: boardTide 14s ease-in-out infinite alternate;
}

:root[data-design="mar"] .calendar-ambience::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(ellipse 36% 22% at 18% 8%, transparent 0 22px, rgba(186, 255, 250, 0.07) 23px 24px),
    repeating-radial-gradient(ellipse 30% 18% at 78% 22%, transparent 0 28px, rgba(255, 249, 215, 0.05) 29px 30px);
  opacity: 0.85;
  animation: causticDrift 30s ease-in-out infinite alternate;
  pointer-events: none;
}

:root[data-design="mar"] .calendar-ambience::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 16% 34%, rgba(255, 255, 255, 0.32) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 27% 61%, rgba(255, 255, 255, 0.24) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 29%, rgba(255, 255, 255, 0.2) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 82% 54%, rgba(255, 255, 255, 0.26) 0 1px, transparent 2px),
    radial-gradient(circle at 48% 82%, rgba(255, 255, 255, 0.16) 0 1.5px, transparent 2.5px);
  opacity: 0.55;
  animation: bubbleField 24s ease-in-out infinite alternate;
  pointer-events: none;
}

:root[data-design="mar"] .month-title-line h1 {
  background: linear-gradient(115deg, var(--ink) 42%, #0b7d87 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

:root[data-design="mar"] .month-year {
  border-color: rgba(11, 125, 135, 0.3);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.8), rgba(213, 240, 239, 0.7));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

:root[data-design="mar"] .panel,
:root[data-design="mar"] .year-rail {
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.78), rgba(238, 249, 248, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 16px 38px rgba(7, 84, 96, 0.08);
}

:root[data-design="mar"] .today-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 26px 52px rgba(3, 49, 60, 0.3);
}

:root[data-design="mar"] .topbar {
  border-bottom-color: rgba(11, 125, 135, 0.16);
  background: linear-gradient(180deg, rgba(241, 253, 252, 0.92), rgba(231, 242, 241, 0.84));
  backdrop-filter: blur(16px) saturate(1.1);
}

:root[data-design="mar"]:not([data-theme="dark"]) .page-wash {
  background:
    radial-gradient(1100px 660px at 80% -16%, rgba(255, 246, 203, 0.6), transparent 62%),
    radial-gradient(880px 600px at 2% 18%, rgba(118, 213, 212, 0.42), transparent 66%),
    repeating-radial-gradient(ellipse 42% 25% at 24% 12%, transparent 0 30px, rgba(255, 255, 255, 0.055) 31px 32px),
    linear-gradient(180deg, #dcf2ee 0%, #c3e7e3 34%, #a3dada 66%, #84c8ca 100%);
}

:root[data-design="mar"]:not([data-theme="dark"]) .sea-fish {
  color: rgba(6, 83, 94, 0.46);
  opacity: 0.72;
}

:root[data-design="mar"]:not([data-theme="dark"]) .sea-fish.fish-b {
  color: rgba(166, 106, 45, 0.5);
}

:root[data-design="mar"]:not([data-theme="dark"]) .sea-jelly {
  color: rgba(9, 107, 118, 0.36);
  opacity: 0.66;
}

:root[data-design="mar"]:not([data-theme="dark"]) .sea-kelp {
  color: rgba(8, 96, 88, 0.5);
  opacity: 0.75;
}

:root[data-design="mar"]:not([data-theme="dark"]) .sea-coral {
  color: rgba(166, 106, 45, 0.5);
  opacity: 0.66;
}

:root[data-design="mar"]:not([data-theme="dark"]) .sea-light {
  opacity: 0.9;
}

:root[data-design="mar"] .day-number {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

:root[data-design="mar"] .weekdays span {
  font-size: 9.5px;
  font-weight: 800;
}

:root[data-design="mar"][data-theme="dark"] .calendar-card {
  border-color: rgba(95, 215, 220, 0.3);
  background:
    radial-gradient(120% 78% at 14% -12%, rgba(110, 235, 235, 0.18), transparent 56%),
    radial-gradient(82% 62% at 100% 0%, rgba(231, 184, 120, 0.1), transparent 56%),
    linear-gradient(168deg, #07515f 0%, #043947 40%, #032732 70%, #021a22 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -34px 64px rgba(0, 0, 0, 0.42),
    0 30px 64px rgba(0, 0, 0, 0.5);
}

:root[data-design="mar"][data-theme="dark"] .month-title-line h1 {
  background: linear-gradient(115deg, #e9f8f9 40%, #6fe0e4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

:root[data-design="mar"][data-theme="dark"] .panel,
:root[data-design="mar"][data-theme="dark"] .year-rail {
  background: linear-gradient(170deg, rgba(13, 46, 56, 0.86), rgba(8, 36, 46, 0.9));
  box-shadow: inset 0 1px 0 rgba(151, 235, 237, 0.1), 0 16px 38px rgba(0, 0, 0, 0.3);
}

:root[data-design="mar"][data-theme="dark"] .month-year {
  border-color: rgba(95, 215, 220, 0.28);
  background: linear-gradient(150deg, rgba(12, 46, 57, 0.9), rgba(8, 36, 46, 0.9));
}

:root[data-design="mar"][data-theme="dark"] .topbar {
  border-bottom-color: rgba(95, 215, 220, 0.16);
  background: linear-gradient(180deg, rgba(4, 26, 34, 0.92), rgba(4, 24, 32, 0.86));
}

@keyframes seaLightDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.02); opacity: 0.55; }
  to { transform: translate3d(3%, 2%, 0) scale(1.06); opacity: 0.85; }
}

@keyframes boardTide {
  from { transform: translate3d(-3%, 2%, 0) rotate(-0.6deg); }
  to { transform: translate3d(3%, -2%, 0) rotate(0.6deg); }
}

@keyframes bubbleField {
  from { transform: translate3d(0, 6px, 0); opacity: 0.4; }
  to { transform: translate3d(0, -8px, 0); opacity: 0.65; }
}

/* =========================================================
   Luz y fe · misal iluminado
   ========================================================= */

:root[data-design="catolica"] .calendar-card {
  border: 1px solid #b1843d;
  border-radius: 8px 8px 14px 14px;
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(255, 246, 219, 0.9), transparent 55%),
    repeating-linear-gradient(90deg, rgba(138, 90, 36, 0.022) 0 1px, transparent 1px 26px),
    linear-gradient(174deg, #fdf8ee, #f6ecdb);
  box-shadow:
    inset 0 0 0 4px rgba(253, 248, 238, 0.9),
    inset 0 0 0 5px rgba(177, 132, 61, 0.28),
    0 24px 50px rgba(91, 63, 31, 0.14);
}

:root[data-design="catolica"] .calendar-card::before {
  inset: 6px;
  z-index: 4;
  border: 1px solid rgba(177, 132, 61, 0.28);
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px rgba(253, 248, 238, 0.42);
}

:root[data-design="catolica"] .weekdays {
  border-bottom: 1px solid #b1843d;
  background: linear-gradient(180deg, #6e2f28, #4d1e1a);
  box-shadow: inset 0 1px 0 rgba(255, 226, 176, 0.2);
}

:root[data-design="catolica"] .weekdays span {
  color: #f3d9a2;
  letter-spacing: 0.2em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

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

:root[data-design="catolica"] .calendar-grid .day-cell {
  border-right-color: rgba(177, 132, 61, 0.16);
  border-bottom-color: rgba(177, 132, 61, 0.16);
  background: transparent;
}

:root[data-design="catolica"] .calendar-grid .day-cell:nth-child(7n) {
  border-right: 0;
}

:root[data-design="catolica"] .calendar-grid .day-cell:nth-last-child(-n + 7) {
  border-bottom: 0;
}

:root[data-design="catolica"] .day-cell.is-weekend {
  background: linear-gradient(160deg, rgba(250, 240, 224, 0.55), rgba(246, 232, 210, 0.45));
}

:root[data-design="catolica"] .day-cell.is-other {
  background: rgba(234, 223, 203, 0.45);
}

:root[data-design="catolica"] .day-cell:hover {
  background: radial-gradient(100% 100% at 50% 0%, #fffaf0, #f6e9d2);
  box-shadow: inset 0 0 0 1px rgba(177, 132, 61, 0.26);
}

:root[data-design="catolica"] .day-number {
  color: #3b2a18;
  font-size: 14px;
  font-weight: 700;
}

:root[data-design="catolica"] .day-cell.is-other .day-number {
  color: #a4947c;
}

:root[data-design="catolica"] .day-cell.is-today {
  background: radial-gradient(90% 100% at 50% 0%, rgba(255, 244, 214, 0.95), rgba(246, 231, 207, 0.8));
  box-shadow: inset 0 0 0 1px rgba(177, 132, 61, 0.5), inset 0 0 28px rgba(224, 187, 116, 0.2);
}

:root[data-design="catolica"] .day-cell.is-today .day-number {
  background: linear-gradient(150deg, #9c4935, #6e2f28);
  color: #fdf5e6;
  box-shadow: 0 0 0 2px rgba(216, 172, 97, 0.4), 0 3px 10px rgba(90, 40, 25, 0.28);
}

:root[data-design="catolica"] .day-star {
  filter: drop-shadow(0 0 5px rgba(177, 132, 61, 0.4));
}

:root[data-design="catolica"] .event-chip {
  border: 1px solid rgba(177, 132, 61, 0.26);
  border-left: 2px solid var(--cat);
  border-radius: 4px;
  background: linear-gradient(150deg, rgba(255, 252, 243, 0.98), rgba(248, 238, 220, 0.96));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 5px rgba(91, 63, 31, 0.08);
}

:root[data-design="catolica"] .event-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(177, 132, 61, 0.45);
  box-shadow: 0 4px 10px rgba(91, 63, 31, 0.14);
}

:root[data-design="catolica"] .calendar-light {
  opacity: 0.9;
  background:
    linear-gradient(168deg, rgba(255, 240, 204, 0.3), transparent 42%),
    radial-gradient(58% 30% at 18% 0%, rgba(255, 231, 160, 0.34), transparent 70%);
  mix-blend-mode: soft-light;
}

:root[data-design="catolica"] .calendar-wave {
  top: auto;
  bottom: 0;
  height: 26%;
  opacity: 0.7;
  background: linear-gradient(90deg, rgba(64, 90, 130, 0.1), rgba(163, 54, 54, 0.1), rgba(177, 132, 61, 0.14), rgba(63, 112, 82, 0.1), rgba(94, 64, 130, 0.09));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
  mask-image: linear-gradient(180deg, transparent, #000 60%);
  animation: stainedBreath 18s ease-in-out infinite alternate;
}

:root[data-design="catolica"] .calendar-ambience::before {
  content: "";
  position: absolute;
  top: -48%;
  left: 50%;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid rgba(177, 132, 61, 0.22);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 22px rgba(177, 132, 61, 0.035);
  pointer-events: none;
}

:root[data-design="catolica"] .calendar-ambience::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 10px;
  width: 54px;
  height: 74px;
  background-color: var(--gold);
  opacity: 0.16;
  -webkit-mask: url("assets/ornament-catolica.svg") center / contain no-repeat;
  mask: url("assets/ornament-catolica.svg") center / contain no-repeat;
  pointer-events: none;
}

:root[data-design="catolica"] .panel,
:root[data-design="catolica"] .year-rail {
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(224, 187, 116, 0.09), transparent 60%),
    linear-gradient(170deg, rgba(255, 251, 242, 0.94), rgba(247, 239, 224, 0.9));
}

:root[data-design="catolica"] .topbar {
  border-bottom-color: rgba(177, 132, 61, 0.22);
  background: linear-gradient(180deg, rgba(248, 241, 228, 0.94), rgba(243, 234, 217, 0.86));
  backdrop-filter: blur(16px);
}

:root[data-design="catolica"][data-theme="dark"] .calendar-card {
  border-color: rgba(216, 172, 97, 0.42);
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(216, 172, 97, 0.12), transparent 55%),
    repeating-linear-gradient(90deg, rgba(226, 200, 155, 0.018) 0 1px, transparent 1px 26px),
    linear-gradient(174deg, #211810, #191109);
  box-shadow:
    inset 0 0 0 4px rgba(31, 23, 16, 0.9),
    inset 0 0 0 5px rgba(216, 172, 97, 0.22),
    0 24px 54px rgba(0, 0, 0, 0.46);
}

:root[data-design="catolica"][data-theme="dark"] .day-number {
  color: #f0e2cb;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

:root[data-design="catolica"][data-theme="dark"] .day-cell.is-other .day-number {
  color: #8d7b64;
}

:root[data-design="catolica"][data-theme="dark"] .day-cell:hover {
  background: radial-gradient(100% 100% at 50% 0%, #2c2116, #241a11);
}

:root[data-design="catolica"][data-theme="dark"] .day-cell.is-weekend {
  background: linear-gradient(160deg, rgba(43, 32, 19, 0.55), rgba(35, 26, 16, 0.4));
}

:root[data-design="catolica"][data-theme="dark"] .day-cell.is-other {
  background: rgba(45, 34, 24, 0.4);
}

:root[data-design="catolica"][data-theme="dark"] .day-cell.is-today {
  background: radial-gradient(90% 100% at 50% 0%, rgba(67, 47, 22, 0.85), rgba(43, 32, 19, 0.65));
}

:root[data-design="catolica"][data-theme="dark"] .event-chip {
  border-color: rgba(216, 172, 97, 0.28);
  border-left-color: var(--cat);
  background: linear-gradient(150deg, rgba(58, 43, 24, 0.92), rgba(44, 32, 18, 0.94));
  color: #f6ecdb;
}

:root[data-design="catolica"][data-theme="dark"] .chip-time {
  color: #d8b06b;
}

:root[data-design="catolica"][data-theme="dark"] .panel,
:root[data-design="catolica"][data-theme="dark"] .year-rail {
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(216, 172, 97, 0.06), transparent 60%),
    linear-gradient(170deg, rgba(36, 26, 17, 0.94), rgba(28, 20, 13, 0.92));
}

:root[data-design="catolica"][data-theme="dark"] .topbar {
  border-bottom-color: rgba(216, 172, 97, 0.2);
  background: linear-gradient(180deg, rgba(25, 18, 12, 0.94), rgba(21, 16, 11, 0.88));
}

@keyframes stainedBreath {
  from { opacity: 0.5; transform: translateY(4px); }
  to { opacity: 0.8; transform: translateY(-4px); }
}

/* =========================================================
   Jungla · diario de hojas prensadas
   ========================================================= */

:root[data-design="jungla"] .calendar-card {
  border: 1px solid #8aa878;
  border-radius: 26px 12px 26px 12px;
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(252, 249, 214, 0.75), transparent 55%),
    repeating-linear-gradient(104deg, rgba(38, 90, 51, 0.025) 0 1px, transparent 1px 14px),
    linear-gradient(170deg, #fbfdf4, #f2f8e8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 0 0 4px rgba(251, 253, 247, 0.55),
    inset 0 0 0 5px rgba(185, 203, 169, 0.5),
    0 24px 50px rgba(19, 56, 33, 0.14);
}

:root[data-design="jungla"] .calendar-card::before {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 0 0 2px rgba(138, 168, 120, 0.22);
}

:root[data-design="jungla"] .weekdays {
  border-bottom: 1px solid #c99a37;
  background: linear-gradient(180deg, #225d3c, #123a25);
  box-shadow: inset 0 1px 0 rgba(214, 244, 206, 0.16);
}

:root[data-design="jungla"] .weekdays span {
  color: #eaf6dc;
  font-size: 9.5px;
  letter-spacing: 0.17em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}

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

:root[data-design="jungla"] .calendar-grid .day-cell {
  border-right-color: rgba(185, 203, 169, 0.36);
  border-bottom-color: rgba(185, 203, 169, 0.36);
  background: transparent;
}

:root[data-design="jungla"] .calendar-grid .day-cell:nth-child(7n) {
  border-right: 0;
}

:root[data-design="jungla"] .calendar-grid .day-cell:nth-last-child(-n + 7) {
  border-bottom: 0;
}

:root[data-design="jungla"] .day-cell.is-weekend {
  background: rgba(230, 242, 219, 0.5);
}

:root[data-design="jungla"] .day-cell.is-other {
  background: rgba(227, 236, 219, 0.45);
}

:root[data-design="jungla"] .day-cell:hover {
  background: radial-gradient(110% 100% at 20% 0%, #fdfef7, #eef7e3);
  box-shadow: inset 0 0 0 1px rgba(23, 101, 67, 0.18);
}

:root[data-design="jungla"] .day-number {
  color: #233a29;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
}

:root[data-design="jungla"] .day-cell.is-other .day-number {
  color: #93a48f;
}

:root[data-design="jungla"] .day-cell.is-today {
  background: radial-gradient(90% 100% at 18% 0%, rgba(255, 250, 205, 0.95), rgba(228, 241, 217, 0.8));
  box-shadow: inset 0 0 0 1px rgba(201, 154, 55, 0.4), inset 0 0 30px rgba(249, 226, 150, 0.2);
}

:root[data-design="jungla"] .day-cell.is-today .day-number {
  background: linear-gradient(150deg, #23754e, #0f4d32);
  color: #f6fbea;
  box-shadow: 0 0 0 2px rgba(201, 154, 55, 0.45), 0 3px 0 #c99a37;
}

:root[data-design="jungla"] .day-star {
  filter: drop-shadow(0 0 5px rgba(201, 154, 55, 0.45));
}

:root[data-design="jungla"] .event-chip {
  border: 1px solid rgba(23, 101, 67, 0.16);
  border-left: 2px solid var(--cat);
  border-radius: 9px 3px 9px 3px;
  background: linear-gradient(150deg, rgba(255, 254, 248, 0.98), rgba(243, 248, 235, 0.95));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 5px rgba(19, 56, 33, 0.07);
}

:root[data-design="jungla"] .event-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(23, 101, 67, 0.32);
  box-shadow: 0 4px 10px rgba(19, 56, 33, 0.13);
}

:root[data-design="jungla"] .calendar-light {
  opacity: 0.85;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 246, 189, 0.3) 0 5%, transparent 12%),
    radial-gradient(circle at 35% 26%, rgba(255, 246, 189, 0.22) 0 3.5%, transparent 10%),
    radial-gradient(circle at 72% 8%, rgba(255, 246, 189, 0.24) 0 4.5%, transparent 11%),
    radial-gradient(circle at 86% 32%, rgba(210, 245, 190, 0.18) 0 4%, transparent 10%),
    radial-gradient(circle at 58% 48%, rgba(255, 246, 189, 0.14) 0 3%, transparent 9%);
  animation: dappleShift 24s ease-in-out infinite alternate;
}

:root[data-design="jungla"] .calendar-wave {
  top: auto;
  bottom: 0;
  height: 24%;
  opacity: 0.55;
  background: linear-gradient(180deg, transparent, rgba(89, 142, 92, 0.16));
  animation: dappleShift 26s ease-in-out infinite alternate-reverse;
}

:root[data-design="jungla"] .calendar-ambience::before {
  content: "";
  position: absolute;
  top: -14px;
  right: -10px;
  width: 88px;
  height: 104px;
  background-color: var(--accent);
  opacity: 0.1;
  -webkit-mask: url("assets/ornament-jungla.svg") center / contain no-repeat;
  mask: url("assets/ornament-jungla.svg") center / contain no-repeat;
  transform: rotate(16deg);
  pointer-events: none;
}

:root[data-design="jungla"] .calendar-ambience::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 8px;
  width: 46px;
  height: 58px;
  background-color: var(--accent);
  opacity: 0.08;
  -webkit-mask: url("assets/ornament-jungla.svg") center / contain no-repeat;
  mask: url("assets/ornament-jungla.svg") center / contain no-repeat;
  transform: rotate(-24deg);
  pointer-events: none;
}

:root[data-design="jungla"] .panel,
:root[data-design="jungla"] .year-rail {
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(201, 154, 55, 0.07), transparent 60%),
    linear-gradient(170deg, rgba(253, 255, 248, 0.94), rgba(243, 248, 237, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 16px 38px rgba(19, 56, 33, 0.07);
}

:root[data-design="jungla"] .topbar {
  border-bottom-color: rgba(23, 101, 67, 0.16);
  background: linear-gradient(180deg, rgba(242, 248, 235, 0.94), rgba(237, 243, 229, 0.86));
  backdrop-filter: blur(16px);
}

:root[data-design="jungla"][data-theme="dark"] .calendar-card {
  border-color: rgba(122, 209, 151, 0.3);
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(225, 184, 102, 0.1), transparent 55%),
    repeating-linear-gradient(104deg, rgba(122, 209, 151, 0.014) 0 1px, transparent 1px 14px),
    linear-gradient(170deg, #10291b, #081a10);
  box-shadow:
    inset 0 1px 0 rgba(152, 213, 170, 0.12),
    inset 0 0 0 4px rgba(12, 34, 22, 0.7),
    inset 0 0 0 5px rgba(54, 91, 64, 0.6),
    0 24px 54px rgba(0, 0, 0, 0.46);
}

:root[data-design="jungla"][data-theme="dark"] .day-number {
  color: #d9ecd2;
}

:root[data-design="jungla"][data-theme="dark"] .day-cell.is-other .day-number {
  color: #6d8a70;
}

:root[data-design="jungla"][data-theme="dark"] .day-cell:hover {
  background: radial-gradient(110% 100% at 20% 0%, #173827, #122e1e);
}

:root[data-design="jungla"][data-theme="dark"] .day-cell.is-weekend {
  background: rgba(23, 58, 37, 0.4);
}

:root[data-design="jungla"][data-theme="dark"] .day-cell.is-other {
  background: rgba(23, 53, 34, 0.42);
}

:root[data-design="jungla"][data-theme="dark"] .day-cell.is-today {
  background: radial-gradient(90% 100% at 18% 0%, rgba(64, 88, 37, 0.55), rgba(25, 59, 37, 0.7));
}

:root[data-design="jungla"][data-theme="dark"] .event-chip {
  border-color: rgba(122, 209, 151, 0.2);
  border-left-color: var(--cat);
  background: linear-gradient(150deg, rgba(31, 60, 40, 0.95), rgba(20, 44, 29, 0.95));
  color: #eef7e8;
}

:root[data-design="jungla"][data-theme="dark"] .chip-time {
  color: #9ad3a9;
}

:root[data-design="jungla"][data-theme="dark"] .panel,
:root[data-design="jungla"][data-theme="dark"] .year-rail {
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(225, 184, 102, 0.05), transparent 60%),
    linear-gradient(170deg, rgba(19, 43, 28, 0.94), rgba(13, 33, 21, 0.92));
}

:root[data-design="jungla"][data-theme="dark"] .topbar {
  border-bottom-color: rgba(122, 209, 151, 0.16);
  background: linear-gradient(180deg, rgba(9, 28, 18, 0.94), rgba(7, 22, 15, 0.88));
}

@keyframes dappleShift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.03); opacity: 0.65; }
  to { transform: translate3d(2%, 1.5%, 0) scale(1.07); opacity: 0.9; }
}

/* =========================================================
   Victoriana · folio encuadernado
   ========================================================= */

:root[data-design="victoriana"] .calendar-card {
  padding: clamp(6px, 0.65vw, 10px);
  border: 1px solid #6b4a25;
  border-radius: 4px;
  background:
    repeating-linear-gradient(96deg, transparent 0 21px, rgba(255, 224, 170, 0.05) 21px 22px, transparent 22px 43px),
    linear-gradient(128deg, #4a2a22, #331c16 52%, #24130f);
  box-shadow:
    inset 0 0 0 1px rgba(201, 160, 97, 0.45),
    0 26px 50px rgba(43, 28, 14, 0.26);
}

:root[data-design="victoriana"] .calendar-card::before {
  top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
  z-index: 4;
  width: auto;
  height: auto;
  border: 1px solid rgba(201, 160, 97, 0.4);
  border-radius: 2px;
  background: none;
  box-shadow: inset 0 0 0 2px rgba(20, 11, 7, 0.4);
  pointer-events: none;
}

:root[data-design="victoriana"] .weekdays {
  border-bottom: 2px double #9a7834;
  background: linear-gradient(180deg, #f5e8cc, #e9d6ae);
  box-shadow: inset 0 1px 0 rgba(255, 250, 236, 0.7);
}

:root[data-design="victoriana"] .weekdays span {
  color: #7a2f29;
  font-size: 9.5px;
  letter-spacing: 0.18em;
}

:root[data-design="victoriana"] .day-number {
  color: #3a2418;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
}

:root[data-design="victoriana"] .day-cell.is-other .day-number {
  color: #9c8a70;
}

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

:root[data-design="victoriana"] .calendar-grid {
  border: 1px solid rgba(90, 60, 30, 0.28);
  border-radius: 1px;
  overflow: hidden;
  background: #fbf5e7;
}

:root[data-design="victoriana"] .calendar-grid .day-cell {
  border-right-color: rgba(154, 120, 52, 0.28);
  border-bottom-color: rgba(154, 120, 52, 0.28);
  background: linear-gradient(160deg, rgba(255, 251, 241, 0.5), rgba(250, 242, 226, 0.3));
}

:root[data-design="victoriana"] .calendar-grid .day-cell:nth-child(7n) {
  border-right: 0;
}

:root[data-design="victoriana"] .calendar-grid .day-cell:nth-last-child(-n + 7) {
  border-bottom: 0;
}

:root[data-design="victoriana"] .day-cell.is-weekend {
  background: linear-gradient(160deg, rgba(247, 238, 220, 0.75), rgba(242, 230, 208, 0.6));
}

:root[data-design="victoriana"] .day-cell.is-other {
  background: rgba(236, 226, 207, 0.55);
}

:root[data-design="victoriana"] .day-cell:hover {
  background: radial-gradient(100% 100% at 50% 0%, #fdf8ec, #f5ebd8);
  box-shadow: inset 0 0 0 1px rgba(154, 120, 52, 0.3);
}

:root[data-design="victoriana"] .day-cell.is-today {
  background: radial-gradient(90% 100% at 50% 0%, rgba(250, 235, 220, 0.95), rgba(246, 226, 210, 0.7));
  box-shadow: inset 0 0 0 1px rgba(154, 120, 52, 0.45), inset 0 0 26px rgba(154, 120, 52, 0.1);
}

:root[data-design="victoriana"] .day-cell.is-today .day-number {
  box-shadow: 0 0 0 2px rgba(201, 160, 97, 0.45), 0 2px 0 var(--gold);
}

:root[data-design="victoriana"] .event-chip {
  border: 1px solid rgba(154, 120, 52, 0.24);
  border-left: 2px solid var(--cat);
  background: linear-gradient(150deg, rgba(255, 251, 241, 0.98), rgba(248, 240, 224, 0.96));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}

:root[data-design="victoriana"] .event-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(154, 120, 52, 0.45);
  box-shadow: 0 3px 8px rgba(43, 28, 14, 0.12);
}

:root[data-design="victoriana"] .calendar-light {
  opacity: 0.8;
  background:
    radial-gradient(60% 42% at 8% -6%, rgba(255, 228, 174, 0.32), transparent 70%),
    radial-gradient(50% 40% at 100% 100%, rgba(122, 47, 41, 0.12), transparent 72%);
  mix-blend-mode: soft-light;
}

:root[data-design="victoriana"] .calendar-ambience::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 64px;
  height: 64px;
  background-color: var(--gold);
  opacity: 0.18;
  -webkit-mask: url("assets/ornament-victoriana.svg") center / contain no-repeat;
  mask: url("assets/ornament-victoriana.svg") center / contain no-repeat;
  transform: scaleX(-1);
  pointer-events: none;
}

:root[data-design="victoriana"] .calendar-ambience::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 54px;
  height: 54px;
  background-color: var(--gold);
  opacity: 0.14;
  -webkit-mask: url("assets/ornament-victoriana.svg") center / contain no-repeat;
  mask: url("assets/ornament-victoriana.svg") center / contain no-repeat;
  transform: rotate(180deg);
  pointer-events: none;
}

:root[data-design="victoriana"] .panel,
:root[data-design="victoriana"] .year-rail {
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(154, 120, 52, 0.07), transparent 60%),
    linear-gradient(170deg, rgba(252, 247, 236, 0.96), rgba(246, 238, 224, 0.92));
  box-shadow: inset 0 0 0 1px rgba(201, 160, 97, 0.24), var(--shadow-sm);
}

:root[data-design="victoriana"] .topbar {
  border-bottom-color: rgba(154, 120, 52, 0.24);
  background: linear-gradient(180deg, rgba(244, 236, 221, 0.94), rgba(241, 233, 218, 0.86));
  backdrop-filter: blur(16px);
}

:root[data-design="victoriana"][data-theme="dark"] .calendar-card {
  border-color: rgba(208, 174, 107, 0.35);
  background:
    repeating-linear-gradient(96deg, transparent 0 21px, rgba(255, 224, 170, 0.035) 21px 22px, transparent 22px 43px),
    linear-gradient(128deg, #3a2019, #26130f 52%, #1a0c09);
  box-shadow:
    inset 0 0 0 1px rgba(208, 174, 107, 0.32),
    0 26px 54px rgba(0, 0, 0, 0.5);
}

:root[data-design="victoriana"][data-theme="dark"] .weekdays {
  background: linear-gradient(180deg, #3c2a1d, #2c1d14);
}

:root[data-design="victoriana"][data-theme="dark"] .weekdays span {
  color: #e3c08a;
}

:root[data-design="victoriana"][data-theme="dark"] .weekdays span:nth-child(6),
:root[data-design="victoriana"][data-theme="dark"] .weekdays span:nth-child(7) {
  color: #c99183;
}

:root[data-design="victoriana"][data-theme="dark"] .calendar-grid {
  background: #1b0f09;
}

:root[data-design="victoriana"][data-theme="dark"] .calendar-grid .day-cell {
  background: linear-gradient(160deg, rgba(48, 34, 23, 0.6), rgba(38, 25, 17, 0.5));
}

:root[data-design="victoriana"][data-theme="dark"] .day-number {
  color: #f2e2c4;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
}

:root[data-design="victoriana"][data-theme="dark"] .day-cell.is-other .day-number {
  color: #a58c6a;
}

:root[data-design="victoriana"][data-theme="dark"] .day-cell.is-weekend {
  background: rgba(54, 38, 26, 0.55);
}

:root[data-design="victoriana"][data-theme="dark"] .day-cell.is-other {
  background: rgba(46, 32, 22, 0.5);
}

:root[data-design="victoriana"][data-theme="dark"] .day-cell:hover {
  background: radial-gradient(100% 100% at 50% 0%, #3a2a1a, #2f2114);
}

:root[data-design="victoriana"][data-theme="dark"] .day-cell.is-today {
  background: radial-gradient(90% 100% at 50% 0%, rgba(92, 48, 40, 0.7), rgba(58, 32, 24, 0.75));
}

:root[data-design="victoriana"][data-theme="dark"] .event-chip {
  border-color: rgba(208, 174, 107, 0.24);
  border-left-color: var(--cat);
  background: linear-gradient(150deg, rgba(56, 39, 25, 0.94), rgba(42, 28, 17, 0.95));
  color: #f3e8d3;
}

:root[data-design="victoriana"][data-theme="dark"] .chip-time {
  color: #d5b77d;
}

:root[data-design="victoriana"][data-theme="dark"] .panel,
:root[data-design="victoriana"][data-theme="dark"] .year-rail {
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(208, 174, 107, 0.06), transparent 60%),
    linear-gradient(170deg, rgba(35, 24, 16, 0.95), rgba(26, 17, 11, 0.93));
}

:root[data-design="victoriana"][data-theme="dark"] .topbar {
  border-bottom-color: rgba(208, 174, 107, 0.2);
  background: linear-gradient(180deg, rgba(28, 19, 13, 0.94), rgba(21, 16, 12, 0.88));
}

/* =========================================================
   Futurista · panel de navegación
   ========================================================= */

:root[data-design="futurista"] .calendar-card {
  border-color: rgba(7, 134, 156, 0.38);
  background:
    linear-gradient(rgba(7, 134, 156, 0.045) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(7, 134, 156, 0.045) 1px, transparent 1px) 0 0 / 28px 100%,
    linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(239, 247, 249, 0.86));
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 26px 60px rgba(5, 24, 32, 0.16);
}

:root[data-design="futurista"] .weekdays {
  border-bottom: 1px solid rgba(34, 211, 238, 0.3);
  background: linear-gradient(180deg, #071c26, #0b2b38);
}

:root[data-design="futurista"] .weekdays span {
  color: #bdefea;
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.3);
}

:root[data-design="futurista"] .day-number {
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

:root[data-design="futurista"] .day-cell.is-other .day-number {
  color: var(--muted-soft);
}

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

:root[data-design="futurista"] .calendar-grid .day-cell {
  border-right-color: rgba(7, 134, 156, 0.14);
  border-bottom-color: rgba(7, 134, 156, 0.14);
  background: rgba(255, 255, 255, 0.18);
}

:root[data-design="futurista"] .calendar-grid .day-cell:nth-child(7n) {
  border-right: 0;
}

:root[data-design="futurista"] .calendar-grid .day-cell:nth-last-child(-n + 7) {
  border-bottom: 0;
}

:root[data-design="futurista"] .day-cell.is-weekend {
  background: rgba(7, 134, 156, 0.045);
}

:root[data-design="futurista"] .day-cell.is-other {
  background: rgba(220, 232, 236, 0.4);
}

:root[data-design="futurista"] .day-cell:hover {
  background: linear-gradient(160deg, rgba(217, 243, 248, 0.75), rgba(236, 247, 250, 0.85));
  box-shadow: inset 0 0 0 1px rgba(7, 134, 156, 0.35), inset 0 0 24px rgba(34, 211, 238, 0.1);
}

:root[data-design="futurista"] .day-cell.is-today {
  background: linear-gradient(160deg, rgba(217, 243, 248, 0.9), rgba(223, 245, 249, 0.65));
  box-shadow: inset 0 0 0 1px rgba(7, 134, 156, 0.45), inset 0 0 30px rgba(34, 211, 238, 0.14);
}

:root[data-design="futurista"] .day-cell.is-today .day-number {
  box-shadow: 0 0 16px rgba(7, 134, 156, 0.5);
}

:root[data-design="futurista"] .event-chip {
  border-left: 2px solid var(--cat);
  background: linear-gradient(150deg, rgba(8, 35, 46, 0.92), rgba(5, 24, 32, 0.9));
  color: #dffbff;
  box-shadow: 0 2px 8px rgba(5, 24, 32, 0.14), inset 0 1px 0 rgba(185, 247, 255, 0.1);
}

:root[data-design="futurista"] .event-chip:hover {
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(5, 24, 32, 0.22), 0 0 0 1px rgba(34, 211, 238, 0.25);
}

:root[data-design="futurista"] .chip-time {
  color: #8fe0ea;
}

:root[data-design="futurista"] .chip-dot {
  box-shadow: 0 0 6px var(--cat);
}

:root[data-design="futurista"] .calendar-light {
  opacity: 0.6;
  overflow: hidden;
  background: none;
}

/* Barrido compuesto con transform: mismo haz de luz, sin repintar la tarjeta. */
:root[data-design="futurista"] .calendar-light::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 42%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(34, 211, 238, 0.06) 34%,
    rgba(34, 211, 238, 0.26) 50%,
    rgba(34, 211, 238, 0.06) 66%,
    transparent 100%
  );
  transform: translate3d(0, -120%, 0);
  animation: hudScanSweep 8s linear infinite;
}

@keyframes hudScanSweep {
  0% {
    transform: translate3d(0, -120%, 0);
  }
  55%,
  100% {
    transform: translate3d(0, 360%, 0);
  }
}

:root[data-design="futurista"] .calendar-ambience::before {
  content: "";
  position: absolute;
  inset: 5px;
  background:
    linear-gradient(#34d3ee, #34d3ee) left top / 18px 1px no-repeat,
    linear-gradient(#34d3ee, #34d3ee) left top / 1px 18px no-repeat,
    linear-gradient(#34d3ee, #34d3ee) right top / 18px 1px no-repeat,
    linear-gradient(#34d3ee, #34d3ee) right top / 1px 18px no-repeat,
    linear-gradient(#34d3ee, #34d3ee) left bottom / 18px 1px no-repeat,
    linear-gradient(#34d3ee, #34d3ee) left bottom / 1px 18px no-repeat,
    linear-gradient(#34d3ee, #34d3ee) right bottom / 18px 1px no-repeat,
    linear-gradient(#34d3ee, #34d3ee) right bottom / 1px 18px no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

:root[data-design="futurista"] .calendar-ambience::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 18%;
  background: linear-gradient(180deg, transparent, rgba(34, 211, 238, 0.1));
  pointer-events: none;
}

:root[data-design="futurista"] .panel,
:root[data-design="futurista"] .year-rail {
  background:
    linear-gradient(rgba(7, 134, 156, 0.035) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(7, 134, 156, 0.035) 1px, transparent 1px) 0 0 / 24px 100%,
    linear-gradient(170deg, rgba(250, 255, 255, 0.92), rgba(239, 247, 249, 0.86));
}

:root[data-design="futurista"] .topbar {
  border-bottom-color: rgba(7, 134, 156, 0.2);
  background: linear-gradient(180deg, rgba(238, 246, 248, 0.92), rgba(233, 241, 244, 0.84));
  backdrop-filter: blur(16px);
}

:root[data-design="futurista"][data-theme="dark"] .calendar-card {
  border-color: rgba(34, 211, 238, 0.26);
  background:
    linear-gradient(rgba(34, 211, 238, 0.05) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(34, 211, 238, 0.05) 1px, transparent 1px) 0 0 / 28px 100%,
    linear-gradient(160deg, rgba(9, 30, 39, 0.96), rgba(4, 15, 21, 0.94));
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.16),
    inset 0 1px 0 rgba(185, 247, 255, 0.08),
    0 26px 64px rgba(0, 0, 0, 0.5);
}

:root[data-design="futurista"][data-theme="dark"] .calendar-grid .day-cell {
  background: rgba(6, 24, 32, 0.24);
}

:root[data-design="futurista"][data-theme="dark"] .day-cell.is-weekend {
  background: rgba(34, 211, 238, 0.035);
}

:root[data-design="futurista"][data-theme="dark"] .day-cell.is-other {
  background: rgba(3, 14, 20, 0.4);
}

:root[data-design="futurista"][data-theme="dark"] .day-cell:hover {
  background: linear-gradient(160deg, rgba(13, 49, 62, 0.8), rgba(8, 33, 43, 0.85));
}

:root[data-design="futurista"][data-theme="dark"] .day-cell.is-today {
  background: linear-gradient(160deg, rgba(11, 58, 72, 0.85), rgba(6, 33, 43, 0.8));
}

:root[data-design="futurista"][data-theme="dark"] .event-chip {
  background: linear-gradient(150deg, rgba(13, 49, 62, 0.92), rgba(7, 28, 37, 0.92));
  color: #dffbff;
}

:root[data-design="futurista"][data-theme="dark"] .panel,
:root[data-design="futurista"][data-theme="dark"] .year-rail {
  background:
    linear-gradient(rgba(34, 211, 238, 0.035) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(34, 211, 238, 0.035) 1px, transparent 1px) 0 0 / 24px 100%,
    linear-gradient(170deg, rgba(8, 26, 34, 0.94), rgba(4, 15, 21, 0.92));
}

:root[data-design="futurista"][data-theme="dark"] .topbar {
  border-bottom-color: rgba(34, 211, 238, 0.16);
  background: linear-gradient(180deg, rgba(4, 15, 20, 0.94), rgba(5, 12, 17, 0.9));
}


/* ---------- Piezas dentro de la agenda ---------- */

.day-event-piece {
  display: none;
  width: 12px;
  height: 15px;
  flex: none;
  fill: currentColor;
  vertical-align: -3px;
}

:root[data-design="ajedrez"] .day-event-piece {
  display: inline-block;
}

:root[data-design="ajedrez"] .day-event-piece[data-tone="light"] {
  color: #8a6b32;
}

:root[data-design="ajedrez"] .day-event-piece[data-tone="dark"] {
  color: #22312a;
}

:root[data-design="ajedrez"] .day-event-meta .up-dot {
  display: none;
}

/* ---------- Ajustes de las hojas decorativas ---------- */

.leaf-a { --leaf-rotate: 22deg; }
.leaf-b { --leaf-rotate: 158deg; }
.leaf-c { --leaf-rotate: -26deg; }
.welcome-art.art-leaf-a { --leaf-rotate: 26deg; }
.welcome-art.art-leaf-b { --leaf-rotate: 148deg; }

/* ---------- Adaptación a pantallas pequeñas ---------- */

@media (max-width: 760px) {
  :root[data-design="ajedrez"] .calendar-card,
  :root[data-design="victoriana"] .calendar-card {
    padding: 5px;
  }

  :root[data-design="ajedrez"] .calendar-grid .day-cell {
    min-height: 88px;
    padding: 6px;
  }

  :root[data-design="ajedrez"] .weekdays span {
    padding: 9px 6px;
    letter-spacing: 0.08em;
  }

  :root[data-design="mar"] .calendar-card {
    border-radius: 20px;
  }

  :root[data-design="catolica"] .calendar-card::before {
    inset: 4px;
  }

  .calendar-ghost,
  .chess-ghost {
    display: none;
  }
}

@media (max-width: 560px) {
  :root[data-design="ajedrez"] .calendar-card,
  :root[data-design="victoriana"] .calendar-card {
    padding: 4px;
  }

  :root[data-design="ajedrez"] .calendar-grid .day-cell {
    min-height: 78px;
    padding: 5px;
  }

  :root[data-design="ajedrez"] .weekdays span {
    padding: 8px 4px;
    font-size: 8px;
  }

  :root[data-design="ajedrez"] .event-chip {
    min-height: 18px;
    padding: 2px 4px;
    font-size: 9px;
  }

  :root[data-design="ajedrez"] .chip-piece {
    width: 9px;
    height: 11px;
  }

  .calendar-light {
    opacity: 0.4;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .theme-world *,
  .welcome-theme-art *,
  .calendar-card.is-month-enter .day-cell,
  .calendar-ghost,
  .chess-ghost,
  :root[data-design="futurista"] .calendar-light,
  :root[data-design="mar"] .calendar-light,
  :root[data-design="mar"] .calendar-wave,
  :root[data-design="mar"] .calendar-ambience::before,
  :root[data-design="mar"] .calendar-ambience::after,
  :root[data-design="catolica"] .calendar-wave,
  :root[data-design="jungla"] .calendar-light,
  :root[data-design="jungla"] .calendar-wave {
    animation: none !important;
  }

  .chess-ghost {
    display: none !important;
  }

  .calendar-card.is-month-enter .day-cell {
    opacity: 1;
    transform: none;
  }

  .day-cell,
  .event-chip {
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ---------- Modo optimizado ----------
   Detallado es la base (escenas completas) y Ultra vive en ultra.css.
   Aquí solo se apaga todo lo que cuesta pintar: escenas, luces,
   filtros y animaciones, manteniendo la estructura y los colores. */

:root[data-render="optimized"] .page-wash {
  background: var(--bg);
}

:root[data-render="optimized"] .theme-world,
:root[data-render="optimized"] .calendar-ambience,
:root[data-render="optimized"] .chess-ghost,
:root[data-render="optimized"] .calendar-wave,
:root[data-render="optimized"] .calendar-light {
  display: none !important;
}

:root[data-render="optimized"] *,
:root[data-render="optimized"] *::before,
:root[data-render="optimized"] *::after {
  animation-duration: 0.001ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:root[data-render="optimized"] .calendar-card.is-month-enter .day-cell {
  opacity: 1;
  transform: none;
}

:root[data-render="optimized"] html {
  scroll-behavior: auto;
}

/* ---------- Legibilidad del mes en pantallas estrechas ---------- */

@media (max-width: 700px) {
  .weekdays span {
    font-size: 8.5px;
    letter-spacing: 0.05em;
    padding: 8px 2px;
  }

  .day-number {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
}

@media (min-width: 481px) and (max-width: 700px) {
  .day-cell {
    min-height: 84px;
    padding: 4px 4px 5px;
    gap: 2px;
  }

  .event-chip,
  :root[data-design] .event-chip {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title";
    align-content: center;
    gap: 0;
    min-height: 0;
    padding: 3px 3px;
  }

  .event-chip .chip-dot,
  .event-chip .chip-time {
    display: none;
  }

  .event-chip .chip-title,
  :root[data-design] .event-chip .chip-title {
    -webkit-line-clamp: 3;
    font-size: 8.5px;
    line-height: 1.18;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }

  :root[data-design="ajedrez"] .event-chip {
    position: relative;
    padding-right: 14px;
  }

  :root[data-design="ajedrez"] .chip-piece {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 9px;
    height: 11px;
    margin: 0;
  }
}

@media (min-width: 481px) and (max-width: 560px) {
  .day-cell {
    padding: 3px;
  }

  .event-chip,
  :root[data-design] .event-chip {
    padding: 2px;
  }

  .event-chip .chip-title,
  :root[data-design] .event-chip .chip-title {
    font-size: 8px;
    letter-spacing: -0.01em;
  }
}

@media (max-width: 480px) {
  :root[data-design] .event-chip,
  :root:not([data-design]) .event-chip {
    width: 6px;
    height: 6px;
    min-width: 6px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cat);
    box-shadow: none;
  }

  :root[data-design] .event-chip .chip-dot,
  :root[data-design] .event-chip .chip-time,
  :root[data-design] .event-chip .chip-title,
  :root[data-design] .event-chip .chip-piece,
  :root:not([data-design]) .event-chip .chip-dot,
  :root:not([data-design]) .event-chip .chip-time,
  :root:not([data-design]) .event-chip .chip-title {
    display: none;
  }

  :root[data-design] .cell-events,
  :root:not([data-design]) .cell-events {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }
}