/*
 * Desplegable multielección — componente compartido Sestanto.
 * Origen: portado 1:1 desde bodegon/informe bodegon ejemplo.html (el patrón que
 * ya funciona ahí). Usa los tokens de shared/sestanto-brand-kit/design-system/
 * tokens.css — importar tokens.css antes que este archivo, o redefinir
 * --surface/--border/--ink/--gray/--green localmente si el proyecto no usa
 * exactamente esos nombres.
 *
 * Markup esperado (ver multiselect.js):
 * <div class="msel" id="mselX">
 *   <button class="msel-btn" type="button" id="mselXBtn">
 *     <span id="mselXLabel">Todos</span>
 *     <svg viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="currentColor" stroke-width="1.6"></path></svg>
 *   </button>
 *   <div class="msel-panel" id="mselXPanel"></div>
 * </div>
 */
:root{
  --msel-surface: var(--color-surface-dark, #171E23);
  --msel-border: rgba(255,255,255,.22);
  --msel-ink: var(--color-ink, #F2F2F2);
  --msel-gray: var(--sestanto-gray, #9AA0A6);
  --msel-green: var(--sestanto-green, #1E6B3C);
  --msel-hover: rgba(255,255,255,.06);
}
.msel{position:relative;}
.msel-btn{
  font-family:var(--font-body,'Noto Sans',sans-serif);font-size:12px;padding:6px 9px;
  border:1px solid var(--msel-border);background:var(--msel-surface);color:var(--msel-ink);
  border-radius:2px;cursor:pointer;display:flex;align-items:center;gap:8px;
  min-width:150px;justify-content:space-between;white-space:nowrap;
}
.msel-btn:hover{border-color:var(--msel-gray);}
.msel-btn svg{width:10px;height:10px;flex:none;opacity:.6;}
.msel-panel{
  position:absolute;top:calc(100% + 4px);left:0;z-index:60;
  background:var(--msel-surface);border:1px solid var(--msel-border);
  min-width:230px;max-height:280px;overflow-y:auto;
  box-shadow:0 6px 18px rgba(0,0,0,.35);display:none;
}
.msel.open .msel-panel{display:block;}
.msel-opt{display:flex;align-items:center;gap:8px;padding:6px 10px;font-size:12px;cursor:pointer;color:var(--msel-ink);}
.msel-opt:hover{background:var(--msel-hover);}
.msel-opt input{accent-color:var(--msel-green);width:13px;height:13px;flex-shrink:0;}
.msel-opt .sw{width:9px;height:9px;flex-shrink:0;}
.msel-opt .cnt{margin-left:auto;color:var(--msel-gray);font-size:10.5px;font-variant-numeric:tabular-nums;}
.msel-actions{display:flex;justify-content:space-between;padding:6px 10px;border-top:1px solid var(--msel-border);}
.msel-actions button{appearance:none;background:none;border:none;color:var(--msel-green);font-size:11px;font-weight:600;cursor:pointer;font-family:var(--font-body,'Noto Sans',sans-serif);}