/* ============================= */
/* ESTILOS DEL MODAL DE TIPO DE TRANSPORTE */
/* ============================= */
#tipo-transporte-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#fondo-tipo-transporte {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

/* Limitar la altura del contenedor de líneas y habilitar el scroll */
#contenido-tipo-transporte {
    position: relative;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 8px;
    width: 95%;
    max-width: 900px;
    z-index: 1001;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column; /* Cambiado a columna para asegurar que el contenedor de líneas esté arriba */
    gap: 0px;
    max-height: 450px; /* Limita la altura máxima */
    overflow: hidden; /* Evita el desplazamiento por defecto */
}


/* ============================= */
/* LISTADO DE LÍNEAS: ÍCONOS CON ORIGEN Y DESTINO */
/* ============================= */
/* Asegura que las líneas estén encima de las pestañas */
#lineas-lateral {
    flex: 1;
    border-bottom: 2px solid #ddd; /* Separador entre líneas y pestañas */
    padding-right: 10px;
    max-width: 100%;
    overflow-x: auto; /* Scroll horizontal si es necesario */
    white-space: nowrap; /* Evita que las líneas se rompan a varias líneas */
    margin-bottom: 15px; /* Separación con las pestañas */
    display: flex; /* Para alinear las líneas horizontalmente */
    gap: 10px; /* Espaciado entre las líneas */
}


.linea-item {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;

    transition: background 0.3s;
    cursor: pointer;
}


.linea-item:hover {
    background: #eaeaea;
}

.linea-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Contenedor del texto (origen y destino) junto al ícono */
.linea-texto {
    margin-left: 5px;
    display: flex;
    flex-direction: column;
    font-size: 16px;  /* Tamaño de letra ligeramente mayor */
    font-weight: bold;
    line-height: 1.1;
    color: #333;
    overflow: hidden;
}

.linea-texto .linea-origen,
.linea-texto .linea-destino {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Contenedor principal para el contenido de cada línea */
#contenido-lineas {
    flex: 3;
    padding-left: 10px;
    max-height: 70vh; /* Limita la altura del contenedor de líneas */
    overflow-y: auto; /* Permite el scroll vertical */
}

/* Cada bloque de contenido de la línea */
.linea-contenido {
    display: none;
}

.linea-contenido.active,
#lineas-lateral + #contenido-lineas .linea-contenido:first-child {
    display: block;
}

/* ============================= */
/* ESTILOS DE LAS PESTAÑAS */
/* ============================= */
.encabezado-pestanas {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .encabezado-pestanas {
        justify-content: center;
        gap: 10px;
    }
}

.pestana-label {
    display: inline-block;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    transition: color 0.3s;
    background: none;
    border: none;
}



.pestana-label.active {
    border-bottom: 2px solid #007bff;
    color: #007bff;
    font-weight: bold;  /* Hacemos el texto en negrita en la pestaña activa */
}

/* Estilo para el color del texto de la pestaña activa */
.pestana-label.active {
    color: inherit; /* Dejamos que el color de la letra cambie dinámicamente */
}

/* Evitar que el color de la pestaña activa se sobrescriba en hover */
.pestana-label.active:hover {
    color: inherit;  /* No cambia el color al pasar el ratón */
    border-bottom: 3px solid;  /* Mantiene el borde inferior */
}

/* Estilo para las pestañas cuando no están activas */
.pestana-label:hover {
    color: #555;  /* Color por defecto para las pestañas cuando están en hover */
}


.contenido-pestana {
    padding: 15px;
    border-radius: 5px;
}

/* ============================= */
/* ESTILOS DEL MODAL DE DETALLE DE LA LÍNEA */
/* ============================= */
#detalle-linea-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
}

#fondo-detalle-linea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 1099;
}

#contenido-detalle-linea {
    position: relative;
    background: rgba(255,255,255, 0.95);
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 600px;
    z-index: 1101;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

#cerrar-detalle-linea {
    margin-top: 20px;
    padding: 10px 20px;
    background: #ff5722;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s;
}

#cerrar-detalle-linea:hover {
    background: #e64a19;
}

/* Limpieza de flotados si fuera necesario */
#contenido-tipo-transporte::after {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 600px) {
    /* Ajustes para el menú lateral: mostrar solo el ícono y reducir espacios */

    .linea-item {
        padding: 5px;       /* Menos padding */
        flex-direction: column;
        align-items: center;
    }
    .linea-item img {
        width: 28px;
        height: 28px;
    }
    /* Oculta el texto (origen y destino) en el menú lateral para móviles */
    .linea-texto {
        display: none;
    }
    
    /* Ajustes para el encabezado de pestañas */
    .encabezado-pestanas {
        display: flex;
        flex-wrap: nowrap;  /* Evitamos el salto de línea */
        justify-content: space-around;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
    }
    .pestana-label {
        flex: 1;            /* Se repartirán equitativamente en el espacio */
        padding: 5px 2px;   /* Menos padding horizontal */
        font-size: 12px;    /* Fuente más pequeña */
        text-align: center;
        border: none;
        background: transparent;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Opcional: Reducir el padding general del contenido de las pestañas */
    .contenido-pestana {
        padding: 10px;
    }
}


/* Estilos para el scrollbar de las líneas */
#lineas-lateral, #contenido-lineas {
    /* Habilitar el scroll */
    overflow-y: auto;
}

/* Estilo para el scroll en el contenedor lateral y de líneas */
#lineas-lateral::-webkit-scrollbar, #contenido-lineas::-webkit-scrollbar {
    width: 8px; /* Ancho del scrollbar */
    background: rgba(0, 0, 0, 0.2); /* Fondo transparente */
    border-radius: 10px;
}

/* Estilo para el "thumb" (parte que puedes arrastrar) */
#lineas-lateral::-webkit-scrollbar-thumb, #contenido-lineas::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.5); /* Color del thumb (puede ser blanco o cualquier color semitransparente) */
    border-radius: 10px;
    backdrop-filter: blur(8px); /* Efecto blur */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Sombra sutil para dar un efecto más bonito */
}

/* Cuando el thumb está en hover (cuando pasas el mouse por encima) */
#lineas-lateral::-webkit-scrollbar-thumb:hover, #contenido-lineas::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.7); /* Cambio de color al pasar el mouse */
}

/* Estilo para la parte de fondo del scrollbar */
#lineas-lateral::-webkit-scrollbar-track, #contenido-lineas::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1); /* Fondo más oscuro del track */
    border-radius: 10px;
    backdrop-filter: blur(8px); /* Efecto de blur para el track */
}





.circulacion-tarjetas {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columnas */
    grid-template-rows: 1fr 1fr; /* 2 filas */
    grid-gap: 20px; /* Espacio entre las tarjetas */
    margin-top: 20px;
}

.tarjeta {
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9; /* Fondo ligero para las tarjetas */
    transition: transform 0.3s ease;
}

/* Efecto al pasar el ratón */
.tarjeta:hover {
    transform: scale(1.05);
}

.tarjeta h4 {
    margin: 0;
    font-size: 1.3rem; /* Aumento el tamaño del título */
    font-weight: bold;
    color: inherit; /* Asegura que tome el color del estilo en línea */
}

.tarjeta p {
    font-size: 1.25rem; /* Aumento el tamaño del texto */
    font-weight: bold; /* Hago el texto en negrita */
    margin-top: 10px;
    color: inherit; /* Asegura que tome el color del estilo en línea */
}



/* Media query para pantallas más pequeñas (móviles) */
@media screen and (max-width: 600px) {
    .tarjeta h4 {
        font-size: 1rem; /* Reducir tamaño del título en móviles */
    }

    .tarjeta p {
        font-size: 0.9rem; /* Reducir tamaño del texto en móviles */
    }


}


/* Estilo pestaña Información */

.info-tarjetas {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas de igual ancho */
    gap: 1rem; /* Espacio entre elementos */
}