/* Contenedor del formulario de horario */
.curso-detail form {
    display: inline-block;
    width: 100%;
    margin-top: 5px;
}

/* Estilo para el select */
.curso-detail select {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    color: #475569; /* Gris azulado moderno */
    background-color: #f1f5f9; /* Fondo suave */
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    
    /* Eliminar la flecha por defecto en algunos navegadores */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Agregar una flecha personalizada minimalista */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}

/* Efecto al pasar el mouse o enfocar */
.curso-detail select:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
}

.curso-detail select:focus {
    border-color: #3b82f6; /* Color azul de énfasis */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Estilo para las opciones (limitado por el SO, pero ayuda) */
.curso-detail select option {
    background-color: #ffffff;
    color: #1e293b;
    padding: 10px;
}

/* Contenedor del detalle donde está el select */
.curso-detail span {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Estilo para el formulario y select */
.form-horario {
    margin-top: 5px;
    width: 100%;
}

.select-horario {
    width: 100%;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background-color: #ffffff;
    color: #334155;
    font-size: 0.85rem;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}

/* Resaltado cuando el select es obligatorio y está vacío */
.select-horario:invalid {
    border-left: 4px solid #f87171; /* Una pequeña marca roja */
}

/* Animación de error si el usuario no elige */
.shake-error {
    border-color: #ef4444 !important;
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}