/* =====================================================================
   Multi-select desplegable con checkboxes y la barra de filtros que lo
   acompaña. Lo comparten el Reloj checador y Vacaciones; el componente
   está en /js/msel.js.
   ===================================================================== */
/* Barra de filtros y multi-select desplegable (mismo componente que Indicadores) */
.dash-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:16px;}
.dash-filters .fg{display:flex;flex-direction:column;gap:5px;}
/* Sólo el rótulo del campo va en mayúsculas; las opciones del desplegable no. */
.dash-filters .fg > label{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-soft);}
.dash-filters .input{font-size:13px;padding:8px 10px;min-width:130px;}
.msel{position:relative;display:inline-block;}
.msel .msel-btn{display:inline-flex;align-items:center;gap:8px;justify-content:space-between;min-width:150px;font-size:13px;padding:7px 10px;cursor:pointer;background:var(--surface);color:var(--text);white-space:nowrap;}
.msel .msel-btn.has-sel{border-color:var(--primary);color:var(--primary);font-weight:600;}
.msel .msel-car{font-size:10px;opacity:.6;transition:transform .15s;}
.msel.open .msel-car{transform:rotate(180deg);}
.msel .msel-pop{position:absolute;z-index:50;top:calc(100% + 4px);left:0;min-width:250px;max-width:330px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:8px;display:none;}
.msel.open .msel-pop{display:block;}
.msel .msel-tools{display:flex;gap:12px;padding:2px 4px 8px;border-bottom:1px solid var(--border);margin-bottom:6px;}
.msel .msel-tools span{font-size:12px;color:var(--primary);cursor:pointer;font-weight:600;}
.msel .msel-tools span:hover{text-decoration:underline;}
.msel .msel-buscar{width:100%;font-size:13px;padding:6px 9px;margin-bottom:6px;}
.msel .msel-list{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.msel .msel-opt.oculto,.msel .msel-grp.oculto{display:none;}
/* capitalize (no uppercase): los nombres vienen desparejos de la base
   ("planta alta"), pero respeta las siglas ya escritas en mayúscula. */
.msel .msel-opt{display:flex;align-items:center;gap:8px;font-size:13px;padding:5px 6px;border-radius:6px;cursor:pointer;text-transform:capitalize;letter-spacing:normal;color:var(--text);}
.msel .msel-opt:hover{background:color-mix(in srgb, var(--primary) 10%, transparent);}
.msel .msel-opt input{width:15px;height:15px;accent-color:var(--primary);cursor:pointer;}
.msel .msel-empty{font-size:12px;color:var(--text-soft);padding:6px;}
/* Encabezado de marca dentro del desplegable */
.msel .msel-grp{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-soft);padding:7px 6px 3px;}