/*
 * Mapa interactivo de cobertura.
 *
 * Los pines se posicionan por porcentaje sobre la imagen del mapa; la posición
 * la calcula el servidor a partir de la latitud y longitud reales de cada
 * ciudad, así que el marcador cae donde está la ciudad.
 */

/* El mapa manda: ocupa todo el ancho de la banda y el pie va debajo. */
.mapa {
    display: grid;
    gap: clamp(1.25rem, 1rem + 1vw, 2rem);
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
}

/* ── Lienzo ──────────────────────────────────────────────────────────────── */
.mapa__lienzo {
    position: relative;
    width: 100%;
    max-width: 17.5rem;
    margin-inline: auto;
    transition: max-width .3s ease, padding .3s ease;
}

/* Con sitio para los rótulos, el lienzo se ensancha y la silueta se queda en
   el centro: los márgenes que quedan a los lados son donde se apoyan. */
/* Margen en los cuatro lados: los rótulos rodean la silueta, no solo la
   flanquean. El horizontal da para "Barrancabermeja" sin cortarla; el
   vertical, para las filas de arriba y abajo. */
.mapa__lienzo--con-rotulos {
    max-width: 100%;
    padding-inline: clamp(6.5rem, 9vw, 10rem);
    padding-block: 2.25rem;
    min-height: 34rem;
    display: grid;
    align-items: center;
}

/* `width: 100%` explícito: dentro no queda ningún elemento en flujo —el mapa
   es una capa absoluta—, así que sin él la caja medía cero y los rótulos no
   tenían dónde apoyarse. */
.mapa__mapa { position: relative; width: 100%; margin-inline: auto; max-width: 17.5rem; }
/* Sin panel al lado, la silueta se lleva todo el espacio que sobra. */
.mapa__lienzo--con-rotulos .mapa__mapa { max-width: clamp(20rem, 34vw, 32rem); }

/* La silueta ya no es una imagen: la dibujan los propios departamentos. La
   caja conserva la proporción del mapa para que los pines caigan en su sitio. */
.mapa__mapa { aspect-ratio: 340 / 500; }

/* ── Territorios de atención ─────────────────────────────────────────────── */
/* El país repartido entre las sedes: cada polígono agrupa los puntos que
   tienen más cerca ese departamento. El reparto y la intensidad salen de la
   base de datos; el recorte contra el contorno lo hace el `clipPath`. */
.mapa__capa {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Solo los departamentos reciben el cursor; el resto de la capa lo deja
       pasar hacia los pines. */
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 16px 34px rgba(0, 0, 0, .35));
}

/* Cada departamento con su forma real. Los que tienen red se tiñen dentro de
   la familia dorada —del ámbar apagado al dorado pleno, según cuántas sedes
   hay—; los que no, quedan en un teal apagado que los deja presentes pero
   claramente fuera de la red. Ir del teal al dorado pasaba por todos los
   verdes oliva de en medio y el mapa se veía sucio. */
.mapa__depto {
    fill: #0E4E56;
    fill-opacity: .85;
    stroke: rgba(255, 255, 255, .45);
    stroke-width: .18;
    stroke-linejoin: round;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: mapaDeptoEntra .6s cubic-bezier(.22, .9, .28, 1) forwards;
    animation-delay: var(--retraso, 0s);
    transition: fill .25s ease, stroke .25s ease, stroke-width .25s ease;
    pointer-events: auto;
    cursor: default;
}

.mapa__depto--cubierto {
    fill: color-mix(in srgb, var(--web-accent) calc(var(--intensidad, .5) * 100%), #6B4A12);
    fill-opacity: 1;
    stroke: rgba(255, 255, 255, .8);
    stroke-width: .28;
}

/* El de la sede propia se distingue por su tono, no por su intensidad. */
.mapa__depto--sede { fill: #FFE9A8; }

/* El departamento bajo el cursor se enciende y sube su borde. */
.mapa__depto:hover,
.mapa__depto.is-activo {
    fill: #fff;
    fill-opacity: 1;
    stroke: #fff;
    stroke-width: .5;
}

@keyframes mapaDeptoEntra {
    from { opacity: 0; transform: scale(.82); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Rótulos con línea guía ──────────────────────────────────────────────── */
.mapa__lineas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}
/* Las líneas van sobre un degradado movido: a un píxel y medio traslúcido
   desaparecían. Con sombra propia se leen sobre cualquier tono de la banda. */
.mapa__lineas polyline {
    fill: none;
    stroke: rgba(255, 255, 255, .78);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px rgba(10, 40, 50, .45));
    transition: stroke .2s ease, stroke-width .2s ease;
}
.mapa__lineas polyline.is-activo { stroke: var(--web-accent); stroke-width: 2.4; }

/* Cada línea se dibuja desde el rótulo hacia su ciudad. El largo exacto lo
   pone el JavaScript, que es quien sabe cuánto mide cada trazo. */
.mapa__lineas polyline {
    stroke-dashoffset: var(--largo, 0);
    animation: mapaTraza .5s ease-out forwards;
    animation-delay: var(--retraso, 0s);
}
@keyframes mapaTraza {
    to { stroke-dashoffset: 0; }
}

.mapa__linea-punto {
    opacity: 0;
    animation: mapaPunto .3s ease-out forwards;
    animation-delay: calc(var(--retraso, 0s) + .4s);
}
@keyframes mapaPunto {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Punto donde la línea toca la ciudad: cierra el trazo contra el pin. */
.mapa__linea-punto {
    fill: rgba(255, 255, 255, .85);
    transition: fill .2s ease;
}
.mapa__linea-punto.is-activo { fill: var(--web-accent); }

.mapa__rotulos { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.mapa__rotulo {
    position: absolute;
    display: none;
    max-width: clamp(6.5rem, 9vw, 9.5rem);
    padding: .2rem .55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: auto;
    cursor: default;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.mapa__lienzo--con-rotulos .mapa__rotulo {
    display: block;
    opacity: 0;
    /* Entra deslizándose desde el mapa hacia su sitio en el margen. */
    animation: mapaRotuloEntra .45s cubic-bezier(.22, .9, .28, 1) forwards;
    animation-delay: var(--retraso, 0s);
}
@keyframes mapaRotuloEntra {
    from { opacity: 0; transform: translateX(var(--desde, 0)) scale(.9); }
    to   { opacity: 1; transform: none; }
}
.mapa__rotulo--sede {
    background: var(--web-accent);
    border-color: var(--web-accent);
    color: #11324B;
    font-weight: 800;
}
.mapa__rotulo.is-activo {
    background: #fff;
    border-color: #fff;
    color: var(--web-primary-dark);
}

/* ── Pines ───────────────────────────────────────────────────────────────── */
.mapa__pin {
    position: absolute;
    width: 14px;
    height: 14px;
    padding: 0;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    background: var(--web-naranja, #FFA800);
    cursor: pointer;
    z-index: 4;
    transition: transform .2s ease, background-color .2s ease;
}
.mapa__pin:hover,
.mapa__pin:focus-visible,
.mapa__pin.is-activo { transform: translate(-50%, -50%) scale(1.55); z-index: 5; }

.mapa__pin--sede {
    width: 20px;
    height: 20px;
    background: #fff;
    border-color: var(--web-naranja, #FFA800);
    border-width: 4px;
    z-index: 5;
}

/* Onda que sale del pin, escalonada para que el mapa "respire". */
.mapa__pin-eco {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    animation: mapaEco 3s ease-out infinite;
    animation-delay: var(--retraso, 0s);
    pointer-events: none;
}
.mapa__pin--sede .mapa__pin-eco { background: rgba(255, 168, 0, .55); animation-duration: 2.2s; }

@keyframes mapaEco {
    0%   { transform: scale(1); opacity: .7; }
    70%  { transform: scale(3.4); opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
}

/* ── Ciudades en pantalla estrecha ───────────────────────────────────────── */
/* Ahí no caben los rótulos con línea, así que los nombres se listan sueltos:
   sin esto el visitante de móvil solo vería puntos sin nombre. */
.mapa__chips { display: none; }

@media (max-width: 47.99rem) {
    .mapa__chips {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .4rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .mapa__chip {
        padding: .22rem .6rem;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, .22);
        background: rgba(255, 255, 255, .12);
        color: #fff;
        font-size: var(--fs-xs);
        font-weight: 600;
    }
    .mapa__chip--sede {
        background: var(--web-accent);
        border-color: var(--web-accent);
        color: #11324B;
        font-weight: 800;
    }
}

/* ── Pie: leyenda y cifras ───────────────────────────────────────────────── */
.mapa__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.mapa__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
}
.mapa__leyenda li { display: flex; align-items: center; gap: .45rem; }

.mapa__marca {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .9);
    background: var(--web-accent);
}
.mapa__marca--sede { background: #fff; border-color: var(--web-accent); border-width: 3px; }
/* Muestra de la escala: del territorio con menos red al que tiene más. */
.mapa__marca--zona {
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 3px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--web-accent) 30%, #6B4A12),
        var(--web-accent));
    width: 34px;
    height: 12px;
}
.mapa__marca--sin {
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 3px;
    background: #0E4E56;
    width: 18px;
    height: 12px;
}

.mapa__cifras {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.75rem;
    margin: 0;
}
.mapa__cifras > div { display: flex; align-items: baseline; gap: .4rem; }
.mapa__cifras dt { font-size: var(--fs-xs); font-weight: 600; opacity: .85; order: 2; }
.mapa__cifras dd {
    margin: 0;
    order: 1;
    font-family: var(--web-fuente-titulo);
    font-size: var(--fs-lg);
    font-weight: 800;
    color: var(--web-accent);
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .mapa__pin-eco { animation: none !important; opacity: 0; }
    /* Sin animación el mapa tiene que verse igual de completo, solo que ya
       terminado: los territorios teñidos y el borde entero. */
    .mapa__depto { animation: none !important; opacity: 1; }
    .mapa__rotulo { animation: none !important; opacity: 1; transform: none; }
    .mapa__lineas polyline { animation: none !important; stroke-dashoffset: 0 !important; }
    .mapa__lienzo { transition: none; }
}