.invoice-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.filter-bar {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.filter-bar .field {
  min-width: 160px;
}

.filter-bar .field label {
  margin-bottom: 2px;
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* .pagination vive en components.css (Bloque 12): genérico, reutilizado
   también por la pantalla de Exportaciones. */

/* EXP-ACC-01: formulario de la pestaña «Exportación contable». */
.accounting-export-form {
  max-width: 44rem;
}

/* AJ-UX-06 (AJ-01.5): la frase inicial no queda pegada a «Sociedades». */
.accounting-export-form > .form-hint:first-child {
  margin-bottom: var(--space-4);
}

/* AJ-UX-08 (AJ-01.5): en una barra de filtros, la etiqueta de un selector
   remoto (Sociedad, Proyecto, Proveedor) a la misma altura que la de un campo
   normal (Buscar, Estado): `.remote-select` separa sus hijos 0,25rem y eso la
   subía unos píxeles. */
.filter-bar .remote-select {
  gap: 0;
}

.filter-bar .remote-select-status {
  margin-top: var(--space-1);
}

/* AJ-UX-08 (AJ-01.5): en los filtros, la «✕» de limpiar va DENTRO del campo,
   a la derecha, y no fuera de su caja, donde quedaba pegada al filtro
   siguiente («Estado»). Se oculta el aspa nativa del input de búsqueda: solo
   borraba el texto, no la selección, y se solaparía con esta. */
.filter-bar .remote-select-box {
  position: relative;
}

.filter-bar .remote-select-box input {
  padding-right: 2rem;
}

.filter-bar .remote-select-box input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.filter-bar .remote-select-clear {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  transform: translateY(-50%);
  text-decoration: none;
}