/* ╔══════════════════════════════════════════════════════════════╗
   ║  CAPA NAVIDEÑA · solo decoración y tokens                     ║
   ║  Se apoya en estilos.css / login.css / perfil.css            ║
   ║  Activa: class="tema-navidad" en <html>                      ║
   ║  Desactiva: window.TEMA_NAVIDAD = false o quita la clase     ║
   ╚══════════════════════════════════════════════════════════════╝ */

html.tema-navidad {
    --nav-rojo: #c1121f;
    --nav-verde: #0e5a34;
    --nav-verde-claro: #177a47;
    --nav-dorado: #e3b341;
    --nav-crema: #fff8ec;
    --nav-header: #b3261e;

    /* Paleta intensa sobre fondo blanco (solo esta capa) */
    --primario: #ffffff;
    --primario-claro: #ffffff;
    --primario-medio: #eaf5ea;
    --primario-hondo: #c6dfc6;
    --secundario: #0c3d24;
    --acento: #c1121f;
    --superficie: #fffdf8;
    --complementario: #f8e2a1;
    --texto-suave: rgba(12, 61, 36, .72);
    --borde: rgba(12, 61, 36, .16);
    --velo: rgba(255, 255, 255, .95);
    --sombra-suave: 0 10px 24px rgba(12, 61, 36, .09);
    --sombra-media: 0 18px 38px rgba(12, 61, 36, .16);
}

/* Fondo blanco real en todas las páginas */
html.tema-navidad body {
    background: #ffffff linear-gradient(180deg, #ffffff 0%, #ffffff 58%, #f2faf2 100%) fixed;
}

html.tema-navidad ::selection {
    background: rgba(193, 18, 31, .22);
    color: var(--secundario);
}

/* Fondo del login blanco con brillos rojo/verde más marcados */
html.tema-navidad body.pagina-login {
    --acceso-muted: #4f6f5d;
    --acceso-enlace: #b3261e;

    background:
        radial-gradient(circle at 12% 8%, rgba(193, 18, 31, .16), transparent 34%),
        radial-gradient(circle at 88% 92%, rgba(14, 90, 52, .16), transparent 38%),
        #ffffff linear-gradient(180deg, #ffffff 0%, #ffffff 52%, #eef7ee 100%);
}

/* ── Nieve: copos reales en varias capas ─────────────────────── */

html.tema-navidad body::before {
    content: "";
    position: fixed;
    inset: -6%;
    z-index: -1;
    pointer-events: none;
    opacity: .42;
    background-image:
        url('/tienda/recursos/img/copo.svg?v=2'),
        url('/tienda/recursos/img/copo.svg?v=2'),
        url('/tienda/recursos/img/copo.svg?v=2'),
        url('/tienda/recursos/img/copo.svg?v=2');
    background-size: 150px 150px, 210px 210px, 280px 280px, 360px 360px;
    background-repeat: repeat, repeat, repeat, repeat;
    background-position: 0 0, 40px 60px, 100px 130px, 170px 30px;
    transform: rotate(2deg);
    animation: navidad-copos 60s linear infinite;
    will-change: background-position;
}

@keyframes navidad-copos {
    from {
        background-position: 0 0, 40px 60px, 100px 130px, 170px 30px;
    }
    to {
        background-position: 0 150px, 40px 270px, 100px 410px, 170px 390px;
    }
}
/* Copos tenues dentro del hero, detrás del texto */
html.tema-navidad .hero {
    background-image:
        url('/tienda/recursos/img/copo-hero.svg?v=1'),
        radial-gradient(circle at 85% 12%, rgba(245, 238, 222, .18), transparent 55%),
        linear-gradient(158deg, var(--secundario) 0%, #343941 55%, var(--secundario) 100%);
    background-size: 240px 240px, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat;
}
/* ── Header y marca ─────────────────────────────────────────── */

html.tema-navidad .app-header {
    border-bottom: 2px solid var(--nav-dorado);
    box-shadow: 0 2px 12px rgba(12, 61, 36, .18);
    color: var(--nav-crema);
}

html.tema-navidad .app-header .marca__logo {
    padding: 2px;
    border-radius: 50%;
    background: var(--nav-crema);
    box-shadow: 0 0 0 2px rgba(255, 248, 236, .35);
    mix-blend-mode: normal;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, .35));
}

html.tema-navidad .app-header .marca,
html.tema-navidad .app-header .icono-btn,
html.tema-navidad .app-header .perfil__acceso,
html.tema-navidad .app-header .nav-escritorio a {
    color: var(--nav-crema);
}

html.tema-navidad .app-header .icono-btn:hover,
html.tema-navidad .app-header .perfil__acceso:hover {
    background: rgba(255, 248, 236, .16);
}

html.tema-navidad .app-header .perfil[open] .perfil__boton {
    background: var(--nav-crema);
    color: var(--nav-verde);
}

html.tema-navidad .app-header .icono-btn__badge {
    background: var(--nav-dorado);
    color: var(--secundario);
}

html.tema-navidad .acceso__logo {
    border-radius: var(--r-lg);
    mix-blend-mode: multiply;
    filter: drop-shadow(0 8px 14px rgba(20, 83, 45, .12));
}

/* ── Botones ────────────────────────────────────────────────── */

html.tema-navidad .btn-primario {
    border-color: var(--nav-verde);
    background: linear-gradient(180deg, var(--nav-verde-claro), var(--nav-verde));
    color: #ffffff;
}

html.tema-navidad .btn-primario:hover {
    opacity: 1;
    background: var(--nav-verde);
}

html.tema-navidad .producto__acciones .btn-primario:hover {
    border-color: var(--nav-verde);
    background: var(--nav-verde);
}

html.tema-navidad .btn-secundario {
    border-color: rgba(20, 83, 45, .35);
    background: var(--primario-claro);
    color: var(--nav-verde);
}

/* ── Tarjetas: borde dorado sin mover nada ──────────────────── */

html.tema-navidad .card-producto,
html.tema-navidad .carrito-item,
html.tema-navidad .perfil-card,
html.tema-navidad .perfil-item-card,
html.tema-navidad .acceso__card,
html.tema-navidad .resenias__resumen,
html.tema-navidad .filtros__panel {
    border-color: rgba(212, 175, 55, .38);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, .16), var(--sombra-suave);
}

html.tema-navidad .card-producto:hover {
    box-shadow: 0 0 0 2px rgba(212, 175, 55, .45), var(--sombra-media);
}

/* Relacionados: borde rojo y aire para el hover */
html.tema-navidad .relacionados__carrusel .splide__slide {
    padding: 10px 4px;
}

html.tema-navidad .card-compacta {
    border: 1px solid rgba(193, 18, 31, .45);
    background: var(--superficie);
    box-shadow: none;
}

html.tema-navidad .card-compacta:hover {
    border-color: var(--nav-rojo);
    box-shadow: 0 0 0 2px rgba(193, 18, 31, .22), var(--sombra-media);
}

html.tema-navidad .card-compacta__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .68rem;
    line-height: 1.2;
    color: var(--nav-rojo);
}

html.tema-navidad .card-compacta__rating i {
    font-size: .62rem;
    color: var(--nav-dorado);
}

html.tema-navidad .card-compacta__rating-num {
    font-weight: 600;
}

html.tema-navidad .card-compacta__rating-total {
    color: var(--texto-suave);
}

html.tema-navidad .card-compacta__rating--vacio {
    color: var(--texto-suave);
}

html.tema-navidad .acceso__card {
    position: relative;
}

html.tema-navidad .acceso__card::before {
    content: "✦";
    position: absolute;
    top: 8px;
    right: 14px;
    color: var(--nav-dorado);
    font-size: 1rem;
    line-height: 1;
    pointer-events: none;
}

/* ── Precios y acentos ──────────────────────────────────────── */

html.tema-navidad .producto__descuento,
html.tema-navidad .badge-agotado {
    background: var(--nav-rojo);
}

html.tema-navidad .producto__precio,
html.tema-navidad .card-producto__precio,
html.tema-navidad .card-compacta__precio {
    color: var(--nav-verde);
}

/* ── Pie de página ──────────────────────────────────────────── */

html.tema-navidad .pie {
    background: linear-gradient(180deg, var(--nav-verde) 0%, #062016 100%);
    color: var(--nav-crema);
}

html.tema-navidad .pie__titulo {
    color: var(--nav-dorado);
    opacity: .95;
}

html.tema-navidad .pie__legal {
    border-top-color: rgba(255, 248, 236, .18);
}

/* ── Detalles navideños ─────────────────────────────────────── */

html.tema-navidad .seccion__titulo::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin-top: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--nav-rojo), var(--nav-dorado), var(--nav-verde));
}

html.tema-navidad .catalogo-vacio,
html.tema-navidad .perfil-vacio {
    border: 1px dashed rgba(212, 175, 55, .55);
    background: radial-gradient(circle at 50% 0%, rgba(212, 175, 55, .08), transparent 60%);
}

/* ── Luces y cintas (todas las pantallas) ───────────────────── */

html.tema-navidad .app-header {
    background-color: var(--nav-header);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html.tema-navidad .card-producto {
    position: relative;
    border-color: rgba(193, 18, 31, .30);
    box-shadow: 0 0 0 1px rgba(193, 18, 31, .20), var(--sombra-suave);
}

html.tema-navidad .card-producto:hover {
    box-shadow: 0 0 0 2px rgba(193, 18, 31, .32), var(--sombra-media);
}

html.tema-navidad .card-producto::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    height: 3px;
    background: linear-gradient(90deg, rgba(193, 18, 31, .55), rgba(193, 18, 31, .20));
    pointer-events: none;
}

html.tema-navidad .talla-opcion--activo,
html.tema-navidad .filtros__resumen,
html.tema-navidad .perfil[open] .perfil__boton {
    border-color: var(--nav-verde);
    background: var(--nav-verde);
    color: var(--nav-crema);
}

/* Categorías en rojo navideño */
html.tema-navidad .categorias .chip {
    border-color: rgba(193, 18, 31, .28);
    background: #ffffff;
    color: var(--nav-rojo);
}

html.tema-navidad .categorias .chip:hover {
    border-color: var(--nav-rojo);
    background: rgba(193, 18, 31, .06);
}

html.tema-navidad .categorias .chip--activo {
    border-color: var(--nav-rojo);
    background: var(--nav-rojo);
    color: #ffffff;
}

/* Botones de categoría (Todos, Zapatos, Chinelas...) */
html.tema-navidad .cat-item {
    color: var(--nav-rojo);
}

html.tema-navidad .cat-item__circulo {
    border-color: rgba(193, 18, 31, .28);
    background: #ffffff;
    color: var(--nav-rojo);
    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* El botón completo no reacciona: solo el círculo */
html.tema-navidad .cat-item:hover .cat-item__circulo {
    transform: none;
    border-color: rgba(193, 18, 31, .28);
    background: #ffffff;
    box-shadow: none;
}

html.tema-navidad .cat-item .cat-item__circulo:hover {
    transform: translateY(-2px);
    border-color: var(--nav-rojo);
    background: rgba(193, 18, 31, .10);
    box-shadow: 0 6px 14px rgba(193, 18, 31, .18);
}

html.tema-navidad .cat-item--activo {
    color: var(--nav-rojo);
    font-weight: 600;
}

html.tema-navidad .cat-item--activo .cat-item__circulo {
    border-color: var(--nav-rojo);
    background: var(--nav-rojo);
    color: #ffffff;
}

html.tema-navidad .cat-item--activo .cat-item__circulo:hover {
    border-color: var(--nav-rojo);
    background: var(--nav-rojo);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(193, 18, 31, .28);
}

html.tema-navidad .card-producto__categoria,
html.tema-navidad .producto__categoria,
html.tema-navidad .perfil-producto__categoria {
    color: var(--nav-rojo);
}

/* ── Compartir, opiniones y reseñas en rojo suave ───────────── */

html.tema-navidad .btn-compartir {
    border-color: rgba(193, 18, 31, .30);
    background: rgba(193, 18, 31, .18);
    color: #8f1119;
}

html.tema-navidad .btn-compartir:hover {
    opacity: 1;
    background: rgba(193, 18, 31, .26);
}

html.tema-navidad .resenias__resumen,
html.tema-navidad .resenias__form {
    border-color: rgba(193, 18, 31, .30);
    background: var(--superficie);
}

html.tema-navidad .resenias__resumen {
    box-shadow: 0 0 0 1px rgba(193, 18, 31, .12), var(--sombra-suave);
}

html.tema-navidad .resenias__nota {
    color: var(--nav-rojo);
}

html.tema-navidad .resenias__fila-relleno {
    background: var(--nav-rojo);
}

html.tema-navidad .resenias__campo {
    border-color: rgba(193, 18, 31, .25);
    background: #fffdfd;
}

html.tema-navidad .resenias__campo:focus {
    outline-color: rgba(193, 18, 31, .45);
}

html.tema-navidad .resenias__invitado {
    border-color: rgba(193, 18, 31, .30);
    background: var(--superficie);
}

html.tema-navidad .resenia {
    border-color: rgba(193, 18, 31, .22);
    border-left: 3px solid var(--nav-rojo);
    background: var(--superficie);
}

html.tema-navidad .perfil-badge {
    background: rgba(212, 175, 55, .22);
    color: #6b4e00;
}

html.tema-navidad .pie {
    border-top: 3px solid var(--nav-dorado);
}

/* ── Móvil: mismos detalles, ajustados ──────────────────────── */

@media (max-width: 820px) {
    html.tema-navidad .app-header {
        border-bottom-width: 2px;
    }

    html.tema-navidad .card-producto::before {
        height: 2px;
    }

    html.tema-navidad .seccion__titulo::after {
        width: 34px;
        height: 2px;
    }

    html.tema-navidad .pie {
        border-top-width: 2px;
    }

    /* Menos nieve en pantallas pequeñas para no distraer */
    html.tema-navidad body::before {
        opacity: .32;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.tema-navidad body::before {
        animation: none;
    }
}