/* ============================================================================
   DESPLEGABLES DEL CLUB
   ============================================================================

   Un `<select>` se puede pintar por fuera, pero la lista que se abre al tocarlo
   la dibuja el sistema operativo y NO hay CSS que la alcance: sale el panel gris
   de Windows o el rodillo de iOS, con su tipografía y su azul de sistema, en
   mitad de una pantalla negra y dorada. Por eso aquí el desplegable abierto es
   nuestro: un botón y una lista propios montados sobre el `<select>` de verdad,
   que sigue existiendo debajo (ver desplegable.js).

   El lenguaje visual es el MISMO que el `.dd` de la web pública, para que el
   área privada no parezca otra casa: borde dorado tenue, fondo casi negro con
   desenfoque y la opción elegida en oro claro.

   Dos cosas que se hacen con bordes girados y no con un carácter:
   la flecha y la marca de «elegida». Un `∞` o un `✓` dependen de la fuente que
   tenga el aparato — en Windows el `∞` del logotipo ya se dibujó una vez como
   dos círculos sueltos— y aquí no hay nada que dependa de eso.
   ========================================================================== */

.dd {
  position: relative;
  display: block;
  width: 100%;
}

/* El `<select>` de verdad sigue ahí: es quien guarda el valor, quien viaja en
   el formulario y quien queda si el JavaScript no llega a ejecutarse. Se le
   quita el foco y el ratón desde el JS (`tabindex="-1"`), no desde aquí. */
/* `select.` y no `.dd__nativo` a secas: `hazte-socio.css` trae
   `select.field-input`, que pesa lo mismo que una clase suelta y ganaría por
   ir después. Con el tipo delante empatan, y esta hoja se carga la última. */
select.dd__nativo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------- el botón - */

/* Mismas medidas que `.campo select` de comun.css: 48 px de alto es el objetivo
   táctil mínimo que exige el resto del proyecto, y el hueco de la derecha deja
   sitio a la flecha sin que el texto largo se le meta debajo. */
.dd__b {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--cream);
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}

.dd__b:hover { border-color: var(--line-hi); }

.dd__b:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.dd[data-abierto="true"] .dd__b {
  border-color: var(--line-hi);
  box-shadow: 0 0 0 3px rgba(200, 162, 76, .14);
}

/* El valor puede ser largo («Solo quien me sigue y ha verificado la edad»): se
   corta con puntos suspensivos en vez de estirar el campo fuera de la tarjeta.
   `min-width: 0` es lo que permite encoger a un hijo de flex — sin él el texto
   manda y el botón desborda a 320 px. */
.dd__v {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dd__f {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 3px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--dur-2) var(--ease);
}

.dd[data-abierto="true"] .dd__f { transform: translateY(2px) rotate(-135deg); }

/* ---------------------------------------------------------------- la lista - */

/*
 * Va en el `<body>` y en posición fija, no colgando del campo.
 *
 * La ficha de Descubrir (`.hoja`) es `overflow-y: auto`, así que una lista
 * `absolute` dentro de ella se cortaría por el borde de la ficha en cuanto
 * tuviera más de dos opciones. Fija y en el body no la recorta nadie, a cambio
 * de que el JS tenga que colocarla y de que se cierre al desplazar.
 *
 * 200 porque la ficha está en 70 y el techo del proyecto era 100: esto tiene
 * que quedar por encima de cualquier capa, incluida una modal.
 */
.dd__lista {
  position: fixed;
  z-index: 200;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: min(320px, 50vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, rgba(22, 13, 18, .97), rgba(10, 6, 8, .99));
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-m);
  box-shadow: 0 30px 60px -18px #000, var(--glow-gold);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.dd__lista[hidden] { display: none; }

.dd__o {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  min-height: 44px;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.35;
  border-radius: var(--radius-s);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

/* `.dd__o--foco` es el resaltado del teclado. No se usa `:focus` porque el foco
   real NUNCA sale del botón: la lista se recorre con `aria-activedescendant`,
   que es lo que espera un lector de pantalla en un combobox. */
.dd__o:hover,
.dd__o--foco {
  background: linear-gradient(90deg, rgba(142, 23, 48, .28), transparent);
  color: var(--gold-pale);
}

.dd__o[aria-selected="true"] { color: var(--gold-bright); }

.dd__o[aria-selected="true"]::after {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 11px;
  margin-left: auto;
  border-right: 2px solid var(--gold-bright);
  border-bottom: 2px solid var(--gold-bright);
  transform: translateY(-2px) rotate(45deg);
}

/* Con «reducir movimiento» la hoja global ya corta las transiciones; aquí no
   hay ninguna animación de entrada que dependa de ello a propósito, para que la
   lista aparezca igual de rápido en los dos casos. */
