/* Card de filtros de los listados (`<div class="card"><form data-filtros>`).
   - Arranca cerrado: sólo el botón «Filtros» (core/js/filtros_colapsables.js).
   - Abierto, es bajo: «Aplicar filtros» va en la misma fila que los botones de
     opciones en vez de una franja propia, y las filas se separan con el gap.
   `data-filtros-fijo` deja afuera un form que no es el card de filtros (p.ej. el
   período de Movimientos en la ficha del cliente). */
.card:has(> form[data-filtros]:not([data-filtros-fijo])) { padding: 0.5rem 1rem; }
.card > form[data-filtros]:not([data-filtros-fijo]) {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    column-gap: 1.5rem; row-gap: 0.5rem;
    padding: 0.25rem 0 0.5rem;
}
.card > form[data-filtros]:not([data-filtros-fijo]) > * { flex: 1 1 100%; margin-top: 0; }
.card > form[data-filtros]:not([data-filtros-fijo]) > div:has(+ div > button[type="submit"]) { flex: 1 1 auto; }
.card > form[data-filtros]:not([data-filtros-fijo]) > div:has(> button[type="submit"]) {
    flex: 0 0 auto; margin-left: auto;
    padding-top: 0; border-top: 0;
}
.card > form[data-filtros]:not([data-filtros-fijo]) label.block,
.card > form[data-filtros]:not([data-filtros-fijo]) span.block { margin-bottom: 0.125rem; }

/* Cerrado. La clase `filtros-js` la pone el script antes de pintar: sin JS el
   form se ve siempre. */
html.filtros-js .card > form[data-filtros]:not([data-filtros-fijo]):not(.abierto) { display: none; }
.filtros-toggle {
    display: flex; align-items: center; gap: 0.375rem; width: 100%;
    padding: 0.25rem 0; font-size: 0.875rem; font-weight: 500; color: rgb(var(--c-txt-2));
}
.filtros-toggle svg:last-child { margin-left: auto; }
/* Cerrado, el botón ocupa todo el card: se abre tocando en cualquier lado. */
html.filtros-js .card:has(> form[data-filtros]:not([data-filtros-fijo]):not(.abierto)) { padding: 0; }
html.filtros-js .card:has(> form[data-filtros]:not([data-filtros-fijo]):not(.abierto)) > .filtros-toggle {
    padding: 0.75rem 1rem; border-radius: inherit;
}
.filtros-toggle:hover { color: rgb(var(--c-txt)); }
.filtros-toggle .filtros-cuenta {
    min-width: 1.25rem; padding: 0 0.375rem; border-radius: 9999px; text-align: center;
    font-size: 0.75rem; background: rgb(var(--c-primary)); color: #fff;
}
.filtros-toggle svg:last-child { transition: transform .15s; }
.filtros-toggle[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }

/* Totales de un listado en una línea (`<div class="card totales-linea">`): cada
   item es etiqueta + valor uno al lado del otro en vez de apilados. */
.card.totales-linea { padding: 0.625rem 1rem; }
.totales-linea > div { column-gap: 2rem; row-gap: 0.25rem; align-items: baseline; }
.totales-linea > div > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.375rem; }
.totales-linea p { margin-top: 0; font-size: 0.875rem; line-height: 1.25rem; }
.totales-linea > div > div:first-child p { font-size: 1rem; }
.totales-linea br { display: none; }

/* Chips de filtros aplicados (core/_filter_chips.html), como en FACTU. */
.filter-chip {
    display: inline-flex; align-items: center; gap: 0.375rem;
    background: var(--tone-blue-bg); color: var(--tone-blue-fg); border: 1px solid transparent;
    border-radius: 9999px; padding: 0.25rem 0.75rem;
    font-size: 0.75rem; font-weight: 600;
    transition: all .15s; cursor: pointer; text-decoration: none;
}
.filter-chip:hover { border-color: currentColor; }
.filter-chip svg { opacity: 0.7; }
.filter-chip:hover svg { opacity: 1; }