/* ============================================================
   ML-SELECT — el dropdown UNICO del sistema (skin canonico .ml-s2)
   ------------------------------------------------------------
   El desplegable que dibuja el sistema operativo NO se puede estilizar:
   rompe la identidad visual y se ve como un formulario de 2005 al lado
   del resto del producto. Por eso todo <select> se sustituye por el
   widget de Select2 vestido con ESTE archivo — el mismo criterio que ya
   se aplico al calendario y al reloj nativos (`field-pickers`).

   La referencia visual es el desplegable de /admin/clinical-notes/create
   (skin historico `.ncf-s2`). Aqui se replica su APARIENCIA pero con los
   tokens GLOBALES de :root: el panel se monta en <body>, fuera de
   `.ncf-app`, asi que las `--ncf-*` no existen a esa altura del arbol.

   PIEZAS:
     1. <select> nativo          -> degradacion segura (pre-hidratacion / JS caido)
     2. .select2-selection       -> control cerrado (single + multiple)
     3. .select2-dropdown.ml-s2  -> panel flotante (unica clase de panel permitida)
     4. Movimiento
     5. Tactil / responsive
     6. Estado de error (aria-invalid / is-error / is-invalid)
     7. Flechas legacy del markup

   CASCADA: este archivo se sirve DESPUES de app.css (ver layouts/app.blade.php).
   Los bloques select2 que ya viven en app.css usan `!important`, asi que las
   reglas que compiten con ellos lo repiten — y con especificidad mayor
   (`.select2-dropdown.ml-s2` = 0,2,0) para ganar de forma determinista y no
   por accidente de orden de carga.

   NO PASA POR POSTCSS (se sirve con @cssAsset, igual que field-pickers.css):
   las media queries van CRUDAS, en px. Los alias `--bp-*` de app.css NO se
   resuelven aqui: usarlos dejaria la media query muerta en el navegador.

   MOVIMIENTO: solo `transform` + `opacity`, <= 260 ms, apagado bajo
   `prefers-reduced-motion`. El anillo de foco NO se anima como sombra:
   vive pre-pintado en un ::before y se cruza su opacidad.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   1. <select> NATIVO — degradacion segura
   ------------------------------------------------------------
   Mientras Select2 no hidrata (o si el JS no cargo) el campo tiene que
   verse IGUAL de cerrado: mismo alto, borde, radio y chevron. Asi no hay
   salto de layout al hidratar, y un fallo de JS deja un formulario
   austero-pero-usable, nunca uno roto.

   Sin `!important` a proposito: un modulo con estilos propios mas
   especificos sigue mandando. Se excluye el opt-out explicito
   (`data-mlselect="off"`), los listbox visibles (`[size]`) y el <select>
   original que Select2 ya escondio.
   ════════════════════════════════════════════════════════════ */
select:not([data-mlselect="off"]):not([size]):not(.select2-hidden-accessible) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 38px 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    /* Chevron dibujado con dos gradientes (dos triangulos que forman la "v").
       Se hace asi — y no con un SVG en data-URI — porque el data-URI obliga a
       hardcodear el color: romperia la paleta por tokens y el modo oscuro. */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 19px) center, calc(100% - 14px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: border-color 160ms ease-out;
}
select:not([data-mlselect="off"]):not([size]):not(.select2-hidden-accessible):focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18);
}
select:not([data-mlselect="off"]):not([size]):not(.select2-hidden-accessible):disabled {
    opacity: .6;
    cursor: not-allowed;
}
/* Un <select multiple> nativo es una LISTA visible, no un desplegable:
   conserva su alto natural y no lleva chevron. */
select[multiple]:not([data-mlselect="off"]):not(.select2-hidden-accessible) {
    min-height: 0;
    padding: 6px 10px;
    background-image: none;
    cursor: default;
}

/* ════════════════════════════════════════════════════════════
   2. CONTROL CERRADO (.select2-selection)
   ------------------------------------------------------------
   Sin scopear a proposito: los inits ricos que sobreviven en algunos
   modulos (el buscador de pacientes de notas clinicas) tienen que verse
   identicos a los que auto-mejora ml-select. No existe "el dropdown de
   este modulo": existe EL dropdown del sistema.
   ════════════════════════════════════════════════════════════ */
.select2-container {
    font-family: var(--font-family) !important;
    max-width: 100% !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    position: relative;
    min-height: 44px;
    height: auto !important;
    box-sizing: border-box;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    background: var(--bg-input) !important;
    color: var(--text-primary);
    box-shadow: none !important;
    transition: border-color 160ms ease-out;
}

/* Anillo de foco PRE-PINTADO: la sombra ya existe en el ::before y solo se
   cruza su opacidad. Animar `box-shadow` esta prohibido — obliga a repintar
   en cada frame y se nota como un tiron en las tablets de gama baja. */
.select2-container--default .select2-selection--single::before,
.select2-container--default .select2-selection--multiple::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease-out;
}
.select2-container--default.select2-container--focus .select2-selection--single::before,
.select2-container--default.select2-container--focus .select2-selection--multiple::before,
.select2-container--default.select2-container--open .select2-selection--single::before,
.select2-container--default.select2-container--open .select2-selection--multiple::before {
    opacity: 1;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--primary) !important;
    outline: none;
}
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
    border-color: var(--text-muted) !important;
}
/* Abierto/enfocado gana sobre hover: el borde no debe "apagarse" al pasar
   el mouse por encima del control ya activo. */
.select2-container--default.select2-container--focus .select2-selection--single:hover,
.select2-container--default.select2-container--open .select2-selection--single:hover,
.select2-container--default.select2-container--focus .select2-selection--multiple:hover,
.select2-container--default.select2-container--open .select2-selection--multiple:hover {
    border-color: var(--primary) !important;
}

/* El panel se separa 4px del control (ver bloque 3), asi que el control
   conserva su radio COMPLETO al abrir — Select2 por defecto le cuadra las
   esquinas que dan al panel, pensando en un panel pegado. */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-radius: var(--radius) !important;
}

.select2-container--default .select2-selection--single {
    display: flex !important;
    align-items: center !important;
    padding: 0 34px 0 12px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    /* Ocupa todo el ancho libre para que la etiqueta larga corte con puntos
       suspensivos en el borde del campo (y no a mitad de camino). `min-width:0`
       es lo que permite que un item flex se encoja por debajo de su contenido. */
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    line-height: 1.4 !important;
    color: var(--text-primary) !important;
    font-size: 14px !important;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--text-muted) !important;
    font-weight: 400;
}
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background: var(--border-light) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
}

/* ── Chevron propio ────────────────────────────────────────────
   Select2 dibuja un triangulo con `border-*`. Se reconvierte en chevron
   (cuadrado rotado con dos bordes) para que al abrir gire con `transform`:
   animar `border-color` / `border-width` costaria layout y esta prohibido. */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute !important;
    top: 0 !important;
    right: 12px !important;
    width: 12px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-muted);
    pointer-events: none;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    position: static !important;
    width: 7px !important;
    height: 7px !important;
    margin: 0 0 3px 0 !important;
    border-style: solid !important;
    border-width: 0 1.8px 1.8px 0 !important;
    border-color: currentColor !important;
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform 180ms cubic-bezier(.16, 1, .3, 1);
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
    color: var(--primary);
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    /* -135deg = el mismo chevron girado 180 grados: ahora apunta hacia arriba. */
    transform: rotate(-135deg);
    margin: 3px 0 0 0 !important;
}

/* ── Boton "limpiar" (allowClear) ──────────────────────────────
   Select2 4.1 lo inyecta DENTRO de `__rendered` y el vendor le da
   `float:right; height:26px`. Los 26px no caben en la caja de una linea de
   texto y `overflow:hidden` (el que hace los puntos suspensivos) lo
   recortaria por abajo — por eso el alto vuelve a `auto`. El float se
   conserva: deja la "x" pegada al borde derecho, justo antes del chevron. */
.select2-container--default .select2-selection--single .select2-selection__clear {
    height: auto !important;
    margin: 0 6px 0 4px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    transition: color 140ms ease-out;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--error) !important;
}

/* ── Multiple: chips ──────────────────────────────────────────── */
.select2-container--default .select2-selection--multiple {
    padding: 4px 8px !important;
    align-items: center !important;
    cursor: text;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: var(--text-muted) !important;
    padding-left: 4px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px;
    margin: 0 !important;
    padding: 3px 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(var(--primary-rgb), .12) !important;
    color: var(--primary-dark) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    animation: mlS2ChipIn 150ms cubic-bezier(.16, 1, .3, 1) both;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    order: -1;
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 14px;
    line-height: 1;
    opacity: .65;
    cursor: pointer;
    transition: opacity 140ms ease-out, color 140ms ease-out;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    opacity: 1;
    color: var(--error) !important;
    background: transparent !important;
}
/* El buscador inline se queda EN LA MISMA LINEA que los chips (rellena el
   sobrante) en vez de saltar a una 2a linea y estirar la caja de golpe. */
.select2-container--default .select2-selection--multiple .select2-search--inline {
    flex: 1 1 60px !important;
    min-width: 60px !important;
    display: flex !important;
    align-items: center !important;
    float: none !important;
    margin: 0 !important;
}
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: 100% !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    font-family: var(--font-family) !important;
    font-size: 14px !important;
    outline: none !important;
}
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
    color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════
   3. PANEL FLOTANTE (.select2-dropdown.ml-s2)
   ------------------------------------------------------------
   `.ml-s2` es la UNICA clase de panel permitida en el sistema. El panel se
   monta en <body> (o en el modal contenedor), fuera del scope de cualquier
   modulo: por eso todo aqui es global y tira de tokens de :root.

   z-index 100060: por encima de `.swal2-container` (100000 !important en
   app.css, el overlay mas alto del sistema) y del picker de fecha/hora
   (100010). Un desplegable abierto siempre debe quedar sobre la capa que
   lo contiene.
   ════════════════════════════════════════════════════════════ */
.select2-dropdown.ml-s2 {
    z-index: 100060;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden !important;
    font-family: var(--font-family);
}
/* Separacion del control (4px). Al haber aire, el panel se lee como una capa
   flotante y no como una prolongacion del campo. */
.select2-dropdown--below.ml-s2 { margin-top: 4px !important; }
.select2-dropdown--above.ml-s2 { margin-top: -4px !important; }

.select2-dropdown.ml-s2 .select2-results__options {
    /* ~280px de alto util, pero nunca mas de 60vh: en movil apaisado
       (932x430) un panel de 280px taparia la pantalla entera. */
    max-height: min(280px, 60vh) !important;
    padding: 5px !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
/* La lista anidada de un <optgroup> no debe tener su PROPIO scroll: el alto
   maximo lo manda la lista raiz o quedarian dos barras encajadas. */
.select2-dropdown.ml-s2 .select2-results__options--nested {
    display: block !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Opcion HOJA. Se excluye el contenedor de <optgroup>: en Select2 4.1 el
   grupo es un <li> que ENVUELVE su etiqueta + la lista anidada, y darle
   `display:flex` lo vuelve una fila y encabalga label contra opciones
   (roto en iOS Safari / WebKit — Regla 12 de CLAUDE.md). */
.select2-dropdown.ml-s2 .select2-results__option:not(.select2-results__option--group):not([role="group"]) {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    padding: 8px 11px !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-primary) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    transition: background-color 120ms ease-out, color 120ms ease-out;
}
.select2-dropdown.ml-s2 .select2-results__option--group,
.select2-dropdown.ml-s2 .select2-results__option[role="group"] {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.select2-dropdown.ml-s2 .select2-results__option--highlighted,
.select2-dropdown.ml-s2 .select2-results__option--highlighted.select2-results__option--selectable {
    background: rgba(var(--primary-rgb), .10) !important;
    color: var(--primary-dark) !important;
    font-weight: 600 !important;
}
.select2-dropdown.ml-s2 .select2-results__option--selected {
    position: relative !important;
    padding-right: 30px !important;
    background: rgba(var(--primary-rgb), .16) !important;
    color: var(--primary-dark) !important;
    font-weight: 600 !important;
}
/* Check de "seleccionado" a la derecha, dibujado con bordes: hereda el color
   del estado, asi se lee igual en normal / resaltado / seleccionado. */
.select2-dropdown.ml-s2 .select2-results__option--selected::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 5px;
    height: 9px;
    border-style: solid;
    border-width: 0 2px 2px 0;
    border-color: currentColor;
    transform: translateY(-60%) rotate(45deg);
    opacity: .9;
}
.select2-dropdown.ml-s2 .select2-results__option--disabled,
.select2-dropdown.ml-s2 .select2-results__option[aria-disabled="true"] {
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    cursor: not-allowed;
    opacity: .75;
}
.select2-dropdown.ml-s2 .select2-results__message {
    padding: 12px 11px !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Encabezado de <optgroup>: versalita discreta — jerarquia sin ruido. */
.select2-dropdown.ml-s2 .select2-results__group {
    display: block !important;
    padding: 9px 11px 3px !important;
    color: var(--text-muted) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
}

/* ── Buscador del panel ───────────────────────────────────────── */
.select2-dropdown.ml-s2 .select2-search--dropdown {
    padding: 8px !important;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-card);
}
.select2-dropdown.ml-s2 .select2-search--dropdown .select2-search__field {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-family) !important;
    font-size: 14px !important;
    outline: none !important;
    transition: border-color 150ms ease-out;
}
.select2-dropdown.ml-s2 .select2-search--dropdown .select2-search__field::placeholder {
    color: var(--text-muted);
}
/* Sin esto el navegador pinta su `outline: auto` negro, fuera de la identidad
   teal — pero el foco DEBE seguir viendose (accesibilidad). */
.select2-dropdown.ml-s2 .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .16) !important;
}

/* ════════════════════════════════════════════════════════════
   4. MOVIMIENTO — solo transform + opacity, <= 260 ms
   ════════════════════════════════════════════════════════════ */
@keyframes mlS2In {
    from { opacity: 0; transform: translateY(-8px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
@keyframes mlS2InUp {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
@keyframes mlS2Fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes mlS2ChipIn {
    from { opacity: 0; transform: scale(.86); }
    to   { opacity: 1; transform: none; }
}
.select2-dropdown.ml-s2 {
    transform-origin: top center;
    animation: mlS2In 200ms cubic-bezier(.16, 1, .3, 1) both;
}
.select2-dropdown--above.ml-s2 {
    transform-origin: bottom center;
    animation-name: mlS2InUp;
}

/* Con "Reducir movimiento": nada de deslizar ni escalar. Se conserva un fade
   corto — no es movimiento vestibular y mantiene la senal de que algo abrio. */
@media (prefers-reduced-motion: reduce) {
    .select2-dropdown.ml-s2,
    .select2-dropdown--above.ml-s2 {
        animation: mlS2Fade 120ms ease both !important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        animation: mlS2Fade 120ms ease both !important;
    }
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple,
    .select2-container--default .select2-selection--single::before,
    .select2-container--default .select2-selection--multiple::before,
    .select2-container--default .select2-selection--single .select2-selection__arrow b,
    .select2-container--default .select2-selection--single .select2-selection__clear,
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
    .select2-dropdown.ml-s2 .select2-results__option,
    .select2-dropdown.ml-s2 .select2-search--dropdown .select2-search__field,
    select:not([data-mlselect="off"]):not([size]):not(.select2-hidden-accessible) {
        transition: none !important;
    }
}

/* ════════════════════════════════════════════════════════════
   5. TACTIL / RESPONSIVE
   ------------------------------------------------------------
   Regla 8 (auto-zoom iOS): iOS Safari hace pinch-out automatico al enfocar
   un campo con `font-size < 16px` y descoloca todo el layout. Bajo 1024px
   (tablet 11", que es lo que mas usan las doctoras) TODO campo de texto del
   componente sube a 16px.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    select:not([data-mlselect="off"]):not([size]):not(.select2-hidden-accessible) {
        font-size: 16px;
    }
    .select2-dropdown.ml-s2 .select2-search--dropdown .select2-search__field,
    .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
        font-size: 16px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 16px !important;
    }
    /* Alto tactil comodo: control y opciones se tocan con el dedo, no con el
       puntero fino que emula el navegador de escritorio. */
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple {
        min-height: var(--touch-min, 44px);
    }
    .select2-dropdown.ml-s2 .select2-results__option:not(.select2-results__option--group):not([role="group"]) {
        min-height: var(--touch-min, 44px) !important;
        padding: 10px 12px !important;
        font-size: 14.5px !important;
    }
}

/* Anti auto-zoom, parte 2: el ancho NO alcanza como senal. Un iPad 11" en
   APAISADO mide 1194px — por encima del corte de arriba — y iOS igual hace el
   pinch-out al enfocar un campo de menos de 16px. `pointer: coarse` detecta el
   dedo en vez del ancho, asi que cubre cualquier tablet en horizontal sin
   tocar el escritorio (puntero fino). Mismo patron que ya usa app.css para
   los buscadores de `.ncf-s2`. */
@media (pointer: coarse) {
    select:not([data-mlselect="off"]):not([size]):not(.select2-hidden-accessible) {
        font-size: 16px;
    }
    .select2-dropdown.ml-s2 .select2-search--dropdown .select2-search__field,
    .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
        font-size: 16px !important;
    }
    /* El texto del control cerrado también: en un iPad 11" apaisado (1194px)
       quedaba a 14px al lado de campos de 16px, porque la regla de arriba
       (max-width: 1024px) no lo alcanza. */
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 16px !important;
    }
}

/* ════════════════════════════════════════════════════════════
   6. ESTADO DE ERROR
   ------------------------------------------------------------
   El control cerrado de Select2 es el hermano siguiente del <select>
   original, así que el error se lee del <select>: `aria-invalid="true"`
   (lo correcto, y lo que anuncia el lector de pantalla) o las clases
   legacy `is-error` / `is-invalid`. Solo cambia el borde: el skin es el
   mismo en todo el sistema.
   ════════════════════════════════════════════════════════════ */
select[aria-invalid="true"] + .select2-container--default .select2-selection--single,
select[aria-invalid="true"] + .select2-container--default .select2-selection--multiple,
select.is-error + .select2-container--default .select2-selection--single,
select.is-error + .select2-container--default .select2-selection--multiple,
select.is-invalid + .select2-container--default .select2-selection--single,
select.is-invalid + .select2-container--default .select2-selection--multiple {
    border-color: var(--error) !important;
}
select[aria-invalid="true"]:not([data-mlselect="off"]):not([size]):not(.select2-hidden-accessible) {
    border-color: var(--error);
}

/* Movil: el panel no puede desbordar el viewport ni comerse la pantalla
   (Regla 3). Select2 le fija el ancho del control por estilo inline, asi que
   solo hace falta acotar el maximo y el alto util. */
@media (max-width: 640px) {
    .select2-dropdown.ml-s2 {
        max-width: calc(100vw - 16px) !important;
    }
    .select2-dropdown.ml-s2 .select2-results__options {
        max-height: min(280px, 45vh) !important;
    }
}

/* ════════════════════════════════════════════════════════════
   7. FLECHAS LEGACY DEL MARKUP
   ------------------------------------------------------------
   Varias vistas envuelven su <select> en un wrapper con flecha propia
   (`<svg class="select-chevron">`, `.chl2-select-arrow`, `.cfg2-select-arrow`,
   `.pfm-tnt-filters__select-chev`) o la pintan desde el wrapper con `::after`
   (entrevistas). Esa flecha esta en `position:absolute`, asi que cuando
   ml-select toma el control queda FLOTANDO ENCIMA del chevron nuevo.

   Se apagan desde aqui en vez de editar 16 vistas: menos churn y menos
   riesgo. Van atadas a `.select2-hidden-accessible` A PROPOSITO — esa clase
   solo existe cuando Select2 ya hidrato. Si el JS no carga, la flecha
   original sigue visible y el <select> nativo se ve completo.
   ════════════════════════════════════════════════════════════ */
.select2-hidden-accessible ~ .select-chevron,
.select2-hidden-accessible ~ svg[class*="-arrow"],
.select2-hidden-accessible ~ svg[class*="-chev"],
.select2-hidden-accessible ~ .select2-container + svg {
    display: none !important;
}

/* Caso `::after` del wrapper: no hay elemento que ocultar, hay que apagar el
   pseudo del padre. `:has()` es la unica forma de mirar hacia arriba desde el
   <select> ya hidratado.
   FALLBACK (Regla 12): en WebKit viejo sin `:has()` el selector entero se
   descarta y la flecha legacy sigue pintada -> peor caso una flecha
   duplicada, nunca un layout roto ni un campo inutilizable. */
.form-select-wrapper:has(> .select2-hidden-accessible)::after,
[class*="select-wrapper"]:has(> .select2-hidden-accessible)::after {
    display: none !important;
}