/* Variables de diseño */


.viajes-section {
    margin-bottom: 30px;
}

.section-header h3 {
    font-size: 1.25rem;
    margin: 0 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-color);
}

.editar-viaje:disabled {
    background-color: #f0f0f0 ;
}

.editar-viaje-unico:disabled {
    background-color: #f0f0f0 ;
}

/* Grilla del formulario */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    align-items: flex-end;
    
}

.field-group {
    display: flex;
    flex-direction: column;
}

.field-group label {
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.field-group input, 
.field-group select {
    padding: 8px 10px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

/* Botones */


.form-footer {
    margin-top: 20px;
    display: flex;
    
}

.ui-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 40px 0;
}

.contenedor-tabla-resultados {
    max-height: 450px;    /* Ajusta esta altura a tu gusto (ej. 10 viajes) */
    overflow-y: auto;      /* Activa el scroll vertical solo si es necesario */
    overflow-x: auto;      /* Activa scroll horizontal por si la tabla es muy ancha */
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px;
    background: #fff;
}

/* --- Reducción de Texto y Espacios en la Tabla --- */
.contenedor-tabla-resultados table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px !important; /* Letra más pequeña para toda la tabla */
}

/* Encabezados (Sticky y más pequeños) */
.contenedor-tabla-resultados thead th {
    position: sticky;
    top: 0;
    background-color: #f1f1f1 !important;
    color: #333;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px !important; /* Títulos mini para ahorrar espacio */
    padding: 6px 10px !important; /* Espaciado muy reducido */
    border-bottom: 2px solid #ccc;
    z-index: 10;
}

/* Celdas de Datos */
.contenedor-tabla-resultados tbody td {
    padding: 5px 10px !important; /* Altura de fila muy compacta */
    border-bottom: 1px solid #eee;
    color: #444;
    line-height: 1.2;
    white-space: nowrap; /* Evita que las celdas se ensanchen hacia abajo */
}

/* Efecto al pasar el mouse (Cebra) */
.contenedor-tabla-resultados tbody tr:nth-child(even) {
    background-color: #fafafa;
}

.contenedor-tabla-resultados tbody tr:hover {
    background-color: #f0f7ff; /* Color sutil al pasar el mouse */
    cursor: pointer;
}

/* Ajuste específico para la columna de Estado */
.contenedor-tabla-resultados td:last-child {
    font-weight: 600;
    text-align: center;
}

/* Opcional: Estilizar la barra de scroll para que se vea más moderna */
.contenedor-tabla-resultados::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.contenedor-tabla-resultados::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.contenedor-tabla-resultados::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3;
}

/* Mantener el encabezado de la tabla fijo mientras haces scroll */
.contenedor-tabla-resultados table thead {
    position: sticky;
    top: 0;
    background-color: #f8f9fa; /* Color de fondo del encabezado */
    z-index: 10;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}

.flex-end {
    justify-content: flex-end;
}

/* En tu archivo CSS */
.fila-viaje:hover {
    background-color: #f1f1f1; /* Efecto al pasar el mouse */
}

.fila-seleccionada {
    background-color: #d1ecf1 !important; /* Azul bajito de Bauza */
    border-left: 5px solid #007bff; /* Una marca lateral azul */
}


/* Responsivo */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}