/* ============================================================================
   Temáticas de época — las decoraciones (docs/197)
   ----------------------------------------------------------------------------
   Las dibuja js/core/tematicas.js en dos capas:
     #tem-capa   adelante (z 90: sobre la barra superior, debajo de modales y avisos)
     #tem-fondo  detrás de todo
   Las dos con `pointer-events:none`. Todo lo que se anima usa sólo `transform` y
   `opacity`, que el navegador compone sin repintar.
   ============================================================================ */

#tem-capa, #tem-fondo { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#tem-capa  { z-index: 90; }
#tem-fondo { z-index: -1; }
#tem-capa * , #tem-fondo * { pointer-events: none; }
.tem-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ═══════════════════════════════ Halloween ═══════════════════════════════════ */

.tem-web { position: absolute; line-height: 0; color: color-mix(in srgb, var(--text) 42%, transparent); }
[data-theme="dark"] .tem-web { color: rgba(225, 225, 235, .38); }
.tem-web-der   { top: 0; right: 0; transform: scaleX(-1); opacity: .8; }
.tem-web-izq   { top: 0; left: 0; }
.tem-web-abajo { bottom: 0; left: 0; transform: scaleY(-1); opacity: .7; }

.tem-arana { position: absolute; top: 0; width: var(--tam, 30px); height: var(--tam, 30px);
  transform: translateY(var(--caida, 140px)); }
/* El hilo es un palito largo que sale del lomo hacia arriba: como la araña se mueve con
   `transform`, el hilo la acompaña sin tener que animar su alto. */
.tem-arana::before { content: ''; position: absolute; left: 50%; bottom: 60%; width: 1px; height: 100vh;
  background: color-mix(in srgb, var(--text) 45%, transparent); }
[data-theme="dark"] .tem-arana::before { background: rgba(230, 230, 240, .5); }
.tem-arana-cuerpo { width: 100%; height: 100%; }
[data-theme="dark"] .tem-arana-cuerpo { filter: drop-shadow(0 0 1.5px rgba(255,255,255,.7)) drop-shadow(0 0 6px rgba(255,140,60,.45)); }
.tem-arana.baja { animation: arana-baja 9s cubic-bezier(.45,.05,.4,1) infinite; }
.tem-arana.baja .tem-arana-cuerpo { animation: arana-patas .9s ease-in-out infinite alternate; }
@keyframes arana-baja {
  0%, 12%   { transform: translateY(-40px); }
  40%, 62%  { transform: translateY(var(--caida, 140px)); }
  50%       { transform: translateY(calc(var(--caida, 140px) - 10px)); }
  100%      { transform: translateY(-40px); }
}
@keyframes arana-patas { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

.tem-calabazas { position: absolute; left: 14px; bottom: max(10px, env(safe-area-inset-bottom));
  display: flex; align-items: flex-end; gap: 2px; }
.tem-calabaza { line-height: 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.28)); }
.tem-calabaza .cara { filter: drop-shadow(0 0 4px #ffb347); }
.tem-calabaza.vela .cara { animation: vela 2.6s ease-in-out infinite; }
.tem-calabaza:nth-child(2).vela .cara { animation-duration: 3.1s; }
@keyframes vela { 0%, 100% { opacity: 1; } 22% { opacity: .72; } 30% { opacity: .95; } 58% { opacity: .8; } 70% { opacity: 1; } }

.tem-murcielago { position: absolute; left: 0; width: var(--tam, 48px); height: calc(var(--tam, 48px) / 2);
  animation: murcielago-cruza 8s linear forwards; }
.tem-murcielago.al-reves { animation-name: murcielago-vuelve; }
.tem-murcielago.al-reves .tem-murcielago-alas { transform: scaleX(-1); }
.tem-murcielago-alas { width: 100%; height: 100%; animation: murcielago-onda 1.4s ease-in-out infinite alternate; }
.tem-murcielago .ala { transform-box: fill-box; animation: aletea .22s ease-in-out infinite alternate; }
.tem-murcielago .ala-izq { transform-origin: 100% 60%; }
.tem-murcielago .ala-der { transform-origin: 0% 60%; animation-name: aletea-der; }
[data-theme="dark"] .tem-murcielago svg { filter: drop-shadow(0 0 2px rgba(255,170,90,.55)); }
@keyframes murcielago-cruza { from { transform: translateX(-12vw); } to { transform: translateX(112vw); } }
@keyframes murcielago-vuelve { from { transform: translateX(112vw); } to { transform: translateX(-12vw); } }
@keyframes murcielago-onda { from { translate: 0 -14px; } to { translate: 0 18px; } }
@keyframes aletea     { from { transform: rotate(-4deg) scaleY(1); } to { transform: rotate(26deg) scaleY(.55); } }
@keyframes aletea-der { from { transform: rotate(4deg) scaleY(1); }  to { transform: rotate(-26deg) scaleY(.55); } }

.tem-luna { position: absolute; top: 90px; right: 9%; width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fff8dc 0, #f3e1a0 45%, #d9b865 100%);
  box-shadow: 0 0 60px 18px rgba(255, 226, 150, .28), 0 0 140px 40px rgba(170, 110, 255, .16); opacity: .85; }
.tem-luna::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 64% 60%, rgba(160,130,70,.35) 0 9%, transparent 10%),
              radial-gradient(circle at 36% 70%, rgba(160,130,70,.3) 0 6%, transparent 7%),
              radial-gradient(circle at 58% 30%, rgba(160,130,70,.25) 0 5%, transparent 6%); }
:root:not([data-theme="dark"]) .tem-luna { opacity: .55; }
.tem-niebla { position: absolute; left: -10%; right: -10%; bottom: 0; height: 42vh;
  background: radial-gradient(ellipse 60% 70% at 30% 100%, rgba(120, 60, 180, .22), transparent 70%),
              radial-gradient(ellipse 55% 60% at 80% 100%, rgba(240, 120, 20, .14), transparent 70%); }

/* ═══════════════════════════════ Navidad ═════════════════════════════════════ */

.tem-guirnalda { position: absolute; top: 0; left: 0; right: 0; line-height: 0; }
.tem-guirnalda .halo { opacity: .28; }
[data-theme="dark"] .tem-guirnalda .halo { opacity: .45; }
.tem-guirnalda.titila .foco { animation: foco 1.8s ease-in-out infinite; }
.tem-guirnalda.titila .f1 { animation-delay: -.6s; }
.tem-guirnalda.titila .f2 { animation-delay: -1.2s; }
@keyframes foco { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.tem-arbol { position: absolute; left: 12px; bottom: max(8px, env(safe-area-inset-bottom));
  width: var(--tam, 92px); height: calc(var(--tam, 92px) * 1.25); filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.tem-regalos { position: absolute; left: 70%; bottom: 0; width: calc(var(--tam, 92px) * .8); height: calc(var(--tam, 92px) * .45); }
.tem-arbol.titila .bolas circle { animation: foco 2.2s ease-in-out infinite; }
.tem-arbol.titila .bolas .b1 { animation-delay: -.7s; }
.tem-arbol.titila .bolas .b2 { animation-delay: -1.4s; }
.tem-arbol .estrella { filter: drop-shadow(0 0 5px #ffd23f); transform-box: fill-box; transform-origin: center; }
.tem-arbol.titila .estrella { animation: estrella 3s ease-in-out infinite; }
@keyframes estrella { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.15) rotate(8deg); } }

.tem-nieve { position: absolute; inset: 0; }
.tem-copo { position: absolute; top: -24px; width: var(--t, 10px); height: var(--t, 10px); border-radius: 50%;
  color: #ffffff; animation: cae 14s linear infinite; }
.tem-copo:empty { background: currentColor; transform: scale(.55); }
:root:not([data-theme="dark"]) .tem-copo:empty { color: #cfe6f8; box-shadow: 0 0 0 1px rgba(120,170,215,.55); }
[data-theme="dark"] .tem-copo { filter: drop-shadow(0 0 2px rgba(255,255,255,.6)); }
/* En claro, un copo blanco sobre una tarjeta blanca no existe: se tiñe de celeste hielo. */
:root:not([data-theme="dark"]) .tem-copo { color: #8ec5ef; filter: drop-shadow(0 1px 1px rgba(40,90,140,.25)); }
@keyframes cae {
  from { transform: translate3d(0, 0, 0) rotate(0); }
  to   { transform: translate3d(var(--dx, 30px), calc(100vh + 40px), 0) rotate(240deg); }
}

.tem-trineo { position: absolute; left: 0; width: 230px; height: 62px; color: #1c2230;
  animation: trineo 14s linear forwards; }
[data-theme="dark"] .tem-trineo { color: #f4f1e6; filter: drop-shadow(0 0 6px rgba(255,255,255,.35)); }
@keyframes trineo {
  0%   { transform: translate(115vw, 20px) rotate(-4deg); }
  50%  { transform: translate(45vw, -6px) rotate(-2deg); }
  100% { transform: translate(-30vw, 16px) rotate(-5deg); }
}

/* Nieve acumulada sobre los KPI y un gorro en el logo. Sólo decoran el borde. */
[data-tematica="navidad"]:not([data-intensidad="sutil"]) .card.kpi { position: relative; }
[data-tematica="navidad"]:not([data-intensidad="sutil"]) .card.kpi::after {
  content: ''; position: absolute; left: 8px; right: 8px; top: -7px; height: 13px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 13' preserveAspectRatio='none'%3E%3Cpath d='M0 13 C0 6 6 4 10 6 C14 1 22 2 25 6 C30 2 36 3 39 6 C44 0 54 1 57 6 C62 3 68 3 71 6 C76 1 86 2 89 6 C94 4 100 6 100 13 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  filter: drop-shadow(0 1px 1px rgba(40, 80, 120, .25));
}
[data-tematica="navidad"] .sidebar .brand { position: relative; }
[data-tematica="navidad"] .sidebar .brand::before {
  content: ''; position: absolute; left: -2px; top: -5px; width: 30px; height: 26px; z-index: 1; pointer-events: none;
  transform: rotate(-18deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52'%3E%3Cpath d='M6 40 C10 18 28 4 44 8 C52 10 56 20 58 30 C50 24 40 22 30 30 C24 34 16 38 6 40 Z' fill='%23d62b2b'/%3E%3Crect x='0' y='36' width='40' height='12' rx='6' fill='%23ffffff'/%3E%3Ccircle cx='56' cy='32' r='6' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ═════════════════════════════ Fiestas patrias ═══════════════════════════════ */

.tem-tricolor { position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(#d52b1e 0 33.3%, #ffffff 33.3% 66.6%, #0038a8 66.6% 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.tem-banderines { position: absolute; top: 4px; left: 0; right: 0; line-height: 0;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); }
.tem-banderines .bandera path { transform-box: fill-box; transform-origin: 50% 0; }
.tem-banderines.flamean .b0 path { animation: flamea 2.4s ease-in-out infinite alternate; }
.tem-banderines.flamean .b1 path { animation: flamea 2.8s ease-in-out -1.1s infinite alternate; }
@keyframes flamea { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.tem-escarapela { position: absolute; left: 14px; bottom: max(12px, env(safe-area-inset-bottom));
  width: var(--tam, 44px); height: var(--tam, 44px); filter: drop-shadow(0 3px 5px rgba(0,0,0,.25)); }

/* ═══════════════════════════════ Año Nuevo ═══════════════════════════════════ */

.tem-serpentinas { position: absolute; top: 0; display: flex; gap: 6px; }
.tem-serp-izq { left: 10px; }
.tem-serp-der { right: 10px; }
.tem-serpentinas .serp { transform-origin: 50% 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.tem-serpentinas.mece .serp { animation: mece 3.2s ease-in-out infinite alternate; }
@keyframes mece { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.tem-brindis { position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: #3a2c05; background: linear-gradient(90deg, #f7e08a, #e6c35c, #f7e08a);
  box-shadow: 0 2px 10px rgba(230, 195, 92, .45); white-space: nowrap; }
@media (max-width: 640px) { .tem-brindis { display: none; } }

/* ═══════════════════════════ Accesibilidad y rendimiento ══════════════════════
   tematicas.js ya no crea lo que se mueve cuando hay que estar quietos; esto es la red de
   seguridad por si el ajuste cambia con la página abierta. */
@media (prefers-reduced-motion: reduce) {
  #tem-capa *, #tem-fondo * { animation: none !important; }
  .tem-murcielago, .tem-trineo, .tem-nieve, .tem-lienzo { display: none; }
}
:root[data-perf="ligero"] #tem-capa *, :root[data-perf="ligero"] #tem-fondo * { animation-play-state: paused; }
/* Celular: menos es más. Nada que tape la barra de navegación inferior de los módulos. */
@media (max-width: 640px) {
  .tem-web-izq svg { width: 130px; height: 130px; }
  /* En el celular no hay barra lateral a la vista: una araña colgando caería sobre la barra
     superior o sobre las tarjetas, que ocupan todo el ancho. Quedan las telarañas y las
     calabazas, que viven en las esquinas. */
  .tem-arana { display: none; }
  .tem-calabazas, .tem-arbol, .tem-escarapela { transform: scale(.72); transform-origin: 0 100%; }
}
/* Impresión: nunca. */
@media print { #tem-capa, #tem-fondo { display: none !important; } }