/* DESPLEGABLES · el aspecto de TODOS los <select> de la aplicación
   ──────────────────────────────────────────────────────────────────────────────────────────────
   Un <select> nativo enseña su lista con el menú del sistema: cuadrada, con la letra y el azul de Windows, y ninguna
   regla de la página la alcanza. Desde Chrome/Edge 135 eso se puede cambiar —«customizable select»,
   `appearance: base-select`— sin tocar el marcado: el control sigue siendo un <select> de verdad, con su @bind, su
   value, su teclado nativo y su Intro-pasa-al-siguiente-campo (enterNav.js y enterCampos.js cancelan el Intro antes
   de que abra la lista). Firefox y Safari no lo soportan todavía: ahí todo esto se ignora y se ve el nativo de siempre.

   La lista es la MISMA que la de <FiltroUnico> y <FiltroMultiple> (Components/Filtros): mismo borde, radio y sombra
   del panel; filas de 34 px con radio interior; la elegida en azul con el visto en una columna fija a la izquierda;
   la señalada, en gris azulado. Si cambia el aspecto de los desplegables, se toca aquí Y en FiltroUnico.razor.css.

   ESPECIFICIDAD CERO a propósito (`:where`). Esto es el SUELO: la regla de cualquier página —su alto, su borde, su
   letra en el control cerrado— gana sin pelear. Lo que no se puede pisar por accidente es la lista, porque ninguna
   página la estilaba (no podía). La excepción es Bootstrap: `.form-select` pone `appearance: none` y su propia flecha
   de fondo, y esa sí se reescribe abajo con su misma especificidad. */

@supports (appearance: base-select) {

    :where(select:not([multiple]):not([size])) {
        appearance: base-select;
        /* Texto y flecha centrados en vertical. El nativo lo hacía solo; base-select coloca su contenido como una
           fila y lo deja ARRIBA, y las páginas dan alto a sus selects con min-block-size y padding-block 0 (contando
           con ese centrado). Una fila centrada, sea cual sea el alto que le ponga la página. */
        display: inline-flex;
        align-items: center;
        /* El control cerrado, para los <select> que no traen estilo propio (sin esto, base-select los dejaría con
           borde negro y fondo transparente). Los que lo traen lo conservan: su clase gana a esto. */
        border: 1px solid #dbe2ea;
        border-radius: 8px;
        padding: 6px 10px;
        background-color: #ffffff;
        color: #1f2937;
        font: inherit;
        cursor: pointer;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    /* Bootstrap dibuja la flecha como imagen de fondo sobre un select sin apariencia: con base-select la flecha es
       ::picker-icon, y con las dos saldrían dos. */
    .form-select:not([multiple]):not([size]) {
        appearance: base-select;
        /* Bootstrap lo pone en display: block, que anula el centrado de arriba: misma fila centrada, a todo el ancho. */
        display: flex;
        align-items: center;
        background-image: none;
        padding-right: 0.75rem;
    }

    :where(select:not([multiple]):not([size])):focus-visible,
    :where(select:not([multiple]):not([size])):open {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
        outline: none;
    }

    :where(select:not([multiple]):not([size])):disabled {
        background-color: #f8fafc;
        color: #9ca3af;
        cursor: default;
    }

    /* La flecha: el mismo «expand_more» de Material que FiltroUnico, como máscara para que tome el color sin depender
       de que la fuente de iconos haya cargado. Gira al abrir. */
    :where(select:not([multiple]):not([size]))::picker-icon {
        content: "";
        flex: none;
        width: 18px;
        height: 18px;
        margin-inline-start: auto;
        padding-inline-start: 4px;
        background-color: #6b7280;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
        transition: rotate 0.15s ease;
    }

    :where(select:not([multiple]):not([size])):open::picker-icon {
        rotate: 180deg;
    }

    /* LA LISTA. Cae debajo del control, al menos igual de ancha, con scroll propio si es larga, y aparece con un
       desliz de 120 ms —lo justo para que se lea de dónde sale—. */
    :where(select:not([multiple]):not([size]))::picker(select) {
        appearance: base-select;
        margin-block: 6px;
        max-block-size: min(320px, 60vh);
        padding: 6px;
        border: 1px solid #d0d7de;
        border-radius: 11px;
        background: #ffffff;
        box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
        font-size: 13px;
        opacity: 1;
        translate: 0 0;
        transition: opacity 0.12s ease-out, translate 0.12s ease-out;
    }

    @starting-style {
        :where(select:not([multiple]):not([size])):open::picker(select) {
            opacity: 0;
            translate: 0 -4px;
        }
    }

    :where(select:not([multiple]):not([size])) option {
        display: flex;
        align-items: center;
        gap: 6px;
        min-block-size: 34px;
        padding: 0 12px 0 6px;
        border-radius: 8px;
        background: transparent;
        color: #1f2937;
        font-weight: 400;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color 0.1s ease, color 0.1s ease;
    }

        /* La que señala el ratón y la que señala el teclado se ven igual: es «la que se elegiría ahora». */
        :where(select:not([multiple]):not([size])) option:hover,
        :where(select:not([multiple]):not([size])) option:focus-visible {
            background: #f3f6fa;
            outline: none;
        }

        /* La elegida no se rellena: el visto y el azul bastan, y un fondo fijo competiría con el de la señalada. */
        :where(select:not([multiple]):not([size])) option:checked {
            color: #1d4ed8;
            font-weight: 600;
        }

            :where(select:not([multiple]):not([size])) option:checked:hover,
            :where(select:not([multiple]):not([size])) option:checked:focus-visible {
                background: #eef4ff;
            }

        :where(select:not([multiple]):not([size])) option:disabled {
            color: #9ca3af;
            cursor: default;
        }

            :where(select:not([multiple]):not([size])) option:disabled:hover {
                background: transparent;
            }

        /* El visto, en su columna a la izquierda. El navegador lo oculta (sin quitarle el sitio) en las no elegidas:
           con o sin él, los nombres empiezan todos en el mismo sitio. */
        :where(select:not([multiple]):not([size])) option::checkmark {
            content: "";
            flex: none;
            width: 18px;
            height: 18px;
            background-color: #2563eb;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
        }

    /* Grupos de opciones: el rótulo pequeño y gris, como un encabezado de sección, no como una opción más. */
    :where(select:not([multiple]):not([size])) optgroup {
        padding-top: 4px;
        font-size: 11px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

        :where(select:not([multiple]):not([size])) optgroup option {
            font-size: 13px;
            text-transform: none;
            letter-spacing: normal;
        }
}

@media (prefers-reduced-motion: reduce) {
    @supports (appearance: base-select) {
        :where(select:not([multiple]):not([size])),
        :where(select:not([multiple]):not([size]))::picker-icon,
        :where(select:not([multiple]):not([size]))::picker(select),
        :where(select:not([multiple]):not([size])) option {
            transition: none;
        }
    }
}