.mv7-debts-view {
  --debt-surface: color-mix(in srgb, var(--v2-surface) 90%, transparent);
  --debt-line: color-mix(in srgb, var(--v2-line) 78%, transparent);
  display: grid;
  width: min(1320px, 100%);
  grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.78fr) minmax(370px, 0.95fr);
  grid-template-areas:
    'hero hero rail'
    'direction direction rail'
    'summary month rail'
    'tabs tabs rail'
    'heading heading rail'
    'list list rail';
  gap: 14px 18px;
  margin-inline: auto;
  color: var(--v2-text);
}

.mv7-debt-hero {
  grid-area: hero;
  position: relative;
  display: grid;
  min-height: 242px;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 34%);
  align-items: center;
  overflow: hidden;
  padding: 27px 34px;
  border: 1px solid var(--debt-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 78% 38%, rgba(231, 198, 150, 0.17), transparent 35%),
    linear-gradient(135deg, color-mix(in srgb, var(--v2-surface) 96%, transparent), color-mix(in srgb, var(--v2-bg) 78%, transparent));
}

.mv7-debt-hero-copy { position: relative; z-index: 1; }
.mv7-debt-hero-copy > span { color: var(--v2-muted); font-size: 15px; }
.mv7-debt-hero h2 {
  max-width: none;
  margin: 10px 0 12px;
  font-size: clamp(38px, 3.6vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.065em;
}
.mv7-debt-hero p { max-width: 32ch; margin: 0; color: var(--v2-muted); font-size: 18px; line-height: 1.35; }
.mv7-debt-hero img {
  position: absolute;
  right: 3%;
  bottom: -8%;
  width: min(290px, 33%);
  filter: drop-shadow(0 24px 30px rgba(45, 34, 21, 0.16));
  pointer-events: none;
}

.mv7-debt-summary {
  grid-area: summary;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  gap: 16px;
  padding: 21px 24px;
  border: 1px solid var(--debt-line);
  border-radius: 19px;
  background: var(--debt-surface);
}
.mv7-debt-month-icon {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--v2-text) 6%, transparent);
}
.mv7-debt-month-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.6; }
/* Resumen partido Debés/Te deben (2026-09-20) — antes esta tarjeta mostraba
   un solo lado a la vez (el de la pestaña activa); ahora conviven los dos,
   diferenciados por color, sin tab que las separe. */
.mv7-debt-summary-stat { display: grid; gap: 6px; min-width: 0; }
.mv7-debt-summary-stat > span { color: var(--v2-muted); font-size: 13px; }
.mv7-debt-summary-stat > strong {
  overflow: hidden;
  font-size: clamp(18px, 1.9vw, 25px);
  letter-spacing: -0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mv7-debt-summary-stat > small { color: var(--v2-muted); font-size: 12px; }
.mv7-debt-summary-stat.is-owe > strong { color: #e78269; }
.mv7-debt-summary-stat.is-collect > strong { color: #34bd87; }
.mv7-debt-summary-stat > strong.is-long-value { font-size: clamp(17px, 1.8vw, 24px); }
.mv7-debt-summary-stat > strong.is-extra-long-value { font-size: clamp(14px, 1.5vw, 19px); }
.mv7-debt-summary-divider { width: 1px; height: 56px; background: var(--debt-line); }

.mv7-debt-tabs {
  grid-area: tabs;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 4px;
  border: 1px solid var(--debt-line);
  border-radius: 17px;
  background: color-mix(in srgb, var(--debt-surface) 88%, transparent);
}
.mv7-debt-tabs button { display: flex; min-height: 43px; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 14px; background: transparent; color: var(--v2-muted); font: inherit; cursor: pointer; }
.mv7-debt-tabs button.is-active { background: #111827; color: #fff; }
.mv7-debt-tabs svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.mv7-debt-direction-row {
  grid-area: direction;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.mv7-debt-new-mobile { display: none; }

.mv7-debt-list-heading { display: flex; grid-area: heading; align-items: center; justify-content: space-between; gap: 16px; margin: 4px 4px 0; }
.mv7-debt-list-heading h3 { margin: 0; font-size: 28px; letter-spacing: -0.035em; }
.mv7-debt-list-heading select { min-height: 42px; padding: 0 38px 0 16px; border: 1px solid var(--debt-line); border-radius: 15px; background: var(--debt-surface); color: var(--v2-text); }
.mv7-debt-list { display: grid; grid-area: list; gap: 10px; }
.mv7-debts-view[data-debt-current-tab='stats'] .mv7-debt-list-heading,
.mv7-debts-view[data-debt-current-tab='stats'] .mv7-debt-list { display: none; }
.mv7-debt-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 50px minmax(0, 1fr) minmax(220px, 0.78fr) 18px;
  align-items: center;
  gap: 13px;
  padding: 13px 17px;
  border: 1px solid var(--debt-line);
  border-radius: 17px;
  background: var(--debt-surface);
  color: var(--v2-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mv7-debt-row:focus-visible,
.mv7-debt-row-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; background: color-mix(in srgb, var(--v2-text) 7%, transparent); color: var(--v2-muted); }
.mv7-debt-row.is-urgent .mv7-debt-row-icon { background: rgba(255, 82, 91, 0.12); color: #e5434b; }
.mv7-debt-row-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mv7-debt-row-copy,
.mv7-debt-row-numbers { display: grid; min-width: 0; gap: 4px; }
.mv7-debt-row-numbers { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
.mv7-debt-row-numbers strong { grid-column: 1; grid-row: 1; }
.mv7-debt-row-numbers small { grid-column: 1; grid-row: 2; }
.mv7-debt-row-numbers em { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.mv7-debt-row-copy strong,
.mv7-debt-row-numbers strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.mv7-debt-row-copy small,
.mv7-debt-row-numbers small { overflow: hidden; color: var(--v2-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.mv7-debt-row-copy i { display: block; width: min(100%, 420px); height: 7px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--v2-text) 8%, transparent); }
.mv7-debt-row-copy i b { display: block; height: 100%; border-radius: inherit; background: currentColor; }
.mv7-debt-row-numbers em { display: flex; align-items: center; gap: 6px; color: var(--v2-muted); font-size: 13px; font-style: normal; }
.mv7-debt-row-numbers em.is-urgent { color: #f0444c; }
/* Tag de dirección por fila (2026-09-20) — Debo/Me deben ya no tienen tabs
   separados, así que cada fila necesita marcar de qué lado está. */
.mv7-debt-row-tag,
.mv7-debt-upcoming-row .mv7-debt-upcoming-copy small { font-weight: 700; }
.mv7-debt-row.is-owe .mv7-debt-row-tag,
.mv7-debt-upcoming-row.is-owe .mv7-debt-upcoming-copy small { color: #e78269; }
.mv7-debt-row.is-collect .mv7-debt-row-tag,
.mv7-debt-upcoming-row.is-collect .mv7-debt-upcoming-copy small { color: #34bd87; }
.mv7-debt-row-numbers em svg,
.mv7-debt-row-arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mv7-debt-row-arrow { color: var(--v2-muted); }
.mv7-debt-row.is-paid { opacity: 0.68; }
.mv7-debt-row-shell { display: contents; }
.mv7-debt-quick-payment { display: none; }

.mv7-debt-tab-panel {
  grid-area: list;
  padding: 22px;
  border: 1px solid var(--debt-line);
  border-radius: 22px;
  background: var(--debt-surface);
}
.mv7-debt-tab-panel[hidden] { display: none; }
.mv7-debt-tab-panel h3 { margin: 0 0 12px; font-size: 22px; letter-spacing: -0.03em; }
.mv7-debt-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mv7-debt-stats-card { min-width: 0; padding: 18px; border: 1px solid var(--debt-line); border-radius: 16px; }
.mv7-debt-stats-card h4 { margin: 0 0 14px; font-size: 17px; }
.mv7-debt-stats-card.is-owe h4 { color: #e78269; }
.mv7-debt-stats-card.is-collect h4 { color: #34bd87; }
.mv7-debt-stats-card dl { display: grid; gap: 11px; margin: 0; }
.mv7-debt-stats-card dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.mv7-debt-stats-card dt { color: var(--v2-muted); font-size: 13px; }
.mv7-debt-stats-card dd { min-width: 0; margin: 0; font-size: clamp(14px, 1.4vw, 18px); font-weight: 700; overflow-wrap: anywhere; text-align: right; }

.mv7-debt-detail {
  width: min(440px, calc(100vw - 28px));
  max-height: min(650px, calc(100dvh - 40px));
  padding: 28px;
  overflow-y: auto;
  border: 1px solid var(--v2-line);
  border-radius: 24px;
  background: var(--v2-surface);
  color: var(--v2-text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}
.mv7-debt-detail::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(5px); }
.mv7-debt-detail > button { float: right; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--v2-line); border-radius: 50%; background: transparent; color: var(--v2-text); cursor: pointer; }
.mv7-debt-detail > button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; }
.mv7-debt-detail-eyebrow { color: var(--v2-muted); font-size: 11px; letter-spacing: .12em; }
.mv7-debt-detail h2 { margin: 12px 0 4px; font-size: 30px; letter-spacing: -.04em; }
.mv7-debt-detail > p { margin: 0 0 20px; color: var(--v2-muted); }
.mv7-debt-detail dl { margin: 0; }
.mv7-debt-detail dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--v2-line); }
.mv7-debt-detail dt { color: var(--v2-muted); }
.mv7-debt-detail dd { margin: 0; font-weight: 650; text-align: right; }
.mv7-debt-detail > .mv7-debt-calendar-link { float: none; display: inline-flex; width: auto; height: auto; min-height: 38px; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 12px; border-radius: 10px; color: var(--v2-text); font: inherit; font-size: 13px; }
.mv7-debt-detail > .mv7-debt-calendar-link[hidden] { display: none; }
.mv7-debt-detail > .mv7-debt-calendar-link svg { width: 16px; height: 16px; }
.mv7-debt-detail > .mv7-debt-calendar-link:focus-visible { outline: 2px solid #4e9dff; outline-offset: 2px; }

.mv7-debt-payment-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--v2-line);
}
.mv7-debt-payment-form .mv7-field { flex: 1; margin: 0; }
.mv7-debt-payment-form[hidden] { display: none; }
.mv7-debt-payment-history { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--v2-line); }
.mv7-debt-payment-history h3 { margin: 0 0 10px; font-size: 15px; letter-spacing: -.02em; }
.mv7-debt-payment-history > div { display: grid; max-height: 180px; overflow-y: auto; }
.mv7-debt-payment-history-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--v2-line); }
.mv7-debt-payment-history-row:first-child { border-top: 0; }
.mv7-debt-payment-history-row span { display: grid; flex: 1; min-width: 0; gap: 2px; }
.mv7-debt-payment-history-row span strong { font-size: 13px; }
.mv7-debt-payment-history-row small,
.mv7-debt-payment-history-empty { color: var(--v2-muted); font-size: 12px; }
.mv7-debt-payment-history-row > strong { flex: 0 0 auto; min-width: 0; font-size: 14px; overflow-wrap: anywhere; text-align: right; }
.mv7-debt-payment-history-empty { margin: 0; line-height: 1.45; }
/* × para borrar un pago del historial (2026-09-20) — antes era de solo
   lectura, sin forma de corregir un pago cargado por error. */
.mv7-debt-payment-history-remove {
  display: grid;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--v2-muted);
  cursor: pointer;
}
.mv7-debt-payment-history-remove:hover { background: rgba(229, 67, 75, .12); color: #e5434b; }
.mv7-debt-payment-history-remove svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
/* Fila de acciones minimizada (2026-09-20) — antes eran 2 botones grandes
   de texto (Eliminar/Editar) a todo el ancho, compitiendo visualmente con
   "Registrar pago", que es lo que se usa seguido. Ahora son 2 íconos:
   check = marcar como pagado de una, lápiz = despliega Editar/Eliminar. */
.mv7-debt-detail-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
/* .mv7-icon-button (css/v2-legacy-a.css) fija display:grid sin condición —
   sin este override, #debt-detail-mark-paid quedaba visible/clickeable con
   una deuda ya pagada aunque tuviera hidden puesto (bug documentado en
   CLAUDE.md, ya apareció 5+ veces en la migración). */
.mv7-debt-detail-actions .mv7-icon-button[hidden] { display: none; }
.mv7-debt-detail-more { position: relative; }
.mv7-debt-detail-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 140px;
  padding: 6px;
  border: 1px solid var(--v2-line);
  border-radius: 14px;
  background: var(--v2-surface);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
}
.mv7-debt-detail-menu[hidden] { display: none; }
.mv7-debt-detail-menu button {
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--v2-text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.mv7-debt-detail-menu button:hover { background: color-mix(in srgb, var(--v2-text) 7%, transparent); }
.mv7-debt-detail-menu button#debt-detail-delete { color: #e5434b; }

.mv7-debt-empty { display: flex; min-height: 150px; align-items: center; justify-content: center; gap: 14px; border: 1px dashed var(--debt-line); border-radius: 22px; color: var(--v2-muted); }
.mv7-debt-empty > svg { width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: rgba(44, 197, 133, 0.12); color: #21b978; fill: none; stroke: currentColor; }
.mv7-debt-empty span { display: grid; gap: 3px; }
.mv7-debt-empty strong { color: var(--v2-text); }
.mv7-debt-empty-illustration { display: none; }

.mv7-debt-month {
  display: grid;
  grid-area: month;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  padding: 21px 22px;
  border: 1px solid var(--debt-line);
  border-radius: 19px;
  background: var(--debt-surface);
}
.mv7-debt-month-icon { grid-column: 2; grid-row: 1; width: 44px; height: 44px; }
.mv7-debt-month-icon svg { width: 22px; height: 22px; }
.mv7-debt-month p { grid-column: 1; grid-row: 1; }
.mv7-debt-month p { display: grid; gap: 3px; margin: 0; }
.mv7-debt-month p span,
.mv7-debt-month p small { color: var(--v2-muted); }
.mv7-debt-month p strong { font-size: clamp(21px, 2vw, 29px); letter-spacing: -0.035em; white-space: nowrap; }

.mv7-debt-desktop-rail {
  display: block;
  min-width: 0;
  grid-area: rail;
  align-self: start;
  padding: 22px 16px;
  border: 1px solid var(--debt-line);
  border-radius: 20px;
  background: var(--debt-surface);
}
.mv7-debt-desktop-month { display: none; align-items: center; gap: 16px; }
.mv7-debt-desktop-month > span {
  display: grid;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--v2-text) 5%, transparent);
}
.mv7-debt-desktop-month svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mv7-debt-desktop-month p { display: grid; min-width: 0; gap: 3px; margin: 0; }
.mv7-debt-desktop-month small,
.mv7-debt-desktop-month em { color: var(--v2-muted); font-size: 13px; font-style: normal; }
.mv7-debt-desktop-month strong { font-size: clamp(25px, 2.3vw, 34px); letter-spacing: -0.045em; white-space: nowrap; }
.mv7-debt-upcoming { min-height: 0; padding: 0; border: 0; }
.mv7-debt-upcoming h3 { margin: 0 0 15px; padding: 0 4px; font-size: 21px; letter-spacing: -0.035em; }
.mv7-debt-upcoming > div { display: grid; gap: 10px; }
.mv7-debt-upcoming-row {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 42px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 10px;
  padding: 14px 11px;
  border: 1px solid var(--debt-line);
  border-radius: 15px;
  background: var(--debt-surface);
  color: var(--v2-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mv7-debt-upcoming-row:focus-visible { outline: 2px solid #4e9dff; outline-offset: 2px; }
.mv7-debt-upcoming-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--v2-text) 6%, transparent); color: var(--v2-muted); }
.mv7-debt-upcoming-row.is-urgent .mv7-debt-upcoming-icon { background: rgba(255, 82, 91, .1); color: #e5434b; }
.mv7-debt-upcoming-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mv7-debt-upcoming-copy { display: grid; min-width: 0; grid-column: 2; gap: 3px; }
.mv7-debt-upcoming-row::after { content: '›'; grid-column: 3; color: var(--v2-muted); font-size: 24px; line-height: 1; }
.mv7-debt-upcoming-row strong,
.mv7-debt-upcoming-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv7-debt-upcoming-row strong { font-size: 13px; }
.mv7-debt-upcoming-row .mv7-debt-upcoming-amount { font-size: 13px; font-weight: 600; }
.mv7-debt-upcoming-row small { color: var(--v2-muted); font-size: 11px; }
.mv7-debt-upcoming-empty { padding: 30px 0; color: var(--v2-muted); font-size: 13px; text-align: center; }


:root[data-resolved-theme='light'] .mv7-debts-view { --debt-surface: rgba(255, 255, 255, 0.78); }
:root[data-resolved-theme='dark'] .mv7-debt-hero img { filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.38)); }
:root[data-resolved-theme='dark'] .mv7-debt-tabs button.is-active { background: #f5f5f7; color: #111318; }

@media (min-width: 769px) {
  .mv7-debt-desktop-rail.has-debt-panel { padding: 0; }
  .mv7-debt-desktop-rail.has-debt-panel > :not(dialog[open]) { display: none; }
  .mv7-debt-desktop-rail > dialog[open] {
    position: static;
    width: 100%;
    max-width: none;
    max-height: calc(100vh - 40px);
    margin: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    box-shadow: none;
  }
  .mv7-debt-desktop-rail > .mv7-create-dialog[open] { padding: 0; overflow: auto; }
  .mv7-debt-desktop-rail > .mv7-create-dialog[open] > form {
    width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: inherit;
    box-shadow: none;
  }
  :root[data-resolved-theme='dark'] .mv7-debts-view { --debt-surface: #272929; --debt-line: rgba(255, 255, 255, .11); }
  :root[data-resolved-theme='dark'] .mv7-debt-upcoming-row { background: #303232; }
  .mv7-debts-view { width: min(1320px, calc(100% - 36px)); gap: 18px 22px; margin-block: 20px 32px; }
  .mv7-debt-hero { box-sizing: border-box; min-height: 145px; padding: 16px 26px; }
  .mv7-debt-hero h2 { margin-block: 8px 10px; font-size: clamp(34px, 3vw, 42px); }
  .mv7-debt-hero img { width: min(185px, 26%); }
  .mv7-debt-summary,
  .mv7-debt-month { padding: 18px 22px; }
  .mv7-debt-month { padding-block: 13px; }
  .mv7-debt-desktop-rail { padding: 20px 16px; }
  .mv7-debt-upcoming h3 { margin-bottom: 14px; }
  .mv7-debt-upcoming > div { gap: 10px; }
  .mv7-debt-upcoming-row { padding: 12px 11px; }
  .mv7-debt-tabs button { min-height: 42px; }
  .mv7-debt-list-heading { margin: 4px 4px 0; }
  .mv7-debt-list-heading h3 { font-size: 24px; }
  .mv7-debt-list { gap: 10px; }
  .mv7-debt-row { gap: 13px; padding: 12px 16px; }
  :root[data-resolved-theme='light'] .mv7-debt-tabs button.is-active { background: #fff; color: var(--v2-text); box-shadow: 0 3px 12px rgba(17, 24, 39, .1); }
  .mv7-debt-row-numbers em svg { display: none; }
}

@media (min-width: 769px) and (max-width: 1230px) {
  .mv7-debts-view {
    grid-template-columns: minmax(0, 1.4fr) minmax(230px, .8fr);
    grid-template-areas:
      'hero hero'
      'direction direction'
      'summary month'
      'tabs tabs'
      'heading heading'
      'list list'
      'rail .';
  }
  .mv7-debt-desktop-rail { min-height: 0; }
  .mv7-debt-row { grid-template-columns: 50px minmax(0, 1fr) minmax(260px, .75fr) 18px; }
}

@media (min-width: 1231px) and (max-width: 1350px) {
  .mv7-debt-month { grid-template-columns: minmax(0, 1fr) 32px; padding-inline: 16px; }
  .mv7-debt-month-icon { width: 32px; height: 32px; }
  .mv7-debt-month-icon svg { width: 18px; height: 18px; }
  .mv7-debt-month p strong { font-size: 21px; }
}

@media (max-width: 768px) {
  body[data-v2-view='debts'] .mv7-debt-month { display: none; }
  body[data-v2-view='debts'] .mv7-workspace { background: var(--v2-bg); }
  .mv7-debts-view {
    width: min(520px, 100%);
    grid-template-columns: 1fr;
    grid-template-areas: 'hero' 'direction' 'summary' 'tabs' 'heading' 'list' 'month';
    box-sizing: border-box;
    gap: 8px;
    padding-inline: 16px;
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }
  .mv7-debt-desktop-rail { display: none; }
  .mv7-debt-month { display: grid; }
  .mv7-debts-view[data-debt-current-tab='stats'] .mv7-debt-month { display: none; }
  .mv7-debt-hero { min-height: 110px; grid-template-columns: minmax(0, 1fr) 20%; align-items: center; padding: 10px 2px; border: 0; border-radius: 0; margin: 0; background: transparent; }
  .mv7-debt-hero-copy > span { font-size: 12px; }
  .mv7-debt-hero h2 { max-width: none; margin: 7px 0; font-size: clamp(23px, 6.4vw, 27px); line-height: 1.05; letter-spacing: -.06em; white-space: nowrap; }
  .mv7-debt-hero p { max-width: none; font-size: 11.5px; white-space: nowrap; }
  .mv7-debt-hero img { right: 1%; bottom: 0; width: min(18vw, 75px); }
  .mv7-debt-summary { gap: 10px; padding: 12px; border-radius: 20px; box-shadow: 0 10px 26px rgba(21, 32, 50, .045); }
  .mv7-debt-summary-stat > span { font-size: 11px; }
  .mv7-debt-summary-stat > strong { font-size: clamp(15px, 5vw, 20px); }
  .mv7-debt-summary-stat > strong.is-long-value { font-size: clamp(12px, 3.6vw, 15px); }
  .mv7-debt-summary-stat > strong.is-extra-long-value { font-size: clamp(10px, 3vw, 12px); }
  .mv7-debt-summary-stat > small { font-size: 10px; }
  .mv7-debt-summary-divider { height: 40px; }
  .mv7-debt-tabs { padding: 3px; border-radius: 22px; box-shadow: 0 8px 20px rgba(21, 32, 50, .035); }
  .mv7-debt-tabs button { min-height: 40px; gap: 7px; border-radius: 19px; font-size: 12px; }
  .mv7-debt-tabs svg { width: 17px; height: 17px; }
  .mv7-debt-new-desktop { display: none; }
  body[data-v2-view='debts'] #debt-new-mobile {
    display: inline-grid;
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(40, 193, 119, .5);
    border-radius: 16px;
    background: linear-gradient(145deg, #15945f, #087843);
    box-shadow: 0 9px 22px rgba(8, 120, 67, .2);
    color: #fff;
    backdrop-filter: none;
  }
  body[data-v2-view='debts'] #debt-new-mobile:hover { background: linear-gradient(145deg, #18a66b, #087843); }
  .mv7-debt-new-mobile svg { width: 21px; height: 21px; }
  .mv7-debt-new-mobile span { display: none; }
  .mv7-debt-list-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px 46px;
    gap: 7px;
    margin: 5px 0 1px;
  }
  .mv7-debt-list-heading h3 { font-size: clamp(15px, 4.25vw, 17px); letter-spacing: -.06em; white-space: nowrap; }
  .mv7-debt-list-heading select { width: 100px; min-height: 44px; padding: 0 27px 0 12px; border-radius: 17px; font-size: 12px; font-weight: 650; }
  .mv7-debt-list { gap: 8px; }
  .mv7-debt-row-shell { display: grid; overflow: hidden; border: 1px solid var(--debt-line); border-radius: 17px; background: var(--debt-surface); box-shadow: 0 8px 22px rgba(21, 32, 50, .04); }
  .mv7-debt-row { grid-template-columns: 40px minmax(0, 1fr) minmax(98px, .78fr) 14px; gap: 8px; min-height: 68px; padding: 10px 10px; border: 0; border-radius: 0; box-shadow: none; }
  .mv7-debt-row-icon { width: 40px; height: 40px; border-radius: 13px; }
  .mv7-debt-row-icon svg { width: 22px; height: 22px; }
  .mv7-debt-row-copy { gap: 3px; }
  .mv7-debt-row-copy strong { font-size: 11px; }
  .mv7-debt-row-numbers strong { font-size: 13px; }
  .mv7-debt-row-copy small, .mv7-debt-row-numbers small { font-size: 10px; }
  .mv7-debt-row-numbers { grid-column: 3; grid-row: 1; grid-template-columns: 1fr; gap: 3px; }
  .mv7-debt-row-numbers > * { grid-column: 1; grid-row: auto; }
  .mv7-debt-row-numbers em { grid-column: 1; grid-row: auto; gap: 3px; font-size: 10px; white-space: nowrap; }
  .mv7-debt-row-numbers em.is-status { justify-self: start; width: fit-content; padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--v2-text) 7%, transparent); font-weight: 700; }
  .mv7-debt-row-numbers em.is-overdue { background: rgba(229, 67, 75, .12); color: #d63843; }
  .mv7-debt-row-numbers em.is-today { background: rgba(230, 146, 38, .14); color: #a75d00; }
  .mv7-debt-row-numbers em.is-upcoming { background: rgba(49, 128, 237, .12); color: #2869bd; }
  .mv7-debt-row-numbers em.is-undated { color: var(--v2-muted); }
  .mv7-debt-row-numbers em.is-paid { background: rgba(32, 179, 119, .12); color: #118457; }
  .mv7-debt-row-numbers em svg { width: 12px; height: 12px; }
  .mv7-debt-row-arrow { grid-column: 4; grid-row: 1; }
  .mv7-debt-row-copy i { width: 100%; height: 6px; margin-top: 3px; }
  .mv7-debt-quick-payment { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 6px; margin: 0 9px 9px; border: 0; border-radius: 12px; background: rgba(30, 170, 112, .11); color: #087843; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
  .mv7-debt-quick-payment[hidden] { display: none; }
  .mv7-debt-quick-payment svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
  .mv7-debt-empty.is-control { min-height: 126px; border: 0; background: transparent; }
  .mv7-debt-empty.is-control > .mv7-debt-empty-simple-icon { display: none; }
  .mv7-debt-empty.is-control > span { display: none; }
  .mv7-debt-empty.is-control .mv7-debt-empty-illustration { position: relative; display: grid; width: 116px; height: 96px; place-items: center; }
  .mv7-debt-empty-wallet { position: relative; z-index: 2; display: grid !important; width: 82px; height: 68px; place-items: center; border: 1px solid rgba(255, 255, 255, .78); border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(220,246,235,.82)); box-shadow: inset 0 1px rgba(255,255,255,.95), 0 18px 38px -22px rgba(10,112,70,.55); color: #087843; transform: rotate(-4deg); }
  .mv7-debt-empty-wallet::after { position: absolute; right: 9px; width: 25px; height: 20px; border: 1px solid rgba(8,120,67,.16); border-radius: 8px; background: rgba(255,255,255,.66); content: ''; }
  .mv7-debt-empty-wallet > svg { width: 38px; height: 38px; margin-left: -17px; fill: none; stroke: currentColor; stroke-width: 1.55; }
  .mv7-debt-empty-badge { position: absolute; z-index: 3; right: 7px; bottom: 6px; display: grid !important; width: 36px; height: 36px; place-items: center; border: 4px solid var(--v2-bg); border-radius: 50%; background: linear-gradient(145deg, #28c985, #078552); box-shadow: 0 9px 20px -10px rgba(7,133,82,.8); color: #fff; }
  .mv7-debt-empty-badge svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; }
  .mv7-debt-empty-illustration > i { position: absolute; display: block; border-radius: 50%; }
  .mv7-debt-empty-illustration .is-sparkle { top: 5px; right: 8px; width: 15px; height: 15px; border-radius: 0; background: #45d39a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
  .mv7-debt-empty-illustration .is-dot-one { left: 5px; bottom: 23px; width: 8px; height: 8px; background: rgba(48,128,237,.55); }
  .mv7-debt-empty-illustration .is-dot-two { top: 17px; left: 13px; width: 5px; height: 5px; background: rgba(239,166,54,.72); }
  :root[data-resolved-theme='dark'] .mv7-debt-empty-wallet { border-color: rgba(255,255,255,.11); background: linear-gradient(145deg, #272b29, #16251f); color: #49d49b; }
  .mv7-debt-month { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 18px 14px; border-radius: 21px; box-shadow: 0 10px 26px rgba(21, 32, 50, .045); }
  .mv7-debt-month-icon { grid-column: 1; grid-row: 1; width: 42px; height: 42px; }
  .mv7-debt-month p { grid-column: 2; grid-row: 1; }
  .mv7-debt-month-icon svg { width: 21px; height: 21px; }
  .mv7-debt-month p { gap: 2px; }
  .mv7-debt-month p span, .mv7-debt-month p small { font-size: 10px; }
  .mv7-debt-month p strong { font-size: 18px; white-space: nowrap; }
  .mv7-debt-stats-grid { grid-template-columns: 1fr; }
  .mv7-debt-tab-panel { padding: 18px; }
  :root[data-resolved-theme='dark'] .mv7-debt-summary,
  :root[data-resolved-theme='dark'] .mv7-debt-tabs,
  :root[data-resolved-theme='dark'] .mv7-debt-row-shell,
  :root[data-resolved-theme='dark'] .mv7-debt-row,
  :root[data-resolved-theme='dark'] .mv7-debt-month { box-shadow: none; }
}

@media (max-width: 390px) {
  .mv7-debt-month p strong.is-long-value { font-size: clamp(11px, 3.5vw, 14px); }
  .mv7-debt-month p strong.is-extra-long-value { font-size: clamp(10px, 3vw, 12px); }
  .mv7-debt-tabs button { gap: 4px; font-size: 11px; }
  .mv7-debt-tabs svg { width: 15px; height: 15px; }
  .mv7-debt-list-heading { grid-template-columns: minmax(0, 1fr) 94px 43px; gap: 6px; }
  .mv7-debt-list-heading h3 { font-size: clamp(13px, 4vw, 15px); }
  .mv7-debt-list-heading select { width: 94px; min-height: 42px; padding-inline: 10px 25px; }
  body[data-v2-view='debts'] #debt-new-mobile { width: 43px; height: 43px; min-width: 43px; min-height: 43px; border-radius: 15px; }
  .mv7-debt-row { grid-template-columns: 38px minmax(0, 1fr) minmax(90px, .8fr) 12px; gap: 7px; padding: 11px 8px; }
  .mv7-debt-row-icon { width: 38px; height: 38px; }
  .mv7-debt-row-copy strong, .mv7-debt-row-numbers strong { font-size: 11px; }
  .mv7-debt-row-copy small, .mv7-debt-row-numbers small, .mv7-debt-row-numbers em { font-size: 9px; }
  .mv7-debt-month { grid-template-columns: 36px minmax(0, 1fr); padding: 16px 10px; }
  .mv7-debt-month-icon { width: 36px; height: 36px; }
  .mv7-debt-month p strong { font-size: 16px; }
  .mv7-debt-row.has-long-amount { grid-template-columns: 38px minmax(0, 1fr) 12px; grid-template-rows: auto auto; }
  .mv7-debt-row.has-long-amount .mv7-debt-row-icon { grid-column: 1; grid-row: 1 / 3; }
  .mv7-debt-row.has-long-amount .mv7-debt-row-copy { grid-column: 2; grid-row: 1; }
  .mv7-debt-row.has-long-amount .mv7-debt-row-numbers { grid-column: 2; grid-row: 2; }
  .mv7-debt-row.has-long-amount .mv7-debt-row-numbers strong { overflow: visible; font-size: 12px; text-overflow: clip; white-space: normal; }
  .mv7-debt-row.has-long-amount .mv7-debt-row-arrow { grid-column: 3; grid-row: 1 / 3; }
}

/* Deudas mantiene la cabecera de Zenit en móvil, sin cambiar otras vistas. */
@media (max-width: 768px) {
  body[data-v2-view='debts'] .mv7-topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; background: var(--v2-bg); box-shadow: none; }
  body[data-v2-view='debts'] .mv7-page-identity { display: none !important; }
  body[data-v2-view='debts'] .mv7-mobile-topbar-start,
  body[data-v2-view='debts'] .mv7-mobile-brand { display: flex !important; align-items: center; min-width: 0; }
  body[data-v2-view='debts'] .mv7-mobile-topbar-start { gap: 9px; }
  body[data-v2-view='debts'] .mv7-mobile-brand-mark,
  body[data-v2-view='debts'] .mv7-mobile-brand-subtitle { display: none; }
  body[data-v2-view='debts'] .mv7-mobile-brand strong { color: var(--v2-text); font-size: 17px; font-weight: 700; letter-spacing: -.04em; }
  body[data-v2-view='debts'] .mv7-menu-button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; border: 1px solid var(--v2-line); border-radius: 50%; background: var(--v2-surface); color: var(--v2-text); box-shadow: none; }
  body[data-v2-view='debts'] .mv7-topbar-actions { display: flex; width: max-content; min-width: 0; align-items: center; justify-self: end; gap: 3px; padding: 3px; border: 1px solid var(--v2-line); border-radius: 999px; background: var(--v2-surface); box-shadow: none; }
  body[data-v2-view='debts'] .mv7-topbar-actions :is(#privacy-toggle, #notification-bell),
  body[data-v2-view='debts'] #profile-button { display: grid !important; width: 35px; min-width: 35px; height: 35px; min-height: 35px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--v2-text); box-shadow: none; }
  body[data-v2-view='debts'] #profile-button { background: color-mix(in srgb, var(--v2-text) 5%, var(--v2-surface)); }
  body[data-v2-view='debts'] #topbar-login-button:not([hidden]) { display: inline-flex !important; min-width: 0; min-height: 35px; padding: 0 9px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--v2-text) 7%, transparent); color: var(--v2-text); box-shadow: none; font-size: 10px; }
}