.bus-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 5px;
}

.seat {
    width: 44px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px 0;
    /*background: #b52787 !important;*/
    background: #e0e0e0;
    transform: scaleX(-1);
    cursor: pointer;
    border-radius: 16px;
}

.seat svg {
    color: black !important;
}

.seat.disabled {
    background: rgba(213,39,135,.5) !important;
}

.seat.disabled:not(.blocked) {
    background: #b52787 !important;
}

.disabledSeatMap {
    background: rgba(213,39,135,.5) !important;
}
.freeSeatMap {
    background: #e0e0e0;
}
.selectedSeatMap {
    background: #b52787 !important;
}

.blocked {
    cursor: not-allowed;
}

.seat[data-tooltip] {
    position: relative;
}

.seat[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    background-color: #000000bf;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    top: -35px;
    left: 11px;
    width: max-content;
    transform: scaleX(-1);
    font-size: 15px;
}

.aisle {
    width: 30px;
    height: 44px;
    background-color: transparent;
}

.bus-exit {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 20px;
}

.seat span, .driver-seat span, .exit span {
    font-size: 14px;
}

@media (max-width: 768px) {
    .bus-container {
        flex-direction: column; /* Cambia la dirección a vertical */
        overflow-y: auto; /* Permite desplazamiento vertical si es necesario */
        max-height: 170vh; /* Evita que el bus sea más alto que la pantalla */
        transform: scaleX(-1); /* Invierte el bus */
    }

    .seat {
        margin: 0 5px; /* Reduce el margen horizontal */
    }

    .seat[data-tooltip]:hover::after {
        transform: scaleX(1); /* Invierte el tooltip */
    }

    .seat svg {
        transform: scaleX(-1); /* Invierte el ícono del asiento */
    }

    .aisle {
        width: 50px;
    }

    .row {
        flex-direction: row; /* Mantiene las filas en horizontal */
        justify-content: center;
    }
}