/* Fondos decorativos: no modifican las imágenes originales ni los datos. */
body.regional-background-enabled { position: relative; isolation: isolate; }
.regional-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #f4f7fc;
  contain: strict;
}
.regional-background-image {
  position: absolute;
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: blur(3px);
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.regional-background-image.is-visible { opacity: 1; }
.regional-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(247, 250, 254, .9);
}
body.regional-background-enabled:has(#page-inicio.active) .regional-background::after {
  background: rgba(247, 250, 254, .46);
}
body.regional-background-enabled .hero { background: transparent; }
body.regional-background-enabled .hero-city { display: none; }
body.regional-background-enabled .hero-fade {
  background: radial-gradient(ellipse 78% 70% at 50% 24%, rgba(248, 251, 255, .9) 0%, rgba(248, 251, 255, .64) 48%, rgba(248, 251, 255, .08) 100%);
}
body.regional-background-enabled .hero-num { background: rgba(247, 250, 254, .88); }
body.regional-background-enabled .hero-num:hover,
body.regional-background-enabled .hero-num.open { background: #fff; }
body.regional-background-enabled .hero-fuentes,
body.regional-background-enabled .inicio-actualizacion { background: rgba(248, 251, 255, .96); }

@media (max-width: 720px) {
  .regional-background-image { filter: blur(2px); }
  body.regional-background-enabled #page-sueldos { background: rgba(255, 255, 255, .68); }
  body.regional-background-enabled .hero-fade {
    background: linear-gradient(180deg, rgba(248, 251, 255, .87), rgba(248, 251, 255, .58) 44%, rgba(248, 251, 255, .18));
  }
}
@media (prefers-reduced-motion: reduce) {
  .regional-background-image { transition: none; }
}
@media print {
  .regional-background { display: none !important; }
  body.regional-background-enabled { background: #fff !important; }
}