/* =============================================================================
 * Custom Select — diseño moderno/futurista
 *
 * Estructura DOM generada por custom-select.js:
 *   <div class="cs">
 *     <select>...</select>     ← oculto, sigue siendo el origen del form
 *     <button class="cs__trigger">
 *       <span class="cs__value">Texto seleccionado</span>
 *       <span class="cs__arrow"><svg/></span>
 *     </button>
 *     <div class="cs__panel" role="listbox">
 *       <div class="cs__search"><svg/><input/></div>
 *       <div class="cs__list">
 *         <div class="cs__group">Grupo</div>
 *         <div class="cs__opt cs__opt--selected cs__opt--active">
 *           <span class="cs__opt-marker"><svg/></span>
 *           <span class="cs__opt-label">Texto</span>
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 * ============================================================================= */

.cs {
    position: relative;
    width: 100%;
    display: block;
    --cs-accent: var(--c-accent, #0066ff);
    --cs-accent-soft: var(--c-accent-soft, rgba(0, 102, 255, 0.14));
    --cs-bg: var(--c-bg-elev, #fff);
    --cs-bg-panel: var(--c-bg-elev, #fff);
    --cs-border: var(--c-border, rgba(0, 0, 0, 0.12));
    --cs-text: var(--c-text, #1a1a1a);
    --cs-text-muted: var(--c-text-muted, #6b7280);
    --cs-text-subtle: var(--c-text-subtle, #94a3b8);
    --cs-radius: var(--radius-md, 10px);
    --cs-radius-panel: var(--radius-lg, 14px);
    --cs-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18),
                 0 2px 6px -1px rgba(0, 0, 0, 0.05);
    --cs-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* El <select> nativo queda escondido pero accesible para el form. */
.cs > select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    /* Para forms con validation: el browser puede mostrar bubble en el select. */
    z-index: -1;
}

/* -----------------------------------------------------------------------------
 *  Trigger — el "botón" visible con borde, gradient sutil y chevron.
 * --------------------------------------------------------------------------- */
.cs__trigger {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 12px 16px;
    font-size: var(--fs-base, 15px);
    font-family: inherit;
    color: var(--cs-text);
    background: var(--cs-bg);
    background-image: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms var(--cs-ease),
                box-shadow 160ms var(--cs-ease),
                background-color 160ms var(--cs-ease),
                transform 120ms var(--cs-ease);
    min-height: 44px;
}
.cs__trigger:hover:not(:disabled) {
    border-color: var(--cs-accent);
}
.cs__trigger:focus-visible {
    outline: none;
    border-color: var(--cs-accent);
    box-shadow: 0 0 0 4px var(--cs-accent-soft);
}
.cs__trigger:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.cs--open .cs__trigger {
    border-color: var(--cs-accent);
    box-shadow: 0 0 0 4px var(--cs-accent-soft);
}

.cs__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cs__value--placeholder {
    color: var(--cs-text-subtle);
}

.cs__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cs-text-muted);
    transition: transform 220ms var(--cs-ease), color 160ms var(--cs-ease);
    flex-shrink: 0;
}
.cs--open .cs__arrow {
    transform: rotate(-180deg);
    color: var(--cs-accent);
}

/* -----------------------------------------------------------------------------
 *  Panel desplegable — glassmorphism + shadow elegante + animación de entrada.
 * --------------------------------------------------------------------------- */
.cs__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--cs-bg-panel);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-panel);
    box-shadow: var(--cs-shadow);
    overflow: hidden;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    animation: cs-slide 220ms var(--cs-ease);
    max-height: 360px;
    display: flex;
    flex-direction: column;
}
@keyframes cs-slide {
    from { opacity: 0; transform: translateY(-6px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Pequeño borde superior accent al abrir (detalle futurista) */
.cs__panel::before {
    content: "";
    position: absolute;
    top: 0; left: 12px; right: 12px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cs-accent), transparent);
    opacity: 0.55;
    pointer-events: none;
}

/* -----------------------------------------------------------------------------
 *  Buscador
 * --------------------------------------------------------------------------- */
.cs__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--cs-border);
    color: var(--cs-text-muted);
    flex-shrink: 0;
}
.cs__search-input {
    flex: 1;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--cs-text);
    font-size: 14px;
    font-family: inherit;
    padding: 0;
}
.cs__search-input::placeholder {
    color: var(--cs-text-subtle);
}

/* -----------------------------------------------------------------------------
 *  Lista de opciones — scroll suave + scrollbar fina
 * --------------------------------------------------------------------------- */
.cs__list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--cs-border) transparent;
}
.cs__list::-webkit-scrollbar { width: 8px; }
.cs__list::-webkit-scrollbar-track { background: transparent; }
.cs__list::-webkit-scrollbar-thumb {
    background: var(--cs-border);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.cs__list::-webkit-scrollbar-thumb:hover {
    background: var(--cs-text-subtle);
    background-clip: content-box;
}

.cs__group {
    padding: 8px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cs-text-subtle);
}

.cs__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--cs-text);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 120ms var(--cs-ease),
                color 120ms var(--cs-ease),
                transform 120ms var(--cs-ease);
    user-select: none;
}
.cs__opt--in-group {
    padding-left: 22px;
}
.cs__opt--active {
    background: var(--cs-accent-soft);
}
.cs__opt--selected {
    color: var(--cs-accent);
    font-weight: 600;
}
.cs__opt--selected .cs__opt-marker {
    color: var(--cs-accent);
    opacity: 1;
}
.cs__opt--disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.cs__opt-marker {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    opacity: 0;
    transition: opacity 150ms var(--cs-ease), color 150ms var(--cs-ease);
}
.cs__opt-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
 *  Multi-select: en el trigger mostramos hasta 2 items + "+N"
 *  No hay diferencia visual estructural; sólo el marker está siempre visible.
 * --------------------------------------------------------------------------- */
.cs--multi .cs__opt-marker {
    opacity: 0.25;
    color: var(--cs-text-muted);
}
.cs--multi .cs__opt--selected .cs__opt-marker {
    opacity: 1;
    color: var(--cs-accent);
}

/* -----------------------------------------------------------------------------
 *  Disabled state
 * --------------------------------------------------------------------------- */
.cs--disabled .cs__trigger {
    opacity: 0.55;
    cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
 *  Mobile tweaks
 * --------------------------------------------------------------------------- */
@media (max-width: 540px) {
    .cs__panel { max-height: 60vh; }
    .cs__opt { padding: 12px 12px; font-size: 15px; } /* targets de tap más grandes */
}

/* -----------------------------------------------------------------------------
 *  Dark mode automático — usa las variables del tema dark del sitio
 * --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    .cs__panel {
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
        box-shadow: 0 12px 36px -10px rgba(0, 0, 0, 0.55),
                    0 2px 6px -1px rgba(0, 0, 0, 0.25);
    }
}

/* -----------------------------------------------------------------------------
 *  Override de tamaño cuando el <select> original llevaba inline max-width.
 *  El JS lo copia al wrapper para preservar layouts existentes (filtros).
 * --------------------------------------------------------------------------- */
.cs[style*="max-width"] { display: inline-block; vertical-align: top; }