/* ================================================
   ESTILOS ESPECÍFICOS PARA COBERTURA EL SALVADOR
   Importa variables de cobertura.css y añade overrides ligeros
   ================================================ */

/* Importar variables base del CSS principal de cobertura */
@import url('../pages/css/cobertura.css');

/* ================================================
   VARIABLES ESPECÍFICAS PARA EL SALVADOR
   ================================================ */

:root {
  /* Colores específicos para mapa nacional */
  --sv-primary: #007cba;
  --sv-secondary: #55bde5;
  --sv-accent: #fdd700;
  --sv-success: #28a745;
  --sv-warning: #ffc107;
  --sv-danger: #dc3545;
  
  /* Nuevos símbolos para leyenda nacional */
  --simbolo-amarillo: #ffc107;
}

/* ================================================
   HERO SECTION - AJUSTES PARA EL SALVADOR
   ================================================ */

.hero-mapa-sv {
  /* Gradiente específico para El Salvador con colores patrios */
  background: linear-gradient(135deg, #1697bf 0%, #55bde5 70%, #fdd700 100%);
}

.hero-mapa-sv .hero-title {
  /* Título con sombra más pronunciada para el gradiente dorado */
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.hero-mapa-sv .btn-hero-primary {
  /* Botón principal con colores patrios */
  background: rgba(255, 221, 0, 0.9);
  color: #007cba;
  border-color: rgba(255, 221, 0, 0.9);
  font-weight: 700;
}

.hero-mapa-sv .btn-hero-primary:hover {
  background: rgba(255, 221, 0, 1);
  color: #005a8b;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 221, 0, 0.4);
}

/* ================================================
   LEYENDA DE SÍMBOLOS - COLORES NACIONAL
   ================================================ */

/* Nuevo símbolo amarillo para enlaces microondas */
.mapa-info-simbolos .amarillo { 
  background-color: var(--simbolo-amarillo); 
}

/* Ajuste de colores para infraestructura nacional */
.mapa-info-simbolos .verde { 
  background-color: #28a745; /* Datacenters principales */
}

.mapa-info-simbolos .celeste { 
  background-color: #17a2b8; /* POPs departamentales */
}

.mapa-info-simbolos .rojo { 
  background-color: #dc3545; /* Red de fibra nacional */
}

/* ================================================
   MAPA SVG - ESTILOS ESPECÍFICOS PARA DEPARTAMENTOS
   ================================================ */

/* Estilos base para departamentos de El Salvador */
.departamento-hover,
.departamento-hover path,
.departamento-hover * { 
  filter: brightness(1.3) saturate(1.4) drop-shadow(0 0 10px #fdd700) !important; 
  stroke: #fdd700 !important; 
  stroke-width: 3 !important; 
  fill: rgba(255, 221, 0, 0.1) !important;
  transition: all 0.3s ease !important;
  animation: departamentoGlow 2s ease-in-out infinite alternate !important;
}

@keyframes departamentoGlow {
  0% {
    filter: brightness(1.3) saturate(1.4) drop-shadow(0 0 10px #fdd700) !important;
    stroke-opacity: 0.8 !important;
  }
  100% {
    filter: brightness(1.5) saturate(1.6) drop-shadow(0 0 18px #fdd700) !important;
    stroke-opacity: 1 !important;
  }
}

.departamento-active,
.departamento-active path,
.departamento-active * { 
  filter: brightness(1.2) saturate(1.5) drop-shadow(0 0 15px #007cba) !important; 
  stroke: #007cba !important; 
  stroke-width: 4 !important; 
  fill: rgba(0, 124, 186, 0.15) !important;
  stroke-dasharray: 10 5 !important;
  animation: selectedDepartamento 2.5s ease-in-out infinite !important;
}

@keyframes selectedDepartamento {
  0%, 100% {
    stroke-dashoffset: 0 !important;
  }
  50% {
    stroke-dashoffset: 15 !important;
  }
}

/* ================================================
   EFECTOS ESPECÍFICOS PARA INFRAESTRUCTURA SV
   ================================================ */

/* Estilos para torres de microondas */
.fn-microonda {
  fill: none !important;
  stroke: var(--simbolo-amarillo) !important;
  stroke-width: 4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 0.7 !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.fn-microonda:hover,
.fn-microonda.microonda-glow {
  opacity: 1 !important;
  stroke-width: 6 !important;
  filter: brightness(1.6) saturate(1.4) drop-shadow(0 0 12px var(--simbolo-amarillo)) !important;
  animation: microondaPulse 1.5s ease-in-out infinite alternate !important;
}

@keyframes microondaPulse {
  0% {
    stroke: var(--simbolo-amarillo) !important;
    stroke-width: 6 !important;
  }
  100% {
    stroke: #ffed4a !important;
    stroke-width: 8 !important;
    filter: brightness(1.8) saturate(1.6) drop-shadow(0 0 18px #ffed4a) !important;
  }
}

/* Estilos para POPs departamentales */
.fn-pop {
  fill: #17a2b8 !important;
  stroke: #138496 !important;
  stroke-width: 2 !important;
  opacity: 0.8 !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.fn-pop:hover,
.fn-pop.pop-glow {
  opacity: 1 !important;
  filter: brightness(1.4) saturate(1.3) drop-shadow(0 0 10px #17a2b8) !important;
  transform: scale(1.1) !important;
}

/* ================================================
   RESPONSIVE ESPECÍFICO PARA EL SALVADOR
   ================================================ */

@media (max-width: 768px) {
  .hero-mapa-sv .hero-title {
    font-size: 2rem;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }
  
  .hero-mapa-sv .hero-subtitle {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
  }
  
  /* Leyenda más compacta en móvil */
  .mapa-info-simbolos {
    font-size: 13px;
    padding: 10px 14px;
    max-width: 220px;
  }
  
  .mapa-info-simbolos h4 {
    font-size: 14px;
    margin-bottom: 6px;
  }
  
  .mapa-info-simbolos .simbolo {
    width: 10px;
    height: 10px;
    margin-right: 6px;
  }
}

/* ================================================
   TOOLTIP ESPECÍFICO PARA DEPARTAMENTOS
   ================================================ */

.map-tooltip.sv-tooltip {
  background: rgba(0, 124, 186, 0.96);
  border: 1px solid rgba(255, 221, 0, 0.6);
  color: white;
  font-weight: 500;
}

.map-tooltip.sv-tooltip::before {
  border-bottom-color: rgba(0, 124, 186, 0.96);
}

.map-tooltip.sv-tooltip .hint {
  color: rgba(255, 221, 0, 0.9);
  font-weight: 400;
}

/* ================================================
   ANIMACIONES DE CARGA ESPECÍFICAS
   ================================================ */

.loading-overlay.sv-loading {
  background: linear-gradient(135deg, rgba(22, 151, 191, 0.1) 0%, rgba(255, 221, 0, 0.1) 100%);
}

.loading-spinner.sv-spinner {
  border-top-color: var(--sv-accent);
  border-left-color: var(--sv-primary);
}

/* ================================================
   MEJORAS DE ACCESIBILIDAD ESPECÍFICAS
   ================================================ */

.is-departamento:focus {
  outline: 3px solid var(--sv-accent) !important;
  outline-offset: 3px !important;
  filter: brightness(1.3) saturate(1.4) !important;
}

/* ================================================
   INDICADORES DE CALIDAD DE SERVICIO
   ================================================ */

.quality-indicator {
  position: absolute;
  top: 10px;
  right: 80px;
  background: rgba(255, 255, 255, 0.95);
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sv-primary);
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
}

.quality-indicator.excellent {
  border-left: 4px solid var(--sv-success);
}

.quality-indicator.good {
  border-left: 4px solid var(--sv-warning);
}

.quality-indicator.basic {
  border-left: 4px solid var(--sv-danger);
}

/* ================================================
   MODO OSCURO ESPECÍFICO PARA EL SALVADOR
   ================================================ */

@media (prefers-color-scheme: dark) {
  .hero-mapa-sv {
    background: linear-gradient(135deg, #0d4f6b 0%, #2a5a7a 70%, #b8961a 100%);
  }
  
  .map-tooltip.sv-tooltip {
    background: rgba(13, 79, 107, 0.96);
    border-color: rgba(184, 150, 26, 0.6);
  }
  
  .mapa-info-simbolos {
    background: rgba(13, 79, 107, 0.9);
    color: #e2e8f0;
    border: 1px solid rgba(184, 150, 26, 0.3);
  }
}