:root {
  color-scheme: light dark;
  --borde: color-mix(in srgb, CanvasText 14%, transparent);
  --tenue: color-mix(in srgb, CanvasText 6%, Canvas);
  --gasto: light-dark(#b3261e, #ffb4ab);
  --ingreso: light-dark(#1b6e3c, #7fd99a);
  --neutro: color-mix(in srgb, CanvasText 55%, Canvas);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: Canvas; color: CanvasText;
}
#raiz { max-width: 46rem; margin: 0 auto; padding: 1rem 1rem 4rem; }

h1 { font-size: 1.35rem; letter-spacing: -.02em; margin: 0; }
h2 { font-size: 1.02rem; margin: 0 0 .6rem; }
h3 { font-size: .92rem; margin: 1.25rem 0 .5rem; opacity: .65; font-weight: 600;
     text-transform: uppercase; letter-spacing: .04em; }
p { margin: .3rem 0 .7rem; }
.suave { opacity: .65; font-size: .88rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }

/* ------------------------------------------------------------- cabecera -- */
header.barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .5rem 0 1rem;
}
nav.pestanas {
  display: flex; gap: .25rem; overflow-x: auto; padding-bottom: .5rem;
  border-bottom: 1px solid var(--borde); margin-bottom: 1rem;
}
nav.pestanas button {
  flex: none; border: none; background: none; color: inherit; cursor: pointer;
  font: inherit; padding: .45rem .8rem; border-radius: .5rem; opacity: .6;
  white-space: nowrap;
}
nav.pestanas button.activa { opacity: 1; font-weight: 600; background: var(--tenue); }
nav.pestanas .globo {
  display: inline-block; min-width: 1.3em; margin-left: .35em; padding: 0 .35em;
  border-radius: 1em; font-size: .75em; font-weight: 700; text-align: center;
  background: var(--gasto); color: Canvas;
}

/* -------------------------------------------------------------- tarjetas -- */
.tarjeta {
  border: 1px solid var(--borde); border-radius: .75rem;
  padding: 1rem; margin-bottom: .75rem; background: var(--tenue);
}
.fila { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.entre { justify-content: space-between; }

/* ------------------------------------------------------------ controles -- */
input, select, textarea {
  padding: .5rem .6rem; border: 1px solid color-mix(in srgb, CanvasText 22%, transparent);
  border-radius: .5rem; background: Canvas; color: CanvasText; font: inherit;
  max-width: 100%;
}
label.campo { display: block; font-size: .82rem; opacity: .75; margin: .5rem 0 .2rem; }
button {
  padding: .45rem .85rem; border-radius: .5rem; font: inherit; cursor: pointer;
  border: 1px solid color-mix(in srgb, CanvasText 22%, transparent);
  background: color-mix(in srgb, CanvasText 7%, Canvas); color: CanvasText;
}
button.primario {
  background: color-mix(in srgb, CanvasText 87%, Canvas); color: Canvas;
  border-color: transparent; font-weight: 500;
}
button.chico { padding: .25rem .6rem; font-size: .85rem; }
button:disabled { opacity: .45; cursor: default; }

/* ----------------------------------------------------------- movimientos -- */
ul.lista { list-style: none; padding: 0; margin: 0; }
ul.lista > li {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .7rem 0; border-top: 1px solid var(--borde);
}
ul.lista > li:first-child { border-top: none; }
.mov-cuerpo { flex: 1; min-width: 0; }
.mov-titulo { font-weight: 500; overflow-wrap: anywhere; }
.mov-meta { font-size: .82rem; opacity: .62; }
.mov-monto { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.mov-monto.debito { color: var(--gasto); }
.mov-monto.credito { color: var(--ingreso); }
.mov-monto.traslado { color: var(--neutro); }

.etiqueta {
  display: inline-block; font-size: .74rem; padding: .1em .5em; border-radius: 1em;
  background: color-mix(in srgb, CanvasText 12%, transparent); margin-left: .35em;
}
.aviso {
  border-left: 3px solid var(--gasto); padding: .5rem .75rem; margin: .5rem 0;
  background: color-mix(in srgb, var(--gasto) 8%, Canvas); font-size: .88rem;
  border-radius: 0 .4rem .4rem 0;
}

/* ------------------------------------------------------------- resumen --- */
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .5rem; }
.dato { padding: .6rem .75rem; border: 1px solid var(--borde); border-radius: .6rem; }
.dato .n { font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.dato .r { font-size: .78rem; opacity: .62; }

.barra-cat { height: .35rem; border-radius: 1em; background: var(--borde); overflow: hidden; margin-top: .25rem; }
.barra-cat > i { display: block; height: 100%; background: color-mix(in srgb, CanvasText 45%, Canvas); }

.error { color: var(--gasto); font-size: .9rem; }
.exito { color: var(--ingreso); font-size: .9rem; }
[hidden] { display: none !important; }
.cargando { opacity: .5; }

@media (max-width: 30rem) {
  #raiz { padding: .75rem .75rem 4rem; }
  .tarjeta { padding: .8rem; }
}