/* assets/style.css */

/* --- Wrapper Principal --- */
/* Aseguramos que la fuente se aplique solo dentro de nuestro plugin */
.mus-wrapper {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  line-height: 1.5;
}

/* Evitamos que estilos globales de inputs del tema rompan el slider */
.mus-wrapper input[type="range"] {
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  max-width: 100%;
}

/* --- Efecto Glassmorphism --- */
.mus-wrapper .glass {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* --- Animación de Blobs (Fondo) --- */
.mus-wrapper .animate-blob {
  animation: mus-blob 7s infinite;
}

@keyframes mus-blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

/* --- Ajustes Responsive y Utilidades --- */
/* Forzamos que Chart.js no se desborde */
.mus-wrapper canvas {
  max-width: 100% !important;
  height: auto !important;
}

/* Correcciones para temas oscuros de WP si fuera necesario */
@media (prefers-color-scheme: dark) {
  .mus-wrapper [class*="bg-slate-900"] {
    background-color: rgba(
      15,
      23,
      42,
      0.96
    ); /* Mantiene el fondo oscuro del simulador con transparencia */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

/* Regla específica para el bloque Análisis de Impacto: fondo muy oscuro translúcido + blur */
.mus-wrapper .lg\:col-span-7[class*="bg-slate-900"] {
  background-color: rgba(8, 12, 18, 0.88) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}