/* ──────────────────────────────────────────────────────────────────────────
   Los desplegables con la cara del sitio. Va junto a assets/sel.js.

   Todo lo de acá cuelga de «.sel», que lo pone el script. Sin el script no se
   aplica nada y el <select> del sistema se ve como siempre: la página nunca
   queda a medio camino entre los dos.
   ────────────────────────────────────────────────────────────────────────── */

.sel               { position:relative; display:inline-block; width:100% }
/* El original sigue en el formulario, invisible y sin ocupar lugar. No se usa
   display:none: hay navegadores que no envían un campo requerido y oculto así,
   y se pierde el salto automático al campo con error.

   ── Por qué van todos con !important ─────────────────────────────────────
   Acá hubo un error que no se veía y desbordaba páginas enteras. El sitio ya
   vestía sus <select> con reglas como `.form-cuenta select { width:100% }` y
   `.cumple-campos select { min-width:5.6rem }`, que tienen más peso que esta
   clase (una clase + un elemento le gana a una clase sola). El resultado: el
   select escondido seguía midiendo el ancho de su formulario, y como además
   está posicionado en absoluto, ese ancho se iba hacia la derecha y empujaba
   la página. En la pantalla de crear cuenta, a 768 px, sobraban 686 px de
   barrido horizontal — y no se notaba porque el campo es invisible.

   Una clase que existe para ESCONDER algo tiene que ganarle a cualquier regla
   que lo vista, venga de donde venga. Ése es el caso en que !important es la
   herramienta correcta y no un parche. */
.sel-oculto        { position:absolute !important; width:1px !important;
                     height:1px !important; min-width:0 !important;
                     max-width:1px !important; flex:0 0 1px !important;
                     padding:0 !important; margin:-1px !important;
                     overflow:hidden; clip:rect(0 0 0 0);
                     white-space:nowrap; border:0 !important; opacity:0;
                     pointer-events:none }

.sel-btn           { width:100%; text-align:left; font:inherit; color:inherit;
                     background:#fff; border:1px solid var(--linea,#e8e2e4);
                     border-radius:10px; padding:10px 38px 10px 14px;
                     cursor:pointer; position:relative; line-height:1.35;
                     white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
                     transition:border-color .12s, box-shadow .12s }
.sel-btn:hover     { border-color:var(--marca,#9d2449) }
.sel-btn:focus-visible,
.sel-abierto .sel-btn { outline:none; border-color:var(--marca,#9d2449);
                     box-shadow:0 0 0 3px color-mix(in srgb, var(--marca,#9d2449) 18%, transparent) }
.sel-vacio         { color:var(--gris,#8b8b8b) }

/* La flecha, dibujada con dos bordes girados: sin imagen, sin fuente de
   iconos, y del mismo color que el texto sea cual sea el tema. */
.sel-btn::after    { content:''; position:absolute; right:15px; top:50%;
                     width:7px; height:7px; border-right:2px solid currentColor;
                     border-bottom:2px solid currentColor; opacity:.55;
                     transform:translateY(-70%) rotate(45deg);
                     transition:transform .15s }
.sel-abierto .sel-btn::after { transform:translateY(-25%) rotate(-135deg) }

.sel-lista         { position:absolute; z-index:60; left:0; right:0; top:calc(100% + 5px);
                     margin:0; padding:5px; list-style:none; max-height:288px;
                     overflow-y:auto; background:#fff;
                     border:1px solid var(--linea,#e8e2e4); border-radius:12px;
                     box-shadow:0 12px 32px rgba(0,0,0,.14);
                     /* El desplazamiento con rueda dentro de la lista no
                        arrastra la página detrás. */
                     overscroll-behavior:contain }
.sel-arriba .sel-lista { top:auto; bottom:calc(100% + 5px) }

.sel-op            { padding:9px 12px; border-radius:8px; cursor:pointer;
                     display:flex; align-items:center; gap:8px; line-height:1.35 }
/* «marca» es donde está el teclado o el ratón; «on» es lo que está elegido.
   Son dos cosas distintas y se ven distinto a propósito: si fueran iguales,
   mover la flecha parecería haber cambiado la elección sin confirmarla. */
.sel-op.marca      { background:color-mix(in srgb, var(--marca,#9d2449) 10%, transparent) }
.sel-op.on         { font-weight:600 }
.sel-op.on::before { content:''; width:6px; height:10px; flex:0 0 6px;
                     border-right:2px solid var(--marca,#9d2449);
                     border-bottom:2px solid var(--marca,#9d2449);
                     transform:rotate(45deg) translate(-1px,-1px) }
/* El hueco del visto en las no elegidas, para que el texto no baile. */
.sel-op:not(.on)::before { content:''; width:6px; height:10px; flex:0 0 6px }
.sel-op.no         { opacity:.45; cursor:default }
.sel-op.no.marca   { background:transparent }

.sel-grupo         { padding:9px 12px 4px; font-size:.8rem; font-weight:700;
                     text-transform:uppercase; letter-spacing:.04em;
                     color:var(--gris,#8b8b8b) }

/* El desplegable del orden del catálogo es una pastilla y no un campo. */
.sel.sel-pill      { width:auto }
.sel.sel-pill .sel-btn { border-radius:999px; padding:8px 34px 8px 16px;
                     background:transparent }

/* Quien prefiera menos movimiento no ve girar la flecha. */
@media (prefers-reduced-motion: reduce) {
  .sel-btn, .sel-btn::after { transition:none }
}