/* ===========================================================================
   Responsive: la misma app en celular, tablet y escritorio.

   Celular  (< 640px)        una columna y las pestañas de abajo (los estilos
                             base; acá no se tocan).
   Tablet   (640 – 1023px)   más ancho y grillas de 2 columnas; desde 768px la
                             navegación pasa a una barra lateral angosta.
   Escritorio (≥ 1024px)     barra lateral completa, barra superior y tableros
                             de varias columnas.

   Todo usa los tokens de tokens.css, así el tema oscuro sale solo.
   =========================================================================== */

.sidebar,
.header-new,
.only-wide,
.home-chart,
.tx-cell,
.tx-thead {
  display: none;
}

/* El Inicio en una columna (celular): mismos bloques, uno debajo del otro */
.home-top,
.home-main,
.home-side,
.home-board,
.loan-cols,
.bills-layout,
.bills-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.loan-col,
.bills-side {
  display: flex;
  flex-direction: column;
}

.chart-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 6px;
  font-size: 0.86rem;
  color: var(--text-2);
}

/* ---------------------------------------------------------------------------
   Tablet: más aire y dos columnas donde hay listas de tarjetas
--------------------------------------------------------------------------- */

@media (min-width: 640px) {
  :root {
    --gutter: 22px;
    --max-width: 860px;
    --max-width-wide: 860px;
  }

  .view {
    gap: 18px;
  }

  .view[data-screen="metas"] .goal-list,
  .view[data-screen="cuentas"] > .rows,
  .view[data-screen="categorias"] > .rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }

  /* Cuentas y categorías: cada fila pasa a ser una tarjeta chica */
  .view[data-screen="cuentas"] > .rows,
  .view[data-screen="categorias"] > .rows {
    background: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }

  .view[data-screen="cuentas"] > .rows > .row,
  .view[data-screen="categorias"] > .rows > .row {
    background: var(--surface);
    border-radius: 20px;
    box-shadow: var(--shadow-xs);
    padding: 14px 16px;
    border: 0;
  }

  .view[data-screen="cuentas"] > .rows > .row::before,
  .view[data-screen="categorias"] > .rows > .row::before,
  .view[data-screen="cuentas"] > .rows > .row::after,
  .view[data-screen="categorias"] > .rows > .row::after {
    display: none;
  }

  /* Presupuestos: las tarjetas en grilla */
  .budget-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    align-items: start;
    gap: 16px;
  }

  .loan-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
    gap: 20px;
  }

  .home-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .home-recents {
    grid-column: 1 / -1;
  }


  .more-grid + .more-heading {
    margin-top: 6px;
  }
}

/* ---------------------------------------------------------------------------
   Desde 768px: barra lateral. Angosta (solo íconos) en tablet, completa en
   escritorio. Las pestañas de abajo dejan de mostrarse.
--------------------------------------------------------------------------- */

@media (min-width: 768px) {
  :root {
    --side-w: 96px;
  }

  body {
    padding-inline-start: var(--side-w);
    padding-bottom: 48px;
  }

  .tabbar {
    display: none;
  }

  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline: 0 auto;
    z-index: 25;
    width: var(--side-w);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 8px 14px;
    background: var(--surface);
    border-inline-end: 1px solid var(--border);
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .side-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 2px 4px 12px;
  }

  .side-brand img {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    flex-shrink: 0;
  }

  .side-brand-text,
  .side-neko {
    display: none;
  }

  .side-nav,
  .side-foot {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .side-foot {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }

  .side-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 100%;
    padding: 9px 4px;
    border-radius: 14px;
    color: var(--text-2);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-align: center;
    transition: background var(--dur-fast), color var(--dur-fast);
  }

  .side-link span {
    max-width: 100%;
  }

  .side-link:hover {
    background: var(--surface-2);
    color: var(--text);
  }

  .side-link.is-active {
    background: var(--brand-soft);
    color: var(--brand-ink);
    font-weight: 800;
  }

  /* Barra superior: el encabezado cian se achica y se despega de los bordes */
  .app-header {
    border-radius: 0 0 24px 24px;
  }

  .app-header-inner,
  body.is-wide .app-header-inner {
    max-width: none;
    padding-inline-start: clamp(20px, 3vw, 44px);
    padding-inline-end: clamp(20px, 3vw, 44px);
  }

  .header-logo,
  .header-back[href="#/mas"] {
    display: none;
  }

  .header-by {
    display: none;
  }

  .only-compact {
    display: none;
  }

  .only-wide {
    display: inline;
  }

  .header-title {
    font-size: 1.5rem;
  }

  .header-actions {
    align-items: center;
    gap: 8px;
  }

  .header-new {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: #fff;
    color: var(--tab-active-ink);
    box-shadow: 0 4px 12px rgba(0, 50, 70, 0.18);
    font-size: 0.92rem;
    white-space: nowrap;
  }

  .header-new:hover {
    filter: none;
    background: #f1fbfd;
  }

  .header-toolbar {
    max-width: 720px;
  }

  .view,
  body.is-wide .view {
    max-width: 1560px;
    padding: 24px clamp(20px, 3vw, 44px) 0;
    gap: 20px;
  }

  /* El botón de agregar ya está siempre arriba */
  .view[data-screen="transacciones"] > .btn-add {
    display: none;
  }

  .toast-host {
    inset-inline-start: var(--side-w);
    bottom: 24px;
  }

  /* Pantallas de lectura (configuración, monedas): un ancho cómodo */
  .view[data-screen^="ajustes"],
  .view[data-screen="monedas"],
  .view[data-screen="mas"] {
    max-width: 980px;
    margin-inline-start: 0;
  }

  .view[data-screen="ajustes"] > .more-grid,
  .view[data-screen="mas"] > .more-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0 24px;
  }

  .view[data-screen="ajustes"] > .more-grid > .more-item + .more-item,
  .view[data-screen="mas"] > .more-grid > .more-item + .more-item {
    border-top: 0;
  }

  /* Facturas: el calendario a un costado, las listas al otro */
  .bills-layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.3fr);
    align-items: start;
    gap: 20px;
  }

  .bills-side {
    position: sticky;
    top: 96px;
  }

  .bills-main > .section-title-spaced:first-child {
    margin-top: 0;
  }

  /* Reportes: resumen arriba, gráficos lado a lado */
  .view[data-screen="reportes"] {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: start;
  }

  .view[data-screen="reportes"] > * {
    grid-column: 1 / -1;
  }

  .view[data-screen="reportes"] > .report-bars {
    grid-column: 1;
  }

  .view[data-screen="reportes"] > .report-donut {
    grid-column: 2;
    grid-row: 3 / span 2;
  }

  .view[data-screen="reportes"] > .report-line {
    grid-column: 1;
  }

  .report-donut .donut-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .report-donut .donut-wrap > svg,
  .home-donut > svg {
    align-self: center;
  }

  .report-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: center;
    gap: 14px 24px;
  }

  .report-summary > .report-tiles {
    grid-row: span 4;
  }

  .report-summary > .report-verdict {
    margin: 0;
  }
}

/* ---------------------------------------------------------------------------
   Escritorio: barra lateral con nombres y tableros de varias columnas
--------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  :root {
    --side-w: 236px;
  }

  /* El patrón de fondo acompaña, sin competir con el contenido */
  body::before {
    opacity: calc(var(--pattern-opacity) * 0.45);
  }

  .sidebar {
    padding: 20px 14px 16px;
  }

  .side-brand {
    justify-content: flex-start;
    padding: 2px 8px 16px;
  }

  .side-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
  }

  .side-brand-text strong {
    font-family: var(--font-brand);
    font-weight: 900;
    font-size: 1.12rem;
    color: var(--brand-ink);
  }

  .side-brand-text span {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-2);
  }

  .side-link {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 12px;
    font-size: 0.94rem;
    text-align: start;
  }

  .side-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .side-neko {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-block: 10px;
    padding-inline: 6px 12px;
    border-radius: 18px;
    background: var(--brand-soft);
    color: var(--brand-ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1.25;
  }

  .side-neko img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    flex-shrink: 0;
  }

  /* En ventanas bajas la tarjeta del gatito deja lugar a los enlaces */
  @media (max-height: 760px) {
    .side-neko {
      display: none;
    }
  }

  /* Inicio como tablero.
     Arriba: saldo (principal) + lo de hoy al costado.
     Después: acciones, gráficos (2/3 + 1/3), recientes + próximos pagos,
     y el resto de las tarjetas de a tres. */
  .home-grid {
    gap: 20px;
  }

  .home-top {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 20px;
  }

  .home-main > .hero-card {
    height: 100%;
  }

  .home-side {
    justify-content: flex-start;
  }

  .home-side > .daily-card {
    flex: 1;
  }

  .home-chart {
    display: block;
  }

  .home-board {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
  }

  .home-board > * {
    grid-column: span 4;
  }

  .home-bars {
    grid-column: span 7;
    order: -6;
  }

  .home-donut {
    grid-column: span 5;
    order: -5;
  }

  .home-recents {
    grid-column: span 7;
    order: -4;
  }

  .home-bills {
    grid-column: span 5;
    order: -3;
  }

  .home-donut > svg {
    display: block;
    margin: 0 auto;
  }

  .home-donut .cat-breakdown {
    margin-top: 12px;
  }

  /* Jerarquía: las tarjetas del tablero pesan menos que el saldo */
  .home-board > .card {
    border-radius: 22px;
    box-shadow: var(--shadow-xs);
  }

  .hero-amount {
    font-size: clamp(2.4rem, 3.4vw, 3.1rem);
  }

  .hero-art {
    width: 150px;
  }

  /* Transacciones como tabla: Fecha · Descripción · Categoría · Cuenta · Monto */
  .view[data-screen="transacciones"] .tx-card {
    padding: 6px 22px 12px;
  }

  .view[data-screen="transacciones"] .tx-thead,
  .view[data-screen="transacciones"] .tx-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1.3fr) minmax(130px, auto);
    align-items: center;
    column-gap: 18px;
  }

  .view[data-screen="transacciones"] .tx-thead {
    padding: 14px 0 10px;
    border-bottom: 1px solid var(--border);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-2);
  }

  .view[data-screen="transacciones"] .tx-thead > :last-child {
    text-align: end;
  }

  .view[data-screen="transacciones"] .tx-row {
    grid-template-columns: 92px 40px minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1.3fr) minmax(130px, auto);
    column-gap: 0;
    padding: 9px 0;
  }

  .view[data-screen="transacciones"] .tx-row > * {
    margin-inline-end: 18px;
  }

  .view[data-screen="transacciones"] .tx-row > .cat-bubble {
    grid-column: 2;
    grid-row: 1;
    margin-inline-end: 12px;
  }

  .view[data-screen="transacciones"] .tx-row > .tx-body {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
  }

  .view[data-screen="transacciones"] .tx-cell {
    display: block;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
    color: var(--text-2);
  }

  .view[data-screen="transacciones"] .tx-cell-date {
    grid-column: 1;
    font-variant-numeric: tabular-nums;
  }

  .view[data-screen="transacciones"] .tx-cell-cat {
    grid-column: 4;
  }

  .view[data-screen="transacciones"] .tx-cell-acc {
    grid-column: 5;
  }

  .view[data-screen="transacciones"] .tx-cell-amount {
    grid-column: 6;
    margin-inline-end: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--text);
    font-size: 1rem;
  }

  /* Lo que en celular iba dentro de la fila ahora tiene su columna */
  .view[data-screen="transacciones"] .tx-top > .tx-amount,
  .view[data-screen="transacciones"] .tx-top > .tx-leader,
  .view[data-screen="transacciones"] .tx-bottom {
    display: none;
  }

  /* La fecha ya está en cada fila: el título del día queda como separador */
  .view[data-screen="transacciones"] .day-head {
    padding: 12px 0 0;
    font-size: 0.78rem;
    color: var(--text-2);
  }

  .view[data-screen="transacciones"] .tx-row:hover {
    background: var(--surface-2);
  }

  /* Más meses de un vistazo: totales y filtros en una línea */
  .view[data-screen="transacciones"] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .view[data-screen="transacciones"] > * {
    grid-column: 1 / -1;
  }

  .view[data-screen="transacciones"] > .month-nav {
    grid-column: 1;
    min-width: 320px;
  }

  .view[data-screen="transacciones"] > .month-totals {
    grid-column: 2;
    justify-content: flex-end;
  }

  .view[data-screen="metas"] .goal-list {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
  }

  .budget-list {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
  }

  .summary-card {
    max-width: 760px;
  }
}

/* ---------------------------------------------------------------------------
   Escritorio grande: más margen y un poco más de aire entre tarjetas
--------------------------------------------------------------------------- */

@media (min-width: 1280px) {
  :root {
    --side-w: 248px;
  }

  .side-link {
    letter-spacing: 0;
  }

  .view,
  body.is-wide .view {
    padding: 28px clamp(32px, 3.2vw, 48px) 0;
    gap: 24px;
  }

  .home-grid,
  .home-top,
  .home-board {
    gap: 24px;
  }

  .view[data-screen="categorias"] > .rows {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

/* Pantallas muy anchas: la torta del Inicio con su lista al costado */
@media (min-width: 1536px) {
  .home-donut {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px 20px;
  }

  .home-donut > .section-head,
  .home-donut > .muted-text {
    grid-column: 1 / -1;
  }

  .home-donut .cat-breakdown {
    margin-top: 0;
  }
}

/* ---------- Idiomas de derecha a izquierda (árabe) ---------- */

/* Flechas que indican "adelante" o "atrás": apuntan para el otro lado. */
[dir="rtl"] .more-chevron,
[dir="rtl"] .header-back .icon,
[dir="rtl"] .section-link .icon,
[dir="rtl"] .see-all .icon,
[dir="rtl"] .transfer-arrow .icon,
[dir="rtl"] .cb-toggle .icon,
[dir="rtl"] .month-nav .icon,
[dir="rtl"] [data-action="bills-month"] .icon,
[dir="rtl"] .icon-chevronRight:not(.faq-chevron),
[dir="rtl"] .icon-chevronLeft {
  transform: scaleX(-1);
}

/* Bordes redondeados de un solo lado. */
[dir="rtl"] .row-bill.status-overdue::after {
  border-radius: 4px 0 0 4px;
}

[dir="rtl"] .sub-item-remove {
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}

/* Los números y las fechas se escriben de izquierda a derecha. */
[dir="rtl"] input[inputmode="decimal"],
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="time"],
[dir="rtl"] input[type="number"] {
  direction: ltr;
}

[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="time"] {
  text-align: end;
}

/* Los gráficos conservan sus ejes de izquierda a derecha. */
[dir="rtl"] .chart-svg,
[dir="rtl"] .chart-tip {
  direction: ltr;
}

/* Símbolos de moneda ("E£", "US$"): siempre en su orden. */
[dir="rtl"] .amount-currency,
[dir="rtl"] .cur-badge,
[dir="rtl"] .cur-tile strong,
[dir="rtl"] .amount-suffix {
  direction: ltr;
  unicode-bidi: isolate;
}

/* La flecha de los desplegables pasa al otro lado. */
[dir="rtl"] select {
  background-position: left 12px center;
}

/* ---------------------------------------------------------------------------
   Tarjetas flotantes y movimiento
   Las tarjetas blancas flotan con una sombra en capas. Con mouse se levantan
   al pasar por encima; en el celular (sin hover) se hunden un poco al
   tocarlas, si se pueden tocar. Quien pide menos movimiento en su sistema
   ve solo el cambio de sombra, sin desplazamientos.
--------------------------------------------------------------------------- */

.card:not(.card-soft),
.goal-card,
.summary-card,
.hero-card {
  box-shadow: var(--shadow-float);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.transfer-option,
.qa,
.more-icon,
.more-chevron,
.faq-chevron {
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease), background var(--dur-fast), border-color var(--dur-fast);
}

@media (hover: hover) and (pointer: fine) {
  .card:not(.card-soft):hover,
  .summary-card:hover,
  .hero-card:hover {
    box-shadow: var(--shadow-lift);
  }

  .goal-card:hover,
  .transfer-option:hover,
  .qa:hover {
    box-shadow: var(--shadow-lift);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Contenedores grandes: se levantan poco; lo que se toca, un poco más. */
  .card:not(.card-soft):hover,
  .summary-card:hover,
  .hero-card:hover {
    transform: translateY(-3px);
  }

  .goal-card:hover,
  .transfer-option:hover,
  .qa:hover {
    transform: translateY(-4px);
  }

  .btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
  }

  /* Menú: el ícono salta y la flecha se adelanta */
  .more-item:hover .more-icon {
    transform: scale(1.08) rotate(-4deg);
  }

  .more-item:hover .more-chevron {
    transform: translateX(3px);
  }

  [dir="rtl"] .more-item:hover .more-chevron {
    transform: scaleX(-1) translateX(3px);
  }
}

/* En el celular: al tocar algo que se puede tocar, se hunde un poco */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .goal-card:active,
  .transfer-option:active,
  .qa:active,
  a.card:active,
  button.card:active {
    transform: scale(0.97);
    transition-duration: var(--dur-fast);
  }

  .more-item:active .more-icon {
    transform: scale(0.92);
  }
}

/* Preguntas frecuentes: la respuesta entra deslizándose */
.faq-item[open] .faq-a {
  animation: reveal 300ms var(--ease) both;
}

/* Tarjetas de más abajo: esperan ocultas y aparecen al llegar a ellas */
.view-enter .reveal.reveal-later {
  animation: none;
  opacity: 0;
  transform: translateY(26px) scale(0.98);
  transition: opacity 520ms var(--ease), transform 640ms var(--ease);
}

.view-enter .reveal.reveal-later.is-in {
  opacity: 1;
  transform: none;
}

.view-enter .reveal.revealed {
  animation: none;
}

/* Aviso de "listo": el check se dibuja y el círculo da un saltito */
@media (prefers-reduced-motion: no-preference) {
  .toast-success .toast-icon {
    animation: check-pop 460ms var(--ease-spring) both;
  }

  .toast-success .toast-icon path {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: check-draw 420ms 160ms var(--ease) forwards;
  }
}

@keyframes check-pop {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}

@keyframes check-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Meta cumplida: confeti y el Neko festejando */
.celebrate {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 30, 36, 0.28);
  opacity: 0;
  transition: opacity 300ms var(--ease);
  cursor: pointer;
}

.celebrate.is-on {
  opacity: 1;
}

.celebrate-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  max-width: 320px;
  padding: 22px 26px 24px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
  transform: scale(0.7);
  transition: transform 520ms var(--ease-spring);
}

.celebrate.is-on .celebrate-card {
  transform: none;
}

.celebrate-card img {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.celebrate-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--goal-ink);
}

.celebrate-name {
  margin: 0;
  font-weight: 700;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.confetti i {
  position: absolute;
  top: -20px;
  left: var(--x);
  background: var(--c);
  border-radius: 2px;
  animation: confetti-fall var(--fall) var(--delay) cubic-bezier(0.25, 0.6, 0.4, 1) forwards;
}

@keyframes confetti-fall {
  to {
    transform: translate(var(--drift), 110vh) rotate(var(--spin));
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .celebrate-card {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Movimiento adentro de las tarjetas
--------------------------------------------------------------------------- */

/* Selector de opciones: la píldora se desliza hasta la opción elegida */
.segmented.has-pill {
  position: relative;
}

.seg-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-xs), inset 0 0 0 2px var(--action);
  pointer-events: none;
  transition: transform 340ms var(--ease-spring), width 300ms var(--ease), height 300ms var(--ease), opacity 160ms;
}

.seg-pill.no-slide {
  transition: none;
}

.segmented.has-pill .segmented-option {
  z-index: 1;
}

.segmented.has-pill .segmented-option input:checked + span {
  background: transparent;
  box-shadow: none;
  animation: none;
}

.form[data-type="income"] .segmented-lg .seg-pill {
  background: var(--income-ink);
  box-shadow: 0 3px 10px rgba(47, 158, 90, 0.3);
}

.form[data-type="expense"] .segmented-lg .seg-pill {
  background: var(--expense-ink);
  box-shadow: 0 3px 10px rgba(179, 72, 58, 0.3);
}

/* Filas que se pueden tocar: fondo suave y la burbuja del ícono salta */
:is(.tx-row, button.row, a.row, .flow-row:is(a, button)) :is(.cat-bubble, .mini-icon) {
  transition: transform var(--dur) var(--ease-spring);
}

@media (hover: hover) and (pointer: fine) {
  :is(.flow-row:is(a, button), button.row, a.row):hover {
    background: var(--track);
    box-shadow: 0 0 0 6px var(--track);
    border-radius: 8px;
  }
}

@media (hover: none) {
  :is(.tx-row, .flow-row:is(a, button), button.row, a.row):active {
    background: var(--track);
    box-shadow: 0 0 0 6px var(--track);
    border-radius: 8px;
  }
}

/* Campos de monto: al enfocarlos, el borde se enciende con un brillo */
.amount-input:focus-within {
  animation: focus-glow 520ms var(--ease);
}

@keyframes focus-glow {
  0% { box-shadow: 0 0 0 0 var(--action-soft); }
  55% { box-shadow: 0 0 0 8px var(--action-soft); }
  100% { box-shadow: 0 0 0 4px var(--action-soft); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Filas que entran en cascada cuando aparece su tarjeta (solo las primeras) */
  .view-enter .reveal :is(.tx-row:not(.is-new), button.row, a.row, .flow-row, .faq-item, .loan-row):nth-child(-n + 12) {
    animation: row-in 420ms var(--ease) both;
  }

  .view-enter .reveal :is(.tx-row, button.row, a.row, .flow-row, .faq-item, .loan-row):nth-child(2) { animation-delay: 40ms; }
  .view-enter .reveal :is(.tx-row, button.row, a.row, .flow-row, .faq-item, .loan-row):nth-child(3) { animation-delay: 75ms; }
  .view-enter .reveal :is(.tx-row, button.row, a.row, .flow-row, .faq-item, .loan-row):nth-child(4) { animation-delay: 110ms; }
  .view-enter .reveal :is(.tx-row, button.row, a.row, .flow-row, .faq-item, .loan-row):nth-child(5) { animation-delay: 145ms; }
  .view-enter .reveal :is(.tx-row, button.row, a.row, .flow-row, .faq-item, .loan-row):nth-child(6) { animation-delay: 180ms; }
  .view-enter .reveal :is(.tx-row, button.row, a.row, .flow-row, .faq-item, .loan-row):nth-child(7) { animation-delay: 210ms; }
  .view-enter .reveal :is(.tx-row, button.row, a.row, .flow-row, .faq-item, .loan-row):nth-child(8) { animation-delay: 240ms; }
  .view-enter .reveal :is(.tx-row, button.row, a.row, .flow-row, .faq-item, .loan-row):nth-child(n + 9) { animation-delay: 270ms; }

  /* Las de una tarjeta que todavía espera (más abajo) arrancan al aparecer */
  .reveal-later:not(.is-in) :is(.tx-row, button.row, a.row, .flow-row, .faq-item, .loan-row) {
    animation-play-state: paused;
  }

  @keyframes row-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* Ingresos y gastos del Inicio: la flecha baja (entra) o sube (sale) */
  .view-enter .mini-income .mini-icon .icon {
    animation: nudge-down 900ms 350ms var(--ease) both;
  }

  .view-enter .mini-expense .mini-icon .icon {
    animation: nudge-up 900ms 350ms var(--ease) both;
  }

  @keyframes nudge-down {
    40% { transform: translateY(4px); }
  }

  @keyframes nudge-up {
    40% { transform: translateY(-4px); }
  }

  /* Meta cumplida: un brillo recorre la barra */
  .goal-card.is-done .progress {
    overflow: hidden;
  }

  .goal-card.is-done .progress-fill {
    position: relative;
    overflow: hidden;
  }

  .goal-card.is-done .progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.6) 50%, transparent 75%);
    transform: translateX(-100%);
    animation: shine 1.3s 750ms ease-in-out both;
  }

  @keyframes shine {
    to { transform: translateX(100%); }
  }

  /* Factura vencida: el ícono late despacio */
  .chip-overdue .icon {
    animation: overdue-beat 2.4s ease-in-out infinite;
  }

  @keyframes overdue-beat {
    0%, 70%, 100% { transform: scale(1); }
    78% { transform: scale(1.25); }
    86% { transform: scale(0.95); }
    92% { transform: scale(1.12); }
  }

  /* Ilustraciones de los resúmenes: flotan muy despacio */
  .hero-art,
  .summary-art {
    animation: float-slow 6s ease-in-out infinite;
  }

  @keyframes float-slow {
    50% { transform: translateY(-5px) rotate(-1.5deg); }
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.tx-row, button.row, a.row, .flow-row:is(a, button)):hover :is(.cat-bubble, .mini-icon) {
    transform: scale(1.12) rotate(-4deg);
  }

  .mini-income:hover .mini-icon .icon {
    transform: translateY(3px);
  }

  .mini-expense:hover .mini-icon .icon {
    transform: translateY(-3px);
  }

  .mini-icon .icon,
  .icon-plus,
  .icon-chevronRight:not(.faq-chevron),
  .icon-chevronLeft {
    transition: transform var(--dur) var(--ease-spring);
  }

  /* "+": gira; flechas: se adelantan */
  :is(button, a):hover > .icon-plus {
    transform: rotate(90deg);
  }

  :is(button, a):hover .icon-chevronRight:not(.faq-chevron) {
    transform: translateX(3px);
  }

  [dir="rtl"] :is(button, a):hover .icon-chevronRight:not(.faq-chevron) {
    transform: scaleX(-1) translateX(3px);
  }

  :is(button, a):hover > .icon-chevronLeft {
    transform: translateX(-3px);
  }

  [dir="rtl"] :is(button, a):hover > .icon-chevronLeft {
    transform: scaleX(-1) translateX(-3px);
  }
}