/* ─────────────────────────────────────────────────────────────────────────
   Finanzas · hoja de estilo
   Tesis: terminal de banca privada. Casi negro, una sola tinta de acento
   (menta) y el dinero como protagonista en cifras monoespaciadas tabulares.
   Regla de rendimiento: SOLO se anima transform y opacity. Nada que provoque
   reflow, ningún backdrop-filter en superficies grandes.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --fondo:        #0A0B0D;
  --superficie:   #101216;
  --superficie-2: #171A20;
  --borde:        #23262E;
  --borde-suave:  #1A1D23;

  --tinta:    #EDEEF2;
  --tinta-2:  #9BA3B2;
  /* #6B7280 se quedaba en 3,88:1 sobre panel — por debajo de AA. Este llega a
     5,01:1 en la superficie más clara y sigue leyéndose como gris terciario. */
  --tinta-3:  #828A97;

  --menta:    #5BE9B9;
  --menta-b:  #0F2A24;
  --ambar:    #F0B429;
  --rojo:     #FF6B6B;

  /* Tesis tipográfica: el DINERO se escribe en una serif de alto contraste
     —como un extracto de banca privada—, la interfaz en una grotesca precisa
     y los metadatos técnicos en monoespaciada. Tres papeles, tres caras. */
  --display: 'Instrument Serif', ui-serif, Georgia, serif;
  --sans: 'Geist', ui-sans-serif, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;

  /* Curvas de muelle: la salida de iOS, no un ease-out cualquiera. */
  --muelle: linear(0, .0039 .68%, .0157 1.42%, .0625 3%, .1407 4.83%, .25 6.87%,
            .3908 9.13%, .5625 11.63%, .6875 13.4%, .8036 15.32%, .8973 17.35%,
            .9645 19.5%, 1.0027 21.79%, 1.0154 24.2%, 1.0091 27.03%, .9954 30.24%,
            .9884 33.43%, .9895 38.32%, 1.0011 52.24%, 1.0002 74.85%, 1);

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;

  --nav-alto: 58px;
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --seguro-arriba: env(safe-area-inset-top, 0px);

  --salida: cubic-bezier(.22, 1, .36, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

body { min-height: 100dvh; }

h1, h2, h3, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--menta);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Cifras: siempre monoespaciadas y tabulares, para que las columnas cuadren. */
/* El dinero va en la sans con cifras TABULARES, no en monoespaciada:
   Schibsted Grotesk soporta tnum, así que las columnas cuadran igual, pero la
   coma y el € conservan su ancho natural. En monoespaciada cada separador
   ocupa una celda entera y "1.234,56 €" se lee descosido. */
.cifra {
  font-family: var(--sans);
  font-variant-numeric: lining-nums;
  letter-spacing: -0.015em;
}

/* La cifra que manda en cada pantalla: serif de alto contraste, apretada. */
.cifra-display {
  font-family: var(--display);
  font-weight: 400;
  font-variant-numeric: lining-nums;
  letter-spacing: -0.025em;
  line-height: .95;
}

/* Nota sobre cifras tabulares: en Schibsted Grotesk el feature `tnum` no solo
   iguala los dígitos, también ensancha la coma, el punto y el € a celda de
   dígito ("-89 , 99 €"). En una lista de importes alineados a la derecha el
   borde ya cuadra solo, así que las cifras van proporcionales y solo se activa
   tnum donde hay dígitos sin puntuación. */
.evolucion__et { font-variant-numeric: tabular-nums lining-nums; }

/* La monoespaciada se reserva para metadatos técnicos (etiquetas de mes,
   la redirect URL), donde el aire monoespaciado sí ayuda a leer. */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.pos { color: var(--menta); }
.neg { color: var(--tinta); }
.aten { color: var(--ambar); }
.mal  { color: var(--rojo); }

.oculto { display: none !important; }

/* Los componentes con display propio (grid, flex) pisan al [hidden] nativo:
   sin esto, un botón oculto se sigue viendo. */
[hidden] { display: none !important; }

/* ── Acceso ──────────────────────────────────────────────────────────────── */
.acceso {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: calc(var(--seguro-arriba) + 20px) 24px calc(var(--seguro-abajo) + 24px);
  background: var(--fondo);
  transition: opacity .28s var(--salida), transform .28s var(--salida);
}

/* El bloque de identidad se centra en el hueco libre y el teclado queda
   anclado abajo, donde llega el pulgar. */
.acceso__cabeza {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto 0;
}

.acceso[data-saliendo='1'] {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

.acceso__marca {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 34px;
  margin-bottom: 20px;
}

.acceso__marca span {
  width: 8px;
  border-radius: 3px;
  background: var(--menta);
}

.acceso__marca span:nth-child(1) { height: 16px; opacity: .45; }
.acceso__marca span:nth-child(2) { height: 26px; opacity: .72; }
.acceso__marca span:nth-child(3) { height: 34px; }

.acceso__marca i {
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--tinta);
  opacity: .9;
}

.acceso__titulo {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.acceso__pista {
  margin-top: 6px;
  color: var(--tinta-2);
  font-size: .92rem;
  min-height: 1.4em;
  text-align: center;
}

.acceso__pista[data-error='1'] { color: var(--rojo); }

.acceso__puntos {
  display: flex;
  gap: 14px;
  margin-top: 28px;
}

.acceso__puntos b {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--borde);
  transition: transform .18s var(--salida), background-color .18s linear, border-color .18s linear;
}

.acceso__puntos b[data-lleno='1'] {
  background: var(--menta);
  border-color: var(--menta);
  transform: scale(1.15);
}

.acceso__puntos[data-error='1'] { animation: tiritar .4s ease; }

@keyframes tiritar {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

/* ── Teclado numérico ────────────────────────────────────────────────────── */
.teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: min(320px, 100%);
}

.teclado--acceso { margin-top: 8px; }

/* La última fila va anclada por posición: si no hay passkey y Face ID se
   oculta, el 0 y el borrar siguen en su sitio en vez de correrse. */
.teclado--acceso .tecla--faceid { grid-column: 1; grid-row: 4; }
.teclado--acceso [data-tecla='0']  { grid-column: 2; grid-row: 4; }
.teclado--acceso .tecla--borrar    { grid-column: 3; grid-row: 4; }

.tecla {
  height: 62px;
  border-radius: var(--r-m);
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.45rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
  transition: transform .1s var(--salida), background-color .12s linear;
}

.tecla:active {
  transform: scale(.94);
  background: var(--superficie-2);
}

.tecla--borrar, .tecla--faceid { color: var(--tinta-2); }
.tecla--faceid { color: var(--menta); }

/* ── Estructura de la app ────────────────────────────────────────────────── */
.app {
  min-height: 100dvh;
  padding-bottom: calc(var(--nav-alto) + var(--seguro-abajo) + 8px);
}

.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: calc(var(--seguro-arriba) + 12px) 18px 10px;
  background: var(--fondo);
  border-bottom: 1px solid transparent;
  transition: border-color .2s linear;
}

.cabecera[data-pegada='1'] { border-bottom-color: var(--borde-suave); }

.cabecera__titulo {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  transform-origin: left center;
  will-change: transform;
}

.cabecera__sub {
  transform-origin: left center;
  will-change: transform, opacity;
}

/* Título grande que colapsa al hacer scroll, como iOS. Se resuelve con
   animación ligada al scroll NATIVA: corre en el compositor, no gasta un solo
   frame de JS y sigue funcionando aunque el hilo principal esté ocupado.
   El JS solo entra si el navegador no la soporta. */
@supports (animation-timeline: scroll()) {
  .cabecera__titulo {
    animation: colapsar-titulo linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 56px;
  }

  .cabecera__sub {
    animation: desvanecer-sub linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 38px;
  }
}

@keyframes colapsar-titulo {
  to { transform: translate3d(0, -6px, 0) scale(.62); }
}

@keyframes desvanecer-sub {
  to { opacity: 0; transform: translate3d(0, -4px, 0); }
}

.cabecera__sub {
  color: var(--tinta-3);
  font-size: .8rem;
  margin-top: 1px;
}

.cabecera__acciones { display: flex; gap: 6px; flex: none; }

/* 44×44: el mínimo cómodo con el pulgar. El icono dibujado es más pequeño,
   pero el área que recibe el toque no. */
.icono {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--tinta-2);
  transition: transform .12s var(--salida), color .15s linear;
}

.icono:active { transform: scale(.9); color: var(--tinta); }

.chincheta {
  position: absolute;
  top: 9px;
  right: 9px;
  min-width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--menta);
}

.chincheta--pestana {
  top: 4px;
  right: calc(50% - 16px);
  background: var(--ambar);
}

/* El colchón inferior deja pasar el botón flotante: si no, en las pantallas
   largas el "+" se come el último botón de la lista. */
.vista {
  padding: 4px 18px 96px;
  animation: entrar .26s var(--salida);
}

@keyframes entrar {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: none; }
}

/* ── Pestañas ────────────────────────────────────────────────────────────── */
.pestanas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: calc(var(--nav-alto) + var(--seguro-abajo));
  padding-bottom: var(--seguro-abajo);
  background: var(--fondo);
  border-top: 1px solid var(--borde-suave);
}

.pestana {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--tinta-3);
  font-size: .66rem;
  letter-spacing: .01em;
  transition: color .15s linear;
}

.pestana svg { transition: transform .18s var(--salida); }
.pestana:active svg { transform: scale(.88); }
.pestana[aria-current='page'] { color: var(--tinta); }
.pestana[aria-current='page'] svg { color: var(--menta); }

/* ── Botón de añadir ─────────────────────────────────────────────────────── */
.fab {
  position: fixed;
  right: 18px;
  bottom: calc(var(--nav-alto) + var(--seguro-abajo) + 16px);
  z-index: 35;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--menta);
  color: #06211A;
  box-shadow: 0 10px 30px -8px rgba(91, 233, 185, .45);
  transition: transform .16s var(--salida);
}

.fab:active { transform: scale(.88); }
.fab { transition: transform .42s var(--muelle); }

/* ── Bloques de contenido ────────────────────────────────────────────────── */
.bloque { margin-top: 26px; }

.bloque__titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.enlace-sec {
  font-size: .74rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--menta);
  font-weight: 500;
}

.panel {
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--r-m);
  padding: 16px;
}

.panel + .panel { margin-top: 10px; }

/* Cifra protagonista de Inicio */
.patrimonio { padding: 14px 0 2px; }

.patrimonio__etiqueta {
  color: var(--tinta-3);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.patrimonio__valor {
  display: block;
  margin-top: 4px;
  font-size: clamp(2.5rem, 13vw, 3.4rem);
  font-weight: 500;
  line-height: 1.05;
}

/* ── "Puedes gastar hoy": el número por el que se abre la app ───────────── */
.hoy {
  padding: 10px 0 4px;
}

.hoy__et {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--tinta-3);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hoy__valor {
  display: block;
  margin: 6px 0 0;
  font-size: clamp(3.6rem, 21vw, 5.2rem);
}

.hoy[data-estado='roto'] .hoy__valor { color: var(--rojo); }
.hoy[data-estado='justo'] .hoy__valor { color: var(--ambar); }

.hoy__pie {
  margin-top: 8px;
  color: var(--tinta-2);
  font-size: .9rem;
}

.hoy__pie b { color: var(--tinta); font-weight: 500; }

.hoy__frase {
  margin-top: 2px;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.06rem;
  color: var(--tinta-3);
}

/* Tira del ahorro obligatorio: el compromiso, siempre visible. */
.tira-ahorro {
  margin-top: 18px;
  padding: 15px 16px;
  border-radius: var(--r-m);
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
}

.tira-ahorro[data-ok='1'] {
  background: var(--menta-b);
  border-color: #17453A;
}

.tira-ahorro__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tira-ahorro__t {
  font-size: .82rem;
  color: var(--tinta-2);
}

.tira-ahorro__v { font-size: 1.02rem; font-weight: 500; }
.tira-ahorro__v span { color: var(--tinta-3); }
.tira-ahorro[data-ok='1'] .tira-ahorro__v { color: var(--menta); }

.tira-ahorro__nota {
  margin-top: 9px;
  font-size: .78rem;
  color: var(--tinta-3);
}

/* Sobre el verde del estado "asegurado" el gris terciario cae a 4,38:1.
   Dentro de esa tira se sube al secundario para no bajar de AA. */
.tira-ahorro[data-ok='1'] .tira-ahorro__nota,
.tira-ahorro[data-ok='1'] .tira-ahorro__v span { color: var(--tinta-2); }

/* Desglose de lo ya apartado: sin esto el número grande parece magia. */
.apartado {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.apartado__it {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  font-size: .76rem;
  color: var(--tinta-3);
}

.apartado__it b { color: var(--tinta-2); font-weight: 500; }

.patrimonio__desglose {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  color: var(--tinta-2);
  font-size: .82rem;
}

.patrimonio__desglose b { font-weight: 500; color: var(--tinta); }

/* Par ingresos / gastos */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.duo__caja {
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--r-m);
  padding: 14px;
}

.duo__et {
  color: var(--tinta-3);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.duo__val {
  display: block;
  margin-top: 6px;
  font-size: 1.32rem;
  font-weight: 500;
}

/* Indicador de ritmo */
.ritmo__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.ritmo__texto { font-size: .92rem; color: var(--tinta-2); }
.ritmo__texto b { color: var(--tinta); font-weight: 500; }

.ritmo__sello {
  flex: none;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
}

.ritmo__sello[data-estado='bien']   { background: var(--menta-b); color: var(--menta); }
.ritmo__sello[data-estado='riesgo'] { background: #2E2410; color: var(--ambar); }
.ritmo__sello[data-estado='pasado'] { background: #2E1616; color: var(--rojo); }

/* Barra de progreso: el ancho se anima con scaleX, nunca con width. */
.barra {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: var(--superficie-2);
  overflow: hidden;
}

.barra__relleno {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  border-radius: 999px;
  background: var(--menta);
  transition: transform .5s var(--salida);
}

.barra__relleno[data-estado='riesgo'] { background: var(--ambar); }
.barra__relleno[data-estado='pasado'] { background: var(--rojo); }

.barra__marca {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 2px;
  background: var(--tinta);
  opacity: .55;
}

/* Cabecera "nombre ····· importe": el nombre se recorta y el importe nunca
   salta de línea, que es lo que rompía la alineación con etiquetas largas. */
.linea-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.linea-titulo__n {
  min-width: 0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.linea-titulo__v { flex: none; white-space: nowrap; }
.linea-titulo__v span { color: var(--tinta-3); }

.meta-linea {
  color: var(--tinta-3);
  font-size: .76rem;
  margin-top: 7px;
}

.panel--boton {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 8px;
}

/* ── Listas ──────────────────────────────────────────────────────────────── */
.dia {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 22px 0 6px;
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.fila {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--borde-suave);
  text-align: left;
  transition: transform .12s var(--salida), opacity .15s linear;
}

.fila:active { transform: scale(.985); }
.fila:last-child { border-bottom: 0; }

.fila__marca {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  background: var(--superficie-2);
}

.fila__cuerpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fila__titulo {
  font-size: .94rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fila__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--tinta-3);
  font-size: .76rem;
  min-width: 0;
}

/* El texto cede el sitio; las píldoras de estado nunca se recortan, que son
   justo la información que hay que ver de un vistazo. */
.fila__meta-txt {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fila__importe {
  flex: none;
  font-size: 1rem;
  font-weight: 500;
  text-align: right;
}

.pildora {
  flex: none;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--superficie-2);
  color: var(--tinta-2);
}

.pildora[data-t='pendiente'] { background: #2E2410; color: var(--ambar); }
.pildora[data-t='revisar']   { background: var(--menta-b); color: var(--menta); }

/* ── Chips ───────────────────────────────────────────────────────────────── */
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.chips::-webkit-scrollbar { display: none; }

/* 44px de alto: el chip de categoría es el control que más se toca de toda la
   app (la bandeja "Por revisar" se despacha a base de chips). */
.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  color: var(--tinta-2);
  font-size: .85rem;
  white-space: nowrap;
  transition: transform .12s var(--salida), background-color .15s linear, color .15s linear;
}

.chip:active { transform: scale(.94); }

.chip[aria-pressed='true'] {
  background: var(--menta-b);
  border-color: transparent;
  color: var(--menta);
}

.chips--envoltura { flex-wrap: wrap; overflow: visible; }

/* ── Donut de categorías ─────────────────────────────────────────────────── */
.donut {
  display: flex;
  align-items: center;
  gap: 18px;
}

.donut__grafico { flex: none; }
.donut__leyenda { flex: 1; min-width: 0; }

.donut__linea {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: .84rem;
}

.donut__punto {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 3px;
}

.donut__nombre {
  flex: 1;
  min-width: 0;
  color: var(--tinta-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.donut__valor { flex: none; font-size: .82rem; }

/* ── Hoja inferior ───────────────────────────────────────────────────────── */
.velo {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, .6);
  opacity: 0;
  transition: opacity .28s var(--salida);
}

.velo[data-abierto='1'] { opacity: 1; }

.hoja {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-top-left-radius: var(--r-l);
  border-top-right-radius: var(--r-l);
  border-top: 1px solid var(--borde);
  transform: translate3d(0, 100%, 0);
  transition: transform .32s var(--salida);
  will-change: transform;
}

.hoja[data-abierto='1'] { transform: translate3d(0, 0, 0); }
.hoja { transition: transform .46s var(--muelle); }

.hoja__asa {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--borde);
  margin: 10px auto 2px;
  flex: none;
}

.hoja__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 16px 4px;
  flex: none;
}

.hoja__titulo {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.hoja__cuerpo {
  padding: 8px 16px calc(var(--seguro-abajo) + 18px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── Alta rápida ─────────────────────────────────────────────────────────── */
.alta__importe {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  padding: 10px 0 16px;
  font-size: clamp(2.6rem, 15vw, 3.6rem);
  font-weight: 500;
  line-height: 1;
}

.alta__importe[data-cero='1'] { color: var(--tinta-3); }
.alta__moneda { font-size: .45em; color: var(--tinta-3); }

.alta__fila {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* El selector cede el ancho que necesiten los atajos de fecha: si no,
   .alta__campo{width:100%} empuja "Ayer" fuera de la pantalla. */
.alta__fila .alta__campo { flex: 1; min-width: 0; width: auto; }

.alta__campo {
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--r-s);
  background: var(--superficie-2);
  border: 1px solid transparent;
  color: var(--tinta);
  font-size: .95rem;
  transition: border-color .15s linear;
}

.alta__campo::placeholder { color: var(--tinta-3); }
.alta__campo:focus { outline: none; border-color: var(--borde); }

select.alta__campo { appearance: none; }

.alta__guardar {
  width: 100%;
  height: 56px;
  margin-top: 14px;
  border-radius: var(--r-m);
  background: var(--menta);
  color: #06211A;
  font-size: 1.02rem;
  font-weight: 600;
  display: grid;
  place-items: center;
  transition: transform .14s var(--salida), opacity .15s linear;
}

.alta__guardar:active { transform: scale(.97); }
.alta__guardar[disabled] { opacity: .35; }

.acciones-grandes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 6px 0 10px;
}

.accion-grande {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 16px;
  border-radius: var(--r-m);
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  transition: transform .14s var(--salida);
}

.accion-grande:active { transform: scale(.96); }
.accion-grande b { font-size: 1rem; font-weight: 600; }
.accion-grande span { font-size: .76rem; color: var(--tinta-3); }
.accion-grande em { font-size: 1.35rem; font-style: normal; }

.menu-lista .fila { padding: 15px 0; }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.campo { margin-bottom: 12px; }

.campo__et {
  display: block;
  margin-bottom: 6px;
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.campo__dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px;
  border-radius: var(--r-m);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  color: var(--tinta);
  font-size: .92rem;
  font-weight: 500;
  transition: transform .14s var(--salida), opacity .15s linear;
}

.boton:active { transform: scale(.97); }
.boton[disabled] { opacity: .45; }

.boton--principal {
  width: 100%;
  background: var(--menta);
  border-color: transparent;
  color: #06211A;
  font-weight: 600;
}

.boton--peligro { color: var(--rojo); border-color: #3A1F1F; }
.boton--ancho { width: 100%; }

/* ── Estados vacíos ──────────────────────────────────────────────────────── */
.vacio {
  padding: 42px 20px;
  text-align: center;
  color: var(--tinta-3);
}

.vacio em {
  display: block;
  font-size: 1.8rem;
  font-style: normal;
  margin-bottom: 10px;
  opacity: .55;
}

.vacio p { font-size: .9rem; }

.cargando {
  padding: 46px 0;
  display: grid;
  place-items: center;
}

.cargando::after {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--borde);
  border-top-color: var(--menta);
  animation: girar .7s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* ── Avisos flotantes ────────────────────────────────────────────────────── */
.brindis {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-alto) + var(--seguro-abajo) + 84px);
  z-index: 70;
  max-width: calc(100vw - 36px);
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  color: var(--tinta);
  font-size: .88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translate3d(-50%, 14px, 0);
  opacity: 0;
  transition: transform .26s var(--salida), opacity .26s var(--salida);
  pointer-events: none;
}

.brindis[data-visible='1'] { transform: translate3d(-50%, 0, 0); opacity: 1; }
.brindis[data-tono='mal'] { border-color: #3A1F1F; color: var(--rojo); }

/* ── Propuestas y avisos en línea ────────────────────────────────────────── */
.propuesta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: var(--r-m);
  background: var(--menta-b);
  border: 1px solid #17453A;
  margin-bottom: 8px;
}

.propuesta__texto { flex: 1; min-width: 0; font-size: .86rem; }
.propuesta__texto b { display: block; font-weight: 600; color: var(--menta); }
.propuesta__texto span { color: var(--tinta-2); }

.propuesta__si {
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--menta);
  color: #06211A;
  font-size: .82rem;
  font-weight: 600;
}

.aviso-linea {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-m);
  background: #2E2410;
  color: var(--ambar);
  font-size: .86rem;
  margin-bottom: 10px;
}

.aviso-linea--mal { background: #2E1616; color: var(--rojo); }

/* ── Historial ───────────────────────────────────────────────────────────── */
.evolucion {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  padding-top: 8px;
}

.evolucion__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.evolucion__par {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 96px;
  width: 100%;
  justify-content: center;
}

.evolucion__b {
  width: 44%;
  max-width: 12px;
  /* Sin altura propia no hay nada que escalar: scaleY(0.8) de cero es cero. */
  height: 100%;
  border-radius: 3px 3px 0 0;
  transform-origin: bottom center;
  transform: scaleY(0);
  transition: transform .5s var(--salida);
}

.evolucion__b--in { background: var(--menta); opacity: .85; }
.evolucion__b--out { background: var(--tinta-3); }

.evolucion__et {
  font-size: .6rem;
  color: var(--tinta-3);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ── Ajustes ─────────────────────────────────────────────────────────────── */
.ajuste {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 0;
  border-bottom: 1px solid var(--borde-suave);
  text-align: left;
}

.ajuste:last-child { border-bottom: 0; }

/* Título y descripción son <span>: sin columna explícita fluirían en la misma
   línea y el margen superior de la descripción no haría nada. */
.ajuste__cuerpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ajuste__t { font-size: .95rem; font-weight: 500; }
.ajuste__d { font-size: .78rem; color: var(--tinta-3); }

.interruptor {
  flex: none;
  width: 46px;
  height: 27px;
  border-radius: 999px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  position: relative;
  transition: background-color .2s linear;
}

/* El dibujo se queda en el tamaño nativo de iOS (46x27), pero la zona que
   recibe el dedo se estira hasta 45px de alto sin que se note. */
.interruptor::before {
  content: '';
  position: absolute;
  inset: -9px -6px;
}

.interruptor::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--tinta-2);
  transition: transform .22s var(--salida), background-color .2s linear;
}

.interruptor[aria-checked='true'] { background: var(--menta-b); border-color: transparent; }
.interruptor[aria-checked='true']::after { transform: translateX(19px); background: var(--menta); }

/* ── Pantallas grandes: la app se mantiene en columna, centrada ──────────── */
/* En pantalla grande la app se queda en una columna de teléfono centrada.
   Los elementos `fixed` NO pueden centrarse con margin auto y `left:50%` a la
   vez: se suman y el resultado queda descuadrado respecto a la columna.
   Los que están en flujo usan margin auto; los fijos, left:50% + traslación. */
@media (min-width: 720px) {
  .app, .acceso { max-width: 520px; margin-inline: auto; }
  .app { border-inline: 1px solid var(--borde-suave); min-height: 100dvh; }

  .pestanas {
    left: 50%;
    right: auto;
    width: 520px;
    margin-inline: 0;
    transform: translateX(-50%);
    border-inline: 1px solid var(--borde-suave);
  }

  .hoja {
    left: 50%;
    right: auto;
    width: 520px;
    margin-inline: 0;
    transform: translate3d(-50%, 100%, 0);
  }

  .hoja[data-abierto='1'] { transform: translate3d(-50%, 0, 0); }

  .fab { right: max(18px, calc(50vw - 260px + 18px)); }
  .brindis { bottom: calc(var(--nav-alto) + 84px); }
}

/* ── Accesibilidad y ahorro ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}