*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}

/* ══ lienzo ══ */
body{
  font-family:var(--f);font-size:14px;line-height:1.45;color:var(--fg);
  min-height:100vh;max-width:520px;margin:0 auto;position:relative;z-index:0;
  background:transparent;-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  padding:calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right))
          calc(118px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
}
@media (display-mode:standalone){ }
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  /* fondo Aurora. Los ositos se dibujan desde la tabla de fondos (ponerFondo), que guarda
     tambien las otras paletas para un futuro selector */
  background:
    radial-gradient(58vmax 48vmax at 10% -8%, rgba(60,220,170,.46), transparent 66%),
    radial-gradient(52vmax 44vmax at 100% 14%, rgba(130,95,255,.40), transparent 64%),
    radial-gradient(56vmax 48vmax at 88% 92%, rgba(40,160,255,.34), transparent 66%),
    radial-gradient(48vmax 42vmax at 4% 100%, rgba(170,255,200,.20), transparent 64%),
    linear-gradient(180deg, #0f2229 0%, #0b1820 46%, #071116 100%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(130vmax 100vmax at 50% 4%, transparent 44%, rgba(5,8,17,.46) 100%);
}
button,input,select{font-family:inherit;-webkit-tap-highlight-color:transparent}
input,select{color-scheme:dark}

.c-g{color:var(--grn)}.c-y{color:var(--yel)}
.c-r{color:var(--red)}.c-dim{color:var(--dim)}
.pos{color:var(--grn)}.neg{color:var(--red)}
[hidden]{display:none!important}

/* superficie reutilizable */
.panel{background:var(--panel);border:1px solid var(--rim);
       box-shadow:inset 0 1px 0 var(--rimT)}
/* material de vidrio para los contenedores grandes */
.hero,.movcard,.chart,.barras-card,.tjcard,.prcard,.indics{
  -webkit-backdrop-filter:saturate(150%) blur(11px);backdrop-filter:saturate(150%) blur(11px)}

/* ══ resumen del mes ══ */
/* el medidor va a la derecha, centrado con la cifra del saldo */
.hero-val.largo{font-size:25px}
.hero-val{font-size:30px;font-weight:700;letter-spacing:-.035em;line-height:1.05}
.b-g{background:linear-gradient(90deg,#2eb96d,#5ee6a8)}
.b-y{background:linear-gradient(90deg,#d99510,#ffd06a)}
.b-r{background:linear-gradient(90deg,#d95555,#ff9a9a)}
.b-a{background:linear-gradient(90deg,#5183f2,#8ab4ff)}

/* tres columnas dentro de la misma tarjeta */
/* ===== doble anillo del saldo ===== */
/* la fila del anillo usa las mismas columnas que las losetas de abajo:
   el anillo queda centrado sobre "Mes pasado" en cualquier ancho de pantalla */
.hero{border-radius:var(--rL);padding:14px 16px 0;margin-bottom:4px;overflow:hidden;
  background:var(--panel);border:1px solid var(--rim);
  box-shadow:inset 0 1px 0 var(--rimT), var(--sh);--kgap:7px}
@keyframes kaRota{from{opacity:0;transform:translateY(5px) scale(.92)}to{opacity:1;transform:none}}
/* los puntitos cuelgan debajo del anillo sin sumarle alto: la info se centra con el anillo */
/* explicacion del anillo, con el mismo vidrio que los desplegables */
/* mismo vidrio que el desplegable de categorias */

/* el saldo con el ojo a su derecha */
/* el ritmo y el boton de creditos comparten renglon: el boton queda a la derecha,
   bajo el ojo, y vale para toda la app */
/* el boton de creditos sigue el estilo del de categorias: mismo vidrio, misma letra,
   celeste cuando esta prendido e iluminado mientras su menu esta abierto */
/* losetas sin fondo, con el texto centrado */
.hg{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;
  padding:9px 4px 10px;border-radius:15px;background:transparent;
  transition:background .2s ease, transform .16s cubic-bezier(.3,1.4,.4,1)}
.blanco{color:#fff}

/* ojo para ocultar importes */
.ojo{position:relative;width:40px;height:40px;margin:-10px -8px -10px -4px;flex:0 0 auto;
  padding:0;border:none;background:none;color:var(--blue);cursor:pointer}
.ojo svg{position:absolute;left:50%;top:50%;width:19px;height:19px;
  transform:translate(-50%,-50%);transition:opacity .22s ease, transform .3s cubic-bezier(.3,1.4,.4,1)}
.ojo .oj-a{opacity:1}
.ojo .oj-c{opacity:0;transform:translate(-50%,-50%) scaleY(.4)}
.ojo.cerrado .oj-a{opacity:0;transform:translate(-50%,-50%) scaleY(.4)}
.ojo.cerrado .oj-c{opacity:1;transform:translate(-50%,-50%) scaleY(1);color:var(--dim2)}
.ojo:active{transform:scale(.9)}
.cifra{transition:filter .17s ease, opacity .17s ease}
.hero.velado .cifra{filter:blur(8px);opacity:.28}

/* ══ secciones plegables ══ */
/* la transicion va en el estado base: asi corre al tapar y tambien al destapar */
.sec .mov,.sec .tjcard,.sec .prcard,
.sec .indics,.sec .aviso,.sec .disp,.sec b{
  transition:filter .17s ease, opacity .17s ease}
.sec.velado .mov,.sec.velado .tjcard,.sec.velado .prcard,
.sec.velado .indics,.sec.velado .aviso,.sec.velado .disp,.sec.velado b{
  filter:blur(8px);opacity:.28}
.sec{margin-top:13px}
.sec-h{display:flex;flex-wrap:nowrap;align-items:center;gap:9px;width:100%;cursor:pointer;
  padding:7px 3px;background:none;border:none;color:inherit;text-align:left;
  -webkit-user-select:none;user-select:none;border-radius:10px;outline:none}
.sec-h:focus-visible{box-shadow:0 0 0 2px rgba(var(--ac),.5)}
/* titulos centrados: la flecha queda a la derecha sin empujar el texto */
.sec-h.sec-h-centro{position:relative}
.sec-h-centro .sec-x{display:none}
.sec-h-centro .chev{position:absolute;top:50%;margin-top:-5px}
#prResumen{text-align:center}
.sec-t{flex:0 0 auto;
  text-transform:uppercase;letter-spacing:.09em;white-space:nowrap}
.sec-x b{font-size:13px;font-weight:700;color:var(--red);letter-spacing:-.02em}
.chev{width:16px;height:16px;flex:0 0 auto;color:var(--dim);
  transition:transform .34s cubic-bezier(.3,1.4,.4,1)}
.sec.cerrada .chev{transform:rotate(-90deg)}
.sec-b{display:grid;grid-template-rows:1fr;overflow:hidden;
  transition:grid-template-rows .36s cubic-bezier(.4,0,.2,1), opacity .26s ease, visibility 0s linear 0s}
.sec-in{min-height:0;overflow:hidden}
.sec.cerrada .sec-b{grid-template-rows:0fr;opacity:0;visibility:hidden;pointer-events:none;
  transition:grid-template-rows .36s cubic-bezier(.4,0,.2,1), opacity .26s ease, visibility 0s linear .36s}
.mini{flex:0 0 auto;white-space:nowrap;font-size:11.5px;padding:9px 13px;min-height:38px;
  border-radius:var(--rP);cursor:pointer;color:var(--dim2);
  background:var(--soft);border:1px dashed var(--rim)}

/* ══ selector de periodo ══ */
/* los selectores segmentados usan el vidrio del dock y su misma lente para la burbuja */
.pseg{position:relative;display:flex;margin-bottom:9px;border-radius:var(--rP);border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1.2px 0 rgba(255,255,255,.30), inset 0 -1.2px 0 rgba(255,255,255,.07);
  touch-action:pan-y;-webkit-user-select:none;user-select:none}
.ps-ind{position:absolute;
  border-radius:var(--rP);pointer-events:none;
  /* toma el color del fondo; el brillo blanco de arriba se queda, es lo que la hace de vidrio */
  transition:translate .44s cubic-bezier(.3,1.4,.4,1), scale .3s cubic-bezier(.3,1.4,.4,1)}
/* al arrastrarla se agranda un poco por encima de la cinta; al soltar vuelve a su tamano */
.pseg[data-idx="1"] .ps-ind{translate:100% 0}
.pseg[data-idx="2"] .ps-ind{translate:200% 0}
.ps{position:relative;z-index:1;flex:1;border-radius:var(--rP);cursor:pointer;
  border:none;font:700 10.5px var(--f);background:none;
  text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;
  transition:color .24s ease, transform .18s cubic-bezier(.3,1.4,.4,1)}
.pseg:not(.arrastrando) .ps:active{transform:scale(.94)}

/* cabecera dentro de la tarjeta de movimientos */
.mov-head{border-bottom:1px solid rgba(255,255,255,.07)}

/* encabezado de la lista, como en Resumen: el período y el filtro en un renglón; debajo, la búsqueda (si está
   abierta) y el total con su etiqueta a la izquierda ("Hoy gastaste", "12 movimientos") */
.mov-fila{display:flex;align-items:center;gap:10px;margin:0}
.mov-fila .pseg{flex:1;min-width:0;margin:0}
.mov-fila .catbar{flex:0 0 auto;min-width:0;margin:0;gap:6px}
.mov-fila .chip{min-height:36px;padding:7px 11px}
.mov-fila .masb{width:36px;height:36px}
#bfBarra{background:var(--solido)}
#bfBarra.on{margin-top:0}
/* sin nada escrito, la ✕ sobra (solo en Dinerosito: en Dinerosita la ✕ cierra la barra) */
html:not(.dinerosita) #bfBarra:not(.lleno) .busca-graf-x{display:none}
.mov-tot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:24px 4px 2px}
.mov-tot[hidden]{display:none}
.mov-tot.aparece{animation:fadeIn .34s ease}
.mt-e{font:400 15px var(--f);color:var(--dim2);white-space:nowrap}
.mt-v{font:700 16px var(--f);letter-spacing:-.02em;white-space:nowrap;color:var(--fg)}
.mt-v.c-g{color:var(--grn)}

/* separador de dia dentro de la lista */
.mv-gr{border-bottom:1px solid rgba(255,255,255,.055)}
.mv-gr:last-child{border-bottom:none}
.mv-div{display:flex;align-items:center;gap:9px;width:100%;
  padding:11px 13px;background:rgba(255,255,255,.035);border:none;cursor:pointer;
  text-align:left;color:inherit;transition:background .2s ease}
.mv-div:active{background:rgba(255,255,255,.07)}
.mv-chev{width:14px;height:14px;flex:0 0 auto;color:var(--dim);
  transform:rotate(-90deg);transition:transform .34s cubic-bezier(.3,1.4,.4,1), color .2s}
.mv-gr.on .mv-chev{transform:rotate(0);color:var(--blue)}
.mv-cuerpo{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .36s cubic-bezier(.4,0,.2,1), opacity .24s ease,
             visibility 0s linear .36s;
  opacity:0;visibility:hidden}
.mv-gr.on .mv-cuerpo{grid-template-rows:1fr;opacity:1;visibility:visible;
  transition:grid-template-rows .36s cubic-bezier(.4,0,.2,1), opacity .24s ease,
             visibility 0s linear 0s}
.mv-in2{min-height:0;overflow:hidden;border-top:1px solid rgba(255,255,255,.055)}
.mv-gr.on .mv-div{background:rgba(var(--ac),.08)}
/* en Hoy la tarjeta del día no se pliega: su encabezado no es un botón (ni reacciona al toque) */
.mv-gr.fija .mv-div{pointer-events:none}
.mv-dl{flex:1 1 auto;min-width:0;
  text-transform:uppercase;letter-spacing:.08em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-dt{flex:0 0 auto;font-weight:600;color:var(--dim2);
  letter-spacing:-.02em;white-space:nowrap}

/* tarjetas y prestamos en movimientos: su icono con el color asignado */
.mv-ico{display:flex;align-items:center;justify-content:center}
.mv-ico svg{width:24px;height:24px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}

/* los botones de la cinta se comportan como la pildora del mes:
   se achican al tocarlos y quedan iluminados mientras su panel esta abierto */
.catbar .chip:active,.catbar .masb:active,.catbar .lupa:active{transform:scale(.9)}
.catbar .filtro.abierto{
  background:rgba(var(--ac),.26);border-color:rgba(var(--ac2),.5)}

/* los botones de la cinta de categorias sin sombra: queda solo el brillo del vidrio */
.catbar .chip,.catbar .masb{transition:transform .18s cubic-bezier(.3,1.4,.4,1),
  background .22s ease, border-color .22s ease, color .22s ease;box-shadow:inset 0 1.2px 0 rgba(255,255,255,.28)}

/* el + y la lupa con el mismo color que el texto del selector de categorias */
/* con el panel abierto el + gira y queda como una cruz, igual que la lupa */
/* la etiqueta del selector de categorias va en mayuscula, como el selector de periodo */

/* el emoji o el icono de cada fila es el que abre la edicion */
.mv-toca{cursor:pointer;border-radius:12px;
  transition:transform .16s cubic-bezier(.3,1.4,.4,1), background .2s ease}
.mv-toca:active{transform:scale(.84);background:rgba(255,255,255,.1)}

/* check circular para marcar un fijo como pagado */
/* check de los fijos, con la logica de los interruptores: apagado lleva el vidrio
   del dock y al marcarse se llena de color con un fundido (naranja gasto, verde ingreso) */
/* al marcarse queda tenido como la pildora del mes cuando no estas en el mes actual:
   fondo oscuro del color, borde del color y el tilde en un tono claro */
/* con el check a la izquierda, los montos de los fijos comparten ancho para que los checks queden en columna */
.mv-fijo .mv-amt,.mv-finn .mv-amt{min-width:98px;text-align:right}

/* ══ cinta de categorias ══ */
.catbar{position:relative;display:flex;gap:7px;align-items:center;margin-bottom:9px}
/* el filtro cede ancho con puntos suspensivos antes que empujar la lupa */
.catbar .filtro{min-width:0;flex:0 1 auto}
/* la pastilla se estira o se achica con rebote cuando cambia lo que dice */
.catbar .filtro.estira{overflow:hidden;
  transition:transform .18s cubic-bezier(.3,1.4,.4,1), background .22s ease, border-color .22s ease,
             color .22s ease, width .36s cubic-bezier(.3,1.4,.4,1)}
/* y el texto nuevo entra con un fundido que sube apenas */
@keyframes etqEntra{from{opacity:0;transform:translateY(6px) scale(.94);filter:blur(2px)}
  to{opacity:1;transform:none;filter:none}}
.filtro{flex:0 0 auto;gap:7px}
.catdrop{position:fixed;z-index:48;width:226px;max-height:0;overflow:hidden;
  padding:0 6px;pointer-events:none;border:1px solid rgba(255,255,255,.22);border-width:0;
  opacity:0;transform:translateY(-10px) scale(.94);transform-origin:top left;
  transition:max-height .34s cubic-bezier(.3,1,.4,1), opacity .2s ease,
             transform .34s cubic-bezier(.3,1.4,.4,1), padding .28s ease}
.catdrop.on{max-height:var(--dh,300px);overflow-y:auto;padding:6px;border-width:1px;
  opacity:1;transform:none;pointer-events:auto}
.cdi{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;cursor:pointer;
  border:none;background:none;color:var(--fg);text-align:left;
  -webkit-user-select:none;user-select:none;transition:background .2s ease}
.cdi:active{background:rgba(255,255,255,.06)}
/* el emoji de cada categoria abre su edicion */
/* Creditos va separado del resto con una linea sutil */
.cdi.cdi-cred{position:relative;margin-top:9px}
.cdi.cdi-cred::before{content:'';position:absolute;left:10px;right:10px;top:-5px;height:1px;
  background:rgba(255,255,255,.1);pointer-events:none}
/* el desplegable de Movimientos se ajusta a su contenido y sale del borde derecho de TODAS */
.cdi-e{font-size:16px;line-height:1;width:20px;text-align:center;flex:0 0 auto;
  transform:translateY(var(--cdiEmo, 0px))}
.cdi-n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* el interruptor chico de los renglones usa el mismo diseno que el grande */
.sw-mini{flex:0 0 auto;width:38px;height:22px}
.cdi.on .sw-mini i::before{opacity:1}
.cdi.on .sw-mini i::after{transform:translateX(16px);background:rgba(255,255,255,.42)}
.cdi:active .sw-mini i::after{width:20px}
.cdi.on:active .sw-mini i::after{transform:translateX(12px)}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  padding:9px 14px;min-height:40px;border-radius:var(--rP);cursor:pointer;color:var(--dim2);
  background:rgba(22,26,42,.44);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:saturate(170%) blur(17px);backdrop-filter:saturate(170%) blur(17px);
  box-shadow:inset 0 1.2px 0 rgba(255,255,255,.28), 0 6px 16px rgba(0,0,0,.28)}
.chip.on{color:#fff;background:rgba(var(--ac),.30);border-color:rgba(var(--ac2),.55)}

.masb{flex:0 0 auto;width:40px;height:40px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font:400 21px/1 var(--f);color:var(--blue);
  background:rgba(22,26,42,.44);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:saturate(170%) blur(17px);backdrop-filter:saturate(170%) blur(17px);
  box-shadow:inset 0 1.2px 0 rgba(255,255,255,.28), 0 6px 16px rgba(0,0,0,.28);
  transition:background .2s ease, transform .16s cubic-bezier(.3,1.4,.4,1)}
.masb:active{transform:scale(.88) rotate(90deg)}
.lupa:active{transform:scale(.88)}
.sec-x{flex:1 1 auto;display:flex;justify-content:flex-end;align-items:center;min-width:0;overflow:visible}
.sec-x .masb{width:34px;height:34px;font-size:19px;margin:-8px 0}

/* la busqueda vive a la derecha y el campo crece hacia la izquierda */

.lupa{position:relative}
.lupa svg{position:absolute;left:50%;top:50%;width:17px;height:17px;
  transform:translate(-50%,-50%);
  transition:opacity .2s ease, transform .3s cubic-bezier(.3,1.4,.4,1)}
.mv-otro{background:rgba(158,120,255,.09);box-shadow:inset 3px 0 0 rgba(176,142,255,.75)}
.mv-mes{display:inline-block;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#cbb2ff;background:rgba(158,120,255,.22);
  padding:2px 7px;border-radius:var(--rP);margin-right:6px}


/* ══ hoja única de alta y edición ══ */
/* mismo vidrio que el selector de meses, para unificar */
.hm{width:min(368px, calc(100vw - 28px));position:relative;
  background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:saturate(175%) blur(9px);backdrop-filter:saturate(175%) blur(9px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36), 0 24px 60px rgba(0,0,0,.5)}
/* con un panel abierto, lo de atrás se corre a un segundo plano */
.hm-atras{transition:opacity .22s ease, filter .22s ease}
/* con un desplegable abierto, una capa oscura cubre toda la hoja: el vidrio del
   desplegable no puede desenfocar lo de atras, asi que lo apagamos. El boton que lo
   abrio queda por encima, iluminado */
.hm::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;
  background:rgba(12,16,28,.8);opacity:0;transition:opacity .22s ease}
.hm .abierto{position:relative;z-index:4}
.hm-tit{font:600 10.5px var(--f);text-transform:uppercase;
  letter-spacing:.08em}
.hm-imp{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:7px;
  padding:0 15px;height:56px;border-radius:var(--rP);border:1px solid rgba(255,255,255,.14)}
.hm-imp i{font:600 19px var(--f);color:var(--dim);font-style:normal}
.hm-imp input{flex:1;min-width:0;border:none;background:none;outline:none;
  font:700 25px var(--f);color:var(--fg);letter-spacing:-.03em;padding:0}
.hm-imp input::placeholder{color:rgba(235,240,255,.22)}
.hm-imp:focus-within{border-color:rgba(var(--ac2),.5)}
.hm-emo{display:block;font-size:24px;line-height:1;
  transform:translateY(var(--emoOff, 0px))}

/* segunda fila: descripcion y fecha, con la misma grilla que importe y categoria */
/* la fecha ocupa la misma columna que el circulo de categoria (56px) */

.hm-nota{display:block;width:100%;max-height:0;opacity:0;padding:0 15px;margin:0;overflow:hidden;
  /* mismo radio que se ve en las esquinas del titulo (46px de alto / 2):
     con el radio de pildora un campo alto queda ovalado */
  border-radius:23px;background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,0);
  font:400 13.5px var(--f);color:var(--fg);line-height:1.5;resize:none;outline:none;
  font-family:inherit;
  transition:max-height .3s ease, opacity .24s ease, padding .3s ease,
             margin .3s ease, border-color .3s ease}
.hm-nota.on{max-height:104px;opacity:1;padding:12px 15px;margin-bottom:9px;
  border-color:rgba(255,255,255,.12)}
.hm-nota::placeholder{color:var(--dim)}

.hm-aviso{font-size:11.5px;color:var(--dim2);line-height:1.45;margin:0 2px;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .26s ease, opacity .22s ease, margin .26s ease}
.hm-aviso.on{max-height:48px;opacity:1;margin-bottom:9px}
.modal-box .hm-aviso{margin:0 2px}
.modal-box .hm-aviso.on{margin-bottom:9px}
.hm-aviso b{color:var(--fg);font-weight:700}

/* las opciones quedan fijas abajo, encima de la X y el tilde */
#hmIngBox.on{color:#c8ffe4;background:rgba(75,220,150,.2);border-color:rgba(90,230,165,.45)}
#hmFijoBox.on{color:#ffe0ac;background:rgba(255,197,85,.2);border-color:rgba(255,197,85,.42)}

/* los desplegables de la hoja usan el mismo material que el de Movimientos */
/* mismos renglones y rellenos que el de Movimientos, sin interruptores. El ancho se
   ajusta al nombre mas largo: a la derecha queda el mismo aire que a la izquierda */
#hojaMov .catdrop{transform-origin:top right;width:max-content;max-width:calc(100vw - 28px)}
.cdi-ico{display:flex;align-items:center;justify-content:center}
.cdi-ico svg{width:18px;height:18px;display:block}
/* selector de cuotas: mismo material y gesto que el selector de meses,
   pero con las opciones en círculos porque son más chicas */
/* selector de cuotas: la misma rueda que el de meses, en el mismo vidrio y con la
   misma animacion. El contenido de la hoja no se desenfoca porque un backdrop-filter
   anidado no alcanza al del padre: en su lugar, mientras esta abierto, el fondo se atenua */

/* menú del botón flotante: dos burbujas en arco */
/* el menu es un punto anclado al centro del (+): las burbujas salen en arco */
/* radio 88: movimiento a 90° (arriba) y consumo a 132° (diagonal), asi el de
   consumo no pisa la barra de navegacion en pantallas como la del iPhone 13 Pro */
.fab.abierto{transform:rotate(135deg);border-color:rgba(255,255,255,.34)}

/* ══ interruptor ══ */
/* el carril tiene el borde de vidrio del dock y la perilla es la misma lente de la
   burbuja del dock. Al prenderse, el carril se llena de color con un fundido */
.sw{position:relative;flex:0 0 auto;display:block}
.sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.sw i{position:absolute;inset:0;border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1.2px 0 rgba(255,255,255,.30), inset 0 -1.2px 0 rgba(255,255,255,.07)}
.sw input:checked + i::before{opacity:1}

/* ══ lista de movimientos ══ */

.mv{display:flex;align-items:center;gap:10px;padding:11px 13px;
  border-bottom:1px solid rgba(255,255,255,.055)}
.mv:last-child{border-bottom:none}
.mv-emo{flex:0 0 auto;width:26px;display:flex;align-items:center;justify-content:center;
  font-size:19px;line-height:1}
.mv-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.mv-desc{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-meta{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-amt{flex:0 0 auto;font-weight:400;letter-spacing:-.02em;
  white-space:nowrap}
.mv-lock{background:rgba(var(--ac),.05)}
.mv-pend{background:rgba(16,26,54,.62);box-shadow:inset 3px 0 0 rgba(255,255,255,.8)}
.mv-apagado{opacity:.42;filter:saturate(.3) grayscale(.5)}
.mv-amt{transition:color .3s ease}
.mv-apagado .mv-amt{text-decoration:line-through;text-decoration-thickness:1px}
/* lineas por tipo de movimiento */
.mv-var{box-shadow:inset 3px 0 0 rgba(var(--ac),.55)}
.mv-fijo{background:rgba(58,34,14,.4);box-shadow:inset 3px 0 0 #ff9d4d}
/* un fijo ya pagado conserva la linea naranja pero pierde el fondo */
.mv-fijo.mv-fijopago{background:transparent}
.mv-finn{background:rgba(54,30,86,.46)}
/* ingreso fijo ya cobrado: queda la linea, se va el fondo */
.mv-finn.mv-fijopago{background:transparent}
.mv-finn:not(.mv-fijopago) .mv-amt{opacity:.6}
.mv-pago{background:rgba(75,220,150,.08);box-shadow:inset 3px 0 0 #b98cff}
.mv-parcial{background:rgba(255,197,85,.07);box-shadow:inset 3px 0 0 var(--yel)}
.mv-favor{background:rgba(75,220,150,.06);box-shadow:inset 3px 0 0 var(--grn)}
.mv-cand{width:12px;height:12px;margin-left:6px;vertical-align:-1px;color:var(--blue);opacity:.5;flex:0 0 auto}
.vacio{text-align:center;color:var(--dim);font-size:12.5px;padding:26px 14px}

/* ══ en que se fue ══ */
.chart{border-radius:var(--rL);padding:13px 14px 12px;
  background:var(--panel);border:1px solid var(--rim);box-shadow:inset 0 1px 0 var(--rimT)}

.donut{position:relative;width:168px;height:168px;margin:2px auto 10px}
.donut canvas{display:block;width:168px;height:168px;cursor:pointer}
.donut-c{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;pointer-events:none}
.donut-c span{font-size:28px;font-weight:700;letter-spacing:-.04em;text-align:center;
  line-height:1.05;white-space:nowrap}
.donut-c small{color:var(--dim);text-transform:uppercase;
  letter-spacing:.1em;margin-top:3px}

.leyenda{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 6px;
  padding-top:11px;border-top:1px solid rgba(255,255,255,.08)}
.leg{display:grid;grid-template-rows:auto auto;
  align-items:center;gap:1px 6px;width:100%;padding:6px 7px;
  border:none;background:none;color:inherit;cursor:pointer;border-radius:11px;text-align:left;
  transition:background .2s ease, transform .15s cubic-bezier(.3,1.4,.4,1)}
.leg:active{transform:scale(.99)}
.leg.on{background:rgba(var(--ac),.16)}
.leyenda.refresca .leg{animation:legEntra .34s cubic-bezier(.3,1.4,.4,1) backwards}
.leyenda.refresca .leg:nth-child(2){animation-delay:.04s}
.leyenda.refresca .leg:nth-child(3){animation-delay:.08s}
.leyenda.refresca .leg:nth-child(4){animation-delay:.12s}
.leyenda.refresca .leg:nth-child(5){animation-delay:.16s}
.leyenda.refresca .leg:nth-child(n+6){animation-delay:.2s}
@keyframes legEntra{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
/* la lista de Movimientos al cambiar el período o un filtro: los días aparecen de a uno, con un fundido (sin
   desplazarse: mientras la tarjeta cambia de alto, lo que se corre de lugar se ve cortado abajo) */
.mov.refresca>*{animation:fadeIn .34s ease backwards}
.mov.refresca>:nth-child(2){animation-delay:.04s}
.mov.refresca>:nth-child(3){animation-delay:.08s}
.mov.refresca>:nth-child(4){animation-delay:.12s}
.mov.refresca>:nth-child(5){animation-delay:.16s}
.mov.refresca>:nth-child(n+6){animation-delay:.2s}
.leyenda.saliendo .leg{opacity:0;transform:translateX(14px);
  transition:opacity .18s ease, transform .2s ease}
.leg-n{min-width:0;color:var(--fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leg-a{grid-row:2;font-size:13px;color:var(--dim2);font-weight:400;
  letter-spacing:-.025em;text-align:left;white-space:nowrap}

.catdet{max-height:0;overflow:hidden;opacity:0;margin-top:0;padding-top:0;
  border-top:1px solid rgba(255,255,255,0);
  transition:max-height .38s cubic-bezier(.3,1,.4,1), opacity .24s ease,
             margin-top .3s ease, padding-top .3s ease, border-color .3s ease}
.catdet.on{opacity:1;margin-top:11px;padding-top:11px;
  border-top-color:rgba(255,255,255,.08)}
#detPista{margin-top:11px;padding-top:11px;border-top:1px solid rgba(255,255,255,.08);
  max-height:40px;overflow:hidden;
  transition:max-height .3s ease, opacity .22s ease, margin .3s ease,
             padding .3s ease, border-color .3s ease}
#detPista.oculta{max-height:0;opacity:0;margin-top:0;padding-top:0;border-top-color:transparent}
@keyframes detEntra{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.det-pie{color:var(--dim);text-align:center;margin:0}
.det-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.det-h span{font-weight:600}
.det-h b{font-weight:700;letter-spacing:-.02em}
.det-b{flex:0 0 40px;height:5px;border-radius:var(--rP);background:rgba(255,255,255,.08);overflow:hidden}
.det-b i{display:block;height:100%;border-radius:var(--rP);transition:width .5s cubic-bezier(.3,1,.4,1)}

/* ══ tarjetas en una sola card ══ */
.tjcard{overflow:hidden}
/* mientras se reordena */
.reordenando{touch-action:none}
.reordenando .tjr,.reordenando .prr{transition:transform .2s ease}
.movido{position:relative;z-index:3;transition:none!important;
  background:rgba(var(--ac),.14)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.5), inset 3px 0 0 var(--blue)!important;
  border-radius:14px}
.movido.listo{animation:tomar .42s cubic-bezier(.3,1.4,.4,1)}
@keyframes tomar{
  0%{transform:scale(1)}
  45%{transform:scale(1.035)}
  100%{transform:scale(1)}}
.reordenando .tjr:not(.movido),.reordenando .prr:not(.movido){opacity:.55}
.tjr-nom{flex:1 1 auto;min-width:0;color:var(--fg);font:500 14px var(--f);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.tjr,.prr{transition:background .38s ease, box-shadow .38s ease}
.tjr.pagada{background:linear-gradient(90deg, rgba(34,120,86,.3), rgba(26,92,70,.16));
  box-shadow:inset 3px 0 0 var(--grn)}
.tjr.pagada .tjr-nom{color:#d6ffe9}
.tjr.parcial{background:linear-gradient(90deg, rgba(130,96,26,.3), rgba(96,72,20,.16));
  box-shadow:inset 3px 0 0 var(--yel)}
.tjr.parcial .tjr-nom{color:#ffeccb}
/* efecto de pago completado: sirve en cualquier fila */
.destello{animation:pagoOk .72s cubic-bezier(.3,1,.4,1)}
.destello-am{animation:pagoParcial .72s cubic-bezier(.3,1,.4,1)}
@keyframes pagoParcial{
  0%{box-shadow:inset 3px 0 0 var(--yel), inset 0 0 0 999px rgba(255,197,85,.28),
     0 0 24px rgba(255,197,85,.4)}
  55%{box-shadow:inset 3px 0 0 var(--yel), inset 0 0 0 999px rgba(255,197,85,.12),
     0 0 12px rgba(255,197,85,.2)}
  100%{box-shadow:inset 3px 0 0 var(--yel), inset 0 0 0 999px rgba(255,197,85,0),
     0 0 0 rgba(255,197,85,0)}}
@keyframes pagoOk{
  0%{box-shadow:inset 3px 0 0 var(--grn), inset 0 0 0 999px rgba(75,220,150,.30),
     0 0 24px rgba(75,220,150,.42)}
  55%{box-shadow:inset 3px 0 0 var(--grn), inset 0 0 0 999px rgba(75,220,150,.12),
     0 0 12px rgba(75,220,150,.20)}
  100%{box-shadow:inset 3px 0 0 var(--grn), inset 0 0 0 999px rgba(75,220,150,0),
     0 0 0 rgba(75,220,150,0)}}

/* alta y baja de filas */
.sale{animation:filaSale .24s cubic-bezier(.4,0,.6,1) forwards;pointer-events:none;
  overflow:hidden}
@keyframes filaSale{
  to{opacity:0;transform:translateX(26px) scale(.96);max-height:0;
     padding-top:0;padding-bottom:0;border-width:0}}
.tjr[data-conhijos]{cursor:pointer}
.tjr-pre{display:flex;padding:9px 14px 8px 52px;gap:6px;background:rgba(255,255,255,.035);border-top:1px solid rgba(255,255,255,.07)}
.tjr-pre>div{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.tjr-pre b{font:600 14px var(--f);letter-spacing:-.02em;white-space:nowrap}
.tjr-pre span{font-size:11px;color:var(--dim2)}

/* pastilla de estado: pagar, parcial o saldado */
/* pastillas de pago, con la misma logica: vidrio del dock y relleno que se desvanece */
.tjr-est{position:relative;isolation:isolate;flex:0 0 auto;width:64px;height:30px;
  padding:0 4px;border-radius:var(--rP);display:flex;align-items:center;justify-content:center;
  font:700 9.5px var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--dim2);
  background:rgba(22,26,42,.44);border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1.2px 0 rgba(255,255,255,.30), inset 0 -1.2px 0 rgba(255,255,255,.07);
  transition:color .3s ease, transform .16s cubic-bezier(.3,1.4,.4,1)}
.tjr-est{cursor:pointer}
.tjr-est::before{content:'';position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
  opacity:0;transition:opacity .38s ease}
.tjr-est:active{transform:scale(.92)}
/* pagada y parcial quedan tenidas como la pildora del mes fuera de mes */
.tjr-est.pago{color:#c8ffe4}
.tjr-est.parte{color:#ffe6b8}
.tjr-est.pago::before{background:rgba(28,104,70,.62);box-shadow:inset 0 0 0 1px rgba(90,230,165,.5);opacity:1}
.tjr-est.parte::before{background:rgba(120,86,24,.62);box-shadow:inset 0 0 0 1px rgba(255,205,110,.5);opacity:1}
.tjr-est.pago svg{width:15px;height:15px}

.tjr-add{display:flex;align-items:center;width:100%;border:none;background:rgba(255,255,255,.03);cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.055)}

/* ══ prestamos ══ */
.prr-add{display:flex;align-items:center;width:100%;border:none;background:rgba(255,255,255,.03);cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.055)}
.prr-add:active{background:rgba(255,255,255,.08)}
.prcard{overflow:hidden}
.prr:last-child{border-bottom:none}
.prr.fin{opacity:.5}
.prr-n{flex:1 1 auto;min-width:0;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prr-c{flex:0 0 auto;font-size:14.5px;font-weight:600;letter-spacing:-.02em;color:var(--yel);
  transition:color .3s ease}
.prr.pago .prr-c{color:var(--grn)}
.prr.pago{background:rgba(16,40,30,.44);box-shadow:inset 3px 0 0 var(--grn)}
.barra{height:6px;border-radius:var(--rP);background:rgba(255,255,255,.09);overflow:hidden}
.barra i{display:block;height:100%;border-radius:var(--rP);
  transition:width .85s cubic-bezier(.3,1,.4,1)}
.vacio-sec{font-size:12.5px;color:var(--dim);text-align:center;padding:20px 0}

.disp{font-size:13.5px;color:var(--fg);line-height:1.55;
  margin:2px 2px 13px;padding:0 2px}
.disp b{color:var(--fg);font-weight:700}

/* ══ indicadores de salud ══ */
.indics{flex-direction:column;
  background:rgba(255,255,255,.07)}
.ind{background:rgba(13,17,30,.34)}
.ind-h{justify-content:space-between}


/* menú de modos de crédito: se abre manteniendo apretada la pastilla */
/* el menu de modos ahora flota sobre la pagina, debajo del boton del KPI */


/* comparación contra el promedio histórico */
.gcomp{max-height:0;overflow:hidden;opacity:0;margin:0;text-align:center;line-height:1.45;
  transition:max-height .34s ease, opacity .26s ease, margin .3s ease}
.gcomp.on{max-height:60px;opacity:1;margin:0 0 10px}
.gcomp b{font-weight:700}
.gcomp.bien{color:var(--grn)}
.gcomp.mal{color:var(--yel)}

/* la leyenda cambia de a una fila, no toda junta */
.leg.llega{animation:legEntra .4s cubic-bezier(.3,1.4,.4,1)}
.leyenda.relevo .leg-a,.leyenda.relevo .leg-p{animation:cifraCambia .46s ease}
@keyframes cifraCambia{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* selector de quincena */
.qseg{position:relative;display:flex;margin-bottom:11px;border-radius:var(--rP);border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1.2px 0 rgba(255,255,255,.30), inset 0 -1.2px 0 rgba(255,255,255,.07);
  touch-action:pan-y;-webkit-user-select:none;user-select:none}
.qseg[data-idx="1"] .ps-ind{translate:100% 0}

/* barras mes a mes: ingresos y gastos lado a lado */
.bpar{width:100%;height:76px;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.bar-e,.bar-s{flex:0 0 13px;height:100%;display:flex;align-items:flex-end}
.bar-e i,.bar-s i{display:block;width:100%;
  transition:height .55s cubic-bezier(.3,1,.4,1)}
.bleg{display:inline-flex;align-items:center;gap:5px;margin:0 9px}
.bleg i{width:8px;height:8px;display:inline-block}
.bleg-n{display:block;margin-top:4px;color:var(--dim)}
.barras-card.flaca .bpar{height:46px}

/* ══ gasto diario ══ */
.diario{border-radius:var(--rL);padding:13px 14px 11px;
  background:var(--panel);border:1px solid var(--rim);box-shadow:inset 0 1px 0 var(--rimT);
  -webkit-backdrop-filter:saturate(150%) blur(11px);backdrop-filter:saturate(150%) blur(11px)}
.di-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.di-graf.refresca .dib i{animation:barEntra .42s cubic-bezier(.3,1.4,.4,1) backwards}
@keyframes barEntra{from{height:0;opacity:.3}}
.di-t{font-weight:600;text-transform:uppercase;letter-spacing:.07em}
.di-tope{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--rP);
  cursor:pointer;font:600 11.5px var(--f);color:var(--dim2);
  background:rgba(255,255,255,.06);border:1px solid var(--rim);
  transition:background .2s ease, transform .16s cubic-bezier(.3,1.4,.4,1)}
.di-tope svg{width:11px;height:11px;color:var(--blue)}
.di-tope:active{transform:scale(.94)}

.di-cuerpo{position:relative;height:86px}
.di-barras{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px}
.dib{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end}
.dib i{display:block;width:100%;
  transition:height .5s cubic-bezier(.3,1,.4,1)}
.di-linea{position:absolute;left:0;right:0;height:0;pointer-events:none;z-index:1}
.di-linea::before{content:'';position:absolute;top:0;height:0;
  border-top:1px dashed currentColor;opacity:.75}
.di-linea b{position:absolute;
  text-transform:uppercase;
  background:rgba(13,17,30,.72)}
/* una etiqueta a cada lado: si no, cuando las lineas se juntan se pisan */
.di-linea.prom::before{left:34px;right:0}
.di-linea.prom b{left:0}
.di-linea.tope::before{left:0;right:34px}
.di-linea.tope b{right:0}
.di-linea.prom{color:#fff}
.di-linea.tope{color:#b98cff}
/* promedio historico: otra linea punteada, en celeste, con la etiqueta a la derecha */
.di-linea.hist{color:#6aa0ff}
.di-linea.hist::before{left:0;right:62px;border-top-style:dashed}
.di-linea.hist b{right:0}
.di-linea.hist.centro::before{left:0;right:0}
.di-linea.hist.centro b{right:auto;left:50%;transform:translateX(-50%)}
.p-hist{background:#6aa0ff}
.p-tope{color:#b98cff;background:currentColor}
.di-leg .di-lg-f{flex:1 1 100%;justify-content:space-between}
.di-eje{display:flex;justify-content:space-between;color:var(--dim);letter-spacing:.04em}
.di-leg{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 10px;margin-top:9px;
  padding-top:9px;border-top:1px solid rgba(255,255,255,.07);color:var(--dim2)}
.di-leg span{display:flex;align-items:center;gap:6px}
.di-leg em{font-style:normal}
.di-leg i{width:9px;height:9px;border-radius:3px;display:block}
.p-prom{background:#fff}

/* ══ mes a mes ══ */
.barras-card{border-radius:var(--rL);padding:13px 10px 10px;
  background:var(--panel);border:1px solid var(--rim);box-shadow:inset 0 1px 0 var(--rimT)}
.barras{display:flex;align-items:stretch}
.bval{font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.bval.pos{color:var(--grn)}.bval.neg{color:var(--red)}
.barras-card.flaca{padding:11px 10px 9px}
.bnota{color:var(--dim2);margin-top:9px;
  padding-top:9px;border-top:1px solid rgba(255,255,255,.07)}
.bnota b{color:var(--fg);font-weight:600}

.aviso{font-size:11.5px;color:var(--dim2);margin-top:9px;padding:0 3px}
.nota{font-size:10.5px;color:var(--dim);margin-top:9px;padding:0 3px;line-height:1.5}
/* ══ dock ══ */
.dock{position:fixed;left:0;right:0;z-index:40;pointer-events:none;
  /* a 20 px de cada borde, como la barra de las apps de Apple */
  padding:0 calc(20px + env(safe-area-inset-right)) 0 calc(20px + env(safe-area-inset-left));
  display:flex;align-items:center;
  transition:opacity .2s ease, transform .2s ease}
.dock>*{pointer-events:auto}
.vtabs{position:relative;display:flex;border-radius:var(--rP);
  touch-action:pan-y;-webkit-user-select:none;user-select:none;
  align-items:stretch;border:1px solid rgba(255,255,255,.16)}
/* la burbuja es una lente de vidrio claro que resalta, en lugar de un hueco oscuro */
/* la burbuja es ovalada: mas ancha que alta, como la seleccion de la barra de Apple Music */
.vind{position:absolute;width:var(--tw);border-radius:var(--rP);pointer-events:none}
/* el mismo efecto en el dock: al arrastrar la burbuja crece por encima de la barra */
.vtabs[data-idx="1"] .vind{translate:calc(var(--tw) + 2px) 0}
.vtabs[data-idx="2"] .vind{translate:calc(var(--tw) * 2 + 4px) 0}
.vtab{position:relative;z-index:1;width:var(--tw);cursor:pointer;
  transform-origin:center;will-change:transform;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:var(--rP);background:transparent}
/* el icono se apaga entero con opacity, no con un color translucido:
   si no, donde dos piezas se pisan se suman las capas y se ve la costura */
.vtab svg{
  transition:opacity .26s ease, filter .26s, transform .34s cubic-bezier(.3,1.4,.4,1)}
.vtab.on svg{opacity:1;filter:drop-shadow(0 1px 6px rgba(255,255,255,.45));transform:scale(1.06)}

/* aviso flotante cuando mirás un mes que no es el corriente */
@keyframes latido{0%,100%{box-shadow:inset 0 1.2px 0 rgba(255,255,255,.22), 0 10px 26px rgba(0,0,0,.42)}
  50%{box-shadow:inset 0 1.2px 0 rgba(255,255,255,.22), 0 10px 26px rgba(0,0,0,.42),
      0 0 0 4px rgba(255,120,120,.12)}}

/* la pildora de mes, espejo del boton flotante */

.fab{position:absolute;right:calc(20px + env(safe-area-inset-right));border-radius:50%;cursor:pointer;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.16)}
.fab svg{transition:transform .34s cubic-bezier(.3,1.4,.4,1)}
.fab.oculto{opacity:0;transform:scale(.4) rotate(-90deg);pointer-events:none}
.vista{display:none}
.vista.on{display:block}
/* La entrada se anima en cada tarjeta de vidrio y no en la seccion entera: un contenedor con opacidad
   o movimiento se vuelve el "fondo" de sus hijos, y el desenfoque de las tarjetas deja de ver la pantalla
   de atras mientras dura la animacion (se ve plano y despues salta a desenfocado). */
.vista.on .movcard,.vista.on .chart,.vista.on .barras-card,.vista.on .tjcard,.vista.on .prcard,
.vista.on .indics,.vista.on .diario{animation:entra .3s ease}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* al cambiar de pestaña, lo de la pantalla (títulos y tarjetas) entra deslizándose desde el lado de la pestaña elegida */
body[data-dir="der"] .vista.on :is(.movcard,.chart,.barras-card,.tjcard,.prcard,.indics,.diario,.sec-h,.card){animation:entraDer .34s cubic-bezier(.2,.8,.2,1)}
body[data-dir="izq"] .vista.on :is(.movcard,.chart,.barras-card,.tjcard,.prcard,.indics,.diario,.sec-h,.card){animation:entraIzq .34s cubic-bezier(.2,.8,.2,1)}
@keyframes entraDer{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes entraIzq{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body[data-dir] .vista.on *{animation:none!important}}
body.tecleando .dock{opacity:0;transform:translateY(20px)}
body.tecleando .dock *{pointer-events:none}

/* ══ pie ══ */
.iobar{display:flex;justify-content:center;gap:8px}
.iob svg{width:14px;height:14px}
.iob.abierto{color:#fff;background:rgba(var(--ac),.26);border-color:rgba(var(--ac2),.5)}
/* selector de fondo: una muestra de cada paleta, con el osito encima */
.fondodrop:not(.on){transform:translateY(10px) scale(.94)}
/* el elegido: un borde celeste como el de los demas elementos seleccionados */
.firma{text-align:center;font-size:10px;color:var(--dim);letter-spacing:.04em}

/* ══ hojas ══ */
.modal{position:fixed;inset:0;z-index:50;display:none;padding:14px;
  align-items:center;justify-content:center;
  background:rgba(4,6,14,.34);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
.modal.open{display:flex;animation:fadeIn .22s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{border-radius:26px;padding:18px;width:100%;max-width:400px;position:relative;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:saturate(165%) blur(20px);backdrop-filter:saturate(165%) blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), var(--shL);
  animation:pop .26s cubic-bezier(.3,1.4,.4,1)}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
#modalConf{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#modalConf.open{animation:none}
#modalConf::before{content:"";position:absolute;inset:0;background:rgba(4,6,14,.14);
  opacity:0;transition:opacity .24s ease}
#modalConf.open::before{opacity:1}
#modalConf .modal-box{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.26);
  -webkit-backdrop-filter:saturate(190%) blur(13px);backdrop-filter:saturate(190%) blur(13px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 18px 44px rgba(0,0,0,.32)}
.hoja{padding:15px}
.modal-box h3{font-size:16px;font-weight:700;margin-bottom:4px;letter-spacing:-.02em}
.modal-box p{font-size:11.5px;color:var(--dim2);margin-bottom:14px}
.mi{border-radius:var(--rM);padding:11px 13px;font-size:16px;color:var(--fg);outline:none;
  font-family:inherit;min-width:0;min-height:46px;
  background:rgba(255,255,255,.09);border:1px solid var(--rim);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.mi:focus{border-color:rgba(140,185,255,.6);box-shadow:0 0 0 3px rgba(var(--ac),.16)}
.mi::placeholder{color:var(--dim)}

/* cuadrados auxiliares de la hoja */
.redondo{border-radius:50%;width:52px;flex:0 0 52px;font-size:23px;line-height:1}
.redondo.on{border-color:rgba(var(--ac2),.65);background:rgba(var(--ac),.22)}

/* popover de categorias */

/* ══ desplegable de mes, mismo material que el de categorias ══ */
.mesdrop{position:fixed;z-index:48}

/* con el selector abierto el aviso de "no estas en el mes actual" sobra: la pildora ya
   esta roja y lo estas eligiendo ahi mismo. Ademas quedaria tapado por el panel */

/* selector de mes: dos ruedas, cada una con su pildora de seleccion al centro */
.dial{display:flex;gap:6px;height:102px}
.dial-col{position:relative;flex:1 1 0;min-width:0}
.dial-c-mes{flex:1.25 1 0}
.dial-pil{position:absolute;left:3px;right:3px;top:50%;height:34px;margin-top:-17px;
  border-radius:var(--rP);pointer-events:none;
  background:rgba(var(--ac),.34);border:1px solid rgba(var(--ac2),.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.dial-rueda{position:relative;z-index:1;height:100%;overflow-y:auto;overflow-x:hidden;
  padding:34px 0;scroll-snap-type:y mandatory;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;perspective:300px;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.3) 0,#000 36%,#000 64%,rgba(0,0,0,.3) 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.3) 0,#000 36%,#000 64%,rgba(0,0,0,.3) 100%)}
.dial-rueda::-webkit-scrollbar{display:none}
.dial-it{height:34px;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;
  font:600 12px var(--f);letter-spacing:.08em;color:var(--dim2);cursor:pointer;
  transform-origin:center center;will-change:transform,opacity;transition:color .18s ease}
.dial-it.on{color:#fff;font-weight:700}


/* selector de emojis *//* selector de emojis *//* ══ nuevo gasto, anclado al boton flotante ══ */
.fab.activo svg{transform:rotate(135deg)}

/* al mantener apretado, iOS abre la lupa de texto y el menu de copiar:
   lo desactivamos en toda la app. Solo los campos de escritura lo conservan,
   porque ahi si hace falta mover el cursor y pegar. */
html, body, body *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
input, textarea, [contenteditable="true"]{-webkit-user-select:text;user-select:text;
  -webkit-touch-callout:default}

/* selector de cuotas */
.cuotas{flex:0 0 auto;display:flex;align-items:center;gap:2px;padding:3px;
  transition:opacity .22s ease;
  border-radius:var(--rP);background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.1)}
.cuotas.apagado{opacity:.35;pointer-events:none}
.cu-b{width:34px;height:38px;border:none;background:none;cursor:pointer;border-radius:var(--rP);
  color:var(--blue);font:400 19px/1 var(--f);
  transition:background .18s ease, transform .15s cubic-bezier(.3,1.4,.4,1)}
.cu-b:active{transform:scale(.88);background:rgba(255,255,255,.08)}

/* consumos anidados bajo la tarjeta */
.mv-padre{cursor:pointer}
.mv-chev2{width:14px;height:14px;transform:rotate(-90deg);
  transition:transform .32s cubic-bezier(.3,1.4,.4,1)}
.mv-padre.abierta .mv-chev2{transform:rotate(0);color:var(--blue)}
.mv-chevn{margin-left:5px;vertical-align:-2px;color:var(--dim)}
.mv-sub{display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;
  transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1), opacity .24s ease}
.mv-sub.on{grid-template-rows:1fr;opacity:1}
.mv-subin{min-height:0;overflow:hidden}
.mv-hijo{padding-left:30px;background:rgba(var(--ac),.045);
  border-bottom:1px solid rgba(255,255,255,.04)}
.mv-hijo .mv-emo{font-size:16px;width:22px}

/* ══ nueva categoria, anclada al + ══ */
.catnuevo{position:fixed;z-index:48;padding:0 9px;
  max-height:0;overflow:hidden;pointer-events:none;border:1px solid rgba(255,255,255,.22);border-width:0;
  opacity:0;transform:translateY(-10px) scale(.94);transform-origin:top left;
  transition:max-height .34s cubic-bezier(.3,1,.4,1), opacity .2s ease,
             transform .34s cubic-bezier(.3,1.4,.4,1), padding .28s ease}
.catnuevo.on{max-height:340px;padding:10px 9px;border-width:1px;
  opacity:1;transform:none;pointer-events:auto}
.cn-emo{flex:0 0 42px;width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:21px;line-height:1;border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  transition:background .2s ease, border-color .2s ease, transform .16s cubic-bezier(.3,1.4,.4,1)}
.cn-emo:active{transform:scale(.9)}

.catnuevo .emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;
  max-height:0;overflow:hidden;margin:0;opacity:0;
  transition:max-height .3s cubic-bezier(.3,1,.4,1), opacity .2s ease, margin .26s ease}
.catnuevo .emoji-grid.on{max-height:196px;overflow-y:auto;margin:9px 0 2px;opacity:1}
.catnuevo .em{font-size:20px;padding:6px 0;min-height:40px;border-radius:11px}

.cn-acc{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.cn-acc.conBorrar{justify-content:space-between}
.cn-b{width:40px;height:40px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.2);
  transition:background .2s ease, border-color .2s ease, transform .16s cubic-bezier(.3,1.4,.4,1)}
.cn-b svg{width:17px;height:17px}
.cn-b:active{transform:scale(.88)}
.cn-x{color:var(--dim2)}
.cn-ok{border-color:rgba(var(--ac2),.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.cn-del{color:#fff;background:rgba(214,64,64,.9);border-color:rgba(255,150,150,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34);margin-right:auto}
.cn-del:active{background:rgba(196,52,52,.95)}

/* selector de emojis */
.emoji-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:12px 0 2px;
  max-height:38vh;overflow-y:auto}
.em{background:none;border:1px solid transparent;border-radius:11px;font-size:22px;
  padding:7px 0;min-height:40px;cursor:pointer;line-height:1.3}
.em.on{border-color:rgba(140,185,255,.6);background:rgba(var(--ac),.24)}

.mv-nt{color:rgba(214,222,250,.66)}
.mv-dt .mv-n{font-style:normal;font-weight:500;opacity:.7}
.mv-dt.sobre{color:var(--red)}
.mv-dt.sobre::before{content:"";display:inline-block;width:0;height:0;margin-right:6px;vertical-align:1px;
  border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:6px solid currentColor}
/* vencimientos */
.mv-venc{font-weight:600}
.mv-venc.v-y{color:var(--yel)}
.mv-venc.v-r{color:var(--red)}
/* sugerencias del historial al escribir un movimiento */
.hm-sug{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 9px}
.hm-sug::-webkit-scrollbar{display:none}
.hm-sug:empty{display:none}
.hm-sg{flex:0 0 auto;display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:16px;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:var(--fg);font:500 12.5px var(--f);white-space:nowrap}
.hm-sg em{font-style:normal;color:var(--dim2);font-weight:400}
.hm-sg:active{transform:scale(.95);background:rgba(var(--ac),.22)}
/* aviso con boton (deshacer) */
.toast.acc{pointer-events:auto;display:flex;align-items:center;gap:14px}
.toast-ac{border:none;background:none;color:#fff;font:700 12.5px var(--f);cursor:pointer;padding:4px 2px;text-transform:uppercase;letter-spacing:.04em}
/* toast */
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.bad{color:var(--red);background:rgba(255,122,122,.2);border-color:rgba(255,140,140,.42)}

/* pantallas muy angostas */
@media(max-width:360px){
  .tjs{grid-template-columns:minmax(0,1fr)}
  .hero-val{font-size:27px}
}

/* ══ movimiento general ══ */
.mv:active{background:rgba(255,255,255,.05)}
.chip{transition:background .22s ease, border-color .22s ease, color .22s ease,
      transform .16s cubic-bezier(.3,1.4,.4,1)}
.chip:active{transform:scale(.95)}
.sec-h{transition:opacity .2s ease}
.sec-h:active{opacity:.6}
.hero-val{transition:color .3s ease}
.iob{width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--dim);
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);transition:color .18s ease, background .18s ease,
      transform .16s cubic-bezier(.3,1.4,.4,1)}
.iob:active{transform:scale(.86)}
.tjr-add:active{background:rgba(255,255,255,.08)}
.bcol{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;
  background:none;border:none;cursor:pointer;padding:3px 0;border-radius:var(--rS);transition:background .22s ease, transform .16s}
.bcol:active{transform:scale(.95)}
.toast{position:fixed;bottom:calc(84px + env(safe-area-inset-bottom));left:50%;
  transform:translateX(-50%) translateY(60px);opacity:0;pointer-events:none;z-index:60;
  font-size:12.5px;padding:10px 20px;border-radius:var(--rP);color:var(--grn);
  background:rgba(75,220,150,.2);border:1px solid rgba(90,230,165,.42);
  -webkit-backdrop-filter:saturate(200%) blur(22px);backdrop-filter:saturate(200%) blur(22px);
  box-shadow:0 8px 26px rgba(0,0,0,.45);
  transition:transform .3s cubic-bezier(.3,1.4,.4,1),opacity .3s ease;max-width:calc(100vw - 40px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:transform,opacity}

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


/* ══ filtros: boton unico, popover estilo Fotos y hoja "Mas filtros" estilo Archivos ══ */
.filt-btn{position:relative;color:rgba(235,240,255,.78)}
.catbar .filt-btn:active{transform:scale(.9)}
.catbar .filt-btn.abierto{border-color:rgba(var(--ac2),.5)}
.catbar .filt-btn.on{color:#fff;background:rgba(var(--ac),.62);border-color:rgba(var(--ac2),.85)}
/* .mov-fila .masb fija 36x36: aca se suelta el ancho para que pueda estirarse */
.mov-fila .filt-btn,.filt-btn{width:auto;min-width:36px;padding:0 7px;justify-content:flex-start;gap:0;
  border-radius:18px;white-space:nowrap}
.filt-btn.estira{overflow:hidden;
  transition:width .46s cubic-bezier(.3,1.4,.4,1), transform .18s cubic-bezier(.3,1.4,.4,1),
             background .22s ease, border-color .22s ease, color .22s ease}
.filt-btn svg{width:20px;height:20px;display:block;flex:0 0 auto}
.filt-t{display:none;font:600 13px var(--f);letter-spacing:.01em;color:#fff;margin-left:8px;opacity:1;
  transition:opacity .16s ease}
.filt-t.hay{display:block}
.filt-t.sale{opacity:0}
.filt-t.cambia{animation:etqEntra .4s cubic-bezier(.3,1.4,.4,1)}

#catDrop{width:max-content;max-width:calc(100vw - 28px);transform-origin:top right;min-width:244px}
#catDrop.on{padding:8px;overflow:hidden}
.fp-scroll{overflow-y:auto;overscroll-behavior:contain;max-height:var(--fph,260px);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 14px),transparent);mask-image:linear-gradient(#000 calc(100% - 14px),transparent)}
.fp-sec{font:500 12.5px var(--f);color:var(--dim);padding:10px 12px 4px 12px}
.fp-q{flex:0 1 auto;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--dim2);font-size:13.5px}
.fp-q:empty{display:none}
.fp-sep{height:1px;background:rgba(255,255,255,.12);margin:6px 10px}
.fp-row{gap:12px;padding:10px 12px 10px 6px;font-size:15px}
.fp-ck{flex:0 0 20px;width:20px;display:flex;justify-content:center;opacity:0;color:#fff;transition:opacity .18s ease}
.fp-ck svg{width:15px;height:15px}
.fp-row.on .fp-ck{opacity:1}
.fp-ic{flex:0 0 24px;width:24px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.92)}
.fp-ic svg{width:21px;height:21px;display:block}
.fp-row .cdi-e{transform:none;font-size:18px;width:24px}
.fp-row .cdi-n{font-size:15px}
.fp-row .cdi-n,.fp-row .fp-tx{color:var(--fg)}
.fp-ch{flex:0 0 auto;width:15px;height:15px;color:var(--dim2)}
.fp-mas.hay .fp-tx::after{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  background:rgb(var(--ac));margin-left:8px;vertical-align:1px}
.fp-nueva .cdi-n{color:rgba(var(--ac2),1)}
.fp-nueva .fp-ic{color:rgba(var(--ac2),1)}
.cdi.fp-row.cdi-cred{margin-top:0}
.cdi.fp-row.cdi-cred::before{display:none}

.fsheet{padding:0;align-items:flex-end;background:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;animation:none!important}
/* el velo oscuro es un hermano de la hoja y no su contenedor: asi el vidrio de la hoja
   desenfoca la pantalla de atras y no un fondo vacio (si el contenedor tiene efectos, iOS lo pierde) */
.fs-vel{position:absolute;inset:0;background:rgba(4,6,14,.12);opacity:0;transition:opacity .3s ease}
.fsheet.show .fs-vel{opacity:1}
.fs-box{position:relative;width:100%;max-width:560px;margin:0 auto;height:var(--fsh,25dvh);max-height:90dvh;
  display:flex;flex-direction:column;border-radius:38px 38px 0 0;color:var(--fg);
  background:rgba(34,40,62,.12);border:1px solid rgba(255,255,255,.24);border-bottom:none;
  -webkit-backdrop-filter:saturate(180%) blur(40px);backdrop-filter:saturate(180%) blur(40px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 -18px 50px rgba(0,0,0,.45);
  transform:translateY(105%);
  transition:transform .36s cubic-bezier(.3,1,.4,1), height .34s cubic-bezier(.3,1,.4,1)}
.fsheet.show .fs-box{transform:none}
.fs-box.arrastra{transition:none}
.fs-top{flex:0 0 auto;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
.fs-grip{display:block;width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.34);margin:2px auto 10px}
.fs-head{display:grid;align-items:center}
.fs-tit{margin:0;text-align:center;font:600 17px var(--f);letter-spacing:-.01em}
.fs-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 16px calc(16px + env(safe-area-inset-bottom))}
.fs-h{font:500 13px var(--f);color:var(--dim)}
.fs-grp{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:var(--rG);overflow:hidden}
.fs-body>.fs-grp:first-child{margin-top:4px}
.fs-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;border-top:1px solid rgba(255,255,255,.1)}
.fs-grp>.fs-row:first-child,.fs-sub:first-child{border-top:none}
.fs-sub[hidden]{display:none}
.fs-lab{font:400 16px var(--f);color:var(--fg);flex:0 1 auto}
.fs-inp{flex:1 1 auto;min-width:0;border:none;outline:none;background:none;text-align:right;
  font:400 16px var(--f);color:var(--fg);color-scheme:dark;-webkit-appearance:none;appearance:none}
.fs-inp::placeholder{color:var(--dim)}
.fs-inp[type=date]{min-height:34px}
.fs-sel{display:flex;align-items:center;gap:6px;color:var(--dim2);font:400 16px var(--f)}
.fs-sel b{font-weight:400}
.fs-ud{width:15px;height:15px}
.fs-sel select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
  font-size:16px;-webkit-appearance:none;appearance:none}

.fs-inp[readonly]{cursor:pointer}

/* ══ editores de tarjeta y prestamo ══ */
.ed-dot{display:block;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5), 0 1px 4px rgba(0,0,0,.3)}
.cn-emo.abierto{border-color:rgba(var(--ac2),.5)}
/* importe: un campo del mismo molde que el nombre, con el "$" adentro */
#prCuota::placeholder{font-size:12px}

/* ══ KPI principal: dos pantallas que se deslizan (reparto y ritmo) ══ */
.hero2 .k-acc{display:flex;align-items:center;gap:8px}
.hero2 .k-ing{display:flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:14px;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:var(--fg);font:500 12px var(--f);
  transition:transform .16s cubic-bezier(.3,1.4,.4,1), background .2s ease, border-color .2s ease}
.hero2 .k-ing span{color:var(--dim2)}
.hero2 .k-ing b{font-weight:600}
.hero2 .k-ing:active,.hero2 .k-ing.abierto{transform:scale(.95);background:rgba(var(--ac),.24);border-color:rgba(var(--ac2),.45)}
.hero2 .ojo{margin:-6px -8px -6px 0}
.k-track{display:flex;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.k-track::-webkit-scrollbar{display:none}
.k-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;justify-content:center}
.hero2 .hero-val{line-height:1.05;white-space:nowrap}
.k-bar i{display:block;height:100%;min-width:0;flex:0 1 0;transition:flex-grow .55s cubic-bezier(.3,1,.4,1)}#kbL.t-c{background:var(--blue)}
.k-st b{white-space:nowrap}
.k-rh{display:flex;justify-content:space-between;align-items:center}
.k-est{display:flex;align-items:center;gap:7px;font:600 16px var(--f);letter-spacing:-.01em}
.k-est svg{width:20px;height:20px;flex:0 0 auto}
.k-pd{font-size:12px;color:var(--dim2);white-space:nowrap}
.k-pd b{font-weight:600;color:var(--fg)}
.k-chart{display:block;width:100%;height:auto;margin-top:9px;overflow:visible}
.k-rf{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px;font-size:11px;color:var(--dim2)}
.k-cc{display:flex;align-items:baseline;gap:6px}
.k-cc b{font:600 15px var(--f);letter-spacing:-.02em}
.k-cc.vacio{visibility:hidden}
.k-dots{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:8px 14px;cursor:pointer}
.k-dots i{display:block;width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.26);
  transition:width .3s cubic-bezier(.3,1.4,.4,1), background .25s ease}
.k-dots i.on{width:18px;background:rgba(255,255,255,.9)}
/* el menu de creditos mide lo que miden sus opciones, sin espacio sobrante a la derecha */

/* ══════════ DISEÑO iOS 26/27 (v1.6.4) ══════════
   Cada cambio se activa con una clase en <html> (p1 … p9), así se puede quedar con algunos y no con otros. */
/* p1 · Borde de desplazamiento: el contenido se funde bajo la hora y detrás del dock */
.borde-sc{display:block;position:fixed;left:0;right:0;z-index:39;pointer-events:none}
html.con-scroll .borde-sup{opacity:1}
.borde-inf{bottom:0;height:calc(env(safe-area-inset-bottom) + 92px);
  background:linear-gradient(0deg,rgba(6,8,16,.7) 0%,rgba(6,8,16,.32) 50%,rgba(6,8,16,0) 100%);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  -webkit-mask-image:linear-gradient(0deg,#000 35%,transparent);mask-image:linear-gradient(0deg,#000 35%,transparent)}
/* p2 · Sin mayúsculas forzadas y con cifras de ancho fijo */
.sec-t,.mv-dl,.ps,.hm-tit,.mv-mes,.di-t,.donut-c small,.toast-ac,.di-linea b{text-transform:none!important;letter-spacing:-.005em!important}
.di-linea b::first-letter,.mv-dl::first-letter,.di-t::first-letter{text-transform:uppercase}
.qseg .ps{letter-spacing:.05em;font-size:12.5px}
.di-t{font-size:15px;color:var(--fg)}
.mv-mes{font-size:10.5px}
.donut-c small{font-size:10.5px}
.mv-amt,.mt-v,.hero-val,.k-st b,.mv-dt,.dial-it,.leg-a,.k-cc b,#kIng{font-variant-numeric:tabular-nums}
/* p3 · Títulos de sección a la izquierda, grandes, como Salud o Fitness */
.sec-h.sec-h-centro{justify-content:flex-start;padding:14px 4px 8px}
.sec-t{font:700 20px var(--f);letter-spacing:-.02em!important;text-transform:none!important;color:var(--fg)}
.sec-h-centro .chev{right:6px}
/* p4 · Sin vidrio sobre vidrio: los controles dentro de tarjetas son rellenos tenues, sin borde ni desenfoque */
.pseg,.qseg{padding:2px;background:rgba(118,118,140,.2);border-color:transparent;box-shadow:none}
.ps-ind{top:2px;bottom:2px;left:2px;width:calc((100% - 4px)/3);background:rgba(255,255,255,.2);
  box-shadow:0 2px 6px rgba(0,0,0,.22),inset 0 .5px 0 rgba(255,255,255,.2)}
.ps{transform-origin:center;will-change:transform;font-size:13px;font-weight:600;padding:8px 0;color:var(--dim2)}
.ps.on{color:#fff;transform:none}
/* al arrastrar, la selección se vuelve una lente de vidrio, como el control segmentado de iOS 26 */
.pseg.arrastrando .ps-ind,.qseg.arrastrando .ps-ind{scale:1.12 1.32;background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(2px) saturate(180%) brightness(1.25);backdrop-filter:blur(2px) saturate(180%) brightness(1.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(255,255,255,.2),0 0 0 .5px rgba(255,255,255,.4),0 6px 18px rgba(0,0,0,.3)}
.hero2 .k-ing,.mov-fila .chip,.mov-fila .masb,.catbar .filt-btn,.hm-imp,.hm-nota,.cn-b,.hm-sg,.di-tope,.cn-emo{
  background:rgba(118,118,140,.2);border-color:transparent!important;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.hm-imp:focus-within{background:rgba(118,118,140,.28)}
.hero2 .k-ing.abierto,.catbar .filt-btn.abierto,.cn-emo.abierto{background:rgba(var(--ac),.32)}
.catbar .filt-btn.on{background:rgba(var(--ac),.6)}
.cn-ok{background:rgb(var(--ac));color:#fff}
.cn-del{background:rgba(214,64,64,.9)}
/* p5 · Menús de vidrio que nacen del botón, con tilde en la opción elegida */
.catdrop,.catnuevo{border-radius:24px;background:rgba(32,36,56,.6);border-color:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 24px 60px rgba(0,0,0,.5)}
.catdrop:not(.on),.catnuevo:not(.on){transform:scale(.2)}
.catdrop.on,.catnuevo.on{transition:max-height .42s cubic-bezier(.3,1,.4,1),opacity .18s ease,
  transform .5s cubic-bezier(.3,1.25,.4,1),padding .3s ease}
.cdi{font-size:15px;border-radius:14px}
/* p6 · La hoja de alta con la cabecera de iOS: cerrar a la izquierda, título al centro, guardar a la derecha.
   Los botones caen sobre los bordes del contenido: el ✕ alineado con el borde izquierdo de los campos,
   el ✓ con el borde derecho de los círculos, y el título centrado en la misma altura que los dos */
.hm{border-radius:34px;padding:16px}
.hm-tit{display:flex;align-items:center;justify-content:center;height:44px;margin:0 52px 16px;padding:0;
  font:600 17px/1.2 var(--f);letter-spacing:-.01em;text-transform:none;color:var(--fg)}
#hmAcc{margin-top:0}
/* p7 · Dock de iOS 26: pestaña elegida en color y barra que se recoge al bajar */
.vtab.on svg{filter:none}
/* al recogerse, la píldora del mes y el (+) se acercan a la pestaña: quedan a 8 px de cada lado.
   Se mueven con translate, que es independiente del transform que usan al tocarlos o al abrir el menú */
/* p8 · Más aire en las listas y esquinas concéntricas */
/* las tarjetas de las secciones quedan al ras del KPI: antes estaban 1 px más adentro de cada lado */
.sec-in{padding:1px 0}
.mv{transition:background .25s ease, opacity .32s ease, filter .32s ease;padding-top:13px;padding-bottom:13px}
.tjr{display:flex;align-items:center;gap:10px;padding:12px 13px;
  border-bottom:1px solid rgba(255,255,255,.055);padding-top:13px;padding-bottom:13px}
.mv-div{padding-top:12px;padding-bottom:12px}
/* p9 · El (+) como botón principal: vidrio teñido con el color de acento */
.fab{border-color:rgba(255,255,255,.22)}
/* ══════════ SEGUNDA TANDA: cambios estéticos más fuertes ══════════ */
/* Saldo con jerarquía (estilo Wallet): signo y centavos chicos, cifra en la fuente redondeada de iOS, y un halo del color del estado */
.hero-val,.mt-v,.donut-c span,.k-cc b{font-family:ui-rounded,'SF Pro Rounded',var(--f)}
.hero2 .hero-val{font-size:44px;letter-spacing:-.03em;font-weight:700}
.kq-s{font-size:.5em;opacity:.72;margin-right:.14em;vertical-align:.62em;font-weight:600}
.kq-d{font-size:.48em;opacity:.72;vertical-align:.68em;margin-left:.04em;font-weight:600}
.hero:has(#kpiQueda.c-g){background:radial-gradient(110% 75% at 50% 0%,rgba(75,220,150,.17),transparent 70%),var(--panel)}
.hero:has(#kpiQueda.c-y){background:radial-gradient(110% 75% at 50% 0%,rgba(255,197,85,.17),transparent 70%),var(--panel)}
.hero:has(#kpiQueda.c-r){background:radial-gradient(110% 75% at 50% 0%,rgba(255,110,110,.2),transparent 70%),var(--panel)}
.k-bar{display:flex;overflow:hidden;background:rgba(255,255,255,.08);gap:3px}
/* Las filas pierden la barrita de color de la izquierda y el tinte de fondo; el emoji queda como está */
.mv-var,.mv-in,.mv-fijo,.mv-finn,.mv-otro{box-shadow:none}
.mv-fijo,.mv-finn{background:transparent}
/* Importes en blanco: el color queda para los ingresos y para lo que vence */
/* como en Ajustes: el importe de cada fila en gris (el que manda es el total); los ingresos en verde */
.mv-amt,.mv-fijo .mv-amt,.mv-fijo.mv-fijopago .mv-amt{color:var(--dim2)}
.mv-in .mv-amt,.mv-hijo-in .mv-amt{color:var(--grn)}
.mv-fijo.mv-fijopago .mv-amt,.mv-finn.mv-fijopago .mv-amt{color:var(--dim2)}
/* Cada día es un bloque propio dentro de la tarjeta, como las listas agrupadas de iOS */
.mov .mv-gr{background:rgba(255,255,255,.045)}
.mv-in2{border-top-color:rgba(255,255,255,.06)}
/* Salud: anillo más fino y segmentado, barras más gruesas */
/* Título grande por pestaña, que al bajar pasa arriba en chico */
.tg{display:block;padding:6px 4px 12px}
.tg span{display:block;font:500 14px var(--f);color:var(--dim2);margin-top:2px}
/* ══════════ TERCERA TANDA: refinamientos ══════════ */
/* Los colores del sistema de iOS en modo oscuro: rojo, naranja, amarillo y verde de Apple */
#kbG{background:#ff453a}
#kbP,.kl-c{background:#ff9f0a}
#kbL,.p-e{background:#30d158}
#kbL.t-y{background:#ffd60a}
.c-nar{color:#ff9f0a}
/* Letra con la escala de iOS en las listas: nada queda por debajo de 12 px */
.mv-desc{font-size:16px}
.mv-meta{font-size:13px;margin-top:1px}
.mv-amt{font-size:16px}
.mv-hijo .mv-desc,.mv-hijo .mv-amt{font-size:15px}
.mv-dl{font-weight:600;color:rgba(235,240,255,.86);font-size:15px}
.mv-dt{font-size:14px}
.tjr-nom,.prr-n{font-size:15.5px}
.ind-h span{font-size:15px}
/* Separadores finos que arrancan donde empieza el texto, como en las listas de iOS */
.mv,.tjr{border-bottom:none;position:relative}
.mv + .mv::before,.tjr:not(:first-child)::before,.prr:not(:first-child)::before{content:"";position:absolute;right:16px;top:0;height:.5px;
  background:rgba(255,255,255,.16);pointer-events:none}
/* Los fijos se marcan como en Recordatorios: círculo vacío si falta pagar, lleno con tilde si ya está */
/* Pagar y Cargar como botones teñidos de iOS: texto y fondo suave del color de acento */
/* Créditos más limpios: sin palitos ni barritas de estado, y el avance de cada préstamo en un anillo fino alrededor de su ícono */
.prr{position:relative;display:flex;align-items:center;gap:9px;
  padding:14px 13px 20px;
  transition:background .3s ease;border-bottom:none;padding-bottom:14px}
/* La píldora del mes dice "Oct" y el año completo, para que no se lea como "26 de octubre" */
.mv-in2>.mv:first-child::before{content:"";position:absolute;right:0;top:0;height:.5px;background:rgba(255,255,255,.16);pointer-events:none}
/* las tarjetas con detalle ("6 compras", "vence día 9") pasan a dos renglones, como las filas de iOS: el nombre nunca se corta */
/* (p7) la píldora del mes queda centrada a la misma altura que la barra y el (+): antes estaba 2 px más abajo */
/* ══════════ CUARTA TANDA ══════════ */
/* Íconos de categoría como los de Ajustes: glifo blanco sobre un cuadrado redondeado del color del sistema */
.ico-t{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:30px;height:30px;
  background-color:var(--ic,#8e8e93);background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 55%);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.28);vertical-align:middle}
.ico-t svg{width:62%;height:62%;display:block}
.mv-emo.con-ico{width:30px;transform:none}
.mv-hijo .mv-emo.con-ico{width:26px}
.mv-hijo .ico-t{width:26px;height:26px}
.cdi-e.con-ico{width:26px;transform:none}
.cdi-e .ico-t{width:26px;height:26px}
.em.con-ico .ico-t{width:32px;height:32px}
/* en la hoja de alta y en el editor de categoría el círculo entero toma el color, con el glifo al centro */
#hmCatEmo.con-ico{transform:none}
#hmCatEmo .ico-t{width:56px;height:56px}
#hmCatEmo .ico-t svg{width:46%;height:46%}
#emojiPreview.con-ico{padding:0;overflow:hidden}
#emojiPreview .ico-t{width:42px;height:42px}
#emojiPreview .ico-t svg{width:48%;height:48%}
/* dentro de un texto ("🍔 Comida" en la leyenda, sugerencias, grupos por categoría) */
.ico-t.ico-in{width:18px;height:18px;margin-right:6px;vertical-align:-4px}
.hm-sg .ico-t.ico-in{margin-right:2px}
/* en la leyenda del anillo el ícono ya dice el color: el puntito sobra */
.leg{grid-template-columns:minmax(0,1fr) auto}
.leg-n{grid-column:1;font-size:12.5px}
.leg-p{font-size:10px;color:var(--dim);font-weight:600;text-align:right;grid-column:2}
.leg-a{grid-column:1/3;padding-left:24px}
/* las filas con ícono: el separador sigue arrancando donde empieza el texto */
.mv + .mv::before,.mv-in2>.mv:first-child::before{left:53px}
.mv-hijo + .mv-hijo::before{left:66px}
/* El anillo de cada préstamo se llena con un recorrido animado al pagar, y late una vez al cerrarse */
@property --pg{syntax:'<number>';inherits:true;initial-value:0}
@property --pc{syntax:'<color>';inherits:true;initial-value:#0a84ff}
/* el destello al pagar ya no dibuja la barrita lateral: solo un tinte que se desvanece */
.destello{animation-name:pagoOkSuave}
.destello-am{animation-name:pagoParcialSuave}
@keyframes pagoOkSuave{0%{box-shadow:inset 0 0 0 999px rgba(48,209,88,.2)}100%{box-shadow:inset 0 0 0 999px rgba(48,209,88,0)}}
@keyframes pagoParcialSuave{0%{box-shadow:inset 0 0 0 999px rgba(255,214,10,.18)}100%{box-shadow:inset 0 0 0 999px rgba(255,214,10,0)}}
/* al pagar (lo que sale), rojo clarito */
.destello-rojo{animation:pagoRojoSuave .72s cubic-bezier(.3,1,.4,1)}
@keyframes pagoRojoSuave{0%{box-shadow:inset 0 0 0 999px rgba(255,69,58,.24)}40%{box-shadow:inset 0 0 0 999px rgba(255,69,58,.16)}100%{box-shadow:inset 0 0 0 999px rgba(255,69,58,0)}}
/* ══════════ QUINTA TANDA: Salud ══════════ */
/* "Este mes / Promedio" dentro del anillo y dentro de Gasto diario, con el mismo diseño que Día · Semana · Mes */
/* misma cinta que la de quincenas, con dos opciones */
.sseg .ps-ind,.pseg.dos .ps-ind{width:calc((100% - 4px)/2)}
/* "Otros" en la leyenda y su detalle */
.leg-cant{font-style:normal;font-size:11.5px;font-weight:600;color:var(--dim);margin-left:3px}
/* Salud con el mismo lenguaje que el resto: títulos grandes, colores de iOS, barras redondeadas y letra legible */
.sal-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:22px 4px 8px;margin:0}
.sal-h .di-t{font:700 20px var(--f);letter-spacing:-.02em!important;color:var(--fg);text-transform:none!important}
.diario,.barras-card{margin-top:0}
/* gasto diario: barras como cápsulas, con los colores del sistema */
.dib i{background:rgba(255,255,255,.14)}
.di-linea b{font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:var(--rP);top:-9px;letter-spacing:0}
.di-leg{font-size:12.5px}
/* ingresos y gastos: barras redondeadas en la punta y colores del sistema */
.bar-e i{background:#30d158}
.bar-s i{background:#ff453a}
.p-e{background:#30d158}
.p-s{background:#ff453a}
.bleg i{border-radius:50%}
.bleg-n{font-size:11.5px}
.bcol.act{background:rgba(255,255,255,.06)}
.bcol.act .bmes{font-weight:700;color:var(--fg)}
.bmes{color:var(--dim);font-size:12px}
/* cómo venís: una lista con separadores finos, como las demás, y barras de color plano */
.ind .barra i.b-g{background:#30d158}
.ind .barra i.b-y{background:#ffd60a}
.ind .barra i.b-r{background:#ff453a}
.ind .barra i.b-a{background:#0a84ff}
/* detalle de una categoría */
.det-h span{font-size:15px}
.det-h b{font-size:16px;color:var(--fg)}
.det-b i{background:rgb(var(--ac2))}
.det-pie{font-size:12px}
#detPista:not(.oculta){max-height:60px;line-height:1.4}
/* las líneas del gasto diario sin rótulos encima de las barras: lo dice la leyenda de abajo */
.di-linea.prom b,.di-linea.hist b{display:none}
.di-linea.prom::before,.di-linea.hist::before{left:0!important;right:0!important}
.gcomp{font-size:13px}
/* ══════════ SEXTA TANDA: Salud ══════════ */
/* material de tarjeta, el mismo que el resto de las tarjetas de la app */
.dest-card,.ind{background:var(--panel);border:1px solid var(--rim);box-shadow:inset 0 1px 0 var(--rimT);
  -webkit-backdrop-filter:saturate(150%) blur(11px);backdrop-filter:saturate(150%) blur(11px)}
/* S1 Destacados: dos o tres frases con lo importante del mes, cada una con su ícono */
.dest-card{border-radius:var(--rL);padding:4px 14px}
.dest-f{display:flex;align-items:center;gap:12px;padding:12px 0;position:relative}
.dest-f+.dest-f::before{content:"";position:absolute;left:42px;right:-14px;top:0;height:.5px;background:rgba(255,255,255,.16)}
.dest-f .ico-t{width:30px;height:30px}
.dest-t{margin:0;font-size:14.5px;line-height:1.38;color:var(--dim2)}
.dest-t b{color:var(--fg);font-weight:600}
.dest-t b.c-g{color:var(--grn)}
.dest-t b.c-r{color:var(--red)}
#destacados .sal-h{padding-top:18px}
/* los bloques de Resumen que se pliegan ya llevan su espacio en el título */
.sec-res{margin-top:0}
/* S2 Indicadores en grilla de dos columnas: título, número grande, medidor y una línea corta */
.indics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;background:none!important;border:none!important;
  box-shadow:none!important;border-radius:0;overflow:visible;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.ind+.ind::before{content:"";position:absolute;left:13px;right:0;top:0;height:.5px;background:rgba(255,255,255,.16);display:none}
.ind:last-child:nth-child(odd){grid-column:1/-1}
.ind-h b{font:700 25px ui-rounded,'SF Pro Rounded',var(--f);letter-spacing:-.02em;line-height:1.05}
.ind .barra{height:6px;border-radius:3px}
.ind .barra i{border-radius:3px}
/* S4 Gasto diario: todas las barras del mismo color, en rojo las que pasan el tope, y hoy marcado abajo */
.dib.pasa i{background:#ff453a!important}
.dib.hoy i{box-shadow:none}
.dib.hoy{position:relative}
.dib.hoy::after{content:"";position:absolute;left:50%;bottom:-8px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#fff}
.di-eje{font-size:11px;margin-top:12px}
/* S5 Ingresos y gastos: seis meses, con lo ahorrado en cada uno y una frase de resumen */
.bvacio{cursor:default;opacity:.5}
.bnada{width:22px;height:3px;border-radius:2px;background:rgba(255,255,255,.18);align-self:flex-end}
.barras{gap:2px}
.bval{font-size:11.5px}
.bar-e,.bar-s{flex-basis:11px}
.bar-e i,.bar-s i{border-radius:6px 6px 2px 2px}
.bfrase{display:block;font-size:14px;color:var(--dim2);margin:0 0 8px}
.bfrase b{color:var(--fg);font-weight:600}
.bnota{font-size:12.5px;text-align:center}
/* S9 Tendencia de la categoría: barras de los últimos meses y la comparación con su promedio */
.tend{margin:2px 0 12px;padding:10px 12px 11px;border-radius:16px;background:rgba(255,255,255,.04)}
.tend-b{display:flex;align-items:flex-end}
.tend-c{min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;gap:5px}
.tend-w{flex:1;width:100%;display:flex;align-items:flex-end}
.tend-w i{display:block;width:100%;border-radius:6px 6px 2px 2px;opacity:.38;transition:height .5s cubic-bezier(.3,1,.4,1)}
.tend-c.act .tend-w i{opacity:1}
.tend-c em{font-style:normal;font-size:11px;color:var(--dim)}
.tend-c.act em{color:var(--fg);font-weight:600}
.tend-t b{color:var(--fg);font-weight:600}
.tend-t b.c-g{color:var(--grn)}
.tend-t b.c-r{color:var(--red)}
/* los títulos de una misma fila pueden ocupar uno o dos renglones: con subgrilla, los números y las barras quedan a la misma altura */
.indics{column-gap:10px;row-gap:10px}
.ind{transition:background .3s ease;position:relative;flex-direction:column;border-radius:var(--rG);padding:13px 14px 12px;display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0}
.ind-h{flex-direction:column;align-items:flex-start;gap:3px;margin-bottom:10px;display:contents}
.ind-h span{font-size:13px;color:var(--dim2);line-height:1.25;align-self:start;margin-bottom:3px}
.ind-h b{align-self:start;margin-bottom:10px}
.ind-d{font-size:12px;line-height:1.35;margin-top:9px;color:var(--dim);align-self:start}
/* ══════════ SÉPTIMA TANDA: dock ══════════ */
/* Las tres piezas del dock son una familia: misma altura, mismo vidrio sin contorno,
   íconos del mismo estilo y tamaño, y la pestaña elegida en color sobre una lente.
   Al bajar, las tres se achican al mismo círculo y se juntan */
.vtabs,.fab{border:none!important;
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.06),0 10px 28px rgba(0,0,0,.32)}
.vtabs{background:rgba(30,32,46,.5)}
.vind{background:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -.5px 0 rgba(255,255,255,.06)}
.vt-n{display:block;font:600 10.5px var(--f);letter-spacing:-.01em;line-height:1.1;white-space:nowrap;
  max-height:14px;overflow:hidden;transition:max-height .3s ease,opacity .2s ease}
.vtab svg{opacity:1;filter:none!important;transform:none!important}
/* la píldora del mes y el (+) toman la misma altura y quedan centrados con la barra */
.fab{width:var(--dhC);height:var(--dhC);top:50%;bottom:auto;margin-top:calc(var(--dhC) / -2)}
/* el (+) es la acción principal: teñido con el acento, sin halo */
.vtabs{box-sizing:border-box;height:var(--dhC);gap:2px;--tw:68px}
/* el (+) es de vidrio como las otras dos piezas, y solo el signo va en el color de acento */
.fab{background:rgba(30,32,46,.5);color:rgb(var(--ac2))}
.fab svg{width:24px;height:24px;stroke-width:2.6}
.fab.abierto,.fab.activo{background:rgba(255,255,255,.16)}
/* los íconos sin elegir van en un blanco sólido: con un blanco translúcido, donde se pisan las
   piezas del dibujo (las orejas con la cabeza) se suma el color y se ve la costura */
.vtab{transition:transform .16s cubic-bezier(.3,1.4,.4,1),width .42s cubic-bezier(.3,1.1,.4,1),
  height .42s cubic-bezier(.3,1.1,.4,1),opacity .22s ease,color .25s ease;flex-direction:column;gap:3px;color:#e9ebf2}
.vtab.on{color:rgb(var(--ac2))}
/* El mes como calendario */
/* fuera del mes actual: el vidrio se tiñe de rojo, como antes, y el encabezado del calendario también */
/* ══════════ OCTAVA TANDA: aviso de año y fondos ══════════ */
/* el selector de fondos: muestras como mini pantallas, con una tarjeta de vidrio y el dock */
/* ══════════ NOVENA TANDA: hojas y editores con el lenguaje de "Más filtros" e interruptor de iOS 26 ══════════ */
/* Una sola gramática para todo lo que se completa: cabecera ✕ · título · ✓, grupos de renglones de 50 px
   con separadores finos, el valor a la derecha en gris y las notas al pie del grupo.
   Radios concéntricos: hoja 38 = grupo 22 + margen 16; los botones de 44 caen a 16 del borde (22 + 16 = 38) */
/* — contenedor: hoja de alta, editores y desplegables — */
.hj,.catnuevo.hj,.modal-box.hm.hj{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:38px}
.hj>*{flex:0 0 auto}
.hj .hj-tit,.hm.hj .hm-tit{display:block;height:44px;margin:0 52px 4px;padding:0;text-align:center;
  font:600 17px/44px var(--f)!important;letter-spacing:-.01em!important;text-transform:none!important;color:var(--fg)!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* la cabecera (barrita, ✕ · título · ✓) queda pegada arriba al desplazar la hoja (top -16: lo pegajoso se mide sin el
   relleno de la hoja); con el contenido debajo
   aparece un fondo, como en Mail, que se desvanece al entrar y al salir (la clase la pone hojas.js) */
.hj-cab{position:sticky;top:-16px;z-index:4;box-sizing:border-box;height:64px;margin:-16px -16px 0;padding:16px 16px 0}
.hj-cab::before{content:"";position:absolute;inset:0 0 -8px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .25s ease;
  background:rgba(30,30,34,.94);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid rgba(255,255,255,.1)}
/* la ficha, igual: su cabecera ya está fija; el fondo va en su ::after (el ::before es la barrita) */
.fi-cab::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .25s ease;border-radius:38px 38px 0 0;
  background:rgba(30,30,34,.94);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid rgba(255,255,255,.1)}
html.claro .fi-cab::after{background:rgba(var(--vidrio-tema),.9)!important;border-bottom-color:rgba(0,0,0,.1)!important}
#ficha.corrida .fi-cab::after{opacity:1}
html.claro .hj-cab::before{background:rgba(var(--vidrio-tema),.9)!important;border-bottom-color:rgba(0,0,0,.1)!important}
.hj.corrida .hj-cab::before{opacity:1}
/* ✕ y ✓ arriba, a 16 px del borde, como en la hoja de alta */
.hj .cn-acc{display:contents}
.hj .cn-acc.conBorrar{display:block;margin:0}
.hj-cab .cn-x,.hj-cab .cn-ok{position:absolute;top:16px;width:44px;height:44px;margin:0}
.hj-cab .cn-x{left:16px}
.hj-cab .cn-ok{right:16px}
.hj-cab .cn-x svg,.hj-cab .cn-ok svg{width:18px;height:18px}
/* borrar: un renglón rojo al final, como en Ajustes */
.hj .cn-acc .cn-del{position:static;display:flex;align-items:center;justify-content:center;width:100%;height:50px;margin:0;padding:0 16px;
  border-radius:var(--rG);background:var(--grupo-r);border:1px solid var(--grupo-r-b)!important;box-shadow:none;color:#ff453a;font:400 16px var(--f);letter-spacing:-.01em}
.hj .cn-acc .cn-del:active{background:rgba(255,255,255,.17);transform:none}
/* (la hoja de alta tenía sus botones de 44 por id: se repite con el mismo peso) */
#hmAcc.cn-acc .cn-del{position:static;width:100%;height:50px;margin:0;padding:0 16px;border-radius:var(--rG);
  background:var(--grupo-r);border:1px solid var(--grupo-r-b)!important;box-shadow:none;color:#ff453a;font:400 16px var(--f)}
#hmAcc.cn-acc .cn-del:active{background:rgba(255,255,255,.17);transform:none}
/* — grupos y renglones — */
.grupo-r{position:relative;display:block;background:var(--grupo-r);border:1px solid var(--grupo-r-b);border-radius:var(--rG);overflow:hidden;margin:0}
.reng{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:50px;height:auto;margin:0;padding:0 16px;box-sizing:border-box;
  background:none;border:none;border-radius:0;box-shadow:none;transform:none;color:var(--fg);font:400 16px var(--f);letter-spacing:-.01em;text-align:left;
  cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.reng:has(input:not([type=checkbox])),.reng:has(textarea){cursor:text;-webkit-user-select:auto;user-select:auto}
.r-sel:active,.reng.abierto{background:rgba(255,255,255,.08)}
/* separador fino entre renglones visibles (un renglón oculto no deja raya), con sangría hasta el texto */
.grupo-r:not(.emoji-grid)>:not([style*="display: none"]):not([hidden])~:not([style*="display: none"]):not([hidden])::before,.subgrupo>*+*::before{content:"";position:absolute;z-index:1;top:0;left:16px;right:16px;height:.5px;background:var(--sep-hj);pointer-events:none}
.subgrupo{position:relative}
.r-lab{flex:1 0 auto;min-width:0;font:inherit;font-style:normal;color:var(--fg);white-space:nowrap}
.r-val{flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:7px;color:var(--dim2);font:400 16px var(--f)}
.r-val b{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.r-val .ud{flex:0 0 auto;width:15px;height:15px}
.r-val .ico-t{width:22px;height:22px;flex:0 0 auto}
.r-tj{display:flex;flex:0 0 auto}
.r-tj svg{width:22px;height:22px;display:block}
/* campos de texto que ocupan el renglón */
.reng .r-in{flex:1 1 auto;min-width:0;height:48px;margin:0;padding:0;border:none;border-radius:0;background:none;outline:none;box-shadow:none;
  font:400 16px var(--f);letter-spacing:-.01em;color:var(--fg);-webkit-appearance:none;appearance:none}
.reng .r-in::placeholder{color:var(--dim)}
/* importes a la derecha: el "$" queda pegado al número (el ancho del campo se ajusta al texto) */
.r-imp{flex:0 1 auto;min-width:0;max-width:62%;display:flex;align-items:center;justify-content:flex-end;gap:4px;margin:0;padding:0;
  height:auto;background:none!important;border:none!important;border-radius:0;box-shadow:none}
.r-imp i{font:400 16px var(--f);font-style:normal;color:var(--dim2)}
.r-imp input{flex:0 1 auto;width:2ch;min-width:1ch;max-width:100%;height:48px;margin:0;padding:0;border:none;background:none;outline:none;text-align:right;
  font:400 16px var(--f);letter-spacing:-.01em;color:var(--fg);-webkit-appearance:none;appearance:none}
.r-imp input::placeholder{font:400 16px var(--f);letter-spacing:-.01em;color:var(--dim)}
.r-dia{flex:0 0 auto;width:56px;height:48px;margin:0;padding:0;border:none;background:none;outline:none;text-align:right;
  font:400 16px var(--f);color:var(--fg);-webkit-appearance:none;appearance:none}
.r-dia::placeholder{color:var(--dim)}
/* nota al pie del grupo */
.hj .hj-pie,.hj p.hj-pie{margin:-4px 16px 0;padding:0;max-height:none;opacity:1;overflow:visible;
  font:400 13px/1.4 var(--f);letter-spacing:0;color:var(--dim2)}
.hj .hj-pie b{color:var(--fg);font-weight:600}
.hj .hj-pie:empty,.hj .hm-aviso.hj-pie:not(.on){display:none}
/* — hoja de alta — */
.modal-box.hm.hj{max-height:calc(100dvh - 28px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.hm.hj::-webkit-scrollbar{display:none}
#hmAcc:not(.conBorrar){display:contents}
#hmAcc.conBorrar{margin-top:0}
.hm label.hm-imp.reng{min-height:62px;height:auto;padding:0 16px;gap:6px;border-radius:0;background:none;border:none}
.hm label.hm-imp.reng i{font:600 22px var(--f);color:var(--dim2);font-style:normal}
.hm label.hm-imp.reng input{flex:1 1 auto;height:60px;font:700 30px var(--f);letter-spacing:-.03em;color:var(--fg)}
.hm.es-ingreso label.hm-imp.reng input,.hm.es-ingreso label.hm-imp.reng i{color:var(--grn)}
.hm .r-nota textarea.hm-nota{display:block;flex:1 1 auto;min-width:0;height:50px;min-height:50px;max-height:116px;margin:0;padding:14px 0;
  border:none;border-radius:0;background:none;opacity:1;overflow-y:auto;resize:none;outline:none;box-shadow:none;
  font:400 16px/22px var(--f);letter-spacing:-.01em;color:var(--fg)}
.hm .r-nota textarea.hm-nota::placeholder{color:var(--dim)}
.hm .hm-sug{margin:0}
#hmCatBtn #hmCatEmo{display:flex;align-items:center;justify-content:center;transform:none;font-size:18px;line-height:1}
#hmCatBtn #hmCatEmo .ico-t{width:22px;height:22px}
#hmCatBtn #hmCatEmo .ico-t svg{width:62%;height:62%}
#hmFechaBox #hmFecha{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.hm .reng.apagado{opacity:.35;pointer-events:none}
#hmFijoBox.on,#hmIngBox.on,#hmVenceBox.on{color:var(--fg);background:none;border-color:transparent}
/* — el editor de categoría: el mismo vidrio y velo que la hoja de alta (el velo: ver #veloEditor) — */
.catnuevo.editor{max-height:calc(100dvh - 28px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  border-width:1px;background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.24);
  -webkit-backdrop-filter:saturate(175%) blur(9px);backdrop-filter:saturate(175%) blur(9px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 24px 60px rgba(0,0,0,.5);
  transform-origin:center;visibility:hidden}
.catnuevo.editor::-webkit-scrollbar{display:none}
.catnuevo.editor:not(.on){opacity:0;transform:scale(.94) translateY(10px);
  transition:opacity .18s ease,transform .26s ease,visibility 0s linear .26s}
.catnuevo.editor.on{opacity:1;transform:none;visibility:visible;
  transition:opacity .2s ease,transform .34s cubic-bezier(.3,1.3,.4,1),visibility 0s}
/* desplegables chicos (ingreso base, pago, carga): siguen naciendo de su botón */
/* categoría: el ícono grande arriba, el nombre centrado y la grilla siempre a la vista (como Recordatorios) */
#catNuevo .hero-cat{display:flex;justify-content:center;padding:2px 0}
#catNuevo #emojiPreview{width:76px;height:76px;flex:0 0 76px;padding:0;border:none!important;
  background:rgba(255,255,255,.1);box-shadow:0 10px 26px rgba(0,0,0,.28);font-size:42px;pointer-events:none;overflow:hidden}
#catNuevo #emojiPreview .ico-t{width:76px;height:76px}
#catNuevo #emojiPreview .ico-t svg{width:56%;height:56%}
#catNuevo .r-centro .r-in{text-align:center;font:600 18px var(--f);letter-spacing:-.015em}
#catNuevo .emoji-grid.grupo-r{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;max-height:192px;height:auto;margin:0;padding:8px;
  opacity:1;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
#catNuevo .emoji-grid.grupo-r::-webkit-scrollbar{display:none}
#catNuevo .em{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0;border:none;border-radius:13px;font-size:22px;line-height:1}
#catNuevo .em.on{background:rgba(255,255,255,.15);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
#catNuevo .em.con-ico .ico-t{width:30px;height:30px}
/* tarjeta, cuenta y préstamo: el punto de color; tocarlo abre los colores */
.hj .reng .cn-emo,.hj .reng .cn-emo.abierto{flex:0 0 26px;width:26px;height:26px;padding:0;margin:0;border:none!important;background:none;box-shadow:none;cursor:pointer}
.hj .reng .ed-dot{width:26px;height:26px;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25)}
/* — Más filtros: mismas medidas, ✕ a la izquierda y ✓ lleno — */
.fs-top{padding:8px 16px 6px}
.fs-head{grid-template-columns:44px 1fr 44px}
/* la ✕ y el ✓, los mismos de las otras hojas (del tamaño de los de la hoja de carga) */
.fs-sp .cn-b,.fs-head .cn-ok{width:44px;height:44px;margin:0}
.fs-head .cn-ok{justify-self:end}
.fs-grp{margin:0 0 12px}
.fs-row{min-height:50px;padding:0 16px;border-top:none}
.fs-h{margin:16px 0 7px 17px}
/* ══ Interruptor de iOS 26: carril gris, verde al prender, perilla blanca en cápsula ══ */
.sw{width:62px;height:28px}
.sw i{border:none;border-radius:999px;background:rgba(120,120,128,.36);box-shadow:none}
/* encendido en el color de acento (el mismo del ✓): en esta app el verde ya quiere decir plata que entra o algo pagado */
.sw i::before{content:'';position:absolute;inset:0;border-radius:inherit;
  opacity:0;background:rgb(var(--ac));box-shadow:none;transition:opacity .28s ease,background-color .25s ease}
.sw i::after{content:'';position:absolute;top:2px;left:2px;width:38px;height:24px;border-radius:999px;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06),0 0 0 .5px rgba(0,0,0,.04);
  transform-origin:center;transition:transform .36s cubic-bezier(.3,1.3,.4,1),background-color .2s ease,box-shadow .2s ease}
.sw input:checked + i::after{transform:translateX(20px);background:#fff}
/* al apoyar el dedo la perilla se vuelve una lente de vidrio más grande, como en iOS 26 */
.sw input:active + i::after{width:38px;transform:scale(1.2,1.34);background:rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(1.5px) saturate(190%) brightness(1.2);backdrop-filter:blur(1.5px) saturate(190%) brightness(1.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 1.5px 1px rgba(255,255,255,.9),inset 0 -1px 1px rgba(255,255,255,.35),0 5px 14px rgba(0,0,0,.24)}
.sw input:checked:active + i::after{transform:translateX(20px) scale(1.18,1.3)}
/* pruebas de fondo: con tres muestras más, el selector se desplaza si no entra */
/* ══════════ El saldo sin tarjeta: una sola pantalla, número en blanco, controles fuera del número ══════════ */
/* el vidrio queda para los controles (dock, botones, menús, hojas); el saldo va directo sobre el fondo */
.hero.hero2{position:relative;background:none!important;border:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  border-radius:0;padding:0 4px;margin:0 0 22px;overflow:visible}
.hero.hero2::before,.hero.hero2::after{display:none}
/* el resumen de arriba (Te quedan) va solo en Billetera: en las otras pantallas lo de cada una sube */
body:has(#v-deuda.on) #hero,body:has(#v-salud.on) #hero{display:none!important}
#kS2,#kDots{display:none}
.k-vista{margin:0;overflow:visible}
.k-track{overflow:visible;scroll-snap-type:none}
.k-slide{padding:0}
/* qué es el número */
.k-cap{margin:4px 0 2px;font:500 15px var(--f);letter-spacing:-.01em;color:var(--dim2)}
/* el número: blanco; rojo solo si es negativo */
.hero2 .hero-val{text-align:left;margin:0;color:var(--fg)}
#kpiQueda.c-g,#kpiQueda.c-y{color:var(--fg)}
#kpiQueda.c-r{color:var(--red)}
/* Disponible / Saldo: solo el número; se toca para cambiar */
#kS1.k-simple .k-top,#kS1.k-simple .k-bar,#kS1.k-simple .k-st,#kS1.k-simple .cobrar-n{display:none!important}
#kS1.k-simple .k-cap,#kS1.k-simple #kpiQueda{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
#kS1.k-simple .k-cap{display:inline-flex;align-items:center;gap:5px}
.k-cambio{width:15px;height:15px;opacity:.75}
#kS1.k-cambia .k-cap{animation:kAparece .32s ease-out both}
/* la línea de debajo del Saldo se abre con su alto: la cinta y la lista bajan y suben suave */
#kS1.k-simple .k-sub{display:block;max-height:0;margin-top:0;opacity:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  transition:max-height .34s cubic-bezier(.3,0,.2,1),margin-top .34s cubic-bezier(.3,0,.2,1),opacity .22s ease}
#kS1.k-simple .k-sub.ver{max-height:24px;margin-top:2px;opacity:1;transition-delay:0s,0s,.08s}
@keyframes kAparece{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
/* sin la barra, la cinta (Hoy · Semanas · Mes) queda a la misma distancia del número que el número del título */
#hero:has(#kS1.k-simple){margin-bottom:10px}
/* Cuentas: el mismo número arriba (A pagar este mes / Deuda total), solo en Cuentas */
/* Cuentas y Resumen: el mismo número arriba que en Billetera (cada uno solo en su pestaña) */
.hero-x{display:none;margin-bottom:10px}
body:has(#v-deuda.on) #heroCta,body:has(#v-salud.on) #heroRes{display:block}
html.dinerosita .hero-x{display:none!important}
.k-x .k-cap{display:inline-flex;align-items:center;gap:5px}
.k-x .k-cap,.k-x .hero-val{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.k-x.k-cambia .k-cap{animation:kAparece .32s ease-out both}
.k-x .hero-val{color:var(--fg)}
.k-x .hero-val.c-r{color:var(--red)}
.k-x .k-sub.c-r{color:var(--red)}
.k-x .k-sub.c-nar{color:#ff9f0a}
.k-x .k-sub.c-g{color:#30d158}
.k-pill{display:inline-block;padding:1px 7px;border-radius:9px;font-weight:600;font-size:.9em}
.k-pill.c-r{background:rgba(255,69,58,.14);color:var(--red)}
.k-pill.c-g{background:rgba(48,209,88,.15);color:#30a14e}
/* el renglón "Falta pagar" se toca para pagar todo lo de la lista */
#tjTot.tot-pago:not(.pagado),#prTot.tot-pago:not(.pagado){cursor:pointer;-webkit-tap-highlight-color:transparent}
/* una tarjeta sin nada este mes, más tenue */
#tjList .fila-cta.vacia .tile-cta,#tjList .fila-cta.vacia .nom-cta,#tjList .fila-cta.vacia .val-cta{opacity:.5}
/* arriba de la barra: cómo cuentan los créditos (menú) y el ingreso (se toca para editarlo), en texto */
.hero2 .k-top{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px;min-height:24px}
.hero2 .k-top .k-ing{height:auto;padding:2px 0;margin:0;border:none!important;border-radius:6px;
  background:none;box-shadow:none;font:500 15px var(--f);letter-spacing:-.01em;color:var(--dim2)}
.hero2 .k-top .k-ing b{font-weight:600;color:var(--fg)}
.hero2 .k-top .k-ing:active,.hero2 .k-top .k-ing.abierto{background:none;transform:none;opacity:.6}
/* debajo de la barra, una leyenda chica en un renglón: el punto del color de su tramo, qué es y el valor */
.k-st{display:flex;justify-content:space-between;gap:8px}
.k-st b,.k-st b.c-r,.k-st b.c-nar,.k-st b.c-c,.k-st b.c-g{color:var(--fg);font:600 13px/1.35 var(--f);letter-spacing:-.01em}
.k-st b.neg-saldo{color:var(--red)}
.k-st span::before{content:"";flex:0 0 auto;border-radius:50%}
.k-st>div:nth-child(1) span::before{background:#ff453a}
.k-st>div:nth-child(2) span::before{background:#ff9f0a}
.k-st>div:nth-child(3) span::before{background:var(--kl,#30d158)}
/* cómo cerrás el mes, en una línea */
/* el ojo sube a la barra del título, como botón de vidrio */
.tg{position:relative}
.tg .ojo{position:absolute;top:3px;right:4px;width:40px;height:40px;margin:0;border-radius:50%;color:rgb(var(--ac2));
  background:rgba(30,32,46,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 .5px rgba(255,255,255,.16),0 6px 16px rgba(0,0,0,.22)}
.tg h1{font:700 32px var(--f);letter-spacing:-.025em;line-height:1.1;color:var(--fg);margin:0;padding-right:52px}
/* ══════════ El mes en una hoja desde abajo (como Contactos) y menús nativos para cuotas, tarjeta y categoría ══════════ */
/* — el mes: hoja inferior con la rueda de mes y año; se toca afuera para cerrar — */
#mesVelo{display:block;position:fixed;inset:0;z-index:47;background:rgba(4,6,14,.12);opacity:0;pointer-events:none;
  transition:opacity .3s ease}
body.mesabierto #mesVelo{opacity:1;pointer-events:auto}
.mesdrop,.mesdrop.on{left:0;right:0;bottom:0;top:auto;width:auto;max-width:560px;margin:0 auto;max-height:none;overflow:hidden;
  padding:16px 0 calc(26px + env(safe-area-inset-bottom));border-radius:38px 38px 0 0;
  /* el mismo vidrio que la hoja de "Más filtros" */
  background:rgba(34,40,62,.12);border:1px solid rgba(255,255,255,.24);border-bottom:none;
  -webkit-backdrop-filter:saturate(180%) blur(40px);backdrop-filter:saturate(180%) blur(40px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 -18px 50px rgba(0,0,0,.45);
  opacity:1;transform-origin:bottom center}
.mesdrop{transform:translateY(105%);pointer-events:none;visibility:hidden;
  transition:transform .36s cubic-bezier(.3,1,.4,1),visibility 0s linear .36s}
.mesdrop.on{transform:none;pointer-events:auto;visibility:visible;
  transition:transform .42s cubic-bezier(.3,1,.4,1),visibility 0s}
#mesDrop .dial{position:relative;height:252px;gap:0;justify-content:center}
/* la banda de selección: una sola, de borde a borde con aire a los costados, en píldora */
#mesDrop .dial::before{content:"";position:absolute;left:20px;right:20px;top:50%;height:38px;margin-top:-19px;border-radius:19px;
  background:rgba(118,118,128,.24);pointer-events:none}
#mesDrop .dial-pil{display:none}
#mesDrop .dial-c-mes{flex:0 0 178px}
#mesDrop .dial-c-anio{flex:0 0 96px}
#mesDrop .dial-rueda{padding:108px 0;perspective:520px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 74%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 74%,transparent 100%)}
#mesDrop .dial-it{height:36px;justify-content:flex-start;padding-left:12px;font:400 23px var(--f);letter-spacing:-.01em;
  text-transform:none;color:rgba(235,235,245,.6)}
#mesDrop .dial-it.on{color:#fff;font-weight:400}
/* — menús nativos: ✓ a la izquierda en lo elegido, el nombre y el ícono a la derecha — */
.menu-hoja{position:fixed;z-index:52;width:max-content;min-width:232px;max-width:min(300px,calc(100vw - 28px));
  padding:6px 0;border-radius:var(--rG);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  background:rgba(150,150,180,.2);border:.5px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(34px) saturate(190%) brightness(1.08);backdrop-filter:blur(34px) saturate(190%) brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.06),0 20px 50px rgba(0,0,0,.35);
  opacity:0;transform:scale(.25);transform-origin:top right;pointer-events:none;visibility:hidden;
  transition:opacity .16s ease,transform .3s cubic-bezier(.3,1,.4,1),visibility 0s linear .3s}
.menu-hoja::-webkit-scrollbar{display:none}
.menu-hoja.arriba{transform-origin:bottom right}
.menu-hoja.on{opacity:1;transform:none;pointer-events:auto;visibility:visible;
  transition:opacity .16s ease,transform .42s cubic-bezier(.3,1.2,.4,1),visibility 0s}
.menu-hoja .cdi{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:44px;margin:0;padding:0 18px 0 44px;
  border-radius:0;background:none;font:400 17px var(--f);letter-spacing:-.01em;color:var(--fg)}
.menu-hoja .cdi:active{background:rgba(255,255,255,.1)}
.menu-hoja .cdi.on::after{content:"";position:absolute;left:17px;top:50%;width:15px;height:15px;margin-top:-7.5px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center/contain no-repeat}
.menu-hoja .cdi-n{order:1;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-hoja .cdi-e,.menu-hoja .cdi-e.con-ico{order:2;flex:0 0 auto;width:22px;margin-left:auto;font-size:18px;transform:none}
.menu-hoja .cdi-e .ico-t{width:22px;height:22px}
.menu-hoja .cdi-ico svg{width:22px;height:22px}
/* "Créditos" va en su propio grupo, como en los menús de iOS */
.menu-hoja .cdi.cdi-cred{margin-top:8px}
.menu-hoja .cdi.cdi-cred::before{left:0;right:0;top:-4px;height:1px;background:rgba(255,255,255,.12)}
/* con un menú abierto la hoja queda como está (sin oscurecerse) */
/* con un menú abierto, tocar un campo, su renglón u otro botón solo cierra el menú (el renglón del menú abierto lo
   cierra igual, tocándolo de nuevo) */
.hm.conpop label,.hm.conpop input,.hm.conpop textarea,.hm.conpop button:not(.abierto){pointer-events:none}
/* el menú de "Con créditos" toma el mismo material y medidas */
/* ══════════ Lista de movimientos sólida, como las listas agrupadas de iOS ══════════ */
/* la tarjeta de vidrio desaparece: los controles quedan sobre el fondo, el encabezado de cada día también,
   y las filas van en un bloque sólido (gris de iOS con un toque del color de acento) */
.movcard{background:none;border:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;overflow:visible}
.mov-head{padding:0 4px 2px;border:none}
.mov{overflow:visible;margin:0 4px}
.mov .mv-gr,.mov .mv-gr:last-child{margin:16px 0 0;background:none;border:none;border-radius:0;overflow:visible}
/* encabezado del día: la fecha (con su flecha) alineada con el texto de las filas y el total alineado con los importes */
.mov .mv-div,.mov .mv-gr.on .mv-div{padding:0 16px 8px;background:none;gap:8px}
.mov .mv-div:active{background:none;opacity:.6}
.mv-div .mv-dl{order:1;flex:0 1 auto;font:600 15px var(--f);letter-spacing:-.01em;color:var(--fg)}
.mv-div .mv-chev{order:2;width:13px;height:13px;color:var(--dim2)}
.mv-gr.on .mv-div .mv-chev{color:var(--dim2)}
.mv-div .mv-dt{order:3;margin-left:auto;font:400 15px var(--f);color:var(--dim2)}
/* el bloque sólido */
.mv-cuerpo{background:var(--solido);border-radius:var(--rG)}
.mv-in2{border-top:none}
/* filas: el texto a 16 px del borde y separadores finos que empiezan donde empieza el texto */
.mov .mv{padding:12px 16px;border-bottom:none}
.mov .mv + .mv::before,.mov .mv-sub + .mv::before{content:"";position:absolute;top:0;right:16px;left:56px;height:.5px;
  background:var(--sep-lista);pointer-events:none}
/* las compras de una tarjeta, abiertas debajo de ella: un poco corridas, como subnivel */
.mov .mv-hijo{padding-left:32px;background:rgba(255,255,255,.025);border-bottom:none}
.mov .mv-hijo + .mv-hijo::before{left:68px}
/* tarjetas y préstamos: sin tinte ni barra de color; el estado lo dicen el importe y el texto de abajo */
.mov .mv-lock,.mov .mv-parcial,.mov .mv-pago,.mov .mv-favor,.mov .mv-pend{background-color:transparent;box-shadow:none}
/* y su ícono va en loseta, como las categorías (el color es el de la tarjeta o el préstamo) */
.mov .mv-ico.tile-mov{flex:0 0 30px;width:30px;height:30px;background-color:var(--ic,#8e8e93);
  background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 55%);box-shadow:inset 0 .5px 0 rgba(255,255,255,.28)}
.mov .mv-ico.tile-mov svg{width:19px;height:19px;filter:none}
/* en Día no hay grupos: las filas van directo en un solo bloque sólido */
.mov:has(> .mv),.mov-mes{margin-top:12px;background:var(--solido);border-radius:var(--rG);overflow:hidden}
.mov > .vacio{margin:12px 0 0;padding:22px 16px;text-align:center;color:var(--dim2)}
/* sin la tarjeta, los encabezados de día pasan por debajo del título chico: el borde de arriba difumina un poco más */
/* con el encabezado afuera, la primera fila de cada día ya no lleva raya arriba */
.mov .mv-in2>.mv:first-child::before{display:none}
/* ══════════ Controles de vidrio sobre el fondo y bloques sólidos también en Créditos y Resumen ══════════ */
/* Día/Semana/Mes, Este mes/Promedio, el filtro y los botones del pie: el mismo vidrio que el ojo y el dock */
.mov-head .pseg,.mov-head .catbar .filt-btn:not(.on),.iobar .iob,.sal-h .di-tope{
  background:var(--vc-bg);border-color:transparent;box-shadow:var(--vc-sh);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%)}
.mov-head .catbar .filt-btn.on{background:rgb(var(--ac));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 16px rgba(0,0,0,.18)}
.mov-head .pseg:not(.arrastrando) .ps-ind{background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
/* tarjetas, prepagas, préstamos, destacados, gráficos e indicadores: bloque sólido como la lista de movimientos,
   alineado con el título (18 px del borde) */
.tjcard,.prcard,#v-salud .card,#v-salud .chart,.indics .ind{
  background:var(--solido);border:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:var(--rG)}
.tjcard,.prcard,#v-salud .card,#v-salud .chart{margin-left:4px;margin-right:4px}
.indics{padding:0 4px;background:none;border:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#v-salud .sseg{margin-bottom:14px}
/* en el anillo, la cinta comparte la fila con el botón de filtro */
.gfila{display:flex;align-items:center;gap:10px;margin-bottom:14px}
#v-salud .gfila .sseg{flex:1;min-width:0;margin:0}
.gfila .filtro-graf{flex:0 0 auto}
/* alturaSuave: mientras mide el alto final, nada adentro se anima */
/* (la fila de la cinta y el filtro no cambia de alto: si se le apagan, se cortan el estirado del filtro y la burbuja de la cinta) */
.alto-mide,.alto-mide :not(.mov-fila):not(.mov-fila *){transition:none!important}
/* las quincenas: tres pastillas sueltas con el mismo vidrio que el botón de filtro, repartidas a lo ancho como la cinta de arriba */
.qchips{display:flex;gap:8px;margin-bottom:12px}
.qch{position:relative;flex:1 1 0;min-width:0;height:40px;padding:0 8px;border:0;border-radius:999px;background:rgba(120,120,128,.14);cursor:pointer;
  font:600 15px var(--f);letter-spacing:-.01em;white-space:nowrap;isolation:isolate;transition:color .525s ease-out}
/* al elegirla se rellena con el acento en un fundido, sobre el vidrio (un degradé no se puede animar) */
.qch::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgb(var(--ac));box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  opacity:0;transition:opacity .525s ease-out;pointer-events:none}
.qch.on::after{opacity:1}
.qch.on::before{opacity:0}
.qch::before{transition:opacity .525s ease-out}
/* dentro del bloque, el renglón de agregar y el pie con los totales van sin tinte, separados por una raya fina */
.tjr-add,.prr-add{background:transparent}
/* ══════════ Íconos de tarjetas en loseta, como las categorías (estilo Ajustes) ══════════ */
/* el texto de cada fila arranca en el mismo lugar que en la lista de movimientos (16 + 30 + 10) */
.tjcard .tjr,.prcard .prr{padding-left:16px;padding-right:16px}
.tjcard .tjr{column-gap:10px}
.prcard .prr{gap:10px}
.tjr:not(:first-child)::before,.prr:not(:first-child)::before{left:56px}
/* en chico: la tarjeta en la hoja de alta y en su menú */
.r-tj.loseta,.menu-hoja .cdi-ico.loseta{display:flex;align-items:center;justify-content:center;width:22px;height:22px;
  background-color:var(--ic,#8e8e93);background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 55%);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.28)}
.r-tj.loseta svg,.menu-hoja .cdi-ico.loseta svg{width:15px;height:15px}
/* ══════════ Créditos como en iOS: estado en palabras, Pagar con menú, menú contextual y ficha ══════════ */
/* — renglón: loseta · nombre y estado · importe · botón (solo si hay algo para hacer) — */
.tjr.fila-cta,.prr.fila-cta{display:grid;grid-template-columns:30px minmax(0,1fr) auto;grid-template-rows:auto;column-gap:12px;align-items:center;
  min-height:73px;padding:12px 16px;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.fila-cta:active:not(.movido){background:rgba(255,255,255,.06)}
.fila-cta>*{grid-row:1}
.tile-cta{display:flex;align-items:center;justify-content:center;flex:0 0 30px;width:30px;height:30px;
  background-color:var(--ic,#8e8e93);background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 55%);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.28)}
.tile-cta svg{width:19px;height:19px;display:block}
.nom-cta{display:flex;flex-direction:column;justify-content:center;min-width:0;gap:1px}
.fila-cta .tjr-nom,.fila-cta .prr-n{flex:none;margin:0;padding:0;font:500 16px/1.45 var(--f);letter-spacing:-.01em;color:var(--fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.est-cta{display:block;font:400 13px/1.45 var(--f);letter-spacing:0;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-o{color:#ff9f0a}
.est-cta.c-r,.fi-est.c-r{color:#ff453a}
.fi-est.c-o{color:#ff9f0a}
.chk{display:inline-block;width:13px;height:13px;margin:0 5px 0 0;vertical-align:-2px;color:#30d158}
/* el importe de cada fila, como en Ajustes: peso normal y en gris (el que manda es el total de arriba); en rojo si es
   negativo y en verde si es a favor */
.val-cta{font:400 16px var(--f);letter-spacing:-.02em;color:var(--dim2);white-space:nowrap;font-variant-numeric:tabular-nums}
.val-cta.c-r{color:#ff453a}
.val-cta.c-g{color:#30d158}
/* la acción de la fila (Cargar, Pagar, Cobrar), debajo del importe: una pastilla como la de Deshacer, gris con el texto en
   el color del texto; la de un ingreso (Cobrar), verde como su "+$" (con el acento no: si es verde, Pagar y Cobrar se
   confundían). Al apretarla se agranda y brilla como los otros botones (.apretado, ver 06-arranque.js) */
.bfila{position:relative;display:block;margin:3px 0 0;padding:4px 12px;border:none;border-radius:999px;font:600 14px/1.25 var(--f);letter-spacing:-.01em;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:scale .45s cubic-bezier(.22,.9,.28,1.02),filter .4s ease,background-color .25s ease}
html.claro .bfila{color:var(--fg);background:rgba(120,120,128,.14)}
html:not(.claro) .bfila{color:var(--fg);background:rgba(120,120,128,.3)}
html .mv-in .bfila{color:var(--grn);background:color-mix(in srgb,var(--grn) 15%,transparent)}
.bfila.apretado{scale:1.1}
html.claro .bfila.apretado{background:rgba(120,120,128,.24)}
html.claro .mv-in .bfila.apretado{background:color-mix(in srgb,var(--grn) 24%,transparent)}
html:not(.claro) .bfila.apretado{filter:brightness(1.3)}
/* la zona que responde al dedo, un poco más grande que la pastilla */
.bfila::after{content:"";position:absolute;inset:-8px -8px}
.fila-cta:has(.bfila){grid-template-columns:30px minmax(0,1fr) auto;row-gap:0}
.fila-cta:has(.bfila)>*{grid-row:1/3}
.fila-cta:has(.bfila) .val-cta{grid-row:1;align-self:end}
.fila-cta .bfila{grid-column:3;grid-row:2;justify-self:end;align-self:start}
.fila-cta:has(.bfila) .manija{grid-column:3}
/* lo de antes que ya no se usa: compras desplegadas en la lista */
#tjList .mv-sub,#ppList .mv-sub{display:none!important}
/* levantar para reordenar: como una celda de iOS, sin barra de color */
/* "Agregar…": un renglón más, con el texto alineado a los nombres */
.tjr-add,.prr-add{position:relative;justify-content:flex-start;gap:0;min-height:50px;height:auto;padding:0 16px;
  color:rgb(var(--ac));font:400 16px var(--f);letter-spacing:-.01em;text-transform:none}
/* "+ Agregar…" de corrido, en el acento, como "Mostrar más" en iOS */
.tjr-add span,.prr-add span{flex:0 0 auto;margin-right:5px;font:300 22px/1 var(--f);color:rgb(var(--ac))}
.tjr-add::before,.prr-add::before{content:"";position:absolute;left:56px;right:16px;top:0;height:.5px;background:rgba(255,255,255,.16);pointer-events:none}
.tjr-add:first-child::before,.prr-add:first-child::before{display:none}
/* — menús: el mismo vidrio que los de la hoja de alta — */
.menu-caja{width:252px;padding:6px 0;border-radius:var(--rG);overflow:hidden;
  background:rgba(150,150,180,.2);border:.5px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(34px) saturate(190%) brightness(1.08);backdrop-filter:blur(34px) saturate(190%) brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.06),0 20px 50px rgba(0,0,0,.35)}
.menu-op{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;margin:0;padding:10px 18px;border:none;border-radius:0;background:none;
  color:var(--fg);font:400 17px/1.25 var(--f);letter-spacing:-.02em;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.menu-op:active{background:rgba(255,255,255,.12)}
.mi-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.mi-t small{margin-top:1px;font:400 13px/1.3 var(--f);letter-spacing:0;color:var(--dim2)}
.mi-i{flex:0 0 22px;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.mi-i svg{width:21px;height:21px;display:block}
.menu-op.rojo{color:#ff453a}
.menu-sep{height:1px;margin:6px 0;background:rgba(255,255,255,.12)}
/* la cabecera de la vista previa como un evento de Calendario: la barra de color a la izquierda */
.pv-ev{position:relative;padding-left:16px}
.pv-ev::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:3px;background:var(--cb,#8e8e93)}
/* menú que sale de un botón */
#menuA-velo{display:block;position:fixed;inset:0;z-index:51;background:rgba(4,6,14,.1);opacity:0;pointer-events:none;transition:opacity .2s ease}
#menuA{display:block;position:fixed;z-index:52;opacity:0;transform:scale(.25);transform-origin:top right;pointer-events:none;visibility:hidden;
  transition:opacity .16s ease,transform .3s cubic-bezier(.3,1,.4,1),visibility 0s linear .3s}
html.menuA-on #menuA-velo{opacity:1;pointer-events:auto}
html.menuA-on #menuA{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .16s ease,transform .42s cubic-bezier(.3,1.2,.4,1),visibility 0s}
/* — mantener apretado: vista previa arriba y acciones abajo, con el resto desenfocado — */
#prev-cta{display:block;position:fixed;inset:0;z-index:65;pointer-events:none;visibility:hidden;transition:visibility 0s linear .3s}
#prev-cta.on{pointer-events:auto;visibility:visible;transition:visibility 0s}
#prev-cta.midiendo{visibility:hidden!important;transition:none}
#prev-cta .cx-velo{position:absolute;inset:0;background:rgba(4,6,14,.32);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  opacity:0;transition:opacity .25s ease;touch-action:none}
#prev-cta.on .cx-velo{opacity:1}
#prev-cta .cx-prev{position:absolute;box-sizing:border-box;padding:18px 20px 16px;border-radius:34px;background:var(--solido,#1e1d24);
  box-shadow:0 22px 60px rgba(0,0,0,.45);opacity:0;transform:scale(.94);transition:opacity .2s ease,transform .4s cubic-bezier(.3,1.3,.4,1);touch-action:none;cursor:pointer}
#prev-cta.on .cx-prev{opacity:1;transform:none}
#prev-cta .cx-menu{position:absolute;opacity:0;transform:scale(.3);transform-origin:top right;
  transition:opacity .16s ease,transform .3s cubic-bezier(.3,1,.4,1)}
#prev-cta.on .cx-menu{opacity:1;transform:none;transition:opacity .18s ease .04s,transform .44s cubic-bezier(.3,1.2,.4,1) .04s}
.pv-cab{display:flex;align-items:center;gap:12px}
.pv-n{flex:1 1 auto;min-width:0;font:600 17px var(--f);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-m{margin-top:10px;font:700 28px/1.15 var(--f);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pv-m.c-g{color:#30d158}
.pv-cab .pv-m{flex:0 0 auto;margin:0;font-size:22px;font-weight:600}
.pv-cab+.pv-s{margin-top:8px}
.pv-m.c-r{color:#ff453a}
.pv-m.c-dim{color:var(--dim2)}
.pv-s{margin-top:2px;font:400 15px/1.35 var(--f);color:var(--dim2)}
.pv-s.c-r{color:#ff453a}
.pv-s.c-o{color:#ff9f0a}
.pv-s.c-g{color:#30d158}
.pv-l{margin-top:12px;border-top:.5px solid rgba(128,128,128,.28)}
.pv-i{display:flex;align-items:baseline;gap:10px;padding:9px 0 0;font:400 15px/1.35 var(--f);color:var(--fg)}
.pv-i span{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-i b{flex:0 0 auto;font-weight:400;color:var(--fg);font-variant-numeric:tabular-nums}
.pv-i b.c-g{color:#30d158}
.pv-mas{padding-top:8px;font:400 14px var(--f);color:var(--dim)}
/* — ficha: hoja desde abajo con el mismo vidrio que "Más filtros" — */
#ficha-velo{display:block;position:fixed;inset:0;z-index:44;background:rgba(4,6,14,.3);opacity:0;pointer-events:none;transition:opacity .3s ease;touch-action:none}
html.ficha-on #ficha-velo{opacity:1;pointer-events:auto}
html.ficha-on #ficha{transform:none;visibility:visible;transition:transform .46s cubic-bezier(.3,1,.4,1),visibility 0s}
#ficha.arrastra{transition:none}
.fi-cab{position:absolute;z-index:2;left:0;right:0;top:0;height:76px;touch-action:none;cursor:grab}
.fi-cab::before{content:"";position:absolute;left:50%;top:6px;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:rgba(255,255,255,.28)}
.fi-cab .cn-b{position:absolute;top:16px;width:44px;height:44px}
.fi-cab .cn-b svg{width:18px;height:18px}
.fi-x{left:16px}
/* "‹ Volver": vuelve a la ficha de la que se vino, sin pastilla, como en iOS */
#ficha.conVolver .fi-x,html #ficha.conVolver .fi-x{width:auto;max-width:calc(50% - 56px);padding:0 8px 0 0;gap:2px;font:400 17px var(--f);color:rgb(var(--ac2));
  background:none!important;border:none!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}
#ficha.conVolver .fi-x::before,#ficha.conVolver .fi-x::after{display:none}
#ficha.conVolver .fi-x svg{flex:0 0 auto;width:20px;height:20px}
#ficha.conVolver .fi-x{z-index:1}
#ficha.conVolver .fi-tit{pointer-events:none}
#ficha.conVolver .fi-x span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-ed{right:16px}
.fi-tit{position:absolute;left:72px;right:72px;top:16px;height:44px;text-align:center;font:600 17px/44px var(--f);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .2s ease}
#ficha.conTit .fi-tit{opacity:1}
.fi-cuerpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;display:flex;flex-direction:column;gap:12px;
  padding:20px 16px calc(28px + env(safe-area-inset-bottom));border-radius:38px 38px 0 0}
.fi-cuerpo::-webkit-scrollbar{display:none}
.fi-cuerpo>*{flex:0 0 auto}
.fi-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px 4px}
.fi-hero .tile-cta{width:60px;height:60px;flex-basis:60px}
.fi-hero .tile-cta svg{width:38px;height:38px}
.fi-nom{max-width:100%;margin-top:10px;font:600 20px var(--f);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi-monto{margin-top:2px;font:700 38px/1.15 var(--f);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.fi-monto.c-g{color:#30d158}
.fi-monto.c-r{color:#ff453a}
.fi-monto.c-dim{color:var(--dim2)}
.fi-est{margin-top:3px;font:400 15px/1.35 var(--f);color:var(--dim2)}
.fi-prog{width:100%;margin-top:14px}
.fi-barra{height:6px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.fi-barra i{display:block;height:100%;border-radius:3px;background:rgb(var(--ac));transition:width .5s cubic-bezier(.3,1,.4,1)}
.fi-barra.listo i{background:#30d158}
.fi-prog-t{display:flex;justify-content:space-between;margin-top:6px;font:400 13px var(--f);color:var(--dim2)}
.fi-acc{display:flex;gap:10px;margin-top:4px}
.fi-b{flex:1 1 0;min-width:0;height:50px;margin:0;padding:0 12px;border:none;border-radius:25px;background:rgba(255,255,255,.12);
  color:var(--fg);font:600 17px var(--f);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);transition:transform .16s cubic-bezier(.3,1.4,.4,1),background .15s ease}
.fi-b.pri{background:rgb(var(--ac));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.fi-b:active{transform:scale(.96)}
.fi-sec{margin:8px 16px -6px;font:600 15px var(--f);letter-spacing:-.01em;color:var(--dim2)}
.fi-g .reng{cursor:default}
/* el importe no se parte: si no entra, el que pasa a dos renglones es el texto */
.fi-g .r-val{color:var(--dim2);white-space:nowrap;flex-shrink:0}
.fi-g .r-lab{flex:1 1 auto;min-width:0;white-space:normal}
.fi-g .r-val.c-g{color:#30d158}
.fi-g .fi-tot .r-lab,.fi-g .fi-tot .r-val{font-weight:600;color:var(--fg)}
.fi-c{gap:12px;padding:11px 16px!important;cursor:pointer!important}
.fi-c:active{background:rgba(255,255,255,.08)}
.fi-c .ico-t{flex:0 0 30px;width:30px;height:30px}
.fi-c .ico-t svg{width:19px;height:19px}
.fi-cn{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.fi-cn b{font:500 16px/1.4 var(--f);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi-cn i{font:400 13px/1.4 var(--f);font-style:normal;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* listas de movimientos en una línea (enUnaLinea): el nombre y, en gris al lado, la fecha y los demás datos. Si no entra,
   el nombre se corta con "…" y la fecha queda; un dato de más que no entra entero baja a la segunda línea, que no se ve */
.fi-l1 .fi-cn{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:5px;height:22px;overflow:hidden}
.fi-l1 .fi-l1a{display:flex;align-items:baseline;gap:5px;min-width:0;max-width:100%}
.fi-l1 .fi-cn b{flex:0 1 auto;min-width:0;line-height:22px}
.fi-l1 .fi-cn i{flex:0 0 auto;font-size:15px;line-height:22px}
.fi-l1 .fi-cn i::before{content:'· '}
.fi-ca{flex:0 0 auto;font:400 16px var(--f);letter-spacing:-.02em;color:var(--dim2);font-variant-numeric:tabular-nums}
.fi-ca.c-g{color:#30d158}
.fi-ca.c-r{color:#ff453a}
:is(#ficha,.tj-grande) .grupo-r.fi-cs>:not([hidden])~:not([hidden])::before{left:58px}
.fi-del{display:flex;align-items:center;justify-content:center;width:100%;height:50px;margin:0;padding:0 16px;border-radius:var(--rG);
  background:var(--grupo-r,rgba(255,255,255,.1));border:1px solid var(--grupo-r-b,rgba(255,255,255,.14));color:#ff453a;font:400 16px var(--f);letter-spacing:-.01em;cursor:pointer}
.fi-del:active{background:rgba(255,255,255,.17)}
.fi-pie{margin:-4px 16px 0;font:400 13px/1.4 var(--f);color:var(--dim2)}
/* — ordenar como en iOS: "Editar" en la cabecera, manijas a la derecha, "Listo" para terminar — */
.editar-sec{position:absolute;right:30px;top:calc(50% + 3px);transform:translateY(-50%);height:34px;margin:0;padding:0 8px;border:none;border-radius:17px;
  background:none;color:rgb(var(--ac2));font:400 17px var(--f);letter-spacing:-.02em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.editar-sec.listo{font-weight:600}
.editar-sec:active{opacity:.5}
.editar-sec[hidden],.sec.cerrada .editar-sec{display:none}
.manija{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin:-8px -12px -8px -6px;color:rgba(235,240,255,.42);
  touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent}
.manija svg{width:22px;height:22px;display:block}
.editando .fila-cta{grid-template-columns:30px minmax(0,1fr) auto;cursor:default}
.editando .fila-cta .val-cta,.editando .fila-cta .bfila{display:none}
.editando .fila-cta:active{background:none}
.editando .tjr-add,.editando .prr-add{opacity:.35;pointer-events:none}
@keyframes manijaIn{from{opacity:0;transform:translateX(10px)}}
.ordenando .fila-cta{transition:transform .22s cubic-bezier(.3,1,.4,1)}
.ordenando .fila-cta.alzado{position:relative;z-index:3;transition:box-shadow .2s ease;border-radius:16px;
  background:color-mix(in oklab,var(--solido,#1e1d24) 80%,#fff 20%);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.ordenando .fila-cta.alzado::before,.ordenando .fila-cta.alzado+.fila-cta::before{opacity:0}
.ordenando .fila-cta.alzado .manija{cursor:grabbing;color:rgba(235,240,255,.7)}
.ordenando .fila-cta.cae{transition:transform .22s cubic-bezier(.3,1,.4,1),box-shadow .22s ease;box-shadow:none}
/* ══════════ Categorías: se editan desde "Editar categorías…", en una hoja con la lista ══════════ */
#ficha.modoCats .fi-ed{display:none}
#ficha.modoCats .fi-tit{opacity:1}
#ficha.modoCats .fi-cuerpo{padding-top:76px}
.ct-r{gap:12px;padding:10px 16px!important;min-height:52px;cursor:pointer}
.ct-r:active{background:rgba(255,255,255,.08)}
.ct-r.ct-auto{cursor:default}
.ct-r.ct-auto:active{background:none}
.ct-r .ico-t{flex:0 0 30px;width:30px;height:30px}
.ct-r .ico-t svg{width:19px;height:19px}
.ct-n{flex:1 1 auto;min-width:0;font:400 16px var(--f);letter-spacing:-.01em;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-k{flex:0 0 auto;font:400 16px var(--f);color:var(--dim2);font-variant-numeric:tabular-nums}
.ct-ch{flex:0 0 14px;width:14px;height:14px;margin-left:-4px;color:rgba(235,240,255,.3)}
.ct-nueva .ct-n,.ct-mas{color:rgb(var(--ac2))}
.ct-mas{flex:0 0 30px;width:30px;text-align:center;font:300 24px/1 var(--f)}
/* ══════════ Dock: no se achica y la lente pinta lo que tiene adentro ══════════ */
/* las pestañas de verdad quedan invisibles (siguen recibiendo los toques); se ven las dos copias */
.vtab,.vtab.on{color:transparent!important}
.vtabs:not(.arrastrando) .vtab:active{transform:none}
.dock-capa{position:absolute;inset:0;z-index:2;display:flex;align-items:stretch;gap:2px;box-sizing:border-box;pointer-events:none}
.vtc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:0 0 auto;
  width:var(--tw);transform-origin:center;will-change:transform}
.vtc svg{display:block}
.vtc .vt-n{display:block;font:600 10.5px var(--f);letter-spacing:-.01em;line-height:1.1;white-space:nowrap}
.dock-capa-b{color:#e9ebf2}
.dock-capa-t{color:rgb(var(--ac2))}
/* la lente: vidrio claro y, al arrastrarla, más grande que la barra */
.vtabs.arrastrando .vind{scale:1.2 1.26;background:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.12),0 0 0 .5px rgba(255,255,255,.25),0 8px 22px rgba(0,0,0,.25)}
/* ══════════ El mes en el título y el dock como la barra de iOS 26 ══════════ */
/* el título grande baja un poco: arriba iOS desenfoca lo que queda bajo la barra de estado */
@media (display-mode:standalone){
body{padding-top:calc(34px + env(safe-area-inset-top))}
}
#tgSub{display:none}
.tg-fila{display:flex;align-items:center;gap:10px;min-height:28px;margin-top:3px}
.tg-mes{display:inline-flex;align-items:center;gap:4px;margin:0 0 0 -2px;padding:2px;border:none;border-radius:8px;background:none;
  color:var(--dim2);font:500 15px var(--f);letter-spacing:-.01em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tg-mes svg{width:13px;height:13px;margin-top:1px;transition:transform .25s ease}
.tg-mes:active{opacity:.5}
body.mesabierto .tg-mes svg{transform:rotate(180deg)}
.tg-hoy{display:inline-flex;align-items:center;height:26px;margin:0;padding:0 11px;border:none;border-radius:13px;
  background:rgba(var(--ac),.22);color:rgb(var(--ac2));font:600 13px var(--f);letter-spacing:-.01em;cursor:pointer;-webkit-tap-highlight-color:transparent;
  animation:aparece-hoy .32s cubic-bezier(.3,1.4,.4,1)}
.tg-hoy:active{background:rgba(var(--ac),.34)}
.tg-hoy[hidden]{display:none}
@keyframes aparece-hoy{from{opacity:0;transform:scale(.7)}}
/* título chico al bajar: la sección y el mes, debajo del desenfoque de iOS; tocarlo también cambia el mes */
.titulo-chico{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top) + 24px);z-index:41;height:40px;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  /* --tc va de 0 a 1 siguiendo el desplazamiento (ver 06-arranque.js): aparece y se va igual en las dos direcciones */
  opacity:var(--tc,0);transform:translateY(calc((1 - var(--tc,0)) * 4px))}
html.tg-arriba .titulo-chico>*{pointer-events:auto}
.tc-t{display:flex;flex-direction:column;align-items:center;margin:0;padding:0 14px;border:none;background:none;color:var(--fg);
  line-height:1.15;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tc-t:active{opacity:.5}
.tc-t b{font:600 16px var(--f);letter-spacing:-.01em}
.tc-t span{font:500 12px var(--f);color:var(--dim2)}
.tc-hoy{position:absolute;right:calc(16px + env(safe-area-inset-right));top:50%;margin-top:-13px}
/* el borde de arriba difumina hasta debajo del título chico */
.borde-sup{top:0;opacity:0;transition:opacity .25s ease;height:calc(env(safe-area-inset-top) + 92px);
  background:linear-gradient(180deg,rgba(6,8,16,.82) 0%,rgba(6,8,16,.64) 62%,rgba(6,8,16,0) 100%);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(180deg,#000 66%,transparent);mask-image:linear-gradient(180deg,#000 66%,transparent)}
/* en claro, sin tinte y con menos desenfoque, como en Dinerosita: así se sigue viendo el destello del acento */
html.claro .borde-sup{background:none!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* dock: sin el mes ni el aviso; las pestañas a la izquierda ocupando el lugar, el (+) aparte a la derecha */
.dock .vtabs{--tw:min(104px,calc((100vw - 40px - env(safe-area-inset-left) - env(safe-area-inset-right) - var(--dh) - 10px - 12px) / 3))}
/* ══════════ Apariencia: claro, oscuro o automático, con fondos lisos ══════════ */
/* — el menú de fondos: dos pantallas en miniatura, "Automático" y los colores de acento — */
.fondodrop{transform-origin:bottom center;width:min(300px, calc(100vw - 28px))}
.fondodrop.on{max-height:none;padding:14px 14px 16px}
.ac-op{width:28px;height:28px;margin:0;padding:0;border:none;border-radius:50%;background:var(--c);cursor:pointer;
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18);transition:transform .16s cubic-bezier(.3,1.4,.4,1);-webkit-tap-highlight-color:transparent}
.ac-op:active{transform:scale(.88)}
.ac-op.on{outline:2.5px solid var(--c);outline-offset:2.5px}
/* — modo claro: los ajustes a mano sobre lo que se traduce solo (con !important: lo traducido pesa más) — */
/* hojas y menús de vidrio claro */
html.claro .fs-box,html.claro .mesdrop,html.claro .mesdrop.on,html.claro #ficha{border-color:rgba(255,255,255,.7)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 -12px 40px rgba(0,0,0,.12)!important}
html.claro .sw i{background:rgba(120,120,128,.18)!important}
/* el dock: la capa blanca pasa a tinta oscura y el (+) va en el acento */
/* los encabezados de día no llevan franja */
html.claro .mv-gr{background:transparent!important}
/* el menú de colores en dos filas parejas */
.acentos{flex-wrap:wrap;display:grid;grid-template-columns:repeat(5,28px);justify-content:space-between;gap:14px 0;padding:2px 10px}
/* hojas centradas, editores y desplegables: vidrio claro; los velos oscurecen apenas, como en iOS */
html.claro .modal-box,html.claro .hm,html.claro .catnuevo,html.claro .cq-c{background:rgba(var(--vidrio-tema),.82)!important;border-color:rgba(255,255,255,.75)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 20px 50px rgba(0,0,0,.16)!important}
html.claro .modal{background:rgba(0,0,0,.2)!important}
html.claro #ficha-velo{background:rgba(0,0,0,.2)!important}
/* el selector deslizable pinta de blanco lo que está bajo la lente al arrastrar: en claro, tinta oscura */
html.claro [style*="color: rgb(255, 255, 255)"]{color:var(--fg)}
/* marcas blancas sobre blanco (el punto de hoy, la muestra del promedio, la nota, los tildes): en claro van oscuras */
html.claro .p-prom,html.claro .dib.hoy::after,html.claro .menu-hoja .cdi.on::after{background:#1c1c1e!important;box-shadow:none!important}
/* ══════════ Los controles segmentados toman el acento, en oscuro y en claro ══════════ */
/* la cinta lleva una capa suave del acento; lo elegido es una pastilla teñida con el texto en el acento */
.pseg{background-image:linear-gradient(rgba(var(--ac),.1),rgba(var(--ac),.1))}
.qseg{background:rgba(var(--ac),.13)!important}
.pseg:not(.arrastrando) .ps-ind,.qseg:not(.arrastrando) .ps-ind{
  background:rgba(var(--ac2),.24)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 8px rgba(0,0,0,.16)!important}
.pseg .ps.on,.qseg .ps.on{color:rgb(var(--ac2))!important}
html.claro .pseg{background-image:linear-gradient(rgba(var(--ac),.07),rgba(var(--ac),.07))}
html.claro .qseg{background:rgba(var(--ac),.08)!important}
html.claro .pseg:not(.arrastrando) .ps-ind,html.claro .qseg:not(.arrastrando) .ps-ind{
  background:rgba(var(--ac),.16)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 4px rgba(0,0,0,.06)!important}
/* ══════════ Una sola cinta segmentada: la de "Este mes / Promedio", con la lente del dock ══════════ */
.cinta{display:flex;padding:2px;border:0!important;border-radius:999px;touch-action:pan-y;
  background-color:var(--vc-bg,rgba(30,32,46,.58))!important;background-image:linear-gradient(rgba(var(--ac),.1),rgba(var(--ac),.1));
  box-shadow:var(--vc-sh,inset 0 1px 0 rgba(255,255,255,.2))!important;
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);-webkit-user-select:none;user-select:none}
.cinta .ps{flex:1 1 0;min-width:0;height:32px;margin:0;padding:0;border:none;background:none;
  font:600 13px var(--f);letter-spacing:-.005em;text-transform:none;color:transparent!important}
.cinta .ps-ind{top:2px;bottom:2px;left:2px;border-radius:999px}
.cinta:not(.arrastrando) .ps-ind{background:rgba(var(--ac2),.24)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 8px rgba(0,0,0,.16)!important}
html.claro .cinta:not(.arrastrando) .ps-ind{background:rgba(var(--ac),.16)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 4px rgba(0,0,0,.06)!important}
/* al arrastrar: lente de vidrio claro, más grande que la cinta, como en el dock */
.cinta.arrastrando .ps-ind{
  -webkit-backdrop-filter:blur(2px) saturate(180%) brightness(1.2);backdrop-filter:blur(2px) saturate(180%) brightness(1.2)}
/* en claro, la misma lente que el dock: vidrio apenas oscurecido, sin el brillo que la volvía blanca */
html.claro .cinta.arrastrando .ps-ind{-webkit-backdrop-filter:none;backdrop-filter:none}
.cinta-capa{position:absolute;inset:0;z-index:2;display:flex;padding:2px;box-sizing:border-box;pointer-events:none}
.sgc{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;
  font:600 13px var(--f);letter-spacing:-.005em;transform-origin:center;will-change:transform}
.cinta-capa-b{color:var(--dim2)}
.cinta-capa-t{color:rgb(var(--ac2))}
/* la sección de movimientos no se pliega: su contenedor no recorta, así la lente de la cinta asoma entera */
.sec[data-sec="lista"] > .sec-b,.sec[data-sec="lista"] > .sec-b > .sec-in{overflow:visible}
/* sin overflow:hidden, el item de la grilla toma el ancho de su contenido: una nota larga en "Día" ensanchaba toda la pantalla */
.sec[data-sec="lista"] > .sec-b{grid-template-columns:minmax(0,1fr)}
.sec[data-sec="lista"] > .sec-b > .sec-in{min-width:0}
/* negro y blanco con un toque del acento: valores por defecto (los reales los pone el fondo elegido) */
/* dock: los íconos sin elegir con la tinta del modo; en oscuro, el elegido y el (+) con el acento entero */
html.claro .dock-capa-b{color:rgb(var(--tinta))}
html.oscuro .dock-capa-b{color:rgb(var(--blanco-tema))!important}
html.oscuro .dock-capa-t{color:rgb(var(--ac))}
html.oscuro .fab{color:rgb(var(--ac))}
/* en claro también: el ícono elegido del dock y el (+) con el acento entero; los textos con su versión más oscura */
html.claro .dock-capa-t{color:rgb(var(--ac))}
html.claro .fab{color:rgb(var(--ac))}
/* los botones redondos de vidrio (filtro, ojo, importar/exportar/fondo, "Sin tope") con el mismo vidrio de las cintas:
   capa suave del acento y el ícono en el acento */
.mov-head .catbar .filt-btn:not(.on):not(.abierto),.tg .ojo,.iobar .iob:not(.abierto),.sal-h .di-tope{
  background-color:var(--vc-bg,rgba(30,32,46,.58))!important;background-image:linear-gradient(rgba(var(--ac),.1),rgba(var(--ac),.1));
  box-shadow:var(--vc-sh,inset 0 1px 0 rgba(255,255,255,.2))!important;border-color:transparent!important;
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%)}
html.claro .mov-head .catbar .filt-btn:not(.on):not(.abierto),html.claro .tg .ojo,html.claro .iobar .iob:not(.abierto),html.claro .sal-h .di-tope{
  background-image:linear-gradient(rgba(var(--ac),.07),rgba(var(--ac),.07))}
.mov-head .catbar .filt-btn:not(.on),.tg .ojo,.iobar .iob{color:rgb(var(--ac2))!important}
/* ══════════ El vidrio sin el azul fijo: base neutra con una capa suave del acento ══════════ */
/* antes la base de todo el vidrio oscuro era un gris azulado (30,32,46 · 34,40,62 · 150,150,180), con cualquier acento */
html{-webkit-text-size-adjust:100%;background:#071116;--rL:26px;--red:#ff453a;--redS:rgba(255,69,58,.15);--grn:#30d158;--grnS:rgba(48,209,88,.15);--yel:#ffd60a;--yelS:rgba(255,214,10,.15);--grupo-r:rgba(255,255,255,.1);--grupo-r-b:rgba(255,255,255,.14);--sep-hj:rgba(255,255,255,.16);--sep-lista:rgba(255,255,255,.1);--solido:#1e1d24;--solido:color-mix(in oklab,#1c1c1e 90%,rgb(var(--ac)) 10%);
  --vc-sh:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 .5px rgba(255,255,255,.14),0 6px 16px rgba(0,0,0,.18);--blanco-tema:242,244,251;--tinta:0,0,0;--gris-tema:60,60,67;--vc-bg:rgba(28,28,32,.58)}
html.oscuro .fs-box,html.oscuro .mesdrop,html.oscuro .mesdrop.on,html.oscuro #ficha{background-color:rgba(36,36,40,.12)!important;
  background-image:linear-gradient(rgba(var(--ac),.07),rgba(var(--ac),.07))}
/* en claro el dock también lleva la capa del acento, como las cintas */
/* dock y menú del filtro más transparentes: se ve más lo que pasa debajo */
/* hojas y editores sin el azul: velos negros neutros, rellenos grises de iOS y el vidrio con la capa del acento */
html.oscuro .modal,html.oscuro #veloEditor{background-color:rgba(0,0,0,.36)!important}
html.oscuro #modalConf::before{background:rgba(0,0,0,.16)!important}
html.oscuro .fs-vel,html.oscuro #mesVelo{background:rgba(0,0,0,.14)!important}
html.oscuro #menuA-velo{background:rgba(0,0,0,.12)!important}
html.oscuro #prev-cta .cx-velo{background:rgba(0,0,0,.34)!important}
html.oscuro #ficha-velo{background:rgba(0,0,0,.32)!important}
html.oscuro .hm::after{background:rgba(6,6,8,.8)!important}
html.oscuro .modal-box,html.oscuro .hm,html.oscuro .catnuevo,html.oscuro .cq-c{
  background-color:rgba(255,255,255,.07)!important;background-image:linear-gradient(rgba(var(--ac),.07),rgba(var(--ac),.07))!important}
html.oscuro .cn-b.cn-x,html.oscuro .hj-cab .cn-x{background:rgba(118,118,128,.24)!important}
html.oscuro .hm-imp,html.oscuro .hm-nota,html.oscuro .hm-sg,html.oscuro .di-tope,html.oscuro .cn-emo{
  background-color:rgba(118,118,128,.2)}
/* ══════════ Hojas desde abajo para todo lo que se completa ══════════ */
.barrita{position:absolute;left:50%;top:6px;width:36px;height:5px;margin-left:-18px;border-radius:3px;
  background:rgba(255,255,255,.28);z-index:5;pointer-events:none}
html.claro .barrita{background:rgba(0,0,0,.18)}
/* el material: el mismo vidrio que la ficha y "Más filtros" */
.abajo{box-sizing:border-box;width:100%!important;max-width:560px;margin-left:auto!important;margin-right:auto!important;
  border-radius:38px 38px 0 0!important;border-bottom:none!important;padding:16px 16px calc(22px + env(safe-area-inset-bottom))!important;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  -webkit-backdrop-filter:saturate(180%) blur(40px)!important;backdrop-filter:saturate(180%) blur(40px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 -18px 50px rgba(0,0,0,.42)!important}
.abajo::-webkit-scrollbar{display:none}
.abajo.arrastrando-hoja{transition:none!important}
/* la hoja de alta: el velo solo oscurece (como iOS) y la hoja sube desde abajo */
#hojaMov{display:flex!important;align-items:flex-end;justify-content:center;padding:0!important;
  background:rgba(0,0,0,.32)!important;-webkit-backdrop-filter:none;backdrop-filter:none;
  opacity:0;visibility:hidden;pointer-events:none;animation:none!important;transition:opacity .3s ease,visibility 0s linear .38s}
#hojaMov.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease,visibility 0s}
html.claro #hojaMov{background:rgba(0,0,0,.2)!important}
#hojaMov .modal-box.abajo{max-height:var(--alto-hoja,calc(100dvh - 40px))!important;
  animation:none!important}
/* editores y cuadritos: la misma hoja, pegada abajo (o arriba del teclado) */
.catnuevo.abajo{position:fixed;left:0!important;right:0!important;top:auto!important;z-index:48;
  max-height:var(--alto-hoja,calc(100dvh - 40px))!important;opacity:1!important;visibility:hidden;pointer-events:none;border-width:1px!important;
  transform:translateY(105%)!important}
.catnuevo.abajo.arrastrando-hoja{transition:none!important}
/* el velo: oscurece sin desenfocar y también va detrás de los cuadritos */
#veloEditor{position:fixed;inset:0;z-index:47;
  opacity:0;pointer-events:none;transition:opacity .22s ease;touch-action:none;background:rgba(0,0,0,.32);-webkit-backdrop-filter:none;backdrop-filter:none}
html.claro #veloEditor{background:rgba(0,0,0,.2)!important}
html:has(.catnuevo.on) #veloEditor{opacity:1;pointer-events:auto}
/* la ficha queda atrás, más chica, cuando se abre una hoja encima (un cartel no la mueve: la oscurece el velo) */
html.ficha-on:has(.catnuevo.on:not(.cartel),#hojaMov.open) #ficha{transform:translateY(-10px) scale(.93)!important;transform-origin:top center;filter:brightness(.82);
  transition:transform .4s cubic-bezier(.3,1,.4,1),filter .3s ease!important}
/* ══════════ Barritas que cierran, vidrio más transparente y el osito al pie de Resumen ══════════ */
/* la zona de la barrita: arriba de cada hoja, entre ✕ y ✓ */
.asa{display:block;position:absolute;left:68px;right:68px;top:0;height:56px;z-index:6;touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent}
.abajo .barrita{width:40px;margin-left:-20px}
/* vidrio más transparente: dock, menús, hojas, cintas y botones */
html.oscuro{--vc-bg:rgba(28,28,32,.42)}
/* los menús de la hoja aparecen ya opacos, solo creciendo: con la opacidad a medias Safari no desenfoca y se veía el salto */
.menu-hoja.on{transition:opacity 0s,transform .42s cubic-bezier(.3,1.2,.4,1),visibility 0s}
html.oscuro .abajo{background-image:linear-gradient(rgba(var(--ac),.07),rgba(var(--ac),.07))!important;
  border-color:rgba(255,255,255,.2)!important;background-color:rgba(34,34,38,.24)!important}
html.claro{--fg:#000;--dim2:rgba(60,60,67,.7);--dim:rgba(60,60,67,.5);--fondo-tema:242,242,247;--vidrio-tema:250,250,252;
  --grn:#24a860;--grnS:rgba(36,168,96,.14);--yel:#c98a00;--yelS:rgba(201,138,0,.14);--red:#e5362c;--redS:rgba(229,54,44,.12);
  --panel:rgba(0,0,0,.035);--soft:rgba(0,0,0,.045);--softH:rgba(0,0,0,.08);--rim:rgba(0,0,0,.08);--rimT:rgba(0,0,0,.14);
  --sh:0 6px 20px rgba(0,0,0,.08);--shL:0 18px 46px rgba(0,0,0,.14);
  --solido:#fff;--grupo-r:rgba(255,255,255,.86);--grupo-r-b:rgba(0,0,0,.04);--sep-hj:rgba(60,60,67,.16);--sep-lista:rgba(60,60,67,.16);--vc-sh:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 .5px rgba(0,0,0,.06),0 6px 16px rgba(0,0,0,.08);--vc-bg:rgba(255,255,255,.56)}
html.claro .abajo{border-color:rgba(255,255,255,.7)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 -12px 40px rgba(0,0,0,.12)!important;background-color:rgba(var(--vidrio-tema),.68)!important}
html.claro .fs-box,html.claro .mesdrop,html.claro .mesdrop.on,html.claro #ficha{background:rgba(var(--vidrio-tema),.62)!important}
html.claro .modal-box:not(.abajo),html.claro .hm:not(.abajo),html.claro .catnuevo:not(.abajo),html.claro .cq-c{background:rgba(var(--vidrio-tema),.7)!important}
/* el osito de la app, plano y centrado, en lugar de los tres botones */
.iobar{margin-top:28px}
.iobar .iob.osito{width:56px;height:56px;padding:0;border:none!important;border-radius:14px;background:none!important;background-image:none;
  box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;color:rgb(var(--ac2))!important;
  transition:transform .18s cubic-bezier(.3,1.4,.4,1),opacity .2s ease}
html.claro .iobar .iob.osito{color:rgb(var(--ac))!important}
.iobar .iob.osito svg{width:40px;height:40px}
.iobar .iob.osito:active{transform:scale(.88)}
.iobar .iob.osito.abierto{opacity:.55}
.firma{margin-top:4px}
/* el menú de ajustes: renglones de menú, la cinta de apariencia y los colores */
.ajustes .aj-io{display:flex;flex-direction:column}
/* modo oscuro y automático como interruptores */
.ajustes .aj-fila.apagado{opacity:.4;cursor:default}
/* el osito sin recuadro también en claro (otras reglas del vidrio pesaban más) */
.iobar #btnFondo.osito{background:none!important;background-image:none!important;box-shadow:none!important;border:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* el menú del osito más compacto */
.fondodrop.ajustes{width:min(264px,calc(100vw - 28px))}
.fondodrop.ajustes.on{max-height:none;padding:4px 0 12px}
.ajustes .menu-op{min-height:40px;padding:8px 16px;font-size:16px}
.ajustes .mi-i svg{width:19px;height:19px}
.ajustes .aj-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font:400 17px var(--f);letter-spacing:-.02em;color:var(--fg);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .2s ease;min-height:42px;padding:0 12px 0 16px;font-size:16px}
.ajustes .aj-fila .sw{transform:scale(.86);transform-origin:right center}
.ajustes .menu-sep{margin:4px 0 8px}
.ajustes .ac-op{width:26px;height:26px}
/* ══════════ Sugerencias por importe y por nombre ══════════ */
.hm-sg .sg-cat{margin:0 2px 0 5px;font-size:.86em;font-weight:500;color:var(--dim2)}
/* ══════════ Cuentas y precios en la nota ══════════ */
.cuenta-nota{display:flex;flex-direction:column;gap:5px;margin:9px 6px 0;font:400 13px/1.38 var(--f);color:var(--dim2)}
.cuenta-nota:empty{display:none}
.cuenta-nota b{font-weight:600;color:var(--fg)}
.cuenta-nota .c-o,.cuenta-nota .c-o b{color:#ff9f0a}
.cuenta-nota .c-g{color:var(--grn,#30d158)}
.cuenta-nota-l{display:block}
.cuenta-nota-b{display:inline-flex;align-items:center;height:24px;margin:-3px 0 -3px 8px;padding:0 10px;border:none;border-radius:12px;vertical-align:middle;
  background:rgba(var(--ac),.16);color:rgb(var(--ac2));font:600 12.5px var(--f);cursor:pointer;-webkit-tap-highlight-color:transparent}
.cuenta-nota-b:active{transform:scale(.94)}
/* ══════════ Etiquetas ══════════ */
.mv-nt .etiq{color:rgb(var(--ac2));font-weight:600;cursor:pointer}
.etiq-sug:not(:empty){margin:9px 0 0}
.etiq-sug .hm-sg{color:rgb(var(--ac2));font-weight:600}
#ficha.sinEd .fi-ed{display:none}
:is(#ficha,.tj-grande) .etiq-quieto{cursor:default}
:is(#ficha,.tj-grande) .etiq-quieto:active{background:none}
:is(#ficha,.tj-grande) .etiq-r .fi-ca{margin-left:auto}
:is(#ficha,.tj-grande) .etiq-r .ct-ch{flex:0 0 auto;width:14px;height:14px;margin-left:6px;color:var(--dim2)}
/* ══════════ Filas que se tocan enteras, menú al mantener, compras diferidas y etiquetas en Resumen ══════════ */
/* el menú de mantener apretado: igual al de Créditos */
#prev-mov{display:block;position:fixed;inset:0;z-index:66;pointer-events:none;visibility:hidden;transition:visibility 0s linear .3s}
#prev-mov.on{pointer-events:auto;visibility:visible;transition:visibility 0s}
#prev-mov.midiendo{visibility:hidden!important;transition:none}
#prev-mov .cx-velo{position:absolute;inset:0;background:rgba(4,6,14,.32);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  opacity:0;transition:opacity .25s ease;touch-action:none}
#prev-mov.on .cx-velo{opacity:1}
#prev-mov .cx-prev{position:absolute;box-sizing:border-box;max-height:46vh;overflow:auto;overscroll-behavior:contain;padding:18px 20px 16px;border-radius:34px;
  background:var(--solido,#1e1d24);box-shadow:0 22px 60px rgba(0,0,0,.45);opacity:0;transform:scale(.94);
  transition:opacity .2s ease,transform .4s cubic-bezier(.3,1.3,.4,1);cursor:pointer;scrollbar-width:none}
#prev-mov .cx-prev::-webkit-scrollbar{display:none}
#prev-mov.on .cx-prev{opacity:1;transform:none}
#prev-mov .cx-menu{position:absolute;max-height:calc(100vh - 80px);overflow:auto;opacity:0;transform:scale(.3);transform-origin:top right;
  transition:opacity .16s ease,transform .3s cubic-bezier(.3,1,.4,1)}
#prev-mov.on .cx-menu{opacity:1;transform:none;transition:opacity .18s ease .04s,transform .44s cubic-bezier(.3,1.2,.4,1) .04s}
html.oscuro #prev-mov .cx-velo{background:rgba(0,0,0,.34)!important}
#prev-mov .pv-cab .ico-t{flex:0 0 auto}
#prev-mov .pv-nt{margin:9px 0 2px;font:400 14px/1.4 var(--f);color:var(--fg);white-space:normal;word-break:break-word}
/* la ficha de un movimiento */
.fi-hero .ico-t.tile-cta{margin:0}
:is(#ficha,.tj-grande) .fi-desc{margin:0;padding:12px 16px;font:400 16px/1.45 var(--f);color:var(--fg);white-space:normal;word-break:break-word}
:is(#ficha,.tj-grande) [data-fimv] .chev-plan,:is(#ficha,.tj-grande) .fi-fpf .chev-plan{width:14px;height:14px;flex:0 0 auto;color:var(--dim2);opacity:.7}
:is(#ficha,.tj-grande) .fi-sd .r-lab,:is(#ficha,.tj-grande) .fi-sd .r-val{color:var(--dim2)}
:is(#ficha,.tj-grande) [data-fimv^="lug:"],:is(#ficha,.tj-grande) [data-fimv^="tag:"]{cursor:pointer}
:is(#ficha,.tj-grande) [data-fimv] .r-val{display:flex;align-items:center;gap:6px}
/* la línea con el chip, los @ y los # (como en la fila) y lo que falta detallar */
#prev-mov .pv-ctx{margin-top:6px;font:400 14px/1.6 var(--f);color:var(--dim2)}
/* los productos como las filas de Ajustes: el nombre en negro y el precio en gris */
#prev-mov .pv-i > span{color:var(--fg)}
#prev-mov .pv-i > b{color:var(--dim2);font-weight:400}
#prev-mov .pv-sd span,#prev-mov .pv-sd b{color:var(--dim2);font-weight:400}
#prev-mov .pv-l + .pv-l{border-top:none;margin-top:4px}
.etiq{color:rgb(var(--ac2));font-weight:600}
#prev-mov .menu-op{position:relative}
#prev-mov .mi-fecha{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none}
/* la fila entera se toca */
#gastosBody .mv{cursor:pointer;-webkit-tap-highlight-color:transparent}
#gastosBody .mv:active{background-color:rgba(var(--ac),.07)}
/* compras de este mes que se pagan en un resumen posterior: en la ficha de la tarjeta, en gris */
:is(#ficha,.tj-grande) .fi-dif .ico-t,:is(#ficha,.tj-grande) .fi-dif .fi-cn b,:is(#ficha,.tj-grande) .fi-dif .fi-ca{opacity:.55}
:is(#ficha,.tj-grande) .fi-dif .fi-ca{color:var(--dim2)}
#prev-cta .pv-dif .pv-sub{padding:8px 0 0;font:500 12.5px var(--f);color:var(--dim2)}
#prev-cta .pv-dif .pv-i span,#prev-cta .pv-dif .pv-i b{color:var(--dim2)}
/* la nota de cada compra en la ficha de la tarjeta */
/* Resumen: etiquetas */
/* el mismo bloque sólido que los movimientos de Billetera: fondo, esquinas y recorte en un solo lugar */
#etiquetasRes .et-card{padding:0;background:var(--solido);border-radius:var(--rG);overflow:hidden}
#etiquetasRes .et-r{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 14px 0 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative}
#etiquetasRes .et-r + .et-r::before{content:"";position:absolute;left:56px;right:16px;top:0;height:.5px;background:var(--sep-lista,rgba(255,255,255,.1))}
#etiquetasRes .et-r:active{background-color:rgba(var(--ac),.07)}
#etiquetasRes .et-i{flex:0 0 28px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgb(var(--ac));color:#fff}
#etiquetasRes .et-i svg{width:17px;height:17px}
#etiquetasRes .et-n{flex:1 1 auto;min-width:0;font:500 16px var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#etiquetasRes .et-n::before{content:"#";color:var(--dim2);margin-right:1px}
#etiquetasRes .et-p{flex:0 0 auto;font:400 13px var(--f);color:var(--dim2)}
#etiquetasRes .et-v{flex:0 0 auto;font:400 16px var(--f);color:var(--dim2);font-variant-numeric:tabular-nums}
#etiquetasRes .et-v.c-dim{color:var(--dim2)}
#etiquetasRes .et-ch{flex:0 0 auto;width:14px;height:14px;color:var(--dim2)}
#etiquetasRes .et-vacio{margin:0;padding:12px 16px;font:400 14px/1.45 var(--f);color:var(--dim2)}
/* ══════════ Destacados nuevos ══════════ */
#destCard .dest-t b.c-r{color:var(--red)}
#destCard [data-dest]{cursor:pointer}
/* el ritmo ya está en Destacados: sale del KPI */
/* Destacados: dos a la vista y "Ver más" que despliega ahí mismo */
/* Destacados como carrusel: lo que vence arriba, en su tarjeta; debajo, tarjetas que se deslizan de costado */
#destCard.dest-carrusel{background:none;border:none;box-shadow:none;padding:0;border-radius:0;overflow:visible}
#destCard .dest-urg{background:var(--solido);border-radius:var(--rG,18px);padding:12px 14px;margin-top:12px}
/* arriba de Resumen, sin título: a la misma distancia del número que la cinta de Billetera */
/* las secciones sin título (Destacados, En qué se fue) no se pliegan: si quedó guardada como cerrada, igual se ven */
#v-salud .sec.sin-tit.cerrada .sec-b{grid-template-rows:1fr;opacity:1;visibility:visible;pointer-events:auto}
#destacados{margin-top:8px}
.dest-car{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px;border-radius:var(--rG,18px);overscroll-behavior-x:contain}
.dest-car::-webkit-scrollbar{display:none}
.dc{flex:0 0 72%;scroll-snap-align:start;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:2px;align-content:start;
  box-sizing:border-box;padding:14px 16px;border-radius:var(--rG,18px);background:var(--solido)}
/* el dato grande a la derecha de la loseta; de qué es y el contexto, debajo de los dos */
.dc .ico-t{grid-column:1;grid-row:1;align-self:center;width:28px;height:28px}
.dc-k{grid-column:2;grid-row:1;align-self:center;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-t,.dc-s{grid-column:1/-1}
.dc-t{margin-top:6px!important}
.dc-x{grid-column:2;grid-row:1/3}
.dc-k{font:700 26px/1.05 ui-rounded,'SF Pro Rounded',var(--f);letter-spacing:-.02em;color:var(--fg)}
.dc-t{font:600 15px/1.25 var(--f);color:var(--fg);margin-top:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-s{font:400 13px/1.3 var(--f);color:var(--dim2)}
.dc-x{margin:0;font-size:14.5px;line-height:1.38;color:var(--dim2)}
.dc{position:relative}
/* "Cómo venís" se retiró: lo importante avisa en Destacados */
#v-salud .sec.sec-retirada{display:none!important}
.dc-cerrar{position:absolute;top:8px;right:8px;width:24px;height:24px;padding:0;border:none;border-radius:12px;background:var(--soft,rgba(128,128,138,.12));
  color:var(--dim2);display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dc-cerrar svg{width:11px;height:11px}
.dc-k{padding-right:22px}
.dest-veroc{display:block;margin:8px auto 0;padding:4px 10px;border:none;background:none;font:400 13px var(--f);color:rgb(var(--ac));cursor:pointer;-webkit-tap-highlight-color:transparent}
.dest-pts{display:flex;justify-content:center;gap:6px;margin-top:10px}
.dest-pts i{width:6px;height:6px;border-radius:3px;background:var(--dim2);opacity:.3;transition:opacity .2s,width .2s}
.dest-pts i.on{opacity:.8;width:14px}
#destCard .dest-f.dest-oc{display:none}
#destCard.abierto .dest-f.dest-oc{display:flex}
#destCard.cerrando .dest-f.dest-oc{opacity:0;transition:opacity .2s ease}
#destCard .dest-f.dest-in{animation:destIn .42s cubic-bezier(.32,.72,0,1) both}
@keyframes destIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#destCard .dest-mas{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin:0;padding:13px 2px 13px 42px;
  border:0;background:none;position:relative;font:400 15px var(--f);color:var(--blue);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
#destCard .dest-mas::before{content:"";position:absolute;left:42px;right:-14px;top:0;height:.5px;background:rgba(255,255,255,.16)}
html.claro #destCard .dest-mas::before{background:rgba(0,0,0,.094)}
#destCard .dest-mas:active{opacity:.5}
#destCard .dest-mas-ch{width:15px;height:15px;flex:0 0 auto;transition:transform .42s cubic-bezier(.32,.72,0,1)}
#destCard.abierto:not(.cerrando) .dest-mas-ch{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){#destCard .dest-f.dest-in{animation:none}#destCard .dest-mas-ch{transition:none}}
/* sobre el azul van en blanco: el ✓ de los fijos pagados (en claro tomaba la tinta oscura) y "1 filtro" */
/* con .claro/.oscuro en el selector la hoja automática no la copia a tinta oscura */
.catbar .filt-btn.on .filt-t,html.claro .catbar .filt-btn.on .filt-t{color:#fff}
/* ══════════ Billetera: fijos como en Créditos, pagados plegados, importes en K ══════════ */
#gastosBody .mv-fijo .mv-amt,#gastosBody .mv-finn .mv-amt{min-width:0}
#gastosBody .mv-finn:not(.mv-fijopago) .mv-amt{opacity:1}
#gastosBody .mv-fijo.mv-fijopago .mv-amt{color:var(--dim2)}
#gastosBody .mv-finn.mv-fijopago .mv-amt{color:var(--grn)}
/* en los fijos de Billetera, igual: el importe y debajo Pagar o Cobrar */
#gastosBody .mv:has(> .bfijo){display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:10px;row-gap:0}
#gastosBody .mv:has(> .bfijo)>*{grid-row:1/3}
#gastosBody .mv:has(> .bfijo)>.mv-amt{grid-column:3;grid-row:1;align-self:end}
#gastosBody .mv:has(> .bfijo)>.bfijo{grid-column:3;grid-row:2;justify-self:end;align-self:start}
/* la pastilla, al pagar, pasa a "✓ Pagado" en rojo (lo que sale) o "✓ Cobrado" en verde: en Billetera al tocarla, en
   Cuentas en su lugar (ver pagadoEnFila en cuentas.js) */
.bfila.pl-yendo{display:inline-flex;align-items:center;color:var(--red);background:color-mix(in srgb,var(--red) 15%,transparent);pointer-events:none;gap:4px}
html .mv-in .bfila.pl-yendo{color:var(--grn);background:color-mix(in srgb,var(--grn) 15%,transparent)}
.bfila.pl-hecho{animation:pastillaPagada .5s cubic-bezier(.3,1.3,.4,1)}
.bfila.pl-hecho.sale{opacity:0;scale:.9;transition:opacity .28s ease,scale .28s ease}
@keyframes pastillaPagada{0%{opacity:0;scale:.8}60%{opacity:1;scale:1.12}100%{scale:1}}
.bfila.pl-yendo .chk-fijo{margin:0;vertical-align:0;width:14px;height:14px;color:inherit}
#gastosBody .mv-meta .chk-fijo{flex:0 0 auto}
#gastosBody .mv.pl-sale{opacity:0;padding-top:0!important;padding-bottom:0!important;overflow:hidden;
  transition:height .32s cubic-bezier(.32,.72,0,1),padding .32s cubic-bezier(.32,.72,0,1),opacity .22s ease}
#gastosBody .mv-in2:not(.pl-abierto)>.mv.pl-oc{display:none}
#gastosBody .mv-in2.pl-cerrando>.mv.pl-oc{opacity:0;transition:opacity .2s ease}
#gastosBody .mv.pl-in{animation:plIn .42s cubic-bezier(.32,.72,0,1) both}
@keyframes plIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#gastosBody .pl-mas{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin:0;padding:13px 18px 13px 56px;
  border:0;background:none;position:relative;font:400 15px var(--f);color:var(--blue);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
#gastosBody .pl-mas::before{content:"";position:absolute;left:56px;right:0;top:0;height:.5px;background:rgba(255,255,255,.1)}
html.claro #gastosBody .pl-mas::before{background:rgba(60,60,67,.16)}
#gastosBody .pl-mas.pl-solo::before{display:none}
#gastosBody .pl-mas:active{opacity:.5}
#gastosBody .pl-mas svg{width:15px;height:15px;flex:0 0 auto;transition:transform .42s cubic-bezier(.32,.72,0,1)}
#gastosBody .mv-in2.pl-abierto:not(.pl-cerrando) .pl-mas svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){#gastosBody .mv.pl-in{animation:none}#gastosBody .pl-mas svg{transition:none}}
/* ══════════ Una sola hoja: Medio de pago ══════════ */
#hmTjBtn.medio-fijo{cursor:default}
#hmTjBtn.medio-fijo:active{background:none}
@keyframes medioIn{from{opacity:0;max-height:0;padding-top:0;padding-bottom:0}to{opacity:1;max-height:64px}}
@keyframes medioOut{from{opacity:1;max-height:64px}to{opacity:0;max-height:0;padding-top:0;padding-bottom:0}}
/* Editar/Listo en dos tiempos: sale lo de la derecha y entra lo otro, deslizándose */
.fila-cta .val-cta,.fila-cta .manija{transition:opacity .15s ease,transform .15s ease}
.fila-cta .bfila{transition:opacity .15s ease,transform .16s cubic-bezier(.3,1.4,.4,1),background .15s ease}
.editar-sale .fila-cta .val-cta,.editar-sale .fila-cta .bfila,.editar-sale .fila-cta .manija{opacity:0;transform:translateX(14px)}
.editar-vuelve .fila-cta .val-cta,.editar-vuelve .fila-cta .bfila{animation:manijaVuelve .34s cubic-bezier(.3,1,.4,1) both}
.editar-vuelve .fila-cta:nth-child(2) .val-cta,.editar-vuelve .fila-cta:nth-child(2) .bfila{animation-delay:.02s}
.editar-vuelve .fila-cta:nth-child(3) .val-cta,.editar-vuelve .fila-cta:nth-child(3) .bfila{animation-delay:.04s}
.editar-vuelve .fila-cta:nth-child(n+4) .val-cta,.editar-vuelve .fila-cta:nth-child(n+4) .bfila{animation-delay:.06s}
@keyframes manijaVuelve{from{opacity:0;transform:translateX(14px)}}
.editando .fila-cta .manija{display:flex;animation:manijaIn .32s cubic-bezier(.3,1,.4,1) both}
.editando .fila-cta:nth-child(2) .manija{animation-delay:.02s}
.editando .fila-cta:nth-child(3) .manija{animation-delay:.04s}
.editando .fila-cta:nth-child(n+4) .manija{animation-delay:.06s}
.tjr-add,.prr-add{transition:opacity .25s ease}
@media (prefers-reduced-motion:reduce){.fila-cta .val-cta,.fila-cta .manija,.fila-cta .bfila{transition:none}.editar-vuelve .fila-cta .val-cta,.editar-vuelve .fila-cta .bfila,.editando .fila-cta .manija{animation:none}}
/* ══════════ Las cintas (Día/Semana/Mes, Este mes/Promedio) con los colores del dock: lente neutra, el resto con la tinta
   del modo y lo elegido en el acento. La de quincenas sigue coloreada, pero también con los inactivos en la tinta.
   Con .claro/.oscuro en el selector la hoja automática no las copia ══════════ */
html.oscuro .cinta:not(.qseg):not(.arrastrando) .ps-ind,html:not(.claro) .cinta:not(.qseg):not(.arrastrando) .ps-ind{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -.5px 0 rgba(255,255,255,.06)!important}
html.claro .cinta:not(.qseg):not(.arrastrando) .ps-ind{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -.5px 0 rgba(255,255,255,.06)!important}
html.claro .cinta .cinta-capa-b{color:rgb(var(--tinta))}
html.oscuro .cinta .cinta-capa-b{color:rgb(var(--blanco-tema))}
html.claro .cinta:not(.qseg) .cinta-capa-t,html.oscuro .cinta:not(.qseg) .cinta-capa-t,html:not(.claro) .cinta:not(.qseg) .cinta-capa-t{color:rgb(var(--ac))}
/* ══════════ el tope de Gasto diario: texto en el acento en la cabecera, como "Editar" en Créditos ══════════ */
.sal-h #btnTope,#btnTope{height:34px;margin:0;padding:0 2px 0 8px;border:none!important;border-radius:17px;background:none!important;box-shadow:none!important;
  -webkit-backdrop-filter:none;backdrop-filter:none;color:rgb(var(--ac2))!important;font:400 17px var(--f);letter-spacing:-.02em;gap:0}
#btnTope #topeTxt{color:inherit!important;font:inherit}
#btnTope svg{display:none}
#btnTope:active{opacity:.5;transform:none}
/* en la vista previa de la tarjeta, cada compra que se paga después en tres renglones: cuándo, qué fue con su importe
   y la nota a todo lo ancho; si arriba ya dice "1 compra para noviembre", sin el subtítulo */
#prev-cta .pv-dif .pv-c{padding-top:8px}
#prev-cta .pv-dif .pv-c+.pv-c{margin-top:2px}
#prev-cta .pv-dif .pv-cu{font:500 12.5px/1.35 var(--f);color:var(--dim2)}
#prev-cta .pv-dif:not(.pv-dicho) .pv-cu{font-weight:400}
#prev-cta .pv-dif .pv-c .pv-i{padding-top:1px}
#prev-cta .pv-dif .pv-c .pv-i span{color:var(--fg)}
#prev-cta .pv-dif .pv-nt{font:400 12.5px/1.35 var(--f);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* al arrastrar, la lente de las cintas igual que la del dock: vidrio claro sin filtro (el saturate la teñía con el acento) */
.cinta.arrastrando .ps-ind,html.oscuro .cinta.arrastrando .ps-ind{background:rgba(255,255,255,.1)!important;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.12),0 0 0 .5px rgba(255,255,255,.25),0 8px 22px rgba(0,0,0,.25)!important}
/* ══════════ Reorganizar Créditos y Resumen ══════════ */
.oculto-reorg{display:none!important}
.reorg-pie{display:flex;justify-content:center;padding:22px 0 8px}
.reorg-pie-b{height:40px;margin:0;padding:0 20px;border:0;border-radius:20px;background:rgba(var(--ac),.16);color:rgb(var(--ac2));
  font:600 15px var(--f);letter-spacing:-.01em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .16s cubic-bezier(.3,1.4,.4,1),background .15s ease}
.reorg-pie-b:active{transform:scale(.95);background:rgba(var(--ac),.26)}
.reorg-fila{display:flex;align-items:center;gap:12px;min-height:54px;padding:0 14px 0 6px;position:relative;background:inherit;touch-action:pan-y}
.reorg-fila .ico-t{flex:0 0 auto;width:30px;height:30px}
.reorg-fila .ico-t svg{width:18px;height:18px}
.reorg-manija{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:36px;height:44px;color:var(--dim2);touch-action:none;cursor:grab}
.reorg-manija svg{width:20px;height:20px}
.reorg-nom{flex:1 1 auto;min-width:0;font:400 17px var(--f);letter-spacing:-.01em;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reorg-fila.apagado .reorg-nom,.reorg-fila.apagado .ico-t{opacity:.45}
.reorg-sw{flex:0 0 auto}
.reorg-ordenando .reorg-fila{transition:transform .22s cubic-bezier(.3,1,.4,1)}
.reorg-ordenando .reorg-fila.reorg-alzado{z-index:3;transition:box-shadow .2s ease;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.28);background:var(--solido,#1e1d24)}
html.claro .reorg-ordenando .reorg-fila.reorg-alzado{background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.14)}
.reorg-ordenando .reorg-fila.reorg-alzado .reorg-manija{cursor:grabbing;color:var(--fg)}
.reorg-ordenando .reorg-fila.reorg-cae{transition:transform .22s cubic-bezier(.3,1,.4,1),box-shadow .22s ease;box-shadow:none}
.reorg-cab{padding-top:6px;padding-bottom:4px}
/* ══════════ Cuentas: el Banco arriba de las prepagas, la suma de todas y "Contar en lo disponible" ══════════ */
#ppList .tjr.banco-fila{display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:12px;align-items:center;min-height:64px;padding:12px 16px;
  cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#ppList .tjr.banco-fila>*{grid-row:1}
#ppList .tjr.banco-fila:active{background:rgba(255,255,255,.06)}
#ppList .banco-fila .tjr-nom{flex:none;margin:0;padding:0;font:500 16px/1.45 var(--f);letter-spacing:-.01em;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gastosBody .mv-cuenta .cta71{font-weight:500}
:is(#ficha,.tj-grande) .r-disp{justify-content:space-between;cursor:default}
:is(#ficha,.tj-grande) .r-disp .r-lab{color:var(--fg)}
/* ══════════ Sueldo a cobrar: "Por cobrar" arriba, el saldo del mes pasado también en negativo ══════════ */
#hgBase.oculto-cobrar{display:none!important}
#gastosBody .mv-neg .mv-amt{color:#ff9f0a}
#gastosBody .mv.brilla{animation:brilla 1.3s ease}
@keyframes brilla{0%,100%{background-color:transparent}25%,60%{background-color:rgba(48,209,88,.16)}}
/* ══════════ Tarjetas con "Este mes pago", sin el selector de créditos ══════════ */
:is(#ficha,.tj-grande) .fi-plan{cursor:pointer}
:is(#ficha,.tj-grande) .fi-plan .r-val{color:var(--fg)}
:is(#ficha,.tj-grande) .fi-plan .chev-plan{width:14px;height:14px;flex:0 0 auto;color:var(--dim2);opacity:.7}
:is(#ficha,.tj-grande) .fi-ajuste[data-fa]{cursor:pointer}
.hero2 .k-top.vacia-cobrar{display:none}
/* ══════════ La nota como lista: @lugar, (comentarios), medios, barra arriba del teclado ══════════ */
#hmCuenta:has(.lista-n){padding:0;background:none}
.lista-n{margin:8px 0 0;border-radius:18px;background:rgba(255,255,255,.06);padding:4px 0;overflow:hidden}
.lista-n-r{padding:8px 16px;position:relative}
.lista-n-r+.lista-n-r::before,.lista-n-pie::before{content:"";position:absolute;left:16px;right:0;top:0;height:.5px;background:var(--sep-hj,rgba(255,255,255,.14))}
.lista-n-l{display:flex;align-items:baseline;gap:10px}
.lista-n-n{flex:1 1 auto;min-width:0;font:400 15px/1.35 var(--f);letter-spacing:-.01em;color:var(--fg)}
.lista-n-c{font-style:normal;color:var(--dim2)}
.lista-n-p{flex:0 0 auto;font:600 15px var(--f);letter-spacing:-.01em;color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap;display:flex;align-items:center;gap:8px}
.lista-n-p.lista-n-ded{font-weight:400;color:var(--dim2)}
.lista-n-p.lista-n-sin{font-weight:400;color:var(--dim2)}
.lista-n-cmp{margin-top:2px;font:400 13px/1.35 var(--f);color:var(--dim2)}
.lista-n-cmp.c-o{color:#ff9f0a}
.lista-n-cmp.c-g{color:#30d158}
.lista-n-pie{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;padding:9px 16px 8px;font:400 13px/1.35 var(--f);color:var(--dim2)}
.lista-n-pi{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.lista-n-cu{display:flex;align-items:center;gap:8px;margin-left:auto}
.lista-n-cu b{color:var(--fg);font-weight:600}
.lugar-ref{color:#bf5af2;font-weight:500}
/* el pin del lugar y la etiqueta, en lugar del @ y el #: del tamaño de la letra, en su color */
.ico-inl{display:inline-block;width:.92em;height:.92em;margin-right:.15em;vertical-align:middle;position:relative;top:0}
.ico-inl svg{width:100%;height:100%;display:block}
.c-cta{color:var(--dim2)}
/* la nota: los resaltados van detrás del texto */
.espejo-nota{position:absolute;z-index:0;margin:0;overflow:hidden;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;color:transparent;pointer-events:none;border-style:solid;border-color:transparent}
.espejo-nota mark{color:transparent;border-radius:6px;padding:0;margin:0}
.espejo-nota .marca-l{background:rgba(191,90,242,.26);box-shadow:0 0 0 2px rgba(191,90,242,.26)}
.espejo-nota .marca-t{background:rgba(255,55,95,.22);box-shadow:0 0 0 2px rgba(255,55,95,.22)}
.espejo-nota .marca-c{background:rgba(142,142,147,.22);box-shadow:0 0 0 2px rgba(142,142,147,.22)}
textarea.ta-espejo{position:relative;z-index:1;background:transparent!important}
/* la barra */
.barra-sug{display:none;align-items:center;gap:8px;margin:8px 0 0;min-height:36px}
.barra-sug.on{display:flex}
.bs-sug{flex:1 1 auto;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bs-sug::-webkit-scrollbar{display:none}
.bss{flex:0 0 auto;height:34px;padding:0 12px;border:none;border-radius:11px;background:rgba(var(--ac),.2);color:rgb(var(--ac2));font:500 15px var(--f);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bss.bsp{background:rgba(255,255,255,.1);color:var(--fg);font-weight:400}
.bss.bsp b{font-weight:600}
.bss.bsp i{font-style:normal;color:var(--dim2)}
.bss:active{transform:scale(.95)}
/* ══════════ Día de cobro ══════════ */
#gastosBody .mv-cobro{color:var(--dim2)}
#gastosBody .mv-cobro.hoy{color:#30d158;font-weight:600}
/* ══════════ Arranque sin destello: el fondo viejo (Aurora) ya no se pinta mientras carga ══════════ */
html:not(.claro){background:#000}
body::before,body::after{background:none}
/* ══════════ Nota libre y lista de productos como en Contactos; hojas sin tocar la barra de estado ══════════ */
#hmCuenta{display:none}
.producto{margin:12px 0 0}
.producto-g{padding:0;overflow:hidden}
.producto-r{position:relative;display:flex;align-items:center;gap:8px;min-height:48px;padding:0 16px 0 12px}
.producto-r+.producto-x+.producto-r::before,.producto-add::before{content:"";position:absolute;left:48px;right:16px;top:0;height:.5px;background:var(--sep-hj,rgba(255,255,255,.14))}
.producto-del{flex:0 0 auto;width:26px;height:26px;padding:0;border:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.producto-del svg{width:22px;height:22px;display:block}
/* la etiqueta, en la línea chica de abajo: "#fiambre" en el acento; sin etiqueta, mientras se edita el renglón, una
   pastilla gris "# etiqueta" para ponerle una */
.producto-tag{flex:0 0 auto;display:inline-flex;align-items:center;max-width:140px;height:24px;padding:0 9px;border:none;border-radius:12px;
  background:rgba(120,120,128,.16);color:var(--dim2);font:500 13px var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;-webkit-tap-highlight-color:transparent}
.producto-tag.on{height:auto;padding:0;border-radius:0;background:none;color:rgb(var(--ac2));font-weight:400}
.producto-tgi{flex:0 0 120px;width:120px;height:24px;padding:0;border:none;background:none;color:rgb(var(--ac2));font:400 13px var(--f);outline:none}
.producto-n{flex:1 1 auto;min-width:0;height:44px;border:none;background:none;color:var(--fg);font:400 16px var(--f);letter-spacing:-.01em;outline:none}
.producto-p{flex:0 0 86px;width:86px;height:44px;border:none;background:none;color:var(--fg);font:600 16px var(--f);text-align:right;font-variant-numeric:tabular-nums;outline:none}
.producto-n::placeholder,.producto-p::placeholder,.producto-tgi::placeholder{color:var(--dim);font-weight:400}
.producto-x:empty{display:none}
.producto-x{padding:0 16px 8px 48px;margin-top:-6px}
.producto-l2{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
.producto-l2 .producto-cmp{min-width:0;overflow:hidden;text-overflow:ellipsis}
.producto-sug{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px}
.producto-sug::-webkit-scrollbar{display:none}
.producto-cmp{font:400 13px/1.35 var(--f);color:var(--dim2)}
.producto-cmp.c-o{color:#ff9f0a}
.producto-cmp.c-g{color:#30d158}
.producto-add{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 16px 0 14px;border:none;background:none;color:var(--fg);font:400 16px var(--f);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.producto-add svg{width:22px;height:22px;flex:0 0 auto}
.producto-g>.producto-add:first-child::before{display:none}
.producto-pie{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:8px 16px 0;font:400 13px/1.35 var(--f);color:var(--dim2)}
.producto-pie b{color:var(--fg);font-weight:inherit}
/* las hojas no suben hasta la barra de estado (el desenfoque de Safari las tapaba) */
.modal-box.hm.hj,.catnuevo.editor{max-height:calc(100dvh - max(40px, env(safe-area-inset-top) + 14px))}

/* aviso de vencimientos, arriba, como una notificación */
#vencen.on{transform:none;opacity:1}
html:not(.claro) #vencen{background:rgba(40,40,46,.93);border:.5px solid rgba(255,255,255,.12);box-shadow:0 10px 34px rgba(0,0,0,.45);color:#fff}
html.claro #vencen{background:rgba(var(--vidrio-tema),.94);border:.5px solid rgba(255,255,255,.8);box-shadow:0 10px 30px rgba(0,0,0,.14);color:#000}
.vencen-i{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#ff9f0a;color:#fff;margin-top:1px}
#vencen.r .vencen-i{background:#ff453a}
.vencen-i svg{width:20px;height:20px}
.vencen-t{flex:1;min-width:0;font:400 14.5px/1.3 var(--f)}
.vencen-h{font-weight:650;font-size:15px;margin-bottom:2px}
.vencen-l{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.vencen-n{overflow:hidden;text-overflow:ellipsis;min-width:0}
.vencen-c{flex:none;opacity:.6;font-size:13px}
.vencen-c.r{opacity:1;color:#ff453a}
html.claro .vencen-c.r{color:#d70015}
.vencen-l b{flex:none;margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}
.vencen-mas{opacity:.6;font-size:13px}
.vencen-x{flex:none;width:26px;height:26px;margin:-2px -2px 0 2px;border:none;border-radius:50%;padding:0;display:grid;place-items:center;
  background:rgba(127,127,127,.18);color:inherit;opacity:.75;cursor:pointer}
.vencen-x svg{width:13px;height:13px}
.brilla-vence{animation:brilla-vence 1.4s ease}
@keyframes brilla-vence{0%,100%{background-color:transparent}25%,60%{background-color:rgba(255,159,10,.2)}}

/* Resumen sin ningún dato: una tarjeta que explica qué va a aparecer, en lugar de márgenes y rachas en cero */
.res-vacio{display:none}
#v-salud.vacio-res > *{display:none}
#v-salud.vacio-res > .res-vacio{display:block;margin-top:6px}
/* sin datos, el osito (importar, exportar, apariencia) y la firma siguen al pie: sin ellos no había cómo importar */
#v-salud.vacio-res > .iobar{display:flex}
#v-salud.vacio-res > .firma{display:block}
.res-vacio .card{padding:18px 18px 17px}
.res-vacio .rv-t{margin:0 0 6px;font:600 17px/1.3 var(--f);color:var(--fg)}
.res-vacio .rv-x{margin:0;font:400 15px/1.45 var(--f);color:var(--dim2)}
.res-vacio .rv-x b{color:var(--fg);font-weight:600}

/* ══════════ Dock de vidrio líquido (como la barra de iOS 26) ══════════
   Vidrio como el de la barra de Música de iOS 26: gris claro y casi sin desenfoque, así lo de atrás pasa con su
   color. Un borde fino de luz, más fuerte arriba a la izquierda (::before, recortado con una máscara al borde), y en
   el canto una franja con más desenfoque y más luz que da el grosor del vidrio (.dock-canto). La deformación de los
   bordes del vidrio real (la lupa) no se puede hacer en Safari. */
.vtabs::before,.fab::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:.6px;pointer-events:none;z-index:3;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html.oscuro .vtabs,html.oscuro .fab{
  background-color:rgba(128,128,128,.25)!important;background-image:none;
  -webkit-backdrop-filter:blur(2px) saturate(150%) brightness(.92);backdrop-filter:blur(2px) saturate(150%) brightness(.92);
  box-shadow:inset 0 0 1.5px rgba(255,255,255,.22),inset 0 0 14px rgba(255,255,255,.07),0 10px 26px rgba(0,0,0,.36),0 1px 3px rgba(0,0,0,.28)!important}
html.oscuro .vtabs::before,html.oscuro .fab::before{
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.32) 30%,rgba(255,255,255,.2) 62%,rgba(255,255,255,.38))}
html.claro .vtabs,html.claro .fab{
  background-color:rgba(255,255,255,.38)!important;background-image:none;
  -webkit-backdrop-filter:blur(2px) saturate(150%) brightness(1);backdrop-filter:blur(2px) saturate(150%) brightness(1);
  box-shadow:inset 0 0 1.5px rgba(255,255,255,.7),inset 0 0 14px rgba(255,255,255,.35),0 0 0 .5px rgba(0,0,0,.07),0 10px 26px rgba(0,0,0,.12)!important}
html.claro .vtabs::before,html.claro .fab::before{
  background:linear-gradient(135deg,#fff,rgba(255,255,255,.85) 30%,rgba(255,255,255,.7) 60%,rgba(255,255,255,.9))}
/* la barra, con el mismo reflejo que el (+) (el borde de luz y el brillo fino del canto) y el canto un poco más suave:
   en una barra larga, el canto entero se veía como un borde blanco grueso */
html.claro .dock .vtabs{box-shadow:inset 0 0 1.5px rgba(255,255,255,.7),inset 0 0 14px rgba(255,255,255,.22),0 0 0 .5px rgba(0,0,0,.07),0 10px 26px rgba(0,0,0,.12)!important}
html.oscuro .dock .vtabs{box-shadow:inset 0 0 1.5px rgba(255,255,255,.22),inset 0 0 14px rgba(255,255,255,.06),0 10px 26px rgba(0,0,0,.36),0 1px 3px rgba(0,0,0,.28)!important}
html.claro .vtabs .dock-canto{-webkit-backdrop-filter:blur(5px) saturate(155%) brightness(1.12);backdrop-filter:blur(5px) saturate(155%) brightness(1.12)}
html.oscuro .vtabs .dock-canto{-webkit-backdrop-filter:blur(5px) saturate(165%) brightness(1.17);backdrop-filter:blur(5px) saturate(165%) brightness(1.17)}
/* la burbuja de la pestaña elegida: una pastilla más oscura que la barra y con más color, con un borde apenas
   claro (como en Música de Apple) */
html.oscuro .vind{background-color:rgba(0,0,0,.3)!important;background-image:none;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08),inset 0 -1.5px 3px -1px rgba(255,255,255,.12)!important}
html.claro .vind{background-color:rgba(0,0,0,.07)!important;background-image:none;
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.03),inset 0 -1.5px 3px -1px rgba(255,255,255,.6)!important}
/* al mantener apretado, al arrastrar y mientras viaja tras un toque se vuelve una lente de vidrio transparente, más
   grande que la barra: casi sin tinte, con brillo arriba y abajo, y agranda el ícono que tiene debajo */
html.oscuro .vtabs.arrastrando .vind,html.oscuro .vtabs.viajando .vind{background-color:rgba(255,255,255,.04)!important;
  box-shadow:inset 0 1.5px 1px -.5px rgba(255,255,255,.75),inset 0 -1.5px 1px -.5px rgba(255,255,255,.4),inset 0 0 0 .5px rgba(255,255,255,.3),
    inset 0 0 12px rgba(255,255,255,.08)!important}
html.claro .vtabs.arrastrando .vind,html.claro .vtabs.viajando .vind{background-color:rgba(255,255,255,.2)!important;
  box-shadow:inset 0 1.5px 1px -.5px #fff,inset 0 -1.5px 1px -.5px rgba(255,255,255,.9),inset 0 0 0 .5px rgba(255,255,255,.9),
    inset 0 0 12px rgba(255,255,255,.45),0 0 0 .5px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.08)!important}
.vtc{transition:scale .3s cubic-bezier(.3,1.4,.4,1)}
.vtabs.arrastrando .dock-capa-t .vtc,.vtabs.viajando .dock-capa-t .vtc{scale:1.1}
/* mientras viaja después de un toque, un poco más chica que al arrastrar */
.vtabs.viajando .vind{scale:1.1 1.16}
/* el dock entero se agranda (un 3,5 %) y se ilumina mientras se lo aprieta y mientras la lente viaja tras un toque,
   como en Música: crece enseguida, con un rebote chico, y vuelve despacio. La luz aclara lo que se ve a través del
   vidrio, más fuerte alrededor del dedo (.vtabs::after, en --lx) */
.vtabs.apretado,.vtabs.viajando{transition:height .42s cubic-bezier(.3,1.1,.4,1),gap .4s cubic-bezier(.3,1.1,.4,1),
  scale .3s cubic-bezier(.3,1.5,.45,1),background-color .2s ease}
html.oscuro .vtabs.apretado,html.oscuro .vtabs.viajando{background-color:rgba(140,140,140,.28)!important}
html.claro .vtabs.apretado,html.claro .vtabs.viajando{background-color:rgba(255,255,255,.45)!important}
.vtabs.apretado .dock-vidrio,.vtabs.viajando .dock-vidrio{transition:-webkit-backdrop-filter .15s ease,backdrop-filter .15s ease;
  -webkit-backdrop-filter:blur(2px) saturate(170%) brightness(1.12);backdrop-filter:blur(2px) saturate(170%) brightness(1.12)}
html.oscuro .vtabs.apretado:not(.arrastrando) .vind{background-color:rgba(255,255,255,.1)!important}
html.claro .vtabs.apretado:not(.arrastrando) .vind{background-color:rgba(255,255,255,.5)!important}
/* el agrandado y el brillo del dock entran y salen suave, como una respiración (no de golpe) */
.vtabs.apretado,.vtabs.viajando{scale:1.035}
/* proporciones de la barra de iOS 26: un poco más alta, la burbuja casi del alto entero y los íconos más grandes */
.vtabs{transition:height .42s cubic-bezier(.3,1.1,.4,1),gap .4s cubic-bezier(.3,1.1,.4,1),
  scale .55s cubic-bezier(.22,.9,.28,1.02),background-color .5s cubic-bezier(.25,.8,.3,1);padding:3px}
.dock-capa{padding:3px}
.vind{transition:translate .5s cubic-bezier(.25,1.25,.4,1),scale .3s cubic-bezier(.3,1.4,.4,1),background-color .25s ease,box-shadow .25s ease;top:3px;bottom:3px;left:3px}
.vtab,.vtc{height:calc(var(--dhC, 61px) - 6px)}
.vtab svg,.vtc svg{width:25px;height:25px}
.vt-n,.vtc .vt-n{font-size:11px}
/* las burbujas se ubican con translate y no con transform: el agrandado (scale) se aplica después de transform y
   agrandaba también el desplazamiento, así que la lupa se corría más cuanto más a la derecha estaba la opción */
/* el dock más cerca del borde de abajo, como la barra de iOS 26 (unos 22 pt sobre el borde en iPhone con barra de
   inicio); en teléfonos sin esa barra queda a 10 px */
.dock{--dhR:48px;--dhC:var(--dh);--capW:var(--dhR);--capGap:8px;--tw:68px;justify-content:flex-start;--dh:61px;bottom:max(10px, calc(env(safe-area-inset-bottom) - 12px))}
/* las cintas se iluminan un poco mientras se las aprieta, suave como el dock */
/* y se agrandan un poco, como el dock, entrando y saliendo suave */
.cinta.apretado{scale:1.028}
html.oscuro .cinta.apretado{filter:brightness(1.18)}
html.claro .cinta.apretado{filter:brightness(1.04)}
/* con el teclado abierto, la hoja no se levanta (dejaba ver la página entre la hoja y el teclado): queda apoyada
   abajo y crece hacia arriba, con su fondo también detrás del teclado, como en iOS */
#hojaMov .modal-box.abajo{margin-bottom:0!important;transform:translateY(105%);
  transition:transform .36s cubic-bezier(.3,1,.4,1),padding-bottom .28s cubic-bezier(.3,1,.4,1)}
#hojaMov.open .modal-box.abajo{transform:translateY(var(--dy-hoja,0px));transition:transform .46s cubic-bezier(.3,1,.4,1),padding-bottom .28s cubic-bezier(.3,1,.4,1)}
.catnuevo.abajo{bottom:0!important;
  transition:transform .36s cubic-bezier(.3,1,.4,1),padding-bottom .28s cubic-bezier(.3,1,.4,1),visibility 0s linear .36s!important}
.catnuevo.abajo.on{visibility:visible;pointer-events:auto;transform:translateY(var(--dy-hoja,0px))!important;transition:transform .46s cubic-bezier(.3,1,.4,1),padding-bottom .28s cubic-bezier(.3,1,.4,1),visibility 0s!important}
/* con el teclado abierto el relleno de abajo (pensado para la barra de inicio) queda detrás del teclado:
   lo de la hoja termina 10 px arriba del teclado, sin espacio vacío */
#hojaMov .modal-box.abajo,.catnuevo.abajo{
  max-height:calc(var(--alto-hoja,calc(100dvh - 40px)) + var(--sube-hoja,0px))!important;
  padding-bottom:max(calc(22px + env(safe-area-inset-bottom)), calc(var(--sube-hoja,0px) + 10px))!important}
/* la cuota de este mes en la ficha del préstamo se toca para cambiarla */
:is(#ficha,.tj-grande) .fi-cuomes{cursor:pointer}
:is(#ficha,.tj-grande) .fi-cuomes .r-val{color:var(--fg)}
:is(#ficha,.tj-grande) .fi-cuomes .chev-plan{width:14px;height:14px;flex:0 0 auto;color:var(--dim2);opacity:.7}
/* los pagos de la tarjeta en la ficha: la fecha se toca para cambiarla y la cruz borra el pago */
:is(#ficha,.tj-grande) .fi-pago,:is(#ficha,.tj-grande) .fi-fpf{position:relative}
:is(#ficha,.tj-grande) .fi-fpf .r-val{display:flex;align-items:center;gap:6px}
:is(#ficha,.tj-grande) .fi-fpf .fi-pf{right:0}
:is(#ficha,.tj-grande) .fi-pago .fi-cn i{color:var(--dim2)}
:is(#ficha,.tj-grande) .fi-pago .fi-ca{margin-left:auto}
:is(#ficha,.tj-grande) .fi-pf{position:absolute;left:0;top:0;bottom:0;right:120px;width:auto;opacity:0;border:0;padding:0;margin:0;-webkit-appearance:none;appearance:none}
:is(#ficha,.tj-grande) .fi-px{flex:0 0 28px;width:28px;height:28px;margin-right:-6px;border-radius:50%;display:grid;place-items:center;color:var(--dim2);background:none;border:0;padding:0}
:is(#ficha,.tj-grande) .fi-px svg{width:15px;height:15px}
/* el (+) se agranda y se ilumina mientras se lo aprieta, suave como el dock (antes se achicaba) */
.fab:active{transform:none}
.fab.abierto:active{transform:rotate(135deg)}
.fab{transition:transform .3s cubic-bezier(.3,1.4,.4,1),opacity .24s ease,translate .42s cubic-bezier(.3,1.1,.4,1),
  width .42s cubic-bezier(.3,1.1,.4,1),height .42s cubic-bezier(.3,1.1,.4,1),margin .42s cubic-bezier(.3,1.1,.4,1),
  scale .55s cubic-bezier(.22,.9,.28,1.02),background-color .5s cubic-bezier(.25,.8,.3,1),-webkit-backdrop-filter .3s ease,backdrop-filter .3s ease}
.fab.apretado{scale:1.08}
html.oscuro .fab.apretado{background-color:rgba(140,140,140,.28)!important}
html.claro .fab.apretado{background-color:rgba(255,255,255,.45)!important}
html .fab.apretado{-webkit-backdrop-filter:blur(2px) saturate(170%) brightness(1.12);backdrop-filter:blur(2px) saturate(170%) brightness(1.12)}
/* la cruz para borrar el campo: solo mientras escribís y hay algo escrito */
.limpiar{display:none;flex:0 0 auto;align-self:center;width:19px;height:19px;margin:0 0 0 6px;padding:0;border:0;border-radius:50%;
  place-items:center;cursor:pointer;background:rgba(235,235,245,.6);color:#1c1c1e;-webkit-tap-highlight-color:transparent}
.limpiar svg{width:11px;height:11px}
html.claro .limpiar{background:rgba(60,60,67,.3);color:#fff}
input:focus:not(:placeholder-shown) + .limpiar{display:inline-grid}
/* arriba, Safari desenfoca lo que queda debajo de la barra de estado: las hojas y los avisos no pasan de ahí */
:root{
  --f:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,'Helvetica Neue',Arial,sans-serif;

  --fg:#f2f4fb;
  --dim2:rgba(235,240,255,.64);
  --dim:rgba(235,240,255,.40);

  --ac:104,139,207; --ac2:161,183,225;
  --blue:rgb(var(--ac)); --blueS:rgba(var(--ac),.16);

  --panel:rgba(255,255,255,.055);
  --soft:rgba(255,255,255,.07);
  --softH:rgba(255,255,255,.12);
  --rim:rgba(255,255,255,.11);
  --rimT:rgba(255,255,255,.30);

  --sh:0 6px 20px rgba(0,0,0,.28);
  --shL:0 18px 46px rgba(0,0,0,.5);
  --rG:26px;
  --rM:16px;
  --rS:12px;
  --rP:999px;--techo:max(64px, calc(env(safe-area-inset-top) + 24px))}
#ficha{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:45;max-width:560px;margin:0 auto;
  max-height:calc(100dvh - 48px);border-radius:38px 38px 0 0;
  background:rgba(34,40,62,.12);border:1px solid rgba(255,255,255,.24);border-bottom:none;
  -webkit-backdrop-filter:saturate(180%) blur(40px);backdrop-filter:saturate(180%) blur(40px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 -18px 50px rgba(0,0,0,.45);
  transform:translateY(105%);visibility:hidden;transition:transform .36s cubic-bezier(.3,1,.4,1),visibility 0s linear .36s;max-height:calc(100dvh - max(48px, env(safe-area-inset-top) + 14px));max-height:calc(100dvh - var(--techo))}
.modal-box.hm.hj,.catnuevo.editor{max-height:calc(100dvh - var(--techo))}
#vencen{position:fixed;z-index:60;left:10px;right:10px;max-width:520px;margin:0 auto;
  display:flex;align-items:flex-start;gap:12px;padding:13px 12px 13px 14px;border-radius:24px;cursor:pointer;
  -webkit-backdrop-filter:blur(26px) saturate(1.8);backdrop-filter:blur(26px) saturate(1.8);
  transform:translateY(calc(-100% - 70px));opacity:0;transition:transform .5s cubic-bezier(.3,1.15,.4,1),opacity .25s ease;-webkit-tap-highlight-color:transparent;top:var(--techo)}
/* al arrastrar la ficha por la barrita, sin animación: si no, persigue al dedo y tiembla */
html.ficha-on #ficha.arrastra{transition:none!important}
/* el ojo, suelto: solo el ícono, sin el botón redondo de vidrio */
html .tg .ojo,html.claro .tg .ojo,html.oscuro .tg .ojo{background:none!important;background-image:none!important;box-shadow:none!important;
  border-color:transparent!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.tg .ojo svg{width:23px;height:23px}
/* el botón de filtro y las cintas, con el mismo vidrio del dock y del (+): gris neutro con el tinte del acento,
   brillo arriba, borde de luz y sombra. La burbuja de las cintas, mate como la del dock */
.mov-head .catbar .filt-btn,.cinta{position:relative}
.mov-head .catbar .filt-btn:not(.on):not(.abierto)::before,.cinta::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html.oscuro .mov-head .catbar .filt-btn:not(.on):not(.abierto),html.oscuro .cinta{
  background-color:rgba(128,128,138,.14)!important;
  background-image:linear-gradient(rgba(var(--ac),.1),rgba(var(--ac),.1)),radial-gradient(130% 120% at 50% -30%,rgba(255,255,255,.1),rgba(255,255,255,0) 60%)!important;
  -webkit-backdrop-filter:blur(2px) saturate(160%)!important;backdrop-filter:blur(2px) saturate(160%)!important}
html.oscuro .mov-head .catbar .filt-btn:not(.on):not(.abierto)::before,html.oscuro .cinta::before{
  background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.1) 16%,rgba(255,255,255,.02) 42%,rgba(255,255,255,.02) 62%,rgba(255,255,255,.2) 86%,rgba(255,255,255,.6))}
html.claro .mov-head .catbar .filt-btn:not(.on):not(.abierto),html.claro .cinta{
  background-color:rgba(255,255,255,.22)!important;
  background-image:linear-gradient(rgba(var(--ac),.07),rgba(var(--ac),.07)),radial-gradient(130% 120% at 50% -30%,rgba(255,255,255,.5),rgba(255,255,255,0) 60%)!important;
  -webkit-backdrop-filter:blur(2px) saturate(170%)!important;backdrop-filter:blur(2px) saturate(170%)!important}
html.claro .mov-head .catbar .filt-btn:not(.on):not(.abierto)::before,html.claro .cinta::before{
  background:linear-gradient(135deg,#fff,rgba(255,255,255,.55) 28%,rgba(0,0,0,.05) 58%,rgba(255,255,255,.4) 80%,rgba(255,255,255,.95))}
html.oscuro .cinta:not(.qseg):not(.arrastrando) .ps-ind,html:not(.claro) .cinta:not(.qseg):not(.arrastrando) .ps-ind{background:rgba(255,255,255,.12)!important;box-shadow:none!important}
html.claro .cinta:not(.qseg):not(.arrastrando) .ps-ind{background:rgba(0,0,0,.07)!important;box-shadow:none!important}
/* la burbuja de las cintas pasa de lente a sólida suave (en claro, el cambio a lente blanca rápido se veía de golpe) */
html .cinta .ps-ind{transition:translate .5s cubic-bezier(.25,1.25,.4,1),scale .3s cubic-bezier(.3,1.4,.4,1),background-color .5s cubic-bezier(.4,0,.2,1),box-shadow .5s cubic-bezier(.4,0,.2,1)}
/* el menú de filtros detrás de "Más filtros": se oscurece, se desenfoca y se achica un poco, como el menú de
   atrás de un submenú en iOS; al cerrar la hoja vuelve */
#catDrop.on{transition-duration:.42s;transition-timing-function:cubic-bezier(.3,1,.4,1)}
#catDrop.on.atras{filter:blur(3px) brightness(.7);scale:.96;pointer-events:none}
/* el submenú de categorías: una tarjeta que se despliega encima del menú, como "Tipos de contenido" en Fotos;
   el resto del menú queda atrás oscurecido y desenfocado. Cerrada no ocupa lugar */
#catDrop .fp-subcats .fp-q{display:inline;margin-left:auto;padding-left:10px;color:var(--dim2);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
#catDrop .fp-subc{position:absolute;z-index:6;left:auto;right:0;width:var(--subw,100%);top:var(--subtop,48px);display:flex;flex-direction:column;
  max-height:0;opacity:0;overflow:hidden;pointer-events:none;border-radius:24px;transform-origin:top center;scale:.97;
  transition:max-height .42s cubic-bezier(.3,1,.4,1),opacity .2s ease,scale .42s cubic-bezier(.3,1,.4,1)}
#catDrop.subon .fp-subc.abierto{max-height:var(--subh,400px);opacity:1;pointer-events:auto;scale:1}
#catDrop .fp-subc .fp-scroll{flex:1 1 auto;min-height:0;max-height:none!important;overflow-y:auto}
#catDrop .fp-subc-h .cdi-n{font-weight:600}
#catDrop .fp-subc-h svg.fp-ch,#catDrop .fp-subc-h .fp-ch{rotate:90deg}
#catDrop > :not(.fp-subc){transition:filter .42s cubic-bezier(.3,1,.4,1),opacity .42s ease,scale .42s cubic-bezier(.3,1,.4,1)}
/* el menú de atrás, apagado pero nítido y un poco más chico (hacia su esquina de arriba a la derecha), como en Fotos.
   Se achican el vidrio y cada renglón, no el menú entero, para no achicar la tarjeta: el centro de cada renglón lo
   pone abrir en nota.js */
#catDrop.subon > :not(.fp-subc){opacity:.4;pointer-events:auto;scale:.965}
#catDrop::before{transform-origin:top right;transition:scale .42s cubic-bezier(.3,1,.4,1)}
#catDrop.subon::before{scale:.965}
#catDrop.on{transition-property:max-height,opacity,transform,filter,scale,height,top}
/* las cintas sin el borde de luz de afuera (el resto del vidrio queda igual) */
html .cinta::before{content:none}
html.oscuro .cinta{box-shadow:inset 0 0 16px rgba(255,255,255,.06),0 10px 26px rgba(0,0,0,.36),0 1px 3px rgba(0,0,0,.28)!important}
html.claro .cinta{box-shadow:inset 0 0 16px rgba(255,255,255,.35),0 10px 26px rgba(0,0,0,.12)!important}
/* el botón de filtro, un poco más grande; al tocarlo se agranda y se ilumina, suave como el dock y el (+) */
.mov-head .catbar .filt-btn.on,.mov-head .catbar .filt-btn.estira{width:auto;padding:0 12px 0 10px;border-radius:999px}
.mov-head .catbar .filt-btn svg{width:22px;height:22px}
.mov-head .catbar .filt-btn:active{transform:none}
.mov-head .catbar .filt-btn{width:40px;height:40px;min-width:40px;padding:0;justify-content:center;border-radius:50%;transition:scale .55s cubic-bezier(.22,.9,.28,1.02),filter .5s cubic-bezier(.25,.8,.3,1),background-color .25s ease}
.mov-head .catbar .filt-btn.apretado{scale:1.1}
html.oscuro .mov-head .catbar .filt-btn.apretado{filter:brightness(1.35)}
html.claro .mov-head .catbar .filt-btn.apretado{filter:brightness(1.06)}
/* el total del período, centrado entre la cinta de arriba y lo de abajo */
#movFila{position:relative;top:6px}
/* las cintas, lisas: un solo color (gris neutro con el tinte del acento), sin brillo, sin resplandor interior y sin sombra */
html.oscuro .cinta{background-image:linear-gradient(rgba(var(--ac),.1),rgba(var(--ac),.1))!important;box-shadow:none!important}
html.claro .cinta{background-image:linear-gradient(rgba(var(--ac),.07),rgba(var(--ac),.07))!important;box-shadow:none!important}
html .cinta{border-color:transparent!important;-webkit-backdrop-filter:none;backdrop-filter:none}
/* la cinta de Movimientos y su botón de filtro (sin filtros puestos), del mismo color que sus tarjetas, en claro y en
   oscuro (las de Resumen quedan con su tinte) */
html .cinta:not(.qseg),html.claro .mov-head .catbar .filt-btn:not(.on):not(.abierto),html.oscuro .mov-head .catbar .filt-btn:not(.on):not(.abierto),
html:not(.claro) .mov-head .catbar .filt-btn:not(.on):not(.abierto){background-color:var(--solido)!important;background-image:none!important}
/* la burbuja de quincenas, sin el borde de vidrio: lisa como las otras */
html .cinta.qseg:not(.arrastrando) .ps-ind{box-shadow:none!important}
/* en la de quincenas, los colores del texto al revés: lo elegido en la tinta del modo y el resto en el acento */
html.claro .cinta.qseg .cinta-capa-b,html.oscuro .cinta.qseg .cinta-capa-b{color:rgb(var(--ac2))!important}
html.claro .cinta.qseg .cinta-capa-t{color:rgb(var(--tinta))}
html.oscuro .cinta.qseg .cinta-capa-t{color:rgb(var(--blanco-tema))}
/* sin el desenfoque de fondo detrás del dock: el dock ya es de vidrio */
.borde-inf{display:none!important}
/* el desenfoque del dock va en una capa propia detrás del contenido (.dock-vidrio, un elemento de verdad: en un
   ::after no desenfoca) y no en el dock: en Safari, un desenfoque adentro de otro solo ve a su contenedor, y así la
   burbuja de lo elegido desenfoca la página de verdad */
html .vtabs,html.oscuro .vtabs,html.claro .vtabs{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;isolation:isolate}
.dock-vidrio,.dock-canto{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.dock-vidrio{-webkit-backdrop-filter:blur(2px) saturate(150%) brightness(.92);backdrop-filter:blur(2px) saturate(150%) brightness(.92);
  transition:-webkit-backdrop-filter .45s ease,backdrop-filter .45s ease}
/* en claro no oscurece lo de atrás (el medio quedaba gris) */
html.claro .dock-vidrio{-webkit-backdrop-filter:blur(2px) saturate(150%) brightness(1);backdrop-filter:blur(2px) saturate(150%) brightness(1)}
/* el canto del vidrio: una franja en el borde con más desenfoque y más luz, que se apaga hacia adentro (el grosor
   del vidrio, sin la lupa). En la barra, las puntas redondas van con dos degradés circulares y el medio con uno recto */
.dock-canto{--R:calc(var(--dhC, 61px) / 2);
  -webkit-backdrop-filter:blur(5px) saturate(170%) brightness(1.22);backdrop-filter:blur(5px) saturate(170%) brightness(1.22);
  -webkit-mask:radial-gradient(circle at var(--R) 50%,transparent calc(var(--R) - 9px),#000 var(--R)) left/var(--R) 100% no-repeat,
    radial-gradient(circle at 0 50%,transparent calc(var(--R) - 9px),#000 var(--R)) right/var(--R) 100% no-repeat,
    linear-gradient(#000,transparent 9px,transparent calc(100% - 9px),#000) center/calc(100% - var(--R) * 2 + 1px) 100% no-repeat;
  mask:radial-gradient(circle at var(--R) 50%,transparent calc(var(--R) - 9px),#000 var(--R)) left/var(--R) 100% no-repeat,
    radial-gradient(circle at 0 50%,transparent calc(var(--R) - 9px),#000 var(--R)) right/var(--R) 100% no-repeat,
    linear-gradient(#000,transparent 9px,transparent calc(100% - 9px),#000) center/calc(100% - var(--R) * 2 + 1px) 100% no-repeat}
.fab .dock-canto{-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 9px),#000 100%);mask:radial-gradient(closest-side,transparent calc(100% - 9px),#000 100%)}
/* la luz del dedo: mientras se aprieta el dock, aclara lo que se ve a través del vidrio alrededor del dedo */
.vtabs::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(100px 80px at var(--lx,50%) 50%,rgba(255,255,255,.1),rgba(255,255,255,0))}
html.claro .vtabs::after{background:radial-gradient(100px 80px at var(--lx,50%) 50%,rgba(255,255,255,.5),rgba(255,255,255,0))}
.vtabs.apretado::after,.vtabs.viajando::after{opacity:1;transition:opacity .15s ease}
/* la burbuja de lo elegido: apenas desenfocada y con más color */
.vtabs:not(.arrastrando):not(.viajando) .vind{-webkit-backdrop-filter:blur(2px) saturate(160%);backdrop-filter:blur(2px) saturate(160%)}
/* la lente de las cintas (al apretar o arrastrar), igual a la del dock */
html.oscuro .cinta.arrastrando .ps-ind,html:not(.claro) .cinta.arrastrando .ps-ind{background:rgba(255,255,255,.12)!important;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.12),0 8px 22px rgba(0,0,0,.28)!important}
html.claro .cinta.arrastrando .ps-ind{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.55)!important;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.9),inset 0 1px 0 #fff,0 8px 22px rgba(0,0,0,.12)!important}
/* "Este mes pago": atajos al total y a lo ya pagado */
.plan-at{display:flex;gap:8px;flex-wrap:wrap;margin:2px 4px 0}
.plan-at[hidden]{display:none}
.plan-ch{display:inline-flex;align-items:baseline;gap:6px;padding:8px 14px;border:0;border-radius:999px;font:500 14px var(--f);cursor:pointer;
  color:var(--fg);background:var(--grupo-r,rgba(255,255,255,.1));-webkit-tap-highlight-color:transparent;transition:background-color .525s ease-out,color .525s ease-out}
.plan-ch b{font-weight:600;font-variant-numeric:tabular-nums}
.plan-ch.on{color:#fff;background:rgb(var(--ac))}
html.claro .plan-ch:not(.on){background:rgba(0,0,0,.06)}
/* el $ del osito, en el tono oscuro del acento */
.osito .oso-d{stroke:rgb(var(--acO,var(--ac)))}
.osito .oso-df{fill:rgb(var(--acO,var(--ac)))}
/* el $ de la moneda: en el tono claro del acento (en oscuro es el del osito; en claro, el mismo tono claro) */
.osito .oso-c{stroke:currentColor}
html.claro .osito .oso-c{stroke:rgb(var(--acL,var(--ac2)))}
/* en claro, el osito igual que en oscuro (el cuerpo en el tono claro del acento y el $ del color del cuerpo) */
html.claro .iobar .iob.osito{color:rgb(var(--acL))!important}
html.claro .osito .oso-c{stroke:currentColor}
html.claro .iobar .osito .oso-d{stroke:rgb(var(--acO,var(--ac)))}
html.claro .iobar .osito .oso-df{fill:rgb(var(--acO,var(--ac)))}
/* el botón de filtro, con el borde de luz suave como el dock en oscuro */
html.oscuro .mov-head .catbar .filt-btn:not(.on):not(.abierto)::before{
  background:linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,255,255,.06) 16%,rgba(255,255,255,.02) 42%,rgba(255,255,255,.02) 62%,rgba(255,255,255,.08) 86%,rgba(255,255,255,.22))}
/* colores: cinco de la paleta y el personalizado, en una fila */
.ajustes .acentos{gap:12px 0;padding:0 18px;grid-template-columns:repeat(6,26px)}
.ac-propio{position:relative;display:block;box-sizing:border-box;
  background:conic-gradient(from 0deg,#ff3b30,#ff9500,#ffcc00,#34c759,#00c7be,#0a84ff,#5e5ce6,#af52de,#ff2d55,#ff3b30)!important}
.ac-propio i{position:absolute;inset:3.5px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1.5px var(--solido,#1c1c1e);pointer-events:none}
.ac-propio.vacio i{inset:6px;background:var(--solido,#1c1c1e);box-shadow:none;display:flex;align-items:center;justify-content:center}
.ac-propio.vacio i::before{content:"+";font:600 14px/1 var(--f);color:var(--fg)}
.ac-propio input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none}
/* elegido: el aro de afuera lleva el color elegido, como los demás */
.ac-propio.on{outline-color:var(--c)}
/* importar y exportar: los íconos en el color del acento */
.ajustes .aj-io .mi-i{color:rgb(var(--ac2))}
/* en claro, las facciones del osito más oscuras: con el acento oscurecido solo se perdían sobre el cuerpo */
html.claro .osito .oso-d{stroke:color-mix(in srgb,rgb(var(--acO,var(--ac))) 62%,#000)}
html.claro .osito .oso-df{fill:color-mix(in srgb,rgb(var(--acO,var(--ac))) 62%,#000)}
/* grupo de opciones que se desliza dentro de un menú (las etiquetas del producto) */
.menu-grupo{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* las cintas, al apretarlas o arrastrarlas, se iluminan como el dock */
.cinta{transition:background-color .5s cubic-bezier(.25,.8,.3,1),filter .5s cubic-bezier(.25,.8,.3,1),scale .55s cubic-bezier(.22,.9,.28,1.02)}
html.oscuro .cinta.arrastrando{background-color:rgba(160,160,170,.3)!important}
/* "En qué se fue": lista de una columna (ícono · nombre con barrita · monto y porcentaje) */
.leyenda.lista-cats{display:block;margin:4px 0 2px}
.lista-cats .leg.lcat{display:flex;align-items:center;gap:12px;width:100%;padding:10px 6px;margin:0;border-radius:12px;position:relative;text-align:left}
.lista-cats .leg.lcat + .leg.lcat::before{content:"";position:absolute;top:0;left:48px;right:6px;height:.5px;background:rgba(60,60,67,.18)}
.lista-cats .leg.on + .leg::before,.lista-cats .leg.on::before{opacity:0}
.lista-cats .lcat .ico-t{width:30px;height:30px;flex:0 0 30px;margin:0!important}
.lista-cats .lcat-m{flex:1;min-width:0;display:block}
.lista-cats .lcat .leg-n{display:block;font-size:16px;font-weight:400;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista-cats .lcat-b{display:block;height:4px;border-radius:2px;background:rgba(120,120,128,.14);margin-top:7px;overflow:hidden}
.lista-cats .lcat-b i{display:block;height:100%;border-radius:2px;background:var(--c-cat)}
.lista-cats .lcat-d{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end}
.lista-cats .lcat .leg-a{font-size:16px;font-weight:400;padding:0}
.lista-cats .lcat .leg-p{font-size:12px;font-weight:500;margin-top:2px;color:var(--dim)}
.det-pie.vacia-cats{display:none}
html.claro .lista-cats .leg.lcat + .leg.lcat::before{background:rgba(60,60,67,.2)}
html.oscuro .lista-cats .leg.lcat + .leg.lcat::before{background:rgba(255,255,255,.14)}
/* detalle de una categoría (y de Varios): renglones como los de la lista, sin el título que la repetía */
#catDet .det-h{display:none}
.catdet.on{max-height:2400px}
.dcat{display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:9px 6px;border:0;background:none;position:relative;text-align:left;font:inherit;color:inherit}
.dcat + .dcat::before{content:"";position:absolute;top:0;left:6px;right:6px;height:.5px}
html.claro .dcat + .dcat::before{background:rgba(60,60,67,.2)}
html.oscuro .dcat + .dcat::before{background:rgba(255,255,255,.14)}
.dcat .ico-t{width:28px;height:28px;flex:0 0 28px;margin:0!important}
.dcat-m{flex:1;min-width:0;display:block}
.dcat-n{display:block;font-size:15px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcat-n em{font-style:normal;font-size:13px;color:var(--dim);margin-left:5px}
.dcat-b{display:block;height:3px;border-radius:2px;background:rgba(120,120,128,.14);margin-top:6px;overflow:hidden}
.dcat-b i{display:block;height:100%;border-radius:2px;background:var(--c-cat)}
.dcat-d{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end}
.dcat-a{font-size:15px;font-weight:400;color:var(--dim2);font-variant-numeric:tabular-nums}
.dcat-p{font-size:11.5px;font-weight:500;color:var(--dim);margin-top:2px}
.dcat[data-extracat]{display:none}
.todo-cats .dcat[data-extracat]{display:flex}
.dcat-mas{display:block;width:100%;margin:2px 0 0;padding:10px;border:0;background:none;font:500 15px var(--f);color:rgb(var(--ac2));text-align:center}
/* la tendencia: las barras juntas a la izquierda y el texto corto al costado */
.tend{display:flex;align-items:center;gap:16px}
.tend-b{flex:0 0 auto;gap:8px;height:58px}
.tend-c{flex:0 0 22px;width:22px}
.tend-w{max-width:22px}
.tend-t{color:var(--dim2);flex:1;min-width:0;margin:0;display:flex;flex-direction:column;gap:3px;font-size:12.5px;line-height:1.3}
.tend-t .tend-v{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--fg)}
/* el filtro del anillo */
#grafico{position:relative}
.donut-c .gcap{display:block;font-size:11px;line-height:1.2;font-weight:600;letter-spacing:0;color:rgb(var(--ac2));margin-top:1px}
.filtro-graf-c{display:flex;align-items:center;gap:10px;min-width:0}
.filtro-graf-c .ico-t{width:26px;height:26px;flex:0 0 26px;margin:0!important}
html.claro .filtro-graf,html.claro .qch{background:rgba(120,120,128,.12)}
html.claro .filtro-graf.on,html.oscuro .filtro-graf.on{background:rgb(var(--ac))}
/* compras con tarjeta en Billetera: no suman, por eso el monto va en gris */

.mv.mv-tj .mv-amt{color:var(--dim2)!important;font-weight:400}
/* "→ nov" en las fichas: la compra entra en el resumen de otro mes (en Billetera va a la derecha: ver .mv-cuando) */
.mv-nov{white-space:nowrap}
.mv-nov svg{width:13px;height:13px;margin-right:3px;vertical-align:middle;position:relative;top:-.5px}
/* en las fichas la línea es más baja: sin el empujón */
.fi-cn .mv-nov svg{top:0}
/* las barras del gasto diario: arriba redondeadas, la base lisa */
.dib i{border-radius:999px 999px 0 0}
/* con Promedio: el promedio de cada día (de los meses anteriores) detrás de la barra de este mes */
.dib{position:relative}
.dib .hh{position:absolute;left:0;right:0;bottom:0;z-index:0;border-radius:999px 999px 0 0;text-decoration:none;pointer-events:none;background:rgba(var(--ac),.45)}
.dib i{position:relative;z-index:1}
/* las barras de este mes, más finas, para que el promedio se vea a los costados */
.dib:has(.hh) i{width:56%;margin:0 auto}
/* el botón de filtro de Billetera, sin sombra hacia afuera */
html.oscuro .mov-head .catbar .filt-btn:not(.on):not(.abierto){box-shadow:inset 0 0 16px rgba(255,255,255,.06),inset 0 1px 1px rgba(255,255,255,.07)!important}
html.claro .mov-head .catbar .filt-btn:not(.on):not(.abierto){box-shadow:inset 0 0 16px rgba(255,255,255,.35),0 0 0 .5px rgba(0,0,0,.05)!important}
.mov-head .catbar .filt-btn.on,html.claro .mov-head .catbar .filt-btn.on,html.oscuro .mov-head .catbar .filt-btn.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.25)!important}
/* las barras del gasto diario en el color del acento (pasarse del tope sigue en rojo) */
/* el botón de filtro del anillo, el mismo vidrio que el de Billetera */
.filtro-graf:not(.on)::before,.qch::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html.oscuro .filtro-graf:not(.on),html.oscuro .qch{
  background-color:rgba(128,128,138,.14);
  background-image:linear-gradient(rgba(var(--ac),.1),rgba(var(--ac),.1)),radial-gradient(130% 120% at 50% -30%,rgba(255,255,255,.1),rgba(255,255,255,0) 60%);
  -webkit-backdrop-filter:blur(2px) saturate(160%);backdrop-filter:blur(2px) saturate(160%);
  box-shadow:inset 0 0 16px rgba(255,255,255,.06),inset 0 1px 1px rgba(255,255,255,.07)}
html.oscuro .filtro-graf:not(.on)::before,html.oscuro .qch::before{
  background:linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,255,255,.06) 16%,rgba(255,255,255,.02) 42%,rgba(255,255,255,.02) 62%,rgba(255,255,255,.08) 86%,rgba(255,255,255,.22))}
html.claro .filtro-graf:not(.on),html.claro .qch{
  background-color:rgba(255,255,255,.22);
  background-image:linear-gradient(rgba(var(--ac),.07),rgba(var(--ac),.07)),radial-gradient(130% 120% at 50% -30%,rgba(255,255,255,.5),rgba(255,255,255,0) 60%);
  -webkit-backdrop-filter:blur(2px) saturate(170%);backdrop-filter:blur(2px) saturate(170%);
  box-shadow:inset 0 0 16px rgba(255,255,255,.35),0 0 0 .5px rgba(0,0,0,.05)}
html.claro .filtro-graf:not(.on)::before,html.claro .qch::before{
  background:linear-gradient(135deg,#fff,rgba(255,255,255,.55) 28%,rgba(0,0,0,.05) 58%,rgba(255,255,255,.4) 80%,rgba(255,255,255,.95))}
html.claro .filtro-graf.on,html.oscuro .filtro-graf.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
/* barras del gasto diario: casi negro en claro y casi blanco en oscuro (pasarse del tope, en rojo) */
.dib.con i,.dib.n1 i,.dib.n2 i,.dib.n3 i,.dib.n4 i,.dib.n5 i{background:var(--fg)}
/* el filtro del anillo se comporta como el de Billetera: se agranda al apretarlo, se tiñe con el menú abierto y
   con filtro se estira a una pastilla con cuántos */
.filtro-graf:active{transform:none}
.filtro-graf svg{width:22px;height:22px;flex:0 0 auto}
.filtro-graf.apretado{scale:1.1}
html.oscuro .filtro-graf.apretado{filter:brightness(1.35)}
html.claro .filtro-graf.apretado{filter:brightness(1.06)}
.filtro-graf.on{background:rgb(var(--ac));color:#fff;width:auto;padding:0 12px 0 10px;border-radius:999px}
.filtro-graf.estira{overflow:hidden;transition:width .46s cubic-bezier(.3,1.4,.4,1),scale .55s cubic-bezier(.22,.9,.28,1.02),filter .5s ease,background-color .22s ease}
.filtro-graf .filt-t{display:none;font:600 13px var(--f);letter-spacing:.01em;color:#fff;margin-left:8px;transition:opacity .2s ease}
.filtro-graf .filt-t.hay{display:block}
.filtro-graf .filt-t.sale{opacity:0}
html.oscuro .filtro-graf.abierto:not(.on),html.claro .filtro-graf.abierto:not(.on){background:rgba(var(--ac),.32)}
html.claro .filtro-graf.on,html.oscuro .filtro-graf.on,html.claro .filtro-graf .filt-t,html.oscuro .filtro-graf .filt-t{color:#fff}
/* la línea punteada del promedio (y su puntito en la leyenda), en el color del acento */
html.claro .di-linea.prom,html.oscuro .di-linea.prom{color:rgb(var(--ac))}
html.claro .p-prom,html.oscuro .p-prom{background:rgb(var(--ac))!important}
/* en oscuro, las barras del gasto diario con el blanco de las tarjetas del modo claro */
html.oscuro .dib.con i,html.oscuro .dib.n1 i,html.oscuro .dib.n2 i,html.oscuro .dib.n3 i,html.oscuro .dib.n4 i,html.oscuro .dib.n5 i{background:rgb(var(--tjC,255,255,255))}
/* lo que va encima del acento usa --onAc: blanco, o casi negro si el acento es muy claro (un amarillo chillón) */
html .cn-ok,html .fi-b.pri,html #etiquetasRes .et-i,html #productosRes .et-i,html #lugaresRes .et-i,html .prodf-ico svg,html .plan-ch.on,
html .filtro-graf.on,html .qch.on,html .filtro-graf.on .filt-t,html .catbar .filt-btn.on,html .catbar .filt-btn.on .filt-t,html .catbar .filt-btn.on svg{color:rgb(var(--onAc,255,255,255))!important}
/* el dock: en oscuro, el casi blanco de las tarjetas del modo claro (en claro ya usa el casi negro del saldo) */
html.oscuro .dock-capa-b{color:rgb(var(--tjC,233,235,242))}
/* las rayitas de los botones de filtro, apagados, en el color pleno del acento */
html .mov-head .catbar .filt-btn:not(.on),html .filtro-graf:not(.on),html .qch:not(.on){color:rgb(var(--ac))!important}
/* "Lugares": lo mismo que Etiquetas, para las @ */
/* el mismo bloque sólido que los movimientos de Billetera: fondo, esquinas y recorte en un solo lugar */
#lugaresRes .et-card{padding:0;background:var(--solido);border-radius:var(--rG);overflow:hidden}
#lugaresRes .et-r{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 14px 0 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative}
#lugaresRes .et-r + .et-r::before{content:"";position:absolute;left:56px;right:16px;top:0;height:.5px;background:var(--sep-lista,rgba(255,255,255,.1))}
#lugaresRes .et-r:active{background-color:rgba(var(--ac),.07)}
#lugaresRes .et-i{flex:0 0 28px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgb(var(--acO));color:#fff}
#lugaresRes .et-i svg{width:17px;height:17px}
#lugaresRes .et-n{flex:1 1 auto;min-width:0;font:500 16px var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lugaresRes .et-n::before{content:"@";color:var(--dim2);margin-right:1px}
#lugaresRes .et-p{flex:0 0 auto;font:400 13px var(--f);color:var(--dim2)}
#lugaresRes .et-v{flex:0 0 auto;font:400 16px var(--f);color:var(--dim2);font-variant-numeric:tabular-nums}
#lugaresRes .et-v.c-dim{color:var(--dim2)}
#lugaresRes .et-ch{flex:0 0 auto;width:14px;height:14px;color:var(--dim2)}
#lugaresRes .et-vacio{margin:0;padding:12px 16px;font:400 14px/1.45 var(--f);color:var(--dim2)}
/* la búsqueda del anillo: una barra arriba, a la izquierda del botón de filtro */
html.claro .busca-graf{background:rgba(120,120,128,.12)}
.busca-graf-l{display:flex;color:var(--dim2)}
.busca-graf-l svg{width:18px;height:18px}
.busca-graf input{flex:1;min-width:0;border:0;outline:0;background:none;font:400 16px var(--f);color:var(--fg);-webkit-appearance:none;appearance:none}
.busca-graf input::-webkit-search-cancel-button{display:none}
.busca-graf-x{flex:0 0 28px;width:28px;height:28px;padding:0;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(120,120,128,.24);color:var(--fg);cursor:pointer}
.busca-graf-x svg{width:13px;height:13px}
#grafico.graf-sin > :not(.busca-graf):not(.gfila):not(.graf-vacio){display:none!important}
.graf-vacio{margin:6px 2px 4px;font:400 14px/1.45 var(--f);color:var(--dim2)}
.graf-vacio:empty{display:none}
#menuA .mi-t small{display:block;font-size:13px;color:var(--dim2)}
/* "Lo que más comprás": mismo diseño que Etiquetas, con una línea de datos debajo del nombre */
/* el mismo bloque sólido que los movimientos de Billetera: fondo, esquinas y recorte en un solo lugar */
#productosRes .et-card{padding:0;background:var(--solido);border-radius:var(--rG);overflow:hidden}
#productosRes .et-r{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 14px 0 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative}
#productosRes .et-r + .et-r::before{content:"";position:absolute;left:56px;right:16px;top:0;height:.5px;background:var(--sep-lista,rgba(255,255,255,.1))}
#productosRes .et-r:active{background-color:rgba(var(--ac),.07)}
#productosRes .et-i{flex:0 0 28px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgb(var(--ac));color:#fff}
#productosRes .et-i svg{width:17px;height:17px}
#productosRes .et-n{flex:1 1 auto;min-width:0;font:500 16px var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#productosRes .et-n::before{content:none;color:var(--dim2);margin-right:1px}
#productosRes .et-p{flex:0 0 auto;font:400 13px var(--f);color:var(--dim2)}
#productosRes .et-v{flex:0 0 auto;font:400 16px var(--f);color:var(--dim2);font-variant-numeric:tabular-nums}
#productosRes .pr-v{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.pr-cam{font:600 12.5px var(--f);margin-top:1px}
#productosRes .et-v.c-dim{color:var(--dim2)}
#productosRes .et-ch{flex:0 0 auto;width:14px;height:14px;color:var(--dim2)}
#productosRes .et-vacio{margin:0;padding:12px 16px;font:400 14px/1.45 var(--f);color:var(--dim2)}
#productosRes .pr-r{min-height:58px;padding-top:6px;padding-bottom:6px}
#productosRes .pr-m{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
#productosRes .pr-m .et-n{flex:none}
#productosRes .pr-s{font:400 13px/1.3 var(--f);color:var(--dim2)}
/* el selector de color de la categoría, debajo del ícono */
html.claro .colores{background:#fff}
/* de a dos familias por renglón, cada una de oscuro a claro */
.colores-g{display:grid;grid-template-columns:repeat(3,28px) 6px repeat(3,28px);gap:10px 9px}
.colores-g .colores-c:nth-child(6n+4){grid-column:5}
.colores-c{width:28px;height:28px;padding:0;border:0;border-radius:50%;background:var(--c);cursor:pointer}
.colores-c:active{transform:scale(.9)}
.colores-c.on{outline:2px solid var(--c);outline-offset:2.5px}
#emojiPreview.colores-on .ico-t{--ic:var(--colores);background-color:var(--colores)!important}
/* el botón de filtro del anillo */
.filtro-graf{position:relative;z-index:2;padding:0;border:0;border-radius:50%;
  background:rgba(120,120,128,.14);color:rgb(var(--ac2));cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;white-space:nowrap;
  transition:scale .55s cubic-bezier(.22,.9,.28,1.02),filter .5s cubic-bezier(.25,.8,.3,1),background-color .25s ease}
/* la grilla para elegir el ícono de una categoría, en gris */
#emojiGrid .ico-t{--ic:#8e8e93;background-color:#8e8e93!important}
/* la barra de búsqueda del anillo aparece y se va suave: crece desde arriba y el anillo baja acompañándola */
.busca-graf{align-items:center;gap:8px;margin:0 0 12px 0;padding:0 6px 0 12px;border-radius:20px;background:rgba(120,120,128,.14);display:flex!important;height:0;margin-bottom:0!important;opacity:0;overflow:hidden;pointer-events:none;transform:translateY(-6px);
  transition:height .38s cubic-bezier(.3,1,.4,1),margin-bottom .38s cubic-bezier(.3,1,.4,1),opacity .25s ease,transform .38s cubic-bezier(.3,1,.4,1)}
.busca-graf.on{display:flex;height:40px;margin-bottom:12px!important;opacity:1;pointer-events:auto;transform:none}
/* el botón de filtro de Billetera se estira y se encoge con rebote (su transición propia pisaba la del ancho) */
.mov-head .catbar .filt-btn.estira{overflow:hidden;transition:width .46s cubic-bezier(.3,1.4,.4,1),scale .55s cubic-bezier(.22,.9,.28,1.02),filter .5s cubic-bezier(.25,.8,.3,1),background-color .22s ease}
/* el selector de color entra con una aparición suave en su lugar (la animación anterior pisaba el centrado) */
@keyframes coloresIn{from{opacity:0;transform:translateX(-50%) translateY(-6px) scale(.94)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.colores.on{display:block;animation:coloresIn .26s cubic-bezier(.3,1.2,.4,1) both}
.colores{display:none;position:fixed;left:50%;transform:translateX(-50%);z-index:60;border-radius:var(--rG);
  background:var(--solido,#1c1c1e);box-shadow:0 18px 48px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.08);padding:16px}
/* en Billetera, los productos de un movimiento debajo del nombre */
/* al volver a círculo, el texto que se desvanece sale del medio: así las rayitas se centran mientras se encoge
   (antes quedaban corridas y saltaban al final) */
.filt-t.sale,.filtro-graf .filt-t.sale{position:absolute;left:100%;pointer-events:none}
/* la ficha de un producto: el precio en el tiempo */
.prodf-ico svg{width:30px;height:30px;color:rgb(var(--onAc,255,255,255))}
.prodf-suf{font-size:.5em;font-weight:500;color:var(--dim2);margin-left:4px;letter-spacing:0}
.prodf-card{padding:14px 16px 12px;box-sizing:border-box}
.prodf-r{font:600 15px var(--f);margin-bottom:6px}
.prodf-r.c-o{color:#ff9f0a}
.prodf-r.c-g{color:#30d158}
.prodf-c{position:relative;height:120px}
.prodf-g{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.prodf-g polyline{fill:none;stroke:rgb(var(--ac));stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.prodf-p{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:rgb(var(--ac))}
.prodf-p.ult{width:10px;height:10px;margin:-5px 0 0 -5px;box-shadow:0 0 0 4px rgba(var(--ac),.25)}
.prodf-e{position:absolute;transform:translateX(-50%);font:600 12px var(--f);color:var(--dim2);white-space:nowrap;font-variant-numeric:tabular-nums}
.prodf-e.izq{transform:translateX(-4px)}
.prodf-e.der{transform:translateX(calc(-100% + 4px))}
.prodf-f{display:flex;justify-content:space-between;margin-top:4px;font:400 12px var(--f);color:var(--dim2)}
.prodf-l .fi-cn i{font-style:normal}
/* presupuesto por categoría */
#catNuevo .tope-cat .r-lab{flex:0 0 auto;font:400 16px var(--f);margin-right:10px}
#catNuevo .tope-cat .r-in{text-align:right;font:400 16px var(--f)}
#catNuevo .tope-cat .r-in::placeholder{color:var(--dim)}
.lista-cats .lcat-b.tope-cat-b.cerca i{background:#ff9f0a}
.lista-cats .lcat-b.tope-cat-b.pasado i{background:#ff453a}
.lista-cats .lcat .leg-p.tope-cat-p.pasado{color:#ff453a}
/* Resumen: tres tonos del acento para que Etiquetas, Lugares y Compras no sean todas iguales:
   # el acento, @ el acento oscuro, compras un fondo tenue con el ícono del acento */
/* el punto de hoy, debajo de las barras del gasto diario: del color del acento */
html.claro .dib.hoy::after,html.oscuro .dib.hoy::after,html .dib.hoy::after{background:rgb(var(--ac))!important}
/* Libre: siempre verde; el ritmo se ve en la intensidad: tranquilo el verde lleno, al día más claro, acelerado
   (o lo libre en negativo) más claro todavía */
html #kbL,html #kbL.t-g,html .ritmo-res i.t-g{background:#30d158!important}
html #kbL.t-y,html .ritmo-res i.t-y{background:#83e39c!important}
html #kbL.t-c,html .ritmo-res i.t-c{background:#c1f1cd!important}
html.claro #kbL,html.claro #kbL.t-g,html.claro .ritmo-res i.t-g{background:#34c759!important}
html.claro #kbL.t-y,html.claro .ritmo-res i.t-y{background:#7cd690!important}
html.claro #kbL.t-c,html.claro .ritmo-res i.t-c{background:#ade4b9!important}
.ritmo-res{display:flex;align-items:flex-start;gap:8px;margin:0 0 8px;font:400 13.5px/1.55 var(--f);color:var(--fg)}
.ritmo-res[hidden]{display:none}
.ritmo-res i{flex:0 0 8px;width:8px;height:8px;border-radius:50%;margin-top:6px}
.ritmo-res b{font-weight:600}
.k-st b.c-y{color:var(--fg)}
/* la barra del encabezado sin fondo gris: entre los tramos (y lo que no llega a llenarse) queda el fondo de la página */
html .k-bar,html.claro .k-bar,html.oscuro .k-bar{background:none!important;box-shadow:none!important}
/* modo oscuro: tarjetas grafito neutras, como iOS (sin el toque del acento) */
html:not(.claro){--solido:#1c1c1e}
/* cada valor: el nombre y después el importe */
.k-st>div{display:flex;align-items:baseline;gap:4px;min-width:0;white-space:nowrap}
.k-st>div span{order:-1}
/* al abrir la app, la barra se dibuja de izquierda a derecha como la vuelta del anillo de Resumen (darVuelta): la
   misma duración (1,3 s) y la misma curva, que arranca despacio, acelera y frena al final, con la punta redonda */
@media (prefers-reduced-motion:no-preference){.arranco .k-bar{animation:barraVuelta 1.3s cubic-bezier(.65,0,.35,1) backwards}}
@keyframes barraVuelta{from{clip-path:inset(0 100% 0 0 round 4px)}to{clip-path:inset(0 0 0 0 round 4px)}}
/* encabezado al estilo iOS: una barra fina y bien redonda, con el mismo aire arriba (hasta el número o la nota de lo
   por cobrar) que abajo (hasta la leyenda) */
.k-bar{height:8px;border-radius:4px;margin-top:14px}
.k-bar i{border-radius:4px}
.k-bar i.k-algo{min-width:8px}
.k-st{margin-top:14px}
.k-st span{display:flex;align-items:center;gap:6px;font:400 13px/1.35 var(--f);color:var(--dim2)}
.k-st span::before{width:7px;height:7px}
html:not(.claro) .k-st span{color:rgba(255,255,255,.55)}
/* el encabezado sin "Por cobrar": queda solo lo que te queda, la barra y sus tres valores (lo por cobrar está en
   los fijos de Billetera) */
.hero2 .k-top{display:none!important}
/* el título grande, un poco más abajo: no se mete en el desenfoque que pone Safari debajo de la barra de estado */
.tg{margin-top:8px}
/* "Respaldar": cuándo fue el último, debajo */
.mi-t small.respaldo-ult{display:block;font-size:12px;font-weight:400;color:var(--dim2);margin-top:1px}
/* debajo de "Te quedan", lo que falta cobrar: "con +$80K por cobrar" */
.cobrar-n{margin:4px 0 0;font:400 13px/1.35 var(--f);color:var(--dim2)}
.cobrar-n[hidden]{display:none}
/* el ícono de una cuenta: tarjeta, banco o billetera, en su color */
.icono-cta .r-lab{flex:1 1 auto}
.icono-cta-b{display:flex;gap:10px}
.icono-cta-o{padding:3px;border:0;background:none;cursor:pointer;line-height:0}
.icono-cta-o .tile-cta{width:30px;height:30px;opacity:.45;transition:opacity .2s ease}
.icono-cta-o.on{box-shadow:0 0 0 2px rgb(var(--ac2))}
.icono-cta-o.on .tile-cta{opacity:1}
.icono-cta-o:active{transform:scale(.92)}
/* ══════════ Las hojas, con el teclado abierto: fondo desde el borde de abajo, siempre ══════════
   Problema (volvió varias veces): al abrir el teclado, iOS a veces corre toda la página hacia arriba, y con ella la hoja,
   que está pegada abajo. Debajo de la hoja quedaba transparente: un hueco entre la hoja y el teclado (alrededor de la
   barra de "Autorrellenar") y también detrás del teclado, que es de vidrio. Correcciones que dependían de medir cuánto
   la corre iOS (visualViewport) no alcanzaron: esas medidas no son confiables.
   Solución: la hoja lleva su fondo extendido hacia abajo con copias de sí misma, opacas y sin desenfoque (sombras cada
   120 px, hasta 1080 px). Se corra lo que se corra, debajo hay fondo hasta el borde de la pantalla; sin teclado quedan
   fuera de la pantalla. No depende de medir nada. La prueba de uso "Con el teclado abierto, la hoja tiene fondo hasta
   abajo" (pruebas/toques.js) la corre 350 px hacia arriba y revisa que debajo no se vea la página */
html.claro .abajo{--f-hoja:rgb(var(--vidrio-tema))}
html:not(.claro) .abajo{--f-hoja:color-mix(in oklab,#1c1c1e 92%,rgb(var(--ac)) 8%)}
html.claro .catnuevo.abajo,html.claro #hojaMov .modal-box.abajo{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 -12px 40px rgba(0,0,0,.12),0 120px 0 var(--f-hoja), 0 240px 0 var(--f-hoja), 0 360px 0 var(--f-hoja), 0 480px 0 var(--f-hoja), 0 600px 0 var(--f-hoja), 0 720px 0 var(--f-hoja), 0 840px 0 var(--f-hoja), 0 960px 0 var(--f-hoja), 0 1080px 0 var(--f-hoja)!important}
html:not(.claro) .catnuevo.abajo,html:not(.claro) #hojaMov .modal-box.abajo{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 -18px 50px rgba(0,0,0,.42),0 120px 0 var(--f-hoja), 0 240px 0 var(--f-hoja), 0 360px 0 var(--f-hoja), 0 480px 0 var(--f-hoja), 0 600px 0 var(--f-hoja), 0 720px 0 var(--f-hoja), 0 840px 0 var(--f-hoja), 0 960px 0 var(--f-hoja), 0 1080px 0 var(--f-hoja)!important}
/* ══════════ Cuentas: el total arriba y el resumen abajo, como en Ajustes de iOS ══════════
   Arriba de cada lista, un renglón de altura fija con el total (Total del mes, Resumen del mes, Saldo), sin ícono y en
   negro; la línea que lo sigue arranca donde su texto. Abajo, la aclaración en gris, alineada a la izquierda y pareja */
.tot-sec{display:flex;align-items:center;justify-content:space-between;gap:12px;height:50px;padding:0 16px;box-sizing:border-box;
  font:400 16px var(--f);color:var(--fg);letter-spacing:-.01em}
.tot-sec[hidden]{display:none}
.tot-sec span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.tot-sec + .tjr::before,.tot-sec + .prr::before,.tot-sec + .tjr-add::before,.tot-sec + .prr-add::before{left:16px!important}
#v-deuda .aviso{text-align:left;padding:0 16px;font-size:13px;line-height:1.35;margin-top:8px}
#v-deuda .aviso b{font-weight:inherit}
#v-deuda .aviso[hidden]{display:none}

/* ══════════ Dinerosita: el modo simple (ver DINEROSITA en el <head>) ══════════ */
/* Cuentas: solo la tarjeta, sin las cuentas (prepagas) ni los préstamos */
html.dinerosita #v-deuda .sec[data-sec="prepagas"],html.dinerosita #v-deuda .sec[data-sec="prestamos"],html.dinerosita #v-deuda .reorg-pie{display:none}
/* una sola tarjeta: su ficha entera en la pantalla, en vez de la lista (ver fichas.js) */
.tj-grande{display:none}
html.dinerosita #v-deuda.con-grande .tj-grande{display:flex;flex-direction:column;gap:12px;padding:8px 0 4px}
html.dinerosita #v-deuda.con-grande .sec[data-sec="tjs"]{display:none}
.tj-grande .fi-hero{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s cubic-bezier(.3,1.4,.4,1)}
.tj-grande .fi-hero:active{transform:scale(.97)}
/* la tarjeta de vidrio, también pagada (al quedar pagada, papelitos) */
.tj-fis{position:relative;overflow:hidden;isolation:isolate;display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center;
  padding:16px;border-radius:22px;text-align:left;-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);transition:transform .2s cubic-bezier(.3,1.4,.4,1),background .6s ease}
html.claro .tj-fis{background:rgba(255,255,255,.55);box-shadow:0 10px 30px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.9),0 0 0 .5px rgba(0,0,0,.05)}
html:not(.claro) .tj-fis{background:rgba(255,255,255,.07);box-shadow:0 10px 30px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.12)}
.tf-izq{min-width:0}
.tf-l{display:flex;flex-direction:column;margin:0;font:500 13px var(--f);color:var(--dim2)}
.tf-l b{margin:1px 0 10px;font:600 20px var(--f);letter-spacing:-.02em;color:var(--fg)}
.tj-fis .fi-monto{margin:0;font:700 34px/1.1 var(--f);letter-spacing:-.035em;color:var(--fg)}
.tf-est{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;margin-top:8px;padding:4px 10px 4px 8px;border-radius:999px;background:rgba(120,120,128,.14);
  font:600 13px var(--f);color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-est>i{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--dim2)}
.tf-est.c-r{color:#ff3b30}.tf-est.c-r>i{background:#ff3b30}
.tf-est.c-o{color:#ff9f0a}.tf-est.c-o>i{background:#ff9f0a}
.tf-est svg{width:13px;height:13px;flex:0 0 auto}
/* el círculo de los días que faltan para el cierre: el anillo es lo que va del resumen */
.tf-circ{position:relative;width:96px;height:96px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:conic-gradient(#ff9f0a calc(var(--p,0) * 1%),rgba(255,159,10,.2) 0)}
.tf-circ::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--solido,#fff)}
.tf-circ b,.tf-circ small{position:relative;z-index:1}
.tf-circ b{font:700 18px var(--f);letter-spacing:-.03em;color:var(--fg)}
.tf-circ small{font:500 11px var(--f);color:var(--dim2)}
/* al quedar pagada: papelitos que caen sobre la tarjeta */
.confeti{position:absolute;inset:0;pointer-events:none;z-index:2}
.confeti i{position:absolute;top:-14px;width:7px;height:12px;border-radius:2px;animation:confeti 1.5s cubic-bezier(.25,.6,.4,1) both}
@keyframes confeti{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--x),240px) rotate(var(--r));opacity:0}}
/* la línea de tiempo del resumen: el vencimiento, hoy y el cierre sobre el mes; los días se escriben ahí */
/* adentro de la tarjeta de vidrio, abajo, a todo el ancho */
.tj-fis .tl,.tj-fis .tl-suma{grid-column:1/-1}
.tj-fis .tl{margin:16px 10px 0}
.tj-fis .tl-suma{margin-top:8px}
.tl{position:relative;height:58px;margin:14px 10px 4px}
.tl.cerca{height:80px;margin-top:6px}
.tl-l,.tl-ok{position:absolute;left:0;top:13px;height:6px;border-radius:3px}
.tl.cerca .tl-l,.tl.cerca .tl-ok{top:35px}
.tl-l{right:0;background:rgba(120,120,128,.16)}
.tl-ok{background:linear-gradient(90deg,rgba(var(--ac),.3),rgb(var(--ac)))}
.tl-p{position:absolute;top:7px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.tl.cerca .tl-p{top:29px}
.tl-p>b{width:18px;height:18px;border-radius:50%;background:var(--solido,#fff);border:3px solid #c7c7cc;box-sizing:border-box}
.tl-vence>b{border-color:#ff3b30}
.tl-cierre>b{border-color:#ff9f0a}
.tl-p.sin>b{border-style:dashed;border-color:#c7c7cc}
.tl-hoy{cursor:default;z-index:1}
.tl-hoy>b{border-color:rgb(var(--ac));box-shadow:0 0 0 5px rgba(var(--ac),.18)}
.tl-p>span{display:flex;align-items:center;margin-top:4px;font:600 12px var(--f);color:var(--dim2);white-space:nowrap}
.tl-hoy>span{color:rgb(var(--ac))}
/* el de hoy, arriba de la línea; con el cierre cerca del vencimiento, el cierre también */
.tl.cerca .tl-hoy,.tl.cerca .tl-cierre{flex-direction:column-reverse}
.tl.cerca .tl-hoy>span,.tl.cerca .tl-cierre>span{margin:0 0 4px}
.tl.cerca .tl-hoy{top:7px}.tl.cerca .tl-cierre{top:7px}
.tl-suma{display:flex;justify-content:space-between;margin:6px 0 0;font:500 14px var(--f);color:var(--dim2)}
.tl-suma b{font-weight:700;color:var(--fg)}
/* las cuotas como rayitas */
.tj-cuo{display:flex;gap:3px;margin-top:5px}
.tj-cuo s{width:12px;height:4px;border-radius:2px;background:rgba(120,120,128,.22)}
.tj-cuo s.on{background:rgb(var(--ac))}
/* lo que se paga después: un título con su flecha, como los días de Billetera, que despliega sus compras */
.tj-dif-b{display:flex;align-items:center;gap:8px;width:100%;padding:0 16px 8px;border:0;background:none;
  font:600 15px var(--f);letter-spacing:-.01em;color:var(--fg);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tj-dif-b:active{opacity:.6}
.tj-dif-b span{flex:0 1 auto;min-width:0}
.tj-dif-b .mv-chev{width:13px;height:13px;color:var(--dim2)}
.tj-grande.dif-on .tj-dif-b .mv-chev{transform:rotate(0)}
.tj-dif-b b{margin-left:auto;font:400 15px var(--f);color:var(--dim2)}
.tj-dif-c{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .36s cubic-bezier(.4,0,.2,1),opacity .24s ease}
.tj-dif-c>div{min-height:0;overflow:hidden}
.tj-grande.dif-on .tj-dif-c{grid-template-rows:1fr;opacity:1}
/* la rueda de "Este mes pago": el arco de lo que pagás (verde con el total) y adentro, fino, lo que te queda */
.rueda{position:relative;width:236px;height:236px;margin:6px auto 2px;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}
.rueda[hidden],.ru-queda[hidden]{display:none}
.rueda svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.rueda circle{fill:none}
.ru-fondo{stroke:rgba(120,120,128,.16);stroke-width:9}
.ru-arco{stroke:url(#ruedaG);stroke-width:9;stroke-linecap:round;transition:stroke-dasharray .12s ease-out}
.rueda.girando .ru-arco,.rueda.girando .ru-disp{transition:none}
.rg-a{stop-color:#ff9f0a}.rg-b{stop-color:rgb(var(--ac))}
.rueda.entera .rg-a,.rueda.entera .rg-b{stop-color:#30d158}
.ru-disp-f{stroke:rgba(36,138,61,.16);stroke-width:4}
.ru-disp{stroke:#248a3d;stroke-width:4;stroke-linecap:round;transition:stroke-dasharray .12s ease-out}
.rueda.sin-plata .ru-disp-f{stroke:rgba(255,59,48,.25)}
.ru-perilla{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.28);pointer-events:none}
.ru-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center}
.ru-c small{font:500 14px var(--f);color:var(--dim2)}
.ru-c b{font:700 32px var(--f);letter-spacing:-.035em;color:var(--fg)}
.ru-c i{max-width:150px;margin-top:2px;font:500 12px/1.3 var(--f);font-style:normal;color:#ff9f0a}
.rueda.entera .ru-c i{color:#30d158}
.ru-queda{display:flex;justify-content:center;align-items:baseline;gap:8px;margin:2px 0 6px;font:500 14px var(--f);color:var(--dim2)}
.ru-queda b{font:700 17px var(--f);letter-spacing:-.02em;color:#248a3d}
.ru-queda.neg b{color:#ff3b30}
#pagoDrop.con-rueda:not(.escribe) .cartel-cuerpo>.grupo-r,#pagoDrop.con-rueda #pagoNota{display:none}
#pagoDrop.con-rueda .plan-at{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
/* Dinerosita: la hoja de carga sin la lista de productos ni la cuenta (desde Billetera es el Banco; desde Tarjeta, la tarjeta) */
/* Fijo e Ingreso (o Reintegro) como dos botones arriba del importe; el día de vencimiento, debajo de ellos */
html.dinerosita #hojaMov .hj-cab{order:-2}
html.dinerosita #hojaMov .g-hm3{order:-1;display:flex;flex-wrap:wrap;gap:8px;padding:0;background:none!important;box-shadow:none!important;border:0!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html.dinerosita #hojaMov .g-hm3>#hmVenceBox::before{display:none}
html.dinerosita #hmFijoBox,html.dinerosita #hmIngBox,html.dinerosita #hmCuotasBtn{position:relative;flex:1 1 0;min-width:0;min-height:42px!important;padding:0 10px 0 14px!important;justify-content:space-between;gap:6px;
  border-radius:999px;background:rgba(120,120,128,.14);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s ease}
html.dinerosita #hmFijoBox .sw,html.dinerosita #hmIngBox .sw{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}
html.dinerosita #hmFijoBox .r-lab,html.dinerosita #hmIngBox .r-lab{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font:600 14px var(--f);color:var(--fg)}
/* Cuotas: el texto ("1 cuota", "6 cuotas") a la izquierda y las flechitas a la derecha; en cuotas, en el acento */
html.dinerosita #hmCuotasBtn .r-lab{display:none}
html.dinerosita #hmCuotasBtn .r-val{flex:1 1 auto;justify-content:space-between;margin:0;font:600 14px var(--f);color:var(--fg)}
html.dinerosita #hmCuotasBtn.on .r-val{color:rgb(var(--ac))}
html.dinerosita #hmCuotasBtn::before{display:none}
/* con las tres en fila (tarjeta), "Reintegro" lleva más lugar que Fijo para entrar entero */
html.dinerosita #hojaMov .g-hm3:has(#hmCuotasBtn:not([style*="none"])) #hmFijoBox{flex-grow:.8}
html.dinerosita #hojaMov .g-hm3:has(#hmCuotasBtn:not([style*="none"])) #hmIngBox{flex-grow:1.3}
/* un círculo con el tilde: sin marcar, solo el borde; marcado, lleno (Fijo en el acento, Ingreso en verde) */
html.dinerosita #hmFijoBox::before,html.dinerosita #hmIngBox::before{content:"";display:block!important;position:static!important;z-index:auto!important;order:2;flex:0 0 auto;width:20px;height:20px!important;border-radius:50%;box-sizing:border-box;
  border:2px solid rgba(120,120,128,.55);background:transparent center/12px no-repeat;transition:background-color .26s ease,border-color .26s ease,transform .25s cubic-bezier(.3,1.6,.4,1)}
html.dinerosita #hmFijoBox:has(input:checked)::before,html.dinerosita #hmIngBox:has(input:checked)::before{transform:scale(1.08);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.5'/%3E%3C/svg%3E")}
html.dinerosita #hmFijoBox:has(input:checked)::before{background-color:rgb(var(--ac));border-color:rgb(var(--ac))}
html.dinerosita #hmIngBox:has(input:checked)::before{background-color:#30d158;border-color:#30d158}
html.dinerosita #hmFijoBox:active,html.dinerosita #hmIngBox:active,html.dinerosita #hmCuotasBtn:active{transform:scale(.97)}
html.dinerosita #hmVenceBox{flex:1 1 100%;border-radius:var(--rG,22px);background:var(--grupo-r,rgba(255,255,255,.1))}
html.dinerosita #producto,html.dinerosita #hmTjBtn{display:none!important}
/* la confirmación (borrar algo) siempre adelante de todo, también de Categorías abierta desde la hoja */
#modalConf{z-index:60}
/* Billetera: Ingresos · Gastos · Fijos y la lupa, como las quincenas */
.bl-tipos{margin:0}
.bl-resto{display:flex;flex-direction:column;gap:10px}
.bl-resto:empty{display:none}
.bl-tipos .bl-lupa{flex:0 0 46px;padding:0;display:grid;place-items:center}
.bl-tipos .bl-lupa svg{position:relative;z-index:1;width:18px;height:18px}
.bl-pase{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* "Editar categorías" al pie del menú de categorías; Categorías abierta desde la hoja va encima de ella */
/* un renglón más, en su propio grupo (como "Cargos de tarjeta"): el lápiz en el lugar del punto, en el acento */
#hmCatPop .cdi-edit{margin-top:8px;color:rgb(var(--ac))}
#hmCatPop .cdi-edit::before{content:"";position:absolute;left:20px;right:20px;top:-4px;height:.5px;background:rgba(128,128,128,.32)}
#hmCatPop .cdi-edit svg{order:0;flex:0 0 16px;width:16px;height:16px;margin:0 -2px}
#hmCatPop .cdi-edit .cdi-n{color:rgb(var(--ac))}
html.cats-hoja #ficha-velo{z-index:51}
html.cats-hoja #ficha,html.cats-hoja.ficha-on:has(#hojaMov.open) #ficha{z-index:52;transform:none!important;filter:none!important}
html.cats-hoja #veloEditor{z-index:53}
html.cats-hoja .catnuevo{z-index:54}
/* categoría y fecha en un renglón, cada una en su mitad (solo el valor); las cuotas, debajo */
html.dinerosita #hojaMov .g-hm2{display:flex;flex-wrap:wrap}
html.dinerosita #hmCatBtn,html.dinerosita #hmFechaBox{flex:1 1 0;min-width:0;justify-content:center}
html.dinerosita #hmCatBtn .r-lab,html.dinerosita #hmFechaBox .r-lab{display:none}
html.dinerosita #hmCatBtn .r-val,html.dinerosita #hmFechaBox .r-val{max-width:100%;margin:0}
html.dinerosita #hmFechaBox{border-left:.5px solid rgba(120,120,128,.3)}
html.dinerosita #hmFechaBox::before{display:none}
/* Dinerosita · Billetera: "Te quedan" en una tarjeta de vidrio, con cuánto podés gastar por día */
html.dinerosita.claro #kS1,html.dinerosita:not(.claro) #kS1{position:relative;padding:16px 16px 14px;border-radius:22px;-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
html.dinerosita.claro #kS1{background:rgba(255,255,255,.55);box-shadow:0 10px 30px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.9),0 0 0 .5px rgba(0,0,0,.05)}
html.dinerosita:not(.claro) #kS1{background:rgba(255,255,255,.07);box-shadow:0 10px 30px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.12)}
.k-xdia[hidden],.k-tenes[hidden]{display:none}
/* Tenés y Te quedan con el mismo rótulo, uno arriba del otro; a la derecha, lo de por día en un círculo cuyo anillo se
   llena con lo que llevás gastado hoy (rojo si te pasaste) */
html.dinerosita #kS1{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center}
html.dinerosita #kS1>*{grid-column:1}
.k-tenes{display:flex;flex-direction:column;margin:0 0 10px;font:500 13px var(--f);color:var(--dim2)}
.k-tenes b{margin-top:1px;font:600 20px var(--f);letter-spacing:-.02em;color:var(--fg)}
html.dinerosita #kS1 .k-cap{margin:0;font:500 13px var(--f);color:var(--dim2)}
html.dinerosita #kS1 .hero-val{font-size:38px}
.k-xdia{grid-column:2!important;grid-row:1/4;position:relative;width:96px;height:96px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:conic-gradient(#30d158 calc(var(--p,0) * 1%),rgba(48,209,88,.18) 0)}
.k-xdia::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--solido,#fff)}
.k-xdia.pasa{background:conic-gradient(#ff3b30 100%,#0000 0)}
.k-xdia b,.k-xdia small{position:relative;z-index:1}
.k-xdia b{font:700 19px var(--f);letter-spacing:-.03em;color:#248a3d}
html:not(.claro) .k-xdia b{color:#30d158}
.k-xdia small{margin-top:1px;font:500 11px var(--f);color:var(--dim2)}
/* al tocar un día, su tarjeta se ilumina */
.bl-brilla{animation:blBrilla 1.2s ease}
@keyframes blBrilla{0%,100%{filter:none}30%{filter:brightness(1.12) drop-shadow(0 0 12px rgba(var(--ac),.55))}}
html.dinerosita #kDots,html.dinerosita #kS2{display:none}
/* más simple: Te quedan y lo de por día, sin la barra, el detalle ni lo que falta cobrar; Billetera sin el filtro */
html.dinerosita #kS1 .k-bar,html.dinerosita #kS1 .k-st,html.dinerosita #kS1 .k-top,html.dinerosita #kS1 .cobrar-n{display:none!important}
html.dinerosita #movFila{display:none}
/* sin lugares ni etiquetas: cada gasto es su ícono, su nombre y su importe (los fijos siguen diciendo cuándo vencen) */
html.dinerosita #gastosBody .mv-var .mv-meta,html.dinerosita #gastosBody .mv-nt{display:none}
html.dinerosita #gastosBody .mv-var{min-height:58px}
html.dinerosita #gastosBody .mv-desc{font-weight:500}
/* los días sin la flechita de plegar */
/* tocar la tarjeta: solo el vencimiento y el cierre */
#tjEdDrop.solo-fechas .grupo-r:has(#tjeNombre),#tjEdDrop.solo-fechas label.reng:has(#tjeMonto),#tjEdDrop.solo-fechas #tjeFechasNota,
#tjEdDrop.solo-fechas #tjeNota,#tjEdDrop.solo-fechas #tjeBtns{display:none!important}
/* los íconos de categoría, redondos */
/* la semana: un círculo por día, lleno según lo gastado contra lo de por día */
.bil-lite{display:flex;flex-direction:column;gap:10px;margin:0 0 10px}
.bl-sem{overflow:hidden;touch-action:pan-y;padding:10px 8px;border-radius:20px;-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
html.claro .bl-sem{background:rgba(255,255,255,.55);box-shadow:0 10px 30px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.9),0 0 0 .5px rgba(0,0,0,.05)}
html:not(.claro) .bl-sem{background:rgba(255,255,255,.07);box-shadow:0 10px 30px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.12)}
.bl-d{display:flex;flex-direction:column;align-items:center;gap:5px;width:42px;padding:0;border:0;background:none;color:var(--dim2);font:600 11px var(--f);cursor:pointer;-webkit-tap-highlight-color:transparent}
.bl-d:disabled{cursor:default}
.bl-d i{font-style:normal}
.bl-r{position:relative;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(rgb(var(--ac)) calc(var(--p) * 1%),rgba(120,120,128,.16) 0);transition:transform .2s cubic-bezier(.3,1.4,.4,1)}
.bl-d:active .bl-r{transform:scale(.9)}
.bl-r::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--solido,#fff)}
.bl-r span{position:relative;z-index:1;font:700 13px var(--f);color:var(--fg)}
.bl-d.pasa .bl-r{background:#ff3b30}
.bl-d.fut .bl-r,.bl-d.fuera .bl-r{opacity:.4}
.bl-d.fut.cargo .bl-r{opacity:1}
.bl-semi{display:flex;justify-content:space-between;will-change:transform}
.bl-d.hoy{color:rgb(var(--ac))}
.bl-d.sel .bl-r{box-shadow:0 0 0 2px var(--solido,#fff),0 0 0 4px rgb(var(--ac))}
/* para pagar: tarjetitas que se deslizan */
.bl-sec{display:flex;justify-content:space-between;align-items:baseline;margin:6px 4px 0;font:700 17px var(--f);color:var(--fg)}
.bl-sec span{font:500 14px var(--f);color:var(--dim2)}
.bl-carr{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 14px;margin:0 -14px;padding:2px 14px 8px;scrollbar-width:none}
.bl-carr::-webkit-scrollbar{display:none}
.bl-pase{position:relative;isolation:isolate;flex:0 0 150px;scroll-snap-align:start;display:flex;flex-direction:column;padding:12px;border-radius:20px;color:var(--fg);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
/* transparente, con un 25% del color de su categoría */
.bl-pase::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--c);opacity:.25;pointer-events:none}
.bl-pase .bl-ico{width:30px;height:30px;border-radius:50%;background:var(--c)!important}
.bl-pase .bl-ico svg{width:18px;height:18px}
.bl-pase b{margin-top:10px;font:600 15px var(--f);color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-m{font:700 20px var(--f);letter-spacing:-.02em;color:var(--fg)}
.bl-v{font:600 11px var(--f);color:var(--dim2)}
/* Pagar, en el color de la categoría (con .claro en el selector, el modo claro no lo traduce) */
html.claro .bl-pg,.bl-pg{position:absolute;right:10px;top:12px;padding:5px 11px;border:0;border-radius:999px;background:var(--c)!important;color:#fff!important;font:700 12px var(--f);cursor:pointer}
/* un día sin gastos */
.bl-vacio{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 16px;border-radius:20px;background:var(--grupo-r,rgba(255,255,255,.1));text-align:center}
.bl-e{font-size:20px}
.bl-vacio b{font:700 17px var(--f);color:var(--fg)}
.bl-vacio p{margin:0;font:400 14px/1.4 var(--f);color:var(--dim2)}
.bl-vacio em{font-style:normal;font-weight:700;color:#248a3d}
/* la burbuja al cargar un gasto */
.bl-burbuja{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,0);transition:background .3s ease;pointer-events:auto}
.bl-burbuja.on{background:rgba(0,0,0,.22)}
.bl-bc{width:100%;max-width:340px;padding:20px 18px 16px;border-radius:26px;background:var(--solido,#fff);text-align:center;box-shadow:0 20px 40px rgba(0,0,0,.25);
  transform:scale(.85);opacity:0;transition:transform .35s cubic-bezier(.3,1.4,.4,1),opacity .2s ease}
.bl-burbuja.on .bl-bc{transform:none;opacity:1}
.bl-bico{width:46px;height:46px;border-radius:50%;margin:0 auto}
.bl-bico svg{width:28px;height:28px}
.bl-bm{margin-top:8px;font:700 30px var(--f);letter-spacing:-.03em;color:var(--fg)}
.bl-bd{margin:2px 0 0;font:500 14px var(--f);color:var(--dim2)}
.bl-lin{display:flex;height:10px;margin:14px 0 6px;border-radius:5px;overflow:hidden;background:rgba(120,120,128,.14)}
.bl-lin i{background:#30d158}.bl-lin s{background:rgb(var(--ac))}
.bl-bc p:last-child{margin:0;font:500 13px var(--f);color:var(--dim2)}
.bl-bc p b{color:var(--fg)}
/* Dinerosita: Resumen es en qué se fue la plata: sin Destacados, Cómo venís, el filtro,
   Reorganizar ni el (+). En qué se fue, sin su título y siempre abierta (arriba, Este mes / Promedio) */
html.dinerosita #destacados,
html.dinerosita #v-salud .sec[data-sec="pulso"],html.dinerosita #v-salud .filtro-graf,html.dinerosita #v-salud .reorg-pie,
html.dinerosita #v-salud .sec[data-sec="grafico"]>.sec-h{display:none!important}
html.dinerosita #v-salud .sec[data-sec="grafico"].cerrada .sec-b{grid-template-rows:1fr;opacity:1;visibility:visible;pointer-events:auto}
/* sin el (+), el dock entero se desliza hasta donde estaba */
html.dinerosita body:has(#v-salud.on) #btnFab{opacity:0;scale:.4;pointer-events:none}
html.dinerosita .vtabs{transition:height .42s cubic-bezier(.3,1.1,.4,1),gap .4s cubic-bezier(.3,1.1,.4,1),
  scale .55s cubic-bezier(.22,.9,.28,1.02),background-color .5s cubic-bezier(.25,.8,.3,1),translate .5s cubic-bezier(.3,1.1,.4,1)}
html.dinerosita body:has(#v-salud.on) .vtabs{translate:calc(100vw - 40px - env(safe-area-inset-left) - env(safe-area-inset-right) - 100%) 0}
/* Resumen corto: sin el gasto diario, ingresos y gastos, los indicadores, etiquetas, lugares ni lo que más comprás */
html.dinerosita #v-salud .sec[data-sec="diario"],html.dinerosita #v-salud .sec[data-sec="barras"],html.dinerosita #v-salud .sec[data-sec="etiquetas"],
html.dinerosita #v-salud .sec[data-sec="lugares"],html.dinerosita #v-salud .sec[data-sec="productos"],html.dinerosita #indics{display:none}

/* buscando: el total de todos los meses, abajo, fuera de las tarjetas */
.bus-hist{display:flex;justify-content:space-between;gap:12px;margin:16px 6px 0;font:400 15px var(--f);color:var(--dim2)}
.bus-hist b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Dinerosita: la ventanita de las cuotas (ver modulos/cuotas.js) */
.cq{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,0);transition:background .25s ease}
.cq.on{background:rgba(0,0,0,.28)}
.cq-c{width:100%;max-width:340px;max-height:calc(100dvh - 60px);overflow-y:auto;padding:20px 18px 14px;border-radius:26px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:saturate(165%) blur(20px);backdrop-filter:saturate(165%) blur(20px);text-align:center;
  box-shadow:0 20px 40px rgba(0,0,0,.25);transform:scale(.88);opacity:0;transition:transform .35s cubic-bezier(.3,1.4,.4,1),opacity .2s ease}
.cq.on .cq-c{transform:none;opacity:1}
.cq-t{margin:0;font:600 15px var(--f);color:var(--dim2)}
.cq-ops{margin:10px 0 14px}
.cq-m{margin-top:4px;font:700 34px var(--f);letter-spacing:-.035em;color:var(--fg)}
.cq-m small{font:500 15px var(--f);letter-spacing:0;color:var(--dim2)}
.cq-s{margin:2px 0 0;font:500 14px var(--f);color:var(--dim2)}
.cq-h{margin:18px 0 8px;padding:0 4px;font:600 13px var(--f);color:var(--dim2);text-align:left}
.cq-b{overflow:hidden}
.cq-m b{font-weight:inherit;font-variant-numeric:tabular-nums}
/* mes a mes: un bloque blanco como los grupos de las hojas, cada mes con lo que ya venía y la cuota, y el total a la derecha */
.cq-l{border-radius:18px;background:var(--grupo-r);border:1px solid var(--grupo-r-b);overflow:hidden;text-align:left}
.cq-r{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:54px;padding:7px 16px}
.cq-r+.cq-r::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:1px solid rgba(120,120,128,.16)}
.cq-rt{display:flex;flex-direction:column;min-width:0}
.cq-rt span{font:500 16px var(--f);color:var(--fg)}
.cq-rt small{margin-top:1px;font:400 13px var(--f);color:var(--dim2)}
.cq-r b{font:500 16px var(--f);font-variant-numeric:tabular-nums;color:var(--fg)}
.cq-ok{width:100%;height:46px;margin-top:14px;border:0;border-radius:23px;background:rgb(var(--ac));color:#fff;font:600 16px var(--f);cursor:pointer}
html.claro .cq-ok{color:#fff!important}

/* ══════════ Avisos y confirmación como en iOS ══════════ */
/* el aviso de abajo: una cápsula de vidrio neutra, texto blanco (negro en claro) y la acción como un botoncito del acento */
.toast{color:#fff;background:rgba(44,44,48,.78);border:.5px solid rgba(255,255,255,.14);
  font:500 14px var(--f);letter-spacing:-.01em;padding:13px 22px;border-radius:999px;
  -webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
  box-shadow:0 12px 32px rgba(0,0,0,.38),0 1px 2px rgba(0,0,0,.2)}
.toast.acc{padding:6px 6px 6px 20px;gap:14px}
.toast.acc>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.toast-ac{flex:none;font:600 14px var(--f);color:rgb(var(--ac2));background:rgba(var(--ac),.2);padding:8px 15px;border-radius:999px}
html.claro .toast{color:#000;background:rgba(255,255,255,.86);border-color:rgba(0,0,0,.06);
  box-shadow:0 12px 32px rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.06)}
html.claro .toast-ac{color:rgb(var(--ac));background:rgba(var(--ac),.14)}

/* ══════════ Movimientos como Apple Card ══════════ */
/* el nombre más marcado y el monto en el color del texto (lo que no suma, lo ya pagado y los ingresos conservan su color);
   el lugar y las etiquetas en gris, con su ícono también en gris; el chip de la tarjeta queda con su color */
#gastosBody .mv-desc{font-weight:600}
#gastosBody .mv:not(.mv-in):not(.mv-hijo-in):not(.mv-fijopago):not(.mv-tj):not(.mv-neg):not(.mv-finn) > .mv-amt{color:var(--fg);font-weight:500}
#gastosBody .mv-nt .lugar-ref,#gastosBody .mv-nt .etiq{color:var(--dim2);font-weight:400}
/* el encabezado del día queda pegado debajo del título chico mientras se recorre ese día, y lo empuja el siguiente.
   Sin caja propia: en Billetera la franja desenfocada de arriba (la del título chico) se estira y lo cubre */
.mov .mv-gr > .mv-div{position:sticky;top:calc(env(safe-area-inset-top) + 62px);z-index:40}
html:not(.dinerosita):has(#v-gastos.on) .borde-sup{height:calc(env(safe-area-inset-top) + 126px);
  -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent);mask-image:linear-gradient(180deg,#000 76%,transparent)}
/* el bloque Pendiente: el total en naranja y sin el candado de las filas de créditos */
#gastosBody .mv-pendiente > .mv-div .mv-dt{color:#ff9f0a}
#gastosBody .mv-arr-cobrar > .mv-div .mv-dt{color:#30d158}
.mv-pie-fijos{margin:0;padding:8px 16px 2px;font:400 13px/1.35 var(--f);color:var(--dim2)}
.mv-gr:not(.on)>.mv-pie-fijos{display:none}
.dest-t b.dest-ir,.dest-ir{color:rgb(var(--ac))!important;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mv-agrupa .mv-ir{flex:0 0 auto;width:14px;height:14px;margin-left:4px;color:var(--dim2);opacity:.7}
/* las losetas de las tarjetas o los préstamos, apiladas: la primera adelante, las otras asomando detrás */
.mov .mv-emo.mv-pila{position:relative;flex:0 0 30px;width:30px;height:30px}
.mov .mv-pila .mv-ico.tile-mov{position:absolute;top:0;left:0;z-index:calc(3 - var(--n));
  transform:translateY(calc(var(--n) * -4px)) scale(calc(1 - var(--n) * .12));transform-origin:50% 0;
  box-shadow:0 0 0 1.5px var(--solido,#fff)}
.mov .mv-pila.n2,.mov .mv-pila.n3{margin-top:4px}
.mv-pie-fijos b{font-weight:600;color:var(--fg)}
#gastosBody .mv-pendiente .mv-cand{display:none}
#gastosBody [data-pend]{cursor:pointer}
/* lo recién cargado: entra deslizándose y queda un instante con un brillo del acento */
/* la fila entera, sin cápsula propia: las esquinas las pone la tarjeta del día, que recorta */
#gastosBody .mv.mv-nueva{animation:filaNueva 2.1s cubic-bezier(.2,.8,.2,1)}
@keyframes filaNueva{
  0%{transform:translateY(-10px);opacity:0;background:rgba(var(--ac),.28)}
  14%{transform:none;opacity:1;background:rgba(var(--ac),.28)}
  60%{background:rgba(var(--ac),.2)}
  100%{background:rgba(var(--ac),0)}}
/* la lupa, a la izquierda del ojo y solo en Billetera */
.tg .lupa{display:none;right:48px}
html:not(.dinerosita):has(#v-gastos.on) .tg .lupa{display:block}
html.claro:not(.dinerosita):has(#v-gastos.on) .borde-sup{-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
/* KPI: "Podés gastar" grande; debajo lo que tenés y lo que falta pagar; la barra un poco más gruesa y, como lo libre y
   lo por pagar ya están dichos arriba, abajo solo "Gastado" */
.k-sub{margin:2px 0 0;font:500 15px var(--f);color:var(--dim2);letter-spacing:-.01em}
.k-sub b{color:var(--fg);font-weight:600}
html:not(.dinerosita) .k-bar{height:10px;border-radius:5px}
html:not(.dinerosita) .k-st>.k-c,html:not(.dinerosita) .k-st>.k-r{display:none}
/* lo gastado en gris (gastar lo que entra es normal): el color queda para lo que falta pagar y lo libre */
html:not(.dinerosita) #kbG,html:not(.dinerosita) .k-st>div:nth-child(1) span::before{background:rgba(142,142,147,.55)!important}
html.claro:not(.dinerosita) #kbG,html.claro:not(.dinerosita) .k-st>div:nth-child(1) span::before{background:rgba(60,60,67,.28)!important}
html:not(.dinerosita) #kvG{color:var(--fg)}
/* el renglón de arriba de Tarjetas y Préstamos: el aro de pago (como Apple Card), "Falta pagar" en naranja o "Todo pagado" */
.tot-sec.tot-pago{display:flex;align-items:center;gap:12px;height:auto;min-height:0;padding-top:12px;padding-bottom:12px}
.tp-aro{flex:none;width:32px;height:32px}
.tp-aro circle{fill:none;stroke-width:4}
.tp-fondo{stroke:rgba(128,128,138,.28)}
.tp-lleno{stroke:rgb(var(--ac));stroke-linecap:round;transition:stroke-dasharray .8s cubic-bezier(.3,1,.4,1),stroke .3s ease}
/* al completarse, el tilde se dibuja cuando el aro termina de llenarse */
.tp-ok.dibuja{stroke-dasharray:18;stroke-dashoffset:18;animation:tildeDibuja .4s .55s cubic-bezier(.3,1,.4,1) forwards}
@keyframes tildeDibuja{to{stroke-dashoffset:0}}
.tot-pago.pagado .tp-lleno{stroke:#30d158}
.tp-ok{fill:none;stroke:#30d158;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tot-pago.alerta .tp-lleno,.tot-pago.alerta .tp-ok{stroke:#ff9f0a}
/* el texto en dos renglones a la izquierda y el importe a la derecha, centrado en el alto de los dos */
.tp-t{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:1px;align-items:center}
.tp-l{display:contents}
.tp-l>span{grid-column:1;grid-row:1}
.tp-l b{grid-column:2;grid-row:1/3;align-self:center;font-weight:600;color:#ff9f0a}
.tp-s{grid-column:1;grid-row:2;font-size:13px;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Gasto diario: la leyenda lleva un trocito de la misma línea que dibuja el gráfico, y lo histórico (la línea y las
   barras de atrás) va en gris: lo de color es este mes. El tope, la única línea continua */
.di-leg i.p-prom,.di-leg i.p-hist,.di-leg i.p-tope{width:16px;height:0;border-radius:0;background:none!important;border-top:2px dashed currentColor}
.di-leg i.p-prom{color:rgb(var(--ac))}
.di-leg i.p-hist{color:rgba(235,235,245,.6);border-top:2.5px dotted currentColor}
html.claro .di-leg i.p-hist{color:rgba(60,60,67,.5)}
.di-leg i.p-tope{border-top-style:solid}
.di-linea.hist{color:rgba(235,235,245,.7)}
html.claro .di-linea.hist{color:rgba(60,60,67,.6)}
.di-linea.hist::before{border-top-style:dotted;border-top-width:2px}
.di-linea.tope::before{border-top-style:solid;opacity:.85}
.dib .hh{background:rgba(235,235,245,.22)}
html.claro .dib .hh{background:rgba(60,60,67,.14)}
/* un ingreso: el monto en verde y con "+" */
#hojaMov.es-ing .hm-imp i,#hojaMov.es-ing #hmMonto{color:#30d158}
/* el ícono de "cada mes" en la lista, del alto del texto */
.ico-rep{width:1.05em;height:1.05em;vertical-align:-.17em;display:inline-block}
/* Ajustes: Claro / Oscuro con un check en el acento en el elegido */
.aj-modo{width:100%;border:none;background:none;color:var(--fg);font:inherit;text-align:left;cursor:pointer}
/* como en iOS: un círculo vacío; el elegido se llena con el acento y lleva el check blanco */
.aj-modo svg{flex:none;width:22px;height:22px;padding:4px;box-sizing:border-box;border-radius:50%;color:transparent;
  box-shadow:inset 0 0 0 1.5px rgba(128,128,138,.55);stroke-width:3.2;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.aj-modo.on svg{background:rgb(var(--ac));color:#fff;box-shadow:none}

/* la etiqueta del producto: un botón redondo a la derecha del precio; lleno con el acento si tiene una */
.producto-tb{flex:0 0 auto;width:30px;height:30px;padding:0;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(118,118,128,.2);color:var(--dim2);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .25s ease,color .25s ease,transform .16s cubic-bezier(.3,1.4,.4,1)}
.producto-tb svg{width:16px;height:16px}
.producto-tb:active{transform:scale(.88)}
.producto-tb.on{background:rgb(var(--ac));color:#fff}
.producto-tb.salta{animation:saltaTag .5s cubic-bezier(.3,1.6,.4,1)}
@keyframes saltaTag{0%{transform:scale(.6)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
.producto-r .producto-p{flex-basis:80px;width:80px}
/* mantenerlo apretado le saca la etiqueta: el botón se encoge y vuelve gris */
.producto-tb{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.producto-tb.suelta{animation:sueltaTag .45s cubic-bezier(.3,1.5,.4,1)}
@keyframes sueltaTag{0%{transform:scale(1.15)}40%{transform:scale(.7)}100%{transform:scale(1)}}

/* ── Hoja de carga como la de Calendario ──
   Arriba ✕ · Gasto | Ingreso · ✓ (el ✓ gris hasta que se puede guardar). Después el importe, la descripción y la fecha
   en cajas sueltas, con una barra del color de la cuenta a la izquierda; la fecha se despliega en Fecha y Repetir.
   Debajo, Opciones (cuenta, categoría y cuotas, con su punto de color), Detalles (nota y agregar producto) y, si hay,
   Productos. Los renglones llevan un ícono gris adelante */
#hojaMov [hidden]{display:none!important}
/* iOS dibuja el cursor encima de todo: debajo de la cabecera se esconde (ver hoja-carga.js) */
#hojaMov .bajo-cab{caret-color:transparent}
.hm-espacio{flex:0 0 auto;height:0;margin-top:-12px}
html:not(.dinerosita) #hojaMov .g-hm3{display:none}
#hojaMov .hm-tit{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* lo que se arrastra para cerrar es solo la barrita: la cinta queda libre */
#hojaMov .asa{height:16px}
#hojaMov .hj-cab #hmSeg{position:absolute;top:16px;left:70px;right:70px;height:44px;margin:0;box-sizing:border-box}
#hojaMov .hj-cab #hmSeg .ps{display:flex;align-items:center;justify-content:center;height:40px;padding:0}
/* como el bloque de arriba de Calendario: dos pastillas iguales, el importe en semibold como el título y la
   descripción como la fecha, con la barra de color de alto completo */
.hm-blk{position:relative;display:flex;flex-direction:column;gap:14px;padding-left:16px}
.hm-blk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:3px;background:var(--cb,#8e8e93);transition:background .3s ease}
.hm-blk .hm-pill{border-radius:26px}
#hojaMov .hm-blk .reng,#hojaMov .hm-blk label.hm-imp.reng{min-height:52px;height:52px;padding:0 18px}
#hojaMov .hm-blk label.hm-imp.reng{gap:4px}
#hojaMov .hm-blk label.hm-imp.reng i{display:inline-flex;align-items:baseline;flex:0 0 auto;white-space:nowrap;font:600 22px var(--f);letter-spacing:-.01em;color:var(--dim2);transition:color .3s ease}
#hojaMov .hm-blk label.hm-imp.reng input{height:50px;font:600 22px var(--f);letter-spacing:-.01em;transition:color .3s ease}
#hojaMov .hm-blk label.hm-imp.reng input::placeholder{color:var(--dim2);transition:color .3s ease}
.hm-blk .r-txt .r-in{font-weight:400}
/* el "+" de ingreso entra y sale corriendo al "$"; el 0 de ingreso, en un verde suave */
#hojaMov .hm-imp i::before{content:"+";display:inline-block;max-width:0;opacity:0;overflow:hidden;transform:translateX(-6px) scale(.6);
  transition:max-width .32s cubic-bezier(.32,.72,0,1),opacity .2s ease,transform .32s cubic-bezier(.32,.72,0,1)}
#hojaMov.es-ing .hm-imp i::before{max-width:.7em;opacity:1;transform:none}
#hojaMov.es-ing .hm-blk label.hm-imp.reng i,#hojaMov.es-ing .hm-blk label.hm-imp.reng input{color:#30d158}
#hojaMov.es-ing .hm-blk label.hm-imp.reng input::placeholder{color:rgba(48,209,88,.5)}
.hm-chip{position:relative;flex:0 0 auto;padding:7px 12px;border-radius:10px;background:rgba(128,128,128,.16);color:var(--fg)}
.hm-chip b{font-weight:400}
#hmFechaBox .hm-chip #hmFecha{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
/* los íconos de adelante y las rayas que empiezan en el texto, como en Calendario */
.hm .r-lab{display:flex;align-items:center}
.r-ico{display:inline-flex;flex:0 0 22px;width:22px;height:22px;margin-right:12px;color:var(--dim2);font-style:normal}
.r-ico svg{width:22px;height:22px}
.r-nota .r-ico,.r-det .r-ico{margin:0}
#hojaMov .g-hm2>*~*::before,#hojaMov .g-hm1>*~*::before{left:50px!important}
/* como en Calendario: el título pegado a su grupo y aire arriba */
#hojaMov .hm-sec{margin:14px 0 -5px 16px;font:600 15px var(--f);letter-spacing:-.01em;color:var(--dim2)}
#hojaMov .hm-sec.producto-t{display:flex;justify-content:space-between;margin:14px 16px 7px}
.producto-suma{font-weight:400}
.producto{margin:0}
.producto:empty{display:none}
.hm-dot{display:inline-block;flex:0 0 12px;width:12px;height:12px;border-radius:50%;background:var(--ic,#8e8e93)}
.menu-hoja .hm-dot{order:0}
.menu-sec{margin:0;padding:10px 18px 4px 44px;font:400 13px var(--f);color:var(--dim2)}
.menu-sec.cdi-cred{margin-top:4px;padding-top:12px;border-top:6px solid rgba(128,128,128,.13)}
/* el autorrellenar: un panel de vidrio debajo de la descripción */
.hm-blk #hmSug{position:absolute;z-index:3;left:16px;right:0;top:132px;display:block;margin:0;padding:10px 0 4px;overflow:hidden;border-radius:24px;
  background:var(--sug-bg);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);
  box-shadow:0 12px 34px rgba(0,0,0,.18),inset 0 0 0 .5px rgba(128,128,128,.3)}
.hm-blk #hmSug:empty{display:none}
#hmSug .sg-t{margin:0 18px 4px;font:600 14px var(--f);color:var(--dim2)}
#hmSug .hm-sg{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;height:auto;margin:0;padding:8px 18px 8px 34px;
  border:0!important;border-radius:0;background:none!important;box-shadow:none;text-align:left;transform:none}
#hmSug .hm-sg::before{content:"";position:absolute;left:18px;top:10px;bottom:10px;width:5px;border-radius:3px;background:var(--ic)}
#hmSug .hm-sg+.hm-sg::after{content:"";position:absolute;top:0;left:32px;right:0;height:.5px;background:var(--sep-hj)}
#hmSug .hm-sg:active{background:rgba(128,128,128,.12)!important}
#hmSug .sg-n{font:600 17px var(--f);letter-spacing:-.01em;color:var(--dim2)}
#hmSug .sg-n b{color:var(--fg);font-weight:600}
#hmSug .sg-d{font:400 14px var(--f);color:var(--dim2)}
html{--sug-bg:rgba(44,44,48,.97)}
html.claro{--sug-bg:rgba(255,255,255,.96)}
/* ✕ y ✓ de todas las hojas: botones de vidrio como el del filtro; el ✓ en el acento (gris mientras no se puede) */
html .cn-b.cn-x,html .cn-b.cn-ok{border:0!important;background:var(--solido)!important;background-image:none!important;
  box-shadow:0 2px 10px rgba(0,0,0,.1)!important;color:var(--fg)}
html .cn-b.cn-ok{background:rgb(var(--ac))!important;color:#fff}
/* la misma sombra que el botón del filtro, en cada modo */
html .cn-b.cn-x,html .cn-b.cn-ok.off{box-shadow:inset 0 0 16px rgba(255,255,255,.06),inset 0 1px 1px rgba(255,255,255,.07)!important}
html .cn-b.cn-ok.off{background:var(--solido)!important;color:var(--dim)!important}
/* en claro, los mismos círculos que en oscuro: de vidrio gris transparente, y el ✓ apagado más tenue todavía */
html.claro .cn-b.cn-x{background:rgba(118,118,128,.16)!important}
html.claro .cn-b.cn-ok.off{background:rgba(118,118,128,.09)!important;color:rgba(60,60,67,.28)!important}
/* y con más vidrio: el brillo de adentro y el borde más blancos, y una sombra apenas, para que se despeguen de la hoja */
html.claro .cn-b.cn-x,html.claro .cn-b.cn-ok.off{box-shadow:inset 0 0 14px rgba(255,255,255,.55),inset 0 1px 1px rgba(255,255,255,.9),
  0 1px 4px rgba(0,0,0,.06)!important}
html.claro .cn-b.cn-x::after,html.claro .cn-b.cn-ok.off::after{background:linear-gradient(135deg,#fff,rgba(255,255,255,.4) 20%,rgba(255,255,255,.1) 45%,rgba(255,255,255,.1) 62%,rgba(255,255,255,.45) 86%,#fff)}
/* el brillo del borde va en ::after: cada botón lo ubica sobre sí (con :where no le gana a los que se ubican solos) */
:where(.cn-b.cn-x,.cn-b.cn-ok){position:relative}
html .cn-b.cn-x::after,html .cn-b.cn-ok::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.1) 16%,rgba(255,255,255,.02) 42%,rgba(255,255,255,.02) 62%,rgba(255,255,255,.2) 86%,rgba(255,255,255,.6))}
/* con una hoja abierta, el fondo de la página (lo que queda a la vista si iOS corre todo hacia arriba al abrir el
   teclado, y lo que se ve a través del vidrio del teclado) es del color de la hoja, no el celeste de Billetera */
html.claro:has(#hojaMov.open,.catnuevo.abajo.on),html.claro:has(#hojaMov.open,.catnuevo.abajo.on) body{background:rgb(228,227,233)!important}
html:not(.claro):has(#hojaMov.open,.catnuevo.abajo.on),html:not(.claro):has(#hojaMov.open,.catnuevo.abajo.on) body{background:color-mix(in oklab,#1c1c1e 92%,rgb(var(--ac)) 8%)!important}
/* en la hoja de carga el contenido sigue por detrás de la barra que iOS pone arriba del teclado (se ve a través del
   vidrio), sin el relleno gris: el campo que tocás igual queda a la vista porque sube solo (ver hoja-carga.js) */
#hojaMov .modal-box.abajo{padding-bottom:calc(22px + env(safe-area-inset-bottom))!important}
/* al abrir, mientras está el osito, el dock no se dibuja: iOS a veces deja ver un instante la franja de abajo de la
   pantalla, y ahí asomaba (aparece cuando el osito empieza a irse) */
html:not(.arranco):has(> #splash) .dock{visibility:hidden}
/* Más filtros: la cabecera como la de las otras hojas, con el contenido pasando por detrás y el mismo fondo al deslizar */
.fs-top{position:relative;z-index:3}
.fs-top::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .25s ease;border-radius:38px 38px 0 0;
  background:rgba(30,30,34,.94);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid rgba(255,255,255,.1)}
html.claro .fs-top::before{background:rgba(var(--vidrio-tema),.9)!important;border-bottom-color:rgba(0,0,0,.1)!important}
.fs-box.corrida .fs-top::before{opacity:1}
.fs-body{margin-top:calc(-1 * var(--fs-top,0px));padding-top:calc(var(--fs-top,0px) + 8px)}
/* "Editar" de las fichas: una pastilla de vidrio como la ✕ (como en Calendario), que al tocarla se encoge hasta el
   círculo del ✓ del editor que se abre encima */
.fi-cab .fi-ed{right:16px;left:auto;display:flex;align-items:center;justify-content:center;width:auto;min-width:44px;padding:0 18px;
  border-radius:22px;font:600 17px var(--f);letter-spacing:-.01em;color:var(--fg)!important;overflow:hidden;white-space:nowrap;
  transition:width .22s cubic-bezier(.3,1,.4,1),padding .22s cubic-bezier(.3,1,.4,1),background-color .22s ease,color .22s ease}
.fi-cab .fi-ed svg{display:none}
.fi-cab .fi-ed.a-ok{width:44px;padding:0;background:rgb(var(--ac))!important;color:#fff!important}
.fi-cab .fi-ed.a-ok .fi-ed-t{display:none}
.fi-cab .fi-ed.a-ok svg{display:block}
/* la ficha de un movimiento, como un evento de Calendario: debajo de los botones, la barra del color de la categoría a
   la izquierda, con el ícono y el nombre, el importe y el día */
.fi-ev{position:relative;margin:56px 4px 6px;padding:2px 0 2px 18px}
.fi-ev::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:3px;background:var(--cb,#8e8e93)}
.fi-ev-t{display:flex;align-items:center;gap:10px;font:700 28px/1.15 var(--f);letter-spacing:-.025em}
.fi-ev-t>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-ev-t .ico-t{flex:0 0 30px;width:30px;height:30px;margin:0}
.fi-ev-t .ico-t svg{width:62%;height:62%}
.fi-ev-m{margin-top:6px;font:600 22px/1.2 var(--f);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fi-ev-m.c-g{color:#30d158}
.fi-ev-d{margin-top:4px;font:400 17px/1.35 var(--f);color:var(--fg)}
#ficha .fi-g .r-val .hm-dot{margin-right:8px}
#ficha .fi-g .r-val{display:flex;align-items:center}
/* tarjetas, cuentas y préstamos: el mismo comienzo que la ficha de un movimiento (lo de abajo queda como estaba) */
.fi-hero.ev{position:relative;display:block;align-items:stretch;text-align:left;margin:56px 4px 6px;padding:2px 0 2px 18px}
.fi-hero.ev::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:3px;background:var(--cb,#8e8e93)}
.fi-ev-t .fi-nom{margin:0;font:inherit;letter-spacing:inherit}
.fi-ev-t .tile-cta{flex:0 0 30px;width:30px;height:30px;margin:0}
.fi-ev-t .tile-cta svg{width:62%;height:62%}
.fi-hero.ev .fi-monto{margin-top:6px;font:600 22px/1.2 var(--f);letter-spacing:-.02em}
.fi-hero.ev .fi-est{margin-top:4px;font:400 17px/1.35 var(--f);color:var(--fg)}
.fi-hero.ev .fi-est.c-r{color:#ff453a}
.fi-hero.ev .fi-est.c-o{color:#ff9f0a}
.fi-hero.ev .fi-prog{margin-top:12px}
/* el editor de una etiqueta o un lugar: el ícono al lado del nombre */
.etq-ed-ico{display:flex;flex:0 0 30px}
.etq-ed-ico .ico-t{width:30px;height:30px}
.etq-ed-ico .ico-t svg,.ct-r .ico-t[style*="color:#fff"] svg{width:18px;height:18px}
/* en las fichas, el ícono gris de cada renglón centrado con su texto, como en la hoja de carga */
#ficha .fi-g .r-lab:has(.r-ico){display:flex;align-items:center}
#ficha .fi-g .r-lab .r-ico{align-items:center;justify-content:center}
/* la aclaración de un producto (la marca o la presentación, entre paréntesis en la nota), en gris al lado del nombre */
.pr-acl{font-style:normal;color:var(--dim2)}
/* "Completar <producto>" en un solo renglón: con un nombre largo se corta con "…" en vez de partirse en dos */
.producto-pie .cuenta-nota-b{display:inline-block;flex:0 1 auto;min-width:0;max-width:62%;height:28px;line-height:28px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.producto-pie>span{flex:0 0 auto;white-space:nowrap}
/* tarjetas: "Pasa a <mes>" con su Deshacer, en el resumen de la ficha */
.fi-pasa .r-val{display:flex;align-items:center;gap:10px}
.fi-desh{padding:0;border:0;background:none;font:400 inherit/1 var(--f);font-size:inherit;color:rgb(var(--ac2));cursor:pointer}
/* la hoja de pago: pagando todo, no hay resto que pase */
#pagoPasaFila.apagada{opacity:.4;pointer-events:none}
/* pago parcial con el resto para el mes que viene: el "!" naranja en vez del tilde verde */
.chk.alr{color:#ff9f0a!important}

/* ══ La barra de arriba, como Notas de iOS 26 ══
   Fija, de lado a lado: el calendario a la izquierda y la lupa a la derecha (solo en Billetera), en botones redondos de
   vidrio que se ven siempre. Al bajar, aparecen el vidrio de la barra con su línea de abajo y, en el medio, el título
   chico (entra con un fundido y un desenfoque que se aclara). El título grande baja un renglón para quedar debajo de los
   botones y se esconde debajo de la barra. Reemplaza al difuminado de arriba */
html:not(.dinerosita) .borde-sup{display:none!important}
/* las medidas de Notas: botones de 44 pegados a la zona segura, a 16 del costado, y la barra 10 más abajo */
/* --baja: iOS 26 desenfoca solo una franja debajo de la barra de estado en las web apps (no se puede pedir que no lo
   haga): la barra arranca más abajo, donde ya no llega */
html:not(.dinerosita){--baja:calc(env(safe-area-inset-top) * .5 + 4px)}
html:not(.dinerosita) .titulo-chico{top:0;height:calc(max(env(safe-area-inset-top), 20px) + var(--baja) + 56px);padding:calc(max(env(safe-area-inset-top), 20px) + var(--baja) + 2px) calc(16px + env(safe-area-inset-right)) 10px calc(16px + env(safe-area-inset-left));
  box-sizing:border-box;align-items:center;justify-content:space-between;opacity:1;transform:none}
html:not(.dinerosita) .titulo-chico::before{content:"";position:absolute;inset:0;z-index:-1;opacity:var(--tc,0);pointer-events:none;
  background:var(--vc-bg,rgba(28,28,32,.58));-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 .5px 0 var(--sep-lista,rgba(128,128,138,.3))}
html:not(.dinerosita) .titulo-chico .tc-t{position:absolute;left:50%;top:calc(max(env(safe-area-inset-top), 20px) + var(--baja) + 2px);height:44px;justify-content:center;transform:translateX(-50%);
  opacity:var(--tc,0);filter:blur(calc((1 - var(--tc,0)) * 6px));pointer-events:none}
html.tg-arriba:not(.dinerosita) .titulo-chico .tc-t{pointer-events:auto}
.tc-btn{position:relative;z-index:1;flex:0 0 auto;width:44px;height:44px;padding:0;border:none;border-radius:50%;pointer-events:auto;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--fg);-webkit-tap-highlight-color:transparent;
  background:var(--vc-bg,rgba(28,28,32,.58));box-shadow:var(--vc-sh,inset 0 1px 0 rgba(255,255,255,.2));
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);transition:transform .2s cubic-bezier(.3,1.4,.4,1),color .2s}
.tc-btn:active{transform:scale(.9)}
.tc-btn svg{width:25px;height:25px}
/* el título chico como el de Notas: el nombre y, debajo, el dato */
html:not(.dinerosita) .titulo-chico .tc-t b{font:600 17px var(--f);letter-spacing:-.02em}
html:not(.dinerosita) .titulo-chico .tc-t span{font:400 14px var(--f);margin-top:1px}
/* los dos botones, iguales al de filtro de Billetera: del color de las tarjetas, con su borde de luz, el ícono en el
   acento y, al apretarlos, se agrandan y se iluminan */
html .tc-btn{background:var(--solido)!important;box-shadow:var(--vc-sh,inset 0 1px 0 rgba(255,255,255,.2));color:rgb(var(--ac2));
  -webkit-backdrop-filter:none;backdrop-filter:none;transition:scale .55s cubic-bezier(.22,.9,.28,1.02),filter .5s cubic-bezier(.25,.8,.3,1),background-color .25s ease,color .25s ease}
.tc-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.1) 16%,rgba(255,255,255,.02) 42%,rgba(255,255,255,.02) 62%,rgba(255,255,255,.2) 86%,rgba(255,255,255,.6))}
html.claro .tc-btn::before{background:linear-gradient(135deg,#fff,rgba(255,255,255,.55) 28%,rgba(0,0,0,.05) 58%,rgba(255,255,255,.4) 80%,rgba(255,255,255,.95))}
.tc-btn:active{transform:none}
.tc-btn.apretado{scale:1.2}
html.oscuro .tc-btn.apretado,html:not(.claro) .tc-btn.apretado{filter:brightness(1.35)}
/* en claro: casi transparentes (un velo blanco del 25% y el borde de luz) y, al apretarlos, se llenan de blanco */
html.claro .tc-btn:not(.fuera){background:rgba(255,255,255,.25)!important;box-shadow:none}
html.claro .tc-btn.apretado:not(.fuera){background:#fff!important;box-shadow:var(--vc-sh)}
/* arriba de todo el calendario es una pastilla con el mes; al bajar se achica al círculo con el ícono */
/* se anima un solo valor, el ancho del botón (el del nombre del mes, --mes-w, lo pone pintarPastilla): el ícono queda
   quieto en su lugar (centrado en el círculo) y el nombre, fijo adentro, se descubre o se tapa; al agrandarse aparece
   un instante después y al achicarse se va enseguida */
html:not(.dinerosita) .tc-cal{width:calc(var(--mes-w,61px) + 56px);min-width:44px;padding:0 0 0 9.5px;justify-content:flex-start;border-radius:22px;gap:7px;overflow:hidden;
  transition:width .45s cubic-bezier(.32,.72,0,1),scale .55s cubic-bezier(.22,.9,.28,1.02),filter .5s cubic-bezier(.25,.8,.3,1),background-color .25s ease,color .25s ease}
html:not(.dinerosita) .tc-cal svg{flex:0 0 25px}
.tc-mes{display:block;flex:0 0 auto;white-space:nowrap;font:600 16px var(--f);letter-spacing:-.01em;transition:opacity .25s ease .1s}
html.tg-arriba:not(.dinerosita) .tc-cal{width:44px}
html.tg-arriba .tc-mes{opacity:0;transition-delay:0s;transition-duration:.15s}
/* en otro mes, el calendario lleno del acento, como el filtro con filtros puestos (mantenerlo apretado vuelve al de hoy) */
/* prendidos (el calendario en otro mes, el filtro con filtros puestos): el botón queda como siempre y se ilumina solo
   el ícono, en una cápsula del acento (más ancha que alta) metida con un margen chico */
html.claro .tc-cal.fuera,html.oscuro .tc-cal.fuera,html .tc-cal.fuera{background:var(--solido)!important;color:var(--fg)!important;
  box-shadow:var(--vc-sh)!important;padding-left:4px;width:calc(var(--mes-w,61px) + 72px)}
html.claro .tc-cal.fuera{background:rgba(255,255,255,.25)!important;box-shadow:none!important}
html:not(.dinerosita) .tc-cal.fuera svg{flex:0 0 auto;width:48px;height:36px;padding:6.5px 0;box-sizing:border-box;border-radius:18px;
  background:rgb(var(--ac));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
/* al bajar no queda en círculo: la cápsula con el mes en 3 letras ("Sep"), que entra mientras se va el nombre entero */
.tc-mesc{position:absolute;left:59px;top:50%;transform:translateY(-50%);white-space:nowrap;font:600 16px var(--f);letter-spacing:-.01em;
  opacity:0;pointer-events:none;transition:opacity .15s ease}
html.tg-arriba:not(.dinerosita) .tc-cal.fuera{width:calc(var(--mesc-w,30px) + 72px)}
html.tg-arriba:not(.dinerosita) .tc-cal.fuera .tc-mesc{opacity:1;transition:opacity .25s ease .12s}
html .mov-head .catbar .filt-btn.on,html.claro .mov-head .catbar .filt-btn.on,html.oscuro .mov-head .catbar .filt-btn.on{
  background:var(--solido)!important;padding:0 13px 0 4px;gap:8px;
  box-shadow:inset 0 0 16px rgba(255,255,255,.06),inset 0 1px 1px rgba(255,255,255,.07)!important}
html.claro .mov-head .catbar .filt-btn.on{box-shadow:inset 0 0 16px rgba(255,255,255,.35),0 0 0 .5px rgba(0,0,0,.05)!important}
html .mov-head .catbar .filt-btn.on .filt-t,html.claro .mov-head .catbar .filt-btn.on .filt-t{color:var(--fg)!important}
html .mov-head .catbar .filt-btn.on svg{width:44px;height:32px;padding:6px 0;box-sizing:border-box;border-radius:16px;background:rgb(var(--ac));color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.tc-lupa{visibility:hidden}
/* la búsqueda es de toda la app: la lupa está en todas las pestañas */
html:not(.dinerosita) .tc-lupa{visibility:visible}
html.dinerosita .tc-btn{display:none}
/* "Hoy" ya no va en la barra: lo hace el calendario */
html:not(.dinerosita) .tc-hoy{display:none!important}
/* el ojo y la lupa de antes no se ven: la lupa va en la barra; ocultar los montos, manteniendo apretado el número grande */
html:not(.dinerosita) .tg .ojo{display:none!important}
html:not(.dinerosita) .tg h1{padding-right:0}
html:not(.dinerosita) .tg{margin-top:calc(max(env(safe-area-inset-top), 20px) - env(safe-area-inset-top) + var(--baja) + 36px);padding-bottom:18px}   /* debajo de la barra, con aire, con o sin zona segura */
/* el mes ya lo dice la pastilla del calendario: debajo del título no se repite */
html:not(.dinerosita) .tg .tg-fila{display:none}
html:not(.dinerosita) .tg h1,html:not(.dinerosita) .tg .tg-fila{opacity:calc(1 - var(--tg-sale,0))}

/* los botones de la barra y el (+) del dock con el ícono en la tinta del modo (negro en claro, blanco en oscuro), como
   los de Notas; el calendario se sigue llenando del acento cuando estás en otro mes */
html .tc-btn:not(.fuera){color:var(--fg)!important}
html .fab,html.claro .fab,html.oscuro .fab{color:var(--fg)!important}

/* ══ La búsqueda en la barra de arriba ══
   Sale de la lupa hacia la izquierda (se descubre de derecha a izquierda) hasta el calendario, que se achica al círculo;
   la lupa pasa a ser una ✕ y el título chico se esconde mientras tanto */
html:not(.dinerosita) .titulo-chico #bfBarra.bf-barra{position:absolute;z-index:2;margin:0!important;
  top:calc(max(env(safe-area-inset-top), 20px) + var(--baja) + 2px);height:44px!important;
  right:calc(16px + env(safe-area-inset-right) + 44px + 8px);left:calc(16px + env(safe-area-inset-left) + 44px + 8px);
  padding:0 14px 0 13px;border-radius:22px;background:var(--solido)!important;box-shadow:var(--vc-sh);
  opacity:1!important;transform:none!important;pointer-events:none;
  clip-path:inset(0 0 0 100% round 22px);transition:clip-path .42s cubic-bezier(.3,0,.2,1)}
html:not(.dinerosita) .titulo-chico #bfBarra.bf-barra.on{clip-path:inset(0 0 0 0 round 22px);pointer-events:auto}
html:not(.dinerosita) .titulo-chico #bfBarra.bf-barra:not(.lleno) .busca-graf-x{display:none!important}
/* la ✕ para borrar lo escrito, gris y chica como en iOS */
html:not(.dinerosita) .titulo-chico #bfBarra.bf-barra .busca-graf-x{flex:0 0 19px;width:19px;height:19px;margin-left:6px;background:var(--dim);color:var(--solido)}
html:not(.dinerosita) .titulo-chico #bfBarra.bf-barra .busca-graf-x svg{width:10px;height:10px;stroke-width:3.4}
/* mientras se busca: el calendario en círculo, sin título chico y la lupa como ✕ */
html:has(#bfBarra.bf-barra.on) .tc-cal{width:44px!important}
html:has(#bfBarra.bf-barra.on) .tc-mes{opacity:0;transition-delay:0s}
html:has(#bfBarra.bf-barra.on) .titulo-chico .tc-t{opacity:0!important;pointer-events:none!important}
.tc-lupa svg{position:absolute;transition:opacity .2s ease,transform .3s cubic-bezier(.3,1.4,.4,1)}
.tc-lupa .tl-x{opacity:0;transform:rotate(-90deg) scale(.6)}
html:has(#bfBarra.bf-barra.on) .tc-lupa .tl-lupa{opacity:0;transform:rotate(90deg) scale(.6)}
html:has(#bfBarra.bf-barra.on) .tc-lupa .tl-x{opacity:1;transform:none}

/* ══ Búsqueda en toda la app: su pantalla, encima de la pestaña ══ */
#bsc{position:fixed;inset:0;z-index:39;display:none;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:var(--bsc-bg,#000);color:var(--fg);font-family:var(--f);
  padding:calc(max(env(safe-area-inset-top), 20px) + var(--baja) + 64px) calc(16px + env(safe-area-inset-right)) calc(120px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left))}
html.bsc-on #bsc{display:block}
/* entra deslizándose un poco hacia arriba mientras aparece, y sale al revés */
#bsc.bq-in{animation:bqIn .3s cubic-bezier(.2,.8,.2,1)}
#bsc.bq-sale{animation:bqOut .19s ease forwards;pointer-events:none}
@keyframes bqIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes bqOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(10px)}}
/* al escribir, lo que cambia entra con un fundido corto; lo que sigue igual queda quieto */
#bsc .bq-ent{animation:bqEnt .2s ease}
@keyframes bqEnt{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* sin escribir, si todo entra, la pantalla no se desliza */
#bsc.bq-sinq{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
#bsc.bq-quieto{overflow-y:hidden}
html.bsc-on body{overflow:hidden}
/* la barra: con su vidrio, sin calendario ni título; el campo va de la izquierda hasta la ✕ */
html.bsc-on .titulo-chico::before{opacity:1!important}
html.bsc-on .titulo-chico .tc-cal{opacity:0;pointer-events:none}
html.bsc-on:not(.dinerosita) .titulo-chico #bfBarra.bf-barra{left:calc(16px + env(safe-area-inset-left))}
#bsc .bq-h{display:flex;align-items:baseline;justify-content:space-between;margin:24px 16px 7px}
#bsc .bq-sec:first-child .bq-h{margin-top:6px}
#bsc .bq-h b{font:600 15px var(--f);color:var(--dim2)}
#bsc .bq-h a{font:400 15px var(--f);color:rgb(var(--ac));cursor:pointer;-webkit-tap-highlight-color:transparent}
#bsc .bq-card{background:var(--solido);border-radius:var(--rG);overflow:hidden}
#bsc .bq-r{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 14px 8px 16px;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
#bsc .bq-r + .bq-r::before{content:"";position:absolute;left:58px;right:16px;top:0;height:.5px;background:var(--sep-lista)}
#bsc .bq-r:active,#bsc .bq-top:active,#bsc .bq-mov .mv:active{background-color:rgba(var(--ac),.07)}
#bsc .bq-i{flex:0 0 30px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:rgb(var(--onAc,255,255,255));overflow:hidden}
#bsc .bq-i svg{width:19px;height:19px}
#bsc .bq-i.bq-hist{background:none;color:rgb(var(--ac));flex-basis:22px;width:22px;height:22px}
#bsc .bq-i.bq-hist svg{width:20px;height:20px}
/* las recientes, compactas como en Mail */
#bsc .bq-recs .bq-r{min-height:42px;padding:0 4px;gap:12px}
#bsc .bq-recs .bq-t b{font-size:16px}
#bsc .bq-recs .bq-r + .bq-r::before{left:0;right:0}
#bsc .bq-recs .bq-r:active{background:none;opacity:.55}
/* producto y etiqueta en el acento, el lugar en su variante: como en Resumen */
#bsc .bq-i.bq-ac{background:rgb(var(--ac))}
#bsc .bq-i.bq-lug{background:rgb(var(--acO,var(--ac)))}
#bsc .bq-fila .bq-ct{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;background:rgb(var(--ac));color:rgb(var(--onAc,255,255,255))}
#bsc .bq-fila .bq-ct svg{width:15px;height:15px}
#bsc .bq-mejor{position:relative}
#bsc .bq-mejor::before{content:"";position:absolute;left:16px;top:14px;bottom:14px;width:5px;border-radius:3px;background:var(--cb,#8e8e93)}
#bsc .bq-mejor .bq-top{padding-left:34px}
#bsc .bq-mejor .bq-stats{margin-left:34px}
#bsc .bq-mejor .bq-acc{padding-left:34px}
#bsc .bq-i .ico-t{width:100%;height:100%;border-radius:0;display:flex;align-items:center;justify-content:center;background:none}
#bsc .bq-i .ico-t svg{width:60%;height:60%}
#bsc .bq-rec .bq-t b{font-weight:400}
#bsc .bq-t{flex:1 1 auto;min-width:0}
#bsc .bq-t b{display:block;font:500 16px var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bsc .bq-t i{display:block;font:400 13px var(--f);font-style:normal;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bsc .bq-v{flex:0 0 auto;font:400 16px var(--f);color:var(--dim2);font-variant-numeric:tabular-nums;text-align:right;line-height:1.2}
#bsc .bq-v small{display:block;font:600 12.5px var(--f)}
#bsc .bq-ch{width:14px;height:14px;color:var(--dim2);flex:0 0 auto}
#bsc .bq-top{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent}
#bsc .bq-top .bq-i,#bsc .bq-top .tile-cta{flex:0 0 44px;width:44px;height:44px}
#bsc .bq-top .bq-i svg,#bsc .bq-top .tile-cta svg{width:26px;height:26px}
#bsc .bq-top .bq-t b{font:600 18px var(--f)}
#bsc .bq-stats{display:flex;gap:10px;border-top:.5px solid var(--sep-lista);margin:0 16px}
#bsc .bq-stats span{flex:1;min-width:0;padding:9px 0 12px}
#bsc .bq-stats i{display:block;font:400 12.5px var(--f);font-style:normal;color:var(--dim2)}
#bsc .bq-stats b{display:block;font:600 15px var(--f);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bsc .bq-acc{display:flex;gap:8px;padding:0 16px 14px}
#bsc .bq-acc span{flex:1;text-align:center;padding:9px 0;border-radius:12px;background:rgba(var(--ac),.12);color:rgb(var(--ac));font:600 14px var(--f);cursor:pointer;-webkit-tap-highlight-color:transparent}
#bsc .bq-acc span:active{background:rgba(var(--ac),.2)}
#bsc .bq-pie{display:flex;justify-content:space-between;gap:10px;padding:12px 16px;font:400 14px var(--f);color:var(--dim2);border-top:.5px solid var(--sep-lista)}
#bsc .bq-pie b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
#bsc .bq-fila{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;margin:0 calc(-16px - env(safe-area-inset-right)) 0 calc(-16px - env(safe-area-inset-left));padding:0 16px;scrollbar-width:none}
#bsc .bq-fila::-webkit-scrollbar{display:none}
#bsc .bq-fila + .bq-fila{margin-top:8px}
#bsc .bq-fila > span{flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:var(--solido);font:500 15px var(--f);cursor:pointer;-webkit-tap-highlight-color:transparent}
#bsc .bq-fila > span:active{transform:scale(.96)}
#bsc .bq-fila .bq-gl{display:inline-flex;width:18px;height:18px;color:rgb(var(--ac))}
#bsc .bq-fila .bq-gl svg{width:100%;height:100%}
#bsc .bq-fila .ico-t{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;background:var(--ic)}
#bsc .bq-fila .ico-t svg{width:14px;height:14px}
#bsc .bq-fila .bq-gl-lug{color:#bf5af2}
#bsc .bq-mov .mv{background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
#bsc .bq-mov .mv + .mv{border-top:.5px solid var(--sep-lista)}
#bsc .bq-mov .bfijo,#bsc .bq-mov [data-fijo]{pointer-events:none}
/* lo que coincide, resaltado como en Mail */
#bsc mark{background:rgba(var(--ac),.2);color:inherit;border-radius:3px;padding:0 1px;margin:0 -1px}
#bsc .bq-tot{font:600 15px var(--f);color:var(--dim2);font-variant-numeric:tabular-nums}
#bsc .bq-mas{padding:13px 16px;border-top:.5px solid var(--sep-lista);font:400 15px var(--f);color:rgb(var(--ac));cursor:pointer;-webkit-tap-highlight-color:transparent}
#bsc .bq-mas:active{background-color:rgba(var(--ac),.07)}
#bsc .bq-resumen{margin:12px 16px 0;font:400 13px var(--f);color:var(--dim2);text-align:center;font-variant-numeric:tabular-nums}
#bsc .bq-vacia{display:flex;flex-direction:column;align-items:center;text-align:center;margin:18vh 24px 0;color:var(--dim2)}
#bsc .bq-vacia svg{width:54px;height:54px;margin-bottom:14px;opacity:.6}
#bsc .bq-vacia b{font:700 20px var(--f);color:var(--fg);letter-spacing:-.2px}
#bsc .bq-vacia i{margin-top:6px;font:400 15px/1.35 var(--f);font-style:normal;max-width:280px}

/* Resumen: etiquetas, lugares y compras frecuentes muestran 3; "Ver todos" despliega el resto */
.et-card .et-mas{display:block;width:100%;padding:13px 16px;border:0;border-top:.5px solid var(--sep-lista);background:none;text-align:left;
  font:400 15px var(--f);color:rgb(var(--ac));cursor:pointer;-webkit-tap-highlight-color:transparent}
.et-card .et-mas:active{background-color:rgba(var(--ac),.07)}

/* la ficha de una categoría: el presupuesto con su barrita (naranja cerca del tope, roja pasado) */
#ficha .reng.cat-tope{flex-wrap:wrap;row-gap:8px;padding-top:12px;padding-bottom:13px}
#ficha .cat-barra{flex:0 0 100%;height:6px;border-radius:3px;background:rgba(var(--gris-tema,142,142,147),.18);overflow:hidden}
#ficha .cat-barra i{display:block;height:100%;border-radius:3px;background:rgb(var(--ac))}
#ficha .cat-barra.cerca i{background:var(--yel)}
#ficha .cat-barra.pasa i{background:var(--red)}
#ficha .cat-dn{display:inline-block;width:17px;height:17px;margin-right:8px;vertical-align:-3px}
#ficha .cat-dn svg{width:100%;height:100%;display:block}
#ficha .cat-dn-lug{color:#bf5af2}
#ficha .cat-dn-tag{color:rgb(var(--ac2))}
/* los botones de la barra de arriba y el filtro de Billetera, de vidrio (lo más cerca del de iOS 26 que se puede sin
   deformar lo de atrás): casi transparentes, dejan pasar el color de atrás aclarado y saturado, con un borde de luz
   más fuerte arriba a la izquierda y más suave abajo a la derecha, un brillo interno y una sombra amplia; el ícono
   apagado en el color del texto. Prendidos, igual, con la cápsula del acento */
.tc-btn::before,.mov-head .catbar .filt-btn::before{display:none!important}
html .mov-head .catbar .filt-btn:not(.on){color:var(--fg)!important}
html.claro .tc-btn:not(.fuera):not(.apretado),html.claro .tc-cal.fuera,html.claro .mov-head .catbar .filt-btn:not(.abierto):not(.apretado){background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,.08) 45%,rgba(255,255,255,.22))!important;
 -webkit-backdrop-filter:blur(6px) saturate(210%) brightness(1.08);backdrop-filter:blur(6px) saturate(210%) brightness(1.08);
 box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(255,255,255,.55),inset 0 0 0 .5px rgba(255,255,255,.6),inset 0 0 14px rgba(255,255,255,.35),0 0 0 .5px rgba(0,0,0,.08),0 10px 26px rgba(30,40,80,.12)!important}
html.oscuro .tc-btn:not(.fuera):not(.apretado),html.oscuro .tc-cal.fuera,html:not(.claro) .tc-btn:not(.fuera):not(.apretado),html.oscuro .mov-head .catbar .filt-btn:not(.abierto):not(.apretado){background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 45%,rgba(255,255,255,.06))!important;
 -webkit-backdrop-filter:blur(6px) saturate(190%) brightness(1.2);backdrop-filter:blur(6px) saturate(190%) brightness(1.2);
 box-shadow:inset 1px 1px 0 rgba(255,255,255,.28),inset -1px -1px 0 rgba(255,255,255,.1),inset 0 0 14px rgba(255,255,255,.05),0 10px 26px rgba(0,0,0,.45)!important}
/* las cabeceras de día, pegadas justo debajo de la barra de arriba (la nueva, más alta: la de antes las dejaba detrás),
   con la franja desenfocada estirada hasta cubrirlas; y por debajo de la pantalla de búsqueda */
html:not(.dinerosita) .mov .mv-gr > .mv-div{top:calc(max(env(safe-area-inset-top), 20px) + var(--baja) + 58px)}
html:not(.dinerosita):has(#v-gastos.on) .borde-sup{display:block!important;height:calc(max(env(safe-area-inset-top), 20px) + var(--baja) + 96px);
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent)}
html.bsc-on .mov .mv-gr > .mv-div,html.bsc-on .borde-sup{visibility:hidden}
/* el filtro de "En qué se fue", igual que la cinta de al lado ("Este mes / Promedio"): su color, su vidrio y su
   borde de luz, en todos los estados (también apretado, con el menú abierto o prendido, que antes se pintaba entero
   del acento); prendido, la cápsula del acento adentro */
html.claro .filtro-graf,html.claro .filtro-graf.on,html.claro .filtro-graf.abierto{background-color:rgba(255,255,255,.22)!important;
 background-image:linear-gradient(rgba(var(--ac),.07),rgba(var(--ac),.07)),radial-gradient(130% 120% at 50% -30%,rgba(255,255,255,.5),rgba(255,255,255,0) 60%)!important;
 -webkit-backdrop-filter:blur(2px) saturate(170%)!important;backdrop-filter:blur(2px) saturate(170%)!important;box-shadow:none!important}
html.oscuro .filtro-graf,html.oscuro .filtro-graf.on,html.oscuro .filtro-graf.abierto,html:not(.claro) .filtro-graf{background-color:rgba(128,128,138,.14)!important;
 background-image:linear-gradient(rgba(var(--ac),.1),rgba(var(--ac),.1)),radial-gradient(130% 120% at 50% -30%,rgba(255,255,255,.1),rgba(255,255,255,0) 60%)!important;
 -webkit-backdrop-filter:blur(2px) saturate(160%)!important;backdrop-filter:blur(2px) saturate(160%)!important;box-shadow:none!important}
.filtro-graf{position:relative}
.filtro-graf::before,.filtro-graf.on::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;display:block!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.1) 16%,rgba(255,255,255,.02) 42%,rgba(255,255,255,.02) 62%,rgba(255,255,255,.2) 86%,rgba(255,255,255,.6))}
html.claro .filtro-graf::before{background:linear-gradient(135deg,#fff,rgba(255,255,255,.55) 28%,rgba(0,0,0,.05) 58%,rgba(255,255,255,.4) 80%,rgba(255,255,255,.95))}
html .filtro-graf:not(.on){color:var(--fg)!important}
html .filtro-graf.on{padding:0 13px 0 4px;color:var(--fg)!important}
html .filtro-graf.on .filt-t,html.claro .filtro-graf.on .filt-t{color:var(--fg)!important;margin-left:8px}
html .filtro-graf.on svg{width:44px;height:32px;padding:6px 0;box-sizing:border-box;border-radius:16px;background:rgb(var(--ac));color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}

/* la ficha de "Ver todos": las mismas filas que en Resumen */
#ficha .res-etiquetas .et-card{padding:0;background:var(--solido);border-radius:var(--rG);overflow:hidden}
#ficha .res-etiquetas .et-r{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 14px 0 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative}
#ficha .res-etiquetas .et-r + .et-r::before{content:"";position:absolute;left:56px;right:16px;top:0;height:.5px;background:var(--sep-lista,rgba(255,255,255,.1))}
#ficha .res-etiquetas .et-r:active{background-color:rgba(var(--ac),.07)}
#ficha .res-etiquetas .et-i{flex:0 0 28px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgb(var(--ac));color:#fff}
#ficha .res-etiquetas .et-i svg{width:17px;height:17px}
#ficha .res-etiquetas .et-n{flex:1 1 auto;min-width:0;font:500 16px var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ficha .res-etiquetas .et-n::before{content:"#";color:var(--dim2);margin-right:1px}
#ficha .res-etiquetas .et-p{flex:0 0 auto;font:400 13px var(--f);color:var(--dim2)}
#ficha .res-etiquetas .et-v{flex:0 0 auto;font:400 16px var(--f);color:var(--dim2);font-variant-numeric:tabular-nums}
#ficha .res-etiquetas .et-v.c-dim{color:var(--dim2)}
#ficha .res-etiquetas .et-ch{flex:0 0 auto;width:14px;height:14px;color:var(--dim2)}
#ficha .res-etiquetas .et-vacio{margin:0;padding:12px 16px;font:400 14px/1.45 var(--f);color:var(--dim2)}
#ficha .res-lugares .et-card{padding:0;background:var(--solido);border-radius:var(--rG);overflow:hidden}
#ficha .res-lugares .et-r{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 14px 0 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative}
#ficha .res-lugares .et-r + .et-r::before{content:"";position:absolute;left:56px;right:16px;top:0;height:.5px;background:var(--sep-lista,rgba(255,255,255,.1))}
#ficha .res-lugares .et-r:active{background-color:rgba(var(--ac),.07)}
#ficha .res-lugares .et-i{flex:0 0 28px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgb(var(--acO));color:#fff}
#ficha .res-lugares .et-i svg{width:17px;height:17px}
#ficha .res-lugares .et-n{flex:1 1 auto;min-width:0;font:500 16px var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ficha .res-lugares .et-n::before{content:"@";color:var(--dim2);margin-right:1px}
#ficha .res-lugares .et-p{flex:0 0 auto;font:400 13px var(--f);color:var(--dim2)}
#ficha .res-lugares .et-v{flex:0 0 auto;font:400 16px var(--f);color:var(--dim2);font-variant-numeric:tabular-nums}
#ficha .res-lugares .et-v.c-dim{color:var(--dim2)}
#ficha .res-lugares .et-ch{flex:0 0 auto;width:14px;height:14px;color:var(--dim2)}
#ficha .res-lugares .et-vacio{margin:0;padding:12px 16px;font:400 14px/1.45 var(--f);color:var(--dim2)}
#ficha .res-productos .et-card{padding:0;background:var(--solido);border-radius:var(--rG);overflow:hidden}
#ficha .res-productos .et-r{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 14px 0 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative}
#ficha .res-productos .et-r + .et-r::before{content:"";position:absolute;left:56px;right:16px;top:0;height:.5px;background:var(--sep-lista,rgba(255,255,255,.1))}
#ficha .res-productos .et-r:active{background-color:rgba(var(--ac),.07)}
#ficha .res-productos .et-i{flex:0 0 28px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgb(var(--ac));color:#fff}
#ficha .res-productos .et-i svg{width:17px;height:17px}
#ficha .res-productos .et-n{flex:1 1 auto;min-width:0;font:500 16px var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ficha .res-productos .et-n::before{content:none;color:var(--dim2);margin-right:1px}
#ficha .res-productos .et-p{flex:0 0 auto;font:400 13px var(--f);color:var(--dim2)}
#ficha .res-productos .et-v{flex:0 0 auto;font:400 16px var(--f);color:var(--dim2);font-variant-numeric:tabular-nums}
#ficha .res-productos .pr-v{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
#ficha .res-productos .et-v.c-dim{color:var(--dim2)}
#ficha .res-productos .et-ch{flex:0 0 auto;width:14px;height:14px;color:var(--dim2)}
#ficha .res-productos .et-vacio{margin:0;padding:12px 16px;font:400 14px/1.45 var(--f);color:var(--dim2)}
#ficha .res-productos .pr-r{min-height:58px;padding-top:6px;padding-bottom:6px}
#ficha .res-productos .pr-m{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
#ficha .res-productos .pr-m .et-n{flex:none}
#ficha .res-productos .pr-s{font:400 13px/1.3 var(--f);color:var(--dim2)}
#ficha .res-todo .et-i{color:rgb(var(--onAc,255,255,255))!important}
#ficha .res-todo{margin-top:14px}

/* ══ los ✕ y ✓ de las hojas (y la ✕ y "Editar" de las fichas): como los botones de arriba, de vidrio, con el ícono
   en el color del texto; el ✓ en el acento. Al apretarlos se agrandan y brillan, como la lupa ══ */
html.claro .cn-b.cn-x,html.claro .cn-b.cn-ok.off{background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,.08) 45%,rgba(255,255,255,.22))!important;
 -webkit-backdrop-filter:blur(6px) saturate(210%) brightness(1.08);backdrop-filter:blur(6px) saturate(210%) brightness(1.08);
 box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(255,255,255,.55),inset 0 0 0 .5px rgba(255,255,255,.6),inset 0 0 14px rgba(255,255,255,.35),0 0 0 .5px rgba(0,0,0,.08),0 10px 26px rgba(30,40,80,.12)!important}
html.oscuro .cn-b.cn-x,html.oscuro .cn-b.cn-ok.off,html:not(.claro) .cn-b.cn-x{background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 45%,rgba(255,255,255,.06))!important;
 -webkit-backdrop-filter:blur(6px) saturate(190%) brightness(1.2);backdrop-filter:blur(6px) saturate(190%) brightness(1.2);
 box-shadow:inset 1px 1px 0 rgba(255,255,255,.28),inset -1px -1px 0 rgba(255,255,255,.1),inset 0 0 14px rgba(255,255,255,.05),0 10px 26px rgba(0,0,0,.45)!important}
html .cn-b.cn-x{color:var(--fg)!important}
html .cn-b.cn-ok:not(.off){background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,0) 45%,rgba(255,255,255,.08)),rgb(var(--ac))!important;color:#fff!important;
 box-shadow:inset 1px 1px 0 rgba(255,255,255,.5),inset -1px -1px 0 rgba(255,255,255,.18),0 8px 20px rgba(var(--ac),.3)!important}
html .cn-b.cn-x::after,html .cn-b.cn-ok::after{display:none!important}
.cn-b.cn-x,.cn-b.cn-ok{transition:scale .55s cubic-bezier(.22,.9,.28,1.02),filter .5s cubic-bezier(.25,.8,.3,1),background-color .25s ease,color .25s ease}
.cn-b.cn-x:active,.cn-b.cn-ok:active{transform:none}
.cn-b.cn-x.apretado,.cn-b.cn-ok.apretado{scale:1.2}
html:not(.claro) .cn-b.cn-x.apretado,.cn-b.cn-ok.apretado{filter:brightness(1.3)}
html.claro .cn-b.cn-x.apretado{background:#fff!important}
/* el cartelito de "¿Querés descartar…?", pegado a la ✕, como el de Calendario */
#descartar{position:fixed;z-index:3000;width:min(286px,calc(100vw - 24px));padding:22px 18px 18px;border-radius:30px;
  background:rgba(44,44,48,.82);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12),0 18px 50px rgba(0,0,0,.5);
  transform-origin:24px 24px;opacity:0;scale:.6;pointer-events:none;transition:opacity .18s ease,scale .3s cubic-bezier(.3,1.3,.4,1)}
/* (escrito para oscuro: el claro va aparte, que la traducción automática lo oscurecía) */
html.claro #descartar{background:rgba(250,250,252,.85);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.7),0 0 0 .5px rgba(0,0,0,.06),0 18px 50px rgba(0,0,0,.18)}
html.claro #descartar p{color:#000}
html.claro #descartar button{background:rgba(120,120,128,.14);color:#e5362c}
#descartar.on{opacity:1;scale:1;pointer-events:auto}
#descartar p{margin:0 6px 16px;font:400 18px/1.3 var(--f);color:var(--fg);letter-spacing:-.01em}
#descartar button{display:block;width:100%;height:50px;border:0;border-radius:25px;background:rgba(120,120,128,.16);
  color:var(--red,#ff3b30);font:500 17px var(--f);cursor:pointer;-webkit-tap-highlight-color:transparent}
#descartar button:active{background:rgba(120,120,128,.28)}

/* el número grande con, al lado, el ojo tachado: solo con los montos ocultos */
.hero-fila{display:flex;align-items:center;gap:10px}
.hero-fila > .hero-val{min-width:0}
.ojo-ver{display:none;flex:0 0 34px;width:34px;height:34px;padding:0;border:0;border-radius:50%;align-items:center;justify-content:center;
  background:rgba(118,118,128,.2);color:var(--dim2);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:scale .3s cubic-bezier(.3,1.4,.4,1)}
.ojo-ver svg{width:19px;height:19px}
.ojo-ver:active{scale:.88}
html.montos-ocultos:not(.dinerosita) .ojo-ver{display:inline-flex}
/* ══════════ Hoja de carga: Ubicación y Etiquetas ══════════ */
/* mientras se escribe, debajo del renglón: el lápiz fijo y las que ya usaste como pastillas (las de la nota) */
#hojaMov .det-sug{display:flex;align-items:center;gap:6px;padding:0 0 12px 50px}
#hojaMov .det-sug[hidden]{display:none}
#hojaMov .g-hm1>.det-sug::before{display:none}
#hojaMov .det-sug .bs-sug{padding-right:16px}
#hojaMov .det-sug .bss{height:32px}
#hojaMov .det-sug .det-ed{display:flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;padding:0;border-radius:50%}
#hojaMov .det-sug .det-ed svg{width:15px;height:15px}
/* el mejor resultado, como el resumen de Apple Card: el primer dato grande y los demás como renglones de extracto */
#bsc .bq-cifras{margin:0 16px 0 34px;padding:0 0 14px}
#bsc .bq-cifras.con-filas{padding-bottom:2px}
#bsc .bq-cifras>i{display:block;font:400 13px var(--f);font-style:normal;color:var(--dim2)}
#bsc .bq-cifras>b{display:block;margin:3px 0 0;font:700 32px/1.1 var(--f);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bsc .bq-cifras.con-filas>b{margin-bottom:6px}
#bsc .bq-cifras>span{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-top:.5px solid var(--sep-lista)}
#bsc .bq-cifras>span:last-child{padding-bottom:12px}
#bsc .bq-cifras>span i{font:400 15px var(--f);font-style:normal;color:var(--fg)}
#bsc .bq-cifras>span b{font:500 15px var(--f);font-variant-numeric:tabular-nums;white-space:nowrap}
#bsc .bq-mejor .bq-acc{margin-top:0}
/* Pagar al lado de lo que hay que pagar: una cápsula como el ✓ de las hojas cuando se puede guardar (acento con vidrio) */
#bsc .bq-cifras .bq-c1{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:3px 0 6px}
#bsc .bq-cifras .bq-c1>b{display:block;margin:0;min-width:0;font:700 32px/1.1 var(--f);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bsc .bq-pagar{flex:0 0 auto;padding:7px 18px;border-radius:999px;font:600 15px var(--f);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,0) 45%,rgba(255,255,255,.08)),rgb(var(--ac));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.5),inset -1px -1px 0 rgba(255,255,255,.18),0 6px 16px rgba(var(--ac),.28);
  transition:scale .45s cubic-bezier(.22,.9,.28,1.02),filter .4s ease}
/* los botones de las fichas, como los de las hojas: el de color con el vidrio del ✓ y el gris con el vidrio de la ✕ */
html .fi-b.pri{background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,0) 45%,rgba(255,255,255,.08)),rgb(var(--ac))!important;
 box-shadow:inset 1px 1px 0 rgba(255,255,255,.5),inset -1px -1px 0 rgba(255,255,255,.18),0 8px 20px rgba(var(--ac),.3)!important}
html.oscuro .fi-b:not(.pri),html:not(.claro) .fi-b:not(.pri){background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 45%,rgba(255,255,255,.06))!important;
 -webkit-backdrop-filter:blur(6px) saturate(190%) brightness(1.2);backdrop-filter:blur(6px) saturate(190%) brightness(1.2);
 box-shadow:inset 1px 1px 0 rgba(255,255,255,.28),inset -1px -1px 0 rgba(255,255,255,.1),inset 0 0 14px rgba(255,255,255,.05),0 10px 26px rgba(0,0,0,.45)!important}
html.claro .fi-b:not(.pri){background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,.08) 45%,rgba(255,255,255,.22))!important;
 -webkit-backdrop-filter:blur(6px) saturate(210%) brightness(1.08);backdrop-filter:blur(6px) saturate(210%) brightness(1.08);
 box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(255,255,255,.55),inset 0 0 0 .5px rgba(255,255,255,.6),inset 0 0 14px rgba(255,255,255,.35),0 0 0 .5px rgba(0,0,0,.08),0 10px 26px rgba(30,40,80,.12)!important}
/* al apretarlos, como el ✓ y la ✕: se agrandan y brillan (los anchos, un poco menos) */
.fi-b,#bsc .bq-pagar{transition:scale .55s cubic-bezier(.22,.9,.28,1.02),filter .5s cubic-bezier(.25,.8,.3,1),background-color .25s ease}
html .fi-b:active{transform:none}
.fi-b.apretado{scale:1.06}
#bsc .bq-pagar.apretado{scale:1.12}
.fi-b.pri.apretado,#bsc .bq-pagar.apretado,html:not(.claro) .fi-b.apretado{filter:brightness(1.3)}
html.claro .fi-b:not(.pri).apretado{background:#fff!important}
/* ══════════ Estilo común, como iOS 26: hojas, botones, cintas y menús ══════════
   Cada familia va en una sola regla con la lista de lo que la usa: al cambiar algo, cambia en todos lados */

/* ── Hojas (la de movimiento, los editores, las fichas, Más filtros y la del mes): fondo liso, sin vidrio ni la página
   detrás y sin la barrita; campos y
   tarjetas blancos lisos (en oscuro, gris elevado) sin borde; títulos de sección, íconos y lo que todavía no se
   escribió en el gris secundario de iOS (el título del medio, sin cinta, ya es el de Calendario: ver .hj-tit) ── */
html.claro .hj,html.claro .fs-box,html.claro .mesdrop,html.claro .mesdrop.on,html.claro #ficha{background:#f3f2f6!important;background-image:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border-color:transparent!important;box-shadow:0 -10px 40px rgba(0,0,0,.12),0 120px 0 #f3f2f6!important}
html.oscuro .hj,html.oscuro .fs-box,html.oscuro .mesdrop,html.oscuro .mesdrop.on,html.oscuro #ficha{background:#1c1c1e!important;background-image:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border-color:transparent!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 -10px 40px rgba(0,0,0,.5),0 120px 0 #1c1c1e!important}
.barrita,#ficha .fi-cab::before{display:none!important}
/* los campos y las tarjetas, iguales en todas las hojas (la de movimiento, los editores, las fichas y Más filtros):
   blancos lisos (en oscuro, gris elevado) y sin contorno */
html.claro :is(.grupo-r,.hm-pill,.fi-del){background:#fff!important;border-color:transparent!important}
html.oscuro :is(.grupo-r,.hm-pill,.fi-del){background:#2c2c2e!important;border-color:transparent!important}
html.claro .hj :is(.hm-sec,.r-ico){color:rgba(60,60,67,.6)!important}
html.oscuro .hj :is(.hm-sec,.r-ico){color:rgba(235,235,245,.6)!important}
html.claro .hj :is(input,textarea):not(#hmMonto)::placeholder{color:rgba(60,60,67,.6)!important}
html.oscuro .hj :is(input,textarea):not(#hmMonto)::placeholder{color:rgba(235,235,245,.6)!important}
/* al correr el contenido, la cabecera es de vidrio incoloro y algo transparente, sin línea abajo; y la hoja no rebota al
   llegar arriba (al rebotar, la cabecera bajaba con el contenido) */
html.claro .hj .hj-cab::before,html.claro .fs-top::before,html.claro .fi-cab::after{background:rgba(255,255,255,.44)!important;border-bottom-color:transparent!important;
  -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%)}
html.oscuro .hj .hj-cab::before,html.oscuro .fs-top::before,html.oscuro .fi-cab::after{background:rgba(28,28,30,.45)!important;border-bottom-color:transparent!important;
  -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%)}
.hj{overscroll-behavior:none!important}
/* lo que cambia (el estado y el importe de una cuenta al pagar, el renglón de "Falta pagar") entra deslizándose */
.entra-t{animation:entraTexto .42s cubic-bezier(.3,1,.4,1)}
@keyframes entraTexto{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
/* Más filtros, como las otras hojas: abre entera, sin la barrita y con la cabecera a 16 px del borde; al pie,
   Restablecer en rojo (apagado mientras la hoja está como viene) */
.fs-grip{display:none}
.fs-top{padding-top:16px}
.fs-reset{width:100%;justify-content:center;margin:0;border:0;background:none;color:var(--red);font:400 16px var(--f);letter-spacing:-.01em;
  -webkit-tap-highlight-color:transparent;transition:opacity .2s ease}
.fs-reset:disabled{opacity:.35;cursor:default}
/* en el menú de filtro, "Quitar filtros" en rojo, como lo que borra en los otros menús */
.catdrop .fp-quitar,.catdrop .fp-quitar .fp-ic{color:var(--red)}
.catdrop .fp-quitar[hidden]{display:none}

/* ── Botón de vidrio neutro: las ✕, los botones del encabezado, los de filtro (Billetera y Resumen), los grises de las
   fichas y la barra de búsqueda. Blanco transparente con un borde finito y una sombra suave; en oscuro, gris. Prendidos
   (el calendario en otro mes, el filtro con filtros) es el mismo vidrio con la cápsula del acento adentro; al apretarlo
   se llena ── */
/* el vidrio (relleno y sombra), en un solo lugar: lo usan estos botones y las cintas */
html.claro{--vn-bg:linear-gradient(180deg,rgba(255,255,255,.59),rgba(250,249,252,.5));
  --vn-sh:0 0 0 .5px rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.05),0 6px 16px rgba(0,0,0,.06),inset 0 1px 0 #fff}
html.oscuro{--vn-bg:linear-gradient(180deg,rgba(61,61,65,.59),rgba(50,50,54,.53));
  --vn-sh:0 0 0 .5px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.3)}
html:is(.claro,.oscuro) .cn-b.cn-x:not(.apretado),html:is(.claro,.oscuro) .fi-b:not(.pri):not(.apretado),
html:is(.claro,.oscuro) .mov-head .catbar .filt-btn.filt-btn:not(.apretado),html:is(.claro,.oscuro) .filtro-graf:not(.apretado),
html:is(.claro,.oscuro) .qch.qch,
html:is(.claro,.oscuro) .titulo-chico .tc-btn:not(.fuera):not(.apretado),html:is(.claro,.oscuro) .titulo-chico .tc-cal.fuera,
html:is(.claro,.oscuro) .titulo-chico #bfBarra.bf-barra{background:var(--vn-bg)!important;border-color:transparent!important;
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);box-shadow:var(--vn-sh)!important}
/* apretado: el mismo vidrio lleno de blanco (en oscuro, el mismo gris, que además se ilumina); cada uno se agranda */
html.claro .cn-b.cn-x.apretado,html.claro .fi-b:not(.pri).apretado,html.claro .titulo-chico .tc-btn.apretado:not(.fuera),
html.claro .mov-head .catbar .filt-btn.apretado,html.claro .filtro-graf.apretado{background:#fff!important;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 0 0 .5px rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.05),0 6px 16px rgba(0,0,0,.08),inset 0 1px 0 #fff!important}
html.oscuro .cn-b.cn-x.apretado,html.oscuro .fi-b:not(.pri).apretado,html.oscuro .titulo-chico .tc-btn.apretado:not(.fuera),
html.oscuro .mov-head .catbar .filt-btn.apretado,html.oscuro .filtro-graf.apretado{
  background:linear-gradient(180deg,rgba(61,61,65,.9),rgba(50,50,54,.84))!important;
  box-shadow:0 0 0 .5px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.14),0 6px 16px rgba(0,0,0,.3)!important}
html .cn-b.cn-x{color:var(--fg)!important}
html .filtro-graf::before,html .filtro-graf.on::before{display:none!important}
.filtro-graf{gap:8px}
/* ── Botones de elegir uno (las quincenas de Gasto diario): el vidrio neutro con el texto en la tinta del modo, como las
   palabras de las cintas; la elegida se rellena (en un fundido) con el vidrio del acento, el del ✓ ── */
html .qch::before{display:none!important}
html .qch.qch:not(.on){color:var(--fg)!important}
html .qch.qch.on{color:rgb(var(--onAc,255,255,255))!important;box-shadow:0 8px 20px rgba(var(--ac),.3)!important}
.qch.qch{font-weight:500;transition:color .525s ease-out,box-shadow .525s ease-out}
.qch::after{background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,0) 45%,rgba(255,255,255,.08)),rgb(var(--ac));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.5),inset -1px -1px 0 rgba(255,255,255,.18)}
/* la ✕ y el ✓ del tamaño de los de Calendario (17 y 19 pt contando las puntas redondas), con trazo de 2 px; la ✕ para
   cerrar la búsqueda, con el mismo trazo fino */
.cn-b.cn-x svg{width:33px!important;height:33px!important;stroke-width:1.4!important}
.cn-b.cn-ok svg{width:29px!important;height:29px!important;stroke-width:1.65!important}
.tc-lupa .tl-x{stroke-width:1.7}
/* en la búsqueda, la lupa en la tinta del modo y lo que falta escribir en gris */
.titulo-chico #bfBarra .busca-graf-l{color:var(--fg)}
html.claro #bfInp::placeholder{color:rgba(60,60,67,.6)}
html.oscuro #bfInp::placeholder{color:rgba(235,235,245,.6)}

/* ── Botón apagado: el ✓ mientras no hay nada para guardar. Gris con el tilde blanco (en oscuro, apagado); cuando se
   puede guardar es del acento ── */
html.claro .cn-b.cn-ok.off{background:linear-gradient(180deg,#e0dfe4,#d3d2d7)!important;color:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:0 0 0 .5px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.85),0 1px 2px rgba(0,0,0,.05)!important}
html.oscuro .cn-b.cn-ok.off{background:linear-gradient(180deg,#3d3d41,#323236)!important;color:rgba(235,235,245,.3)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:0 0 0 .5px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.3)!important}

/* ── Cintas (como la de Mail): el mismo vidrio que los botones (--vn-bg), la pastilla gris lisa y las palabras en la
   tinta del modo. La de la hoja de movimiento es igual, solo más alta (abajo) ── */
/* sin desenfoque propio: en Safari, lo que tiene desenfoque recorta lo que le sobresale (la lente al viajar se pasa del
   borde, y su sombra quedaba cortada); detrás de las cintas no pasa nada, y en la hoja ya desenfoca la cabecera */
html:is(.claro,.oscuro) .cinta.cinta{background:var(--vn-bg)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:var(--vn-sh)!important}
.cinta.cinta::before{display:none!important}
html.claro .cinta.cinta:not(.arrastrando) .ps-ind{background:#e3e2e8!important;box-shadow:none!important}
html.oscuro .cinta.cinta:not(.arrastrando) .ps-ind{background:rgba(255,255,255,.16)!important;box-shadow:none!important}
html.claro .cinta.cinta :is(.cinta-capa-t,.cinta-capa-b){color:#000!important}
html.oscuro .cinta.cinta :is(.cinta-capa-t,.cinta-capa-b){color:#fff!important}
.cinta.cinta :is(.ps,.sgc){font-weight:500!important}
/* la de la hoja de movimiento: un poco más alta que los botones y centrada con ellos */
#hojaMov #hmSeg{top:14px!important;height:48px!important;padding:3px!important}
#hojaMov #hmSeg .ps{height:42px!important}
#hojaMov #hmSeg .ps-ind{top:3px!important;bottom:3px!important;left:3px!important;width:calc((100% - 6px)/2)!important}
#hojaMov #hmSeg .cinta-capa{padding:3px!important}
#hojaMov #hmSeg :is(.ps,.sgc){font-size:15px!important;letter-spacing:-.01em}

/* ── Los menús que salen de un botón o al mantener apretado (los de la hoja, el de acciones —las etiquetas de un producto,
   Pagar, el filtro de "En qué se fue", el tope—, las vistas previas, el de filtros y su submenú, y el del osito): bien
   redondeados y con el vidrio de los carteles (ver "Avisos, carteles y menús"). El aviso de abajo tiene el suyo ── */
/* las medidas de todos los menús: el redondeo; a qué distancia de los bordes va la cápsula de la opción apretada (por
   los cuatro lados: arriba en la primera, abajo en la última); y, dentro de la cápsula, dónde empieza lo que dice. Así
   la curva de la cápsula sigue la de las esquinas del menú, como en iOS 26 (ver "Las opciones de todos los menús") */
:root{--menu-r:34px;--menu-in:10px;--menu-pad:14px;--menu-tx:calc(var(--menu-in) + var(--menu-pad))}
/* avisos y carteles: el alto de los botones, el margen alrededor y el redondeo que los acompaña */
:root{--aviso-b:48px;--aviso-pad:16px;--aviso-r:calc(var(--aviso-b) / 2 + var(--aviso-pad))}
.menu-hoja,.menu-caja,.catdrop{border-radius:var(--menu-r)!important}
.menu-hoja,.menu-caja,.catdrop{border:0!important}
html.claro .toast:not(.bad){background-image:none!important;border:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 .5px rgba(0,0,0,.14),0 14px 44px rgba(0,0,0,.14)!important}
html.claro .toast:not(.bad){background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%)}
html.oscuro .toast:not(.bad){background-color:rgba(52,52,58,.78)!important}
html.oscuro .toast:not(.bad){-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%)}
html.oscuro .toast:not(.bad){background-image:none!important;border:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 .5px rgba(255,255,255,.12),0 14px 44px rgba(0,0,0,.45)!important}

/* ── Campos de texto: la cruz para borrar ── */
/* la cruz para borrar el campo aparece creciendo desde la mitad y se va achicándose, como en iOS */
.limpiar{opacity:0;scale:.5;transition:opacity .2s ease,scale .25s cubic-bezier(.3,1.3,.5,1),display .25s allow-discrete}
input:focus:not(:placeholder-shown) + .limpiar{opacity:1;scale:1}
@starting-style{input:focus:not(:placeholder-shown) + .limpiar{opacity:0;scale:.5}}

/* ── Hoja de movimiento ── */
/* las pastillas de ubicación y etiquetas se desvanecen al pasar junto al lápiz (y en el borde derecho), en vez de
   cortarse con una línea recta */
#hojaMov .det-sug{gap:0}
#hojaMov .det-sug .bs-sug{padding-left:10px;-webkit-mask:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 16px),transparent);
  mask:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 16px),transparent)}
/* el autorrellenar como el de Calendario: un panel de vidrio transparente (lo de atrás se ve desenfocado), más angosto
   y corrido hacia adentro, bien redondeado y con borde finito; el título y lo secundario en gris claro, la barra de
   color de 4 px, los títulos en una línea (con … si no entran) y las líneas entre renglones sin tocar los bordes */
.hm-blk #hmSug{left:24px;right:18px;padding:12px 0 6px;border-radius:32px;
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%)}
html.claro .hm-blk #hmSug{background:rgba(255,255,255,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 .5px rgba(0,0,0,.18),0 14px 40px rgba(0,0,0,.12)}
html.oscuro .hm-blk #hmSug{background:rgba(44,44,48,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 .5px rgba(255,255,255,.14),0 14px 40px rgba(0,0,0,.45)}
#hmSug .sg-t{margin:0 18px 4px 19px;font-size:13px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.claro #hmSug :is(.sg-t,.sg-n,.sg-d){color:rgba(60,60,67,.6)}
html.oscuro #hmSug :is(.sg-t,.sg-n,.sg-d){color:rgba(235,235,245,.6)}
#hmSug .hm-sg{padding:8px 20px 8px 31px}
#hmSug .hm-sg::before{left:20px;width:4px;border-radius:2px}
#hmSug .hm-sg+.hm-sg::after{left:31px;right:20px}
#hmSug .sg-n{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Avisos, carteles y menús ── */
/* los avisos (descartar y confirmar), los carteles (abajo) y todos los menús, con el mismo vidrio, como los de Calendario:
   transparente (lo de atrás se ve desenfocado), un borde finito y, en avisos y carteles, los botones grises translúcidos
   en cápsula, más bajos, con la letra sin negrita */
#descartar{width:min(262px,calc(100vw - 24px))}
html.claro #descartar,html.claro #modalConf .modal-box.conf,html.claro .catnuevo.hj.cartel,
html.claro .menu-hoja,html.claro .menu-caja,html.claro .catdrop:not(#catDrop),html.claro #catDrop::before,html.claro #catDrop .fp-subc{background:rgba(255,255,255,.55)!important;border-color:transparent!important;
  -webkit-backdrop-filter:blur(14px) saturate(180%)!important;backdrop-filter:blur(14px) saturate(180%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 .5px rgba(0,0,0,.16),0 18px 50px rgba(0,0,0,.14)!important}
html.oscuro #descartar,html.oscuro #modalConf .modal-box.conf,html.oscuro .catnuevo.hj.cartel,
html.oscuro .menu-hoja,html.oscuro .menu-caja,html.oscuro .catdrop:not(#catDrop),html.oscuro #catDrop::before,html.oscuro #catDrop .fp-subc{background:rgba(40,40,44,.55)!important;border-color:transparent!important;
  -webkit-backdrop-filter:blur(14px) saturate(180%)!important;backdrop-filter:blur(14px) saturate(180%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 .5px rgba(255,255,255,.14),0 18px 50px rgba(0,0,0,.5)!important}
html #descartar button,.cartel-b,#modalConf .conf-op{height:var(--aviso-b);border-radius:calc(var(--aviso-b) / 2);font-weight:400;font-size:17px;letter-spacing:-.02em}
html.claro #descartar button,html.claro .cartel-b,html.claro #modalConf .conf-op{background:rgba(120,120,128,.2)}
html.oscuro #descartar button,html.oscuro .cartel-b,html.oscuro #modalConf .conf-op{background:rgba(120,120,128,.3)}
/* lo que borra, en el mismo rojo en los avisos y los carteles */
html.claro{--rojo-b:#e5362c}
html.oscuro{--rojo-b:#ff6b62}
html #modalConf .conf-op.rojo,html #descartar button,html .hj.cartel .cn-acc .cn-del{color:var(--rojo-b)}
/* la pregunta, igual en los dos avisos: sin detalle, en letra normal; con detalle, en negrita y el detalle en gris debajo */
#descartar p,#modalConf .conf-t{font:400 17px/22px var(--f);letter-spacing:-.02em;color:var(--fg)}
#modalConf.con-detalle .conf-t,#modalConf.eligiendo .conf-t{font-weight:600}
#modalConf .conf-d{font:400 15px/20px var(--f);letter-spacing:-.01em;color:var(--dim2)}
#descartar{padding:22px var(--aviso-pad) var(--aviso-pad);border-radius:var(--aviso-r)}
#descartar p{margin:0 14px 22px}
/* el aviso de eliminar (ver confirmar y elegir): la pregunta a la izquierda y abajo un botón ancho por opción, apilados;
   sin Cancelar (tocar afuera cancela) */
#modalConf .modal-box.conf{width:calc(100vw - 56px);max-width:320px;padding:24px var(--aviso-pad) var(--aviso-pad);border-radius:var(--aviso-r)}
#modalConf .conf-txt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0 14px;text-align:left}
#modalConf.eligiendo #confUno,#modalConf:not(.eligiendo) #confVarias{display:none}
#modalConf .conf-ops{display:flex;flex-direction:column;gap:8px;margin-top:22px}
#modalConf .conf-op{width:100%;border:none;margin:0;color:var(--fg);font-family:var(--f);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .15s ease,transform .15s ease}
#modalConf .conf-op:active{transform:scale(.98);filter:brightness(1.1)}
/* al cerrarse, se desvanece y se achica apenas, como la vista previa (ver cerrarConf) */
#modalConf.saliendo{display:flex;pointer-events:none}
#modalConf.saliendo .modal-box.conf{opacity:0;transform:scale(.94);transition:opacity .2s ease,transform .25s ease}
/* los carteles: los editores cortos (tarjeta y cuenta, préstamo, pagar, cargar, el tope y una etiqueta) como los
   carteles con campos de iOS 26. Centrados en lo que se ve (con el teclado abierto, en lo que queda arriba de él: ver
   --vvh-hoja en teclado.js), el título al medio, los campos en gris y abajo Cancelar y Guardar (del acento cuando se
   puede guardar; antes, apagado). Aparecen creciendo apenas, se van desvaneciéndose y no se cierran tocando afuera (ver
   hojas.js). Si no entran, se desplaza lo del medio y el título y los botones quedan quietos */
.catnuevo.hj.cartel{--cartel-arr:env(safe-area-inset-top);--cartel-ab:env(safe-area-inset-bottom);
  left:50%;right:auto;bottom:auto;box-sizing:border-box;width:min(340px,calc(100vw - 32px));
  top:calc(var(--vvy-hoja,0px) + (var(--cartel-arr) + var(--vvh-hoja,100dvh) - var(--cartel-ab)) / 2);
  max-height:calc(var(--vvh-hoja,100dvh) - var(--cartel-arr) - var(--cartel-ab) - 16px);
  gap:16px;padding:20px var(--aviso-pad) var(--aviso-pad);border:0;border-radius:var(--aviso-r);overflow:hidden;
  opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-50%) scale(.92);transform-origin:50% 50%;
  transition:opacity .18s ease,transform .25s ease,top .4s cubic-bezier(.3,1,.4,1),max-height .4s cubic-bezier(.3,1,.4,1),visibility 0s linear .25s}
.catnuevo.hj.cartel.on{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%);
  transition:opacity .2s ease,transform .5s cubic-bezier(.3,1.3,.4,1),top .4s cubic-bezier(.3,1,.4,1),max-height .4s cubic-bezier(.3,1,.4,1),visibility 0s}
/* con el teclado abierto no hay barra de inicio abajo: el cartel puede llegar hasta 8 px del teclado */
body.tecleando .catnuevo.hj.cartel{--cartel-ab:0px}
.catnuevo.hj.cartel .hj-tit{height:auto;margin:0 8px;font:600 17px/22px var(--f)!important;white-space:normal;overflow:visible}
.hj.cartel>.cartel-cuerpo{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:12px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.cartel-cuerpo>*{flex:0 0 auto}
.cartel-cuerpo::-webkit-scrollbar{display:none}
/* lo del medio, cuando no entra y se desplaza, se desvanece en el borde por donde sigue (arriba, abajo o los dos); igual
   las listas de los submenús del filtro */
@property --borde-arr{syntax:'<length>';inherits:false;initial-value:0px}
@property --borde-ab{syntax:'<length>';inherits:false;initial-value:0px}
@keyframes bordes-desliza{0%{--borde-arr:0px;--borde-ab:22px}8%{--borde-arr:22px}92%{--borde-ab:22px}100%{--borde-arr:22px;--borde-ab:0px}}
@supports (animation-timeline:scroll()){
  .cartel-cuerpo,#catDrop .fp-subc .fp-scroll{-webkit-mask:linear-gradient(transparent,#000 var(--borde-arr),#000 calc(100% - var(--borde-ab)),transparent);
    mask:linear-gradient(transparent,#000 var(--borde-arr),#000 calc(100% - var(--borde-ab)),transparent);
    animation:bordes-desliza linear both;animation-timeline:scroll(self)}
}
.hj.cartel .hj-pie{margin:-4px 8px 0;text-align:center}
html.claro .cartel .grupo-r{background:rgba(120,120,128,.14)!important}
html.oscuro .cartel .grupo-r{background:rgba(120,120,128,.26)!important}
.hj.cartel .cn-acc .cn-del{border:0!important}
html.claro .hj.cartel .cn-acc .cn-del{background:rgba(120,120,128,.14)}
html.oscuro .hj.cartel .cn-acc .cn-del{background:rgba(120,120,128,.26)}
.cartel-pie{display:flex;gap:10px}
.cartel-b{flex:1 1 0;min-width:0;margin:0;padding:0 12px;border:0;font-family:var(--f);letter-spacing:-.01em;color:var(--fg);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background-color .2s ease,color .2s ease,filter .15s ease}
html.claro .cartel-b:active{background:rgba(120,120,128,.32)}
html.oscuro .cartel-b:active{background:rgba(120,120,128,.42)}
.cartel-b.cartel-ok{font-weight:600}
html .cartel-b.cartel-ok:not(.off){background:rgb(var(--ac));color:rgb(var(--onAc,255,255,255))}
.cartel-b.cartel-ok:not(.off):active{filter:brightness(1.12)}
html.claro .cartel-b.cartel-ok.off{color:rgba(60,60,67,.3)}
html.oscuro .cartel-b.cartel-ok.off{color:rgba(235,235,245,.3)}
/* los menús de la hoja (Cuenta, Categoría, Repetir, Cuotas) como el de Calendario: vidrio blanco, más redondeado, el
   tilde a la izquierda, el punto de color de 14 px, la letra del tamaño de los renglones, el título de la sección en
   gris claro y entre secciones una línea finita en vez de la franja */
.menu-hoja{min-width:250px}
.menu-hoja .cdi{gap:19px;padding:0 var(--menu-pad) 0 calc(var(--menu-pad) + 20px);font-size:16px}
:is(.menu-hoja,.catdrop) .hm-dot{flex-basis:14px;width:14px;height:14px}
.menu-hoja .cdi.on::after{left:var(--menu-pad);width:14px;height:14px;margin-top:-7px}
:is(.menu-hoja,.menu-caja) .menu-sec{padding:8px var(--menu-tx) 4px calc(var(--menu-tx) + 20px)}
html.claro :is(.menu-hoja,.menu-caja) .menu-sec{color:rgba(60,60,67,.6)}
html.oscuro :is(.menu-hoja,.menu-caja) .menu-sec{color:rgba(235,235,245,.6)}
.menu-hoja .menu-sec.cdi-cred{position:relative;margin-top:6px;padding-top:12px;border-top:0}
.menu-hoja .menu-sec.cdi-cred::before,.menu-hoja .cdi.cdi-cred::before{content:"";position:absolute;left:var(--menu-tx);right:var(--menu-tx);top:0;height:.5px;background:rgba(128,128,128,.32)}
.menu-hoja .cdi.cdi-cred::before{top:-4px;left:var(--menu-pad);right:var(--menu-pad)}
/* ── Losetas: todas redondas, como en Wallet. Los íconos de las categorías, de las cuentas y tarjetas (también las
   apiladas), los de los menús, los filtros, Resumen (etiquetas, lugares y compras), las fichas, la búsqueda y la grilla
   para elegir uno: cada lugar
   pone el tamaño y esta regla, la forma ── */
.ico-t,.tile-cta,.mv-ico.tile-mov,.loseta,.loseta-c,.et-i,#bsc .bq-i,#catNuevo #emojiPreview,.icono-cta-o{border-radius:50%}
/* ── Billetera, como Wallet: la cuenta al principio del
   segundo renglón con un punto de su color y, a la derecha, el importe y debajo cuándo se paga o se repite ("nov · 3
   cuotas", "cada mes") o, en un fijo sin pagar, Pagar o Cobrar. Con dos renglones a la derecha, lo de la izquierda
   queda centrado con el ícono ── */
/* sin segundo renglón, el nombre queda centrado con el ícono (el renglón vacío lo subía) */
.mv-meta:empty{display:none}
.mv-cta{white-space:nowrap}
.mv-cta::before{content:"";display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:50%;background:var(--k);vertical-align:.5px}
.mv:has(> .mv-cuando){display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;row-gap:0}
.mv:has(> .mv-cuando)>*{grid-row:1/3}
.mv:has(> .mv-cuando)>.mv-amt{grid-column:3;grid-row:1;align-self:end}
.mv>.mv-cuando{grid-column:3;grid-row:2;justify-self:end;align-self:start;margin-top:2px;font:400 13px/1.3 var(--f);color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.mv:has(> .mv-cuando,> .bfijo)>:is(.mv-emo,.mv-body){align-self:center}
/* el importe, siempre contra el borde derecho, en Billetera y en Cuentas: si lo de abajo es más ancho (cuándo, o
   Pagar/Cobrar, que al tocarlo pasa a "✓ Pagado"), el importe no se corre a la izquierda */
.mv:has(> .mv-cuando,> .bfijo)>.mv-amt,.fila-cta .val-cta{justify-self:end}
/* ── Vistas previas al mantener apretado: la tarjeta lisa (blanca; en oscuro, gris elevado), bien redondeada, con la letra
   de los renglones, y debajo las acciones en renglones, como un menú de iOS (ver itemsGasto e itemsContexto) ── */
html.claro :is(#prev-mov,#prev-cta) .cx-prev{background:#fff!important;box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 18px 50px rgba(0,0,0,.18)!important}
html.oscuro :is(#prev-mov,#prev-cta) .cx-prev{background:#2c2c2e!important;box-shadow:0 0 0 .5px rgba(255,255,255,.1),0 18px 50px rgba(0,0,0,.5)!important}
/* ── Reorganizar: el título y, debajo, la pantalla que se reorganiza, centrados con la ✕ como el título de las hojas
   (en 17 px, y lo de abajo más chico, como los títulos de dos renglones de iOS) ── */
.reorg-cab{padding-top:0;pointer-events:none}
.reorg-cab .fi-nom{margin-top:-2px;font-size:17px}
.reorg-cab .fi-est{margin-top:1px;font-size:13px}
/* ── La lista de productos de la hoja, como en Recordatorios: el nombre en los renglones que haga falta (un nombre largo
   se lee entero), el precio del ancho de lo que dice, sin negrita; el ⊖ y la etiqueta centrados con el renglón; las
   sugerencias se desvanecen en el borde y un nombre largo termina en …; la suma que no coincide, toda en naranja ── */
.producto-r{align-items:center;gap:10px}
.producto-n{display:block;align-self:center;height:44px;min-height:44px;padding:12px 0;margin:0;resize:none;overflow:hidden;
  font:400 16px/20px var(--f);letter-spacing:-.01em;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;-webkit-appearance:none;appearance:none}
.producto-r .producto-p{flex:0 0 auto;width:3.4ch;min-width:3.4ch;max-width:10.5ch;font-weight:400;font-variant-numeric:tabular-nums}
.producto-r .limpiar{display:none!important}
#producto .producto-sug{padding-right:24px;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
#producto .producto-sug .bss{display:inline-flex;align-items:center;max-width:calc(100% - 30px);min-width:0}
#producto .producto-sug .bss b{flex:0 1 auto;min-width:0;margin-right:5px;overflow:hidden;text-overflow:ellipsis}
/* el lugar es lo primero que se acorta: el nombre tiene prioridad */
#producto .producto-sug .bss i{flex:0 4 auto;min-width:0;margin-left:3px;overflow:hidden;text-overflow:ellipsis}
.producto-pie .c-o,.producto-pie .c-o b{color:#ff9f0a}
html.claro .producto-pie .c-o,html.claro .producto-pie .c-o b{color:#c93400}
/* ── El menú de acciones con las opciones como las de los menús de la hoja: la letra del tamaño de los renglones, el
   tilde de lo elegido a la izquierda (con los nombres en columna) y una línea finita entre grupos ── */
/* (del ancho de lo que dice, como los de la hoja: un nombre largo no se parte en dos renglones) */
.menu-caja{width:max-content;min-width:250px;max-width:min(300px,calc(100vw - 28px))}
.menu-caja .menu-op{padding:10px var(--menu-pad);font-size:16px;letter-spacing:-.01em}
.menu-caja .menu-op.con-chk{position:relative;padding-left:calc(var(--menu-pad) + 20px)}
.menu-caja .menu-op.con-chk.on::before{content:"";position:absolute;left:var(--menu-pad);top:50%;width:14px;height:14px;margin-top:-7px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center/contain no-repeat}
.menu-caja .menu-sep{height:.5px;margin:6px var(--menu-tx);background:rgba(128,128,128,.32)}
/* "Editar etiquetas…", como "Editar categorías…": en el acento y con el lápiz en la columna del tilde */
.menu-caja .menu-op.editar{color:rgb(var(--ac))}
.menu-caja .menu-op.con-chk.editar::before{content:"";position:absolute;left:calc(var(--menu-pad) - 2px);top:50%;width:17px;height:17px;margin-top:-8.5px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.6 3.6a2.1 2.1 0 0 1 3 3L7.6 18.6 3.5 20l1.4-4.1z'/%3E%3Cpath d='M14.6 5.6l3 3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.6 3.6a2.1 2.1 0 0 1 3 3L7.6 18.6 3.5 20l1.4-4.1z'/%3E%3Cpath d='M14.6 5.6l3 3'/%3E%3C/svg%3E") center/contain no-repeat}
/* ── Los íconos de las opciones a la izquierda, como en iOS 26: en una columna adelante (donde empiezan las líneas entre
   grupos) y los nombres después, todos en la misma columna; si ninguna opción del menú tiene ícono, no queda el lugar.
   En los menús de elegir con tilde, un ícono (el lápiz de "Otro importe…") va en la columna del tilde ── */
.menu-caja .menu-op .mi-i,.fondodrop.ajustes .menu-op .mi-i{order:-1}
.menu-caja:not(:has(.mi-i:not(:empty))) .mi-i{display:none}
.menu-caja .menu-op.con-chk .mi-i{position:absolute;left:calc(var(--menu-pad) - 2px);top:50%;width:17px;height:17px;margin-top:-8.5px}
.menu-caja .menu-op.con-chk .mi-i svg{width:17px;height:17px}
/* ── Las opciones de todos los menús (el de acciones, las vistas previas, los de la hoja, el filtro de Billetera y el
   osito), como en iOS 26: al apretar una, el relleno es una cápsula a la misma distancia de los bordes del menú por los
   cuatro lados, con la curva de las esquinas corrida hacia adentro (en una opción de dos renglones, la misma curva); lo
   que dice empieza donde arrancan las líneas entre grupos. Las medidas: --menu-… en :root ── */
.menu-caja,.menu-hoja{padding:var(--menu-in) 0}
#catDrop.on{padding:var(--menu-in)}
.fondodrop.ajustes.on{padding-top:var(--menu-in)}
.menu-caja .menu-op,.menu-hoja .cdi,.fondodrop.ajustes :is(.menu-op,.aj-fila){min-height:44px;margin:0 var(--menu-in);width:calc(100% - 2 * var(--menu-in))}
:is(.menu-caja .menu-op,.menu-hoja .cdi,.catdrop .fp-row,.fondodrop.ajustes :is(.menu-op,.aj-fila)){border-radius:calc(var(--menu-r) - var(--menu-in))}
/* el submenú del filtro: una tarjeta encima del menú, como en Fotos (ver "El menú del filtro" más abajo) */
#catDrop .fp-subc{border-radius:var(--menu-r);transform-origin:top right}
#catDrop.subon .fp-subc.abierto{padding:var(--menu-in)}
/* el relleno: gris translúcido (Automático, con su interruptor, no se rellena) */
html.claro :is(.menu-caja .menu-op,.menu-hoja .cdi,.catdrop .fp-row,.fondodrop.ajustes :is(.menu-op,.aj-modo)):active{background:rgba(120,120,128,.16)}
html:not(.claro) :is(.menu-caja .menu-op,.menu-hoja .cdi,.catdrop .fp-row,.fondodrop.ajustes :is(.menu-op,.aj-modo)):active{background:rgba(255,255,255,.12)}
/* ── El menú del filtro de Billetera, como los otros menús y el de Fotos: el ícono adelante (sin la columna vacía del
   tilde), lo elegido debajo del nombre ("Categoría / Todas") y el tilde de Gastos o Ingresos a la derecha, donde los
   otros tienen la flecha. Así queda del ancho de sus opciones, no del de las categorías ── */
#catDrop{min-width:200px}
#catDrop > .fp-row{padding-left:var(--menu-pad)}
#catDrop > .fp-row > .fp-ck{order:9;flex:0 0 auto;width:auto;margin-left:auto}
#catDrop > .fp-row:not(.on) > .fp-ck{display:none}
#catDrop .fp-dos{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;max-width:170px;line-height:1.25}
#catDrop .fp-subcats .fp-dos .fp-q{display:block;margin:1px 0 0;padding:0;max-width:none;font-size:13px}
/* el submenú (Categoría, Cuenta, Etiquetas, Lugares) es una tarjeta encima del menú, como en Fotos: tan ancha como
   piden sus nombres (sale hacia la izquierda), puede pasar el borde de abajo, y el menú de atrás queda con su ancho,
   apagado. Para que pueda salirse del menú con su propio vidrio, el vidrio del menú va en una capa de atrás (::before)
   y el menú no recorta mientras está abierta */
#catDrop{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
#catDrop::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none}
#catDrop.on.subon{overflow:visible}
/* ── El menú del filtro de Billetera con la letra y el alto de renglón de los otros menús, y el título del grupo en el
   gris de los demás ── */
.catdrop .fp-row{min-height:44px;font-size:16px;padding:10px var(--menu-pad) 10px calc(var(--menu-pad) - 2px)}
.catdrop .fp-sec{font:400 13px var(--f);padding-left:var(--menu-pad);padding-right:var(--menu-pad)}
html.claro .catdrop .fp-sec{color:rgba(60,60,67,.6)}
html.oscuro .catdrop .fp-sec{color:rgba(235,235,245,.6)}
/* ── El menú del osito: Importar, Respaldar y Actualizar con el ícono adelante (como en los otros menús); Claro y Oscuro
   con el tilde en esa misma columna (en vez de los círculos), y todos los nombres, también Automático, en columna ── */
.fondodrop.ajustes .menu-op,.fondodrop.ajustes .aj-fila{position:relative;padding-left:var(--menu-pad);padding-right:var(--menu-pad)}
.fondodrop.ajustes .aj-fila{padding-left:calc(var(--menu-pad) + 34px)}
.fondodrop.ajustes .aj-modo svg{display:none}
.fondodrop.ajustes .aj-modo.on::before{content:"";position:absolute;left:calc(var(--menu-pad) + 4px);top:50%;width:14px;height:14px;margin-top:-7px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center/contain no-repeat}
/* las líneas entre grupos del menú del filtro y del osito, finitas y sin tocar los bordes como en los otros menús */
.catdrop .fp-sep{height:.5px;margin-left:var(--menu-pad);margin-right:var(--menu-pad);background:rgba(128,128,128,.32)}
.fondodrop.ajustes .menu-sep{height:.5px;margin:6px var(--menu-tx) 8px;background:rgba(128,128,128,.32)}
/* los colores del osito, sin título y centrados en su fila */
.fondodrop.ajustes .acentos{justify-content:center;gap:12px 14px;padding:2px 16px 0}
/* el aviso de abajo con la letra de los renglones */
.toast{font-size:15px;padding:14px 22px}
.toast.acc{padding:6px 6px 6px 20px}
.toast-ac{font-size:15px;padding:9px 16px}