/* ================================================================
   DESPLEGABLE PROPIO — Neo Puzzle Lovers
   Sustituye al <select> nativo, cuya lista de opciones la dibuja el
   sistema operativo (fondo blanco) y no admite CSS.

   Tokens con respaldo: también se usa en engine/ y crossword/, que
   tienen su propio :root sin las variables --pl-*.
   ================================================================ */

.pl-select { position: relative; display: block; width: 100%; }

/* El <select> real sigue en el DOM (fuente de verdad y accesibilidad de
   formulario), pero no se ve. No usamos display:none para que siga
   participando en la validación y el envío del formulario. */
.pl-select-native {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ── Botón (estado cerrado) ── */
.pl-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  padding: 0.78rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--pl-border, rgba(255, 255, 255, 0.14));
  background: var(--pl-panel-alt, rgba(255, 255, 255, 0.04));
  color: var(--pl-text, #f8f2ff);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.pl-select-btn:hover:not(:disabled) {
  border-color: var(--pl-lilac, #a96ae7);
  background: rgba(255, 255, 255, 0.07);
}

.pl-select-btn:focus-visible {
  outline: none;
  border-color: var(--pl-cyan, #8deeff);
  box-shadow: 0 0 0 3px rgba(141, 238, 255, 0.18);
}

.pl-select-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.pl-select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-select-arrow {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--pl-muted, #bba9df);
  transition: transform 0.22s ease, color 0.22s ease;
}

.pl-select.is-open .pl-select-arrow {
  transform: rotate(180deg);
  color: var(--pl-cyan, #8deeff);
}

.pl-select.is-open .pl-select-btn {
  border-color: var(--pl-cyan, #8deeff);
  box-shadow: 0 0 18px -6px rgba(141, 238, 255, 0.7);
}

/* ── Lista desplegada ── */
.pl-select-list {
  position: absolute;
  z-index: 960;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  max-height: 15rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.35rem;
  border-radius: 14px;
  border: 1px solid var(--pl-border, rgba(255, 255, 255, 0.14));
  /* Opaco a propósito: con transparencia el texto de debajo se cuela */
  background: var(--pl-deep, #15071f);
  box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.75);
  animation: pl-select-in 0.16s ease;
  scrollbar-width: thin;
}

/* Cuando no cabe abajo, se abre hacia arriba */
.pl-select.drops-up .pl-select-list {
  top: auto;
  bottom: calc(100% + 0.4rem);
}

@keyframes pl-select-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pl-select-list::-webkit-scrollbar { width: 6px; }
.pl-select-list::-webkit-scrollbar-thumb {
  background: var(--pl-border, rgba(255, 255, 255, 0.18));
  border-radius: 3px;
}

.pl-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  color: var(--pl-soft, #d8c9ff);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

/* is-active = navegación con teclado o ratón encima */
.pl-select-option.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--pl-text, #f8f2ff);
}

.pl-select-option.is-selected {
  color: var(--pl-cyan, #8deeff);
  font-weight: 700;
}

.pl-select-option.is-selected.is-active {
  background: rgba(141, 238, 255, 0.14);
}

.pl-select-option[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.pl-select-check { font-size: 0.8rem; flex-shrink: 0; }

/* ── Ajustes por tema ── */
body.theme-light .pl-select-list {
  background: #ffffff;
  box-shadow: 0 24px 50px -14px rgba(15, 23, 42, 0.25);
}
body.theme-light .pl-select-option.is-active { background: rgba(15, 23, 42, 0.07); }

body.theme-pixel .pl-select-btn,
body.theme-pixel .pl-select-list,
body.theme-pixel .pl-select-option { border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  .pl-select-list { animation: none; }
  .pl-select-arrow { transition: none; }
}

/* ================================================================
   OTROS CONTROLES NATIVOS
   El navegador los pinta con su propio estilo (claro) si no se tocan.
   ================================================================ */

/* Número: fuera las flechas del sistema, que rompen la estética */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Fecha: el icono del calendario es negro sobre fondo oscuro */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.65);
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { filter: invert(1) opacity(1); }

/* Archivo: el botón "Examinar…" del sistema, con la estética del sitio */
input[type="file"] { color: var(--pl-muted, #bba9df); font-size: 0.85rem; }
input[type="file"]::file-selector-button {
  margin-right: 0.8rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--pl-border, rgba(255, 255, 255, 0.16));
  background: var(--pl-panel-alt, rgba(255, 255, 255, 0.06));
  color: var(--pl-soft, #d8c9ff);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--pl-lilac, #a96ae7);
  color: var(--pl-text, #f8f2ff);
}

/* Barras de scroll del sitio, para que no salgan claras en modo oscuro.
   Va en :root y no en *, porque scrollbar-color se hereda y con el
   selector universal pisaría los estilos propios de otras vistas. */
:root { scrollbar-color: var(--pl-border, rgba(255, 255, 255, 0.2)) transparent; }