/* ===================== mapa de escuelas =====================
   Usa la paleta y la tipografía de portada.css. */

.e-main{max-width:1180px; margin:0 auto; padding:0 1.15rem 4rem}
.e-cab{padding:2.6rem 0 1.6rem; max-width:44rem}
.e-cab h1{font-size:clamp(1.8rem,3.8vw,2.6rem); letter-spacing:-.04em; line-height:1.12; margin:.7rem 0 .6rem; font-weight:800}
.e-cab p{color:var(--txt2); margin:0; font-size:1.02rem; line-height:1.6}
.e-volver{
  display:inline-flex; align-items:center; gap:.4rem; color:var(--txt2); text-decoration:none;
  font-size:.86rem; font-weight:600; margin-bottom:.2rem;
}
.e-volver:hover{color:var(--acc)}
.e-volver .ico{width:1rem; height:1rem; transform:rotate(180deg)}

/* aviso de datos de ejemplo */
.e-aviso{
  display:flex; gap:.75rem; align-items:flex-start; margin:0 0 1.5rem;
  background:var(--senal-sup); border:1px solid color-mix(in srgb,var(--senal) 40%, transparent);
  border-radius:var(--r2); padding:.9rem 1.1rem; font-size:.89rem; line-height:1.6;
}
.e-aviso .ico{flex:none; width:1.2rem; height:1.2rem; margin-top:.1rem; color:color-mix(in srgb,var(--senal) 78%, var(--txt))}
.e-aviso b{display:block; margin-bottom:.15rem}

/* barra de filtros */
.e-filtros{
  position:sticky; top:3.6rem; z-index:20; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) 1.3fr auto; gap:.6rem; align-items:center;
  background:color-mix(in srgb,var(--sup) 92%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--linea); border-radius:var(--r); padding:.7rem; margin-bottom:1.2rem;
  box-shadow:var(--s1);
}
.e-campo{position:relative; display:flex; align-items:center}
.e-campo .ico{position:absolute; left:.65rem; width:1rem; height:1rem; color:var(--txt3); pointer-events:none}
.e-filtros select, .e-filtros input{
  width:100%; font:inherit; font-size:.88rem; color:var(--txt); background:var(--bg);
  border:1px solid var(--linea); border-radius:10px; padding:.55rem .7rem; appearance:none;
  transition:border-color .15s;
}
.e-filtros input{padding-left:2.1rem}
.e-filtros select{padding-right:1.9rem; cursor:pointer}
.e-filtros select:focus, .e-filtros input:focus{outline:none; border-color:var(--acc)}
.e-campo.sel::after{
  content:''; position:absolute; right:.75rem; width:.5rem; height:.5rem; pointer-events:none;
  border-right:2px solid var(--txt3); border-bottom:2px solid var(--txt3);
  transform:translateY(-2px) rotate(45deg); border-radius:1px;
}
.e-cuenta{
  padding:0 .7rem; font-size:.82rem; font-weight:700; color:var(--txt2); white-space:nowrap;
}
.e-cuenta b{color:var(--txt)}
.e-limpiar{
  background:none; border:0; color:var(--acc); font-size:.82rem; font-weight:650; padding:.3rem .4rem;
}
.e-limpiar[hidden]{display:none}

/* cuerpo: listado + mapa */
.e-cuerpo{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:1.2rem; align-items:start}
.e-lista{display:grid; gap:.6rem; max-height:calc(100vh - 11rem); overflow-y:auto; padding-right:.3rem}
.e-lista::-webkit-scrollbar{width:8px}
.e-lista::-webkit-scrollbar-thumb{background:var(--linea2); border-radius:99px}

.e-tarjeta{
  text-align:left; width:100%; background:var(--sup); border:1px solid var(--linea);
  border-radius:var(--r2); padding:.95rem 1rem; cursor:pointer;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.e-tarjeta:hover{border-color:var(--acc); transform:translateX(3px)}
.e-tarjeta.activa{border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-sup)}
.e-tarjeta h3{margin:0 0 .25rem; font-size:.98rem; letter-spacing:-.02em; font-weight:700; line-height:1.35}
.e-dir{display:flex; gap:.4rem; align-items:flex-start; color:var(--txt2); font-size:.85rem; line-height:1.45; margin:0}
.e-dir .ico{flex:none; width:.95rem; height:.95rem; margin-top:.18rem; color:var(--txt3)}
.e-chips{display:flex; flex-wrap:wrap; gap:.3rem; margin:.6rem 0 0}
.e-chip{
  font-size:.7rem; font-weight:700; letter-spacing:.02em; color:var(--acc);
  background:var(--acc-sup); border-radius:6px; padding:.15rem .42rem;
}
.e-contacto{display:flex; flex-wrap:wrap; gap:.5rem .9rem; margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--linea)}
.e-contacto a{
  display:inline-flex; align-items:center; gap:.35rem; font-size:.81rem; font-weight:600;
  color:var(--txt2); text-decoration:none;
}
.e-contacto a:hover{color:var(--acc)}
.e-contacto .ico{width:.95rem; height:.95rem}
.e-vacio{
  grid-column:1/-1; text-align:center; color:var(--txt2); background:var(--sup);
  border:1px dashed var(--linea2); border-radius:var(--r2); padding:2.2rem 1.2rem; font-size:.92rem;
}

/* mapa */
.e-mapa-caja{
  position:sticky; top:8.6rem; border:1px solid var(--linea); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--s2); background:var(--sup2);
}
#mapa{height:calc(100vh - 11rem); min-height:420px; width:100%; z-index:1}
.leaflet-container{background:var(--sup2); font-family:inherit}
[data-tema="oscuro"] .leaflet-tile{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.88)}
.leaflet-control-attribution{font-size:10px; background:color-mix(in srgb,var(--sup) 82%, transparent) !important; color:var(--txt3)}
.leaflet-control-attribution a{color:var(--txt2)}
.leaflet-bar a{background:var(--sup); color:var(--txt); border-bottom-color:var(--linea)}
.leaflet-bar a:hover{background:var(--sup2); color:var(--acc)}

/* pin propio */
.e-pin{background:none; border:0}
.e-pin svg{display:block; filter:drop-shadow(0 3px 5px rgba(10,20,36,.35))}
.e-pin.activo svg{transform:scale(1.18); transform-origin:50% 100%}

/* burbujas de agrupación */
.marker-cluster{background:color-mix(in srgb,var(--acc) 26%, transparent)}
.marker-cluster div{
  background:var(--acc); color:#fff; font-weight:700; font-family:inherit; font-size:.82rem;
}
.marker-cluster span{line-height:30px}

/* globo de información */
.leaflet-popup-content-wrapper{
  background:var(--sup); color:var(--txt); border-radius:var(--r2);
  box-shadow:var(--s3); border:1px solid var(--linea);
}
.leaflet-popup-tip{background:var(--sup); border:1px solid var(--linea)}
.leaflet-popup-content{margin:.85rem .95rem; font-size:.88rem; line-height:1.5; min-width:190px}
.leaflet-popup-content h3{margin:0 0 .3rem; font-size:.95rem; letter-spacing:-.02em; font-weight:700}
.leaflet-popup-content .e-dir{font-size:.82rem}
.leaflet-popup-close-button{color:var(--txt3) !important}

@media (max-width:960px){
  .e-filtros{grid-template-columns:1fr 1fr; top:3.4rem}
  .e-filtros .e-campo:nth-child(4){grid-column:1/-1}
  .e-cuenta{grid-column:1/-1; padding:.2rem 0 0; display:flex; justify-content:space-between; align-items:center}
  .e-cuerpo{grid-template-columns:1fr}
  .e-mapa-caja{position:static; order:-1}
  #mapa{height:52vh; min-height:320px}
  .e-lista{max-height:none; overflow:visible; padding-right:0}
}
@media (max-width:560px){
  .e-filtros{grid-template-columns:1fr}
  .e-cab{padding-top:1.8rem}
}
@media (prefers-reduced-motion:reduce){
  .e-tarjeta{transition:none}
}

/* color del pin, tomado de la paleta para que siga al tema */
.e-pin svg .cuerpo{fill:var(--acc); stroke:var(--sup); stroke-width:2}
.e-pin svg .punto{fill:var(--sup)}
.e-pin svg{transition:transform .18s cubic-bezier(.2,.7,.2,1)}