/* Banners y decoraciones de fechas especiales (includes/temas.php, assets/js/temas.js) */
.tema-banner {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--tema-fondo, #142A6F);
}
.tema-banner-fila {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 52px;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
}
.tema-mensaje {
    margin: 0;
    max-width: none;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1.08rem;
    letter-spacing: .02em;
    color: inherit;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.tema-icono { flex: 0 0 40px; height: 40px; display: inline-flex; animation: tema-balanceo 2.6s ease-in-out infinite; }
.tema-icono svg { width: 100%; height: 100%; }
.tema-icono-fin { animation-delay: -1.3s; }
.tema-boton {
    flex: 0 0 auto;
    padding: 6px 16px;
    background: #fff;
    color: var(--tema-boton, #142A6F);
    font-weight: 600;
    font-size: .85rem;
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
.tema-boton:hover { background: #FFF4CC; color: var(--tema-boton, #142A6F); }
@keyframes tema-balanceo {
    0%, 100% { transform: rotate(-8deg) translateY(0); }
    50% { transform: rotate(8deg) translateY(-2px); }
}

/* Capa de animación: encima de todo, no bloquea clics */
.tema-lienzo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 150; pointer-events: none; }

/* ---- Colores de cada fecha ---- */
.tema-navidad .tema-banner { --tema-fondo: linear-gradient(90deg, #0F5A32, #1E8E4E 50%, #0F5A32); --tema-boton: #B3122B; }
.tema-anio_nuevo .tema-banner { --tema-fondo: linear-gradient(90deg, #0B1533, #22356F 50%, #0B1533); --tema-boton: #0B1533; color: #FFE39A; }
.tema-san_valentin .tema-banner { --tema-fondo: linear-gradient(90deg, #C2185B, #FF5C7A 50%, #C2185B); --tema-boton: #C2185B; }
.tema-dia_trabajo .tema-banner { --tema-fondo: linear-gradient(90deg, #2B2F3A, #4A505E 50%, #2B2F3A); --tema-boton: #2B2F3A; color: #FFD54A; }
.tema-dia_madre .tema-banner { --tema-fondo: linear-gradient(90deg, #E05A8A, #FF9EC1 50%, #E05A8A); --tema-boton: #C2185B; }
.tema-dia_padre .tema-banner { --tema-fondo: linear-gradient(90deg, #0E3B8C, #1F5FBF 50%, #0E3B8C); --tema-boton: #0E3B8C; }
.tema-fiestas_patrias .tema-banner { --tema-fondo: linear-gradient(90deg, #D91023 0 33.3%, #fff 33.3% 66.6%, #D91023 66.6%); --tema-boton: #D91023; }
.tema-fiestas_patrias .tema-mensaje { color: #B30D1D; text-shadow: none; background: rgba(255,255,255,.92); padding: 2px 14px; }
.tema-halloween .tema-banner { --tema-fondo: linear-gradient(90deg, #1A0E2E, #3B1F5C 50%, #1A0E2E); --tema-boton: #3B1F5C; color: #FFB05C; }
.tema-cancion_criolla .tema-banner { --tema-fondo: linear-gradient(90deg, #8E0E1C, #C8102E 50%, #8E0E1C); --tema-boton: #8E0E1C; color: #FFF3D6; }

/* Fiestas Patrias: brillo que recorre la bandera, como si ondeara */
.tema-bandera {
    position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.35) 35%, transparent 50%, rgba(0,0,0,.08) 65%, transparent 80%);
    background-size: 220% 100%;
    animation: tema-ondear 3.5s linear infinite;
}
@keyframes tema-ondear { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* Navidad: guirnalda de luces bajo el menú */
.tema-luces {
    position: absolute; left: 0; right: 0; bottom: -16px; height: 20px;
    display: flex; justify-content: space-between; padding: 0 10px;
    pointer-events: none; overflow: hidden;
}
.tema-luces::before {
    content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 12px;
    border-bottom: 2px solid #2D4A2D;
}
.tema-luces span {
    position: relative; width: 10px; height: 14px; margin-top: 1px;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    background: #E23B45; box-shadow: 0 0 8px 2px rgba(226,59,69,.7);
    animation: tema-foco 1.6s ease-in-out infinite;
}
.tema-luces span:nth-child(4n+2) { background: #F6C343; box-shadow: 0 0 8px 2px rgba(246,195,67,.7); animation-delay: -.4s; }
.tema-luces span:nth-child(4n+3) { background: #2FBF71; box-shadow: 0 0 8px 2px rgba(47,191,113,.7); animation-delay: -.8s; }
.tema-luces span:nth-child(4n+4) { background: #4FA3FF; box-shadow: 0 0 8px 2px rgba(79,163,255,.7); animation-delay: -1.2s; }
.tema-luces span:nth-child(n+21) { display: none; }
@media (min-width: 900px) { .tema-luces span:nth-child(n+21) { display: block; } }
@keyframes tema-foco { 0%, 100% { opacity: 1; } 50% { opacity: .25; box-shadow: none; } }

/* Halloween: telarañas en las esquinas superiores */
.tema-halloween .tema-banner::before, .tema-halloween .tema-banner::after {
    content: ''; position: absolute; top: 0; width: 70px; height: 52px; opacity: .55;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 52' fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M0 0L70 52M0 0L45 52M0 0L20 52M0 0L70 30M0 0L70 10'/%3E%3Cpath d='M12 9Q16 3 20 0M0 9Q8 10 12 9Q12 17 9 22M24 18Q31 7 38 0M0 22Q6 21 9 22Q16 23 24 18Q24 30 20 38M37 28Q47 13 56 0'/%3E%3C/svg%3E") no-repeat;
}
.tema-halloween .tema-banner::before { left: 0; }
.tema-halloween .tema-banner::after { right: 0; transform: scaleX(-1); }

/* ---- Promoción: descuento, cupón y cuenta regresiva ---- */
.tema-textos { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tema-promo { margin: 0; max-width: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; font-size: .86rem; color: inherit; }
.tema-promo-pct { background: #fff; color: var(--tema-boton, #142A6F); padding: 2px 10px; font-weight: 700; animation: tema-latido 1.8s ease-in-out infinite; }
.tema-cupon { border: 1px dashed currentColor; background: rgba(255,255,255,.12); color: inherit; padding: 2px 10px; font: inherit; cursor: pointer; }
.tema-cupon:hover { background: rgba(255,255,255,.25); }
.tema-cupon.copiado::after { content: ' ✓ copiado'; font-weight: 600; }
.tema-reloj strong { font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.tema-fiestas_patrias .tema-promo { color: #B30D1D; background: rgba(255,255,255,.92); padding: 2px 10px; }
.tema-fiestas_patrias .tema-promo-pct { background: #D91023; color: #fff; }
@keyframes tema-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* Etiqueta de descuento en las fotos y precio rebajado */
.product-media { position: relative; }
.promo-etiqueta { position: absolute; top: 12px; right: 12px; z-index: 2; background: #E23B45; color: #fff; font-weight: 700; font-size: .85rem; padding: 4px 10px; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
.product-media .stock-badge ~ .promo-etiqueta, .product-media .promo-etiqueta + .stock-badge { top: 44px !important; }
.precio-antes { display: block; font-size: .78em; font-weight: 500; color: var(--steel); text-decoration-thickness: 1.5px; }
.precio-promo { color: #D91023; }
.promo-detalle { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; font-weight: 600; color: #B30D1D; }
.promo-detalle .promo-etiqueta { position: static; }

@media (max-width: 720px) {
    .tema-banner-fila { gap: 10px; min-height: 46px; }
    .tema-mensaje { font-size: .92rem; }
    .tema-icono { flex-basis: 28px; height: 28px; }
    .tema-icono-fin { display: none; }
    .tema-boton { padding: 5px 12px; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
    .tema-icono, .tema-bandera, .tema-luces span { animation: none; }
}