bug(form-field): red border-left leaking over .mdc-notched-outline__notch

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

The mat input form label sometimes has a border on the left when the form field is in a error state and is empty so the label is not floating and the hover state is active.


The border color from:
```
.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
border-color: var(--mdc-outlined-text-field-error-hover-outline-color);
}
```
With a specificity of `Specificity: (0,7,0)` is taking priority over:
```
.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
border-left: 1px solid transparent;
}
```
With it's specificity of `Specificity: (0,7,0)`.

The note on the `.mdc-notched-outline__notch` class suggests this is sufficient.
https://github.com/crisbeto/material2/blob/e8b0f416cc714c1922118d7f40b706f37793fb01/src/material/form-field/_mdc-text-field-structure-overrides.scss#L162
```
// Note: class name is repeated to achieve sufficient specificity over the various MDC states.
```

But it may not be. If I add one more `.mat-mdc-form-field`, then the rule's specificity `Specificity: (0,8,0)` is sufficient to bring the style rule above the other, which solves my issue

### Reproduction

I'm having trouble recreating the issue in a stack blitz. I think it is happening due to the order of module loading or the order the scss gets compiled to css, and thus the order that the styles get placed in the DOM. When I try to set it up in a stack blitz, the order of the two rules is reversed. I'm not sure what we could be doing to make the `form-field.mjs` load before the `_form-field-theme.scss`/`_mdc-text-field-structure-overrides.scss`

### Expected Behavior

no border left on .mdc-notched-outline__notch

### Actual Behavior

Some blead through of error-border on .mdc-notched-outline__notch

### Environment

- Angular: 16.2.10
- CDK/Material: 16.2.10 (still an issue after upgrading to 17)
- Browser(s): Chrome 120.0.6099.200 (not an issue on firefox)
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

Comienza comparando la especificidad y el orden de emisión de las reglas en _mdc-text-field-structure-overrides.scss y _form-field-theme.scss, especialmente para .mdc-notched-outline__notch. Comprueba el contexto de carga de form-field.mjs en Chrome y confirma que el estado hover de error ya no dibuja un borde izquierdo a través de la muesca.

Escrito por el modelo de indexación a partir del texto del issue.