/* risu-dropdown.css — estilos del componente RisuDropdown.
 *
 * Componente custom dropdown que reemplaza el <select> nativo: pill outline +
 * chevron + listbox flotante con border light, search interno opcional,
 * items con padding generoso, hover sutil, check en seleccionado.
 *
 * Convención: cualquier página que cargue /risu-dropdown.js debe cargar
 * este CSS también. Antes vivía inline en admin.html y config.html — la
 * duplicación causó un bug en empezar.html donde el JS montaba el
 * componente pero el <select> original quedaba visible (no había
 * .rd__select-oculto definido).
 *
 * Tokens: usa fallbacks para que funcione en páginas que no tienen
 * --admin-* definidos. Si tu página tiene esos tokens (admin.html,
 * config.html), gana el valor de la página; sino, fallback razonable.
 */

.rd { position: relative; display: inline-block; width: 100%; }

/* Oculta visualmente el <select> original pero lo deja en el DOM y
   funcional — handlers que escuchan `change` o leen `.value` siguen
   trabajando con el select nativo subyacente. */
.rd__select-oculto {
    position: absolute !important; opacity: 0 !important;
    pointer-events: none !important; width: 0 !important; height: 0 !important;
    overflow: hidden !important;
}

.rd__trigger {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid var(--admin-border, #E5E7EB);
    border-radius: var(--admin-radius-pill, 999px);
    padding: 10px 16px 10px 18px;
    font-family: inherit; font-size: 14px; font-weight: 500;
    color: var(--admin-text, #111827);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    text-align: left;
    min-height: 42px;
}
.rd__trigger:hover { border-color: var(--admin-text-muted, #6B7280); }
.rd--abierto .rd__trigger,
.rd__trigger:focus-visible {
    border-color: var(--admin-accent, #5B7FFF);
    box-shadow: 0 0 0 3px rgba(91, 127, 255, 0.18);
    outline: 0;
}
.rd__trigger-label {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rd__trigger-label--placeholder { color: var(--admin-text-soft, #9CA3AF); font-weight: 400; }
.rd__trigger-chevron {
    color: var(--admin-text-muted, #6B7280);
    margin-left: 10px;
    display: inline-flex; transition: transform 0.18s ease;
}
.rd--abierto .rd__trigger-chevron { transform: rotate(180deg); }

.rd__listbox {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    max-width: 360px;
    background: #FFFFFF;
    border: 1px solid var(--admin-border, #E5E7EB);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 15, 16, 0.10);
    z-index: 9000;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.rd__listbox--right { left: auto; right: 0; }

.rd__search {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--admin-border-soft, #F1F5F9);
}
.rd__search-icon {
    color: var(--admin-text-muted, #6B7280);
    display: inline-flex; flex-shrink: 0;
}
.rd__search-input {
    flex: 1;
    border: 0 !important;
    background: transparent !important;
    padding: 4px 0 !important;
    font-family: inherit; font-size: 14px;
    color: var(--admin-text, #111827);
    outline: 0;
    min-width: 0;
    box-shadow: none !important;
}
.rd__search-input::placeholder { color: var(--admin-text-soft, #9CA3AF); }

.rd__items {
    overflow-y: auto;
    padding: 6px;
    max-height: 280px;
}
.rd__group-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    color: var(--admin-text-soft, #9CA3AF); letter-spacing: 0.05em;
    padding: 8px 12px 4px;
}
.rd__item {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    font-family: inherit; font-size: 14px; font-weight: 500;
    color: var(--admin-text, #111827);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease;
}
.rd__item:hover { background: var(--admin-bg-soft, #F9FAFB); }
.rd__item:focus-visible {
    outline: 0;
    background: var(--admin-accent-soft, #EEF2FF);
}
.rd__item--seleccionado {
    color: var(--admin-accent, #5B7FFF);
    font-weight: 600;
}
.rd__item-label {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rd__item-check {
    color: var(--admin-accent, #5B7FFF);
    margin-left: 10px;
    opacity: 0;
    transition: opacity 0.12s ease;
    display: inline-flex; flex-shrink: 0;
}
.rd__item--seleccionado .rd__item-check { opacity: 1; }
.rd__empty {
    padding: 18px 12px;
    text-align: center;
    color: var(--admin-text-soft, #9CA3AF);
    font-size: 13px;
}

/* Mobile: el listbox achica para no cortar contra la viewport. */
@media (max-width: 640px) {
    .rd__listbox { min-width: 240px; max-width: 95vw; }
}