/* Componente: Mapa */

.mapa {
    background: var(--superficie);
    border-radius: var(--radio);
    padding: 0.9rem;
    box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    min-height: 22rem;
}

.mapa-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.mapa-ruta {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    min-height: 1.5rem;
    font-size: var(--t-sm);
}
.mapa-ruta-btn {
    font-family: var(--sans);
    font-size: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--tinta-suave);
    border-bottom: 1px solid var(--borde-fuerte);
}
.mapa-ruta-btn:hover { color: var(--tinta); border-bottom-color: var(--tinta); }
.mapa-ruta-actual {
    font-family: var(--sans);
    font-size: inherit;
    font-weight: 700;
    color: var(--tinta);
}
.mapa-ruta-sep { color: var(--tinta-tenue); }

/* La caja: botones arriba, titulo debajo. */
.mapa-metricas {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;

    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(2px);
    border: 1px solid var(--borde-fuerte);

    border-radius: 9999px;
    padding: 2px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);   /* la misma que usa el zoom */
}

/* Las cuatro metricas en UNA sola fila.
   Se probo dejandolas envolver y partidas se leen peor que apretadas: dejan de
   parecer un selector y parecen dos. Asi que no envuelve y lo que cede es el
   tamaño de letra y el relleno, que es de donde se saca sitio sin perder
   ningun nombre -- los nombres son lo unico que distingue una metrica de otra
   y no se recortan ni se esconden. */
.mapa-metricas-fila {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
}

.mapa-metrica {
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.26rem 0.6rem;
    white-space: nowrap;
    border: none;
    background: none;
    color: var(--tinta-suave);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.15s;
}
/* Estrecho: se aprieta el relleno antes que dejar que se salga. El nombre NO
   se recorta ni se esconde -- es lo unico que distingue una metrica de otra. */
@media (max-width: 640px) {
    .mapa-metrica { padding: 0.24rem 0.42rem; font-size: 0.64rem; }
}

@media (max-width: 400px) {
    .mapa-metrica { padding: 0.22rem 0.32rem; font-size: 0.6rem; }
}

.mapa-metrica:hover { color: var(--tinta); }
.mapa-metrica.active { background: var(--tinta); color: var(--superficie); }

.mapa-marco {
    position: relative;
    flex: 1;
    min-height: 0;
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    overflow: hidden;
}
.mapa-lienzo { height: 100%; min-height: 17rem; width: 100%; background: var(--fondo); }
.mapa-cargando {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    z-index: 500;
    font-size: var(--t-sm);
    color: var(--tinta-suave);
}

.mapa-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}
.mapa-leyenda {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 8rem;              /* la misma que la de temperatura */
    font-size: var(--t-xs);
    color: var(--tinta-suave);
}
.mapa-leyenda-titulo {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    line-height: 1.2;
}
.mapa-leyenda-barra { display: flex; height: 0.5rem; border-radius: 2px; overflow: hidden; }
.mapa-leyenda-barra i { flex: 1; display: block; }
.mapa-leyenda-topes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--mono);
    font-size: 0.5625rem;
    color: var(--tinta-suave);
}
.mapa-leyenda-sindatos { display: inline-flex; align-items: center; gap: 0.2rem; }
.mapa-leyenda-sindatos i {
    width: 0.5rem;
    height: 0.5rem;
    display: inline-block;
    border-radius: 1px;
}
.mapa-leyenda-topes > span:last-child { text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mapa-leyenda-vacia { font-style: italic; color: var(--tinta-tenue); }
.mapa-pista { font-size: var(--t-xs); color: var(--tinta-tenue); margin: 0; }

.mapa-etiqueta {
    background: none;
    border: none;
    pointer-events: none;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}
.mapa-etiqueta span {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
    font-family: var(--sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--tinta);
    text-shadow:
         1px  1px 0 rgba(255, 255, 255, 0.95),
        -1px  1px 0 rgba(255, 255, 255, 0.95),
         1px -1px 0 rgba(255, 255, 255, 0.95),
        -1px -1px 0 rgba(255, 255, 255, 0.95);
}
.mapa-etiqueta-activa span { font-size: 0.72rem; color: var(--marca); }

.leaflet-tooltip {
    font-family: var(--sans);
    font-size: var(--t-xs);
    line-height: 1.4;
    border-radius: var(--radio-sm);
    border: 1px solid var(--borde-fuerte);
    box-shadow: none;

    /* El globo del clima lleva seis datos en dos columnas y Leaflet, por
       defecto, deja que la caja crezca cuanto quiera. Con un tope se reparten
       en rejilla en vez de salir en una tira que se sale del mapa. */
    max-width: 15rem;
    white-space: normal;
}
.leaflet-control-attribution { font-family: var(--sans); font-size: 0.625rem; }

@media (min-width: 901px) {
    .portada-cuerpo .mapa-pista { display: none; }
}

.portada .mapa {
    border: 1px solid var(--p-mapa-borde);
    box-shadow: var(--p-mapa-sombra);
}


.leaflet-bottom.leaflet-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px;
}
.leaflet-bottom.leaflet-left .leaflet-control {
    float: none;
    clear: none;
    margin: 0;
}

@media (max-width: 520px) {
    .leaflet-bottom.leaflet-left .mapa-metrica { padding: 3px 6px; font-size: 0.6rem; }
}


.leaflet-bottom.leaflet-left .mapa-leyenda {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(2px);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    padding: 0.4rem 0.5rem;
}
.leaflet-bottom.leaflet-left .mapa-leyenda:empty { display: none; }
.leaflet-bottom.leaflet-left .mapa-leyenda[hidden] { display: none; }

/* ---------- la ayuda ---------- */
.mapa-ayuda-btn {
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    width: 1.35rem;
    height: 1.35rem;
    margin-left: 2px;
    align-self: center;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--tinta-tenue);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.mapa-ayuda-btn:hover,
.mapa-ayuda-on { background: var(--tinta); color: var(--superficie); }

.mapa-metricas { position: relative; }
.mapa-pista {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 2;
    width: max-content;
    max-width: 15rem;
    margin: 0;
    padding: 0.5rem 0.65rem;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.45);
    font-size: var(--t-xs);
    line-height: 1.4;
    color: var(--tinta-media);
}


.mapa-pista-usar { display: block; }
.mapa-pista-nota {
    display: block;
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--borde);
    color: var(--tinta-suave);
}
.mapa-pista-nota strong { color: var(--tinta); font-weight: 600; }


/* ---------- el mapa en movil ---------- */

@media (max-width: 760px) {
    .mapa-cabecera {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .mapa-ruta { flex: 1 1 auto; min-width: 0; }
}

.leaflet-bar.mapa-nav {
    border: none;
    box-shadow: none;
    background: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.leaflet-bar.mapa-nav a.mapa-nav-btn {
    width: 2.25rem;
    height: 2.25rem;
    line-height: 1;
    border-radius: 50%;
    border: 1px solid var(--borde);

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--superficie);
    color: var(--tinta);
    box-shadow: var(--sombra);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.leaflet-bar.mapa-nav a.mapa-nav-btn:first-child,
.leaflet-bar.mapa-nav a.mapa-nav-btn:last-child {
    border-radius: 50%;
}

.leaflet-bar.mapa-nav a.mapa-nav-btn:hover,
.leaflet-bar.mapa-nav a.mapa-nav-btn:focus-visible {
    background: var(--marca-claro);
    color: var(--marca-hondo);
    border-color: var(--marca-borde);
}

.leaflet-bar.mapa-nav a.mapa-nav-btn i { font-size: 0.9rem; }

.mapa-vecino-nombre {
    background: none;
    border: none;
    pointer-events: none;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}

.mapa-vecino-nombre span {
    font-family: var(--sans);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tinta-suave);

    text-shadow:
         1px  1px 0 rgba(255, 255, 255, 0.9),
        -1px  1px 0 rgba(255, 255, 255, 0.9),
         1px -1px 0 rgba(255, 255, 255, 0.9),
        -1px -1px 0 rgba(255, 255, 255, 0.9);
}

.mapa-oceano-nombre {
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    background: none;
    border: none;
    pointer-events: none;
}

.mapa-oceano-caja {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    text-align: center;

    width: 6rem;
}

.mapa-oceano-nombre-t,
.mapa-oceano-nombre-p {
    display: block;
    font-family: var(--sans);
    text-shadow:
         1px  1px 0 rgba(255, 255, 255, 0.9),
        -1px  1px 0 rgba(255, 255, 255, 0.9),
         1px -1px 0 rgba(255, 255, 255, 0.9),
        -1px -1px 0 rgba(255, 255, 255, 0.9);
}

.mapa-oceano-nombre-t {
    white-space: nowrap;
    font-size: 0.58rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--tinta-suave);
}

.mapa-oceano-nombre-p {
    margin-top: 0.2rem;
    line-height: 1.3;
    font-size: 0.54rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--marca-hondo);
}

.mapa-etiqueta-dato {
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    padding: 0 0.32rem;
    border-radius: 999px;
    text-shadow: none;

    /* Color y letra los pone el JS con la escala de temperatura. Esto es solo
       el respaldo por si no hubiera escala cargada. */
    color: #fff;
    background: var(--tinta);

    /* El anillo blanco separa la pildora del poligono, que puede estar teñido
       con un color muy parecido: a 22 grados, la pildora y su propio poligono
       son el mismo rojo. */
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.92);
}
.mapa-etiqueta-activa .mapa-etiqueta-dato {
    box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--marca);
}

/* Normas: un solo color. El poligono ya viene teñido por cantidad con la rampa
   de la leyenda; graduar tambien la pildora seria decirlo dos veces. */
.mapa-etiqueta-normas {
    color: #fff;
    background: var(--marca);
}

.mapa-tarjeta {
    position: relative;
    display: inline-block;
    padding: 0;
    text-transform: none;
    letter-spacing: 0;
    text-shadow: none;
    cursor: pointer;
}

/* Media talla con el pais entero a la vista: son veinticinco a la vez y lo que
   importa ahi es el reparto, no la foto. */
.mapa-tarjeta img,
.mapa-tarjeta-sinfoto {
    display: block;
    width: 1.5rem; height: 1.5rem;
    object-fit: cover;
    border-radius: 3px;
    background: #e9ecef;
    box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: width 0.18s, height 0.18s;
}
.mapa-tarjeta-sinfoto {
    display: flex; align-items: center; justify-content: center;
    color: var(--tinta-suave); font-size: 0.6rem;
}

/* El elegido crece: ya no compite con los otros veinticuatro. */
.mapa-tarjeta-sel img,
.mapa-tarjeta-sel .mapa-tarjeta-sinfoto {
    width: 4.5rem; height: 4.5rem;
    border-radius: 5px;
    box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* El numero NO encoge con la miniatura: es el dato, y a media talla dejaria de
   leerse. Por eso va en rem fijos y no en porcentaje de la tarjeta. */
.mapa-tarjeta-n {
    position: absolute;
    top: -0.35rem; left: -0.4rem;
    font-family: var(--mono);
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 1.45;
    color: #fff;
    background: var(--marca);
    min-width: 1.05rem;
    padding: 0 0.22rem;
    text-align: center;
    border-radius: 999px;
    box-shadow: 0 0 0 1.5px #fff;
    font-variant-numeric: tabular-nums;
}

.mapa-tarjeta-nueva-et {
    position: absolute;
    bottom: -0.35rem; right: -0.45rem;
    font-family: var(--mono);
    font-size: 0.44rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    background: var(--marca);
    padding: 0 0.22rem;
    border-radius: 999px;
    box-shadow: 0 0 0 1.5px #fff;
}

@media (prefers-reduced-motion: no-preference) {
    .mapa-tarjeta-nueva img,
    .mapa-tarjeta-nueva .mapa-tarjeta-sinfoto { animation: mapa-latido 1.15s ease-in-out 6; }
    @keyframes mapa-latido {
        0%, 100% { box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0, 0, 0, 0.3); }
        50%      { box-shadow: 0 0 0 4px rgba(182, 28, 28, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3); }
    }
}

/* ---------- pantalla completa (boton dentro del mapa) ---------- */

.mapa-max-sin-scroll { overflow: hidden; }

/* El velo, para que se lea como un modal y no como un mapa que se ha comido la
   pagina. Cubre desde donde acaba lo pegajoso hasta abajo, por DETRAS del mapa
   —z-index 890 contra 900—, asi que solo se ve en los huecos de los lados en
   pantallas anchas. Ahi es justo donde hace falta: es lo que explica que el
   resto de la pagina sigue ahi, esperando. */
.mapa-max::before {
    content: '';
    position: fixed;
    top: var(--mapa-max-top, var(--alto-pegajoso, 7rem));
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 890;

    /* Negro puro y bien oscuro. Estaba en rgba(17,17,17,.55) y sobre el fondo
       claro del portal eso da un gris medio: se veia plomo, como una capa
       pintada, no como un velo.

       El desenfoque es lo que de verdad lo delata como velo: sin el, un negro
       translucido y una pintura plana se ven igual; con el, se reconoce que hay
       pagina detras. Donde no haya backdrop-filter queda el negro solo, que ya
       funciona. */
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.mapa-max .mapa {
    position: fixed;

    /* --mapa-max-top lo escribe el JS al abrir: es el borde inferior REAL de
       lo que esta pegado arriba en ese momento. --alto-pegajoso queda de
       respaldo, y 7rem como ultimo recurso —un 0 pondria el mapa encima de la
       cabecera y dejaria al visitante sin salida—. */
    top: var(--mapa-max-top, var(--alto-pegajoso, 7rem));
    bottom: 0;

    /* No de borde a borde: el mismo ancho que el contenido del portal (74rem),
       centrado. Estirarlo a toda la pantalla sacaria el mapa de la reja en la
       que vive el resto de la pagina, y al cerrar el salto seria brusco. */
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, 74rem);

    z-index: 900;
    margin: 0;
    padding: 0.5rem 1.25rem 1rem;
    background: var(--fondo, #fff);
    border-radius: 0;
    display: flex;
    flex-direction: column;
}
.mapa-max .mapa-marco { flex: 1 1 auto; min-height: 0; }
.mapa-max .mapa-lienzo { height: 100%; }

/* El alto, medido contra el viewport DINAMICO.
 *
 * Con 'bottom: 0' a secas el movil se queda corto: mientras la barra de
 * direcciones esta a la vista, el viewport de maquetacion es mas alto que el
 * visible, asi que el borde de abajo del mapa cae fuera de pantalla y parece
 * que no llega. 100dvh mide lo que de verdad se ve y se reajusta solo cuando la
 * barra aparece o desaparece.
 *
 * Va en @supports y no directo porque al fijar el alto hay que soltar el
 * 'bottom', y donde no haya dvh el 'bottom: 0' de arriba sigue siendo lo
 * correcto. */
@supports (height: 100dvh) {
    .mapa-max .mapa {
        bottom: auto;
        height: calc(100dvh - var(--mapa-max-top, var(--alto-pegajoso, 7rem)));
    }
}

@media (max-width: 760px) {
    .mapa-max .mapa {
        /* En movil TAMBIEN por debajo de lo pegajoso, no pegado arriba.
           Tapando la cabecera y la cinta se perdian las dos unicas salidas: el
           scroll queda bloqueado mientras esta abierto, asi que sin cabecera a
           la vista y con el boton de cerrar debajo del encabezado el visitante
           se quedaba encerrado en el mapa. */
        width: 100%;
        padding: 0.4rem 0.5rem 0.5rem;
    }
}

/* El boton de salir, en rojo mientras la pantalla completa esta abierta. Los
   otros dos de la barra son grises y hacen cosas muy distintas —volver al pais,
   ir a mi ubicacion—; este es la salida y tiene que distinguirse de ellos. */
.leaflet-bar.mapa-nav a.mapa-nav-btn.mapa-nav-salir {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
}
.leaflet-bar.mapa-nav a.mapa-nav-btn.mapa-nav-salir:hover {
    background: var(--marca-hondo);
    border-color: var(--marca-hondo);
    color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
    .mapa-nav-salir { animation: mapa-salida 1.4s ease-in-out 3; }
    @keyframes mapa-salida {
        0%, 100% { box-shadow: 0 0 0 0 rgba(182, 28, 28, 0.55); }
        50%      { box-shadow: 0 0 0 6px rgba(182, 28, 28, 0); }
    }
}

/* El icono dentro de la pildora del rotulo.
 *
 * Solo aparece cuando lo que se enseña NO son los grados: sin el, una pildora
 * con un 80 podria ser 80 % de humedad, 80 % de nubes o 80 km/h de viento. Con
 * los grados no hace falta —el simbolo ya lo dice— y el sitio se aprovecha
 * mejor para la cifra. */
.mapa-etiqueta-dato-ic i {
    font-size: 0.82em;
    margin-right: 0.18rem;
    opacity: 0.85;
}

/* ---- El globo del territorio: todo el pronostico junto ---- */

.mapa-globo-cab {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    margin-top: 0.15rem;
}
.mapa-globo-grande {
    font-size: 1.35em;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.mapa-globo-pie {
    color: #888;
    font-size: 0.9em;
}

.mapa-globo-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(3.9rem, 1fr));
    gap: 0.2rem 0.45rem;
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(0, 0, 0, 0.09);
}
.mapa-globo-dato {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* El circulo teñido con la escala de SU variable.
 *
 * El color es el dato, no un adorno: dice si la cifra es mucha o poca sin
 * tener que conocer el rango de cada una —nadie sabe de memoria si 45 km/h de
 * viento es mucho—. La tinta del icono la elige el contraste medido contra ese
 * fondo, igual que en la pildora del rotulo. */
.mapa-globo-dato i {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.62rem;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* La hora a la que corresponden los circulos, al pie del globo. Pequeña y
   apagada: es la unidad de medida de lo de arriba, no un dato mas. */
.mapa-globo-hora {
    margin-top: .3rem;
    font-size: .82em;
    opacity: .8;
}

/* El estado del cielo, DENTRO de la pildora de la temperatura.
 *
 * Estuvo un momento en una chapa redonda aparte y era una pieza mas que colocar
 * junto a cada uno de los 1.874 rotulos. Dentro, el rotulo vuelve a ser una
 * sola cosa: icono y grados en la misma fila y en el mismo fondo.
 *
 * Conserva su color —el mismo de la ficha del clima de la portada— y se
 * despega del fondo teñido con un halo que pone el JS: el de la tinta de la
 * propia pildora, que por construccion contrasta con ella. */
.mapa-etiqueta-cielo {
    line-height: 1;

    /* La regla de al lado, .mapa-etiqueta-dato-ic i, apaga el icono del DATO al
       85 % para que no compita con la cifra. Aqui no: el color del cielo ES la
       informacion —ambar sol, azul lluvia— y apagarlo lo desdibuja justo sobre
       los fondos mas oscuros de la rampa. */
    opacity: 1;
}

/* Dos excepciones, y solo por legibilidad a este tamaño: el gris de "nublado"
   y el celeste de la nieve se pierden sobre buena parte de la rampa. Son el
   mismo color un punto mas contrastado, no otro color. El resto —el ambar del
   sol, el azul de la lluvia, el indigo de la luna— se queda exactamente como en
   la ficha del clima. */
.mapa-etiqueta-cielo.clima-nublado { color: #475569; }
.mapa-etiqueta-cielo.clima-nieve   { color: #38bdf8; }

/* La silueta del Peru del boton de "ver todo el Peru".
 *
 * Se pinta con currentColor para que herede el estado del boton —normal, hover,
 * y el blanco sobre rojo de la pantalla completa— igual que hacen los iconos de
 * Font Awesome de sus dos vecinos. Un poco mas grande que ellos porque una
 * silueta necesita mas sitio que un simbolo para reconocerse. */
.mapa-nav-peru {
    width: 1.3rem;
    height: 1.3rem;
    display: block;
    fill: currentColor;
}

/* ---- El globo del mapa de presupuesto ----

   El globo por defecto esta pensado para el clima: seis datos cortos, con
   max-width y white-space: normal para que se repartan en rejilla. Con importes
   eso se lee fatal --"S/ 1 234 567" por un lado y "PIM" por otro-- asi que este
   se ensancha lo que necesite y prohibe el corte de linea.

   Va con :has() y no con una clase en el propio globo porque el tooltip se ata
   UNA vez por capa, al construirla, y la metrica cambia despues sin volver a
   atarlo: una clase puesta al atar se quedaria desfasada. */
.leaflet-tooltip:has(.mapa-globo-plata) {
    max-width: none;
    font-size: var(--t-sm);
}

.mapa-globo-plata {
    display: block;
    margin-top: 0.25rem;
}

.mapa-globo-plata-fila {
    display: block;
    white-space: nowrap;
    line-height: 1.5;
}

/* La etiqueta, detras de la cifra y mas discreta: la cifra es el dato. */
.mapa-globo-plata-fila i {
    font-style: normal;
    font-size: var(--t-xs);
    color: #666;
    margin-left: 0.3rem;
}

/* La medida que se esta pintando ahora mismo. Negrita Y color: solo con
   negrita se distingue mal en un globo pequeño, y solo con color no lo ve
   quien no distingue bien los colores. */
.mapa-globo-plata-fila.es-activa {
    font-weight: 700;
    color: #1f6f43;
}

.mapa-globo-plata-fila.es-activa i { color: #1f6f43; opacity: 0.85; }

/* La pista del globo de normas: que el clic filtra el buscador.
   Discreta a proposito -- es una instruccion, no un dato. */
.mapa-globo-pista {
    font-size: var(--t-xs);
    color: #777;
    font-style: italic;
}

/* La lista de normas del globo. Cada una en su linea y sin partirse: un
   "D.S. N° 117-2026-PCM" cortado por la mitad no se reconoce. */
.mapa-globo-normas {
    display: block;
    margin: 0.25rem 0 0.15rem;
}

.mapa-globo-norma {
    display: block;
    white-space: nowrap;
    font-size: var(--t-xs);
    line-height: 1.45;
}

.mapa-globo-mas { color: #777; font-style: italic; }