/* Cuentas claras. Pensado primero para el celular; desde 960px pasa a diseño de notebook.
   Letra grande, mucho contraste y botones amplios: la usa alguien que no quiere pelearse con la tecnología. */

:root {
  color-scheme: light;
  --fondo: #f3f0e8;
  --papel: #fffdf8;
  --tinta: #18241e;
  --tinta-2: #434f48;
  --tinta-3: #5d6961;
  --linea: #e1dccf;
  --verde: #1c5a45;
  --verde-hondo: #12382c;
  --verde-claro: #dcebe2;
  --menta: #b9dcc9;
  --ambar: #e79a2e;
  --ambar-claro: #fbecd0;
  --terra: #a23c26;
  --terra-claro: #f8e3db;
  --entro: #157a58;
  --salio: #e79a2e;
  --radio: 18px;
  --radio-chico: 14px;
  --sombra: 0 1px 2px rgba(24, 36, 30, 0.05), 0 10px 28px rgba(24, 36, 30, 0.06);
  --letra: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulos: "Outfit", var(--letra);
  --nav-alto: 4.5rem;
}

html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }
html[data-letra="grande"] { font-size: 125%; }
html[data-letra="muy-grande"] { font-size: 140%; }

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 1rem;
  line-height: 1.5;
  min-height: 100dvh;
  padding-bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom));
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, .heroe-numero, .avance-numero, .detalle-monto { font-family: var(--titulos); letter-spacing: -0.015em; }
h1 { font-size: 1.7rem; line-height: 1.15; font-weight: 700; text-wrap: balance; }
h2 { font-size: 1.22rem; line-height: 1.25; font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 600; }
small { font-size: 0.86rem; }
b, strong { font-weight: 700; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; border-radius: 8px; }
#vista:focus { outline: none; }

.oculto, .saltar:not(:focus) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.saltar:focus { position: fixed; top: 8px; left: 8px; z-index: 50; background: var(--tinta); color: var(--papel); padding: 0.6rem 1rem; border-radius: 10px; }

.monto { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.monto.entra, .detalle-monto.entra { color: var(--entro); }
.falta { color: var(--terra); }

/* ---------- Barra de arriba (celular) ---------- */

.arriba {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1rem 0.3rem;
}
.marca { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--titulos); font-weight: 700; font-size: 1.15rem; text-decoration: none; letter-spacing: -0.01em; }
.marca-ico { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 12px; background: var(--verde); color: var(--papel); font-size: 1.2rem; }
.arriba-ajustes {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.7rem; padding: 0 0.9rem;
  border-radius: 999px; text-decoration: none; font-weight: 500; color: var(--tinta-2); background: var(--papel); border: 1px solid var(--linea);
}
.arriba-ajustes i { font-size: 1.25rem; }

/* ---------- Navegación: abajo en el celular, al costado en la notebook ---------- */

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--papel); border-top: 1px solid var(--linea);
  padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom));
}
.nav .solo-pc { display: none; }
.nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
  min-height: 3.6rem; text-decoration: none; color: var(--tinta-2); font-size: min(0.8rem, 3.7vw); font-weight: 500; border-radius: 14px;
}
.nav-item i { font-size: 1.55rem; display: grid; place-items: center; width: 3.4rem; height: 1.9rem; border-radius: 999px; transition: background 0.15s; }
.nav-item.activo { color: var(--verde); font-weight: 700; }
.nav-item.activo i { background: var(--verde-claro); }

/* ---------- Contenido ---------- */

#vista { padding: 0.75rem 1rem 6rem; max-width: 46rem; margin: 0 auto; }

.cabeza { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.1rem; }
.saludo { color: var(--tinta-2); font-weight: 500; }
.bajada { color: var(--tinta-2); margin-top: 0.25rem; }

.mes { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: var(--papel); border: 1px solid var(--linea); border-radius: 999px; padding: 0.25rem; }
.mes-nombre { font-family: var(--titulos); font-weight: 600; font-size: 1.1rem; text-align: center; flex: 1; }
.mes-btn { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 999px; border: 0; background: var(--verde-claro); color: var(--verde); font-size: 1.3rem; }
.mes-btn:disabled { background: transparent; color: var(--linea); cursor: default; }

.tarjeta { background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.1rem; display: flex; flex-direction: column; gap: 0.8rem; }
.tarjeta.sin-relleno { padding: 0.2rem 1rem; gap: 0; }
.tarjeta.centro { align-items: center; text-align: center; padding: 1.8rem 1.2rem; }
.tarjeta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.tarjeta-cabeza h2 i { color: var(--ambar); margin-right: 0.2rem; }
.col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.grilla-inicio, .grilla-numeros { display: grid; gap: 1rem; }
.angosto { display: flex; flex-direction: column; gap: 1rem; max-width: 38rem; }

.enlace { color: var(--verde); font-weight: 700; text-underline-offset: 3px; }
.nota { color: var(--tinta-2); font-size: 0.9rem; }
.nota i { vertical-align: -0.12em; }
.titulo-seccion { margin: 1.4rem 0 0.7rem; }
.error { color: var(--terra); background: var(--terra-claro); border-radius: var(--radio-chico); padding: 0.8rem 1rem; font-weight: 500; }

.cartel { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; background: var(--ambar-claro); border-radius: var(--radio); padding: 0.8rem 1rem; margin-bottom: 1rem; }
.cartel > i { font-size: 1.4rem; }
.cartel span { flex: 1; min-width: 12rem; }

.solo { background: var(--verde-claro); border-radius: var(--radio); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.solo-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.solo h2 i { color: var(--verde); margin-right: 0.2rem; }
.solo li { display: flex; gap: 0.65rem; padding: 0.35rem 0; }
.solo li i { flex: none; font-size: 1.35rem; color: var(--verde); margin-top: 0.1rem; }
.conexion { display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0; flex-wrap: wrap; }
.conexion .pago-texto { flex: 1 1 10rem; }
.conexion > .sello { flex: 1 1 100%; padding-left: 3.55rem; }
.conexion-accion { flex: 1 1 100%; padding-left: 3.55rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.conexion-accion small { color: var(--tinta-2); }
.codigo-caja { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; background: var(--fondo); border-radius: var(--radio-chico); padding: 0.9rem 1rem; width: 100%; }
.codigo { font-family: var(--titulos); font-size: 2rem; font-weight: 700; letter-spacing: 0.18em; user-select: all; }
.enlace-caja { background: var(--papel); border: 2px dashed #b9b3a3; border-radius: var(--radio-chico); padding: 0.8rem 1rem; overflow-wrap: anywhere; user-select: all; font-weight: 500; }
.pasos-lista { list-style: decimal; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }

/* ---------- Ingreso ---------- */

body.sin-sesion { padding: 0; }
body.sin-sesion .arriba, body.sin-sesion .nav { display: none; }
.cargando { color: var(--tinta-2); padding: 3rem 0; text-align: center; }
.entrar { display: flex; flex-direction: column; gap: 1rem; max-width: 27rem; margin: 0 auto; padding: 2rem 0.25rem 3rem; }
.entrar-marca { font-family: var(--titulos); font-weight: 700; font-size: 1.15rem; color: var(--verde); margin-top: -0.4rem; }
.entrar h1 { font-size: 2rem; }
.tilde { display: flex; align-items: center; gap: 0.7rem; min-height: 2.7rem; cursor: pointer; }
.tilde input { width: 1.5rem; height: 1.5rem; accent-color: var(--verde); flex: none; }

/* ---------- Botones ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.1rem; padding: 0.6rem 1.3rem; border-radius: var(--radio-chico); border: 2px solid var(--verde);
  background: var(--verde); color: var(--papel); font-weight: 700; font-size: 1rem; text-decoration: none; text-align: center; line-height: 1.2;
  transition: transform 0.08s, background 0.15s;
}
.btn i { font-size: 1.25em; flex: none; }
.btn:hover { background: var(--verde-hondo); border-color: var(--verde-hondo); }
.btn:active { transform: scale(0.98); }
.btn.sec { background: transparent; color: var(--verde); }
.btn.sec:hover { background: var(--verde-claro); border-color: var(--verde); }
.btn.suave { background: var(--verde-claro); border-color: var(--verde-claro); color: var(--verde-hondo); }
.btn.suave:hover { background: var(--menta); border-color: var(--menta); }
.btn.peligro { background: var(--terra); border-color: var(--terra); }
.btn.peligro-suave { background: transparent; border-color: transparent; color: var(--terra); }
.btn.peligro-suave:hover { background: var(--terra-claro); }
.btn.liso { background: transparent; border-color: transparent; color: var(--verde); }
.btn.liso:hover { background: var(--verde-claro); }
.btn.grande { min-height: 3.5rem; font-size: 1.05rem; }
.btn.chico { min-height: 2.7rem; padding: 0.4rem 0.95rem; font-size: 0.92rem; }
.btn.ancho { width: 100%; margin-top: 1rem; }
.btn:disabled { opacity: 0.45; cursor: default; }
.fila-botones { display: flex; flex-direction: column; gap: 0.7rem; }
.fila-botones.pegada { position: sticky; bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom)); z-index: 5; background: var(--fondo); padding: 0.7rem 0; }
.par-botones { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.acciones-inicio { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.2rem; }
.btn.flotante { position: fixed; right: 1rem; bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom) + 0.9rem); z-index: 10; box-shadow: 0 8px 24px rgba(18, 56, 44, 0.3); border-radius: 999px; }

/* ---------- Listas y filas ---------- */

.circulo { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--fondo); color: var(--tinta-2); font-size: 1.35rem; }
.circulo.entra { background: var(--verde-claro); color: var(--verde); }
.circulo.hecho { background: var(--verde); color: var(--papel); }
.circulo.mini { width: 2rem; height: 2rem; font-size: 1.05rem; }

.lista > li + li { border-top: 1px solid var(--linea); }
.mov, .rubro { display: flex; align-items: center; gap: 0.8rem; width: 100%; min-height: 4rem; padding: 0.65rem 0; background: none; border: 0; text-align: left; }
.mov-texto, .pago-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mov-texto b, .pago-texto b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.25; overflow-wrap: anywhere; }
.mov-texto small, .pago-texto small { color: var(--tinta-2); }
.dia { margin: 1.2rem 0 0.5rem; color: var(--tinta-2); font-family: var(--letra); font-size: 0.95rem; font-weight: 700; letter-spacing: 0; }
.resumen-lista { color: var(--tinta-2); font-weight: 500; }

.rubro > i { color: var(--tinta-3); }
.rubro-medio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.rubro-linea { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 0.6rem; }
.rubro-linea b { font-weight: 500; line-height: 1.25; }
.rubro-barra { display: block; height: 0.5rem; }
.rubro-barra span { display: block; height: 100%; background: var(--entro); border-radius: 0 4px 4px 0; }
.rubro:hover .rubro-linea b { text-decoration: underline; text-underline-offset: 3px; }

.pago { display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0; flex-wrap: wrap; }
.pago .pago-texto { flex: 1 1 9rem; }
.pago.vencido .pago-texto small { color: var(--terra); font-weight: 700; }
.tarjeta .pago > .btn { margin-left: 3.55rem; }
.todo-bien { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.todo-bien i, .avance-falta i { color: var(--entro); font-size: 1.4rem; }

.pagos { display: flex; flex-direction: column; gap: 0.6rem; }
.pagos > li + li { border-top: 0; }
.pago.grande { background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); padding: 0.5rem 0.9rem 0.8rem; gap: 0.3rem 0.8rem; }
.pago.grande.vencido { box-shadow: inset 0 0 0 2px var(--terra), var(--sombra); }
.pago.grande.pagado .pago-texto b { color: var(--tinta-2); }
.pago-info { flex: 1 1 100%; display: flex; align-items: center; gap: 0.8rem; min-height: 3.6rem; background: none; border: 0; padding: 0; text-align: left; min-width: 0; }
.pago-accion { margin-left: 3.55rem; }
.sello { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; font-weight: 700; color: var(--tinta-2); }
.sello i { font-size: 1.25rem; color: var(--entro); }
.sello.ojo i { color: #a86a0c; }
.sello.alerta, .sello.alerta i { color: var(--terra); }

.avance { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--verde-hondo); color: #f4f7f2; border-radius: var(--radio); padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.avance-numero { font-size: 2.1rem; font-weight: 700; line-height: 1; }
.avance p { color: var(--menta); }
.avance .avance-numero { color: #fffaf0; }
.avance-falta { display: flex; flex-direction: column; text-align: right; }
.avance-falta small { color: var(--menta); }
.avance-falta b { font-size: 1.25rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.avance-falta i { color: var(--menta); }

.sugerencias { margin-top: 1.4rem; }

/* ---------- Inicio ---------- */

.bienvenida { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.5rem 0.25rem; max-width: 34rem; }
.bienvenida-ico { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: 22px; background: var(--verde); color: var(--papel); font-size: 2.3rem; }
.bienvenida h1 { font-size: 2.1rem; }
.bienvenida p { color: var(--tinta-2); font-size: 1.08rem; }
.bienvenida .nota { font-size: 0.9rem; }

.heroe {
  background: radial-gradient(120% 90% at 100% 0%, #1f6a51 0%, var(--verde-hondo) 62%);
  color: #f4f7f2; border-radius: 24px; padding: 1.4rem 1.3rem 1.3rem; box-shadow: 0 14px 34px rgba(18, 56, 44, 0.22);
}
.heroe-rotulo { color: var(--menta); font-weight: 500; }
.heroe-numero { font-size: min(3.5rem, 11.5vw); font-weight: 700; line-height: 1.08; color: #fffaf0; margin: 0.1rem 0 1.1rem; white-space: nowrap; }
.heroe-numero.largo { font-size: min(3rem, 9.5vw); }
.heroe-numero.negativo { color: #ffc9a8; }
.heroe-pares { display: grid; gap: 0.5rem; }
.heroe-pares > div { display: flex; align-items: center; gap: 0.7rem; background: rgba(255, 255, 255, 0.09); border-radius: 16px; padding: 0.6rem 0.9rem 0.6rem 0.65rem; }
.heroe-pares span:not(.heroe-chip) { color: var(--menta); }
.heroe-pares b { margin-left: auto; font-size: 1.15rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.heroe-chip { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; font-size: 1.1rem; }
.heroe-chip.entra { background: var(--menta); color: var(--verde-hondo); }
.heroe-chip.sale { background: var(--ambar); color: #3a2503; }
.heroe-nota { margin-top: 1rem; color: #d5e6dc; font-size: 0.92rem; }
.heroe-nota b { color: #fffaf0; }

.comparacion { display: flex; align-items: center; gap: 0.6rem; background: var(--papel); border-radius: var(--radio); padding: 0.85rem 1rem; box-shadow: var(--sombra); }
.comparacion span { flex: 1; }
.comparacion i { flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--fondo); font-size: 1.2rem; }
.comparacion.sube i { background: var(--ambar-claro); color: #8a5505; }
.comparacion.baja i { background: var(--verde-claro); color: var(--verde); }

.aviso-item { display: flex; gap: 0.8rem; padding: 0.85rem 0; }
.aviso-item p { color: var(--tinta-2); margin: 0.1rem 0 0.2rem; }
.aviso-ico { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 14px; font-size: 1.3rem; background: var(--fondo); color: var(--tinta-2); }
.aviso-item.alerta .aviso-ico { background: var(--terra-claro); color: var(--terra); }
.aviso-item.ojo .aviso-ico { background: var(--ambar-claro); color: #8a5505; }
.aviso-item.bien .aviso-ico { background: var(--verde-claro); color: var(--verde); }

.vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.8rem; padding: 2.5rem 1rem; }
.vacio p, .tarjeta.centro p { color: var(--tinta-2); max-width: 30rem; }
.vacio-ico { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: var(--verde-claro); color: var(--verde); font-size: 2.2rem; }
.vacio-ico.hecho { background: var(--verde); color: var(--papel); }

/* ---------- Movimientos ---------- */

.filtros { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1rem; }
.buscador { display: flex; align-items: center; gap: 0.6rem; background: var(--papel); border: 2px solid var(--linea); border-radius: var(--radio-chico); padding: 0 0.9rem; min-height: 3.1rem; }
.buscador:focus-within { border-color: var(--verde); }
.buscador i { font-size: 1.3rem; color: var(--tinta-3); }
.buscador input { flex: 1; min-width: 0; border: 0; background: none; outline: none; height: 2.9rem; }
.chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.7rem; padding: 0 1rem; border-radius: 999px; border: 2px solid var(--linea); background: var(--papel); font-weight: 500; }
.chip.activo { background: var(--verde); border-color: var(--verde); color: var(--papel); font-weight: 700; }

.detalle-monto { font-size: 2.3rem; font-weight: 700; line-height: 1.1; }
.detalle-datos { color: var(--tinta-2); }

/* ---------- Formularios ---------- */

.formulario { display: flex; flex-direction: column; gap: 1.1rem; }
.formulario h3 { margin-bottom: 0.6rem; }
.campo { display: flex; flex-direction: column; gap: 0.35rem; }
.campo > span:first-child { font-weight: 700; }
.campo em { font-weight: 400; font-style: normal; color: var(--tinta-2); }
.campo small { color: var(--tinta-2); }
.campo input, .campo select, .con-signo {
  min-height: 3.1rem; width: 100%; padding: 0 0.9rem; background: var(--papel); border: 2px solid #b9b3a3; border-radius: var(--radio-chico); font-size: 1.05rem;
}
.campo input:focus, .campo select:focus, .con-signo:focus-within { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }
.con-signo { display: flex; align-items: center; gap: 0.4rem; }
.con-signo i { font-style: normal; font-weight: 700; color: var(--tinta-2); }
.con-signo input { border: 0; padding: 0; min-height: 2.8rem; box-shadow: none !important; font-weight: 700; font-size: 1.2rem; }
.dos-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; align-items: start; }

.segmento { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.25rem; background: #e6e1d4; border-radius: var(--radio-chico); padding: 0.25rem; }
.seg { min-height: 2.8rem; border: 0; border-radius: 11px; background: transparent; font-weight: 500; padding: 0.3rem 0.5rem; line-height: 1.2; }
.seg.activo { background: var(--papel); font-weight: 700; color: var(--verde-hondo); box-shadow: 0 1px 3px rgba(24, 36, 30, 0.14); }

.cats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.cat-btn { display: flex; align-items: center; gap: 0.55rem; min-height: 3.4rem; padding: 0.4rem 0.7rem; border-radius: var(--radio-chico); border: 2px solid var(--linea); background: var(--papel); text-align: left; line-height: 1.2; font-size: 0.94rem; }
.cat-btn i { flex: none; font-size: 1.4rem; color: var(--tinta-2); }
.cat-btn.activa { border-color: var(--verde); background: var(--verde-claro); font-weight: 700; }
.cat-btn.activa i { color: var(--verde); }

.interruptor { display: flex; align-items: center; gap: 0.8rem; min-height: 3rem; font-weight: 700; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; }
.perilla { flex: none; width: 3.4rem; height: 2rem; border-radius: 999px; background: #b9b3a3; position: relative; transition: background 0.15s; }
.perilla::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--papel); transition: transform 0.15s; }
.interruptor input:checked + .perilla { background: var(--verde); }
.interruptor input:checked + .perilla::after { transform: translateX(1.4rem); }
.interruptor input:focus-visible + .perilla { outline: 3px solid var(--ambar); outline-offset: 3px; }

/* ---------- Subir un resumen ---------- */

.pasos { display: flex; gap: 0.4rem; }
.pasos li { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.86rem; color: var(--tinta-3); border-top: 4px solid var(--linea); padding-top: 0.5rem; }
.pasos span { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--linea); color: var(--tinta-2); font-weight: 700; font-size: 0.86rem; }
.pasos li.actual { color: var(--tinta); font-weight: 700; border-color: var(--verde); }
.pasos li.actual span, .pasos li.hecho span { background: var(--verde); color: var(--papel); }
.pasos li.hecho { border-color: var(--verde); }
.pregunta { font-size: 1.45rem; }

.opciones { display: flex; flex-direction: column; gap: 0.7rem; }
.opcion { display: flex; align-items: center; gap: 0.9rem; min-height: 5rem; padding: 0.8rem 1rem; background: var(--papel); border: 2px solid var(--linea); border-radius: var(--radio); text-align: left; box-shadow: var(--sombra); }
.opcion:hover { border-color: var(--verde); }
.opcion > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.opcion b { font-size: 1.12rem; }
.opcion small { color: var(--tinta-2); }
.opcion > i { color: var(--tinta-3); font-size: 1.2rem; }
.opcion-ico { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 16px; background: var(--verde-claro); color: var(--verde); font-size: 1.7rem; }

.soltar { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; padding: 2rem 1rem; background: var(--papel); border: 3px dashed var(--verde); border-radius: var(--radio); cursor: pointer; }
.soltar:hover { background: var(--verde-claro); }
.soltar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.soltar:focus-within { outline: 3px solid var(--ambar); outline-offset: 3px; }
.soltar b { font-size: 1.15rem; }
.soltar small { color: var(--tinta-2); }
.soltar-ico { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--verde); color: var(--papel); font-size: 2rem; margin-bottom: 0.3rem; }
.soltar.leyendo { border-style: solid; cursor: progress; }

.dato-caja { display: flex; gap: 0.7rem; background: var(--ambar-claro); border-radius: var(--radio); padding: 0.9rem 1rem; }
.dato-caja > i { flex: none; font-size: 1.4rem; color: #8a5505; margin-top: 0.1rem; }

.trio { display: grid; gap: 0.5rem; }
.trio > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; background: var(--papel); border-radius: var(--radio-chico); padding: 0.7rem 0.9rem; box-shadow: var(--sombra); }
.trio small { color: var(--tinta-2); font-size: 1rem; }
.trio b { font-family: var(--titulos); font-size: 1.15rem; white-space: nowrap; }

/* ---------- Mis números ---------- */

.leyenda { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: 0.9rem; color: var(--tinta-2); margin-bottom: 0.9rem; }
.leyenda span, .lectura span { display: inline-flex; align-items: center; gap: 0.4rem; }
.punto { width: 0.8rem; height: 0.8rem; border-radius: 3px; display: inline-block; }
.punto.entro, .barra.entro { background: var(--entro); }
.punto.salio, .barra.salio { background: var(--salio); }

.lienzo { position: relative; height: 13rem; margin-top: 0.4rem; }
.ejes { position: absolute; inset: 0 0 1.9rem 0; display: flex; flex-direction: column; justify-content: space-between; }
.ejes span { position: relative; height: 0; border-top: 1px solid var(--linea); }
.ejes span:last-child { border-color: #c3bdae; }
.ejes em { position: absolute; left: 0; top: -0.65em; font-style: normal; font-size: 0.74rem; line-height: 1.3; color: var(--tinta-3); background: var(--papel); padding-right: 0.4rem; font-variant-numeric: tabular-nums; }
.barras { position: absolute; inset: 0 0 0 3.7rem; display: flex; gap: 2px; }
.grupo { flex: 1; min-width: 0; display: flex; flex-direction: column; background: none; border: 0; padding: 0; border-radius: 10px 10px 8px 8px; }
.par { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.barra { width: min(1.25rem, 40%); min-height: 2px; border-radius: 4px 4px 0 0; }
.eti { height: 1.9rem; line-height: 1.9rem; font-size: 0.82rem; color: var(--tinta-2); text-align: center; }
.grupo.elegido { background: linear-gradient(to bottom, transparent, var(--fondo) 30%); }
.grupo.elegido .eti { color: var(--tinta); font-weight: 700; }
.lectura { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: 0.8rem; padding: 0.8rem 0.9rem; background: var(--fondo); border-radius: var(--radio-chico); }
.lectura b { flex-basis: 100%; font-family: var(--titulos); }

.tabla-detalle summary { cursor: pointer; font-weight: 700; color: var(--verde); min-height: 2.7rem; display: flex; align-items: center; gap: 0.5rem; list-style: none; }
.tabla-detalle summary::-webkit-details-marker { display: none; }
.comparado { display: flex; align-items: center; gap: 0.8rem; min-height: 4rem; padding: 0.6rem 0; text-decoration: none; }
.comparado:hover b { text-decoration: underline; text-underline-offset: 3px; }
.comparado small { white-space: nowrap; }
.comparado-der { display: flex; flex-direction: column; align-items: flex-end; }
.cambio { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 700; color: var(--tinta-2); }
.cambio.sube { color: #8a5505; }
.cambio.baja { color: var(--entro); }

.futuro { display: grid; gap: 0.7rem; }
.futuro li { background: var(--fondo); border-radius: var(--radio-chico); padding: 0.9rem 1rem; }
.futuro h3 { margin-bottom: 0.4rem; }
.futuro dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.15rem 0; }
.futuro dt { color: var(--tinta-2); }
.futuro dd { font-weight: 500; font-variant-numeric: tabular-nums; }
.futuro .total { margin-top: 0.3rem; padding-top: 0.45rem; border-top: 1px solid #cfc9ba; }
.futuro .total dt, .futuro .total dd { font-weight: 700; color: inherit; }

.mono-frase { font-size: 1.05rem; }
.medidor-pista { height: 0.9rem; border-radius: 999px; background: #e6e1d4; overflow: hidden; }
.medidor-pista span { display: block; height: 100%; border-radius: 999px; background: var(--entro); }
.medidor.ojo .medidor-pista span { background: var(--ambar); }
.medidor.alerta .medidor-pista span { background: var(--terra); }
.medidor-pie { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; color: var(--tinta-2); }
.medidor-pie b { color: var(--tinta); }

/* ---------- Hoja (diálogo) ---------- */

#hoja {
  border: 0; padding: 0; background: var(--fondo); color: var(--tinta);
  width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 26px 26px 0 0; overflow-y: auto;
  box-shadow: 0 -10px 40px rgba(18, 36, 30, 0.25);
}
#hoja::backdrop { background: rgba(18, 36, 30, 0.5); }
#hoja[open] { animation: subir 0.22s ease-out; }
@keyframes subir { from { transform: translateY(24px); opacity: 0; } }
.hoja-cabeza { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 1rem 1.1rem 0.8rem; background: var(--fondo); }
.hoja-cabeza h2 { font-size: 1.3rem; overflow-wrap: anywhere; }
.hoja-cerrar { flex: none; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 0; background: #e6e1d4; font-size: 1.2rem; }
.hoja-cuerpo { display: flex; flex-direction: column; gap: 0.9rem; padding: 0.2rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom)); }
.hoja-texto { font-size: 1.05rem; color: var(--tinta-2); }

#aviso {
  position: fixed; left: 1rem; right: 1rem; bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom) + 0.8rem); z-index: 40;
  display: flex; align-items: center; gap: 0.6rem; max-width: 30rem; margin: 0 auto;
  background: var(--tinta); color: var(--papel); border-radius: var(--radio-chico); padding: 0.85rem 1rem; font-weight: 500;
  box-shadow: 0 10px 30px rgba(18, 36, 30, 0.3); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
#aviso.visible { opacity: 1; transform: none; }
#aviso i { flex: none; font-size: 1.4rem; color: var(--menta); }

/* ---------- Notebook ---------- */

@media (min-width: 960px) {
  body { padding-bottom: 0; padding-left: 17rem; }
  .arriba { display: none; }
  .nav {
    top: 0; right: auto; bottom: 0; width: 17rem; display: flex; flex-direction: column; gap: 0.3rem;
    border-top: 0; border-right: 1px solid var(--linea); padding: 1.6rem 1rem;
  }
  .nav .solo-pc { display: flex; }
  .nav .marca { margin: 0 0.4rem 1.6rem; font-size: 1.3rem; }
  .nav-item { flex-direction: row; justify-content: flex-start; gap: 0.8rem; min-height: 3.1rem; padding: 0 0.8rem; font-size: 1rem; }
  .nav-item i { width: auto; height: auto; background: none !important; font-size: 1.45rem; }
  .nav-item:hover { background: var(--fondo); }
  .nav-item.activo { background: var(--verde-claro); }
  .nav-subir { margin-top: auto; }
  .nav-subir.activo { background: var(--verde-hondo); border-color: var(--verde-hondo); }

  #vista { max-width: 72rem; padding: 2.4rem 2.8rem 4rem; }
  h1 { font-size: 2.1rem; }
  .cabeza { flex-direction: row; align-items: flex-end; justify-content: space-between; margin-bottom: 1.6rem; }
  .mes { min-width: 18rem; }
  .grilla-inicio { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.4rem; align-items: start; }
  .grilla-numeros { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
  .col { gap: 1.4rem; }
  .tarjeta { padding: 1.4rem; }
  .tarjeta.sin-relleno { padding: 0.3rem 1.3rem; }
  .heroe { padding: 1.8rem; }
  .heroe-numero, .heroe-numero.largo { font-size: min(3.4rem, 4.2vw); }
  .trio { grid-template-columns: repeat(3, 1fr); }
  .trio > div { flex-direction: column; gap: 0; }
  .fila-botones, .acciones-inicio { flex-direction: row; flex-wrap: wrap; }
  .fila-botones.pegada { bottom: 0; }
  .btn.flotante { right: 2.8rem; bottom: 2rem; }
  .filtros { flex-direction: row; align-items: center; }
  .buscador { flex: 1; max-width: 26rem; }
  #lista-movs, .pagos, .avance { max-width: 46rem; }
  .sugerencias { max-width: 46rem; }
  .tarjeta .pago > .btn { margin-left: 0; }
  .pago.grande { flex-wrap: nowrap; padding: 0.5rem 1.1rem; }
  .pago-info { flex: 1 1 auto; }
  .pago-accion { margin-left: 0; flex: none; }
  .cats { grid-template-columns: repeat(3, 1fr); }
  .lienzo { height: 15rem; }
  .futuro { grid-template-columns: repeat(3, 1fr); }
  .futuro dl > div { flex-direction: column; gap: 0; padding: 0.25rem 0; }
  .bienvenida { padding-top: 3rem; }
  .bienvenida h1 { font-size: 2.6rem; }

  #hoja { width: 36rem; max-width: calc(100vw - 4rem); margin: auto; border-radius: 26px; max-height: 88vh; }
  .hoja-cabeza { padding: 1.3rem 1.5rem 0.9rem; }
  .hoja-cuerpo { padding: 0.2rem 1.5rem 1.6rem; }
  #aviso { left: 17rem; bottom: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}