/*
 * Adornos de temporada (ver js/temporada.js). El MISMO archivo vive en dsmITEC y en dsmPDV.
 *
 * Los dibujos no están acá: temporada.js los publica como variables (--tmp-svg-*) en <html>,
 * así hay una sola copia de cada uno.
 *
 * z-index 990: por debajo de los menús desplegables de Bootstrap (1000), la barra fija (1030),
 * los modales (1050+) y los avisos (1090). Nada de esto recibe clics salvo el adorno del
 * título y el saludo de año nuevo.
 */

.tmp-capa {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 990;
    overflow: hidden;
}

.tmp-capa .tmp-lienzo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ── Adorno del título (span vacío, el dibujo es el fondo) ───────────── */
.tmp-adorno-titulo {
    display: inline-block;
    width: .85em;
    height: .85em;
    margin-left: .35em;
    vertical-align: -.08em;
    background: var(--tmp-ico) center / contain no-repeat;
    animation: tmp-aparece .7s cubic-bezier(.3, 1.6, .5, 1) both;
    user-select: none;
}

.tmp-adorno-titulo.tmp-brinca { animation: tmp-brinca .5s ease-out; }

.tmp-ico-calabaza   { --tmp-ico: var(--tmp-svg-calabaza); }
.tmp-ico-calaverita { --tmp-ico: var(--tmp-svg-calaverita); }
.tmp-ico-esfera     { --tmp-ico: var(--tmp-svg-esfera); }
.tmp-ico-regalo     { --tmp-ico: var(--tmp-svg-regalo); }
.tmp-ico-destello   { --tmp-ico: var(--tmp-svg-destello); }

@keyframes tmp-aparece {
    from { transform: scale(0) rotate(-30deg); opacity: 0; }
    to   { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes tmp-brinca {
    0%   { transform: translateY(0) rotate(0); }
    40%  { transform: translateY(-.3em) rotate(-12deg); }
    70%  { transform: translateY(0) rotate(8deg); }
    100% { transform: translateY(0) rotate(0); }
}

/* ── Calabaza en los botones: solo un ::before, el texto no se toca ─── */
.tmp-btn-calabaza::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .35em;
    vertical-align: -.15em;
    background: var(--tmp-svg-calabaza) center / contain no-repeat;
}

/* ── Murciélagos ──────────────────────────────────────────────────────── */
.tmp-murcielago {
    position: absolute;
    left: 0;
    top: 0;
    will-change: transform;
    opacity: .9;
}

.tmp-murcielago svg {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: 50% 35%;
    animation: tmp-aleteo .19s ease-in-out infinite alternate;
}

@keyframes tmp-aleteo {
    from { transform: scaleY(1); }
    to   { transform: scaleY(.3); }
}

/* ── Lo que cae: calaveritas y regalos ────────────────────────────────── */
.tmp-cae {
    position: absolute;
    top: 0;
    width: 28px;
    height: 28px;
    background: var(--tmp-ico) center / contain no-repeat;
    will-change: transform;
    animation: tmp-caer var(--dur, 16s) linear var(--delay, 0s) both;
}

@keyframes tmp-caer {
    0%   { transform: translate3d(0, -50px, 0) rotate(0); }
    25%  { transform: translate3d(var(--dx, 20px), 25vh, 0) rotate(calc(var(--rot, 90deg) * .25)); }
    50%  { transform: translate3d(0, 50vh, 0) rotate(calc(var(--rot, 90deg) * .5)); }
    75%  { transform: translate3d(calc(var(--dx, 20px) * -1), 75vh, 0) rotate(calc(var(--rot, 90deg) * .75)); }
    100% { transform: translate3d(0, calc(100vh + 50px), 0) rotate(var(--rot, 90deg)); }
}

/* ── Papel picado (1 de noviembre) ────────────────────────────────────── */
.tmp-papel-picado {
    position: absolute;
    top: 0;
    left: -10px;
    right: -10px;
    height: 26px;
    opacity: .92;
    background: var(--tmp-svg-picado) repeat-x 0 0 / 240px 26px;
    transform-origin: 50% 0;
    animation: tmp-brisa 5s ease-in-out infinite alternate;
}

@keyframes tmp-brisa {
    from { transform: skewX(-1.5deg); }
    to   { transform: skewX(1.5deg); }
}

/* ── Guirnalda bajo la barra (diciembre) ──────────────────────────────── */
.tmp-relativo { position: relative; }

.tmp-guirnalda {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 24px;
    margin-top: -7px;
    pointer-events: none;
    z-index: 2;
    background: var(--tmp-svg-guirnalda) repeat-x 0 0 / 80px 24px;
}

.tmp-guirnalda::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--tmp-svg-luces) repeat-x 0 0 / 80px 24px;
    animation: tmp-titila 1.6s ease-in-out infinite alternate;
}

@keyframes tmp-titila {
    from { opacity: .25; }
    to   { opacity: 1; }
}

/* ── Saludo de año nuevo ──────────────────────────────────────────────── */
.tmp-banner-anio {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 990;
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .4rem .25rem .8rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #1a1440, #3b2a7a);
    color: #ffd54f;
    font-size: .8rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    animation: tmp-aparece .6s ease-out both;
}

.tmp-banner-anio button {
    border: 0;
    background: none;
    color: inherit;
    opacity: .8;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0 .3rem;
    cursor: pointer;
}

.tmp-banner-anio button:hover,
.tmp-banner-anio button:focus-visible { opacity: 1; }

/* ── Aviso de los huevos de pascua ────────────────────────────────────── */
.tmp-toast {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 995;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: .45rem .9rem;
    border-radius: 999px;
    background: rgba(33, 33, 33, .88);
    color: #fff;
    font-size: .85rem;
    pointer-events: none;
    transform: translate(-50%, 20px);
    opacity: 0;
}

.tmp-toast.tmp-toast-ve { animation: tmp-toast 3.4s ease both; }

@keyframes tmp-toast {
    0%   { opacity: 0; transform: translate(-50%, 20px); }
    10%  { opacity: 1; transform: translate(-50%, 0); }
    85%  { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 10px); }
}

/* ── Pantalla chica ───────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .tmp-papel-picado { height: 18px; background-size: 166px 18px; }
    .tmp-guirnalda { height: 18px; margin-top: -5px; background-size: 60px 18px; }
    .tmp-guirnalda::after { background-size: 60px 18px; }
}

/* ── Pestaña oculta: todo quieto ──────────────────────────────────────── */
html.tmp-pausado .tmp-murcielago svg,
html.tmp-pausado .tmp-cae,
html.tmp-pausado .tmp-papel-picado,
html.tmp-pausado .tmp-guirnalda::after {
    animation-play-state: paused;
}

/* ── Reducir movimiento: solo adornos quietos ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tmp-adorno-titulo,
    .tmp-murcielago svg,
    .tmp-cae,
    .tmp-papel-picado,
    .tmp-guirnalda::after,
    .tmp-banner-anio,
    .tmp-toast.tmp-toast-ve {
        animation: none !important;
    }
    .tmp-toast.tmp-toast-ve { opacity: 1; transform: translate(-50%, 0); }
    .tmp-cae, .tmp-murcielago { display: none !important; }
}

/* ── Impresión: nunca ─────────────────────────────────────────────────── */
@media print {
    .tmp-capa,
    .tmp-guirnalda,
    .tmp-adorno-titulo,
    .tmp-toast,
    .tmp-banner-anio { display: none !important; }
    .tmp-btn-calabaza::before { content: none !important; display: none !important; }
}