/* ============================================================
   Portal de Servicios Climáticos (DMC) — Mapa de la red EMA (P21)
   Mapa esquemático estático (sin tiles externos): puntos por
   lat/lon coloreados por temperatura. Alternativa accesible: el
   catastro (tabla). En producción: Leaflet + GeoJSON.
   Reutiliza tokens.css + portada.css + catalogo.css (breadcrumb).
   Sin CSS inline.
   ============================================================ */

.dmc-mapa { padding-block: var(--sp-5) var(--sp-7); }

.dmc-mapa__head { margin-bottom: var(--sp-4); }
.dmc-mapa__titulo { font-size: clamp(1.6rem,3vw,2.1rem); font-weight:700; letter-spacing:-.02em; margin:0 0 var(--sp-2); }
.dmc-mapa__intro { color: var(--tinta-suave); margin:0; max-width:74ch; }

.dmc-campo__lbl { display:block; font-size:.9rem; font-weight:600; margin:0 0 6px; color:var(--tinta); }

/* Lienzo del mapa */
.dmc-mapa__lienzo { background: var(--fondo-alt); border:1px solid var(--linea); border-radius:var(--radio); padding: var(--sp-3); display:flex; justify-content:center; }
.dmc-mapa__svg { display:block; width:auto; max-width:100%; height:auto; max-height:76vh; }
.dmc-mapa__leyenda { margin: var(--sp-2) 0 0; font-size:.76rem; color:var(--tinta-suave); text-align:center; }

/* Puntos de estación */
.dmc-mapa-pt { stroke:#fff; stroke-width:1; cursor:pointer; vector-effect:non-scaling-stroke; transition: r .1s ease, stroke-width .1s ease; }
.dmc-mapa-pt:hover, .dmc-mapa-pt.is-hi { stroke:var(--tinta); stroke-width:1.6; }
.dmc-mapa-pt.is-dim { opacity:.12; }
/* Región elegida: sus estaciones resaltan (el zoom por región las acerca) */
.dmc-mapa-pt.is-region { stroke-width:1.4; }
.dmc-mapa-pt.tramo-1 { fill: var(--temp-1); } .dmc-mapa-pt.tramo-2 { fill: var(--temp-2); }
.dmc-mapa-pt.tramo-3 { fill: var(--temp-3); } .dmc-mapa-pt.tramo-4 { fill: var(--temp-4); }
.dmc-mapa-pt.tramo-5 { fill: var(--temp-5); } .dmc-mapa-pt.tramo-6 { fill: var(--temp-6); }

/* Retícula y etiquetas de latitud */
.dmc-mapa-grid { stroke: var(--linea); stroke-width:1; stroke-dasharray:3 4; }
.dmc-mapa-glab { fill: var(--tinta-suave); font-family: var(--font-mono); font-size:11px; }

/* Aside */
.dmc-mapa__aside { position: sticky; top: var(--sp-4); }
.dmc-mapa__escala { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin: var(--sp-3) 0; padding: var(--sp-3) 0; border-block:1px solid var(--linea); }

.dmc-mapa__panel { border:1px solid var(--linea); border-radius:var(--radio); background:#fff; padding: var(--sp-4); min-height: 180px; }
.dmc-mapa__panel-prompt { margin:0; color:var(--tinta-suave); }
.dmc-mapa__panel-eyebrow { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--dmc-azul); margin:0 0 4px; }
.dmc-mapa__panel-nom { font-size:1.15rem; font-weight:700; margin:0 0 6px; line-height:1.2; }
.dmc-mapa__panel-temp { display:flex; align-items:baseline; gap:8px; margin:0 0 var(--sp-3); }
.dmc-mapa__panel-temp .dmc-punto { width:14px; height:14px; align-self:center; }
.dmc-mapa__panel-temp-num { font-size:1.8rem; font-weight:700; line-height:1; }
.dmc-mapa__panel-unid { color:var(--tinta-suave); font-size:.9rem; }
.dmc-mapa__panel-meta { margin:0 0 var(--sp-3); }
.dmc-mapa__panel-meta > div { display:flex; justify-content:space-between; gap:var(--sp-3); padding:5px 0; border-bottom:1px solid var(--linea); }
.dmc-mapa__panel-meta > div:last-child { border-bottom:0; }
.dmc-mapa__panel-meta dt { font-size:.82rem; color:var(--tinta-suave); margin:0; }
.dmc-mapa__panel-meta dd { font-size:.88rem; font-weight:600; margin:0; text-align:right; }
.dmc-mapa__panel .btn { min-height: var(--touch); }

/* Listado de estaciones por región (aparece al filtrar por región) */
.dmc-mapa__lista-wrap { margin-bottom: var(--sp-4); }
.dmc-mapa__lista-tit { font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--dmc-azul); margin:0 0 8px; }
.dmc-mapa__lista { list-style:none; margin:0; padding:0; max-height:420px; overflow-y:auto; border:1px solid var(--linea); border-radius:var(--radio-sm,6px); }
/* Scrollbar siempre visible (en Mac el overlay se oculta y no se nota que hay más) */
.dmc-mapa__lista::-webkit-scrollbar { width:10px; }
.dmc-mapa__lista::-webkit-scrollbar-track { background:var(--fondo-alt,#f0f4f8); }
.dmc-mapa__lista::-webkit-scrollbar-thumb { background:#b9c6d2; border-radius:6px; border:2px solid var(--fondo-alt,#f0f4f8); }
.dmc-mapa__lista { scrollbar-width:thin; scrollbar-color:#b9c6d2 var(--fondo-alt,#f0f4f8); }
.dmc-mapa__lista li + li .dmc-mapa__lista-item { border-top:1px solid var(--linea); }
.dmc-mapa__lista-item {
  display:flex; align-items:center; gap:10px; width:100%;
  background:transparent; border:0; text-align:left;
  padding:9px 12px; min-height:var(--touch); cursor:pointer; color:var(--tinta);
}
.dmc-mapa__lista-item:hover { background:var(--fondo-alt,#f5f8fb); }
.dmc-mapa__lista-item.is-sel { background:var(--fondo-alt,#eef4fa); box-shadow:inset 3px 0 0 var(--dmc-azul); }
.dmc-mapa__lista-item .dmc-punto { flex:0 0 auto; }
.dmc-mapa__lista-nom { flex:1 1 auto; font-size:.9rem; }
.dmc-mapa__lista-item .dmc-dato { font-weight:700; font-variant-numeric:tabular-nums; }

.dmc-mapa__nota { margin-top: var(--sp-4); font-size:.78rem; color:var(--tinta-suave); }

@media (max-width: 991.98px) { .dmc-mapa__aside { position:static; } .dmc-mapa__svg { max-height:64vh; } }

@media print {
  .dmc-header,.dmc-footer,.dmc-navsearch,.dmc-navsesion,.dmc-toggler,.dmc-mapa__panel .btn { display:none !important; }
}