/* Ahorra — superficie web (sección #t2 del handoff, pensada a 1280×830).
   Todo vive detrás de la media query: por debajo de 1000px manda el móvil.
   Los tokens, tarjetas, chips, switches, avatares y hojas se reusan tal cual;
   acá sólo va el shell y lo que cambia de escala. */

@media (min-width: 1000px) {

  /* La pantalla deja de scrollear: el que scrollea es el main. */
  #screen { overflow: hidden; }

  .shell {
    display: flex;
    height: 100%;
    min-height: 0;
  }

  /* --------------------------------------------------- barra de íconos --- */

  /* Reemplaza a la barra lateral de 236px: solo íconos, 76px. La meta ya no
     vive acá sino en el Resumen, y los nombres van en aria-label y title. */
  .barra {
    width: 76px;
    flex: none;
    background: var(--bg);
    border-right: 1px solid var(--line);
    padding: var(--space-6) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    overflow-y: auto;
  }
  .barra__logo {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--radius-round);
    background: var(--accent);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    /* Es el logo, no texto: no sigue la escala de letra. */
    font-size: 26px;
    margin-bottom: var(--space-6);
  }
  .barra__item {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: var(--radius-md);
    border: 0;
    background: none;
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
  }
  .barra__item:hover { color: var(--text); }
  .barra__item.is-active { background: var(--surface-2); color: var(--text); }
  .barra__pie { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
  .barra__avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-round);
    border: 0;
    background: #8A5A3B;
    color: var(--on-cuenta);
    font-family: var(--sans);
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
  }

  /* --------------------------------------------------------------- main --- */

  .main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: var(--space-8) var(--space-12);
    background: var(--bg);
  }

  .desk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
  }
  /* El mes tampoco se parte: "AGOSTO 2026" en dos renglones se lee como
     dos datos distintos. */
  .desk-head .overline { white-space: nowrap; }

  .desk-title {
    font-family: var(--serif);
    font-size: var(--fs-3xl);
    line-height: 1.1;
    margin: var(--space-1) 0 0;
    font-weight: 400;
    /* Nunca en dos renglones: la barra de registro cede antes que él. */
    white-space: nowrap;
  }
  /* El selector de mes (cabeceraMes): una píldora con borde y sin relleno,
     con ‹ y › redondos de 36 y el mes en serif 30 en el medio. El nombre
     tiene el ancho de "Septiembre" (el molde, invisible, en la misma celda),
     así las flechas no saltan al cambiar de mes. */
  .mes-cabeza { display: flex; align-items: flex-end; gap: var(--space-4); flex: none; }
  .mes-cabeza .overline { margin-bottom: var(--space-2); }
  .mes-pildora {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
  }
  .mes-pildora__btn {
    width: 36px;
    height: 36px;
    flex: none;
    border: 0;
    border-radius: var(--radius-round);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
  }
  .mes-pildora__btn:hover { background: var(--line-strong); }
  .mes-pildora__btn[aria-disabled="true"] { background: transparent; color: var(--text-4); cursor: default; }
  .mes-pildora__nombre {
    display: grid;
    margin: 0 16px;
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }
  .mes-pildora__nombre > span { grid-area: 1 / 1; }
  .mes-pildora__molde { visibility: hidden; }

  /* Mirando un mes pasado: una línea a todo el ancho, sin tarjeta, pegada a
     la fila de arriba. */
  .mes-aviso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: calc(-1 * var(--space-4)) 0 var(--space-8);
    padding: 10px 16px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    font-size: 14px;
    color: var(--text-2);
  }
  .mes-aviso strong { color: var(--text); font-weight: 700; }
  .mes-aviso__volver {
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-text);
    cursor: pointer;
  }
  .mes-aviso__volver:hover { text-decoration: underline; }

  /* ------------------------------------------------- registro rápido --- */

  /* Una píldora: $ Monto | Nota · Hoy ▾ · categorías · Registrar ↵. */
  .quick {
    flex: 1;
    height: 52px;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--surface);
    border-radius: var(--radius-pill);
    padding: 0 var(--space-2) 0 var(--space-6);
    min-width: 0;
    position: relative;
  }
  .quick__sign { font-size: var(--fs-md); color: var(--text-3); margin-right: calc(var(--space-3) * -1); }
  .quick__amt, .quick__note {
    border: 0;
    outline: none;
    background: transparent;
    font-family: var(--sans);
    font-size: var(--fs-md);
    color: var(--text);
    min-width: 0;
    user-select: text;
    -webkit-user-select: text;
  }
  .quick__amt { width: 90px; flex: none; }
  .quick__note { flex: 1; min-width: 90px; }
  .quick__amt::placeholder,
  .quick__note::placeholder { color: var(--text-3); }

  .quick__div { width: 1px; height: 24px; flex: none; background: var(--line-strong); }

  /* Las categorías que entren; las que no, en el menú de "Más ▾". Sin
     desvanecido: el último chip dice que hay más. */
  .quick__chips {
    display: flex;
    gap: var(--space-2);
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .quick__chips .chip,
  .quick__dia {
    height: 32px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }
  .quick__chips .chip.is-on { font-weight: 700; }
  .quick__chips .chip[hidden] { display: none; }
  /* "Más" con el nombre de la elegida: se acorta con "…" antes que cortarse.
     Diciendo "Más" no se achica: con eso se mide cuántos chips entran. */
  .quick__chips .quick__mas { flex: none; }
  .quick__chips .quick__mas.is-on { flex: 0 1 auto; min-width: 0; max-width: 100%; }
  .quick__mas-nombre { display: inline-block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .quick__menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: var(--space-12);
    z-index: 5;
    min-width: 180px;
    padding: var(--space-2);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .quick__menu[hidden] { display: none; }
  .quick__opcion {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--fs-sm);
    text-align: left;
    cursor: pointer;
  }
  .quick__opcion:hover { background: var(--surface-2); }
  .quick__punto { width: 8px; height: 8px; flex: none; border-radius: var(--radius-round); }

  .quick__save {
    height: 40px;
    flex: none;
    padding: 0 var(--space-5);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--sans);
    font-size: var(--fs-md);
    font-weight: 700;
    cursor: pointer;
    transition: transform 120ms ease;
  }
  .quick__save:active { transform: scale(.98); }

  /* -------------------------------------------------------------- grids --- */

  .desk-stack { display: flex; flex-direction: column; gap: var(--space-4); }
  .desk-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
  .desk-grid { display: grid; gap: var(--space-4); align-items: start; }

  .desk-grid--budget { grid-template-columns: 1.15fr 1fr; }
  .desk-grid--accounts { grid-template-columns: 1fr 1fr; }

  .desk-grid--budget .desk-col { gap: var(--space-4); }
  .desk-grid--accounts .desk-col { gap: var(--space-4); }


  .ring--lg { width: 132px; height: 132px; }
  .ring--lg .ring__hole { inset: 15px; }
  .ring--lg .ring__pct { font-size: var(--fs-3xl); }



  .desk-bar {
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    overflow: hidden;
    margin-top: var(--space-4);
  }
  .desk-bar > div {
    height: 100%;
    border-radius: var(--radius-sm);
    background: var(--accent);
    transition: width 400ms ease-out;
  }


  /* --------------------------------------------------- listas de web --- */

  .desk-list { border-radius: 0; padding: 0; overflow: hidden; }
  .desk-list__head {
    padding: 0 0 var(--space-3);
    font-family: var(--serif);
    font-size: var(--fs-xl);
  }
  .desk-list__head--flush { padding: 0 0 var(--space-1); }
  .desk-list__foot { padding: var(--space-4) 0 var(--space-5); border-top: 1px solid var(--line); }

  .desk-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--line);
  }
  .desk-row__main { flex: 1; min-width: 0; }
  .desk-row__title {
    font-size: var(--fs-md);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .desk-row__sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: 1px; }
  .desk-row__amt { font-size: var(--fs-md); font-weight: 700; flex: none; }
  .desk-row--foot {
    font-size: var(--fs-sm);
    color: var(--text-2);
    justify-content: space-between;
    padding: var(--space-4) 0;
  }
  .desk-row--foot b { color: var(--text); font-weight: 700; }

  .desk-cat { display: flex; flex-direction: column; gap: var(--space-2); border-radius: var(--radius-md); }


  /* ----------------------------------------------------- presupuesto --- */

  .desk-hero {
    border-radius: 0;
    padding: var(--space-6) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .desk-hero__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: var(--fs-sm);
    color: var(--text-2);
  }
  .desk-hero__head span:first-child { font-weight: 500; }
  .desk-hero__amount {
    font-family: var(--serif);
    font-size: var(--fs-3xl);
    letter-spacing: -1px;
    line-height: 1.05;
  }
  .desk-hero__amount span {
    font-size: var(--fs-md);
    font-family: var(--sans);
    color: var(--text-2);
    font-weight: 500;
  }
  .desk-hero__bar {
    height: 13px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    overflow: hidden;
  }
  .desk-hero__bar > div {
    height: 100%;
    border-radius: var(--radius-sm);
    background: var(--text);
    transition: width 400ms ease-out;
  }

  .desk-catcard {
    border-radius: 0;
    padding: var(--space-4) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-bottom: 1px solid var(--line);
  }
  .desk-catcard__head { display: flex; align-items: center; gap: var(--space-3); }
  .desk-catcard__name { flex: 1; font-size: var(--fs-md); font-weight: 500; }
  .desk-catcard__spent { font-size: var(--fs-sm); font-weight: 700; }
  .desk-catcard__limit { font-size: var(--fs-sm); color: var(--text-3); }
  .desk-catcard__hint { font-size: var(--fs-sm); }
  .desk-catcard .desk-bar { height: 9px; margin-top: 0; background: var(--line); }

  /* --------------------------------------------------------- análisis --- */

  .desk-chart {
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .desk-chart__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: var(--fs-sm);
    color: var(--text-3);
  }
  .desk-chart__head span:first-child { font-weight: 400; font-family: var(--serif); font-size: var(--fs-xl); color: var(--text); }
  .desk-chart__trend { color: var(--positive); font-weight: 500; }
  .desk-chart__trend.is-up { color: var(--accent-text); }

  .bars--lg { --bar-max: 150px; height: 200px; gap: var(--space-5); }
  .bars--lg .bars__amt { font-size: var(--fs-sm); }
  .bars--lg .bars__bar { border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-sm); }
  .bars--lg .bars__label { font-size: var(--fs-xs); }

  /* En Análisis la dona entera va a lo ancho, debajo del gráfico: 240px de
     dona más la tabla no entran en la columna de al lado. */
  .desk-donut { border-radius: 0; padding: var(--space-6) 0; }

  .desk-band {
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: flex;
    gap: var(--space-8);
    align-items: center;
  }
  .desk-band__main { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
  .desk-band__title { font-family: var(--serif); font-size: var(--fs-2xl); line-height: 1.22; }
  .desk-band__body {
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--text-2);
    max-width: 520px;
  }
  .desk-band__cta {
    flex: none;
    height: 50px;
    padding: 0 var(--space-6);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--sans);
    font-size: var(--fs-md);
    font-weight: 700;
    cursor: pointer;
    transition: transform 120ms ease;
  }
  .desk-band__cta:active { transform: scale(.98); }

  /* ---------------------------------------------------------- cuentas --- */

  .account--lg { border-radius: var(--radius-xl); padding: var(--space-6); gap: var(--space-8); }
  .account--lg .account__name { font-size: var(--fs-lg); }
  .account--lg .account__balance { font-size: var(--fs-3xl); }
  .account--lg .account__chip { width: 38px; height: 26px; }

  .desk-panel {
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .desk-alert {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
  }
  .desk-alert__dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-round);
    margin-top: var(--space-1);
    flex: none;
  }
  .desk-alert__title { font-size: var(--fs-md); font-weight: 500; }
  .desk-alert__body { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--space-1); line-height: 1.45; }

  /* ------------------------------------------- hojas como modal y toast --- */

  /* Las mismas hojas del móvil, centradas: el handoff pide caja de 420px. */
  .sheet {
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    width: 420px;
    max-height: calc(100% - 60px);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transform: translate(-50%, -46%);
    opacity: 0;
    transition: transform 240ms var(--ease-sheet), opacity 200ms ease;
  }
  #sheet-layer.is-open .sheet {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  /* El handle es un asidero para el pulgar: en escritorio no dice nada. */
  .sheet__handle { display: none; }

  #toast-layer {
    left: auto;
    right: 30px;
    bottom: 28px;
    max-width: 420px;
  }
  .toast {
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    box-shadow: 0 14px 34px rgba(25, 21, 16, .3);
  }

  /* ------------------------------------------------------ movimientos --- */

  .mv-filtros {
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  /* El buscador y los chips son los mismos del móvil (styles.css); acá sólo
     cambian de forma: entran en una fila con el filtro, no apilados. */

  .mv-buscar {
    flex: none;
    width: 280px;
    height: 42px;
    border-radius: var(--radius-pill);
    /* Va dentro de una tarjeta blanca: el crema es el que se despega. */
    background: var(--surface-2);
  }

  .mv-chips {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 2px var(--space-8) 2px 0;
    gap: var(--space-2);
  }

  /* Los medios de pago bajan a su propio renglón: en la misma línea que las
     categorías las dos franjas se comen entre sí y ninguna se ve entera. */
  .mv-chips--pago { flex-basis: 100%; }

  .mv-tabla { border-radius: var(--radius-xl); padding: 0; overflow: hidden; }

  /* Una sola rejilla para el encabezado y las filas: así las columnas quedan
     alineadas sin medir nada a mano. */
  .mv-head, .mv-fila {
    display: grid;
    grid-template-columns: 190px 1fr 110px 130px 44px;
    align-items: center;
    gap: var(--space-4);
    padding: 0;
  }

  .mv-head {
    height: 46px;
    border-bottom: 1px solid var(--line-strong);
    background: var(--bg);
  }
  .mv-th {
    font-size: var(--fs-xs);
    color: var(--text-3);
    font-weight: 500;
    text-align: left;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: .14em;
  }
  .mv-th--monto { text-align: right; }
  .mv-th--sort {
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--sans);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    transition: color 140ms ease;
  }
  .mv-th--sort:hover { color: var(--text); }
  .mv-th--sort.is-on { color: var(--text); font-weight: 700; }
  .mv-th--monto.mv-th--sort { justify-content: flex-end; }
  .mv-th__flecha { font-size: var(--fs-xs); }

  .mv-fila {
    height: 56px;
    border-top: 1px solid var(--line);
    transition: background 120ms ease;
  }
  .mv-fila:first-of-type { border-top: 0; }
  .mv-fila:hover { background: var(--surface-2); }

  .mv-td { font-size: var(--fs-md); min-width: 0; }
  .mv-td--cat { display: flex; align-items: center; gap: var(--space-3); font-weight: 500; }
  .mv-td--cat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mv-td--nota {
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mv-td--fecha { color: var(--text-3); font-size: var(--fs-sm); }
  .mv-td--monto { text-align: right; font-weight: 700; font-size: var(--fs-md); }

  /* El borrado aparece al pasar por encima: no compite con el monto. */
  .mv-td--acciones { display: flex; justify-content: flex-end; }
  .mv-borrar {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: var(--radius-round);
    background: none;
    /* Es el único indicio de que la fila se puede borrar: tiene que pasar el
       3:1 de contraste, no alcanza con el gris de los íconos apagados. */
    color: var(--text-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
  }
  .mv-fila:hover .mv-borrar { opacity: 1; }
  .mv-borrar:hover { background: var(--line); color: var(--accent-text); }
  .mv-borrar:focus-visible { opacity: 1; }

  .mv-pie {
    display: flex;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--line-strong);
    font-size: var(--fs-sm);
    color: var(--text-2);
    background: var(--bg);
  }
  .mv-pie b { color: var(--text); font-weight: 700; }


  /* En escritorio el botón de actualizar la cotización tiene lugar de sobra. */
  .desk-panel .pref__btn, .desk-col .pref__btn { margin-left: var(--space-1); }

}

/* Entre 1000 y 1180 el dashboard sigue, pero apretado: los grids caen a una
   columna, como pide el handoff. */
@media (min-width: 1000px) and (max-width: 1180px) {

  .desk-grid--budget,
  .desk-grid--accounts { grid-template-columns: 1fr; }

}


@media (min-width: 1000px) {
  /* En el Resumen la tarjeta del plan comparte columna con el insight. */
  .plan--web { border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6); }
  .plan--web .plan__cifra { font-size: var(--fs-3xl); }
  .plan--web .plan__monto--chico .plan__cifra { font-size: var(--fs-2xl); }
}

@media (min-width: 1000px) {
  /* El día, en la barra de registro. Poner al día un mes es anotar varios
     gastos de la misma fecha, así que la elegida se queda entre uno y otro. */
  .quick__dia {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    background: transparent;
    border: 1px solid var(--line-strong);
    font-weight: 500;
    color: var(--text-2);
    cursor: pointer;
    white-space: nowrap;
  }
  /* Cuando no es hoy tiene que cantar: es lo que evita cargar veinte gastos
     con la fecha equivocada sin darse cuenta. */
  .quick__dia.is-set {
    color: var(--bg);
    background: var(--text);
    border-color: var(--text);
  }
}

@media (min-width: 1000px) {
  .desk-cuotas .desk-row__amt { font-size: var(--fs-md); }
  .desk-cuotas .cuota-badge { width: 34px; height: 34px; border-radius: var(--radius-md); }
}

@media (min-width: 1000px) {
  /* En su propia sección hay lugar de sobra: la tarjeta no ocupa el ancho. */
  .desk-ajustes { max-width: 620px; gap: var(--space-4); }
  .desk-ajustes .ajustes__titulo:first-child { margin-top: 0; }

  /* Mes a mes ocupa el ancho del stack, y una barra de 900px no se lee: se
     le pone techo y las cifras se van al borde, como en un extracto. */
  .hist--web { border-radius: var(--radius-xl); padding: var(--space-6) var(--space-6); gap: var(--space-3); }
  .hist--web .hist__mes { width: 76px; font-size: var(--fs-sm); }
  .hist--web .hist__barra { max-width: 460px; }
  .hist--web .hist__cifras { margin-left: auto; width: 120px; }
  .hist--web .hist__gastado { font-size: var(--fs-md); }
  .hist--web .hist__ingresado { font-size: var(--fs-xs); }
}

/* --------------------------------------------------------- resumen --- */

/* El Resumen de escritorio (Tinta). Los tamaños grandes —el anillo de 300,
   "Puedes gastar hoy" a 112, lo gastado a 58, los títulos a 28 y 30— y los
   56px entre columnas son los de la referencia aprobada: están por fuera de
   las escalas a propósito, como el logo. */
@media (min-width: 1000px) {
  .res { display: flex; flex-direction: column; gap: var(--space-12); }

  .res-titulo { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-3); }
  .res-titulo h2 { flex: 1; margin: 0; font-family: var(--serif); font-weight: 400; font-size: 28px; }

  /* Protagonista: el anillo y, a la derecha, cuánto se puede gastar hoy con
     la meta debajo. */
  .res-prota { display: flex; align-items: center; gap: 56px; }
  .res-anillo { position: relative; width: 300px; height: 300px; flex: none; }
  .res-anillo svg { display: block; }
  /* Está encima del anillo entero: no tiene que tapar los tramos al mouse. */
  .res-anillo__centro {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .res-anillo__monto { font-family: var(--serif); font-size: 58px; line-height: 1; }
  .res-anillo__de { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--space-1); }

  .res-der { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
  .res-hoy { padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
  .res-hoy__fila { display: flex; align-items: baseline; gap: var(--space-5); flex-wrap: wrap; }
  .res-hoy__monto {
    font-family: var(--serif);
    font-size: 112px;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--text);
  }
  /* Verde si queda plata; en el límite, "$ 0" sin verde; pasado, naranja. */
  .res-hoy__monto.is-ok { color: var(--positive); }
  .res-hoy__monto.is-over { color: var(--accent-text); }
  .res-anillo__de.is-over { color: var(--accent-text); font-weight: 700; }
  .res-hoy__nota { font-size: var(--fs-md); line-height: 1.5; color: var(--text-2); }

  /* Un mes pasado: "Cómo cerró" en vez de "hoy". La frase entera ("Te
     sobraron $ 1.320") no entra a 112, así que va en serif 56. */
  .res-cierre {
    margin: var(--space-2) 0 var(--space-2);
    font-family: var(--serif);
    font-size: 56px;
    line-height: 1.05;
    color: var(--text);
  }
  .res-cierre.is-sobro { color: var(--positive); }
  .res-cierre.is-over { color: var(--tone-over); }
  /* Mes sin foto: se dice que no hay límites, sin tono. */
  .res-sin-limites { margin: var(--space-2) 0 0; font-size: 14px; color: var(--text-3); }
  .desk-hero__amount.is-over { color: var(--tone-over); }
  .mv-fila--lectura { cursor: default; }

  .res-meta {
    padding: var(--space-6) var(--space-8);
    display: flex;
    align-items: center;
    gap: var(--space-8);
  }
  .res-meta--vacia { padding: 0; justify-content: center; }
  .res-meta__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
  .res-meta__cuerpo .overline { font-weight: 700; }
  .res-meta__nombre { font-family: var(--serif); font-size: 30px; line-height: 1.1; }
  .res-meta__monto { font-size: var(--fs-2xl); font-weight: 700; }
  .res-meta__linea { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
  .res-meta__acciones { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
  .res-meta__cta { width: auto; height: 44px; padding: 0 var(--space-6); font-size: var(--fs-md); }

  /* En qué se fue: la dona de 240 y, al lado, su tabla. El total en serif
     34 y la tabla en 14, como la referencia: fuera de las escalas. */
  .dona-bloque { display: flex; align-items: center; gap: var(--space-12); }
  .dona__total { font-family: var(--serif); font-size: 34px; line-height: 1; }
  .dona__centro .overline { margin-top: 6px; }
  .dona-lado { flex: 1; min-width: 0; }
  .dona-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
  .dona-tabla th {
    padding: 0 0 var(--space-2);
    border-bottom: 1px solid var(--line-strong);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
    text-align: left;
  }
  .dona-tabla td { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
  .dona-tabla .dona-tabla__num { text-align: right; }
  .dona-tabla th.dona-tabla__num:nth-child(3) { width: 90px; }
  .dona-tabla .dona-tabla__limite { width: 200px; padding-left: var(--space-8); font-size: 13px; }
  .dona-tabla th.dona-tabla__limite { font-size: var(--fs-xs); }
  .dona-fila { cursor: pointer; }
  .dona-fila td:first-child { font-weight: 500; }
  .dona-fila:hover td { background: var(--surface); }
  .dona-tabla__punto {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 10px;
  }
  .dona-tabla__monto { font-weight: 700; }
  .dona-tabla__pct { color: var(--text-3); }

  /* El anillo del Resumen, por categorías (anilloGastado): a la izquierda,
     con su leyenda debajo. Los tramos se atenúan como las porciones de la
     dona. */
  .res-anillo-col { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); flex: none; }
  .anillo__seg { transition: opacity 150ms ease-out; }
  .anillo__seg.is-atenuada { opacity: .35; }
  .anillo-leyenda { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }
  .anillo-leyenda__fila { display: flex; align-items: center; gap: var(--space-2); }
  .anillo-leyenda__muestra { width: 18px; height: 6px; flex: none; border-radius: 3px; }

  /* "En qué se fue" como leyenda del anillo: la tabla en dos columnas, con
     el % angosto. */
  .anillo-tablas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-12);
    align-items: start;
  }
  .dona-tabla--anillo td { padding: 7px 0; }
  .dona-tabla.dona-tabla--anillo th.dona-tabla__num:nth-child(3) { width: 56px; }
  .dona-tabla--anillo .dona-tabla__limite { width: 150px; padding-left: var(--space-6); }
  .anillo-fila.is-activa td { background: var(--surface); }

  /* Abajo: movimientos (7) e insight (5). */
  .res-abajo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-12); align-items: start; }
  .res-movs { grid-column: span 7; min-width: 0; }
  .res-mov { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  .res-mov__main { flex: 1; min-width: 0; }
  .res-mov__nota { font-size: var(--fs-md); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .res-mov__sub { font-size: var(--fs-sm); color: var(--text-3); }
  .res-mov__monto { font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
  .avatar--36 { width: 36px; height: 36px; border-radius: 10px; font-size: var(--fs-sm); }

  .res-insight { grid-column: 8 / span 5; padding: var(--space-8); }
  .res-insight .overline { font-weight: 700; }
  .res-insight__titulo { margin: var(--space-3) 0 var(--space-2); font-family: var(--serif); font-size: 30px; line-height: 1.15; }
  .res-insight__cuerpo { margin: 0 0 var(--space-5); font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }

  /* El plan de ahorro, en Presupuesto: su título va arriba, sin el margen
     de las secciones de Ajustes. */
  .desk-ahorro__titulo { margin-top: 0; margin-bottom: var(--space-3); }
}

/* ---------------------------------------------------------- Ingresos --- */

/* Ingresos de escritorio (deskIngresos): tres números arriba, la tabla de
   lo que entró a la izquierda (7 de 12) y, a la derecha (5), las fuentes y
   los últimos seis meses. Los 64 de los números, el 34 del mes y el 15 de
   la tabla son los de la referencia: fuera de las escalas, como el Resumen. */
@media (min-width: 1000px) {
  .ing-cabeza__acciones { display: flex; align-items: center; gap: var(--space-3); }
  .ing-cabeza__cta { width: auto; height: 44px; padding: 0 22px; font-size: 15px; }

  /* El botón secundario: con borde, sin relleno. */
  .boton-sec {
    height: 44px;
    padding: 0 var(--space-5);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: none;
    color: var(--text-2);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 140ms ease, color 140ms ease;
  }
  .boton-sec:hover { border-color: var(--text-4); color: var(--text); }
  .boton-sec--chico { height: 32px; padding: 0 12px; font-size: 13px; color: var(--text); }

  .ing { display: flex; flex-direction: column; gap: var(--space-8); }

  .ing-numeros {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .ing-num { padding: var(--space-6); min-width: 0; }
  .ing-num:first-child { padding-left: 0; }
  .ing-num + .ing-num { border-left: 1px solid var(--line); }
  .ing-num__monto {
    font-family: var(--serif);
    font-size: 64px;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ing-num__monto.is-entro { color: var(--positive); }
  .ing-num__monto.is-over { color: var(--accent-text); }
  .ing-num__linea { font-size: 14px; color: var(--text-2); }

  .ing-abajo {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 40px;
    align-items: start;
  }
  .ing-lista { grid-column: span 7; min-width: 0; }
  .ing-lado { grid-column: 8 / span 5; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
  .ing-cuantos { font-size: 13px; color: var(--text-3); }

  .ing-tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
  .ing-tabla th {
    padding: 10px 0;
    border-bottom: 1px solid var(--line-strong);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
    text-align: left;
  }
  .ing-tabla td { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .ing-tabla .ing-tabla__dia { width: 70px; color: var(--text-3); }
  .ing-tabla .ing-tabla__monto { text-align: right; font-weight: 700; color: var(--positive); white-space: nowrap; }
  .ing-tabla th.ing-tabla__monto { color: var(--text-3); font-weight: 500; }
  .ing-tabla .ing-tabla__x { width: 40px; text-align: right; }

  .ing-detalle { display: flex; align-items: center; gap: 12px; }
  .ing-detalle__avatar {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 10px;
    color: var(--on-cuenta);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ing-detalle__titulo { font-weight: 500; }
  .ing-detalle__fuente { font-size: 13px; color: var(--text-3); }

  .ing-recibo { display: flex; align-items: center; gap: var(--space-2); }
  .ing-recibo .link-quiet { font-size: 13px; padding: 0 var(--space-2); }
  .ing-recibo .link-quiet:hover { color: var(--text); }

  /* La × de cada ingreso, como en Movimientos: aparece al pasar el mouse. */
  .ing-borrar {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--radius-round);
    background: none;
    color: var(--text-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
  }
  .ing-fila:hover .ing-borrar,
  .ing-borrar:focus-visible { opacity: 1; }
  .ing-borrar:hover { background: var(--surface-2); color: var(--accent-text); }

  .ing-fuentes { display: flex; flex-direction: column; gap: var(--space-4); }
  .ing-fuente { border-radius: var(--radius-sm); }
  .ing-fuente__fila { display: flex; align-items: baseline; font-size: 15px; }
  .ing-fuente__punto { width: 10px; height: 10px; border-radius: 3px; margin-right: 10px; flex: none; }
  .ing-fuente__nombre { flex: 1; min-width: 0; font-weight: 500; }
  .ing-fuente__monto { font-weight: 700; }
  .ing-fuente__pct { width: 44px; margin-left: 10px; text-align: right; color: var(--text-3); }
  .ing-fuente__barra { height: 8px; margin-top: var(--space-2); border-radius: 4px; background: var(--surface-2); overflow: hidden; }
  .ing-fuente__barra > div { height: 100%; border-radius: 4px; }

  .ing-seis { background: var(--surface); border-radius: 28px; padding: 22px 24px; }
  .ing-seis__cabeza { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); }
  .ing-seis__cabeza h2 { flex: 1; margin: 0; font-family: var(--serif); font-weight: 400; font-size: 24px; }
  .ing-seis__leyenda { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
  .ing-seis__leyenda i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin: 0 4px 0 10px; }
  .ing-seis__leyenda i:first-child { margin-left: 0; }
  .ing-seis__leyenda .is-entro { background: var(--positive); }
  .ing-seis__leyenda .is-gasto { background: var(--otras); }

  .ing-meses__barras,
  .ing-meses__ejes {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    column-gap: 14px;
  }
  .ing-meses__barras { height: 120px; align-items: end; }
  .ing-meses__par { height: 100%; display: flex; align-items: flex-end; gap: 3px; }
  .ing-meses__par > div { flex: 1; border-radius: 4px 4px 0 0; }
  .ing-meses__entro { background: var(--positive); }
  .ing-meses__gasto { background: var(--otras); }
  .ing-meses__ejes { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
  .ing-meses__ejes .is-actual { color: var(--text); font-weight: 700; }
  .ing-meses__solo { margin: 0; font-size: 13px; color: var(--text-3); }
}

/* Entre 1000 y 1180, los tres números bajan a 48 para que entren. */
@media (min-width: 1000px) and (max-width: 1180px) {
  .ing-num__monto { font-size: 48px; }
}

/* -------------------------------------------------------- Inversiones --- */

/* La pantalla de fondos (deskInversiones). Los 60 del saldo, los 18 de las
   cifras y los 14–15 de la tabla son los de la referencia: fuera de las
   escalas, como el Resumen. */
@media (min-width: 1000px) {
  .inv { display: flex; flex-direction: column; gap: var(--space-8); }

  .inv-totales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .inv-totales.is-una { grid-template-columns: minmax(0, 1fr); max-width: 50%; }
  .inv-total {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: var(--space-6) 28px;
    border-radius: 28px;
    background: var(--surface);
    min-width: 0;
  }
  .inv-total__cabeza { display: flex; align-items: baseline; }
  .inv-total__cabeza .overline { flex: 1; font-weight: 700; }
  .inv-total__fondos { font-size: var(--fs-sm); color: var(--text-3); }
  .inv-total__fila { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  .inv-total__valor { font-family: var(--serif); font-size: 60px; line-height: 1; white-space: nowrap; }
  .inv-total__estimado { margin-top: 6px; font-size: 14px; color: var(--text-3); }
  .inv-total__cifras {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 14px;
    border-top: 1px solid var(--line-strong);
  }
  .inv-total__cifras > div + div { padding-left: var(--space-4); border-left: 1px solid var(--line-strong); }
  .inv-total__rotulo { font-size: var(--fs-xs); color: var(--text-3); }
  .inv-total__cifra { margin-top: 2px; font-size: 18px; font-weight: 700; }
  /* Los fondos sin saldo no suman en la tarjeta: se dicen aparte. */
  .inv-total__sin { margin-top: -4px; font-size: var(--fs-sm); color: var(--text-3); }

  .inv-fecha { font-size: 14px; color: var(--text-2); }
  .inv-fecha.is-vieja { color: var(--accent-text); }
  .is-ganancia { color: var(--positive); }
  .is-perdida { color: var(--accent-text); }
  .inv-rinde { font-weight: 700; }
  .inv-rinde.is-pendiente { font-size: var(--fs-xs); font-weight: 400; color: var(--text-3); }

  .inv-ayuda { font-size: var(--fs-sm); color: var(--text-3); }
  .inv-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
  .inv-tabla th {
    padding: 10px 0;
    border-bottom: 1px solid var(--line-strong);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
    text-align: left;
  }
  .inv-tabla td { padding: 14px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .inv-tabla .inv-num { text-align: right; padding-left: var(--space-4); }
  .inv-tabla .inv-fecha { display: block; font-size: var(--fs-xs); color: var(--text-3); }
  .inv-tabla .inv-fecha.is-vieja { color: var(--accent-text); }
  .inv-saldo { font-weight: 700; }
  .inv-despues { font-size: var(--fs-xs); color: var(--text-3); }
  .inv-ganancia { font-weight: 700; }
  .inv-fondo { display: flex; align-items: center; gap: 12px; }
  .inv-fondo__nombre { font-size: 15px; font-weight: 500; }
  .inv-fondo__sub { font-size: var(--fs-sm); color: var(--text-3); }
  .inv-chip {
    min-width: 44px;
    height: 28px;
    padding: 0 8px;
    flex: none;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    font-weight: 700;
    background: var(--surface-2);
    color: var(--text);
  }
  .inv-chip.is-usd { background: var(--cat-petroleo); color: var(--cat-petroleo-on); }
  .inv-tabla .inv-acciones { width: 190px; padding-left: var(--space-6); }
  .inv-acciones__botones { position: relative; display: flex; justify-content: flex-end; gap: var(--space-2); }
  .inv-mas {
    width: 32px;
    height: 32px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: none;
    color: var(--text-2);
    font-family: var(--sans);
    font-size: 15px;
    cursor: pointer;
  }
  .inv-mas:hover, .inv-mas[aria-expanded="true"] { border-color: var(--text-4); color: var(--text); }
  .inv-menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 5;
    min-width: 180px;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
  }
  .inv-menu .is-peligro { color: var(--accent-text); }

  .inv-abajo {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-8);
    align-items: start;
  }
  .inv-viene { grid-column: span 8; padding: var(--space-6) 28px; border-radius: 28px; background: var(--surface); min-width: 0; }
  .inv-viene__cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .inv-viene__cabeza h2 { flex: 1; margin: 0; font-family: var(--serif); font-weight: 400; font-size: 26px; }
  .inv-viene__vacio { margin: 0; font-size: 14px; color: var(--text-3); }
  .inv-leyenda { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); }
  .inv-leyenda i { display: inline-block; width: 16px; }
  .inv-leyenda .is-vale { height: 3px; border-radius: 2px; background: var(--positive); }
  .inv-leyenda .is-pusiste { height: 0; border-top: 2px dashed var(--text-3); }
  .inv-moneda { display: flex; margin-left: var(--space-2); padding: 2px; border: 1px solid var(--line-strong); border-radius: 16px; }
  .inv-moneda button {
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 14px;
    background: none;
    color: var(--text-3);
    font-family: var(--sans);
    font-size: var(--fs-sm);
    cursor: pointer;
  }
  .inv-moneda button.is-on { background: var(--surface-2); color: var(--text); font-weight: 700; }
  .inv-grafico { display: block; width: 100%; height: 200px; overflow: visible; }
  .inv-grafico__mes:hover { fill: rgba(255, 255, 255, .03); }
  /* Los meses, repartidos de punta a punta como los puntos del gráfico. */
  .inv-grafico__meses {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: var(--fs-xs);
    color: var(--text-3);
  }
  .inv-grafico__meses .is-actual { color: var(--text); font-weight: 700; }

  .inv-mes { grid-column: span 4; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .inv-mes h2 { margin: 0 0 var(--space-2); font-family: var(--serif); font-weight: 400; font-size: 26px; }
  .inv-mes__moneda { margin-top: var(--space-2); }
  .inv-mes__fila { display: flex; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
  .inv-mes__fila > span:first-child { flex: 1; color: var(--text-2); }
  .inv-mes__monto { font-weight: 700; }
  .inv-mes__nota { margin: var(--space-2) 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-3); }

  .inv-vacio { padding: var(--space-12) 0; }
}

/* Las hojas de inversiones: el fondo arriba, el monto grande de "Cargar
   saldo", el recuadro en vivo y la confirmación de un saldo raro. */
@media (min-width: 1000px) {
  .inv-hoja__fondo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
  }
  .field__box--grande { height: 58px; }
  .field__box--grande .field__input,
  .field__box--grande .field__sign { font-size: 22px; font-weight: 500; }
  .inv-vivo {
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-2);
  }
  .inv-vivo strong { color: var(--text); }
  .inv-vivo strong.is-ganancia { color: var(--positive); }
  .inv-vivo strong.is-perdida { color: var(--accent-text); }
  /* .cta y los recuadros tienen su display: [hidden] tiene que ganarles. */
  .field__hint.is-error { color: var(--accent-text); }
  .inv-vivo[hidden], .inv-raro[hidden], #inv-saldo-form .cta[hidden] { display: none; }
  /* La ayuda debajo de un campo, chica: dentro del rótulo hereda su tamaño. */
  .inv-hoja .field > .field__hint, #inv-saldo-form .field > .field__hint, #inv-flujo-form .field > .field__hint { font-size: var(--fs-xs); }
  .inv-raro {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 14px 16px;
    border: 1px solid var(--accent-text);
    border-radius: var(--radius-lg);
  }
  .inv-raro__texto { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text); }
  .inv-raro__botones { display: flex; justify-content: flex-end; gap: var(--space-2); }
  .inv-raro__botones .cta { width: auto; height: 44px; padding: 0 var(--space-6); }

  .inv-historial { display: flex; flex-direction: column; }
  .inv-historial__fila {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
  }
  .inv-historial__fecha { width: 96px; flex: none; color: var(--text-3); }
  .inv-historial__tipo { flex: 1; min-width: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .inv-historial__monto { font-weight: 700; }
  .inv-historial__monto.is-saldo { font-weight: 500; color: var(--text); }
  .inv-historial__x {
    width: 28px;
    height: 28px;
    flex: none;
    border: 0;
    border-radius: var(--radius-round);
    background: none;
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .inv-historial__x:hover { background: var(--surface-2); color: var(--accent-text); }
}

@media (min-width: 1000px) {
  /* "Invertiste $ X" bajo "Te queda", en Ingresos. */
  .ing-num__invertido { margin-top: 2px; color: var(--text-3); }
}

/* Entrar, en el escritorio: el formulario centrado y angosto, no a lo ancho. */
@media (min-width: 1000px) {
  .login { max-width: 420px; margin: 0 auto; justify-content: center; }
  .login .setup__form { margin-top: 0; }
}