/* Filtro de varias opciones (core/_filtro_multi.html + core/js/multisel.js). Colores de theme.css. */

.msel { position: relative; min-width: 0; }
.msel [hidden] { display: none !important; }
.msel-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Botón: se ve como un input (mismo alto que el resto de la fila). */
.msel-btn { display: flex; align-items: center; gap: 0.375rem; width: 100%; min-width: 0; height: 2.5rem;
    padding: 0 0.625rem 0 0.75rem; border: 1px solid rgb(var(--c-stroke-strong)); border-radius: 0.5625rem;
    background: rgb(var(--c-card)); color: rgb(var(--c-txt)); font-size: 0.875rem; text-align: left; cursor: pointer; }
.msel-btn:hover { border-color: rgb(var(--c-txt-light)); }
.msel-btn:focus-visible, .msel-btn[aria-expanded="true"] { outline: none; border-color: rgb(var(--c-primary));
    box-shadow: 0 0 0 3px rgb(var(--c-primary) / .12); }
.msel-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msel-pre { color: rgb(var(--c-txt-muted)); }
.msel-txt .msel-todas { color: rgb(var(--c-txt-2)); }
.msel-txt [data-msel-txt]:not(.msel-todas) { font-weight: 500; }
.msel-aviso { margin-top: 0.25rem; font-size: 0.75rem; color: rgb(var(--c-danger)); }
.msel-chev { width: 1rem; height: 1rem; flex-shrink: 0; color: rgb(var(--c-txt-muted)); transition: transform .15s; }
.msel-btn[aria-expanded="true"] .msel-chev { transform: rotate(180deg); }

/* Desplegable. */
.msel-pop { position: absolute; z-index: 40; left: 0; top: calc(100% + 4px); width: max(100%, 16rem); max-width: calc(100vw - 2rem);
    padding: 0.25rem; border: 1px solid rgb(var(--c-stroke-strong)); border-radius: 0.625rem; background: rgb(var(--c-card));
    box-shadow: var(--shadow-pop); }
.msel-buscar { width: 100%; height: 2.25rem; margin-bottom: 0.25rem; }
.msel-ops { max-height: min(18rem, 50vh); overflow-y: auto; }
.msel-op { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 2.25rem; padding: 0.375rem 0.5rem;
    border-radius: 0.4375rem; font-size: 0.875rem; color: rgb(var(--c-txt)); text-align: left; cursor: pointer; }
.msel-op:hover { background: rgb(var(--c-muted-bg)); }
.msel-op input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.msel-op:focus-within { outline: 2px solid rgb(var(--c-primary)); outline-offset: -2px; }
.msel-et { min-width: 0; overflow-wrap: anywhere; }
.msel-check { position: relative; width: 1rem; height: 1rem; flex-shrink: 0; border: 1.5px solid rgb(var(--c-txt-light));
    border-radius: 0.25rem; background: rgb(var(--c-card)); }
.msel-op input:checked + .msel-check, .msel-op input:indeterminate + .msel-check {
    border-color: rgb(var(--c-primary)); background: rgb(var(--c-primary)); }
.msel-op input:checked + .msel-check::after {
    content: ''; position: absolute; left: 0.28rem; top: 0.08rem; width: 0.3rem; height: 0.55rem;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.msel-op input:indeterminate + .msel-check::after {
    content: ''; position: absolute; left: 0.17rem; right: 0.17rem; top: calc(50% - 1px); height: 2px; background: #fff; }
.msel-todos { font-weight: 500; border-bottom: 1px solid rgb(var(--c-stroke)); border-radius: 0.4375rem 0.4375rem 0 0;
    margin-bottom: 0.125rem; }
.msel-sep { margin: 0.25rem 0.5rem; border: 0; border-top: 1px solid rgb(var(--c-stroke)); }
.msel-nada { padding: 0.5rem; font-size: 0.8125rem; color: rgb(var(--c-txt-muted)); }

/* Varios textos (core/_filtro_textos.html): píldoras + campo, en una caja que se ve como un input. */
.mtxt-box { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; min-height: 2.5rem; padding: 0.25rem 0.375rem;
    border: 1px solid rgb(var(--c-stroke-strong)); border-radius: 0.5625rem; background: rgb(var(--c-card)); cursor: text; }
.mtxt-box:focus-within { border-color: rgb(var(--c-primary)); box-shadow: 0 0 0 3px rgb(var(--c-primary) / .12); }
.mtxt-box input.mtxt-input { flex: 1; min-width: 6rem; height: 1.875rem; padding: 0 0.25rem; border: 0; box-shadow: none;
    background: transparent; }
.mtxt .msel-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mtxt { position: relative; min-width: 0; }
.msel-pill { display: inline-flex; align-items: center; gap: 0.125rem; max-width: 100%; min-height: 1.75rem;
    padding: 0 0.125rem 0 0.625rem; border: 1px solid rgb(var(--c-stroke-strong)); border-radius: 9999px;
    background: rgb(var(--c-subtle)); font-size: 0.8125rem; font-weight: 500; color: rgb(var(--c-txt)); }
.msel-pill > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.msel-pill button { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
    flex-shrink: 0; border-radius: 9999px; font-size: 1rem; line-height: 1; color: rgb(var(--c-txt-muted)); }
.msel-pill button:hover { background: rgb(var(--c-muted-bg)); color: rgb(var(--c-txt)); }
.msel-pill button:focus-visible { outline: 2px solid rgb(var(--c-primary)); outline-offset: -2px; }