/*
 * Zyra · desplegables con el estilo del UI (sistema "studio").
 *
 * Una sola regla para todos los <select> del sistema. Antes cada pantalla
 * pintaba la lista a su manera (#1e293b, #1e1e2e, blanco con !important) y en
 * el ERP claro salía una lista azul marino nativa que no casaba con nada.
 *
 * - Navegadores con "customizable select" (Chrome/Edge 135+, los PCs de
 *   gestión): la lista desplegada se dibuja con la tarjeta del UI (radio,
 *   borde, sombra, flecha chevron y resaltado violeta de la opción elegida).
 * - Resto (p. ej. Safari en iPad): se mantiene el selector nativo, que en
 *   táctil es lo esperado; solo se ajustan los colores de las opciones.
 * - Claro/oscuro: assets/zyra-select.js marca cada <select> con
 *   data-zs-theme según el fondo real sobre el que está, antes de abrirse.
 */

:root {
  --zs-surface: #fff;
  --zs-ink: #17181a;
  --zs-muted: #74726b;
  --zs-line: #e7e4de;
  --zs-hover: #f5f4f1;
  --zs-accent: #6846cf;
  --zs-accent-soft: #f0ebff;
  --zs-shadow: 0 18px 50px rgba(20, 20, 20, .14), 0 2px 6px rgba(20, 20, 20, .06);
}

select[data-zs-theme="dark"] {
  --zs-surface: #1b1b1f;
  --zs-ink: #f2f2f0;
  --zs-muted: #a3a2aa;
  --zs-line: #303037;
  --zs-hover: #26262d;
  --zs-accent: #b69cff;
  --zs-accent-soft: rgba(182, 156, 255, .16);
  --zs-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
}

/* Lista nativa (navegadores sin base-select): al menos con los colores del tema. */
select option {
  background-color: var(--zs-surface);
  color: var(--zs-ink);
}

@supports (appearance: base-select) {
  select {
    appearance: base-select;
    cursor: pointer;
    gap: .5em;
  }

  /* Base para los <select> sin estilo propio (especificidad 0: cualquier clase
     de la página manda). Con base-select el navegador no dibuja caja, así que
     se da un borde sutil derivado del color del texto: vale en claro y oscuro. */
  :where(select) {
    border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
    border-radius: 9px;
    padding-block: .45em;
    padding-inline: .75em;
    background-color: transparent;
  }

  /* Flecha: chevron SVG simétrico en máscara; toma el color del texto, así vale
     en claro y en oscuro. (Antes eran dos bordes girados y el relleno alargaba
     un brazo: parecía un ✓ torcido.) */
  select::picker-icon {
    content: "";
    flex: none;
    align-self: center;
    width: 1.1em;
    height: 1.1em;
    margin-inline-start: auto;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .6;
    transition: rotate .15s ease;
  }

  select:open::picker-icon {
    rotate: 180deg;
  }

  select::picker(select) {
    appearance: base-select;
    background: var(--zs-surface);
    color: var(--zs-ink);
    border: 1px solid var(--zs-line);
    border-radius: 12px;
    padding: 6px;
    margin-block: 6px;
    box-shadow: var(--zs-shadow);
    max-height: min(60vh, 360px);
    overflow-y: auto;
  }

  select option {
    display: flex;
    align-items: center;
    gap: .75em;
    padding: .55em .75em;
    border-radius: 9px;
    background: transparent;
    color: var(--zs-ink);
    cursor: pointer;
  }

  select option:hover,
  select option:focus-visible {
    background: var(--zs-hover);
    outline: none;
  }

  select option:checked {
    background: var(--zs-accent-soft);
    color: var(--zs-accent);
    font-weight: 700;
  }

  /* Sin ✓: la opción elegida ya se distingue por el fondo y el color violeta. */
  select option::checkmark {
    display: none;
  }

  select option:disabled {
    color: var(--zs-muted);
    opacity: .6;
    cursor: not-allowed;
  }

  select optgroup {
    color: var(--zs-muted);
    font-size: .8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
}

@media (prefers-reduced-motion: reduce) {
  select::picker-icon { transition: none; }
}