/**
 * Fondo animado RelevAPP (encuesta pública, etc.)
 * Mismo mapa dinámico del login (canvas + assets/js/login-map.js).
 * Requiere relevapp-theme.css cargado antes.
 */

.ra-backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ra-backdrop__sat {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: #0a1a12;
}

.ra-backdrop__sat .leaflet-container {
  width: 100%;
  height: 100%;
  background: #0a1a12;
  font: inherit;
}

.ra-backdrop__sat .leaflet-control-attribution {
  background: rgba(0, 0, 0, 0.45) !important;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.62rem;
  margin: 0 !important;
  padding: 2px 6px;
  max-width: 55%;
}

.ra-backdrop__sat .leaflet-control-attribution a {
  color: rgba(180, 230, 200, 0.85);
}

.ra-backdrop__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    155deg,
    var(--ra-brand-grad-1) 0%,
    var(--ra-brand-grad-2) 55%,
    var(--ra-brand-grad-3) 100%
  );
}

.ra-backdrop--satellite .ra-backdrop__gradient {
  background: linear-gradient(
    145deg,
    rgba(8, 40, 24, 0.55) 0%,
    rgba(6, 28, 18, 0.35) 40%,
    rgba(4, 18, 12, 0.5) 100%
  );
}

.ra-backdrop__canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  display: block;
}

.ra-backdrop__vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(120% 90% at 30% 35%, transparent 40%, rgba(0, 0, 0, 0.28) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
}

.ra-backdrop--satellite .ra-backdrop__vignette {
  background:
    radial-gradient(80% 70% at 30% 40%, transparent 15%, rgba(0, 0, 0, 0.35) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, transparent 50%, rgba(0, 0, 0, 0.4) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
}