/**
 * #4835 - Fila de labels con los criterios que quedan ocultos al comprimir un filtro.
 *
 * La pinta HpcFilterSummary (hpc-filter-summary.js) y se retira del DOM cuando no
 * hay criterios ocultos, asi que aqui no hace falta ningun estado «vacio»: si el
 * contenedor no existe, no ocupa alto.
 *
 * Colores: tokens --ui-* de hpc-ui.css (interfaz moderna, dia y noche) con respaldo
 * neutro para el tema clasico. Ningun color de marca: el resumen es informativo, no
 * una accion, y no compite con los botones del filtro.
 */
.hpc-filter-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 0 0 6px 0;
    padding: 0;
    line-height: 1.2;
}

/* El dibujo del issue pide una separacion pequena: el salto de linea, no una fila
   vacia de gran altura. */
.hpc-filter-summary:empty {
    display: none;
}

/* Especificidad deliberada (0,3,0): esta hoja se enlaza ANTES de hpc-ui.css y su
   `.label-default` (0,1,0) pinta el fondo con --ui-muted; sin ganarle, el texto
   oscuro quedaria sobre gris pizarra (1,6:1). No se usa !important. */
.hpc-filter-summary .label.hpc-filter-summary-label {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding: 2px 8px;
    border: 1px solid var(--ui-border, #e2e8f0);
    border-radius: 10px;
    background-color: var(--ui-surface-2, #f1f5f9);
    color: var(--ui-text-2, #475569);
    font-size: 12px;
    font-weight: normal;
    line-height: 18px;
    text-align: left;
    /* Los valores largos se leen enteros: salto de linea, nunca corte silencioso. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-wrap: break-word;
    word-break: break-word;
}

.hpc-filter-summary-name {
    color: var(--ui-text-2, #475569);
}

.hpc-filter-summary-value {
    color: var(--ui-text, #1e293b);
    font-weight: 600;
}

/* Tema noche: mismas piezas, contraste AA sobre el fondo oscuro. Misma
   especificidad que la regla de dia para ganar tambien a hpc-ui.css. */
body.theme-mode-night .hpc-filter-summary .label.hpc-filter-summary-label {
    border-color: #26324a;
    background-color: #111a2e;
    color: #cbd5e1;
}

body.theme-mode-night .hpc-filter-summary-name {
    color: #94a3b8;
}

body.theme-mode-night .hpc-filter-summary-value {
    color: #e2e8f0;
}