/* =========================================================
   Mis Finanzas — estética iPhone "Liquid Glass" (claro y oscuro)
   ========================================================= */

:root {
  color-scheme: light dark;
  --rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
  --suave: cubic-bezier(0.22, 1, 0.36, 1);
  --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  --fuente-num: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --radio: 26px;
  --radio-chico: 16px;

  /* Modo claro (colores de sistema de iOS) */
  --fondo: #eef0f5;
  --texto: #000;
  --texto-suave: rgb(60 60 67 / 0.62);
  --texto-tenue: rgb(60 60 67 / 0.32);
  --separador: rgb(60 60 67 / 0.14);
  --relleno: rgb(120 120 128 / 0.12);
  --relleno-2: rgb(120 120 128 / 0.2);
  --vidrio: rgb(255 255 255 / 0.48);
  --vidrio-fuerte: rgb(250 250 252 / 0.78);
  --vidrio-borde: rgb(255 255 255 / 0.75);
  --vidrio-sombra: 0 8px 30px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04);
  --reflejo: rgb(255 255 255 / 0.9);
  --ingreso: #34c759;
  --inversion: #007aff;
  --gasto: #ff3b30;
  --verde-ios: #34c759;
  --aurora-1: rgb(0 122 255 / 0.22);
  --aurora-2: rgb(255 45 85 / 0.16);
  --aurora-3: rgb(52 199 89 / 0.16);

  /* Acento: azul de iOS por defecto */
  --acento: #007aff;
  --acento-texto: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #000;
    --texto: #fff;
    --texto-suave: rgb(235 235 245 / 0.6);
    --texto-tenue: rgb(235 235 245 / 0.3);
    --separador: rgb(84 84 88 / 0.55);
    --relleno: rgb(120 120 128 / 0.24);
    --relleno-2: rgb(120 120 128 / 0.36);
    --vidrio: rgb(255 255 255 / 0.075);
    --vidrio-fuerte: rgb(28 28 30 / 0.78);
    --vidrio-borde: rgb(255 255 255 / 0.16);
    --vidrio-sombra: 0 10px 34px rgb(0 0 0 / 0.45);
    --reflejo: rgb(255 255 255 / 0.28);
    --ingreso: #30d158;
    --inversion: #0a84ff;
    --gasto: #ff453a;
    --verde-ios: #30d158;
    --aurora-1: rgb(10 132 255 / 0.34);
    --aurora-2: rgb(191 90 242 / 0.26);
    --aurora-3: rgb(48 209 88 / 0.18);
    --acento: #0a84ff;
  }
}

[data-acento="oro"] { --acento: #c9a227; --acento-texto: #1a1408; --aurora-1: rgb(214 170 60 / 0.3); }
[data-acento="verde"] { --acento: #34c759; --aurora-1: rgb(52 199 89 / 0.26); }
[data-acento="violeta"] { --acento: #af52de; --aurora-1: rgb(175 82 222 / 0.28); }
@media (prefers-color-scheme: dark) {
  [data-acento="oro"] { --acento: #e3bd52; }
  [data-acento="verde"] { --acento: #30d158; }
  [data-acento="violeta"] { --acento: #bf5af2; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 17px/1.35 var(--fuente);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.num { font-family: var(--fuente-num); font-variant-numeric: tabular-nums; }

main {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 10px) 16px calc(env(safe-area-inset-bottom) + 112px);
}

/* Título grande, como en las apps de iOS */
h1 { font-size: 34px; font-weight: 700; margin: 8px 4px 14px; letter-spacing: 0.01em; }
h2 { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0; color: var(--texto-suave); margin: 24px 16px 7px; }

/* ---------- Fondo: manchas de color que el vidrio refracta ---------- */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora span { position: absolute; width: 75vmax; height: 75vmax; border-radius: 50%; filter: blur(80px); }
.aurora span:nth-child(1) { background: var(--aurora-1); top: -32vmax; left: -22vmax; animation: flotar1 24s ease-in-out infinite alternate; }
.aurora span:nth-child(2) { background: var(--aurora-2); top: 22vh; right: -38vmax; animation: flotar2 30s ease-in-out infinite alternate; }
.aurora span:nth-child(3) { background: var(--aurora-3); bottom: -42vmax; left: -12vmax; animation: flotar3 34s ease-in-out infinite alternate; }
@keyframes flotar1 { to { transform: translate(18vmax, 12vmax) scale(1.15); } }
@keyframes flotar2 { to { transform: translate(-16vmax, 10vmax) scale(0.9); } }
@keyframes flotar3 { to { transform: translate(14vmax, -14vmax) scale(1.1); } }

/* ---------- Liquid Glass ---------- */
.vidrio, .tarjeta, .dato, .selector-mes, .buscador, .menu-lista, .grupo-mes, .acciones-rapidas button,
.boton-redondo, .tabs, .tab-mas span, .chip, .chips-filtro button, .operadores button, .segmento, .teclado button {
  position: relative;
  background: var(--vidrio);
  border: 0.5px solid var(--vidrio-borde);
  backdrop-filter: blur(28px) saturate(185%);
  -webkit-backdrop-filter: blur(28px) saturate(185%);
  box-shadow: var(--vidrio-sombra), inset 0 1px 0 var(--reflejo), inset 0 -0.5px 0 rgb(255 255 255 / 0.12);
}
/* Reflejo especular en el borde de arriba, como el vidrio de iOS 26 */
.tarjeta::before, .grupo-mes::before, .menu-lista::before, .tabs::before, .tarjeta-metal::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.22), transparent 38%, transparent 70%, rgb(255 255 255 / 0.05));
  mix-blend-mode: soft-light;
}

.tarjeta { border-radius: var(--radio); padding: 16px; margin-top: 14px; }
.tarjeta-titulo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 10px; position: relative; }
.tarjeta-titulo span { color: var(--texto-suave); font-size: 15px; font-weight: 600; }
.tarjeta-titulo b { font-weight: 600; }
.enlace { border: 0; background: none; color: var(--acento); font-weight: 400; font-size: 16px; padding: 2px 0; }

/* ---------- Encabezado de Inicio ---------- */
.encabezado { display: flex; justify-content: space-between; align-items: center; margin: 4px 4px 16px; }
.saludo { font-size: 30px; font-weight: 700; letter-spacing: 0.005em; }
.fecha-hoy { color: var(--texto-suave); font-size: 15px; text-transform: capitalize; }
.boton-redondo { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--texto); }
.boton-redondo svg { width: 21px; height: 21px; }

/* ---------- Tarjeta principal (vidrio con reflejo que sigue la inclinación) ---------- */
.tarjeta-metal {
  --x: 50%;
  --y: 25%;
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: 18px 20px 16px;
  color: #fff;
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--acento) 92%, #fff) 0%, var(--acento) 40%, color-mix(in srgb, var(--acento) 55%, #000) 100%);
  border: 0.5px solid rgb(255 255 255 / 0.45);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--acento) 35%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.55);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.25s var(--suave);
}
.metal-brillo {
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at var(--x) var(--y), rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.08) 22%, transparent 42%);
  pointer-events: none;
  animation: brillar 9s ease-in-out infinite alternate;
}
.tarjeta-metal.inclinable .metal-brillo { animation: none; }
@keyframes brillar { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
.metal-fila { position: relative; display: flex; justify-content: space-between; align-items: center; }
.metal-etiqueta { font-size: 15px; font-weight: 600; opacity: 0.85; }
.metal-logo { width: 30px; height: 30px; stroke-width: 2.6; opacity: 0.85; }
.metal-total { position: relative; font-size: 44px; font-weight: 700; margin: 6px 0 0; letter-spacing: -0.02em; }
.metal-usd { position: relative; font-size: 15px; opacity: 0.88; min-height: 20px; }
.metal-grupos { position: relative; }
.saldo-grupo { border-top: 0.5px solid rgb(255 255 255 / 0.35); padding-top: 9px; margin-top: 10px; }
.saldo-grupo-titulo { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 7px; }
.saldo-cuentas { display: flex; flex-wrap: wrap; gap: 6px; }
.saldo-cuentas span {
  background: rgb(255 255 255 / 0.22); border: 0.5px solid rgb(255 255 255 / 0.4); border-radius: 999px;
  padding: 3px 10px; font-size: 13px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.saldo-cuentas span.negativo { background: rgb(0 0 0 / 0.25); }

/* ---------- Acciones rápidas ---------- */
.acciones-rapidas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.acciones-rapidas button {
  border-radius: 22px; padding: 12px 4px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--texto);
}
.ar-icono, .menu-icono, .icono-categoria { display: grid; place-items: center; color: #fff; background: var(--texto-tenue); }
.ar-icono { width: 42px; height: 42px; border-radius: 50%; }
.ar-icono svg { width: 21px; height: 21px; stroke-width: 2.1; }
.tono-inversion { background: var(--inversion); color: #fff; }
.tono-ingreso { background: var(--ingreso); color: #fff; }
.tono-gasto { background: var(--gasto); color: #fff; }
.tono-acento { background: var(--acento); color: var(--acento-texto); }
.tono-gris { background: #8e8e93; color: #fff; }
.tono-naranja { background: #ff9500; color: #fff; }
.tono-indigo { background: #5856d6; color: #fff; }

/* ---------- Datos chicos ---------- */
.mini-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; position: relative; }
.mini-datos div { background: var(--relleno); border-radius: 14px; padding: 10px; min-width: 0; }
.mini-datos small { display: block; font-size: 12.5px; color: var(--texto-suave); }
.mini-datos b { display: block; font-size: 15px; font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ingreso { color: var(--ingreso); }
.inversion { color: var(--inversion); }
.gasto { color: var(--gasto); }

/* ---------- Listas (estilo "inset grouped" de iOS) ---------- */
.lista { list-style: none; margin: 0; padding: 0; position: relative; }
.lista > li { position: relative; }
.lista > li + li::before { content: ''; position: absolute; top: 0; left: 50px; right: 0; border-top: 0.5px solid var(--separador); z-index: 1; }
.fila-lista, .mov-frente { display: flex; align-items: center; gap: 12px; padding: 10px 0; min-height: 56px; }
.icono-categoria { width: 36px; height: 36px; border-radius: 10px; font-size: 19px; background: var(--relleno-2); color: var(--texto); }
.icono-categoria.con-color { color: #fff; }
.icono-categoria.grande { width: 56px; height: 56px; font-size: 28px; border-radius: 16px; }
.icono-categoria svg { width: 20px; height: 20px; stroke-width: 2; }
.icono-categoria.grande svg { width: 28px; height: 28px; }
.info { flex: 1; min-width: 0; }
.info strong { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info small { display: block; color: var(--texto-suave); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.importe { font-weight: 600; white-space: nowrap; text-align: right; }
.importe small { display: block; font-size: 12px; color: var(--texto-suave); font-weight: 400; }
.vacio { color: var(--texto-suave); text-align: center; padding: 18px 0; font-size: 15px; }
.con-foto::after { content: ' 📎'; font-size: 12px; }

/* Gestos: deslizar para editar o borrar (como en Mail) */
.mov { position: relative; overflow: hidden; }
.mov-acciones { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.mov-acciones span { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 18px; font-weight: 600; font-size: 15px; color: #fff; opacity: 0; transition: opacity 0.12s; }
.mov-acciones .accion-editar { background: var(--acento); border-radius: 14px 0 0 14px; }
.mov-acciones .accion-borrar { background: var(--gasto); border-radius: 0 14px 14px 0; }
.mov.desliza-der .accion-editar, .mov.desliza-izq .accion-borrar { opacity: 1; }
.mov-frente { position: relative; transform: translateX(var(--dx, 0)); background: transparent; }
.mov.desliza-der .mov-frente, .mov.desliza-izq .mov-frente { background: var(--vidrio-fuerte); border-radius: 14px; padding-left: 8px; padding-right: 8px; }
.mov.soltando .mov-frente { transition: transform 0.35s var(--suave); }
.mov.saliendo .mov-frente { transform: translateX(-110%); transition: transform 0.25s ease-in; }

/* Movimientos agrupados por mes con título fijo */
.grupo-mes { border-radius: var(--radio); margin-top: 14px; overflow: clip; }
.mes-cabecera {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 12px 16px 10px;
  background: var(--vidrio-fuerte);
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-bottom: 0.5px solid var(--separador);
  font-weight: 700; font-size: 17px; text-transform: capitalize;
}
.mes-cabecera span { font-size: 13px; font-weight: 500; color: var(--texto-suave); text-transform: none; }
.grupo-mes .lista { padding: 0 16px; }

/* Buscador estilo iOS */
.buscador { display: flex; align-items: center; gap: 8px; border-radius: 14px; padding: 0 12px; }
.buscador svg { color: var(--texto-suave); width: 18px; height: 18px; }
.buscador input { flex: 1; border: 0; background: transparent; outline: none; height: 42px; font-size: 17px; }
.buscador input::placeholder { color: var(--texto-suave); }
.chips-filtro { display: flex; gap: 8px; overflow-x: auto; margin: 12px -16px 0; padding: 2px 16px 6px; scrollbar-width: none; }
.chips-filtro::-webkit-scrollbar { display: none; }
.chips-filtro button { flex: none; border-radius: 999px; padding: 7px 14px; font-size: 15px; font-weight: 500; color: var(--texto); white-space: nowrap; }
.chips-filtro button.activo { color: var(--acento-texto); background: var(--acento); border-color: transparent; box-shadow: 0 4px 14px color-mix(in srgb, var(--acento) 40%, transparent); }
.filtros-fila { display: flex; gap: 8px; margin-top: 8px; }
.filtros-fila select { flex: 1; min-width: 0; }

/* ---------- Controles de iOS ---------- */
.segmento { display: flex; border-radius: 999px; padding: 3px; gap: 2px; }
.segmento button { flex: 1; border: 0; background: transparent; padding: 8px 4px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--texto); }
.segmento button.activo { background: var(--vidrio-fuerte); box-shadow: 0 3px 12px rgb(0 0 0 / 0.14), inset 0 0.5px 0 var(--reflejo); }
.segmento-tipo button.activo[data-tipo="inversion"] { color: var(--inversion); }
.segmento-tipo button.activo[data-tipo="ingreso"] { color: var(--ingreso); }
.segmento-tipo button.activo[data-tipo="gasto"] { color: var(--gasto); }
.ayuda { color: var(--texto-suave); font-size: 13.5px; text-align: center; margin: 8px 0 0; position: relative; }
.ayuda.izquierda { text-align: left; margin: 0 0 8px; }

.monto { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 22px 0 4px; }
.monto span { font-size: 32px; color: var(--texto-suave); font-weight: 600; }
.monto input {
  border: 0; background: transparent; font-size: 58px; font-weight: 700; outline: none; color: var(--texto);
  width: 1.6ch; min-width: 1.6ch; max-width: 75vw; text-align: left; padding: 0; letter-spacing: -0.02em; font-family: var(--fuente-num);
}
.monto-chico input { font-size: 40px; }
.monto-chico span { font-size: 24px; }
.monto-resultado { min-height: 20px; text-align: center; font-weight: 600; color: var(--acento); margin-bottom: 8px; }
.operadores { display: flex; justify-content: center; gap: 10px; }
.operadores button { border-radius: 50%; width: 50px; height: 50px; font-size: 22px; font-weight: 500; }

.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 10px; }
.chips-scroll { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; }
.chips-scroll::-webkit-scrollbar { display: none; }
.chip {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px;
  border-radius: 22px; font-size: 13px; font-weight: 600; text-align: center; line-height: 1.2; color: var(--texto);
}
.chip .icono-categoria { width: 36px; height: 36px; font-size: 18px; border-radius: 50%; }
.chips-scroll .chip { flex: 0 0 auto; flex-direction: row; padding: 9px 16px; border-radius: 999px; font-size: 15px; white-space: nowrap; }
.chip.activo { background: color-mix(in srgb, var(--acento) 18%, var(--vidrio)); box-shadow: 0 0 0 2px var(--acento), var(--vidrio-sombra); }
.chip small { color: var(--texto-suave); }

.fila { display: flex; gap: 10px; margin-top: 18px; position: relative; }
.crece { flex: 1; min-width: 0; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; position: relative; }
.fila .campo { margin-top: 0; }
.campo span { font-size: 13px; color: var(--texto-suave); padding-left: 4px; }
input:not([type="checkbox"]), select {
  border: 0.5px solid var(--vidrio-borde); background: var(--relleno); border-radius: 13px;
  padding: 10px 14px; min-height: 46px; width: 100%; outline: none; font-size: 17px; color: var(--texto);
  -webkit-appearance: none; appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--texto-suave) 50%), linear-gradient(135deg, var(--texto-suave) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.monto input, .buscador input { border: 0; background: transparent; min-height: 0; }
input:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 35%, transparent); }
input.grande { font-size: 26px; font-weight: 600; }

.boton-principal {
  width: 100%; margin-top: 20px; border: 0; border-radius: 999px;
  background: var(--acento); color: var(--acento-texto);
  font-size: 17px; font-weight: 600; padding: 16px;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--acento) 38%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.35);
}
.boton-principal:disabled { opacity: 0.55; }
.boton-secundario {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px;
  border: 0.5px solid var(--vidrio-borde); border-radius: 999px; background: var(--relleno);
  color: var(--acento); text-decoration: none; font-weight: 600; padding: 13px;
}
.boton-secundario svg { width: 18px; height: 18px; }
.boton-secundario.peligro { color: var(--gasto); }
.boton-peligro { width: 100%; margin-top: 8px; border: 0; background: transparent; color: var(--gasto); font-weight: 500; padding: 12px; }
.fila-botones { display: flex; gap: 10px; }
.fila-botones .boton-secundario { flex: 1; }

.boton-foto {
  width: 100%; margin-top: 14px; display: flex; align-items: center; gap: 10px;
  border: 1px dashed var(--texto-tenue); border-radius: 18px; background: transparent;
  color: var(--texto-suave); padding: 12px 14px; text-align: left;
}
.boton-foto span { flex: 1; }
.boton-foto img { width: 40px; height: 40px; object-fit: cover; border-radius: 9px; }

/* ---------- Análisis ---------- */
.selector-mes { display: flex; align-items: center; justify-content: space-between; border-radius: 999px; padding: 4px; margin-top: 10px; }
.selector-mes button { border: 0; background: transparent; width: 44px; height: 38px; border-radius: 999px; color: var(--acento); display: grid; place-items: center; }
.nombre-mes { font-weight: 600; text-transform: capitalize; }
.grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.resumen-grilla { margin-top: 14px; }
.dato { border-radius: 22px; padding: 12px 14px; min-width: 0; }
.dato small { display: block; color: var(--texto-suave); font-size: 13px; position: relative; }
.dato strong { display: block; font-size: 21px; font-weight: 700; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.dato.ancho, .grilla .ancho { grid-column: 1 / -1; }
.compra-venta { display: flex; justify-content: space-between; font-size: 13px; color: var(--texto-suave); margin-top: 4px; position: relative; }
.compra-venta b { color: var(--texto); font-weight: 600; }
.resultado { font-size: 36px; font-weight: 700; text-align: center; margin-top: 18px; position: relative; }

.barra-fila { padding: 8px 0; position: relative; }
.barra-etiqueta { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; margin-bottom: 6px; }
.barra-etiqueta span:last-child { color: var(--texto-suave); white-space: nowrap; }
.barra { height: 8px; background: var(--relleno); border-radius: 4px; overflow: hidden; }
.barra div { height: 100%; width: var(--ancho, 0); background: var(--acento); border-radius: 4px; }
.barra.tono-inversion, .barra.tono-gasto { background: var(--relleno); }
.barra.tono-inversion div { background: var(--inversion); }
.barra.tono-gasto div { background: var(--gasto); }

.dias { display: flex; align-items: flex-end; gap: 2px; height: 90px; margin-top: 8px; position: relative; }
.dias div { flex: 1; background: var(--acento); border-radius: 3px 3px 0 0; min-height: 2px; }
.dias div.cero { background: var(--relleno); }
.dias-eje { display: flex; justify-content: space-between; font-size: 11px; color: var(--texto-suave); margin-top: 4px; position: relative; }
.meses { display: flex; gap: 4px; height: 110px; margin-top: 8px; position: relative; }
.mes-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.mes-col span { font-size: 11px; color: var(--texto-suave); }
.mes-barras { flex: 1; width: 100%; display: flex; gap: 1px; align-items: flex-end; }
.mes-barras div { flex: 1; border-radius: 3px 3px 0 0; }
.barra-entro { background: var(--ingreso); }
.barra-inversion { background: var(--inversion); }
.barra-gasto { background: var(--gasto); }
.leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--texto-suave); margin-top: 8px; position: relative; }
.leyenda span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.leyenda-ahorro::before { background: var(--acento); }
.leyenda-inversion::before { background: var(--inversion); }
.leyenda-gasto::before { background: var(--gasto); }
.leyenda-total::before { background: var(--texto-suave); }

.evolucion { width: 100%; height: auto; display: block; margin-top: 4px; position: relative; overflow: visible; }
.evolucion-area { fill: var(--acento); opacity: 0.16; }
.evolucion-linea { fill: none; stroke: var(--acento); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.evolucion-total { fill: none; stroke: var(--texto-suave); stroke-width: 1.5; stroke-dasharray: 4 3; }
.evolucion-punto { fill: var(--acento); stroke: var(--fondo); stroke-width: 1.5; }
.importe small.ingreso, .importe small.gasto { display: inline; font-size: 12.5px; margin-left: 4px; }

/* ---------- Más (estilo Configuración de iOS) ---------- */
.sub { display: none; }
.sub.activa { display: block; animation: entrarDerecha 0.35s var(--suave); }
.sub.activa[data-sub="menu"] { animation-name: entrar; }
.volver { display: flex; align-items: center; gap: 0; border: 0; background: none; color: var(--acento); font-size: 17px; padding: 4px 0; margin-left: -8px; }
.volver svg { width: 26px; height: 26px; stroke-width: 2.2; }
.menu-lista { border-radius: var(--radio); margin-top: 18px; overflow: hidden; }
.menu-lista button {
  position: relative; width: 100%; display: flex; align-items: center; gap: 12px; border: 0; background: transparent;
  padding: 11px 14px; font-size: 17px; color: var(--texto); text-align: left;
}
.menu-lista button + button::before { content: ''; position: absolute; top: 0; left: 58px; right: 0; border-top: 0.5px solid var(--separador); }
.menu-icono { width: 32px; height: 32px; border-radius: 9px; background: #8e8e93; }
.menu-icono svg { width: 19px; height: 19px; stroke-width: 2; }
.menu-extra { margin-left: auto; color: var(--texto-suave); font-size: 15px; }
.chev { width: 17px; height: 17px; color: var(--texto-tenue); margin-left: auto; stroke-width: 2.4; }
.menu-extra + .chev { margin-left: 4px; }

.costo-resultado { text-align: center; margin: 20px 0 6px; position: relative; }
.costo-resultado small { display: block; color: var(--texto-suave); font-size: 14px; }
.costo-resultado strong { display: block; font-size: 48px; font-weight: 700; color: var(--acento); letter-spacing: -0.02em; }
.costo-resultado span { color: var(--texto-suave); font-size: 14px; }

.lista-editable { list-style: none; margin: 0 0 14px; padding: 0; position: relative; }
.lista-editable li { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 0; background: transparent; }
.lista-editable li + li { border-top: 0.5px solid var(--separador); }
.lista-editable .nombre { flex: 1; min-width: 0; }
.lista-editable small { color: var(--texto-suave); }
.lista-editable button { border: 0; background: var(--relleno); border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; color: var(--gasto); font-size: 18px; }
.lista-editable .boton-ahorro { color: inherit; font-size: 15px; opacity: 0.35; }
.lista-editable .boton-ahorro.activo { opacity: 1; background: color-mix(in srgb, var(--acento) 25%, transparent); }
.agarre { color: var(--texto-tenue); touch-action: none; cursor: grab; padding: 4px; }
.agarre svg { stroke-width: 3.4; }
.lista-editable li.arrastrando { z-index: 3; background: var(--vidrio-fuerte); border-radius: 14px; box-shadow: 0 12px 30px rgb(0 0 0 / 0.25); transform: scale(1.03); }
.form-agregar { display: flex; gap: 6px; flex-wrap: wrap; border-top: 0.5px solid var(--separador); padding-top: 12px; position: relative; }
.form-agregar input:not(.emoji-input) { flex: 1 1 140px; width: auto; }
.form-agregar select { width: auto; flex: 0 0 auto; }
.form-agregar .emoji-input { width: 58px; text-align: center; }
.form-agregar button { border: 0; background: var(--acento); color: var(--acento-texto); border-radius: 999px; padding: 0 18px; font-weight: 600; min-height: 46px; }

.muestras { display: flex; gap: 16px; position: relative; }
.muestras button { width: 48px; height: 48px; border-radius: 50%; border: 0; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 4px 12px rgb(0 0 0 / 0.15); }
.muestras button.activo { box-shadow: 0 0 0 3px var(--fondo), 0 0 0 5px var(--texto); }
.muestras [data-acento="azul"] { background: linear-gradient(160deg, #5ac8fa, #007aff); }
.muestras [data-acento="oro"] { background: linear-gradient(160deg, #f6dc93, #c9a227); }
.muestras [data-acento="verde"] { background: linear-gradient(160deg, #a6f5c8, #34c759); }
.muestras [data-acento="violeta"] { background: linear-gradient(160deg, #e2c7ff, #af52de); }

/* Interruptor de iOS */
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; position: relative; }
.interruptor + .interruptor { border-top: 0.5px solid var(--separador); }
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor i { position: relative; width: 51px; height: 31px; border-radius: 999px; background: var(--relleno-2); transition: background 0.25s; flex: none; }
.interruptor i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; transition: transform 0.3s var(--rebote), width 0.2s; box-shadow: 0 3px 8px rgb(0 0 0 / 0.15), 0 1px 1px rgb(0 0 0 / 0.16); }
.interruptor input:checked + i { background: var(--verde-ios); }
.interruptor input:checked + i::after { transform: translateX(20px); }

.insignia { font-size: 13px; font-weight: 600; color: var(--texto-suave); background: var(--relleno); padding: 3px 10px; border-radius: 999px; }
.insignia.ok { color: var(--ingreso); background: color-mix(in srgb, var(--ingreso) 15%, transparent); }
.codigo {
  display: block; width: 100%; text-align: left; border: 0; background: var(--relleno);
  padding: 10px 12px; border-radius: 12px; font: 13.5px ui-monospace, Menlo, monospace; word-break: break-all;
  margin: 6px 0; color: var(--acento); position: relative;
}
.aviso { background: var(--relleno); border-radius: 14px; padding: 10px 12px; font-size: 15px; margin: 8px 0; }

/* ---------- Barra de pestañas flotante de vidrio (iOS 26) ---------- */
.tabs {
  position: fixed; z-index: 5;
  left: 50%; bottom: calc(env(safe-area-inset-bottom) + 8px);
  transform: translateX(-50%);
  width: min(calc(100% - 24px), 520px);
  display: flex; align-items: center; padding: 5px;
  border-radius: 999px;
}
.tabs button {
  position: relative; flex: 1; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10px; font-weight: 600; color: var(--texto); padding: 6px 0; border-radius: 999px;
}
.tabs button svg { width: 24px; height: 24px; }
.tabs button.activo { color: var(--acento); background: var(--relleno); }
.tabs .tab-mas, .tabs .tab-mas.activo { background: transparent; }
.tab-mas span {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--acento); color: var(--acento-texto); border: 0.5px solid rgb(255 255 255 / 0.45);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--acento) 45%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.5);
  transition: transform 0.35s var(--rebote);
}
.tab-mas span svg { width: 28px; height: 28px; stroke-width: 2.5; }
.tabs .tab-mas.activo span { transform: rotate(90deg) scale(0.92); }

/* ---------- Aviso tipo notificación de iOS ---------- */
#toast {
  position: fixed; z-index: 30; left: 50%; top: calc(env(safe-area-inset-top) + 8px);
  transform: translate(-50%, -170%) scale(0.95);
  display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: calc(100% - 24px);
  background: var(--vidrio-fuerte); border: 0.5px solid var(--vidrio-borde);
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  color: var(--texto); padding: 12px 16px; border-radius: 22px; font-weight: 600; font-size: 15px;
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.22), inset 0 1px 0 var(--reflejo);
  transition: transform 0.5s var(--rebote);
}
#toast.visible { transform: translate(-50%, 0) scale(1); }
#toast.error { color: var(--gasto); }
#toast-accion { border: 0; background: var(--acento); color: var(--acento-texto); font-weight: 600; border-radius: 999px; padding: 5px 13px; font-size: 14px; }

/* ---------- Hoja (como las de iOS) ---------- */
.hoja-fondo { position: fixed; inset: 0; z-index: 20; background: rgb(0 0 0 / 0.35); display: flex; align-items: flex-end; justify-content: center; }
.hoja {
  width: 100%; max-width: 560px; max-height: 93vh; overflow-y: auto;
  background: var(--vidrio-fuerte); border: 0.5px solid var(--vidrio-borde); border-bottom: 0;
  backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-radius: 34px 34px 0 0; padding: 8px 18px calc(env(safe-area-inset-bottom) + 18px);
  box-shadow: 0 -10px 40px rgb(0 0 0 / 0.2), inset 0 1px 0 var(--reflejo);
}
.hoja-agarre { width: 36px; height: 5px; border-radius: 3px; background: var(--texto-tenue); margin: 0 auto 12px; }
.hoja-cabecera { display: flex; align-items: center; gap: 12px; }
.hoja-titulo { font-size: 22px; font-weight: 700; }
.hoja-monto { font-size: 40px; font-weight: 700; margin: 14px 0 4px; letter-spacing: -0.02em; }
.hoja-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.hoja-etiquetas span { background: color-mix(in srgb, var(--acento) 15%, transparent); color: var(--acento); border-radius: 999px; padding: 3px 11px; font-size: 14px; font-weight: 600; }
.hoja-foto { margin-top: 12px; }
.hoja-foto img { width: 100%; max-height: 230px; object-fit: cover; border-radius: 20px; display: block; }
.hoja-foto-botones { display: flex; gap: 10px; }
.hoja-foto-botones .boton-secundario { flex: 1; }
#form-editar .segmento { margin-top: 14px; }

.visor { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / 0.9); display: grid; place-items: center; padding: 20px; }
.visor img { max-width: 100%; max-height: 100%; border-radius: 16px; }

/* ---------- Apertura y candado (como la pantalla de código de iOS) ---------- */
.apertura, .candado {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--fondo);
}
.apertura::before, .candado::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, var(--aurora-1), transparent 55%), radial-gradient(circle at 75% 80%, var(--aurora-2), transparent 55%);
  filter: blur(30px);
}
.apertura > *, .candado > * { position: relative; }
.logo { width: 96px; height: 96px; color: var(--acento); stroke-width: 2.2; filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--acento) 45%, transparent)); }
.logo.chico { width: 60px; height: 60px; }
.apertura-nombre { margin-top: 16px; font-size: 24px; font-weight: 700; }
.apertura .logo { animation: logoEntra 0.9s var(--rebote) both; }
.apertura-nombre { animation: entrar 0.7s var(--suave) 0.25s both; }
.apertura.saliendo { animation: desvanecer 0.5s ease forwards; }
@keyframes logoEntra { from { transform: scale(0.4); opacity: 0; filter: blur(10px); } to { transform: none; opacity: 1; } }
@keyframes desvanecer { to { opacity: 0; visibility: hidden; transform: scale(1.06); } }

.candado { z-index: 45; padding: calc(env(safe-area-inset-top) + 20px) 24px calc(env(safe-area-inset-bottom) + 20px); }
.candado-titulo { margin-top: 12px; font-size: 21px; font-weight: 600; }
.candado-sub { color: var(--texto-suave); margin-top: 4px; font-size: 16px; }
.puntos { display: flex; gap: 16px; margin: 24px 0 34px; min-height: 13px; }
.puntos i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--texto); }
.puntos i.lleno { background: var(--texto); }
.puntos.error { animation: temblar 0.45s; }
@keyframes temblar { 20%, 60% { transform: translateX(-12px); } 40%, 80% { transform: translateX(12px); } }
.teclado { display: grid; grid-template-columns: repeat(3, 78px); gap: 16px 24px; }
.teclado button { width: 78px; height: 78px; border-radius: 50%; font-size: 34px; font-weight: 400; display: grid; place-items: center; }
.teclado .tecla-icono { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.teclado .tecla-icono svg { width: 30px; height: 30px; }

/* Tirar para actualizar */
.tirar {
  position: fixed; z-index: 6; left: 50%; top: calc(env(safe-area-inset-top) + 6px);
  width: 40px; height: 40px; margin-left: -20px; border-radius: 50%;
  display: grid; place-items: center; color: var(--acento);
  background: var(--vidrio-fuerte); border: 0.5px solid var(--vidrio-borde);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transform: translateY(var(--tirar, -70px)) rotate(var(--giro, 0deg)); opacity: var(--tirar-opacidad, 0);
}
.tirar.cargando svg { animation: girar 0.8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

#confeti { position: fixed; inset: 0; z-index: 60; pointer-events: none; width: 100%; height: 100%; }

/* ---------- Modo discreto ---------- */
.sensible { transition: filter 0.25s; }
.discreto .sensible:not(.revelado) { filter: blur(9px); }

/* ---------- Movimiento ---------- */
@keyframes entrar { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes entrarDerecha { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes crecer { from { width: 0; } }
@keyframes subir { from { transform: scaleY(0); } }
@keyframes dibujar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes latido { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes hojaArriba { from { transform: translateY(100%); } to { transform: none; } }
@keyframes hojaAbajo { from { transform: none; } to { transform: translateY(100%); } }
@keyframes fondoEntra { from { opacity: 0; } }
@keyframes fondoSale { to { opacity: 0; } }
@keyframes saltito { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

.vista { display: none; }
.vista.activa { display: block; animation: entrar 0.36s var(--suave); }
.vista.activa .tarjeta, .vista.activa .dato, .vista.activa .grupo-mes, .vista.activa .tarjeta-metal,
.vista.activa .acciones-rapidas, .vista.activa .menu-lista { animation: aparecer 0.55s var(--suave) both; }
.vista.activa .acciones-rapidas { animation-delay: 0.05s; }
.vista.activa .tarjeta:nth-of-type(2), .vista.activa .menu-lista:nth-of-type(2) { animation-delay: 0.08s; }
.vista.activa .tarjeta:nth-of-type(3), .vista.activa .menu-lista:nth-of-type(3) { animation-delay: 0.13s; }
.vista.activa .tarjeta:nth-of-type(4) { animation-delay: 0.18s; }
.vista.activa .tarjeta:nth-of-type(5) { animation-delay: 0.23s; }
.vista.activa .dato:nth-child(2) { animation-delay: 0.04s; }
.vista.activa .dato:nth-child(3) { animation-delay: 0.08s; }
.vista.activa .dato:nth-child(4) { animation-delay: 0.12s; }
.lista > li { animation: aparecer 0.38s var(--suave) both; }
.lista > li:nth-child(2) { animation-delay: 0.03s; }
.lista > li:nth-child(3) { animation-delay: 0.06s; }
.lista > li:nth-child(4) { animation-delay: 0.09s; }
.lista > li:nth-child(5) { animation-delay: 0.12s; }
.lista > li:nth-child(n+6) { animation-delay: 0.14s; }

.barra div { animation: crecer 0.8s var(--suave) both; }
.dias div, .mes-barras div { transform-origin: bottom; animation: subir 0.6s var(--suave) both; }
.evolucion-linea { stroke-dasharray: 1; animation: dibujar 1.2s var(--suave) both; }
.evolucion-area { animation: fondoEntra 1s ease both 0.3s; }
.evolucion-punto { animation: aparecer 0.3s var(--rebote) both; animation-delay: calc(0.2s + var(--i, 0) * 0.07s); transform-box: fill-box; transform-origin: center; }

/* Al tocar, el vidrio se "aprieta" como en iOS */
.chip, .segmento button, .operadores button, .boton-principal, .boton-secundario, .selector-mes button, .tabs button,
.boton-redondo, .acciones-rapidas button, .menu-lista button, .chips-filtro button, .teclado button, .muestras button, .tab-mas span {
  transition: transform 0.25s var(--rebote), background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.chip:active, .operadores button:active, .boton-redondo:active, .acciones-rapidas button:active,
.chips-filtro button:active, .teclado button:active, .muestras button:active, .tabs button:active { transform: scale(0.9); }
.segmento button:active { transform: scale(0.95); }
.menu-lista button:active { background: var(--relleno); }
.lista > li:active .mov-frente { opacity: 0.6; }
.boton-principal:active, .boton-secundario:active { transform: scale(0.96); }
.boton-principal.ok { animation: latido 0.45s var(--rebote); }
.chip.activo { animation: latido 0.3s var(--rebote); }
.tabs button.activo svg { animation: saltito 0.4s var(--rebote); }
.teclado button:active { background: var(--relleno-2); }

.hoja-fondo:not([hidden]) { animation: fondoEntra 0.2s ease both; }
.hoja-fondo:not([hidden]) .hoja { animation: hojaArriba 0.45s var(--suave) both; }
.hoja-fondo.cerrando { animation: fondoSale 0.22s ease both; }
.hoja-fondo.cerrando .hoja { animation: hojaAbajo 0.22s ease-in both; }
.visor:not([hidden]) { animation: fondoEntra 0.2s ease both; }

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

/* Íconos de categoría con el color de su tipo (como los íconos de Configuración) */
.icono-categoria.con-color.tono-inversion { background: var(--inversion); }
.icono-categoria.con-color.tono-ingreso { background: var(--ingreso); }
.icono-categoria.con-color.tono-gasto { background: var(--gasto); }
.icono-categoria.con-color { color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3); }

/* =========================================================
   Más oscuro: negro siempre, vidrio oscuro y colores apagados
   ========================================================= */
:root, :root[data-acento] {
  color-scheme: dark;
  --fondo: #000;
  --texto: #fff;
  --texto-suave: rgb(235 235 245 / 0.58);
  --texto-tenue: rgb(235 235 245 / 0.28);
  --separador: rgb(84 84 88 / 0.5);
  --relleno: rgb(120 120 128 / 0.2);
  --relleno-2: rgb(120 120 128 / 0.3);
  --vidrio: rgb(255 255 255 / 0.05);
  --vidrio-fuerte: rgb(18 18 20 / 0.82);
  --vidrio-borde: rgb(255 255 255 / 0.11);
  --vidrio-sombra: 0 10px 34px rgb(0 0 0 / 0.6);
  --reflejo: rgb(255 255 255 / 0.16);
  --ingreso: #30d158;
  --inversion: #0a84ff;
  --gasto: #ff453a;
  --verde-ios: #30d158;
  --aurora-2: rgb(94 92 230 / 0.10);
  --aurora-3: rgb(48 209 88 / 0.06);
}
:root[data-acento="azul"] { --acento: #0a84ff; --acento-texto: #fff; --aurora-1: rgb(10 132 255 / 0.13); }
:root[data-acento="oro"] { --acento: #e3bd52; --acento-texto: #1a1408; --aurora-1: rgb(214 170 60 / 0.12); }
:root[data-acento="verde"] { --acento: #30d158; --acento-texto: #04170c; --aurora-1: rgb(48 209 88 / 0.11); }
:root[data-acento="violeta"] { --acento: #bf5af2; --acento-texto: #fff; --aurora-1: rgb(191 90 242 / 0.12); }
.aurora span { filter: blur(90px); opacity: 0.8; }

/* Tarjeta de la plata: negra, con brillo sutil del color elegido */
.tarjeta-metal {
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--acento) 26%, transparent), transparent 60%),
    linear-gradient(150deg, #1c1c21 0%, #0b0b0e 70%);
  border: 0.5px solid color-mix(in srgb, var(--acento) 35%, rgb(255 255 255 / 0.12));
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.65), 0 0 40px color-mix(in srgb, var(--acento) 12%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.metal-brillo { background: radial-gradient(circle at var(--x) var(--y), rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.03) 25%, transparent 45%); }
.metal-logo { color: var(--acento); }
.metal-etiqueta, .metal-usd { color: var(--texto-suave); opacity: 1; }
.saldo-grupo { border-top-color: var(--separador); }
.saldo-cuentas span { background: rgb(255 255 255 / 0.07); border-color: rgb(255 255 255 / 0.1); }

/* Botón grande de la barra y botones principales, un poco más sobrios */
.tab-mas span { box-shadow: 0 8px 22px color-mix(in srgb, var(--acento) 30%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.35); }
.boton-principal { box-shadow: 0 8px 22px color-mix(in srgb, var(--acento) 25%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.3); }

/* El número del monto, grande (le gana a la regla general de los campos) */
.monto input:not([type]) {
  font-size: 58px; font-weight: 700; padding: 0; min-height: 0;
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
.monto-chico input:not([type]) { font-size: 40px; }

/* Pantalla de clave de acceso */
.form-acceso { width: min(100%, 320px); margin-top: 22px; }
.form-acceso input { text-align: center; font-size: 20px; letter-spacing: 0.08em; }

/* Gastos por mes */
.tarjeta-boton { display: block; width: 100%; text-align: left; color: var(--texto); font: inherit; cursor: pointer; }
.tarjeta-boton:active { transform: scale(0.98); }
.gastos-resumen { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gastos-resumen strong { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.gastos-resumen span { font-size: 14px; color: var(--texto-suave); }
.gastos-total { text-align: center; position: relative; }
.gastos-total small { display: block; color: var(--texto-suave); font-size: 14px; }
.gastos-total strong { display: block; font-size: 46px; font-weight: 700; color: var(--gasto); letter-spacing: -0.02em; margin: 2px 0; }
.gastos-total span { font-size: 14px; color: var(--texto-suave); }
.historial { display: flex; align-items: flex-end; gap: 5px; height: 120px; margin-top: 8px; position: relative; }
.historial-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; }
.historial-col div { width: 100%; margin-top: auto; background: color-mix(in srgb, var(--gasto) 45%, transparent); border-radius: 5px 5px 2px 2px; min-height: 3px; transform-origin: bottom; animation: subir 0.6s var(--suave) both; }
.historial-col.actual div { background: var(--gasto); }
.historial-col span { font-size: 10.5px; color: var(--texto-suave); }
#gastos-quien { margin-bottom: 10px; }

/* =========================================================
   Lujo: vidrio con luz, temas, tarjeta que gira, widgets y animaciones con resorte
   ========================================================= */
@property --angulo { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root, :root[data-acento] {
  --resorte: cubic-bezier(0.34, 1.3, 0.64, 1);
  --resorte-vivo: cubic-bezier(0.34, 1.56, 0.64, 1);
  --luz-x: 50%;
  --luz-y: 0%;
  --tilt-x: 0;
  --tilt-y: 0;
  --scroll: 0;
  --encoge: 0;
  --aurora-4: rgb(255 159 10 / 0);
  /* Sombras en capas: un borde de contacto, una media y una larga y suave */
  --vidrio-sombra: 0 0.5px 1px rgb(0 0 0 / 0.35), 0 4px 12px rgb(0 0 0 / 0.3), 0 22px 48px rgb(0 0 0 / 0.45);
}
/* Resortes de verdad (como las animaciones de iOS) donde el navegador los entiende */
@supports (transition-timing-function: linear(0, 1)) {
  :root, :root[data-acento] {
    --resorte: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
    --resorte-vivo: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.1 27.8%, 1.078 30%, 0.994 37.1%, 0.981 40.3%, 0.979 44.1%, 0.998 55.6%, 1.002 66.4%, 1);
  }
}

/* Más colores */
:root[data-acento="rojo"] { --acento: #ff453a; --acento-texto: #fff; --aurora-1: rgb(255 69 58 / 0.12); }
:root[data-acento="naranja"] { --acento: #ff9f0a; --acento-texto: #1f1300; --aurora-1: rgb(255 159 10 / 0.12); }
:root[data-acento="rosa"] { --acento: #ff375f; --acento-texto: #fff; --aurora-1: rgb(255 55 95 / 0.12); }
:root[data-acento="turquesa"] { --acento: #40c8e0; --acento-texto: #00181d; --aurora-1: rgb(64 200 224 / 0.12); }
:root[data-acento="perla"] { --acento: #e5e5ea; --acento-texto: #000; --aurora-1: rgb(255 255 255 / 0.07); }
.muestras { flex-wrap: wrap; gap: 14px; }
.muestras button { width: 44px; height: 44px; }
.muestras [data-acento="rojo"] { background: linear-gradient(160deg, #ff8a80, #ff453a); }
.muestras [data-acento="naranja"] { background: linear-gradient(160deg, #ffd08a, #ff9f0a); }
.muestras [data-acento="rosa"] { background: linear-gradient(160deg, #ff9db2, #ff375f); }
.muestras [data-acento="turquesa"] { background: linear-gradient(160deg, #a8f0ff, #40c8e0); }
.muestras [data-acento="perla"] { background: linear-gradient(160deg, #ffffff, #c7c7cc); }

/* Temas */
:root[data-tema="aurora"] { --aurora-2: rgb(191 90 242 / 0.22); --aurora-3: rgb(48 209 88 / 0.14); --aurora-4: rgb(255 55 95 / 0.14); }
:root[data-tema="aurora"] .aurora span { opacity: 1; }
:root[data-tema="medianoche"] { --fondo: #01030b; --vidrio: rgb(120 150 255 / 0.06); --vidrio-borde: rgb(150 170 255 / 0.14); --vidrio-fuerte: rgb(10 14 32 / 0.86); --aurora-2: rgb(70 90 255 / 0.16); --aurora-3: rgb(40 60 160 / 0.14); }
:root[data-tema="grafito"] { --fondo: #0b0b0d; --vidrio: rgb(255 255 255 / 0.07); --vidrio-fuerte: rgb(30 30 33 / 0.9); }
:root[data-tema="grafito"] .aurora { opacity: 0; }
:root[data-tema="dorado"][data-acento] { --acento: #e3bd52; --acento-texto: #1a1408; --fondo: #070502; --aurora-1: rgb(214 170 60 / 0.16); --aurora-2: rgb(255 159 10 / 0.08); --aurora-3: rgb(120 80 20 / 0.12); --vidrio-borde: rgb(227 189 82 / 0.16); }
.temas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; position: relative; }
.temas button { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; color: var(--texto-suave); font-size: 12px; font-weight: 600; padding: 0; }
.temas i { width: 100%; aspect-ratio: 0.62; border-radius: 12px; border: 0.5px solid rgb(255 255 255 / 0.15); box-shadow: var(--vidrio-sombra); transition: transform 0.3s var(--resorte-vivo), box-shadow 0.2s; }
.temas [data-tema="clasico"] i { background: radial-gradient(circle at 20% 15%, rgb(10 132 255 / 0.5), transparent 60%), #000; }
.temas [data-tema="aurora"] i { background: radial-gradient(circle at 20% 15%, rgb(191 90 242 / 0.7), transparent 55%), radial-gradient(circle at 80% 85%, rgb(48 209 88 / 0.6), transparent 55%), #000; }
.temas [data-tema="medianoche"] i { background: radial-gradient(circle at 50% 20%, rgb(70 90 255 / 0.5), transparent 60%), #01030b; }
.temas [data-tema="grafito"] i { background: linear-gradient(160deg, #3a3a3e, #121214); }
.temas [data-tema="dorado"] i { background: radial-gradient(circle at 30% 20%, rgb(227 189 82 / 0.6), transparent 60%), #070502; }
.temas button.activo { color: var(--texto); }
.temas button.activo i { transform: scale(1.06); box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px var(--acento); }

/* Cómo va el mes: verde si venís gastando menos, rojo si bastante más */
:root[data-humor="bien"] { --aurora-3: rgb(48 209 88 / 0.14); }
:root[data-humor="mal"] { --aurora-2: rgb(255 69 58 / 0.14); }
/* Tono según la hora: amanecer cálido, tarde dorada, noche índigo */
:root[data-hora="manana"] { --aurora-4: rgb(255 159 10 / 0.09); }
:root[data-hora="tarde"] { --aurora-4: rgb(255 214 10 / 0.05); }
:root[data-hora="noche"] { --aurora-4: rgb(94 92 230 / 0.12); }

/* Más contraste */
:root[data-contraste] {
  --texto-suave: rgb(235 235 245 / 0.82);
  --texto-tenue: rgb(235 235 245 / 0.5);
  --vidrio: rgb(255 255 255 / 0.11);
  --vidrio-borde: rgb(255 255 255 / 0.32);
  --vidrio-fuerte: rgb(28 28 30 / 0.97);
  --separador: rgb(150 150 160 / 0.6);
}

/* Fondo: aurora con paralaje (se mueve menos que la página y sigue la inclinación) y grano fino */
html, body { overscroll-behavior-y: auto; }
.aurora { transform: translate3d(calc(var(--tilt-x) * 1px), calc(var(--scroll) * -0.12px + var(--tilt-y) * 1px), 0); will-change: transform; transition: opacity 0.6s; }
.aurora span:nth-child(4) { background: var(--aurora-4); bottom: -20vmax; right: -30vmax; animation: flotar2 40s ease-in-out infinite alternate-reverse; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fondo-foto {
  position: fixed; inset: -40px; z-index: 0; pointer-events: none; opacity: 0;
  background: center / cover no-repeat; filter: blur(16px) brightness(0.42) saturate(1.25);
  transform: translate3d(calc(var(--tilt-x) * 1.5px), calc(var(--scroll) * -0.06px + var(--tilt-y) * 1.5px), 0);
  transition: opacity 0.6s;
}
.con-fondo .fondo-foto { opacity: 1; }
.con-fondo .aurora { opacity: 0.35; }

/* Vidrio con refracción: borde que se ilumina del lado de la luz y brillo que sigue la inclinación */
.vidrio, .tarjeta, .dato, .selector-mes, .buscador, .menu-lista, .grupo-mes, .acciones-rapidas button,
.boton-redondo, .tabs, .tab-mas span, .chip, .chips-filtro button, .segmento, .teclado button {
  backdrop-filter: blur(30px) saturate(190%) brightness(1.06);
  -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.06);
}
.tarjeta::before, .grupo-mes::before, .menu-lista::before, .tabs::before {
  background:
    radial-gradient(120% 80% at var(--luz-x) var(--luz-y), rgb(255 255 255 / 0.1), transparent 55%),
    linear-gradient(180deg, rgb(255 255 255 / 0.16), transparent 38%, transparent 70%, rgb(255 255 255 / 0.04));
}
.tarjeta::after, .dato::after, .menu-lista::after, .grupo-mes::after, .acciones-rapidas button::after, .boton-redondo::after, .tabs::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: radial-gradient(140% 100% at var(--luz-x) var(--luz-y), rgb(255 255 255 / 0.42), rgb(255 255 255 / 0.07) 42%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Íconos con degradé y brillo, como los de iOS */
.icono-categoria.con-color[class*="tono-"], .ar-icono[class*="tono-"], .menu-icono[class*="tono-"] {
  background-image: linear-gradient(160deg, rgb(255 255 255 / 0.38), rgb(255 255 255 / 0.05) 48%, rgb(0 0 0 / 0.22));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 2px 6px rgb(0 0 0 / 0.3);
}

/* Títulos más finos y el título grande que se achica al bajar */
h1 { font-weight: 700; letter-spacing: -0.022em; transform-origin: left center; }
h2 { font-size: 12.5px; letter-spacing: 0.03em; }
.saludo { letter-spacing: -0.02em; }
.vista.activa > h1, .vista.activa .sub.activa > h1, .vista.activa .encabezado > div:first-child {
  transform: scale(calc(1 - var(--encoge) * 0.18)); opacity: calc(1 - var(--encoge) * 0.9); transform-origin: left center;
}
.barra-titulo {
  position: fixed; z-index: 4; top: 0; left: 0; right: 0;
  height: calc(env(safe-area-inset-top) + 44px); padding-top: env(safe-area-inset-top);
  display: grid; place-items: center; font-weight: 600; font-size: 17px;
  background: rgb(0 0 0 / 0.55); border-bottom: 0.5px solid var(--separador);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity 0.25s ease, transform 0.35s var(--suave);
}
.barra-titulo.visible { opacity: 1; transform: none; }
.encabezado-botones { display: flex; gap: 10px; }

/* ---------- Tarjeta principal: gira al tocarla, borde de luz que da vueltas, estilos Apple Card ---------- */
.tarjeta-metal {
  --volteo: 0deg;
  display: grid; padding: 0; overflow: visible; border: 0; border-radius: 30px; cursor: pointer;
  background: none; box-shadow: none;
  transform-style: preserve-3d;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--volteo)));
  transition: transform 0.9s var(--resorte);
}
.tarjeta-metal.girada { --volteo: 180deg; }
.tarjeta-metal::after { display: none; }
.vista.activa .tarjeta-metal { animation: none; }
.metal-cara {
  grid-area: 1 / 1; position: relative; overflow: hidden; border-radius: 30px; padding: 20px 20px 16px; min-height: 200px;
  display: flex; flex-direction: column;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--acento) 28%, transparent), transparent 60%),
    linear-gradient(150deg, #1c1c21 0%, #0b0b0e 70%);
  border: 0.5px solid color-mix(in srgb, var(--acento) 30%, rgb(255 255 255 / 0.12));
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.4), 0 10px 24px rgb(0 0 0 / 0.45), 0 30px 60px rgb(0 0 0 / 0.55), 0 0 44px color-mix(in srgb, var(--acento) 14%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.14);
}
.metal-dorso { transform: rotateY(180deg); }
.metal-cara::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: conic-gradient(from var(--angulo), transparent 0 55%, color-mix(in srgb, var(--acento) 85%, #fff) 72%, transparent 88%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: girarBorde 7s linear infinite;
}
@keyframes girarBorde { to { --angulo: 360deg; } }
.metal-pie { position: relative; margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.metal-nombre {
  font: 600 13px var(--fuente); letter-spacing: 0.2em; text-transform: uppercase; color: rgb(255 255 255 / 0.45);
  text-shadow: 0 -1px 0 rgb(0 0 0 / 0.7), 0 1px 0 rgb(255 255 255 / 0.12);
}
.metal-girar { font-size: 12px; color: var(--texto-suave); }
.metal-dorso .metal-grupos { overflow-y: auto; max-height: 100%; }

/* Número gigante: "$" chico arriba, dígitos que ruedan y centavos chicos */
.metal-total { display: flex; align-items: flex-start; font-size: clamp(42px, 13vw, 58px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; margin-top: 12px; }
.metal-total .moneda { font-size: 0.42em; font-weight: 600; color: var(--texto-suave); margin: 0.22em 0.12em 0 0; line-height: 1; letter-spacing: 0; }
.metal-total .centavos { font-size: 0.4em; font-weight: 600; color: var(--texto-suave); margin-top: 0.2em; line-height: 1; letter-spacing: 0; }
.metal-total .entero { display: flex; }
.odo, .metal-total .sep { display: inline-block; height: 1.05em; line-height: 1.05em; overflow: hidden; }
.odo > span { display: flex; flex-direction: column; transform: translateY(calc(var(--d, 0) * -1.05em)); transition: transform 1.2s var(--resorte); }
.odo i { font-style: normal; height: 1.05em; }

/* Titanio cepillado */
:root[data-tarjeta="titanio"] .metal-cara {
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.035) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #8a8d93 0%, #4b4e54 38%, #2a2c30 62%, #6b6e74 100%);
  border-color: rgb(255 255 255 / 0.28);
}
:root[data-tarjeta="titanio"] .metal-cara::before { opacity: 0.5; }
/* Blanca, como la Apple Card */
:root[data-tarjeta="blanca"] .metal-cara {
  --texto: #1c1c1e; --texto-suave: rgb(0 0 0 / 0.5); --separador: rgb(0 0 0 / 0.1);
  color: #1c1c1e;
  background: radial-gradient(120% 90% at 0% 0%, #fff, transparent 60%), linear-gradient(160deg, #f7f7fa, #dcdce2);
  border-color: rgb(255 255 255 / 0.9);
}
:root[data-tarjeta="blanca"] .metal-nombre { color: rgb(0 0 0 / 0.3); text-shadow: 0 1px 0 rgb(255 255 255 / 0.9), 0 -1px 0 rgb(0 0 0 / 0.08); }
:root[data-tarjeta="blanca"] .saldo-cuentas span { background: rgb(0 0 0 / 0.05); border-color: rgb(0 0 0 / 0.08); }
:root[data-tarjeta="blanca"] .metal-brillo { background: radial-gradient(circle at var(--x) var(--y), rgb(255 255 255 / 0.8), transparent 40%); }

/* El logo respira */
@keyframes respirar { 50% { transform: scale(1.07); filter: drop-shadow(0 0 16px color-mix(in srgb, var(--acento) 60%, transparent)); } }
.metal-logo { animation: respirar 4.5s ease-in-out infinite; transform-origin: center; }
.candado .logo { animation: respirar 4.5s ease-in-out infinite; }

/* ---------- Billetera de cuentas ---------- */
.carrusel-cuentas { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 14px -16px 0; padding: 4px 16px 10px; scrollbar-width: none; }
.carrusel-cuentas::-webkit-scrollbar { display: none; }
.cuenta-tarjeta {
  flex: 0 0 62%; scroll-snap-align: start; position: relative; overflow: hidden; border-radius: 22px; padding: 14px 14px 10px; color: #fff;
  background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--c) 45%, transparent), transparent 65%), linear-gradient(150deg, color-mix(in srgb, var(--c) 30%, #1c1c1e), #0d0d10);
  border: 0.5px solid color-mix(in srgb, var(--c) 40%, rgb(255 255 255 / 0.1));
  box-shadow: 0 0.5px 1px rgb(0 0 0 / 0.4), 0 8px 20px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.cuenta-tarjeta small { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: rgb(255 255 255 / 0.7); white-space: nowrap; overflow: hidden; }
.cuenta-tarjeta strong { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sparkline { display: block; width: 100%; height: 36px; margin-top: 6px; overflow: visible; }
.sparkline path { fill: none; stroke: var(--c, var(--acento)); stroke-width: 2; stroke-dasharray: 1; animation: dibujar 1.4s var(--suave) both 0.2s; filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--c, var(--acento)) 60%, transparent)); }
.widget.sin-datos { display: none; }

/* ---------- Widgets de Inicio: cascada al entrar y modo edición que tiembla ---------- */
.widget { position: relative; }
.vista.activa #widgets > .widget { animation: aparecer 0.6s var(--suave) both; animation-delay: calc(var(--orden, 0) * 55ms); }
.widget.oculto { display: none; }
#widgets.editando .widget.oculto, #widgets.editando .widget.sin-datos { display: block; opacity: 0.38; }
.vista.activa #widgets.editando > .widget { animation: temblor 0.26s ease-in-out infinite alternate; }
.vista.activa #widgets.editando > .widget:nth-child(even) { animation-delay: -0.13s; }
@keyframes temblor { from { transform: rotate(-0.7deg); } to { transform: rotate(0.7deg); } }
#widgets.editando .widget > :not(.widget-control) { pointer-events: none; }
.widget-control { position: absolute; z-index: 6; top: 4px; left: -6px; display: flex; gap: 6px; }
.widget-control button {
  width: 30px; height: 30px; border-radius: 50%; border: 0.5px solid rgb(255 255 255 / 0.2); display: grid; place-items: center;
  background: rgb(58 58 60 / 0.92); color: #fff; font-size: 17px; font-weight: 700; box-shadow: 0 3px 10px rgb(0 0 0 / 0.5);
  padding: 0; flex-direction: row; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.widget-control button::after { display: none; }
.widget-control [data-w="ocultar"] { background: rgb(120 120 128 / 0.95); }
.editar-inicio { width: auto; margin: 22px auto 0; padding: 10px 22px; }

/* Hoy (como el widget de Calendario) */
.hoy { display: flex; gap: 16px; align-items: center; position: relative; }
.hoy-fecha { display: flex; flex-direction: column; align-items: center; min-width: 66px; }
.hoy-fecha span { color: var(--gasto); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.hoy-fecha strong { font: 700 46px/1 var(--fuente-num); letter-spacing: -0.03em; }
.hoy-datos { flex: 1; display: grid; gap: 6px; min-width: 0; }
.hoy-datos div { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; }
.hoy-datos small { color: var(--texto-suave); font-size: 15px; }
.hoy-vacio { margin: 0; font-size: 15px; }
.hoy-vacio small { color: var(--texto-suave); font-size: 13.5px; }

/* Anillos (como el Apple Watch) */
.anillos-caja { display: flex; align-items: center; gap: 18px; position: relative; }
.anillos { width: 124px; height: 124px; flex: none; transform: rotate(-90deg); overflow: visible; }
.anillos circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.anillo-fondo { opacity: 0.17; }
.anillo { stroke-dasharray: 100; stroke-dashoffset: 100; animation: llenarAnillo 1.5s var(--suave) forwards; animation-delay: calc(0.25s + var(--i, 0) * 0.15s); }
@keyframes llenarAnillo { to { stroke-dashoffset: var(--fin); } }
.anillos-leyenda { display: grid; gap: 8px; min-width: 0; }
.anillos-leyenda small { display: block; color: var(--texto-suave); font-size: 13px; }
.anillos-leyenda b { display: block; font-size: 17px; font-weight: 700; white-space: nowrap; }
.anillos-leyenda span { display: block; font-size: 11.5px; color: var(--texto-tenue); }

/* ---------- Gráficos: curvas suaves, burbuja al tocar, dona y barras con brillo ---------- */
.grafico-caja { position: relative; touch-action: pan-y; }
.grafico-guia { position: absolute; top: 0; bottom: 18px; width: 1px; background: var(--texto-tenue); pointer-events: none; opacity: 0; transition: opacity 0.15s; }
.grafico-burbuja {
  position: absolute; top: -4px; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: none; opacity: 0;
  background: var(--vidrio-fuerte); border: 0.5px solid var(--vidrio-borde); border-radius: 12px; padding: 5px 10px; font-size: 13px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 8px 20px rgb(0 0 0 / 0.4);
  transition: opacity 0.15s;
}
.grafico-burbuja small { color: var(--texto-suave); text-transform: capitalize; }
.grafico-caja.tocando .grafico-guia, .grafico-caja.tocando .grafico-burbuja { opacity: 1; }
.evolucion-area { opacity: 1; }
.evolucion-linea { filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--acento) 55%, transparent)); }

.dona-envoltura { position: relative; width: 140px; height: 140px; margin: 2px auto 12px; }
.dona { width: 100%; height: 100%; transform: rotate(-90deg); }
.dona circle { fill: none; stroke-width: 15; animation: aparecerDona 0.8s var(--suave) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes aparecerDona { from { opacity: 0; stroke-width: 2; } }
.dona-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dona-centro small { color: var(--texto-suave); font-size: 12px; }
.dona-centro b { font-size: 15px; font-weight: 700; }
.punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.barra { height: 9px; border-radius: 5px; }
.barra > div[style*="--c"] { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 65%, transparent), var(--c)); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 45%, transparent); }
.dias div:not(.cero), .mes-barras div, .historial-col div { background-image: linear-gradient(180deg, rgb(255 255 255 / 0.32), transparent 65%); }

/* Calendario de gastos (más rojo = más gastado ese día) */
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; position: relative; }
.calendario b { text-align: center; font-size: 11px; font-weight: 600; color: var(--texto-tenue); }
.calendario span { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; font-size: 12px; color: var(--texto-suave); background: var(--relleno); animation: aparecer 0.4s var(--suave) both; }
.calendario span[data-monto] { background: rgb(255 69 58 / calc(0.18 + var(--n, 0) * 0.82)); color: #fff; font-weight: 600; cursor: pointer; }
.calendario span.hoy { box-shadow: 0 0 0 2px var(--acento); }

/* Dólares debajo de los montos grandes */
.monto-usd { font-size: 14px; color: var(--texto-suave); min-height: 18px; margin-top: -2px; }
.gastos-total .monto-usd { display: block; font-style: normal; }

/* ---------- Barra de pestañas: burbuja líquida, texto solo en la activa, ➕ elástico ---------- */
.tabs-burbuja {
  position: absolute; top: 5px; bottom: 5px; left: 0; width: var(--bw, 0); border-radius: 999px; pointer-events: none;
  transform: translateX(var(--bx, 0));
  background: rgb(255 255 255 / 0.1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 -0.5px 0 rgb(255 255 255 / 0.08), 0 4px 16px rgb(0 0 0 / 0.35);
  transition: transform 0.6s var(--resorte), width 0.6s var(--resorte), opacity 0.2s;
}
.tabs button { min-height: 52px; justify-content: center; }
.tabs button.activo { background: transparent; }
.tabs button:not(.tab-mas):active { transform: scale(1.14); }
.tab-texto { display: block; max-height: 14px; overflow: hidden; opacity: 1; transition: max-height 0.35s var(--suave), opacity 0.25s ease; }
.tabs button:not(.activo) .tab-texto { max-height: 0; opacity: 0; }
.tab-mas.aplasta span { animation: aplastar 0.55s var(--resorte-vivo); }
@keyframes aplastar { 0% { transform: scale(1); } 28% { transform: scale(1.28, 0.78); } 55% { transform: scale(0.86, 1.14); } 100% { transform: scale(1); } }
.tabs button.activo[data-vista="inicio"] svg { animation: saltito 0.45s var(--resorte-vivo); }
.tabs button.activo[data-vista="movimientos"] svg { animation: deslizarIcono 0.5s var(--resorte); }
.tabs button.activo[data-vista="analisis"] svg { animation: crecerIcono 0.55s var(--resorte-vivo); transform-origin: bottom; }
.tabs button.activo[data-vista="mas"] svg { animation: girarIcono 0.6s var(--resorte); }
@keyframes deslizarIcono { from { transform: translateX(-7px); opacity: 0.3; } }
@keyframes crecerIcono { from { transform: scaleY(0.3); } }
@keyframes girarIcono { from { transform: rotate(-90deg) scale(0.7); } }

/* ---------- Aviso con forma de Dynamic Island ---------- */
#toast {
  top: 11px; min-height: 37px; padding: 9px 18px; border-radius: 24px; border: 0;
  background: #000; color: #fff; transform-origin: top center;
  box-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.1), 0 14px 34px rgb(0 0 0 / 0.6);
  transform: translate(-50%, 0) scale(0.3, 0.5); opacity: 0;
  transition: transform 0.6s var(--resorte-vivo), opacity 0.2s ease;
}
#toast.visible { transform: translate(-50%, 0) scale(1); opacity: 1; }
#toast > * { opacity: 0; transition: opacity 0.15s; }
#toast.visible > * { opacity: 1; transition-delay: 0.14s; }
#toast.error { color: #ff6961; }

/* ---------- Hoja: la pantalla de atrás se achica, tamaños medio y completo ---------- */
main, .tabs { transition: transform 0.5s var(--suave), filter 0.5s ease, border-radius 0.5s ease, opacity 0.3s; }
main { transform-origin: 50% calc(var(--scroll) * 1px + 40vh); }
body.con-hoja main { transform: scale(0.93); filter: brightness(0.6) blur(1.5px); border-radius: 28px; }
body.con-hoja .tabs { transform: translateX(-50%) translateY(150%); opacity: 0; }
.hoja-fondo { background: rgb(0 0 0 / 0.25); }
.hoja-fondo:not([hidden]) .hoja { animation: hojaArriba 0.55s var(--resorte) backwards; }
.hoja-fondo.vt:not([hidden]) .hoja { animation: none; }
#hoja .hoja { transition: height 0.5s var(--resorte), transform 0.45s var(--resorte); }
#hoja .hoja.media { height: 64vh; }
#hoja .hoja.completa { height: 93vh; }
#hoja .hoja.arrastrando { transition: none; }
.hoja-agarre { width: 38px; margin-bottom: 14px; cursor: grab; }
::view-transition-group(mov-abierto) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.32, 1.2, 0.5, 1); }

/* ---------- Menú al mantener apretado ---------- */
.menu-contextual {
  position: fixed; inset: 0; z-index: 36; display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding: 20px; background: rgb(0 0 0 / 0.35);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  animation: fondoEntra 0.2s ease both;
}
.menu-contextual-fila { max-width: 520px; width: 100%; margin: 0 auto; background: var(--vidrio-fuerte); border-radius: 18px; padding: 0 14px; box-shadow: 0 24px 60px rgb(0 0 0 / 0.6); animation: levantar 0.4s var(--resorte-vivo) both; }
.menu-contextual-fila .lista > li { animation: none; }
.menu-contextual-opciones { width: min(270px, 80%); margin: 0 auto 0 max(0px, calc(50% - 260px)); border-radius: 14px; overflow: hidden; background: rgb(44 44 48 / 0.9); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); transform-origin: top left; animation: menuAbre 0.38s var(--resorte-vivo) both 0.05s; }
.menu-contextual-opciones button { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 0; background: transparent; padding: 12px 16px; font-size: 17px; color: var(--texto); text-align: left; }
.menu-contextual-opciones button + button { border-top: 0.5px solid var(--separador); }
.menu-contextual-opciones button svg { width: 19px; height: 19px; }
.menu-contextual-opciones .peligro { color: var(--gasto); }
.menu-contextual-opciones button:active { background: var(--relleno); }
@keyframes levantar { from { transform: scale(0.94); } 50% { transform: scale(1.03); } to { transform: scale(1); } }
@keyframes menuAbre { from { transform: scale(0.3); opacity: 0; } }
.mov { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---------- Buscador rápido (Spotlight) ---------- */
.spotlight {
  position: fixed; inset: 0; z-index: 34; overflow-y: auto;
  padding: calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 20px);
  background: rgb(0 0 0 / 0.5); backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%);
  animation: fondoEntra 0.25s ease both;
}
.spotlight-caja { display: flex; align-items: center; gap: 12px; max-width: 560px; margin: 0 auto; animation: bajarSpot 0.5s var(--resorte) both; }
.spotlight-buscador { flex: 1; }
.spotlight-resultados { max-width: 560px; margin: 6px auto 0; }
.spot-grupo { animation: aparecer 0.35s var(--suave) both; }
.spot-grupo h3 { margin: 18px 8px 6px; font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--texto-suave); }
.spot-lista { border-radius: 18px; background: var(--vidrio-fuerte); border: 0.5px solid var(--vidrio-borde); overflow: hidden; }
.spot-lista > button { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; background: transparent; color: var(--texto); font-size: 17px; text-align: left; }
.spot-lista > button + button::before { content: ''; position: absolute; top: 0; left: 58px; right: 0; border-top: 0.5px solid var(--separador); }
.spot-lista > button:active { background: var(--relleno); }
ul.spot-lista { padding: 0 14px; }
@keyframes bajarSpot { from { transform: translateY(-30px); opacity: 0; } }

/* ---------- Teclado propio del monto ---------- */
.teclado-monto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 8px 0 2px; position: relative; }
.teclado-monto button {
  height: 52px; border-radius: 18px; display: grid; place-items: center; color: var(--texto);
  font: 500 26px var(--fuente-num);
  background: var(--vidrio); border: 0.5px solid var(--vidrio-borde);
  box-shadow: 0 0.5px 1px rgb(0 0 0 / 0.3), inset 0 1px 0 var(--reflejo);
  transition: transform 0.2s var(--resorte-vivo), background-color 0.12s;
  touch-action: manipulation;
}
.teclado-monto button:active { transform: scale(0.9); background: var(--relleno-2); }
.teclado-monto .op { color: var(--acento); background: color-mix(in srgb, var(--acento) 14%, var(--vidrio)); }
.teclado-monto svg { width: 26px; height: 26px; }
.monto input { caret-color: var(--acento); }

/* ---------- Fecha con rueda ---------- */
.boton-fecha {
  min-height: 46px; width: 100%; padding: 10px 14px; text-align: left; font-size: 17px; color: var(--texto); text-transform: capitalize;
  border: 0.5px solid var(--vidrio-borde); background: var(--relleno); border-radius: 13px;
}
.hoja-chica { padding-bottom: calc(env(safe-area-inset-bottom) + 16px); }
.rueda-atajos { display: flex; gap: 8px; }
.rueda-atajos .boton-secundario { margin-top: 0; padding: 10px; }
.rueda { position: relative; display: flex; height: 220px; margin: 12px 0 0; isolation: isolate;
  -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); }
.rueda-col { flex: 1; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 90px 0; text-align: center; overscroll-behavior: contain; }
.rueda-col::-webkit-scrollbar { display: none; }
.rueda-col.ancha { flex: 1.7; }
.rueda-col div { height: 40px; line-height: 40px; scroll-snap-align: center; font-size: 21px; color: var(--texto-suave); text-transform: capitalize; transition: color 0.15s; }
.rueda-col div.elegido { color: var(--texto); font-weight: 600; }
.rueda-marca { position: absolute; left: 0; right: 0; top: 90px; height: 40px; border-radius: 10px; background: var(--relleno); pointer-events: none; z-index: -1; }

/* ---------- Guardar: el botón se transforma en un ✓ ---------- */
.boton-principal { display: block; margin-left: auto; margin-right: auto; max-width: 100%; position: relative; overflow: hidden;
  transition: max-width 0.55s var(--resorte), background-color 0.3s ease, color 0.2s ease, transform 0.25s var(--rebote); }
.boton-principal.ok { max-width: 56px; color: transparent; background: var(--ingreso); animation: none; }
.boton-principal.ok::after {
  content: ''; position: absolute; inset: 0; animation: aparecerCheck 0.45s var(--resorte-vivo) both 0.12s;
  background: center / 26px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}
@keyframes aparecerCheck { from { transform: scale(0) rotate(-30deg); opacity: 0; } }

/* Truco de vibración: invisible, pero presente */
.haptico { position: fixed; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* ---------- Candado con reloj, como la pantalla de bloqueo ---------- */
.candado-fecha { font-size: 19px; font-weight: 600; color: var(--texto-suave); }
.candado-fecha::first-letter, .fecha-hoy::first-letter, .hoy-fecha span::first-letter { text-transform: uppercase; }
.fecha-hoy { text-transform: none; }
.candado-reloj {
  font: 700 86px/1 var(--fuente-num); letter-spacing: -0.03em; margin: 2px 0 3vh;
  background: linear-gradient(180deg, #fff, rgb(255 255 255 / 0.6)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.candado-reloj ~ .logo.chico, .candado-reloj ~ .candado-titulo { display: none; }
.candado.abriendo { animation: desbloquearSube 0.45s cubic-bezier(0.5, 0, 0.75, 0) forwards; }
@keyframes desbloquearSube { to { transform: translateY(-100%); opacity: 0.4; } }

/* ---------- Apertura con partículas ---------- */
#apertura-particulas { position: absolute; inset: 0; width: 100%; height: 100%; }
.apertura.con-particulas .logo { animation: logoEntra 0.6s var(--rebote) 0.8s both, respirar 4.5s ease-in-out 1.5s infinite; }
.apertura.con-particulas .apertura-nombre { animation-delay: 0.95s; }

/* Destellos dorados cuando entra mucha plata */
.destellos { position: fixed; inset: 0; z-index: 61; pointer-events: none; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .odo > span, .tarjeta-metal, .tabs-burbuja, main, .tabs { transition: none !important; }
  body.con-hoja main { transform: none; }
}

/* Solo la primera letra en mayúscula ("Octubre de 2026", no "Octubre De 2026") */
.nombre-mes, .mes-cabecera, .boton-fecha, .grafico-burbuja small, #inicio-mes-nombre { text-transform: none; }
.nombre-mes::first-letter, .mes-cabecera b::first-letter, .boton-fecha::first-letter, #inicio-mes-nombre::first-letter { text-transform: uppercase; }
.mes-cabecera b { display: inline-block; font-weight: 700; }

/* =========================================================
   Tarjeta de crédito, presupuestos, gastos fijos y cuotas
   ========================================================= */
.tc-fila { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.tc-fila small { display: block; color: var(--texto-suave); font-size: 13px; }
.tc-fila strong { display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.tc-vence { text-align: right; }
.tc-vence b { display: block; font-size: 19px; }
.tc-vence span { font-size: 13px; color: var(--texto-suave); }
.tc-vence.alerta b, .tc-vence.alerta span { color: var(--gasto); }
.tc-barra { margin-top: 12px; height: 6px; position: relative; }
.tc-barra > div { background: linear-gradient(90deg, color-mix(in srgb, var(--acento) 60%, transparent), var(--acento)); }
.tc-pie { position: relative; display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--texto-suave); }
.tc-pie b { color: var(--texto); font-weight: 600; }
.tarjeta-boton.urgente { border-color: color-mix(in srgb, var(--gasto) 55%, transparent); box-shadow: var(--vidrio-sombra), 0 0 0 1px color-mix(in srgb, var(--gasto) 45%, transparent), 0 0 30px color-mix(in srgb, var(--gasto) 25%, transparent); animation: latidoAlerta 2.4s ease-in-out infinite; }
@keyframes latidoAlerta { 50% { box-shadow: var(--vidrio-sombra), 0 0 0 1px color-mix(in srgb, var(--gasto) 70%, transparent), 0 0 44px color-mix(in srgb, var(--gasto) 40%, transparent); } }
.tc-datos { margin: 4px 0 6px; }
.tc-datos .dato { background: var(--relleno); border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.tc-datos .dato::after { display: none; }
.tc-datos strong { font-size: 18px; }

.presu { position: relative; padding: 7px 0; }
.presu + .presu { border-top: 0.5px solid var(--separador); }
.presu .barra { position: relative; overflow: visible; }
.presu .barra > div { background: linear-gradient(90deg, color-mix(in srgb, var(--ingreso) 60%, transparent), var(--ingreso)); border-radius: 5px; }
.presu.cerca .barra > div { background: linear-gradient(90deg, rgb(255 159 10 / 0.6), #ff9f0a); }
.presu.pasado .barra > div { background: linear-gradient(90deg, color-mix(in srgb, var(--gasto) 60%, transparent), var(--gasto)); }
.presu .barra i { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--texto-suave); opacity: 0.7; }
.presu small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--texto-suave); }
.presu.pasado small { color: var(--gasto); }
.presupuestos-lista li { gap: 10px; }
.presupuestos-lista .icono-categoria { width: 32px; height: 32px; }
.presu-monto { width: 118px !important; flex: none; text-align: right; min-height: 40px !important; padding: 8px 10px !important; }

.quitar { flex: none; border: 0; background: var(--relleno); border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; color: var(--gasto); font-size: 18px; }
.cuota-progreso { display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--relleno); overflow: hidden; }
.cuota-progreso i { display: block; height: 100%; width: var(--ancho, 0); border-radius: 2px; background: var(--acento); animation: crecer 0.8s var(--suave) both; }
#fijo-tipo { margin-bottom: 4px; }
#campo-cuotas .segmento button { font-size: 13.5px; }

/* =========================================================
   Solo anotar gastos (el perfil de Pablo): sin saldos, cuentas, ingresos ni tarjeta
   ========================================================= */
.solo-gastos [data-widget="cuentas"], .solo-gastos [data-widget="tarjeta"], .solo-gastos [data-widget="gastos"],
.solo-gastos .acciones-rapidas [data-rapido="ingreso"], .solo-gastos .acciones-rapidas [data-rapido="inversion"],
.solo-gastos .acciones-rapidas [data-rapido="costo"], .solo-gastos .acciones-rapidas [data-rapido="tarjeta"],
.solo-gastos #selector-tipo, .solo-gastos #selector-origen, .solo-gastos #titulo-cuenta, .solo-gastos #chips-cuentas,
.solo-gastos #filtro-tipo, .solo-gastos #filtro-cuenta, .solo-gastos #editar-tipo, .solo-gastos .campo:has(#editar-cuenta),
.solo-gastos [data-abrir="transferir"], .solo-gastos [data-abrir="tarjeta"], .solo-gastos [data-abrir="cuentas"],
.solo-gastos #fijo-tipo, .solo-gastos .campo:has(#fijo-cuenta), .solo-gastos .campo:has(#cuota-cuenta),
.solo-gastos .leyenda-ahorro, .solo-gastos .leyenda-inversion, .solo-gastos .barra-entro, .solo-gastos .barra-inversion,
.solo-gastos #menu-otro-perfil + .menu-lista [data-abrir="transferir"] { display: none !important; }
.solo-gastos .acciones-rapidas { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.solo-gastos .metal-total { color: var(--texto); }
.solo-gastos .filtros-fila select { flex: 1; }

/* Guía para armar los atajos */
.pasos { position: relative; margin: 6px 0 8px; padding-left: 22px; font-size: 15px; line-height: 1.45; }
.pasos li { margin: 0 0 10px; }
.pasos li::marker { color: var(--acento); font-weight: 700; }
.pasos .codigo { margin: 8px 0; }
.solo-gastos .atajos-avanzado { display: none !important; }