/* Asegúrate de que este CSS se cargue *después* de tu CSS principal (ej. Bootstrap) */

/* Estilos para el grupo de selección (departamento y municipio) */
.select-group {
    margin-bottom: 20px; /* Espaciado similar a tus otros form-group */
    text-align: left;
}

/* Ocultar inicialmente el grupo de municipios */
#municipio-group {
    display: none;
}

/* Estilos para las etiquetas de los selectores */
.select-group label {
    display: block; /* Asegura que la etiqueta esté en su propia línea */
    margin-bottom: 8px; /* Espacio entre la etiqueta y el select */
    font-weight: bold; /* Hacer la etiqueta un poco más destacada */
    color: #555; /* Color similar a otros textos */
}

/* Estilos para los selectores mismos (aplicando los estilos de form-control y añadiendo el ícono personalizado) */
/* La clase .form-control ya le dará muchos estilos. Solo ajustamos el icono y disabled */
.form-control#departamento,
.form-control#municipio {
    /* El ancho ya debería ser 100% por form-control */
    /* Padding, border, border-radius, font-size ya de form-control */
    background-color: #f9f9f9; /* Un color de fondo ligeramente diferente si lo deseas */
    cursor: pointer;
    appearance: none; /* Eliminar flecha por defecto del navegador */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007bff%22%20d%3D%22M287%2C197.387L146.205%2C56.604L5.415%2C197.387z%22%2F%3E%3C%2Fsvg%3E'); /* Flecha personalizada azul */
    background-repeat: no-repeat;
    background-position: right 10px top 50%; /* Posición de la flecha */
    background-size: 12px; /* Tamaño de la flecha */
}

    /* Estilo para los selectores deshabilitados */
    .form-control#municipio:disabled {
        background-color: #e9e9e9;
        cursor: not-allowed;
        color: #888;
    }

    /* Si necesitas ajustar el focus, puedes usar algo como esto, aunque Bootstrap ya tiene sus propios estilos de focus */
    .form-control#departamento:focus,
    .form-control#municipio:focus {
        border-color: #007bff; /* Color de borde al enfocar */
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Sombra de enfoque de Bootstrap */
    }