/* Mapa de reclamos. El mapa manda: ocupa todo el alto disponible bajo el encabezado.
   EL ALTO ES UNA VARIABLE porque lo comparten el mapa y la tarjeta de abiertos: si se escribiera dos
   veces, el día que alguien cambie uno el otro queda desalineado y nadie se entera hasta verlo. */
.mp-wrap{--mp-alto:min(70vh,620px);
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:900px){.mp-wrap{--mp-alto:60vh;grid-template-columns:1fr}}

/* La tarjeta de abiertos mide lo mismo que el mapa y scrollea por dentro. Sin esto, con 48 reclamos
   la lista empujaba la página hacia abajo y el mapa quedaba arriba de todo, fuera de la vista: para
   mirar un pin había que volver a subir. */
.mp-abiertos{height:var(--mp-alto);display:flex;flex-direction:column}
.mp-abiertos > h3{flex:0 0 auto;margin-top:0}
/* `min-height:0` NO es de adorno: sin él un hijo flex no puede achicarse por debajo de su contenido
   y el `overflow` no llega a activarse nunca — la lista desborda la tarjeta y sigue empujando.
   Va SIEMPRE junto con .tscroll (07-tablas.css) en el mismo elemento, nunca sola: .tscroll pone el
   marco de tabla (borde, radio, sombra) y ésta el alto — la excepción a los tres altos con nombre
   (.corta/.media/.larga) porque acá el alto lo fija --mp-alto (igualado al mapa), no una cifra fija. */
.mp-lista{flex:1 1 auto;min-height:0;overflow-y:auto}
/* EL MAPA SE PINTABA ENCIMA DEL HEADER. Leaflet reparte z-index altos a mano: 400 a las capas y
   1000 a los controles (el +/− del zoom), y el header del tablero es `position:sticky; z-index:50`
   (styles/02-encabezado.css). 400 y 1000 le ganan a 50, así que al scrollear los tiles y los
   botones de zoom tapaban la marca, el usuario y la banda de indicadores.

   NO se resuelve bajándole el z-index a Leaflet: esos números son su orden INTERNO —tiles 200,
   marcadores 600, popups 700—, y aplastarlos deja los pines debajo del mapa.

   Se resuelve encerrando el mapa en su propio CONTEXTO DE APILAMIENTO: adentro Leaflet sigue
   ordenando como quiere, pero el conjunto entero vale 0 contra el resto de la página y no puede
   treparse por encima de nada. `isolation:isolate` lo crea aunque algún día se saque el z-index. */
#mp-mapa{height:var(--mp-alto);border-radius:12px;border:1px solid var(--line);background:var(--line-soft);
  position:relative;z-index:0;isolation:isolate;overflow:hidden}
.mp-pin{border-radius:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  font:500 12px system-ui;color:#412402;cursor:pointer}
/* EL GLIFO DEL SERVICIO dentro del pin (rayo / gota / señal). Hereda `color` del pin —el mismo #412402
   del número— así que el `fill:currentColor` es lo que garantiza que nunca se vaya del contraste
   medido: si algún día alguien cambia la tinta del pin, el glifo la sigue en vez de quedarse solo.
   Contrastes de esa tinta sobre los cuatro colores de antigüedad: 4,35 rojo · 6,92 naranja ·
   7,96 verde · 9,80 amarillo (mínimo 3 para un glifo). Ver MAPA_GLIFOS en modulos/mapa.js.

   EL PORCENTAJE NO SE MIDE SOBRE LOS 16 px DEL PIN. .mp-pin es `box-sizing:border-box` con 2 px de
   borde, así que la caja de contenido es de 12 y el porcentaje se calcula sobre ESO: con 62% el glifo
   media 7,9 px reales y los dos arcos del de internet se empastaban; con 78% mide 9,98. Los dos
   números salen de getComputedStyle en producción, no de la cuenta a mano — que da 7,4 y 9,4, porque
   el borde no redondea como uno supone. No se sube más porque el pin es un
   CÍRCULO: un glifo que llena la caja cuadrada se sale por las esquinas del círculo. */
.mp-pin svg{width:78%;height:78%;display:block;fill:currentColor;pointer-events:none}
.mp-hr{border:0;border-top:1px solid var(--line);margin:8px 0}
/* LAS TABLAS DEL MAPA VIVEN EN UNA COLUMNA ANGOSTA (~370 px), y el estilo de la casa usa
   `white-space:nowrap` porque sus tablas suelen tener toda la pantalla. Acá eso desbordaba: la tabla
   de abiertos medía 600 px en 371, y la columna que se caía del cuadro era DÍAS —la señal de
   urgencia—, así que había que scrollear a mano para ver lo más importante de cada fila.
   `table-layout:fixed` hace que manden los anchos del <colgroup>, y el texto largo se recorta con
   puntos suspensivos en vez de empujar. Es el mismo arreglo que ya se hizo en el SiViRP. */
.mp-tbl{table-layout:fixed}
.mp-tbl td{overflow:hidden;text-overflow:ellipsis}
/* La fila vacía es la excepción: ocupa todo el ancho y tiene que poder centrarse sin recortarse. */
.mp-tbl tr.vacio td{overflow:visible;text-overflow:clip}
/* `align-items:center`, y no el `stretch` por defecto de flex: ahora .mp-chips mezcla los .goto de
   los dos desplegables (más altos, padding 8px) con el .smchip de «nuevas» (más bajo, padding 5px,
   NO es flex así que su contenido no se autocentra si el navegador le estira la caja). Sin esto, el
   chip de nuevas quedaba más alto que su texto y el texto se veía pegado arriba, no centrado. */
.mp-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px}
/* El chip de nuevas: el punto va un poco más chico que el texto que lo acompaña. */
.mp-nuevas{white-space:nowrap}
.mp-barra{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:8px}
.mp-sello{font-size:12.5px;color:var(--muted)}
.mp-sello.mal{color:var(--neg);font-weight:500}
.mp-viejo{border-left:3px solid var(--neg);padding-left:10px}
.mp-heredado{font-size:12px;color:var(--warn);display:block;margin-top:4px}

/* Los controles PROPIOS del calor (período, tipos): misma fila de chips que .mp-chips, aparte para no
   mezclarse visualmente con los de los pines — son dos filtros distintos, ver mapaCalorFiltroNormalizar. */
.mp-calor-chips{margin-top:-2px}

/* El punto de color al lado de cada zona en el desplegable de la hoja de ruta — el MISMO color que
   la línea de esa zona en el mapa (mapaRutaZonaColor, modulos/mapa.js). Sin esto había que mirar el
   mapa para saber qué color le tocaba a cada zona; con esto el selector alcanza solo. Mismo patrón
   que .comcal-it .dot (styles/09-gestion.css, módulo Comunicación), un poco más grande porque acá
   comparte fila con más aire (.cmpopt ya pone gap:8px entre casilla / punto / texto / cantidad).
   El borde interno (box-shadow inset) evita que los colores más claros de la paleta se laven contra
   el fondo blanco del panel .cmpdpanel. */
.mp-calor-chips .cmpopt .dot{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}

/* La tarjeta de Abiertos se puede plegar (pedido de Matías: «para que se pueda ver mejor el mapa»).
   Plegada, el mapa pasa a ocupar la fila completa: SE REUSA la misma regla de una sola columna que ya
   usa el corte de celular (arriba, @media max-width:900px) — la tarjeta plegada (queda sólo el
   encabezado con el conteo) cae DEBAJO del mapa a ancho completo, en vez de escribir un layout nuevo. */
.mp-wrap.mp-wrap-full{grid-template-columns:1fr}
.mp-abiertos-hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* Plegada se esconde la tabla y el alto FIJO (--mp-alto, igualado al mapa) se suelta: si no, la
   tarjeta dejaría un hueco vacío del tamaño del mapa por debajo del encabezado. */
.mp-abiertos.plegada{height:auto}
.mp-abiertos.plegada .mp-lista{display:none}