/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6; 
} */
/* Inter: Limpia y moderna (Comentada para usar Poppins) 
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
*/

/* Poppins: Geométrica y minimalista (Activa) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;800;900&display=swap');

body {
    /* Utilizando Poppins como fuente principal */
    font-family: 'Poppins', sans-serif;
    background-color: #f3f4f6; /* Gris claro de fondo */
}
.input-box input[type="text"] {
    background-color: transparent !important; /* Asegura fondo transparente para el input dentro del box */
    box-shadow: none !important; /* Remueve sombras extra si las tiene */
}

/* Estilos para el contenedor de resultados que debe flotar por encima (z-index) */
.modal-dropdown {
    position: absolute;
    top: calc(100% + 10px); /* Separación del input */
    left: 0;
    z-index: 50; /* Alto z-index para estar por encima de todo */
    width: 100%;
    min-width: 300px;
    max-width: 400px;
}

/* Estilos específicos para Flatpickr en modo rango */
.flatpickr-calendar.rangeMode .flatpickr-day.selected {
    border-radius: 0;
    background: #4f46e5;
    color: white;
}

.flatpickr-calendar.rangeMode .flatpickr-day.startRange {
    border-radius: 50px 0 0 50px;
}

.flatpickr-calendar.rangeMode .flatpickr-day.endRange {
    border-radius: 0 50px 50px 0;
}

/* Estilo para ajustar la posición del botón de swap en desktop para que se vea más pulcro */
@media (min-width: 1024px) {
    #swap-button-container {
        /* Centra y posiciona el botón sobre el borde entre los dos inputs de ubicación */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 30;
        padding: 0; /* Remueve el padding vertical añadido para móvil */
    }
}



.filter-header {
    border-bottom: 2px solid #e5e7eb;
}
/* Estilos para asegurar que el input type="date" sea legible y funcional */
input[type="date"]::placeholder,
input[type="date"] {
    color: #1f2937;
}

/* Estilos para el contenedor de resultados que debe flotar por encima (z-index) */
.modal-dropdown {
    position: absolute;
    top: calc(100% + 10px); /* Separación del input */
    left: 0;
    z-index: 50; /* Alto z-index para estar por encima de todo */
    width: 100%;
    min-width: 300px;
    max-width: 400px;
}


/* taquilla*/
.seat {
    width: 36px; /* Ligeramente más pequeño para un grid más ajustado */
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 6px; /* Radio más ajustado */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Sombra sutil */
}

/* Estilo para asiento ocupado (no interactivo) */
.seat.occupied {
    background-color: #e5e7eb; /* Gris claro */
    color: #9ca3af;
    cursor: not-allowed;
    pointer-events: none; /* Deshabilita clics */
    box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* Estilo para asiento disponible */
.seat.available {
    background-color: white;
    color: #4f46e5; /* Texto índigo en disponible */
    border: 1px solid #e0e7ff; /* Borde índigo muy suave */
}
.seat.available:hover {
    background-color: #f3f4ff; /* Índigo muy claro al pasar el mouse */
    transform: scale(1.05);
    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.1);
}

/* Estilo para asiento seleccionado */
.seat.selected {
    background-color: #4f46e5; /* Índigo primario */
    color: white;
    border-color: #4f46e5;
    box-shadow: 0 8px 15px -3px rgba(79, 70, 229, 0.5), 0 4px 6px -2px rgba(79, 70, 229, 0.3);
    transform: scale(1.05);
    position: relative;
}

/* Indicador de selección (el check) - CORREGIDO */
.seat.selected::after {
    /* Usar el código Unicode \2713 (?) y forzar una fuente simple */
    content: '\2713'; 
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 10px;
    line-height: 1;
    background: #10b981; /* Verde esmeralda para check */
    color: white;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    font-weight: 700;
    font-family: Arial, sans-serif; /* Asegura que el símbolo se renderice correctamente */
}

/* Estilo para el botón CTA habilitado */
#cta-button-desktop:not(:disabled) {
    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.5), 0 4px 6px -2px rgba(79, 70, 229, 0.2);
    transform: translateY(-2px);
}

/* Ocultar el pie de página en desktop */
@media (min-width: 1024px) {
    #mobile-cta-footer {
        display: none !important;
    }
}


.seat {
    width: 35px; 
    height: 35px;
    border-radius: 9999px; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px; 
    font-weight: 600;
    transition: all 0.2s;
    user-select: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Estado DISPONIBLE */
.seat.available {
    background-color: white; 
    border: 2px solid theme('colors.primary.100'); 
    color: theme('colors.primary.700');
    cursor: pointer;
}
.seat.available:hover {
    background-color: theme('colors.primary.100');
    border-color: theme('colors.primary.600');
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Estado OCUPADO */
.seat.occupied {
    background-color: theme('colors.gray.300');
    color: theme('colors.gray.600');
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
    border: 2px solid theme('colors.gray.400');
}

/* Estado SELECCIONADO */
.seat.selected {
    background-color: theme('colors.primary.600');
    color: white;
    box-shadow: 0 0 0 4px theme('colors.primary.100'), 0 0 0 5px theme('colors.primary.600'); 
    transform: scale(1.1);
    border: 2px solid white;
}
/* Color del badge de confirmación */
.selected-badge-color {
    background-color: theme('colors.accent.500');
    border-color: white;
}

/* Asegura que el scroll vertical esté solo en el mapa y no en toda la sección */
#seat-map-scroll-container {
    max-height: 70vh; /* Altura máxima para asegurar que el resumen sea visible en móvil */
    overflow-y: auto;
    /* Estilo para el scrollbar (solo funciona en WebKit, pero mejora la UX) */
    padding-right: 15px; /* Espacio para el scrollbar */
}
#seat-map-scroll-container::-webkit-scrollbar {
    width: 6px;
}
#seat-map-scroll-container::-webkit-scrollbar-thumb {
    background-color: theme('colors.primary.200');
    border-radius: 3px;
}
#seat-map-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
    animation: fadeIn 0.3s ease-out forwards;
}


/* 1. Asegurar que el contenedor principal no corte nada */
#search-container {
    overflow: visible !important;
    display: flex;
    /* Eliminamos items-start para evitar problemas de altura en capas */
}

/* 2. El dropdown DEBE tener z-index superior a todo lo demás en la página */
.modal-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 9999 !important; /* Valor muy alto para romper cualquier contexto */
    width: 100%;
    min-width: 300px;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* 3. Evitar que las columnas de Origen/Destino creen capas que se pisen */
.input-group {
    position: relative;
    /* No pongas z-index aquí a menos que sea necesario al abrir */
}

/* 4. Hack de corrección: Cuando un modal esté abierto, su padre debe subir de nivel */
.input-group:focus-within, 
.input-group:hover {
    z-index: 70; 
}


#parada-subida-results div:first-child,
#parada-bajada-results div:first-child {
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 4px;
    background-color: #fafafa;
}

@media (max-width: 1023px) {
    #sidebar-rastreo {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 50;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 25px rgba(0,0,0,0.1);
        transform: translateY(0); /* Estado expandido por defecto */
    }

    /* Clase para cuando está minimizado */
    #sidebar-rastreo.is-minimized {
        transform: translateY(calc(100% - 60px)); /* Deja solo el título visible o el botón */
    }
}

/* Manejo de iconos de tema */
.map-dark-mode #icon-tema-claro { display: none; }
.map-dark-mode #icon-tema-oscuro { display: block; }
.map-dark-mode #btn-tema-mapa { background-color: #1f2937; border-color: #374151; }

/* Animación sutil para los botones */
#map-1 button {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}