/* ============================================================
   MARCADORES, AGRUPACIONES Y LEYENDA DEL MAPA
   ------------------------------------------------------------
   Punto unico para los dos mapas del sitio: la portada y /chat.
   Antes esto estaba copiado tal cual en index.css y en chat.css, y
   cualquier retoque habia que hacerlo dos veces (o se hacia una sola
   y los dos mapas dejaban de parecerse).

   El color de un punto es la GRAVEDAD del suceso, en la MISMA escala
   que el baremo del portal de transparencia (/transparency#baremo).
   Si alli se cambia un color hay que cambiarlo aqui: son la misma
   escala contada dos veces, y el sentido de todo esto es que quien ve
   un punto rojo en el mapa reconozca el rojo de "extrema gravedad".

   No hay brillo por antiguedad. Lo hubo, y se quito: ver el cabecero
   de js/markers.js para el porque. En resumen, el color de gravedad es
   la unica senal continua del mapa, y competia con ella.
   ============================================================ */

/* ------------------------------------------------------------------
   LOS TOKENS DE LA PAGINA, CON RESPALDO. Y no es cosmetica.
   ------------------------------------------------------------------
   Esta hoja se escribio para la portada y /chat, que definen `--blur`,
   `--txt`, `--line` y compania en su propio `:root`. Desde que la
   comparten TAMBIEN /embed, /consulta y las fichas de entidad -que
   cargan otras hojas- esos tokens dejaron de existir en la mitad de las
   paginas, y un `var(--x)` sin valor NO ES UN ERROR: la propiedad
   entera se descarta en silencio.

   Lo que eso producia: `backdrop-filter: var(--blur)` se caia, el popup
   se quedaba con su fondo al 64% SIN desenfoque, y el mapa se leia a
   traves del texto de la tarjeta. Se veia en /embed y en /consulta, y
   nadie lo habria atado nunca a un token que falta.

   Con el respaldo, la hoja funciona sola en cualquier pagina y la que
   defina los suyos sigue mandando: `var(--x, valor)` prefiere SIEMPRE
   el de la pagina. Los valores de aqui son los de index.css, de donde
   salio este fichero.
   ------------------------------------------------------------------ */

:root {
    --sev-extrema: #ff2d3a;
    --sev-grave: #ff6b2e;
    --sev-media: #f5c451;
    --sev-menor: #34d399;
    --sev-leve: #8b8b96;
    /* El portal pinta "sin clasificar" en #33333d, que sobre la trama
       oscura del mapa no se ve. Se aclara solo para el mapa; ademas el
       punto va hueco, que es la senal que de verdad lo distingue. */
    --sev-sin: #5c5c6a;
}

/* Cada tramo trae su color, la tinta que se lee encima y el diametro
   del punto: la gravedad tambien se nota en el tamano, no solo en el
   tono, para quien no distingue bien los colores.

   Los seis bajaron 3px (eran 15..11) cuando el mapa de dev paso de un
   punyado de casos a 1377: a la escala de un pais entero los puntos ya
   no se leian como puntos, se leian como manchas pegadas unas a otras.
   Se conserva el escalon de 1px entre tramos, que es lo que hace que
   el tamano siga contando la gravedad. Bajar mas rompe eso: por debajo
   de 8px un circulo con aro interior deja de tener sitio para el aro.
   Si se tocan, hay que mirar size() en js/markers.js -la caja del
   icono- y el margen de .legend-sev .legend-dot, aqui abajo. */
.sev-extrema { --sev: var(--sev-extrema); --sev-ink: #ffffff; --dot: 12px; }
.sev-grave   { --sev: var(--sev-grave);   --sev-ink: #240c02; --dot: 11px; }
.sev-media   { --sev: var(--sev-media);   --sev-ink: #241a02; --dot: 10px; }
.sev-menor   { --sev: var(--sev-menor);   --sev-ink: #03241a; --dot: 9px;  }
.sev-leve    { --sev: var(--sev-leve);    --sev-ink: #14141b; --dot: 8px;  }
.sev-sin     { --sev: var(--sev-sin);     --sev-ink: #d8d8e2; --dot: 8px;  }

/* ---------- el punto ---------- */
.marker-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(var(--marker-scale, 1));
    transition: transform .2s ease-out;
}

.marker {
    width: var(--dot, 13px);
    height: var(--dot, 13px);
    border-radius: 50%;
    background-color: var(--sev, var(--sev-extrema));
    /* El aro interior negro es lo que sostiene los tonos claros (el
       ambar y el verde) cuando el punto cae sobre un trozo de mapa
       claro: sin el se disuelven. */
    /* El halo se recorto junto con el punto (era 9px/18px). Un punto de
       12px con un resplandor de 18px ocupa 30, asi que el mapa se veia
       amontonado aunque los puntos fuesen chicos: el halo mandaba mas
       que el diametro. */
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, .45),
        0 0 6px color-mix(in srgb, var(--sev, var(--sev-extrema)) 75%, transparent),
        0 0 12px color-mix(in srgb, var(--sev, var(--sev-extrema)) 32%, transparent);
    cursor: pointer;
    transition: transform .15s ease;
}

.marker:hover {
    transform: scale(1.35);
}

/* El mismo problema que resuelve `tapTolerance()` en js/markers.js, pero
   para los mapas que siguen pintando los puntos con nodos del DOM
   (/chat): con el dedo no se acierta a un circulo de 8px. Aqui el area
   sensible se agranda con un pseudoelemento transparente -no pinta nada
   y no mueve nada de sitio-, porque en un marcador del DOM lo que recibe
   el toque es la caja, no el dibujo. El punto NO crece: agrandarlo
   volveria a amontonar el mapa, y en un movil es donde peor se lleva.

   Va solo en punteros gruesos, y el radio es el mismo 9px de alli. */
@media (pointer: coarse) {
    .marker {
        position: relative;
    }

    .marker::after {
        content: '';
        position: absolute;
        inset: -9px;
        border-radius: 50%;
    }
}

/* Sin puntuacion no se pinta un color: se pinta el HUECO. Un aro vacio
   se lee como "de esto no sabemos", que es justo lo que pasa, y no se
   confunde con el gris de "falta leve", que si es una puntuacion.
   El :not() deja fuera al marcador de usuario, que es un aro azul con
   una foto dentro: vaciarlo le quitaria el halo azul y ademas el hueco
   no se veria, porque lo tapa el avatar. */
.marker.sev-sin:not(.marker-user) {
    background-color: transparent;
    box-shadow:
        inset 0 0 0 1.5px var(--sev-sin),
        0 0 5px rgba(0, 0, 0, .55);
}

.marker-verified {
    width: calc(var(--dot, 10px) + 5px);
    height: calc(var(--dot, 10px) + 5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El aro oscuro no es decoracion: sin el, el nucleo dorado sobre un
   punto de violencia media (#f5c451, casi el mismo tono) desaparecia, y
   la senal de "lo publicaron varias fuentes" se perdia justo en el
   tramo con mas sucesos. Con el se lee sobre los seis colores. */
.verified-core {
    width: 5px;
    height: 5px;
    background-color: #ffcc00;
    border-radius: 50%;
    box-shadow:
        0 0 0 1.25px rgba(0, 0, 0, .6),
        0 0 5px #ffcc00;
}

.marker-unknown-nat {
    border: 1.5px solid rgba(0, 0, 0, .85);
}

/* Suceso aportado por una persona, no sacado de un medio. Va con su
   avatar dentro de un aro AZUL fijo: el azul no esta en la escala de
   gravedad, asi que se lee al instante como "esto lo ha traido
   alguien". La gravedad no se pierde: queda en el anillo fino de
   color que separa el avatar del aro azul.
   Va DESPUES de .marker-unknown-nat: ese tambien define `border` y, a
   igualdad de peso, mandaria el ultimo. */
/* 26px y no 32: era el punto mas grande del mapa con diferencia, y al
   encoger los demas se quedaba como una pegatina encima de todo. Por
   debajo de 26 la cara del avatar ya no se distingue. */
.marker-user {
    width: 26px;
    height: 26px;
    padding: 2.5px;
    /* El relleno es el color de gravedad y solo asoma por el `padding`:
       de ahi el anillo fino. */
    background: var(--sev, var(--sev-extrema));
    border: 2px solid #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, .85), 0 0 16px rgba(56, 189, 248, .45);
    /* El brillo por antiguedad lo pone .marker y aqui NO se toca: con
       una formula propia, a igual antiguedad estos se veian mas vivos
       que los demas y la leyenda dejaba de ser cierta. */
}

.marker-user img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #14141a;
}

/* Un marcador de usuario ya usa el borde como aro azul, asi que el
   negro de "origen desconocido" no se veria: se distingue con el trazo
   discontinuo, y asi no se pierde ninguna de las dos senales. */
.marker-user.marker-unknown-nat {
    border-style: dashed;
    border-color: #38bdf8;
}

/* ---------- agrupaciones ---------- */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background-color: transparent !important;
}

.marker-cluster div {
    background: transparent !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    font: inherit !important;
}

/* Un grupo toma el color del suceso MAS GRAVE que contiene. Promediar
   seria mentir por omision: doce hurtos y un asesinato no son trece
   sucesos de gravedad media, y lo que hay que ver desde lejos es que
   ahi dentro hay un asesinato.

   El DIAMETRO lo pone el recuento, y llega en --cd desde clusterIcon()
   (js/markers.js): el CSS no puede calcularlo. Aqui `.cluster-wrapper`
   es el aro de fuera y ocupa la caja entera del icono, que se pide 10px
   mas ancha que --cd; asi el aro es una aureola de 5px constante
   alrededor de un disco que si crece. */
.cluster-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sev, var(--sev-extrema)) 26%, transparent);
    border: 1px solid color-mix(in srgb, var(--sev, var(--sev-extrema)) 50%, transparent);
    backdrop-filter: blur(2px);
    transform: scale(var(--marker-scale, 1));
    transition: transform .2s ease-out;
    transform-origin: center;
    position: relative;
}

.cluster-wrapper>div {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: var(--cd, 26px) !important;
    height: var(--cd, 26px) !important;
    border-radius: 50% !important;
    background: var(--sev, var(--sev-extrema)) !important;
    color: var(--sev-ink, #fff) !important;
    /* La cifra crece con el disco, con un suelo para que un grupo de
       dos siga siendo legible. Sin el suelo, el disco de 20px daria una
       cifra de 7px. */
    font-size: max(9.5px, calc(var(--cd, 26px) * .36)) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, .3),
        0 2px 10px rgba(0, 0, 0, .5);
}

.cluster-wrapper>div>span {
    line-height: 1;
}

.cluster-unknown-nat .cluster-wrapper {
    border: 1.5px dashed rgba(255, 255, 255, .35);
}

.cluster-verified .cluster-wrapper {
    box-shadow: 0 0 0 1.5px rgba(255, 204, 0, .75);
}

/* ---------- gravedad maxima: onda expansiva ---------- */
/* Son dos animaciones y no una porque animar `box-shadow` PISA la que
   trae la regla: al punto hay que devolverle en cada fotograma su aro
   interior negro, o mientras late se queda sin el y los rojos sobre
   mapa claro se desdibujan. El halo del grupo es una capa vacia detras
   del circulo y ahi ese aro sobraria. */
.marker-severe {
    animation: pulse-severe 1.8s ease-out infinite;
}

.cluster-severe .cluster-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    animation: pulse-severe-ring 1.8s ease-out infinite;
}

@keyframes pulse-severe {
    0% {
        box-shadow:
            inset 0 0 0 1px rgba(0, 0, 0, .45),
            0 0 0 0 color-mix(in srgb, var(--sev-extrema) 70%, transparent);
    }

    70% {
        box-shadow:
            inset 0 0 0 1px rgba(0, 0, 0, .45),
            0 0 0 12px rgba(255, 45, 58, 0);
    }

    100% {
        box-shadow:
            inset 0 0 0 1px rgba(0, 0, 0, .45),
            0 0 0 0 rgba(255, 45, 58, 0);
    }
}

@keyframes pulse-severe-ring {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--sev-extrema) 70%, transparent);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(255, 45, 58, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 45, 58, 0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .marker-severe,
    .cluster-severe .cluster-wrapper::after {
        animation: none;
    }

    /* Sin animacion, la gravedad maxima se marca con un aro fijo: la
       senal no puede depender de que el movimiento este permitido. */
    .marker.marker-severe {
        box-shadow:
            inset 0 0 0 1px rgba(0, 0, 0, .45),
            0 0 0 2.5px color-mix(in srgb, var(--sev-extrema) 40%, transparent),
            0 0 10px var(--sev-extrema);
    }

    .cluster-severe .cluster-wrapper::after {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--sev-extrema) 35%, transparent);
    }
}

/* ============================================================
   LEYENDA
   ------------------------------------------------------------
   El contenido vive en templates/_map_legend.html y lo incluyen las
   dos paginas. El panel que lo envuelve -donde se coloca, como se
   abre- lo pone cada pagina en su CSS, porque en la portada cuelga de
   la barra superior y en /chat sale del boton de abajo a la izquierda.
   ============================================================ */
.legend-lead {
    margin: 0 0 12px;
    font-size: 11.5px;
    line-height: 1.5;
    color: #9a9aa6;
}

.legend-lead b {
    color: #dcdce4;
    font-weight: 700;
}

/* Franja continua, como la del baremo del portal: dice de un vistazo
   que los seis puntos de abajo son tramos de una misma escala y no
   seis categorias sueltas. */
.legend-ramp {
    display: flex;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 10px;
}

.legend-ramp i {
    flex: 1;
    background: var(--sev);
}

.legend-scale {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 4px;
}

.legend-sev {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 12px;
    color: #9a9aa6;
    transition: background .14s ease, color .14s ease;
}

.legend-sev:hover {
    background: color-mix(in srgb, var(--sev) 13%, transparent);
    color: #e8e8f0;
}

.legend-dot {
    flex-shrink: 0;
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    background: var(--sev);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), 0 0 6px color-mix(in srgb, var(--sev) 70%, transparent);
}

.legend-dot.is-hollow {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--sev);
}

/* Los puntos miden lo que miden en el mapa (8..12px), asi que la
   columna se reserva el mayor para que los rangos queden alineados.
   Ese 12px es el --dot de .sev-extrema: si alli cambia, aqui tambien. */
.legend-sev .legend-dot {
    margin: 0 calc((12px - var(--dot)) / 2);
}

/* Ancho fijo: los seis rangos quedan en columna y el ojo baja recto
   por 10 / 8—9 / 5—7 / 2—4 / 1 / —, que es la escala. */
.legend-sev b {
    flex-shrink: 0;
    width: 30px;
    text-align: right;
    font-size: 11.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    color: var(--sev);
}

.legend-sev span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legend-sub {
    margin: 0 0 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6e6e7a;
}

/* ---------- muestras de la mitad de abajo ---------- */
/* La columna de muestras la dimensiona cada pagina (.legend-swatch en
   index.css y en chat.css), y las dos se quedaban cortas para el aro
   del avatar. `min-width` no choca con el `width` que declaran ellas:
   se impone sin tener que pisarlas. */
/* La reserva la marca la muestra mas ancha, que es la del grupo: 32px,
   el disco de un grupo de tres mas su aureola. */
.legend-swatch {
    min-width: 32px;
    align-items: center;
}

.legend-swatch>* {
    flex-shrink: 0;
}

/* Son marcadores de verdad en miniatura, no dibujos aparte: heredan
   --sev de la clase de tramo que lleven, asi que si cambia la escala
   cambian solas. */
.lg-mini {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sev, var(--sev-extrema));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), 0 0 6px color-mix(in srgb, var(--sev, var(--sev-extrema)) 70%, transparent);
}

.lg-mini.is-core {
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lg-mini.is-core::after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffcc00;
    box-shadow: 0 0 0 1.25px rgba(0, 0, 0, .6), 0 0 5px #ffcc00;
}

.lg-mini.is-unknown {
    border: 1.5px solid rgba(0, 0, 0, .85);
}

.lg-mini.is-pulse {
    animation: pulse-severe 1.8s ease-out infinite;
}

.lg-user {
    width: 26px;
    height: 26px;
    padding: 2.5px;
    border-radius: 50%;
    background: var(--sev, var(--sev-extrema));
    border: 2px solid #38bdf8;
    box-shadow: 0 0 7px rgba(56, 189, 248, .8);
    display: flex;
}

.lg-user::after {
    content: '';
    flex: 1;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b6472, #2c3340);
}

/* Un grupo de tres a su tamano real: clusterSize(3) en js/markers.js
   da un disco de 22px, y el aro le anyade 5px por lado. */
.lg-cluster {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--sev) 26%, transparent);
    border: 1px solid color-mix(in srgb, var(--sev) 50%, transparent);
}

.lg-cluster::after {
    content: attr(data-n);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sev);
    color: var(--sev-ink);
    font-size: 9.5px;
    font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
    .lg-mini.is-pulse {
        animation: none;
        box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--sev-extrema) 40%, transparent), 0 0 10px var(--sev-extrema);
    }
}

/* Enlace al baremo del portal, al pie de la leyenda. Vive aqui y no en
   la hoja de cada pagina porque /chat no lo tenia y salia sin estilo:
   la leyenda es una sola, sus piezas van todas en el mismo sitio. */
.legend-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 9px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
    color: #e8e8f0;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease;
}

.legend-link:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .18);
}

/* ============================================================
   LA TARJETA DEL SUCESO  (el popup de Leaflet)
   ------------------------------------------------------------
   La misma en la portada y en /chat: la arma popupHtml() en
   js/markers.js. En /chat estaba la ficha COMPLETA -nacionalidades,
   edades, fuentes, fiabilidad, historial de moderacion- que la portada
   ya habia dejado atras, y en un visor tan estrecho tapaba el mapa
   entero. Lo que no cabe aqui esta en /incident/<id>.

   El marco -el cristal, el borde, cuanto padding lleva- lo sigue
   poniendo cada pagina en su CSS, porque el popup de /chat se abre
   dentro de un panel y el de la portada sobre la pantalla entera.
   ============================================================ */
/* ------------------------------------------------------------------
   EL MAPA ES OSCURO, Y ESO SE HACE AQUI.
   ------------------------------------------------------------------
   Las teselas de OpenStreetMap son claras; el sitio las invierte para
   que el mapa case con el resto y, sobre todo, PARA QUE SE LEA LO QUE
   VA ENCIMA. El popup es un cristal oscuro al 64%: sobre un mapa
   oscuro se lee, sobre uno claro no.

   Esta regla vivia COPIADA en index.css y en chat.css, las dos unicas
   paginas que tenian mapa cuando se escribio. Desde que hay mapa
   tambien en /embed, /consulta, el generador y las fichas de entidad,
   esas cuatro se quedaron con las teselas claras y el popup ilegible
   encima. Se vio en el embebido: el mapa salia verde y blanco.

   Va con la hoja de los marcadores porque es lo mismo que ellos: la
   pinta del mapa del sitio, no de una pagina concreta. Quien cargue
   markers.css tiene el mapa del sitio entero, no la mitad.
   ------------------------------------------------------------------ */
.leaflet-container {
    background-color: #0c1220;
}

.leaflet-tile {
    filter: invert(100%) hue-rotate(180deg) brightness(93%) contrast(88%) saturate(85%);
}

/* ---------- el marco: el cristal sobre el que va la tarjeta ----------
   Tambien compartido. Estaba escrito dos veces y con diferencias que no
   respondian a nada: la portada ponia los valores a pelo (blur(22px),
   13px de radio) y /chat los mismos valores pero por token, y la X de
   cerrar era de 17px alli y de 19px aqui. Ahora manda el token. */
.leaflet-popup-content-wrapper {
    /* Mas transparente que el resto del cristal del sitio (--glass-3 es
       casi opaco): la ficha se abre ENCIMA del mapa, y lo que hay
       debajo es justo lo que se ha venido a mirar. El desenfoque sube
       con la transparencia: es lo que impide que las etiquetas del mapa
       se lean a traves del texto de la tarjeta. */
    background: rgba(12, 12, 16, .64);
    backdrop-filter: var(--blur, saturate(150%) blur(22px));
    -webkit-backdrop-filter: var(--blur, saturate(150%) blur(22px));
    border: 1px solid var(--line, rgba(255, 255, 255, .10));
    border-top: 2px solid var(--accent, #ff3b46);
    color: var(--txt, #ecedf0);
    border-radius: var(--r, 14px);
    box-shadow: var(--shadow, 0 18px 44px -18px rgba(0, 0, 0, .95), 0 2px 8px rgba(0, 0, 0, .4));
    padding: 0;
    overflow: hidden;
    position: relative;
}

.leaflet-popup-content {
    margin: 0;
    /* El pie va a sangre y necesita saber cuanto padding se come: ver
       .pp-go, mas abajo. */
    --pp-pad-x: 15px;
    --pp-pad-b: 12px;
    padding: 13px var(--pp-pad-x) var(--pp-pad-b);
    font-family: inherit;
    /* Sin scroll y sin recorte: lo que no cabe aqui es que no tiene que
       estar aqui, esta en /incident/<id>. El ancho lo decide Leaflet
       con minWidth/maxWidth: ver popupOptions() en js/markers.js. */
    max-width: calc(100vw - 46px);
}

.leaflet-popup-tip {
    background: rgba(12, 12, 16, .64);
    border: none;
    box-shadow: none;
}

/* El hueco que le deja .pp-top con su padding-right esta medido para
   este tamano: si crece la X, crece aquel. */
.leaflet-container a.leaflet-popup-close-button {
    color: var(--dimmer, #6d6d78);
    font-size: 17px;
    font-weight: 300;
    padding: 6px 9px 0 0;
    transition: color .2s ease;
}

.leaflet-container a.leaflet-popup-close-button:hover {
    color: var(--accent, #ff3b46);
}

.pp-top {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Sitio para la X de cerrar, que Leaflet pone en la esquina. */
    padding-right: 20px;
    margin-bottom: 7px;
}

.pp-type {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #ffb4b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-flag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.pp-flag svg {
    width: 9px;
    height: 9px;
}

.pp-flag.is-ok {
    background: rgba(74, 222, 128, .16);
    border: 1px solid rgba(74, 222, 128, .34);
    color: #86efac;
}

.pp-flag.is-warm {
    background: rgba(245, 165, 36, .16);
    border: 1px solid rgba(245, 165, 36, .34);
    color: #fcd34d;
}

.pp-headline {
    margin: 0 0 9px;
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.42;
    color: #f1f2f5;
    /* Tres lineas: lo justo para saber de que va sin tapar el mapa. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pp-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 11px;
    font-size: 11px;
    color: var(--dimmer, #6d6d78);
}

.pp-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.pp-meta svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

.pp-meta b {
    font-weight: 600;
    color: var(--dim, #9b9ba6);
}

/* Ojo con tocar el `display` de aqui: `.pp-meta span` es inline-flex y
   es lo unico que mantiene el pin a la altura de su texto. Poner
   `block` para que corte por ellipsis rompe esa alineacion, porque el
   SVG vuelve a ser un elemento en linea y el nombre del sitio cae a la
   linea de abajo. El recorte va en el hijo, que es quien desborda. */
.pp-where {
    max-width: 100%;
}

.pp-where-txt {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- el origen del atacante ----------
   Ver attackerOrigin() en js/markers.js: sube a la tarjeta porque es el
   dato por el que existe el sitio. Edades y victimas se quedan en
   /incident/<id>. */
.pp-origin {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 8px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--line-soft, rgba(255, 255, 255, .055));
}

.pp-origin-label {
    /* En su propia linea: el valor y la atribucion van debajo, en una
       fila, y asi la atribucion puede irse al margen derecho. */
    flex: 0 0 100%;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dimmer, #6d6d78);
}

.pp-origin-val {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 650;
    color: #f1f2f5;
}

/* "Desconocido" no se pinta como un origen mas: va apagado, que es lo
   que es -una falta de dato, la misma que marca el borde negro del
   punto en el mapa y la que cuenta el Indice de Opacidad-. */
.pp-origin.is-unknown .pp-origin-val {
    font-weight: 600;
    color: var(--dimmer, #6d6d78);
}

.pp-attr {
    margin-left: auto;
    flex-shrink: 0;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.pp-attr.is-media {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #9a9aa6;
}

/* Azul, el mismo del aro de los sucesos que trae una persona: en este
   mapa el azul ya significa "esto lo ha puesto alguien, no un medio". */
.pp-attr.is-community {
    background: rgba(56, 189, 248, .12);
    border: 1px solid rgba(56, 189, 248, .3);
    color: #7dd3fc;
}

.pp-go {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* A sangre: se come el padding del contenedor, que lo declara
       cada pagina en .leaflet-popup-content. Con el numero escrito a
       mano aqui, el pie se salia en cuanto una de las dos cambiaba su
       padding -que es justo lo que pasaba en /chat, con 20px. */
    margin: 11px calc(-1 * var(--pp-pad-x, 15px)) calc(-1 * var(--pp-pad-b, 12px));
    padding: 10px var(--pp-pad-x, 15px);
    border-top: 1px solid var(--line-soft, rgba(255, 255, 255, .055));
    background: rgba(255, 59, 70, .09);
    color: #ffb4b8;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
}

.pp-go:hover {
    background: rgba(255, 59, 70, .2);
    color: #fff;
}

.pp-go svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}