/* ============================================================
   MODULO DE MONITOREO VOLCANICO
   Compartamos Banco - Centro de Control
   ============================================================ */


/* ============================================================
   ICONO DEL VOLCAN
   ============================================================ */

.icono-volcan {

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

}


/* ============================================================
   CIRCULO / PULSO DEL VOLCAN
   ============================================================ */

.volcan-pulso {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    background:
        rgba(255, 70, 0, 0.95);

    border:
        3px solid white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    box-shadow:
        0 0 0 0
        rgba(255, 70, 0, 0.7);

    animation:
        pulsoVolcan 2s infinite;

    cursor: pointer;

}


/* ============================================================
   ANIMACION DEL VOLCAN
   ============================================================ */

@keyframes pulsoVolcan {

    0% {

        box-shadow:
            0 0 0 0
            rgba(255, 70, 0, 0.7);

    }


    70% {

        box-shadow:
            0 0 0 18px
            rgba(255, 70, 0, 0);

    }


    100% {

        box-shadow:
            0 0 0 0
            rgba(255, 70, 0, 0);

    }

}


/* ============================================================
   POPUP PRINCIPAL DEL VOLCAN
   ============================================================ */

.popup-volcan {

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    line-height:
        1.4;

    color:
        #111;

    width:
        100%;

    min-width:
        280px;

    box-sizing:
        border-box;

}


/* ============================================================
   TITULO DEL POPUP
   ============================================================ */

.volcan-titulo {

    font-size:
        17px;

    font-weight:
        bold;

    margin-bottom:
        8px;

    color:
        #111;

}


/* ============================================================
   ESTADO DE ALERTA
   ============================================================ */

.volcan-alerta {

    font-weight:
        bold;

    padding:
        6px;

    margin-bottom:
        8px;

    border-radius:
        5px;

}


/* ============================================================
   ALERTA NARANJA
   ============================================================ */

.alerta-naranja {

    background:
        #ff9800;

    color:
        white;

}


/* ============================================================
   ALERTA ROJA
   ============================================================ */

.alerta-roja {

    background:
        #d50000;

    color:
        white;

}


/* ============================================================
   ALERTA AMARILLA
   ============================================================ */

.alerta-amarilla {

    background:
        #ffd600;

    color:
        #111;

}


/* ============================================================
   ALERTA VERDE
   ============================================================ */

.alerta-verde {

    background:
        #00a000;

    color:
        white;

}


/* ============================================================
   RADIO DE INFLUENCIA VOLCANICA
   ============================================================ */

.volcan-radio {

    pointer-events:
        none;

}


/* ============================================================
   LINEAS ENTRE VOLCAN Y AGENCIAS
   ============================================================ */

.linea-volcan-agencia {

    pointer-events:
        none;

}


/* ============================================================
   ETIQUETA DE DISTANCIA
   ============================================================ */

.etiqueta-distancia-volcan {

    background:
        rgba(255, 255, 255, 0.95);

    border:
        2px solid #ff5722;

    border-radius:
        5px;

    color:
        #111;

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    font-weight:
        bold;

    padding:
        3px 6px;

    white-space:
        nowrap;

    box-shadow:
        0 1px 4px
        rgba(0, 0, 0, 0.35);

}


/* ============================================================
   QUITAR FLECHA DEL TOOLTIP DE DISTANCIA
   ============================================================ */

.etiqueta-distancia-volcan::before {

    display:
        none;

}


/* ============================================================
   MARCADOR DE AGENCIA AFECTADA
   ============================================================ */

.agencia-volcan-afectada {

    background:
        rgba(255, 87, 34, 0.95);

    border:
        3px solid white;

    border-radius:
        50%;

    width:
        14px;

    height:
        14px;

    box-shadow:
        0 0 8px
        rgba(255, 87, 34, 0.9);

}


/* ============================================================
   RANKING DE AGENCIAS CERCANAS
   IMPORTANTE:
   Ahora forma parte del contenido del popup.
   NO usar position absolute.
   NO usar z-index.
   NO usar top/right.
   ============================================================ */

.ranking-volcan {

    position:
        relative;

    width:
        100%;

    max-width:
        100%;

    max-height:
        220px;

    overflow-y:
        auto;

    box-sizing:
        border-box;

    margin-top:
        12px;

    padding:
        0;

    background:
        #ffffff;

    border:
        1px solid #ff5722;

    border-radius:
        6px;

    box-shadow:
        0 1px 5px
        rgba(0, 0, 0, 0.20);

    font-family:
        Arial,
        sans-serif;

}


/* ============================================================
   CABECERA DEL RANKING
   ============================================================ */

.ranking-volcan-titulo {

    background:
        #ff5722;

    color:
        white;

    font-size:
        13px;

    font-weight:
        bold;

    padding:
        7px 9px;

    border-radius:
        5px 5px 0 0;

}


/* ============================================================
   SUBTITULO
   ============================================================ */

.ranking-volcan-subtitulo {

    font-size:
        11px;

    color:
        #555;

    padding:
        6px 9px;

    border-bottom:
        1px solid #ddd;

}


/* ============================================================
   ITEM DEL RANKING
   ============================================================ */

.ranking-volcan-item {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        6px 8px;

    border-bottom:
        1px solid #eee;

}


/* ============================================================
   ULTIMO ITEM
   ============================================================ */

.ranking-volcan-item:last-child {

    border-bottom:
        none;

}


/* ============================================================
   NUMERO DEL RANKING
   ============================================================ */

.ranking-volcan-numero {

    width:
        22px;

    height:
        22px;

    min-width:
        22px;

    border-radius:
        50%;

    background:
        #ff5722;

    color:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        11px;

    font-weight:
        bold;

}


/* ============================================================
   INFORMACION DE AGENCIA
   ============================================================ */

.ranking-volcan-info {

    flex:
        1;

    min-width:
        0;

}


/* ============================================================
   NOMBRE DE AGENCIA
   ============================================================ */

.ranking-volcan-agencia {

    font-size:
        12px;

    font-weight:
        bold;

    color:
        #222;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


/* ============================================================
   DISTANCIA DE AGENCIA
   ============================================================ */

.ranking-volcan-distancia {

    font-size:
        11px;

    color:
        #666;

    margin-top:
        2px;

}


/* ============================================================
   DISTANCIA DESTACADA
   ============================================================ */

.ranking-volcan-km {

    font-size:
        12px;

    font-weight:
        bold;

    color:
        #d84315;

    white-space:
        nowrap;

}


/* ============================================================
   ESTADO VACIO DEL RANKING
   ============================================================ */

.ranking-volcan-vacio {

    padding:
        10px;

    text-align:
        center;

    font-size:
        12px;

    color:
        #666;

}


/* ============================================================
   SCROLL DEL RANKING
   ============================================================ */

.ranking-volcan::-webkit-scrollbar {

    width:
        5px;

}


.ranking-volcan::-webkit-scrollbar-track {

    background:
        #f1f1f1;

}


.ranking-volcan::-webkit-scrollbar-thumb {

    background:
        #ff5722;

    border-radius:
        5px;

}


/* ============================================================
   AJUSTE DEL CONTENEDOR INTERNO DE LEAFLET
   PARA QUE EL RANKING QUEDE DENTRO DEL POPUP
   ============================================================ */

.leaflet-popup-content {

    margin:
        13px 15px;

    width:
        auto !important;

    max-width:
        360px;

}


.leaflet-popup-content-wrapper {

    overflow:
        hidden;

}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (
    max-width: 700px
) {

    .popup-volcan {

        min-width:
            240px;

    }


    .ranking-volcan {

        max-height:
            180px;

    }


    .leaflet-popup-content {

        max-width:
            280px;

    }

}