/*
  Bajamar.

  Un eje vertical y nada más dentro de cada área. Sin tarjetas flotando sobre
  un fondo, sin iconografía de relleno: la jerarquía la marca el tamaño del
  texto y el aire que lo rodea.

  La navegación va abajo en el móvil —donde llega el pulgar— y arriba en el
  escritorio. Con palabras, no con iconos: cinco dibujos minúsculos obligan a
  adivinar, y adivinar con el dinero de uno no apetece.

  El ámbar está reservado para lo que de verdad pide atención. Si se usa para
  adornar deja de significar nada, y entonces no queda ningún color con el que
  avisar.
*/

:root {
  --fondo: #0B0E11;        /* azul-carbón: el negro puro vibra sobre OLED */
  --superficie: #141A1F;
  --texto: #DDE3E8;
  --secundario: #7D8B96;
  --linea: #222B33;
  --acento: #E0A458;       /* ámbar: atención */
  --alarma: #D9604F;       /* rojo apagado: problema */
  --bien: #6FA88B;         /* verde sobrio: va bien */
  --agua: #3E5C6B;

  --display: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cifras: 'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;

  --curva: cubic-bezier(0.23, 1, 0.32, 1);
  --margen: clamp(1.5rem, 6vw, 4rem);
}

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

/* `hidden` tiene que ganar siempre. Cualquier regla con clase le pisa el
   `display: none` de la hoja del navegador, y entonces se queda a la vista lo
   que el programa cree haber escondido. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* El rebote del sistema al llegar arriba taparía el tirón para buscar. */
  overscroll-behavior-y: contain;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.cifras {
  font-family: var(--cifras);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  /* Un importe partido en dos renglones deja el «€» solo abajo. */
  white-space: nowrap;
}

main {
  max-width: 44rem;
  margin: 0 auto;
  /* Arriba, el hueco de la isla del teléfono; abajo, la barra más el borde curvo. */
  padding: env(safe-area-inset-top) var(--margen) calc(6rem + env(safe-area-inset-bottom));
}

.vista { display: block; }
.vista[hidden] { display: none; }

.bloque { padding: clamp(2.25rem, 7vw, 4rem) 0; }
.bloque + .bloque { border-top: 1px solid var(--linea); }

/* ── Navegación ───────────────────────────────────────────────── */

.cabecera {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: rgb(11 14 17 / 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
}
.cabecera[hidden] { display: none; }

/* En el móvil la marca sobra: ya se sabe qué aplicación está abierta, y ese
   sitio lo necesita el pulgar. */
.marca { display: none; margin: 0; }

.navegacion {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  max-width: 44rem;
  margin: 0 auto;
}

.pestana {
  padding: 0.75rem 0.125rem;
  font: inherit;
  font-size: 0.6875rem;
  letter-spacing: 0.01em;
  color: var(--secundario);
  background: none;
  border: 0;
  border-top: 2px solid transparent;
  cursor: pointer;
  transition: color 150ms var(--curva);
}
.pestana:hover { color: var(--texto); }
.pestana:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.pestana[aria-current='page'] { color: var(--texto); border-top-color: var(--acento); }

@media (min-width: 46rem) {
  .cabecera {
    top: 0;
    bottom: auto;
    border-top: 0;
    border-bottom: 1px solid var(--linea);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: env(safe-area-inset-top) var(--margen) 0;
  }
  .marca {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .navegacion { display: flex; gap: 0.25rem; margin: 0; }
  .pestana {
    padding: 1rem 0.75rem;
    font-size: 0.875rem;
    border-top: 0;
    border-bottom: 2px solid transparent;
  }
  .pestana[aria-current='page'] { border-bottom-color: var(--acento); }
  main { padding-top: calc(3.5rem + env(safe-area-inset-top)); padding-bottom: 6rem; }
}

/* El rótulo no compite: nombra el bloque y se aparta. */
.rotulo {
  margin: 0 0 1.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secundario);
}

.aclaracion {
  margin: -0.75rem 0 1.5rem;
  max-width: 34rem;
  color: var(--secundario);
  font-size: 0.9375rem;
}

/* ── La portada ─────────────────────────────────────────────────────────── */

.portada { padding-top: clamp(4rem, 14vh, 8rem); }
/* Con avisos delante, la portada no necesita tanto aire: el aire ya lo dio el
   hueco de arriba, y la cifra tiene que caber en la primera pantalla. */
.bloque-avisos + .portada { padding-top: clamp(2rem, 6vh, 3rem); }

.titular {
  margin: 0;
  font-family: var(--cifras);
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.25rem, 15vw, 6.5rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.titular.en-rojo { color: var(--alarma); }

/* El símbolo, volado y discreto: a 6 rem compite con la cifra si va al mismo
   tamaño, y la cifra es lo único que hay que leer. */
.moneda {
  font-size: 0.3em;
  vertical-align: 0.72em;
  margin-left: 0.1em;
  color: var(--secundario);
  letter-spacing: 0;
}

.pie {
  margin: 1.25rem 0 0;
  font-size: 1.0625rem;
  color: var(--secundario);
  max-width: 30rem;
}

.pie strong { color: var(--texto); font-weight: 500; }
.pie-menor { font-size: 0.9375rem; margin-top: 0.5rem; }
/* El margen es una salida, no una alarma: se dice en el verde de lo que suma. */
.pie-margen { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--bien); }

/* Una cifra grande, pero no la de portada: el disponible y el neto mandan
   dentro de su bloque, no sobre la pantalla entera. */
.subtitular {
  margin: 1.5rem 0 0;
  font-family: var(--cifras);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
}
.subtitular.en-rojo { color: var(--alarma); }

/* ── Avisos ────────────────────────────────────────────────────── */

/* Van los primeros y sin rótulo: lo que hay que saber no se anuncia, se dice. */
.bloque-avisos { padding-top: clamp(1.5rem, 5vw, 2.5rem); padding-bottom: 0; }
.bloque-avisos[hidden] { display: none; }

.avisos { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }

.aviso {
  padding: 0.875rem 1rem;
  background: var(--superficie);
  border-left: 2px solid var(--secundario);
  border-radius: 0 0.375rem 0.375rem 0;
}
.aviso-alto { border-left-color: var(--alarma); }
.aviso-medio { border-left-color: var(--acento); }
.aviso-bajo { border-left-color: var(--agua); }
.aviso[role='button'] { cursor: pointer; }
.aviso[role='button']:active { transform: scale(0.99); }

.aviso-titulo { margin: 0; font-size: 0.9375rem; font-weight: 500; }
.aviso-alto .aviso-titulo { color: var(--alarma); }
.aviso-medio .aviso-titulo { color: var(--acento); }
.aviso-detalle { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--secundario); }

/* ── La lámina de agua ──────────────────────────────────────────────────── */

#lamina svg, #lamina-larga svg { display: block; width: 100%; height: auto; overflow: visible; }

.trazo-agua {
  fill: none;
  stroke: var(--agua);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.relleno-agua { stroke: none; }

/* La segunda lectura del mes: el mismo saldo sin el dinero que paga el mes
   siguiente. Discontinua y sin relleno a propósito — no es otra cuenta, es la
   misma leída de otra manera, y sólo se separa de la primera donde importa. */
.trazo-propio {
  fill: none;
  stroke: var(--acento);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  opacity: 0.75;
}

.marca-suelo { stroke: var(--acento); stroke-width: 1; stroke-dasharray: 2 3; }
.punto-suelo { fill: var(--acento); }

.etiqueta-lamina {
  font-family: var(--cifras);
  font-size: 11px;
  fill: var(--secundario);
}
.etiqueta-lamina.destacada { fill: var(--acento); }

/* Se dibuja una vez, al importar. Abrir la aplicación no anima nada: si cada
   vez que la abres tienes que esperar a que algo se pinte, molesta. */
.dibujando .trazo-agua {
  stroke-dasharray: var(--largo);
  stroke-dashoffset: var(--largo);
  animation: trazar 600ms var(--curva) forwards;
}
.dibujando .relleno-agua,
.dibujando .marca-suelo,
.dibujando .punto-suelo,
.dibujando .etiqueta-lamina {
  opacity: 0;
  animation: asomar 500ms var(--curva) 250ms forwards;
}

@keyframes trazar { to { stroke-dashoffset: 0; } }
@keyframes asomar { to { opacity: 1; } }

/* ── Listas ─────────────────────────────────────────────────────────────── */

.eventos, .categorias { margin: 0; padding: 0; list-style: none; }

.eventos li {
  display: grid;
  grid-template-columns: 3.25rem 1fr auto;
  gap: 0.875rem;
  align-items: baseline;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--linea);
}
.eventos li:last-child { border-bottom: 0; }

/* Sin fecha a la izquierda, el nombre se come esa columna en vez de dejar un
   hueco de tres cuartos de dedo. */
.eventos li > .evento-nombre:first-child { grid-column: 1 / 3; }

/* Una cabecera de mes dentro de la lista: no es un movimiento, no se pincha. */
.eventos li.separador {
  display: block;
  padding: 1.75rem 0 0.5rem;
  border-bottom: 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secundario);
}
.eventos li.separador:first-child { padding-top: 0.5rem; }

.apagado { opacity: 0.55; }
.entrada .evento-importe { color: var(--bien); }

.evento-fecha {
  font-family: var(--cifras);
  font-size: 0.8125rem;
  color: var(--secundario);
  white-space: nowrap;
}

.evento-nombre { min-width: 0; }
.evento-nombre span { display: block; }

.evento-detalle {
  font-size: 0.8125rem;
  color: var(--secundario);
}

.evento-importe {
  font-family: var(--cifras);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Lo previsto no es lo mismo que lo confirmado, y la interfaz lo dice sin
   inventarse un icono para ello. */
.previsto .evento-importe,
.previsto .evento-nombre > span:first-child { color: #B3BEC7; }
.confirmado .evento-nombre > span:first-child { font-weight: 500; }
.urgente .evento-importe { color: var(--acento); }
.por-cobrar .evento-importe,
.por-cobrar .evento-nombre > span:first-child { color: var(--acento); }

/* Una lista donde cada línea lleva a algún sitio. El realce aparece al tocar,
   no está puesto de antemano: cinco filas resaltadas no resaltan nada. */
.pulsables li[role='button'] {
  margin: 0 calc(var(--margen) * -0.4);
  padding-left: calc(var(--margen) * 0.4);
  padding-right: calc(var(--margen) * 0.4);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 120ms var(--curva), transform 100ms var(--curva);
}
.pulsables li[role='button']:hover { background: var(--superficie); }
.pulsables li[role='button']:active { transform: scale(0.99); }
.pulsables li[role='button']:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

.categorias li {
  display: grid;
  /* El nombre cede antes que la cifra: partir un importe en dos renglones no
     se lee, y un nombre largo sí aguanta. */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 1rem;
  align-items: baseline;
  padding: 0.75rem 0;
}
.categorias .barra {
  grid-column: 1 / -1;
  height: 2px;
  margin: 0;
  background: var(--linea);
  border-radius: 1px;
  overflow: hidden;
}
/* Haberse pasado es el aviso, no una aclaración al pie. */
.categorias .en-rojo .evento-detalle { color: var(--alarma); }
.categorias .barra i,
.barra i {
  display: block;
  height: 100%;
  background: var(--agua);
  border-radius: 1px;
}

.barra {
  height: 2px;
  margin: 0.625rem 0 0;
  background: var(--linea);
  border-radius: 1px;
  overflow: hidden;
}
/* Pasarse no se dibuja rompiendo el rectángulo: se dice con color, y la cifra
   de al lado da el cuánto. */
.barra.pasada i { background: var(--alarma); }

/* ── El mes en tres tramos ─────────────────────────────────────────── */

#mes-resumen { display: grid; gap: 1.5rem; }
@media (min-width: 34rem) { #mes-resumen { grid-template-columns: repeat(3, 1fr); } }

.tramo-rotulo { margin: 0; font-size: 0.8125rem; color: var(--secundario); }
.tramo-cifra {
  margin: 0.25rem 0 0;
  font-family: var(--cifras);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.tramo-cifra.en-rojo { color: var(--alarma); }
.tramo-detalle { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--secundario); }

/* ── Mes a mes y objetivos ───────────────────────────────────────── */

.meses, .presupuestos, .objetivos, .clasificar { margin: 0; padding: 0; list-style: none; }

.meses li, .presupuestos li, .objetivos li, .clasificar li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--linea);
}
.meses li:last-child, .presupuestos li:last-child, .objetivos li:last-child,
.clasificar li:last-child { border-bottom: 0; }

.clasificar-fila select { margin-top: 0.5rem; width: 100%; }

.clasificar-unico {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--secundario);
}

/* Las preguntas viven en la rejilla de tres columnas de .eventos, así que la
   casilla caería en la columna de la fecha y el texto saldría en vertical. Va
   en una fila entera, alineada con el nombre. */
.pregunta-anual {
  grid-column: 2 / 4;
  margin-top: 0.625rem;
  padding: 0.25rem 0;
  cursor: pointer;
}

.pregunta-anual input[type='checkbox'] {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  accent-color: var(--acento);
}

.palancas { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.palanca { padding: 0.9rem 0; border-bottom: 1px solid var(--linea); }
.palanca:last-child { border-bottom: 0; }
.palanca-fija { opacity: 0.65; }

/* Diecinueve categorías son diecinueve interruptores: a la derecha y pequeño
   para que la lista se siga leyendo por los nombres y las cifras. */
.palanca-apagar {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--secundario);
  cursor: pointer;
}

.palanca-apagar input[type='checkbox'] {
  order: 1;
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
  accent-color: var(--acento);
}

/* Apagada no se tacha ni se esconde: sigue siendo dinero que gastas, sólo que
   no ahora. Se atenúa lo justo para no competir con lo que sí cuenta. */
.palanca-apagada .mes-nombre { color: var(--secundario); }
.palanca-apagada .palanca-apagar { color: var(--texto); }

/* La aclaración sube -0.75rem para pegarse a un párrafo normal; debajo de una
   cifra de 6rem eso la mete dentro de los números. */
#simulador-efecto { margin-top: 0.5rem; }

.palanca input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2.25rem;
  margin: 0;
  background: transparent;
}

/* Ámbar sólo el tirador. Una barra entera de ámbar grita, y el ámbar de esta
   aplicación significa «mírame», no «tócame». */
.palanca input[type='range']::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--linea);
  border-radius: 2px;
}
.palanca input[type='range']::-moz-range-track {
  height: 2px;
  background: var(--linea);
  border-radius: 2px;
}
.palanca input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -0.69rem;
  border: 0;
  border-radius: 50%;
  background: var(--acento);
}
.palanca input[type='range']::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--acento);
}
.palanca input[type='range']:focus-visible {
  outline: 2px solid var(--texto);
  outline-offset: 2px;
}
.meses li { cursor: pointer; }
.meses li.elegido .mes-nombre { color: var(--acento); }
.meses li:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.mes-cabecera {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.mes-nombre { font-weight: 500; }
.mes-ahorro, .mes-cabecera .cifras { font-family: var(--cifras); font-variant-numeric: tabular-nums; }
.en-rojo { color: var(--alarma); }

.mes-detalle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--secundario);
}

.mes-aviso { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--secundario); }
.apretado .mes-aviso { color: var(--acento); }
.presupuesto.pasada .mes-aviso { color: var(--alarma); }

/* ── Grupos ────────────────────────────────────────────────────── */

.grupo + .grupo { margin-top: 2.25rem; }
.grupo .rotulo { margin-bottom: 0.75rem; }
.grupo-cabecera {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--linea);
}
.grupo-cabecera .rotulo { margin: 0; }

/* Mismo gesto y mismo marcador nativo que los desplegables del Resumen y de
   Previsión. Plegado, el grupo sigue diciendo lo que cuesta al mes. */
details.grupo > summary { cursor: pointer; list-style-position: inside; }
details.grupo > summary::marker { color: var(--secundario); }
.grupo-suma { color: var(--secundario); font-size: 0.875rem; }

.destacado { color: var(--texto); font-weight: 500; }

/* ── Ajustes ────────────────────────────────────────────────────────────── */

.datos {
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem 1rem;
}
.datos dt { color: var(--secundario); font-size: 0.9375rem; }
.datos dd { margin: 0; text-align: right; }

.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.acciones-centro { justify-content: center; margin-top: 1.5rem; }

/* ── Campos ────────────────────────────────────────────────────── */

.campo {
  width: 100%;
  padding: 0.6875rem 0.75rem;
  font: inherit;
  font-size: 1rem;              /* menos de 16px y el móvil hace zoom al tocar */
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 0.5rem;
  transition: border-color 150ms var(--curva);
}
.campo::placeholder { color: var(--secundario); opacity: 0.7; }
.campo:hover { border-color: #2D3945; }
.campo:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.campo.cifras { font-family: var(--cifras); }
.campo-corto { width: 7rem; }

.campo-linea { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.sufijo { color: var(--secundario); font-size: 0.875rem; }

.campo-caja + .campo-caja { margin-top: 1rem; }
.campo-etiqueta {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  color: var(--secundario);
}
.campo-pista { margin-top: 0.5rem; }

/* ── Filtros ─────────────────────────────────────────────────── */

.filtros {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  /* Que el primero y el último no queden pegados al borde al desplazar. */
  padding: 0.125rem;
}
.filtros::-webkit-scrollbar { display: none; }

.filtro {
  flex: 0 0 auto;
  padding: 0.4375rem 0.875rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--secundario);
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: 999px;
  cursor: pointer;
  transition: color 150ms var(--curva), border-color 150ms var(--curva), background 150ms var(--curva);
}
.filtro:hover { color: var(--texto); border-color: #2D3945; }
.filtro:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.filtro[aria-pressed='true'] {
  color: var(--fondo);
  background: var(--texto);
  border-color: var(--texto);
}

.boton {
  display: inline-block;
  padding: 0.6875rem 1.25rem;
  border: 1px solid var(--linea);
  border-radius: 0.5rem;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background 150ms var(--curva), border-color 150ms var(--curva), transform 100ms var(--curva);
}
.boton:hover { background: #1A222A; border-color: #2D3945; }
.boton:active { transform: scale(0.97); }
.boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.boton-sobrio { color: var(--secundario); background: transparent; }
.boton-grande { padding: 0.875rem 1.75rem; font-size: 1rem; }
.boton-peligro { color: var(--alarma); }
.boton-peligro:hover { border-color: var(--alarma); }

.nota {
  margin: 1.5rem 0 0;
  max-width: 32rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--secundario);
}

.nota .error, .error { color: var(--acento); }

/* Un vacío explicado. Un cero pelado no informa: hace pensar que algo falla. */
.vacio { margin: 0; max-width: 32rem; }

.rotulo-menor { margin: 2.5rem 0 1rem; }

/* Un botón que no parece un botón: la acción existe pero no reclama el sitio. */
.enlace {
  padding: 0;
  font: inherit;
  color: var(--texto);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linea);
  cursor: pointer;
}
.enlace:hover { border-bottom-color: var(--secundario); }
.enlace:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* ── Hojas modales ──────────────────────────────────────────────────────── */

.hoja {
  width: min(28rem, calc(100vw - 2.5rem));
  max-height: calc(100svh - 4rem);
  padding: 2rem;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 0.75rem;
}
.hoja::backdrop { background: rgb(5 7 9 / 0.75); }
.hoja .rotulo { margin-bottom: 0.75rem; }
.hoja .nota { margin-top: 0; }
.hoja .acciones { margin-top: 1.5rem; }

#clave-campo { margin-top: 1.25rem; font-family: var(--cifras); }
#clave-error:empty { display: none; }

/* ── Detalle de un movimiento ───────────────────────────────────────────── */

.detalle-cabecera { padding-bottom: 1.25rem; border-bottom: 1px solid var(--linea); }
.detalle-nombre { margin: 0; font-size: 1.125rem; font-weight: 500; }
.detalle-importe {
  margin: 0.25rem 0 0;
  font-size: 1.75rem;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.detalle-importe.entrada { color: var(--bien); }
.detalle-fecha { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--secundario); }
/* El concepto tal cual lo escribe el banco: feo, pero es la prueba. */
.detalle-crudo {
  margin: 0.5rem 0 0;
  font-family: var(--cifras);
  font-size: 0.75rem;
  color: var(--secundario);
  word-break: break-word;
}
.detalle-campos { margin-top: 1.25rem; }
.detalle-campos > .campo { margin-top: 1rem; }
.detalle-campos .recordar { margin-top: 0.875rem; }

/* ── Recado ─────────────────────────────────────────────────────────────── */

/* Lo que la aplicación tiene que contar no puede vivir sólo en Ajustes: con
   seis áreas, casi nunca es la que está abierta. */
/* Tirar hacia abajo para buscar lo del otro aparato. */
.tirador {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top) + 0.25rem);
  z-index: 9;
  margin: 0;
  padding: 0.4rem 0.9rem;
  transform: translate(-50%, -3rem);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--secundario);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}
.tirador.asomando { opacity: 1; }
.tirador.suave { transition: transform 260ms var(--curva), opacity 260ms var(--curva); }
.tirador.trabajando { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .tirador.suave { transition: none; }
}

.recado {
  position: fixed;
  left: 50%;
  bottom: calc(4.5rem + env(safe-area-inset-bottom));
  z-index: 8;
  width: min(24rem, calc(100vw - 2rem));
  margin: 0;
  padding: 0.75rem 1rem;
  transform: translate(-50%, 0.5rem);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 0.625rem;
  font-size: 0.875rem;
  color: var(--texto);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--curva), transform 200ms var(--curva);
}
.recado.visible { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 46rem) { .recado { bottom: 1.5rem; } }

.hay-version {
  position: fixed;
  left: 50%;
  bottom: calc(4.5rem + env(safe-area-inset-bottom));
  z-index: 9;
  width: min(24rem, calc(100vw - 2rem));
  padding: 0.75rem 1rem;
  transform: translateX(-50%);
  background: var(--superficie);
  border: 1px solid var(--acento);
  border-radius: 0.625rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--acento);
  cursor: pointer;
}
.hay-version[hidden] { display: none; }
.hay-version:active { transform: translateX(-50%) scale(0.97); }
@media (min-width: 46rem) { .hay-version { bottom: 1.5rem; } }

.recordar {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin: 1rem 0 0;
  color: var(--secundario);
  font-size: 0.85rem;
  cursor: pointer;
}
.recordar input { accent-color: var(--acento); }

/* ── Bienvenida ─────────────────────────────────────────────────────────── */

.bienvenida {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 var(--margen);
}
.bienvenida[hidden] { display: none; }

.bienvenida h1 {
  margin: 0;
  font-size: clamp(2.5rem, 9vw, 3.5rem);
  font-weight: 300;
  letter-spacing: -0.03em;
}

.lema {
  margin: 0.75rem 0 2.5rem;
  font-size: 1.125rem;
  color: var(--secundario);
}

.bienvenida .boton { align-self: flex-start; }

/* ── Soltar ficheros ────────────────────────────────────────────────────── */

.soltar {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgb(11 14 17 / 0.92);
  z-index: 10;
}
.soltar p {
  padding: 2rem 3rem;
  border: 1px dashed var(--acento);
  border-radius: 0.75rem;
  color: var(--acento);
}
.soltar.activo { display: grid; }

@media (prefers-reduced-motion: reduce) {
  /* La lámina aparece ya dibujada. La información es la misma; lo único que
     se pierde es el gesto. */
  .dibujando .trazo-agua,
  .dibujando .relleno-agua,
  .dibujando .marca-suelo,
  .dibujando .punto-suelo,
  .dibujando .etiqueta-lamina {
    animation: none;
    opacity: 1;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .boton { transition: none; }
  .filtro, .campo, .pestana, .pulsables li[role='button'] { transition: none; }
  .recado { transition: opacity 1ms; transform: translate(-50%, 0); }
}

/* ── La cascada del mes ───────────────────────────────────────────────── */
/* Cada escalón resta de lo que quedaba. La sangría de la izquierda es la que
   cuenta la historia: lo que queda va bajando fila a fila. */
.cascada { margin: 0; padding: 0; list-style: none; }
.cascada-fila { padding: 0.75rem 0; border-bottom: 1px solid var(--linea); }
.cascada-cabeza { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; }
.cascada-titulo { font-weight: 600; }
.cascada-queda { margin: 0.125rem 0 0; font-size: 0.8125rem; color: var(--secundario); text-align: right; }

/* Lo que ya se gastó es un hecho y va en el color del texto; lo que falta es
   una cuenta y va en ámbar, el mismo que usa el Resumen para lo previsto. */
.cascada-fila.previsto .cascada-titulo,
.cascada-fila.previsto .cascada-cabeza .cifras { color: var(--acento); }
.cascada-detalle li.previsto .cascada-nombre,
.cascada-detalle li.previsto .cascada-cuando,
.cascada-detalle li.previsto .cifras { color: var(--acento); }

/* Los escalones con detalle se abren. El importe y el «quedan» se leen
   siempre; el desglose sólo cuando se pide. Mismo marcador nativo que los
   desplegables del Resumen: son el mismo gesto. */
.cascada-desglose > summary { cursor: pointer; list-style-position: inside; }
.cascada-vacio { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--secundario); }

.cascada-detalle { margin: 0.5rem 0 0; padding: 0 0 0 0.75rem; border-left: 2px solid var(--linea); list-style: none; }
.cascada-detalle li { display: grid; grid-template-columns: 1fr auto; gap: 0 0.75rem; padding: 0.25rem 0; font-size: 0.875rem; }
.cascada-cuando { grid-column: 1; font-size: 0.75rem; color: var(--secundario); }
.cascada-detalle .cifras { grid-row: 1; grid-column: 2; color: var(--texto); }

/* Sólo sale donde la app duda, así que puede permitirse ocupar su línea. */
.cascada-marca { display: flex; gap: 0.45rem; align-items: center; grid-column: 1 / 3; margin-top: 0.125rem; font-size: 0.75rem; color: var(--secundario); cursor: pointer; }
.cascada-marca input[type='checkbox'] { width: 0.9rem; height: 0.9rem; flex: none; accent-color: var(--acento); }

/* El resultado no es un escalón más: es la respuesta. */
.cascada-final { padding-top: 1rem; border-bottom: 0; }
.cascada-final .cascada-titulo { font-size: 1.0625rem; }
.cascada-final .cifras { font-size: 1.375rem; color: var(--bien); }
.cascada-final .cifras.alarma { color: var(--alarma); }

/* La fila entera abre la ficha del recibo: tiene que parecerlo al pulsarla. */
.cascada-detalle li[data-recibo] { cursor: pointer; border-radius: 0.375rem; transition: background-color 120ms ease; }
.cascada-detalle li[data-recibo]:active { background: var(--superficie); transform: scale(0.99); }
@media (prefers-reduced-motion: reduce) { .cascada-detalle li[data-recibo]:active { transform: none; } }

/* El mes por sí solo no dice nada: con 3.800 € en la cuenta que falten 200 no
   es lo mismo que con 200. Va pegado al resultado, no al pie. */
.cascada-saldo-linea { margin: 0.375rem 0 0; font-size: 0.875rem; color: var(--secundario); }
.cascada-saldo-linea.alarma { color: var(--alarma); }

/* Las cuatro cifras juntas: la decisión no se puede tomar viendo una sola. */
.ventana { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ventana-opcion {
  flex: 1 1 7rem; display: flex; flex-direction: column; gap: 0.125rem;
  padding: 0.625rem 0.75rem; text-align: left; cursor: pointer;
  background: var(--fondo); color: var(--secundario);
  border: 1px solid var(--linea); border-radius: 0.5rem;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ventana-opcion:active { transform: scale(0.97); }
.ventana-opcion.elegida { border-color: var(--acento); color: var(--texto); }
.ventana-plazo { font-size: 0.8125rem; }
.ventana-cifra { font-size: 0.9375rem; color: inherit; }
.ventana-opcion.elegida .ventana-cifra { color: var(--acento); }
@media (prefers-reduced-motion: reduce) {
  .ventana-opcion { transition: none; }
  .ventana-opcion:active { transform: none; }
}

/* Saltarse un mes no es darse de baja: sigue a la vista, tachado, para que no
   se olvide que se saltó. */
.cascada-saltar {
  grid-column: 1 / -1; justify-self: start; margin-top: 0.25rem;
  padding: 0.25rem 0.5rem; font-size: 0.75rem; cursor: pointer;
  background: none; color: var(--secundario);
  border: 1px solid var(--linea); border-radius: 0.375rem;
}
.cascada-botones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cascada-saltar:hover { color: var(--texto); border-color: var(--acento); }
.cascada-saltar:active { transform: scale(0.97); }
.cascada-detalle li.saltado .cascada-nombre,
.cascada-detalle li.saltado .cifras { text-decoration: line-through; opacity: 0.5; }
.cascada-detalle li.saltado .cascada-cuando { color: var(--acento); }
@media (prefers-reduced-motion: reduce) { .cascada-saltar:active { transform: none; } }

/* La cifra sobre la que de verdad se decide algo: lo que queda para vivir. */
.cascada-vivir {
  border-left: 2px solid var(--bien);
  padding-left: 0.75rem;
}

.cascada-vivir.alarma {
  border-left-color: var(--alarma);
}

.cascada-vivir .cascada-importe {
  color: var(--bien);
  font-size: 1.15rem;
}

.cascada-vivir.alarma .cascada-importe {
  color: var(--alarma);
}

.cascada-vivir-lectura {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--secundario);
}

/* El selector de mes del resumen. Va arriba del todo porque manda sobre todo
   lo que hay debajo: si no se ve de qué mes se habla, no se entiende nada. */
.meses-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 1rem 0 0.25rem;
}

.mes-elegido {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  flex: 1;
}

.mes-paso {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--secundario);
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: 999px;
  cursor: pointer;
}

.mes-paso:disabled { opacity: 0.25; cursor: default; }

/* La aclaración de en qué estado está el mes va pegada al selector, no
   flotando entre bloques: es parte de la cabecera, no un bloque más. */
#mes-estado { margin: 0 0 1.25rem; text-align: center; }

/* El saldo de hoy, encima de la bajamar. Va antes que el titular porque es el
   punto de partida: la bajamar es adónde llega ese número, no otro dinero.

   Con cifra propia, no dentro de una frase en gris: es lo primero que se mira
   al abrir. A un tercio del titular, que la respuesta a «¿llego?» sigue siendo
   la bajamar y dos cifras del mismo tamaño no se ordenan solas. */
.saldo-hoy {
  margin: 0 0 2rem;
  font-family: var(--cifras);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 6vw, 2.25rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--texto);
}

/* Pegado a su cifra: el rótulo de arriba separa bloques, éste etiqueta. */
.rotulo-hoy { margin-bottom: 0.375rem; }

/* El rango del periodo en la tabla: pequeño, porque es contexto, no dato. */
.mes-rango { margin: 0.125rem 0 0.375rem; font-size: 0.8125rem; color: var(--secundario); }
.mes-saldos { opacity: 0.85; }

/* Las líneas del bloque que se abren. El triángulo por defecto del navegador
   se queda: es el único indicio universal de «esto se puede abrir». */
.desglose { border-bottom: 1px solid var(--linea); }
.desglose:last-of-type { border-bottom: 0; }

.desglose > summary {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  cursor: pointer;
  list-style-position: inside;
}

.desglose-lista { margin: 0 0 0.75rem; padding: 0 0 0 1.25rem; list-style: none; }

.desglose-lista li {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.25rem 0;
  font-size: 0.875rem;
}

.desglose-fecha { color: var(--secundario); font-variant-numeric: tabular-nums; }
.desglose-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Lo que todavía no ha pasado va en ámbar, como la cuenta de abajo. Bajarle la
   opacidad sólo lo hacía costar de leer, y no decía de qué iba. */
.desglose-lista li.previsto .desglose-fecha,
.desglose-lista li.previsto .desglose-nombre,
.desglose-lista li.previsto .cifras { color: var(--acento); }
/* La palabra se queda para quien no distingue el color, pero repetida en doce
   líneas seguidas doblaba el alto de la lista sin añadir nada. */
.desglose-marca {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Una cuenta no es un saldo. Va debajo de la cifra de verdad y en ámbar, que
   aquí quiere decir «esto todavía no ha pasado». */
.datos.previsto { margin-top: 0.75rem; }
.datos.previsto dt, .datos.previsto dd { color: var(--acento); }