/* Movimientos (js/views/movements.js, movement-form.js). */

/* UX Movimientos: month arrows big enough for a thumb, search on its own line and the
   two filters side by side on a phone, errors inside the movement dialog, "Eliminar"
   apart from "Guardar", and a readable history of changes. */
.movements-view .month-nav .btn { min-width: 44px; min-height: 44px; }
.movements-view .mv-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.movements-view .mv-filters input[type="search"] { grid-column: 1 / -1; }
.movements-view .mv-filters select { text-overflow: ellipsis; }
@media (min-width: 720px) {
  .movements-view .mv-filters { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
  .movements-view .mv-filters input[type="search"] { grid-column: auto; }
}
.movements-view .empty .row { justify-content: center; }
.movements-view .mv-all-months { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 44px; }
.movements-view .month-nav.is-off { opacity: .5; }
.movements-view .day:first-child { margin-top: 0; }
.movements-view .item.clickable:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; border-radius: 12px; }
.mv-history .history-entry { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
.mv-history .history-entry ul { margin: 0; padding-left: 18px; color: var(--muted); }

/* UX Movimientos: each day says what it added to the consumption on the right,
   "Revisar categorías" stays quiet next to "Anotar" unless something is pending, and
   the pending count reads as a soft pill. */
.movements-view .mv-day { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.movements-view .mv-day-total { text-transform: none; letter-spacing: 0; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.movements-view .view-head .btn { min-height: 44px; }
.movements-view .view-head .btn.ghost.mv-pending { background: var(--accent-soft); color: var(--accent); }

/* UX Movimientos: on a phone the account and type filters fold behind "Filtros" (next
   to the search) so the list starts higher; the button stands out when one of them is
   set. From 720px both filters stay in the row, as before, and the button is hidden. */
.movements-view .mv-more-toggle { white-space: nowrap; }
.movements-view .mv-more-toggle.is-set { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
@media (max-width: 719.98px) {
  .movements-view .mv-filters { grid-template-columns: minmax(0, 1fr) auto; }
  .movements-view .mv-filters input[type="search"] { grid-column: auto; }
  .movements-view .mv-more { grid-column: 1 / -1; display: none; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .movements-view .mv-more.is-open { display: grid; }
}
@media (min-width: 720px) {
  .movements-view .mv-more-toggle { display: none; }
  .movements-view .mv-more { display: contents; }
}

/* Phones: the list card hugs the screen edges, the details under each movement keep to
   two lines and the day headers sit closer to their rows. */
@media (max-width: 520px) {
  .movements-view .card { padding: 12px; }
  .movements-view .item .meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
  .movements-view .day { margin-top: 6px; }
  .movements-view .month-nav strong { min-width: 0; }
}

/* Filtros: five selects (cuenta, tipo, persona, categoría, moneda). On a phone they fold
   behind "Filtros" and what is set shows as chips, each removable on its own; from 720px
   the selects wrap three per row next to the search and the chips are not needed. */
.movements-view .mv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.movements-view .mv-chips .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 8px 4px 12px; border: 0; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font: inherit; font-size: .85rem; font-weight: 650; cursor: pointer; max-width: 100%; }
.movements-view .mv-chips .chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.movements-view .mv-chips .chip svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 719.98px) { .movements-view .mv-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .movements-view .mv-chips { display: none; } }

/* UX Movimientos: editing a movement, "Guardar cambios" closes the row of actions and
   takes the full width on a phone, with "Pasar a cuotas" and "Ver cambios" side by side
   above it; "Eliminar" sits apart, on its own line under a rule, in red and quiet. */
.movement-form .mv-danger-row { display: flex; padding-top: 12px; border-top: 1px solid var(--line); }
.movement-form .mv-danger-row .btn { padding-inline: 10px; }
@media (max-width: 520px) {
  .movement-form .mv-edit-actions > .btn { flex: 1 1 0; min-width: 0; }
  .movement-form .mv-edit-actions > .btn.primary { flex-basis: 100%; }
}
/* UX Movimientos: every control of the list reaches a 40px touch target on a phone (the
   filter chips, "Limpiar filtros" and the empty-state buttons were 34-36px), "Filtros"
   carries a funnel next to its text, and "Guardar y anotar otro" confirms at the top
   of the dialog. */
.movements-view .mv-chips .chip { min-height: 40px; }
.movements-view .row.between > .btn.small, .movements-view .empty .btn.small { min-height: 40px; }
.movements-view .mv-more-toggle { gap: 6px; padding-inline: 12px; }
.movement-form .mv-saved { margin: 0; overflow-wrap: anywhere; }
/* UX Movimientos: a search with no results offers "Buscar en todos los meses" next to
   "Borrar la búsqueda" (both 40px, wrapping centered on a phone), and the history heading
   takes the focus when "Ver cambios" opens it, without drawing a ring after a tap. */
.mv-history .mv-history-title { margin: 0; }
.mv-history .mv-history-title:focus:not(:focus-visible) { outline: none; }