/* =====================================================================
   Temas de celebración del mes
   ---------------------------------------------------------------------
   El admin activa uno de estos 12 temas desde Panel admin → Ajustes,
   sin importar el mes real del calendario. Cada tema sobreescribe todas
   las variables de color que ya usa style.css, así que retiñe de forma
   coherente: el fondo de la página, el fondo de las tarjetas donde se ve
   el nombre del negocio (.card-negocio) y el nombre de los productos
   (.card-producto), el encabezado/menú (topbar, que usa azul-noche y
   azul-medio), y los tonos suaves derivados (--azul-suave,
   --dorado-suave, --borde-suave) que pintan el fondo circular de los
   iconos de categoría, el placeholder de las fotos de producto y los
   bordes de las tarjetas.

   Además cada tema pone su propia ilustración completa de fondo
   (assets/temas/{mes}-fondo.webp: fuegos artificiales en enero,
   máscaras de carnaval en febrero, flores y mariposas en marzo, cruz y
   velas en abril, rosas en mayo, instrumentos en junio, bandera y
   sombrero en julio, cometas en agosto, corazones en septiembre,
   calabazas y fantasma en octubre, castillo y faroles en noviembre,
   pesebre en diciembre), fija al viewport con un pseudo-elemento
   ::before (ver cada bloque más abajo) para que cubra siempre toda la
   pantalla sin estirarse ni recortarse raro cuando la página es más
   alta que la pantalla, y para que funcione bien también en
   Safari/iOS, donde background-attachment:fixed falla.

   Como las ilustraciones son oscuras, los textos que van directo sobre
   el fondo de la página (no dentro de una tarjeta clara) se aclaran
   para cada tema usando su propio --dorado (o, si el fondo de ese mes
   es claro, como agosto, se oscurecen en vez de aclararse) para que no
   se pierdan contra la imagen.

   Todo esto va detrás de TODO el contenido de cada página — el body
   cubre todo el alto del documento. No toca el logo real ni ningún
   texto de productos/negocios, solo los títulos de sección y los
   nombres de categoría que van sueltos sobre el fondo.
   ===================================================================== */

/* Insignia con el icono del mes, junto al nombre de la marca en la topbar */
.brand-icono-tema{
    font-size:1.1rem;
    line-height:1;
    margin-left:2px;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

body[data-tema="enero"]{
    --azul-noche:#0b2f6b; --azul-medio:#1650b0; --dorado:#ffd54a; --rojo:#e8432f;
    --crema-fondo:#eef4ff; --fondo-tarjeta:#fff1bf;
    --azul-suave:#ecf1f9; --dorado-suave:#fff7de; --borde-suave:#d9dee8;
}
body[data-tema="enero"]::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:url("temas/enero-fondo.webp") center top/cover no-repeat;
}
body[data-tema="enero"] .seccion-titulo h2,
body[data-tema="enero"] .seccion-cabeza h2{
    color:var(--dorado);
    text-shadow:0 1px 6px rgba(0,0,0,.5);
}
body[data-tema="enero"] .categoria-item span:last-child{
    color:#fff4e6;
    text-shadow:0 1px 4px rgba(0,0,0,.55);
}
body[data-tema="febrero"]{
    --azul-noche:#7a1030; --azul-medio:#b81c46; --dorado:#ffb6c1; --rojo:#e8432f;
    --crema-fondo:#fff0f3; --fondo-tarjeta:#ffdce6;
    --azul-suave:#f9edf0; --dorado-suave:#fff2f4; --borde-suave:#e8dadd;
}
body[data-tema="febrero"]::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:url("temas/febrero-fondo.webp") center top/cover no-repeat;
}
body[data-tema="febrero"] .seccion-titulo h2,
body[data-tema="febrero"] .seccion-cabeza h2{
    color:var(--dorado);
    text-shadow:0 1px 6px rgba(0,0,0,.5);
}
body[data-tema="febrero"] .categoria-item span:last-child{
    color:#fff4e6;
    text-shadow:0 1px 4px rgba(0,0,0,.55);
}
body[data-tema="marzo"]{
    --azul-noche:#2f5d34; --azul-medio:#4c8a52; --dorado:#f2b53c; --rojo:#d1477a;
    --crema-fondo:#f2fbee; --fondo-tarjeta:#fdedb8;
    --azul-suave:#f1f6f1; --dorado-suave:#fdf2dc; --borde-suave:#dce4d9;
}
body[data-tema="marzo"]::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:url("temas/marzo-fondo.webp") center top/cover no-repeat;
}
body[data-tema="marzo"] .seccion-titulo h2,
body[data-tema="marzo"] .seccion-cabeza h2{
    color:var(--dorado);
    text-shadow:0 1px 6px rgba(0,0,0,.5);
}
body[data-tema="marzo"] .categoria-item span:last-child{
    color:#fff4e6;
    text-shadow:0 1px 4px rgba(0,0,0,.55);
}
body[data-tema="abril"]{
    --azul-noche:#3a2359; --azul-medio:#5b3a86; --dorado:#d8b3ff; --rojo:#8a2f5c;
    --crema-fondo:#f5f0fb; --fondo-tarjeta:#ecd9ff;
    --azul-suave:#f2eff5; --dorado-suave:#f8f1ff; --borde-suave:#dfdae4;
}
body[data-tema="abril"]::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:url("temas/abril-fondo.webp") center top/cover no-repeat;
}
body[data-tema="abril"] .seccion-titulo h2,
body[data-tema="abril"] .seccion-cabeza h2{
    color:var(--dorado);
    text-shadow:0 1px 6px rgba(0,0,0,.5);
}
body[data-tema="abril"] .categoria-item span:last-child{
    color:#fff4e6;
    text-shadow:0 1px 4px rgba(0,0,0,.55);
}
body[data-tema="mayo"]{
    --azul-noche:#7a1f52; --azul-medio:#b83a7c; --dorado:#ffd1e6; --rojo:#e8432f;
    --crema-fondo:#fff1f7; --fondo-tarjeta:#ffd9e8;
    --azul-suave:#f9eff5; --dorado-suave:#fff7fa; --borde-suave:#e8dbe1;
}
body[data-tema="mayo"]::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:url("temas/mayo-fondo.webp") center top/cover no-repeat;
}
body[data-tema="mayo"] .seccion-titulo h2,
body[data-tema="mayo"] .seccion-cabeza h2{
    color:var(--dorado);
    text-shadow:0 1px 6px rgba(0,0,0,.5);
}
body[data-tema="mayo"] .categoria-item span:last-child{
    color:#fff4e6;
    text-shadow:0 1px 4px rgba(0,0,0,.55);
}
body[data-tema="junio"]{
    --azul-noche:#0d4d5c; --azul-medio:#147a8f; --dorado:#f2b53c; --rojo:#e07a2f;
    --crema-fondo:#eefaf9; --fondo-tarjeta:#fbe8b8;
    --azul-suave:#ecf4f6; --dorado-suave:#fdf2dc; --borde-suave:#d9e4e3;
}
body[data-tema="junio"]::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:url("temas/junio-fondo.webp") center top/cover no-repeat;
}
body[data-tema="junio"] .seccion-titulo h2,
body[data-tema="junio"] .seccion-cabeza h2{
    color:var(--dorado);
    text-shadow:0 1px 6px rgba(0,0,0,.5);
}
body[data-tema="junio"] .categoria-item span:last-child{
    color:#fff4e6;
    text-shadow:0 1px 4px rgba(0,0,0,.55);
}
body[data-tema="julio"]{
    --azul-noche:#173d8a; --azul-medio:#1f56b8; --dorado:#ffd41f; --rojo:#e8432f;
    --crema-fondo:#fdf8e7; --fondo-tarjeta:#ffedac;
    --azul-suave:#edf1f9; --dorado-suave:#fff7d7; --borde-suave:#e6e2d2;
}
body[data-tema="julio"]::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:url("temas/julio-fondo.webp") center top/cover no-repeat;
}
body[data-tema="julio"] .seccion-titulo h2,
body[data-tema="julio"] .seccion-cabeza h2{
    color:var(--dorado);
    text-shadow:0 1px 6px rgba(0,0,0,.5);
}
body[data-tema="julio"] .categoria-item span:last-child{
    color:#fff4e6;
    text-shadow:0 1px 4px rgba(0,0,0,.55);
}
body[data-tema="agosto"]{
    --azul-noche:#154c2e; --azul-medio:#1f7a45; --dorado:#ffd54a; --rojo:#e8432f;
    --crema-fondo:#eefaf1; --fondo-tarjeta:#fbe9b8;
    --azul-suave:#edf4f0; --dorado-suave:#fff7de; --borde-suave:#d9e4db;
}
body[data-tema="agosto"]::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:url("temas/agosto-fondo.webp") center top/cover no-repeat;
}
body[data-tema="agosto"] .seccion-titulo h2,
body[data-tema="agosto"] .seccion-cabeza h2{
    color:var(--azul-noche);
    text-shadow:0 1px 6px rgba(255,255,255,.6);
}
body[data-tema="agosto"] .categoria-item span:last-child{
    color:var(--azul-noche);
    text-shadow:0 1px 4px rgba(255,255,255,.65);
}
body[data-tema="septiembre"]{
    --azul-noche:#5a1f7a; --azul-medio:#8a3ab8; --dorado:#ffd166; --rojo:#d1477a;
    --crema-fondo:#f8f0fc; --fondo-tarjeta:#ffe9b3;
    --azul-suave:#f6eff9; --dorado-suave:#fff7e3; --borde-suave:#e2dae5;
}
body[data-tema="septiembre"]::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:url("temas/septiembre-fondo.webp") center top/cover no-repeat;
}
body[data-tema="septiembre"] .seccion-titulo h2,
body[data-tema="septiembre"] .seccion-cabeza h2{
    color:var(--dorado);
    text-shadow:0 1px 6px rgba(0,0,0,.5);
}
body[data-tema="septiembre"] .categoria-item span:last-child{
    color:#fff4e6;
    text-shadow:0 1px 4px rgba(0,0,0,.55);
}
body[data-tema="octubre"]{
    --azul-noche:#2a1a3d; --azul-medio:#4a2f63; --dorado:#ff8c1a; --rojo:#e8432f;
    --crema-fondo:#fcefe3; --fondo-tarjeta:#ffd9ad;
    --azul-suave:#f1eef3; --dorado-suave:#ffead6; --borde-suave:#e5d9cf;
}
/* Octubre usa una ilustración propia (calabazas, fantasma, luna, casa
   embrujada) en vez del patrón repetido en mosaico de los demás meses.
   Va en un pseudo-elemento fijo al viewport (no en "background" del body)
   para que cubra siempre toda la pantalla sin estirarse ni recortarse
   raro cuando la página es más alta que la pantalla, y para que funcione
   bien también en Safari/iOS, donde background-attachment:fixed falla. */
body[data-tema="octubre"]::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:url("temas/octubre-fondo.webp") center top/cover no-repeat;
}
/* La ilustración de octubre es oscura, así que los textos que van
   directo sobre el fondo de la página (no dentro de una tarjeta clara)
   se ven mal con el navy oscuro de --azul-noche de siempre: se pierden
   contra la imagen. Se aclaran solo para este tema. */
body[data-tema="octubre"] .seccion-titulo h2,
body[data-tema="octubre"] .seccion-cabeza h2{
    color:var(--dorado);
    text-shadow:0 1px 6px rgba(0,0,0,.5);
}
body[data-tema="octubre"] .categoria-item span:last-child{
    color:#fff4e6;
    text-shadow:0 1px 4px rgba(0,0,0,.55);
}
body[data-tema="noviembre"]{
    --azul-noche:#5c3a0d; --azul-medio:#8f5e15; --dorado:#ffe08a; --rojo:#e07a2f;
    --crema-fondo:#fdf5e3; --fondo-tarjeta:#ffe4a8;
    --azul-suave:#f6f2ec; --dorado-suave:#fff9ea; --borde-suave:#e6dfcf;
}
body[data-tema="noviembre"]::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:url("temas/noviembre-fondo.webp") center top/cover no-repeat;
}
body[data-tema="noviembre"] .seccion-titulo h2,
body[data-tema="noviembre"] .seccion-cabeza h2{
    color:var(--dorado);
    text-shadow:0 1px 6px rgba(0,0,0,.5);
}
body[data-tema="noviembre"] .categoria-item span:last-child{
    color:#fff4e6;
    text-shadow:0 1px 4px rgba(0,0,0,.55);
}
body[data-tema="diciembre"]{
    --azul-noche:#7a1120; --azul-medio:#a8182e; --dorado:#ffd54a; --rojo:#1f7a45;
    --crema-fondo:#fdf0f1; --fondo-tarjeta:#ffdfc2;
    --azul-suave:#f8edee; --dorado-suave:#fff7de; --borde-suave:#e6dadb;
}
body[data-tema="diciembre"]::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:url("temas/diciembre-fondo.webp") center top/cover no-repeat;
}
body[data-tema="diciembre"] .seccion-titulo h2,
body[data-tema="diciembre"] .seccion-cabeza h2{
    color:var(--dorado);
    text-shadow:0 1px 6px rgba(0,0,0,.5);
}
body[data-tema="diciembre"] .categoria-item span:last-child{
    color:#fff4e6;
    text-shadow:0 1px 4px rgba(0,0,0,.55);
}