/* Filtro de etiquetas del listado (clientes/widgets/_etiquetas_filtro.html). Colores de theme.css. */
.et-filtro { position: relative; }
.et-box { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; min-height: 2.5rem; padding: 0.25rem 0.5rem;
    border: 1px solid rgb(var(--c-stroke-strong)); border-radius: 0.5625rem; background: rgb(var(--c-card)); cursor: text; }
.et-box:focus-within { border-color: rgb(var(--c-primary)); box-shadow: 0 0 0 3px rgb(var(--c-primary) / .12); }
.et-chip { display: inline-flex; align-items: center; gap: 0.125rem; padding: 0.125rem 0.25rem 0.125rem 0.5rem;
    border-radius: 9999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.et-chip.et-sin { background: rgb(var(--c-muted-bg)); color: rgb(var(--c-txt)); }
.et-chip button { width: 1.125rem; height: 1.125rem; border-radius: 9999px; line-height: 1; color: inherit; opacity: .75; }
.et-chip button:hover { opacity: 1; background: rgb(0 0 0 / .12); }
.et-box input.et-buscar { flex: 1; min-width: 5rem; height: 1.875rem; padding: 0 0.25rem; border: 0; box-shadow: none;
    background: transparent; }
.et-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: 16rem; overflow-y: auto;
    padding: 0.25rem; background: rgb(var(--c-card)); border: 1px solid rgb(var(--c-stroke)); border-radius: 0.75rem;
    box-shadow: var(--shadow-pop); }
.et-menu[hidden] { display: none; }
.et-op { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.375rem 0.5rem; border-radius: 0.5rem;
    font-size: 0.875rem; text-align: left; color: rgb(var(--c-txt-2)); }
.et-op:hover, .et-op.activa { background: rgb(var(--c-muted-bg)); color: rgb(var(--c-txt)); }
.et-op[hidden] { display: none; }
.et-dot { width: 0.625rem; height: 0.625rem; border-radius: 9999px; flex-shrink: 0; }
.et-dot-vacio { border: 1.5px dashed rgb(var(--c-txt-light)); }
.et-grupo { padding: 0.375rem 0.5rem 0.125rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: rgb(var(--c-txt-muted)); }
.et-grupo[hidden] { display: none; }
.et-chip-rol { margin-right: 0.25rem; padding-right: 0.25rem; border-right: 1px solid currentColor; font-weight: 500; opacity: .8; }
.et-nada { padding: 0.375rem 0.5rem; font-size: 0.8125rem; color: rgb(var(--c-txt-muted)); }
/* Cabecera: la etiqueta y, con 2 o más elegidas, «Alguna (O) | Todas (Y)» compacto (misma
   altura que una etiqueta común, así la fila de filtros no se mueve). */
.et-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; height: 1rem;
    margin-bottom: 0.25rem; }
.et-modo { min-height: 0; padding: 1px; gap: 1px; border-radius: 0.375rem; }
.et-modo[hidden] { display: none; }
.et-modo span { min-height: 1.125rem; padding: 0 0.4rem; border-radius: 0.3rem; font-size: 0.6875rem; }

/* Para elegir (tag `elegir_etiquetas`): crear una nueva con lo tipeado. */
.et-op-crear { color: rgb(var(--c-primary)); font-weight: 500; }
.et-chip-nueva { border: 1px dashed rgb(var(--c-primary)); background: rgb(var(--c-primary) / .08); color: rgb(var(--c-txt)); }
.et-chip-nueva small { font-size: 0.6875rem; opacity: .7; }
/* Título con la «i» de las elegidas (su tooltip lo arma clientes/js/etiquetas_filtro.js). */
.et-titulo { display: inline-flex; align-items: center; gap: 0.25rem; }
.et-info { display: inline-flex; color: rgb(var(--c-txt-muted)); cursor: help; border-radius: 9999px; }
.et-info[hidden] { display: none; }
.et-info:hover, .et-info:focus-visible { color: rgb(var(--c-primary)); outline: none; }
.et-info svg { width: 0.8125rem; height: 0.8125rem; }