/* styles.css
   Estilos para el mapa SVG, tooltip de línea y popup fijo inferior
   Fuente: Kumbh Sans (desde Google Fonts en el HTML)
*/

:root{
  --base: #2b93e0;       /* base RM */
  --aretxabaleta: #641E9B;      /* Aretxabaleta */
  --arrasate: #641E9B;      /* Arrasate */
  --azpeitia: #641E9B;      /* Azpeitia */
  --deba: #641E9B;      /* Deba */
  --donostia: #641E9B;      /* Donostia */
  --errenteria: #641E9B;      /* Errenteria */
  --elgoibar: #641E9B;      /* Elgoibar */
  --hernani: #641E9B;      /* Hernani */
  --legorreta: #641E9B;      /* Legorreta */
  --lizartza: #641E9B;      /* Lizartza */
  --oiartzun: #641E9B;      /* Oiartzun */
  --orio: #641E9B;      /* Orio */
  --pasaia: #641E9B;      /* Pasaia */
  --urnieta: #641E9B;      /* Urnieta */
  --urretxu: #641E9B;      /* Urretxu */
  --usurbil: #641E9B;      /* Usurbil */
  --zestoa: #641E9B;      /* Zestoa */
  --zumarraga: #641E9B;      /* Zumarraga */
  --pin: no color;        /* pin amarillo */
  --txt: #000000;
  --bg: #ffffff;
}

/* Reset mínimo */
html,body{ height:100%; margin:0; padding:0; font-family:"Kumbh Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:#ffffff; color:var(--txt); }

/* Contenedor del mapa */
.container{ width:100%; max-width:1000px; margin:18px auto; padding:0 12px; }
svg { width:100%; height:auto; display:block; }

/* Base de comunas */
.comuna{
  fill: var(--base);
  stroke: #ffffff;
  stroke-width: 0.9px;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
  filter: drop-shadow(0 4px 14px rgba(5,10,20,0.06));
  vector-effect: non-scaling-stroke;
}

.comuna.highlight 
/* Clases específicas*/
.Cerro\ Navia, #Cerro\ Navia, .Cerro_Navia { fill: var(--cerro) !important; }
.Renca, #Renca { fill: var(--renca) !important; }
.Peñalolén, #Peñalolén { fill: var(--penalolen) !important; }
.San\ José\ de\ Maipo, #San\ José\ de\ Maipo, .San_José_de_Maipo { fill: var(--sjm) !important; }
.Aretxabaleta, #Aretxabaleta { fill: var(--aretxabaleta) !important; }
.Arrasate, #Arrasate { fill: var(--arrasate) !important; }
.Azpeitia, #Azpeitia { fill: var(--azpeitia) !important; }
.Deba, #Deba { fill: var(--deba) !important; }
.Donostia, #Donostia { fill: var(--donostia) !important; }
.Errenteria, #Errenteria { fill: var(--errenteria) !important; }
.Elgoibar, #Elgoibar { fill: var(--elgoibar) !important; }
.Hernani, #Hernani { fill: var(--hernani) !important; }
.Legorreta, #Legorreta { fill: var(--legorreta) !important; }
.Lizartza, #Lizartza { fill: var(--lizartza) !important; }
.Oiartzun, #Oiartzun { fill: var(--oiartzun) !important; }
.Orio, #Orio { fill: var(--orio) !important; }
.Pasaia, #Pasaia { fill: var(--pasaia) !important; }
.Urnieta, #Urnieta { fill: var(--urnieta) !important; }
.Urretxu, #Urretxu { fill: var(--urretxu) !important; }
.Usurbil, #Usurbil { fill: var(--usurbil) !important; }
.Zestoa, #Zestoa { fill: var(--zestoa) !important; }
.Zumarraga, #Zumarraga { fill: var(--zumarraga) !important; }

/* A.Hover comuna: leve elevación */
.comuna.highlight:hover{
  filter: brightness(0.70);
}

/* Tooltip de línea — cuidado estético: fondo blanco, sombra y flecha */
.tooltip{
  position: fixed;
  display: inline-block;
  pointer-events: none;
  background: var(--bg);
  color: var(--txt);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 15px;
  line-height: 1.15;
  box-shadow: 0 10px 28px rgba(20,24,30,0.14);
  border: 1px solid rgba(0,0,0,0.06);
  z-index: 9999;
  opacity: 0;
  transform: translate(-50%,-120%);
  transition: opacity .14s ease, transform .12s ease;
  white-space: nowrap;
}
.tooltip.show{ opacity: 1; transform: translate(-50%,-115%); }

/* Flecha / triángulo */
.tooltip::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--bg);
  filter: drop-shadow(0 -1px 0 rgba(0,0,0,0.04));
}

/* ===== Estilos internos del tooltip ===== */

/* Nombre del centro comunitario */
.tooltip-nombre {
  font-size: 16px;
  font-weight: 700;       /* negrita fuerte */
  color: #000000;         /* negro */
  margin-top: 0px;
  margin-bottom: 2px;
}

/* Dirección */
.tooltip-direccion {
  font-size: 14px;
  font-weight: 500;       /* negrita media */
  color: #000000;         
  margin-bottom: 1px;
}

/* Descripción */
.tooltip-desc {
  font-size: 13px;
  font-weight: 400;       /* normal */
  color: #2c2c2c;         
  margin: 0px;
  margin-top: 1px;
  margin-bottom: 0px;
  line-height: 1.3;
}

/* Popup fijo inferior: rectangular (sin bordes redondeados) */
/*#popup {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: 8px;
  background: var(--bg);
  color: var(--txt);
  border-radius: 0;            /* RECTANGULAR: sin redondeo */
  /*padding: 7px 8px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 11px 22px rgba(10,20,30,0.16);
  z-index: 9998;
  display: "none";              /* aparece solo en hover */ /*para que aparezca de nuevo usar <display-box>*/
  /*font-size: 15px;
  line-height: 1.25; /*
}
/* Estructura interna del popup */
/*#popup .title { font-weight:700; margin-bottom:6px; font-size:16px; }
#popup .address { margin-bottom:6px; font-weight:600; color:#111; }
#popup .desc { margin:0; color:#111; opacity:.95; }
/* ====== Estilos internos del tooltip ====== */

/* Responsive tweaks */
@media (max-width: 640px){
  .tooltip{ font-size:12px; padding:6px 8px; }
  /*#popup{ left:8px; right:8px; bottom:8px; font-size:14px; padding:10px; }
}
/* Pines interactivos */
#puntos_rm use {
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
  transform-origin: center bottom; /* anima desde la base */
}

#puntos_rm use:hover {
  display: none;
  transform: scale(1.2) translateY(-3px);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
}

/* Animación bounce cuando están activos (ej: al hacer click) */
@keyframes bounce {
  40%, 60% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

#puntos_rm use.active {
  animation: bounce 0.6s ease;
}