/* =================================================
   CLICKAR LAS PARADAS
   ================================================= */

/* Contenedor exterior */

.mapa-abaceria-scroll {
    width: 100%;
}

/* regla general base */
.mapa-abaceria {
    position: relative;
    width: 100%;
}

.mapa-abaceria-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Información y avisos del mapa */
.aviso-mapa-mobil {
    display: none;
}

.info-parada-mobil {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 25px;
    transform: translateX(-50%);

    width: 90%;
    max-width: 500px;
        
    background: #E87524;
    color: #ffffff;
        
    padding: 15px 20px;
    border-radius: 10px;

    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
        
    z-index: 9999;
                
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.info-parada-mobil.activo {
    display: block;
}

.nom-parada-mobil {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
}

.categoria-parada-mobil {
    font-size: 15px;
    font-weight: 600;
    margin-top: 4px;
}

.accio-parada-mobil {
    font-size: 14px;
    font-weight: 400;
    margin-top: 7px;
}

.tancar-parada-mobil {
    display: block;
    font-size: 13px;
    font-weight: 400;
    margin-top: 5px;
}

.icono-tancar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;
    margin-right: 4px;

    background: #333333;
    color: #ffffff;

    border-radius: 50%;

    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

/* Todas las zonas clicables */
.zona-parada {
    position: absolute;
    display: block;
    z-index: 20;
    cursor: pointer;
	background: transparent;
}

.zona-parada:hover {
    background: rgba(40, 40, 40, 0.35);
    outline: 2px solid #ffffff;
    outline-offset: -2px;
}

.zona-parada.categoria-destacada {
    background: rgba(20, 20, 20, 0.95);
    outline: 3px solid #ffffff;
    outline-offset: -3px;
}

.zona-parada.categoria-destacada::after {
    content: attr(data-numero);

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    color: #ffffff;
    font-size: 14px;
    font-weight: 700;

    z-index: 30;
    pointer-events: none;
}

/* ADAPTACIÓN MÓVIL */

@media (max-width: 768px) {

    .mapa-abaceria-scroll {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .mapa-abaceria {
        width: 1200px;
        max-width: none;
    }

    .mapa-abaceria-img {
        width: 100%;
        max-width: none;
        height: auto;
    }
	/* Barra de desplazamiento horizontal */
    
	.mapa-abaceria-scroll::-webkit-scrollbar {
        height: 12px;
    }

    .mapa-abaceria-scroll::-webkit-scrollbar-track {
        background: #e0e0e0;
        border-radius: 6px;
    }

    .mapa-abaceria-scroll::-webkit-scrollbar-thumb {
        background: #555555;
        border-radius: 6px;
    }

    .mapa-abaceria-scroll::-webkit-scrollbar-thumb:hover {
        background: #333333;
    }
	
    .aviso-mapa-mobil {
        display: block;
        text-align: center;
        font-weight: 600;
        margin-bottom: 10px;
    }

    /* Número de parada más pequeño en móvil */
    .zona-parada.categoria-destacada::after {
        font-size: 10px;
    }

}

/* MÓVIL Y TABLET: cuadro informativo debajo del mapa */
@media (max-width: 1024px) {

    .info-parada-mobil {
        position: static;

        left: auto;
        top: auto;
        bottom: auto;
        transform: none;

        width: 90%;
        max-width: 500px;
        box-sizing: border-box;

        margin: 15px auto 0 auto;
    }

    .zona-parada.categoria-destacada::after {
        font-size: 8px;
    }

    .parada-ext1.categoria-destacada::after,
    .parada-ext2.categoria-destacada::after,
    .parada-ext4.categoria-destacada::after,
    .parada-ext5.categoria-destacada::after,
    .parada-ext6.categoria-destacada::after,
    .parada-ext10.categoria-destacada::after,
	.parada-ext13.categoria-destacada::after {
        font-size: 8px;
    }
}

/* MÓVIL EN HORIZONTAL:
   intentar mostrar el mapa completo */
@media (max-width: 1024px) and (orientation: landscape) {

    .mapa-abaceria-scroll {
        overflow-x: visible;
    }

    .mapa-abaceria {
        width: 100%;
        max-width: 100%;
    }

    .mapa-abaceria-img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .aviso-mapa-mobil {
        display: none;
    }
}

@media (min-width: 1025px) {

    .info-parada-mobil.info-escritorio {
        width: auto;
        min-width: 220px;
        max-width: 320px;
        padding: 12px 18px;
        pointer-events: none;
    }

}

/* Ajuste número PARADA 14 */
.parada-14.categoria-destacada::after {
    left: 77%;
    top: 52%;
}

/* Ajuste número PARADA 24 */
.parada-24.categoria-destacada::after {
    left: 27%;
    top: 50%;
}

/* Ajuste número PARADA 33 */
.parada-33.categoria-destacada::after {
    left: 51%;
    top: 62%;
}

/* Ajuste número PARADA 34 */
.parada-34.categoria-destacada::after {
    left: 76%;
    top: 52%;
}

/* Ajuste número PARADA 37 */
.parada-37.categoria-destacada::after {
    left: 50%;
    top: 26%;
}

/* Ajuste número PARADA 39 */
.parada-39.categoria-destacada::after {
    left: 27%;
    top: 50%;
}

/* Ajuste número PARADA 41 */
.parada-41.categoria-destacada::after {
    left: 50%;
    top: 25%;
}

/* Ajuste número PARADA 43 */
.parada-43.categoria-destacada::after {
    left: 48%;
    top: 25%;
}

/* EMPEZAMOS CON LAS PARADAS */
/* PARADA 1 */
.parada-1 {
    left: 48.8%;
    top: 6%;
    width: 7.1%;
    height: 6.5%;
}

/* PARADA 2 */
.parada-2 {
    left: 61.75%;
    top: 29.4%;
    width: 2.4%;
    height: 8.8%;
}

/* PARADA 3 */
.parada-3 {
    left: 43.3%;
    top: 6%;
    width: 5%;
    height: 6.5%;
}

/* PARADA 4 */
.parada-4 {
    left: 68.7%;
    top: 29.4%;
    width: 2.5%;
    height: 12.2%;
}

/* PARADA 5 */
.parada-5 {
    left: 54.7%;
    top: 29.4%;
    width: 5.3%;
    height: 5.5%;
}

/* PARADA 6 */
.parada-6 {
    left: 43.3%;
    top: 29.5%;
    width: 2.4%;
    height: 9.4%;
}

/* PARADA 9 
.parada-9 {
    left: 59.5%;
    top: 6%;
    width: 4.6%;
    height: 6.5%;
}
*/

/* PARADA 11 */
.parada-11 {
    left: 54.7%;
    top: 36%;
    width: 2.4%;
    height: 8%;
}

/* PARADA 13 */
.parada-13 {
    left: 61.75%;
    top: 39%;
    width: 2.4%;
    height: 11.6%;
}

/* PARADA 14 */
.parada-14 {
    left: 16%;
    top: 29%;
    width: 4.9%;
    height: 22%;

    clip-path: polygon(
        52% 0,
        100% 0,
        100% 100%,
        0 100%,
        0 65%,
        52% 65%
    );
}

/* PARADA 15 */
.parada-15 {
    left: 71.5%;
    top: 29.5%;
    width: 2.5%;
    height: 20.9%;
}

/* PARADA 16 */
.parada-16 {
    left: 29.6%;
    top: 29.5%;
    width: 2.3%;
    height: 13%;
}

/* PARADA 17 */
.parada-17 {
    left: 39%;
    top: 6%;
    width: 4%;
    height: 6.5%;
}

/* PARADA 18 */
.parada-18 {
    left: 18.9%;
    top: 68.8%;
    width: 3.6%;
    height: 6.6%;
}

/* PARADA 19 */
.parada-19 {
    left: 11.1%;
    top: 68.8%;
    width: 5.4%;
    height: 6.5%;
}

/* PARADA 20 */
.parada-20 {
    left: 74.2%;
    top: 68.8%;
    width: 5.5%;
    height: 6.5%;
}

/* PARADA 21 */
.parada-21 {
    left: 22.9%;
    top: 68.8%;
    width: 6%;
    height: 6.5%;
}

/* PARADA 22 */
.parada-22 {
    left: 35.3%;
    top: 6%;
    width: 3.3%;
    height: 6.5%;
}

/* PARADA 23 */
.parada-23 {
    left: 22.5%;
    top: 29.5%;
    width: 2.4%;
    height: 12.8%;
}

/* PARADA 24 */
.parada-24 {
    left: 75.7%;
    top: 29.5%;
    width: 4.3%;
    height: 21.1%;

    clip-path: polygon(
        0 0,
        52% 0,
        52% 70.5%,
        100% 70.5%,
        100% 100%,
        0 100%
    );
}

/* PARADA 25 */
.parada-25 {
    left: 29.3%;
    top: 68.8%;
    width: 6.3%;
    height: 6.5%;
}

/* PARADA 26 */
.parada-26 {
    left: 54.7%;
    top: 45%;
    width: 5.3%;
    height: 5.5%;
}

/* PARADA 28 */
.parada-28 {
    left: 80.3%;
    top: 44.4%;
    width: 2.55%;
    height: 6.1%;
}

/* PARADA 30 */
.parada-30 {
    left: 68.7%;
    top: 42.8%;
    width: 2.5%;
    height: 7.7%;
}

/* PARADA 32 */
.parada-32 {
    left: 39%;
    top: 29.5%;
    width: 2.4%;
    height: 21%;
}

/* PARADA 33 */
.parada-33 {
    left: 43.2%;
    top: 36%;
    width: 5.3%;
    height: 15%;

    clip-path: polygon(
        53% 0,
        100% 0,
        100% 100%,
        0 100%,
        0 25%,
        53% 25%
    );
}

/* PARADA 34 */
.parada-34 {
    left: 29.5%;
    top: 29.1%;
    width: 5%;
    height: 22%;

    clip-path: polygon(
        52% 0,
        100% 0,
        100% 100%,
        0 100%,
        0 65%,
        52% 65%
    );
}

/* PARADA 36 */
.parada-36 {
    left: 22.5%;
    top: 6%;
    width: 9.1%;
    height: 6.5%;
}

/* PARADA 37 */
.parada-37 {
    left: 80%;
    top: 68.8%;
    width: 10.2%;
    height: 14.1%;
	
	clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        75% 100%,
        75% 46%,
        0 46%
    );
}

/* PARADA 38 */
.parada-38 {
    left: 64.48%;
    top: 29.4%;
    width: 2.5%;
    height: 21.1%;
}

/* PARADA 39 */
.parada-39 {
    left: 11%;
    top: 29%;
    width: 4.7%;
    height: 22%;

    clip-path: polygon(
        0 0,
        55% 0,
        55% 65%,
        100% 65%,
        100% 100%,
        0 100%
    );
}

/* PARADA 40 */
.parada-40 {
    left: 89.9%;
    top: 29.5%;
    width: 2.4%;
    height: 20.5%;
}

/* PARADA 41 */
.parada-41 {
    left: 35.9%;
    top: 68.8%;
    width: 12.4%;
    height: 15.2%;
	
	clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        83% 100%,
        83% 42%,
        0 42%
    );
}

/* PARADA 42 */
.parada-42 {
    left: 36.15%;
    top: 29.5%;
    width: 2.5%;
    height: 21%;
}

/* PARADA 43 */
.parada-43 {
    left: 54.7%;
    top: 68.5%;
    width: 7.2%;
    height: 15.4%;
	
	clip-path: polygon(
        0 0,
        100% 0,
        100% 43%,
        33% 43%,
        33% 100%,
        0 100%
    );
}

/* PARADA EXT 1 */
.parada-ext1 {
    left: 21.25%;
    top: 89.3%;
    width: 4.4%;
    height: 6.8%;
}

/* PARADA EXT 2 */
.parada-ext2 {
    left: 16.4%;
    top: 89.3%;
    width: 4.45%;
    height: 6.8%;
}

/* PARADA EXT 4 */
.parada-ext4 {
    left: 31.3%;
    top: 89.5%;
    width: 4.4%;
    height: 6.6%;
}

/* PARADA EXT 5 */
.parada-ext5 {
    left: 36.1%;
    top: 89.5%;
    width: 4.4%;
    height: 6.6%;
}

/* PARADA EXT 6 */
.parada-ext6 {
    left: 26.15%;
    top: 89.5%;
    width: 4.4%;
    height: 6.6%;
}

/* PARADA EXT 10 */
.parada-ext10 {
    left: 82%;
    top: 89.5%;
    width: 4.3%;
    height: 6.6%;
}

/* PARADA EXT 13 */
.parada-ext13 {
    left: 77%;
    top: 89.5%;
    width: 4.3%;
    height: 6.6%;
}