#bloque_presencia{
    width: 100%;
    height: auto;
   display: flex;
   align-items: center;
   flex-direction: column;
   background-color: #ffffff;
   overflow: visible;
   position: relative;
}

/* Estilos para los botones de scroll */
.scroll-btn {
    position: absolute;
    top: 80%;
    transform: translateY(-50%);
    background-color: rgba(190, 17, 86, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.scroll-btn:hover {
    background-color: rgba(190, 17, 86, 1);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.scroll-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.scroll-left {
    left: 10px;
}

.scroll-right {
    right: 10px;
}

/* Ocultar botones en dispositivos grandes */
@media screen and (min-width: 801px) {
    .scroll-btn {
        display: none;
    }
}

#bloque_presencia h1, #bloque_presencia h2, #bloque_presencia h3{
    height: auto;
    display: grid;
    place-items: center;
    margin: 20px 0;
}

#mapa_honduras {
    display: grid;
    place-items: center;
    height: auto;
    position: relative;
    width: 100%;
    padding: 20px 0;
}

#mapa_honduras svg {
    position: relative;
    top: -10%;
    height: 100%;
    max-width: 90vw;
}

#mapa_honduras svg path {
    stroke: #ffffff;
    stroke-width: 1px;
    transition: transform 0.3s ease;
    transform-origin: center;
    z-index: 7;
}


#mapa_honduras svg path:not(#HN-CR,#HN-LE,#HN-CP,#HN-FM){
    fill: #be1156;
}

#HN-CR,
#HN-LE,
#HN-CP,
#HN-FM{
    fill: #ffc217;
}

#tooltip {
    position: absolute;
    background-color: #161616;
    width: 180px;
    height: 30px;
    text-align: left;
    border-radius: 20px;
    opacity: 0;
    display: grid;
    place-items: center;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.tarjetasPresencia{
    position: absolute;
    max-width: 30%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: white;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border-radius: 8px;
    gap: 15px;
}

.tarjetasPresencia h2, .tarjetasPresencia h3{
    display: grid;
    place-items: center;
    margin: 0;
    text-align: center;
}

.tarjetasPresencia ul{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px;
}

.tarjetasPresencia ul li{
    width: 100%;
    padding: 5px 0;
}

#tarjetaCR{
   top: 15%;
    right: 8%;
}

#tarjetaLE{
    bottom: 15%;
    left: 8%;
   
}
#tarjetaCP{
    top: 15%;
    left: 8%;
}
#tarjetaFM{
    bottom: 15%;
    right: 8%;
}


@media screen and (max-width: 800px) {
    #mapa_honduras{
        height: auto;
    }
    #bloque_presencia{
        display: flex;
        flex-direction: column;
    }


    #bloque_tarjetas_presencia{
        width: 100%;
        height: auto;
        overflow-x: scroll;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        /* Estilos para la barra de desplazamiento */
        scrollbar-width: auto; /* Firefox */
        scrollbar-color: #be1156 #f1f1f1; /* Firefox */
        padding: 20px 0;
        -ms-overflow-style: auto; /* IE y Edge */
    }

    /* Estilos para WebKit browsers */
    #bloque_tarjetas_presencia::-webkit-scrollbar {
        height: 12px;
        display: block;
    }

    #bloque_tarjetas_presencia::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    #bloque_tarjetas_presencia::-webkit-scrollbar-thumb {
        background: #be1156;
        border-radius: 10px;
    }

    #bloque_tarjetas_presencia>div{
        width: 400%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        position: relative;
        justify-content: space-around;
        gap: 20px;
        padding-right: 2%;
        padding-left: 2%;
    }


#tarjetaCR{
   top: 0%;
    right: 0%;
}

#tarjetaLE{
       bottom: 0%;
    left: 0%;
   
}
#tarjetaCP{
   
    top: 0%;
    left: 0%;
}
#tarjetaFM{
    bottom: 0%;
    right: 0%;
}

    .tarjetasPresencia{
     position: relative;
     width: 20%;
     height: auto;
     text-align: center;
     align-self: stretch;
     justify-content: center;
     scroll-snap-align: center;
     padding: 15px;
    }

    .tarjetasPresencia h2{

        width: 100%;
    }

    .tarjetasPresencia ul{
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .tarjetasPresencia ul li{
        padding: 3px 0;
    }
}