* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--fuente-sans);
  font-size: var(--texto-body);
  line-height: var(--interlinea-body);
  color: var(--blanco);
  /* Oscuro + glow: la marca v1.1. */
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(139,92,246,.16), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, rgba(167,139,250,.10), transparent 58%),
    linear-gradient(180deg, var(--noche-950), var(--noche-900));
  background-attachment: fixed;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.pantalla { display: none; }
.pantalla.activa { display: block; }

.marca { font-weight: 400; letter-spacing: .02em; }
.marca b { font-weight: 800; }
.marca.chico { font-size: var(--texto-small); color: var(--niebla); }
.marca.chico b { color: var(--blanco); }

/* --- PIN --- */
#pantalla-pin { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; }
.pin-caja { width: min(22rem, 100%); text-align: center; }
.pin-caja .marca { font-size: var(--texto-h3); margin-bottom: .25rem; }
.sub { color: var(--niebla); font-size: var(--texto-small); margin: 0 0 1.5rem; }
#pin {
  width: 100%; text-align: center; letter-spacing: .5em;
  font-size: var(--texto-h4); padding: .85rem;
  border-radius: 12px; margin-bottom: .75rem;
}

input, select {
  background: var(--superficie-input);
  border: 1px solid var(--borde-noche);
  color: var(--blanco);
  font-family: inherit; font-size: var(--texto-body);
  padding: .7rem .85rem; border-radius: 10px; width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--syntra-400); outline-offset: 1px; }

button { font-family: inherit; cursor: pointer; border: 0; }
.primario {
  background: linear-gradient(135deg, var(--syntra-400), var(--syntra-600));
  color: var(--blanco); font-weight: 600; font-size: var(--texto-body);
  padding: .8rem 1.2rem; border-radius: 10px; width: 100%;
}
.secundario {
  background: transparent; color: var(--niebla);
  border: 1px solid var(--borde-noche); padding: .8rem 1.2rem; border-radius: 10px;
}
.error { color: #FCA5A5; font-size: var(--texto-small); }

/* --- Estructura --- */
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.1rem .5rem;
}
.icono {
  background: transparent; color: var(--niebla);
  font-size: 1.2rem; padding: .35rem .6rem; border-radius: 8px;
}
.tabs {
  display: flex; gap: .35rem; padding: 0 1.1rem .6rem;
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, var(--noche-900) 70%, transparent);
}
.tab {
  background: transparent; color: var(--niebla);
  font-size: var(--texto-small); padding: .45rem .7rem;
  border-radius: 999px; border: 1px solid transparent;
}
.tab.activa { color: var(--blanco); border-color: var(--borde-noche); background: rgba(255,255,255,.04); }
.badge {
  background: var(--syntra-500); color: var(--blanco);
  font-size: 11px; padding: .05rem .35rem; border-radius: 999px; margin-left: .2rem;
}
main { padding: 0 1.1rem 6rem; }
.vista { display: none; }
.vista.activa { display: block; }

/* --- Tarjetas de saldo --- */
.tarjetas { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); margin-bottom: 1rem; }
.tarjeta {
  background: rgba(255,255,255,.035); border: 1px solid var(--borde-noche);
  border-radius: 14px; padding: .8rem .9rem;
}
.tarjeta .nombre { font-size: var(--texto-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--niebla); }
.tarjeta .saldo { font-family: var(--fuente-mono); font-size: var(--texto-h4); margin-top: .25rem; }
.tarjeta .aviso { font-size: 11px; color: var(--ambar-500); margin-top: .2rem; }

.panel {
  background: rgba(255,255,255,.03); border: 1px solid var(--borde-noche);
  border-radius: 14px; padding: .9rem 1rem; margin-bottom: 1rem;
}
.panel h3 {
  font-size: var(--texto-micro); text-transform: uppercase; letter-spacing: .08em;
  color: var(--niebla); margin: 0 0 .6rem; font-weight: 500;
}
.cifras { display: flex; gap: 1.5rem; }
.cifra .v { font-family: var(--fuente-mono); font-size: var(--texto-h3); display: block; }
.cifra .l { font-size: var(--texto-small); color: var(--niebla); }
.gasto { color: #FCA5A5; }
.ingreso { color: #86EFAC; }

.barra { display: flex; justify-content: space-between; align-items: center; padding: .35rem 0; font-size: var(--texto-small); }
.barra .pista { height: 4px; background: rgba(255,255,255,.07); border-radius: 999px; margin-top: .25rem; }
.barra .relleno { height: 100%; background: linear-gradient(90deg, var(--syntra-400), var(--syntra-600)); border-radius: 999px; }

/* --- Lista de movimientos --- */
.lista { display: flex; flex-direction: column; }
.mov {
  display: flex; justify-content: space-between; gap: .75rem;
  padding: .7rem 0; border-bottom: 1px solid rgba(52,52,79,.5);
}
.mov .izq { min-width: 0; }
.mov .comercio { font-size: var(--texto-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mov .meta { font-size: var(--texto-micro); color: var(--niebla); margin-top: .1rem; }
.mov .monto { font-family: var(--fuente-mono); font-size: var(--texto-body); white-space: nowrap; }
.etiqueta {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid var(--borde-noche); border-radius: 999px; padding: .05rem .4rem; margin-left: .35rem;
}
.etiqueta.wallet { color: var(--syntra-300); border-color: var(--syntra-300); }
.etiqueta.sugerido { color: var(--ambar-500); border-color: var(--ambar-500); }

.pend-item {
  background: rgba(255,255,255,.03); border: 1px solid var(--borde-noche);
  border-radius: 12px; padding: .8rem .9rem; margin-bottom: .6rem;
}
.pend-item .titulo { font-size: var(--texto-small); }
.pend-item .extracto {
  font-family: var(--fuente-mono); font-size: 11px; color: var(--niebla);
  max-height: 5.5rem; overflow: auto; white-space: pre-wrap;
  margin: .5rem 0; padding: .5rem; background: rgba(0,0,0,.25); border-radius: 8px;
}
.acciones { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.acciones button { font-size: var(--texto-small); padding: .4rem .7rem; border-radius: 8px; }
.chip { background: rgba(255,255,255,.06); color: var(--blanco); }
.chip.ok { background: rgba(21,128,61,.35); }
.chip.no { background: rgba(220,38,38,.25); }

.vacio { color: var(--niebla); font-size: var(--texto-small); text-align: center; padding: 2rem 1rem; }

.fab {
  position: fixed; right: 1.1rem; bottom: calc(1.3rem + env(safe-area-inset-bottom));
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--syntra-400), var(--syntra-600));
  color: var(--blanco); font-size: 1.7rem; line-height: 1;
  box-shadow: 0 8px 28px rgba(109,40,217,.45);
}

dialog {
  border: 1px solid var(--borde-noche); border-radius: 16px;
  background: var(--noche-950); color: var(--blanco);
  width: min(24rem, 92vw); padding: 1.2rem;
}
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog h3 { margin: 0 0 1rem; font-size: var(--texto-h4); }
dialog label { display: block; font-size: var(--texto-small); color: var(--niebla); margin-bottom: .8rem; }
dialog label input, dialog label select { margin-top: .3rem; }
dialog label.fila { display: flex; align-items: center; gap: .5rem; }
dialog label.fila input { width: auto; margin: 0; }
dialog menu { display: flex; gap: .5rem; padding: 0; margin: .5rem 0 0; }
dialog menu button { flex: 1; }