/* Tema de temporada: Día de Muertos (2026-10-31 al 2026-11-14). Se carga solo cuando includes/tema_estacional.php lo indica.
   En la aplicación es discreto: solo líneas y detalles pequeños que no tapan ni cambian el color de ningún texto ni botón.
   En las pantallas de acceso (body.dm-login) es más vistoso. Respeta prefers-reduced-motion. */

/* ── 1. Aplicación (diseño escritorio) ─────────────────────────────────────────────────────────────── */
html[data-estacional="dia-muertos"]:not([data-est-off]) .ui-titlebar { position: relative; isolation: isolate; }
/* Banderitas de papel picado en el borde inferior de la barra de título (detrás de los botones) */
html[data-estacional="dia-muertos"]:not([data-est-off]) .ui-titlebar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; z-index: -1; pointer-events: none;
    background: url("../img/tema/papel-picado-mini.svg") repeat-x 0 0 / 144px 8px;
}
/* Flor de cempasúchil junto al título */
html[data-estacional="dia-muertos"]:not([data-est-off]) .ui-titlebar .ui-title::before {
    content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 7px; vertical-align: -3px;
    background: url("../img/tema/cempasuchil.svg") center / contain no-repeat;
}
/* Líneas de color cempasúchil en el menú activo, la cinta y la barra de estado */
html[data-estacional="dia-muertos"]:not([data-est-off]) .ui-menubar .ui-m.actual > .ui-mb { box-shadow: inset 0 -2px 0 #F28C28; }
html[data-estacional="dia-muertos"]:not([data-est-off]) .ui-ribbon { box-shadow: inset 0 -2px 0 rgba(242, 140, 40, .55); }
html[data-estacional="dia-muertos"]:not([data-est-off]) .ui-rb.primary i { color: #E8710A; }
html[data-estacional="dia-muertos"]:not([data-est-off]) .ui-status { box-shadow: inset 0 2px 0 #F28C28; }

/* Botón "Tema" de la barra de estado (siempre visible mientras el tema está vigente, para poder quitarlo o ponerlo) */
.ui-status .ui-tema-est {
    display: inline-flex; align-items: center; gap: 6px; height: 18px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 9px; background: transparent; color: var(--ink-on-chrome-muted); font: inherit; font-size: 11px; line-height: 16px; cursor: pointer;
}
.ui-status .ui-tema-est:hover { background: rgba(255, 255, 255, .1); color: var(--ink-on-chrome); }
.ui-status .ui-tema-est[aria-pressed="true"] { border-color: #F28C28; color: var(--ink-on-chrome); }
.ui-status .ui-tema-flor { width: 12px; height: 12px; background: url("../img/tema/cempasuchil.svg") center / contain no-repeat; opacity: .55; }
.ui-status .ui-tema-est[aria-pressed="true"] .ui-tema-flor { opacity: 1; }
@media print { .ui-titlebar::after, .ui-tema-est { display: none !important; } }

/* ── 2. Pantallas de acceso (login, olvidé mi contraseña, restablecer) ─────────────────────────────── */
body.dm-login .bg-overlay {
    background: linear-gradient(160deg, rgba(34, 8, 56, .90) 0%, rgba(110, 18, 84, .78) 55%, rgba(224, 120, 24, .45) 100%);
}
body.dm-login .login-card, body.dm-login .reset-card, body.dm-login .card {
    border-color: rgba(255, 179, 0, .38);
    box-shadow: 0 0 0 1px rgba(255, 179, 0, .12), 0 22px 54px rgba(0, 0, 0, .38);
}
.dm-decor { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.dm-banner {
    position: absolute; top: 0; left: -10px; right: -10px; height: 72px;
    background: url("../img/tema/papel-picado.svg") repeat-x 0 0 / 360px 72px;
    transform-origin: 50% 0; animation: dm-balanceo 7s ease-in-out infinite alternate;
}
.dm-guirnalda { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: url("../img/tema/guirnalda.svg") repeat-x center bottom / 56px 44px; }
.dm-calavera { position: absolute; bottom: 52px; width: min(190px, 15vw); filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .4)); }
.dm-calavera.izq { right: calc(50% + 240px); transform: rotate(-6deg); }
.dm-calavera.der { left: calc(50% + 240px); transform: scaleX(-1) rotate(-6deg); }
@media (max-width: 1000px) { .dm-calavera { display: none; } }
@media (max-height: 560px) { .dm-banner { height: 44px; background-size: 220px 44px; } .dm-calavera { display: none; } }
.dm-petalo {
    position: absolute; top: -30px; width: 17px; height: 17px; background: url("../img/tema/cempasuchil.svg") center / contain no-repeat; opacity: .85;
    animation: dm-caer var(--t, 16s) linear var(--d, 0s) infinite;
}
.dm-saludo { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -4px 0 10px; color: #FFB300; font-size: 13px; font-weight: 700; letter-spacing: .05em; }
.dm-calavera-chica { width: 24px; height: auto; }

@keyframes dm-balanceo { from { transform: rotate(-.35deg); } to { transform: rotate(.35deg); } }
@keyframes dm-caer {
    0%   { transform: translate3d(0, -30px, 0) rotate(0deg); }
    100% { transform: translate3d(70px, 108vh, 0) rotate(380deg); }
}
@media (prefers-reduced-motion: reduce) { .dm-banner, .dm-petalo { animation: none; } .dm-petalo { display: none; } }