/* =========================================================
   boringMoney · estilos.css — toda la piel vive aquí.
   Tokens del README (oscuro primero, claro con data-tema="claro"),
   Archivo variable (ancho 62–125, peso 100–900) y cifras tabulares.
   ========================================================= */
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url("./fonts/archivo-latin-ext-standard-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url("./fonts/archivo-latin-standard-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:dark;
  --bg:#0B0B0B;--card:#171717;--elev:#222222;--line:rgba(255,255,255,.08);
  --ink:#F5F5F2;--ink2:#A3A3A3;--ink3:#737373;
  --lime:#D8FF00;--limeedge:transparent;--gold:#F2C14E;--goldstroke:#F2C14E;--violet:#9A8CFF;
  --btnbg:#D8FF00;--btnink:#0B0B0B;--focus:#D8FF00;--cell:rgba(255,255,255,.08);--track:#2C2C2C;
  --sheet:rgba(30,30,30,.94);--tab:transparent;--halo:rgba(216,255,0,.22);--badgering:var(--card);
  --moneda:radial-gradient(circle at 32% 28%,#FFF3CC 0,rgba(255,231,161,0) 40%),linear-gradient(150deg,#FFE7A1,#F2C14E 50%,#C8902B);
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-tema="claro"]{
  color-scheme:light;
  --bg:#F2F2EE;--card:#FFFFFF;--elev:#EDEDE8;--line:rgba(11,11,11,.09);
  --ink:#0B0B0B;--ink2:#525252;--ink3:#8A8A8A;
  --limeedge:#0B0B0B;--gold:#8A6300;--goldstroke:#B07A12;--violet:#5B4BD6;
  --btnbg:#0B0B0B;--btnink:#D8FF00;--focus:#0B0B0B;--cell:rgba(11,11,11,.06);--track:#E4E4DF;
  --sheet:rgba(255,255,255,.96);--tab:#0B0B0B;--halo:rgba(11,11,11,.10);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:pan-x pan-y}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body{overflow:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
/* Que se sienta app y no página web (v20.2): sin zoom, sin selección salvo en los campos, sin rebote de la pantalla,
   campos a 16 px o más (con menos, el iPhone se acerca solo) y botones que se atenúan al tocarlos. */
html,body{overscroll-behavior:none}
.contenido{overscroll-behavior-y:contain}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
img,svg{-webkit-user-drag:none}
input,textarea,select{font-size:max(16px,1em)}
button:not(.boton):not(:disabled):active{opacity:.6}
.pin-teclado button:not(:disabled):active{opacity:1}
a:active{opacity:.6}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.oro{color:var(--gold)}
[hidden]{display:none!important}
/* Foco visible en los campos que no pintan su caja (los que sí: .campo, .monto-caja, textareas del cierre) */
html :is(.ajuste,.accion-fila,.fuente-fila,.buscador,.bd-monto,.bd-paso,.nueva-fuente) :is(input,textarea):focus-visible,html #nota:focus-visible,html .intencion textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
:is(.ajuste,.nueva-fuente,.bd-monto,.buscador,.accion-fila,.fuente-fila) input::placeholder,#monto::placeholder{color:var(--ink2)}
#hoja:focus,#rf-titulo:focus,#bienvenida h1:focus,#in-saludo:focus{outline:none}

/* ---------- Marco ---------- */
#app{position:relative;height:100%;max-width:560px;margin:0 auto;overflow:hidden;background:var(--bg)}
/* Franja negra bajo la barra de estado (iOS la pinta en blanco sobre la app) */
#app::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--safe-top);background:#0B0B0B;z-index:200;pointer-events:none}
.pantalla{position:absolute;inset:0;display:none;flex-direction:column}
.pantalla.activa{display:flex}
.contenido{position:relative;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(var(--safe-top) + 20px) 16px calc(var(--safe-bottom) + 124px);scroll-padding:calc(var(--safe-top) + 16px) 0 calc(var(--safe-bottom) + 124px)}
.grano{position:absolute;inset:0;background:url("./img/grano.png");opacity:.04;pointer-events:none}

/* ---------- Tipografía ---------- */
.titulo-grande{margin:6px 4px 14px;font-size:40px;font-stretch:62%;font-weight:900;line-height:.9;text-transform:uppercase;letter-spacing:.005em}
.bajada{margin:-4px 4px 16px;font-size:16px;line-height:1.4;color:var(--ink2)}
.etiqueta-tec,.titulo-seccion{font-size:13px;font-weight:700;font-stretch:118%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.etiqueta-tec::before,.titulo-seccion::before{content:"// ";content:"// " / ""}
.titulo-seccion{margin:26px 4px 10px;line-height:1.3}
.tarjeta-titulo{margin:0;font-size:17px;font-weight:700;line-height:1.3}
.texto-2{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ink2)}
.texto-2 b{color:var(--ink)}
.nota{margin:8px 4px 0;font-size:13px;line-height:1.5;color:var(--ink2)}
.panel .nota{margin:10px 0 0}
.etiqueta{display:block;margin:0 0 8px;font-size:14px;font-weight:600;color:var(--ink2)}
.fila-titulo{display:flex;justify-content:space-between;align-items:center;gap:12px}
.fila-titulo .titulo-seccion{margin-bottom:6px}
.fila-titulo .enlace-sutil{margin-top:16px}
.vacio{padding:22px 16px 22px 0;font-size:15px;line-height:1.5;color:var(--ink2)}

/* ---------- Logo 1c y lema ---------- */
.logo{display:flex;align-items:flex-end;gap:8px;margin:0;line-height:1}
.logo-boring{padding:1px 8px 5px;background:#D8FF00;color:#0B0B0B;font-size:34px;font-weight:900;font-stretch:62%;line-height:.85;transform:rotate(-2.5deg);transform-origin:left bottom;box-shadow:inset 0 0 0 1.5px var(--limeedge)}
.logo-money{font-size:50px;font-weight:900;font-stretch:62%;line-height:.84;color:var(--ink)}
.logo.chico .logo-boring{font-size:22px;padding:1px 6px 3px}
.logo.chico .logo-money{font-size:32px}
.lema{margin:12px 0 0;font-size:13px;font-weight:700;font-stretch:118%;letter-spacing:.12em;color:var(--ink2)}
.lema span{color:var(--gold)}
.lema.oscuro{margin:0;color:#1A1204;letter-spacing:.16em}

/* ---------- Tarjetas, paneles y listas ---------- */
.tarjeta{position:relative;margin-top:12px;padding:18px;border-radius:20px;background:var(--card)}
.panel{position:relative;padding:16px;border-radius:20px;background:var(--card)}
.lista{background:var(--card);border-radius:20px;overflow:hidden;padding-left:16px}
.fila{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:60px;padding:12px 40px 12px 0;background:none;border:0;border-bottom:1px solid var(--line);text-align:left;color:var(--ink)}
.fila:last-child{border-bottom:0}
/* La lista recorta lo que sale de su borde y el texto empieza en el borde de la fila: el anillo va adentro arriba, abajo y a
   la derecha, y a la izquierda usa los 16 px de aire de la lista (no pisa la primera letra ni se corta en las esquinas) */
.lista .fila:focus-visible,.grupo .fila:focus-visible,.lista .fila-boton:focus-visible{outline:none}
.lista .fila:focus-visible::before,.grupo .fila:focus-visible::before,.lista .fila-boton:focus-visible::before{content:"";position:absolute;inset:3px 3px 3px -10px;border:2px solid var(--focus);border-radius:14px;pointer-events:none}
.fila::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid var(--ink3);border-top:2px solid var(--ink3);transform:translateY(-50%) rotate(45deg)}
.fila .fuente{display:block;font-size:15px;font-weight:600}
.fila .detalle{display:block;max-width:210px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--ink2)}
.fila>span:first-child{min-width:0}
.fila .monto{flex:none;font-size:16px;font-weight:800;font-stretch:75%;white-space:nowrap;color:var(--gold)}
.fila-ios{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:12px 16px 12px 0;border-bottom:1px solid var(--line)}
.fila-ios:last-child{border-bottom:0}
.fila-ios .k{display:block;font-size:16px;font-weight:600}
.fila-ios .d{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--ink2)}
.fila-ios .v{font-size:17px;font-weight:800;font-stretch:75%;white-space:nowrap;color:var(--ink)}
.fila-ios.logro .v{color:var(--gold)}
.fila-boton{position:relative;width:100%;background:none;border:0;text-align:left;color:var(--ink)}
.chev{flex:none;width:9px;height:9px;margin-right:6px;border-right:2px solid var(--ink3);border-top:2px solid var(--ink3);transform:rotate(45deg)}

/* ---------- Botones y enlaces ---------- */
.boton{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;padding:0 20px;border:0;border-radius:27px;background:var(--btnbg);color:var(--btnink);font-size:16px;font-weight:700;transition:transform 150ms var(--ease)}
.boton:active{transform:scale(.98)}
.boton:disabled{opacity:.4;cursor:default}
.boton.circ{justify-content:space-between;padding:0 9px 0 24px}
.boton .ci{flex:none;width:36px;height:36px;border-radius:50%;background:var(--btnink);display:grid;place-items:center}
.boton .ci::before{content:"";width:18px;height:18px;background:var(--btnbg);-webkit-mask:url("./img/iconos/arrow-right.svg") center/contain no-repeat;mask:url("./img/iconos/arrow-right.svg") center/contain no-repeat}
.boton.secundario{margin-top:12px;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink3);font-weight:600}
.boton.secundario.punteado{box-shadow:none;border:1.5px dashed var(--ink3)}
.boton.negro{background:#0B0B0B;color:#D8FF00}
.boton.negro .ci{background:#D8FF00}
.boton.negro .ci::before{background:#0B0B0B}
.botones-col{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.botones-col .boton.secundario{margin-top:0}
.botones-col .enlace{align-self:center}
.botones-fila{display:flex;gap:10px;margin-top:14px}
.botones-fila .boton{flex:1;margin-top:0;padding:0 12px;font-size:15px}
.enlace{min-height:44px;padding:0 6px;background:none;border:0;color:var(--ink);font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px;display:inline-flex;align-items:center;justify-content:center}
.enlace.centrado{display:flex;margin:10px auto 0}
.enlace-sutil{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;background:none;border:0;color:var(--gold);font-size:15px;font-weight:600;text-decoration:none}
.enlace-sutil.en-linea{display:inline;min-height:0}
/* Enlace dentro de una frase: el área de toque se amplía hasta 44 px sin mover el texto */
.en-linea{position:relative}
.en-linea::after{content:"";position:absolute;inset:-15px -6px}
.icono-boton{flex:none;width:44px;height:44px;padding:0;border:0;background:none;display:grid;place-items:center}
.icono-boton .ico{width:30px;height:30px;border-radius:50%;background:var(--cell);position:relative}
.icono-boton .ico::before{content:"";position:absolute;inset:8px;background:var(--ink);-webkit-mask:url("./img/iconos/x.svg") center/contain no-repeat;mask:url("./img/iconos/x.svg") center/contain no-repeat}

/* ---------- Chips y segmentos ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{min-height:44px;padding:0 16px;border:0;border-radius:22px;background:var(--cell);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-size:15px;font-weight:600;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--limeedge);color:#0B0B0B}
.chip .cant{font-weight:800}
.chip.punteado{background:transparent;box-shadow:none;border:1.5px dashed var(--ink3)}
.chips.jugadas .chip{white-space:normal;text-align:left;line-height:1.25;padding:10px 16px}
#hm-chips,.chips.desliza{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#hm-chips{margin:8px -18px 0;padding:4px 18px;scroll-padding:0 18px}   /* 4 px arriba y abajo: el anillo de foco no se corta */
#hm-chips .chip{flex:none;white-space:nowrap}
#hm-chips::-webkit-scrollbar,.chips.desliza::-webkit-scrollbar{display:none}
.chips.desliza .chip{flex:none}
.chips.desliza{margin-left:-4px;margin-right:-4px;padding:4px;scroll-padding:0 4px}   /* el anillo de foco no se corta */
.segmento{display:flex;gap:2px;margin-top:12px;padding:3px;border-radius:25px;background:var(--cell)}
.segmento button{flex:1;min-height:44px;border:0;border-radius:22px;background:transparent;color:var(--ink2);font-size:15px;font-weight:600}
/* El elegido lleva un filete --ink2 (más de 3:1 contra la pista en los dos temas), además del fondo y la negrita */
.segmento button[aria-pressed="true"]{background:var(--card);color:var(--ink);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--ink2),0 1px 3px rgba(0,0,0,.2)}
.seg-progreso{margin:0 0 12px}
.interruptor{flex:none;min-width:116px;min-height:44px;padding:0 14px;border:0;border-radius:22px;background:var(--cell);color:var(--ink2);font-size:14px;font-weight:700}
.interruptor[aria-pressed="true"]{background:var(--lime);color:#0B0B0B;box-shadow:inset 0 0 0 1.5px var(--limeedge)}
.interruptor:disabled{opacity:.6;cursor:default}

/* ---------- Íconos de la barra (Lucide, pintados con máscara) ---------- */
.ico{display:block;width:22px;height:22px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ico-hoy{--m:url("./img/iconos/house.svg")}
.ico-plata{--m:url("./img/iconos/chart-column.svg")}
.ico-jugadas{--m:url("./img/iconos/layout-grid.svg")}

/* ---------- Socio: disco de estudio, render recortado, aro, halo e insignias ---------- */
.socio{position:relative;display:block;width:100%;height:100%;container-type:size}
.socio-halo{position:absolute;inset:-8%;border-radius:50%;box-shadow:0 0 18cqw 4cqw var(--halo)}
.socio-aro{position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--lime);box-shadow:0 0 0 1px var(--limeedge),inset 0 0 0 1px var(--limeedge)}
.socio-disco{position:absolute;inset:0;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.9) 0,rgba(255,255,255,0) 44%),radial-gradient(circle at 72% 88%,rgba(0,0,0,.09),rgba(0,0,0,0) 55%),#E6E6E3;box-shadow:inset 0 -3cqw 6cqw rgba(0,0,0,.06)}
.socio-disco img{position:absolute;max-width:none;height:auto}
.socio-ini{font-size:40cqw;font-weight:900;font-stretch:62%;line-height:1;letter-spacing:-.01em;color:#1A1A1A}
.socio-ins{position:absolute;top:-3%;right:-3%;width:34%;height:34%;border-radius:50%;border:2px solid var(--badgering);display:grid;place-items:center;line-height:1}
.socio-ins.saluda,.socio-ins.senala{background:var(--lime);box-shadow:inset 0 0 0 1px var(--limeedge)}
.socio-ins.saluda::before{content:"";width:64%;height:64%;background:#0B0B0B;-webkit-mask:url("./img/iconos/hand.svg") center/contain no-repeat;mask:url("./img/iconos/hand.svg") center/contain no-repeat}
.socio-ins.senala::before{content:"→";font-size:24cqw;font-weight:900;color:#0B0B0B}
.socio-ins.celebra{background:linear-gradient(150deg,#FFE7A1,#F2C14E 50%,#C8902B)}
.socio-ins.celebra::before{content:"✦";font-size:21cqw;color:#1A1204}
.socio-ins.preocupado{background:var(--elev);box-shadow:inset 0 0 0 1px var(--line);padding-bottom:3cqw}
.socio-ins.preocupado::before{content:"~";font-size:26cqw;font-weight:800;color:var(--ink2)}
.socio-ins.duerme{background:#525252;padding-bottom:2cqw}
.socio-ins.duerme::before{content:"z";font-size:22cqw;font-weight:800;color:#FFFFFF}
.socio-ins.alerta{background:var(--ink)}
.socio-ins.alerta::before{content:"!";font-size:23cqw;font-weight:900;color:var(--bg)}
.socio-punto{position:absolute;bottom:1%;right:1%;width:22%;height:22%;border-radius:50%;background:var(--lime);border:2px solid var(--badgering);box-shadow:inset 0 0 0 1px var(--limeedge);animation:bmPulso 1.8s ease-in-out infinite}
.socio-pro{position:absolute;right:-7%;bottom:-7%;width:42%;height:42%;border-radius:50%;background:var(--badgering);display:grid;place-items:center}
.socio-pro img{width:86%;height:86%;object-fit:contain}
@keyframes bmPulso{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.7);opacity:.55}}

/* ---------- Moneda: canto estriado, bisel, cara, anillo y brillo ---------- */
.moneda{position:relative;display:block;width:100%;height:100%;container-type:size}
.moneda i{position:absolute;border-radius:50%}
.moneda .m-canto{inset:0;background:repeating-conic-gradient(#B9832A 0deg 3deg,#8E5F17 3deg 6deg);box-shadow:0 3cqw 8cqw -1cqw rgba(0,0,0,.55),inset 0 0 0 .8cqw rgba(90,56,10,.6)}
.moneda .m-bisel{inset:0;background:linear-gradient(140deg,rgba(255,240,200,.6),rgba(255,255,255,0) 45%,rgba(60,35,0,.4))}
.moneda .m-cara{inset:7%;background:radial-gradient(circle at 32% 24%,#FFF3CC 0,rgba(255,231,161,0) 38%),linear-gradient(150deg,#FFE7A1 0%,#F2C14E 46%,#C8902B 100%);box-shadow:inset 0 1.2cqw 1.4cqw rgba(255,250,230,.7),inset 0 -1.6cqw 2cqw rgba(110,66,8,.45)}
.moneda .m-anillo{inset:15%;box-shadow:inset 0 0 0 1.1cqw rgba(176,122,18,.5),0 0 0 .6cqw rgba(255,246,214,.5)}
.moneda .m-brillo{top:13%;left:19%;width:30%;height:16%;background:rgba(255,255,255,.7);filter:blur(2.2cqw);transform:rotate(-38deg)}
.moneda b{position:absolute;inset:0;display:grid;place-items:center;line-height:1;color:#D39B33}
.moneda b.m-bm{font-size:34cqw;font-weight:900;font-stretch:75%;letter-spacing:-.02em;text-shadow:-.7cqw -.7cqw 0 rgba(255,248,222,.95),.8cqw .9cqw 0 rgba(122,76,10,.55)}
.moneda b.m-mas{padding-bottom:4cqw;font-size:58cqw;font-weight:800;text-shadow:-.8cqw -.8cqw 0 rgba(255,248,222,.95),.9cqw 1cqw 0 rgba(122,76,10,.6)}

/* ---------- Torre de monedas: la racha ---------- */
.torre{position:relative;display:block;width:100%;height:100%;container-type:size}
.torre-sombra{position:absolute;left:6%;right:6%;bottom:-3%;height:14%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.42),rgba(0,0,0,0))}
.torre-pila{position:absolute;inset:0}
.torre[data-estado="0"] .torre-pila{filter:grayscale(1) brightness(.62)}
.torre[data-estado="2"] .torre-pila,.torre[data-estado="3"] .torre-pila{filter:drop-shadow(0 0 3cqw rgba(242,193,78,.35))}
.torre-moneda{position:absolute;width:80%;height:37%;border-radius:50%/35%;background:repeating-linear-gradient(90deg,rgba(80,48,6,.3) 0 .8cqw,rgba(0,0,0,0) .8cqw 2.4cqw),linear-gradient(90deg,#8E5F17 0%,#D9A23A 22%,#F2C14E 40%,#C8902B 72%,#7E5212 100%);box-shadow:0 .6cqw 0 rgba(60,36,4,.45)}
.torre-moneda::before{content:"";position:absolute;left:0;top:0;width:100%;height:70%;border-radius:50%;background:radial-gradient(ellipse at 34% 34%,#FFF3CC 0,rgba(255,231,161,0) 48%),linear-gradient(170deg,#FFE7A1,#F2C14E 55%,#D9A23A);box-shadow:inset 0 0 0 1cqw rgba(176,122,18,.5)}
.torre-moneda.brillo::after{content:"";position:absolute;left:18%;top:12%;width:34%;height:22%;border-radius:50%;background:rgba(255,255,255,.75);filter:blur(1.6cqw)}
.torre-destello{position:absolute;line-height:1;color:#FFE7A1;text-shadow:0 0 4cqw rgba(255,231,161,.85)}
.torre-destello.d1{top:-2%;right:2%;font-size:24cqw}
.torre-destello.d2{top:22%;left:0;font-size:13cqw;text-shadow:0 0 3cqw rgba(255,231,161,.85)}

/* ---------- Barra ---------- */
.nav-envoltura{position:absolute;left:16px;right:16px;bottom:max(16px,calc(var(--safe-bottom) + 5px));z-index:5}
.barra-nav{position:relative;height:64px;border-radius:32px;background:rgba(23,23,23,.84);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 14px 30px -12px rgba(0,0,0,.55);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;--badgering:#1C1C1C;--lime:#D8FF00;--limeedge:transparent;--ink:#F5F5F2;--bg:#0B0B0B;--focus:#D8FF00}
:root[data-tema="claro"] .barra-nav{background:rgba(23,23,23,.88)}   /* en claro, con una tarjeta blanca debajo, las etiquetas de 11 px siguen en AA */
.barra-nav>button{position:relative;height:64px;padding:0;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#A3A3A3;font-size:11px;font-weight:600}
.barra-nav>button[aria-current="page"]{color:#D8FF00;font-weight:800}
.nav-socio{display:block;width:22px;height:22px}
.barra-mas{position:relative;height:64px}
.barra-nav .mas{position:absolute;left:50%;top:-20px;width:60px;height:60px;margin-left:-30px;padding:0;border:0;border-radius:50%;background:none;perspective:320px}
.moneda-giro{display:block;width:60px;height:60px}
.moneda-giro.gira{animation:bmGiro 600ms var(--ease)}
@keyframes bmGiro{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}

/* ---------- Bienvenida ---------- */
#bienvenida .contenido{display:flex;flex-direction:column;gap:16px;min-height:100%;padding:calc(var(--safe-top) + 64px) 20px calc(var(--safe-bottom) + 28px);background:#0B0B0B;color:#F5F5F2;--card:#171717;--badgering:#0B0B0B;--ink:#F5F5F2;--ink2:#A3A3A3;--ink3:#737373;--gold:#F2C14E;--lime:#D8FF00;--limeedge:transparent;--btnbg:#D8FF00;--btnink:#0B0B0B;--focus:#D8FF00;--line:rgba(255,255,255,.08);--cell:rgba(255,255,255,.08)}
#bienvenida .logo,#bienvenida .lema,#bienvenida .bv-socio,#bienvenida .campo,#bienvenida p,#bienvenida .boton,#bienvenida .bv-enlaces{position:relative}
#bienvenida .lema{margin-top:-4px}
.bv-socio{display:flex;align-items:center;gap:14px;margin-top:14px}
.bv-socio-disco{flex:none;display:block;width:64px;height:64px}
.bv-intro{font-size:28px;font-weight:800;font-stretch:75%;line-height:1.1}
.campo{display:flex;flex-direction:column;gap:6px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.campo:focus-within{box-shadow:inset 0 0 0 2px #D8FF00}
.campo-etq{font-size:13px;font-weight:600;color:#A3A3A3}
.campo input{width:100%;min-width:0;padding:0;border:0;outline:none;background:transparent;color:#F5F5F2;font-size:22px;font-weight:700}
.campo input.cifra{font-weight:800;font-stretch:75%;color:#F2C14E}
.campo input::placeholder{color:#A3A3A3}
.bv-nota{margin:0;font-size:14px;line-height:1.4;color:#A3A3A3}
#bv-listo{margin-top:auto}
.bv-pie{margin:0;text-align:center;font-size:13px;color:#A3A3A3}
.bv-enlaces{display:flex;justify-content:center;gap:18px}
#bienvenida .enlace{color:#F5F5F2}
.error{min-height:18px;margin-top:6px;font-size:14px;font-weight:600;color:var(--ink)}
#bienvenida .error{margin:0;min-height:0}

/* ---------- Hoy ---------- */
.cab-hoy{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 4px 14px}
.cab-hoy-txt{min-width:0}
.saludo{margin:6px 0 0;font-size:28px;font-weight:800;font-stretch:75%;line-height:1.1}
.socio-boton{flex:none;position:relative;width:52px;height:52px;padding:6px;border:0;border-radius:50%;background:none;--badgering:var(--bg)}
.socio-boton .socio{width:40px;height:40px}
.instalar{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;padding:12px 14px;border-radius:14px;background:var(--elev);font-size:14px;line-height:1.45}
.instalar a{color:var(--gold);font-weight:700}
.instalar button{flex:none;width:44px;height:44px;margin:-8px -8px -8px 0;border:0;border-radius:50%;background:none;font-size:22px;line-height:1;color:var(--ink2)}
.tarjeta.hoy{margin-top:0}
.hoy-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.hoy-semana{font-size:14px;font-weight:700;color:var(--ink2);white-space:nowrap}
.hoy-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:14px;line-height:1.45;color:var(--ink2)}
.hoy-pie p{margin:0}
p.hoy-pie{display:block}
.racha{flex:none;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:14px;background:var(--elev);font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.racha .torre-caja{width:28px;height:28px}
.torre-caja{flex:none;display:block}
.hoy-cierre{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.cierre-botones{display:grid;grid-template-columns:1fr;gap:8px;margin-top:14px}
.por-clasificar{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;margin:0 0 14px;padding:10px 14px;border:0;border-radius:14px;background:var(--elev);box-shadow:inset 0 0 0 1.5px var(--focus);color:var(--ink);font-size:15px;font-weight:600;text-align:left}
.por-clasificar b{font-weight:900}

/* Tu mes: anillo en oro con el % adentro y marcas finas como el canto de una moneda */
.hero{display:flex;align-items:center;gap:18px}
.anillo-caja{position:relative;flex:none;width:124px;height:124px}
.anillo{display:block;width:100%;height:100%}
.anillo-marcas{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(var(--ink3) 0deg 1deg,rgba(0,0,0,0) 1deg 6deg);-webkit-mask:radial-gradient(circle closest-side,transparent 92%,#000 93%);mask:radial-gradient(circle closest-side,transparent 92%,#000 93%);opacity:.7}
.anillo-pista,.anillo-avance{fill:none;stroke-width:11}
.anillo-pista{stroke:var(--track)}
.anillo-avance{stroke:var(--goldstroke);stroke-linecap:round;transition:stroke-dasharray 260ms var(--ease)}
.anillo-pct{position:absolute;inset:0;display:grid;place-items:center;font-size:26px;font-weight:800;font-stretch:75%}
.hero-txt{flex:1;min-width:0}
.hero-mes{font-size:14px;font-weight:600;color:var(--ink2)}
.total{margin-top:2px;font-size:clamp(30px,9vw,40px);font-weight:800;font-stretch:75%;line-height:1.05;overflow-wrap:anywhere}
.total.larga{font-size:clamp(24px,7.4vw,28px)}
.total.muy-larga{font-size:clamp(20px,5.8vw,24px)}
.subtexto{margin-top:6px;font-size:14px;font-weight:600;color:var(--ink)}
.hero-record{margin-top:6px;font-size:14px;line-height:1.4;color:var(--ink2)}
.hero-record b{color:var(--gold);font-weight:700}
.tarjeta.mes .enlace-sutil{margin-top:8px}
.hito-titulo{font-size:16px;font-weight:700;line-height:1.35}
.hito-texto{margin-top:4px;font-size:14px;line-height:1.45;color:var(--ink2)}
.hito-barra{height:6px;margin-top:12px;border-radius:3px;background:var(--track);overflow:hidden}
.hito-barra i{display:block;height:100%;border-radius:3px;background:var(--goldstroke)}
.insight{display:flex;gap:12px;align-items:flex-start}
.insight + .insight{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.insight .indice{flex:none;width:28px;padding-top:2px;font-size:13px;font-weight:700;font-stretch:118%;letter-spacing:.08em;color:var(--ink2)}
.insight p{margin:0;font-size:16px;font-weight:600;line-height:1.35}
.insight small{display:block;margin-top:6px;font-size:14px;font-weight:400;line-height:1.4;color:var(--ink2)}
.tj-acciones{display:flex;gap:12px;align-items:center;margin-top:14px}
.tj-acciones .boton{flex:1;height:48px;font-size:15px}
.tj-acciones .enlace{flex:none}
#tj-siembra .chips .chip{font-size:14px}

/* Tu semana */
.titulo-seccion .rango{letter-spacing:.04em;text-transform:none;font-stretch:100%;font-weight:600}
.semana-cierre .sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sc-k{display:block;font-size:13px;font-weight:600;color:var(--ink2)}
.sc-v{display:block;margin-top:2px;font-size:24px;font-weight:800;font-stretch:75%}
.sc-v.oro{color:var(--gold)}
.sc-d{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--ink2)}
.sc-pregunta{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:16px;font-weight:600;line-height:1.35}
.semana-cierre .boton{margin-top:12px;height:48px;font-size:15px}

/* ---------- Jugadas ---------- */
.compromiso .comp-cab{display:flex;align-items:center;gap:14px}
.compromiso .torre-caja{width:72px;height:72px}
.semana-dots{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:14px}
.semana-dots span{height:34px;border-radius:10px;background:var(--cell);display:grid;place-items:center;font-size:14px;font-weight:800;color:var(--ink2)}
.semana-dots span.si{background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--limeedge);color:#0B0B0B}
.semana-dots span.hoy{outline:2px solid var(--ink);outline-offset:2px}
.semana-dots span.viene{background:transparent;border:1.5px dashed var(--ink3);color:var(--ink2)}
.comodin{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--elev);font-size:14px;line-height:1.45}
.tablero{margin-top:0;background:var(--card)}
:root[data-tema="claro"] .tablero{background:var(--tab);color:#F5F5F2;--cell:rgba(255,255,255,.08);--ink:#F5F5F2;--ink2:#A3A3A3}
.calor-dias,.calor{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.calor-dias{font-size:11px;font-weight:600;color:var(--ink2);text-align:center}
.calor{margin-top:8px}
.calor i{display:block;height:26px;border-radius:7px;background:var(--cell)}
.calor i.n1{background:rgba(216,255,0,.28)}
.calor i.n2{background:rgba(216,255,0,.58)}
.calor i.n3{background:#D8FF00}
.calor i.hoy{outline:2px solid #F5F5F2;outline-offset:2px}
.calor i.viene{background:transparent;border:1.5px dashed #737373}
.tablero-leyenda{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:14px;font-size:13px;color:var(--ink2)}
.tablero-leyenda span{display:flex;align-items:center;gap:6px}
.tablero-leyenda i{width:14px;height:14px;border-radius:4px;background:var(--cell)}
.tablero-leyenda i.n1{background:rgba(216,255,0,.28)}
.tablero-leyenda i.n2{background:rgba(216,255,0,.58)}
.tablero-leyenda i.n3{background:#D8FF00}
.tablero-leyenda i.viene{background:transparent;border:1.5px dashed #737373}
.accion-fila{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--line)}
.accion-fila:last-child{border-bottom:0}
.accion-fila input{flex:1;min-width:0;min-height:44px;padding:12px 0;border:0;outline:none;background:transparent;color:var(--ink);font-size:16px}
.accion-fila .cuenta{font-size:13px;color:var(--ink2);white-space:nowrap}
#sb-agregar{margin-top:12px}
.quitar{flex:none;width:44px;height:44px;border:0;background:none;display:grid;place-items:center;color:var(--ink2)}
.quitar:disabled{opacity:.3;cursor:default}

/* Barras por jugada o por fuente */
.fte{padding:8px 0}
.fte-cab{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.fte-cab span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.fte-cab span:last-child{font-weight:800;white-space:nowrap}
.fte-pista{height:6px;margin-top:6px;border-radius:3px;background:var(--track);overflow:hidden}
.fte-pista i{display:block;height:100%;border-radius:3px}

/* Cantidad: − / + / +5 / +10 / Quitar */
.cantidad{margin-top:12px;padding:12px;border-radius:14px;background:var(--elev)}
.cantidad-cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cantidad-nombre{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:700}
.cantidad-quitar{flex:none;min-height:44px;padding:0 4px;border:0;background:none;color:var(--ink);font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cantidad-fila{display:flex;align-items:center;gap:8px;margin-top:6px}
.cantidad-ctrl{display:flex;align-items:center;gap:6px}
.cantidad-ctrl button,.cantidad-mas{height:44px;border:0;border-radius:22px;background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.cantidad-ctrl button{width:44px;font-size:22px;font-weight:600;line-height:1}
.cantidad-ctrl button:disabled{opacity:.35}
.cantidad-ctrl button[aria-disabled="true"],.cantidad-ctrl button[aria-disabled="true"]:active{opacity:1;background:transparent;color:var(--ink2)}   /* enfocable: sin relleno y en gris (AA), sin apagar el anillo de foco */
.cantidad-ctrl b{min-width:40px;text-align:center;font-size:22px;font-weight:800;font-stretch:75%}
.cantidad-mas{padding:0 14px;font-size:15px;font-weight:700}

/* ---------- Plata ---------- */
.cabecera{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.volver{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin-left:-4px;padding:0 10px 0 0;background:none;border:0;color:var(--ink);font-size:16px;font-weight:600}
.cabecera .mes{font-size:17px;font-weight:700;text-transform:capitalize}
.flecha{width:44px;height:44px;border:0;border-radius:50%;background:var(--card);display:grid;place-items:center;color:var(--ink)}
.flecha:disabled{opacity:.35;cursor:default}
.insignias{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.insignias:empty{display:none}
.insignia{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:15px;font-size:13px;font-weight:700;font-stretch:118%;letter-spacing:.06em;text-transform:uppercase}
.insignia.record{background:var(--moneda);color:#1A1204}
.insignia.meta{background:var(--lime);color:#0B0B0B;box-shadow:inset 0 0 0 1.5px var(--limeedge)}
#in-hitos{padding-right:12px}
.lista + .metricas,.tarjeta + .lista{margin-top:12px}
.mas-metricas{margin-top:8px}
.mas-metricas summary{display:flex;align-items:center;min-height:44px;padding:0 4px;list-style:none;cursor:pointer;color:var(--gold);font-size:15px;font-weight:600}
.mas-metricas summary::-webkit-details-marker{display:none}
.split{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--track)}
.split .a{background:var(--goldstroke)}
.split .p{background:var(--violet)}
.split-pie{display:flex;justify-content:space-between;gap:10px;margin-top:10px;font-size:13px;color:var(--ink2)}
.split-pie b{color:var(--ink);font-weight:800}
.leyenda-punto{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;vertical-align:middle}
.div-cifra{font-size:24px;font-weight:800;font-stretch:75%}
.div-texto{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ink2)}
.intencion{margin-top:18px;padding:14px 16px;border-radius:20px;background:var(--card)}
.intencion .etiqueta{margin:0}
.intencion .enlace-sutil{padding:0}
.intencion textarea{display:block;width:100%;min-height:56px;margin-top:6px;padding:0;border:0;outline:none;resize:none;background:transparent;color:var(--ink);font-size:20px;font-weight:600;line-height:1.3}
.intencion textarea::placeholder{color:var(--ink2)}
.intencion-frase{margin:4px 0 0;font-size:20px;font-weight:600;line-height:1.3}
.intencion-frase.vacia{color:var(--ink2);font-size:16px;font-weight:500}
#in-compartir,#ano-compartir{margin-top:18px}

/* Año */
.barra{position:relative;height:6px;margin-top:16px;border-radius:3px;background:var(--track)}
.barra .relleno{position:absolute;left:0;top:0;bottom:0;width:var(--avance,0%);max-width:100%;border-radius:3px;background:var(--goldstroke);transition:width 260ms var(--ease)}
.barra-pie{display:flex;justify-content:space-between;margin-top:10px;font-size:13px;color:var(--ink2)}
.grafica-caja{margin-top:12px;padding:18px 14px 14px;border-radius:20px;background:var(--card)}
.grafica{position:relative;height:160px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end}
.grafica .linea-meta{position:absolute;left:0;right:0;border-top:1.5px dashed var(--ink2);pointer-events:none}
.grafica>span{height:100%;display:flex;align-items:flex-end;justify-content:center}
.grafica>span i{display:block;width:100%;min-height:2px;border-radius:5px 5px 0 0;background:var(--goldstroke)}
.grafica>span.mejor i{background:#FFE7A1}
:root[data-tema="claro"] .grafica>span.mejor i{background:#8A6300}
.grafica>span.actual i{background:var(--goldstroke);box-shadow:inset 0 0 0 2px var(--ink)}
.grafica>span.futuro i{background:transparent;border:1.5px dashed var(--ink3);border-radius:2px}
#ano-lista{margin-top:12px}
#ano-lista:empty{display:none}
.fila-mes{gap:10px}
.fila-mes .fuente{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pct-mes{font-size:14px;color:var(--ink2)}
.etq-record{padding:3px 6px 2px;border-radius:4px;background:rgba(242,193,78,.16);font-size:13px;font-weight:700;font-stretch:118%;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.grafica-meses{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;margin-top:8px;font-size:11px;font-weight:600;color:var(--ink2);text-align:center}
.grafica-meses .mejor,.grafica-meses .actual{color:var(--ink);font-weight:800}
.grafica-leyenda{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px;font-size:13px;color:var(--ink2)}
.grafica-leyenda span{display:flex;align-items:center;gap:6px}
.leyenda-punto.mejor-mes{background:#FFE7A1}
:root[data-tema="claro"] .leyenda-punto.mejor-mes{background:#8A6300}
#ano-metricas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.metrica{padding:14px 16px;border-radius:20px;background:var(--card)}
.metrica .t{font-size:13px;font-weight:600;color:var(--ink2)}
.metrica .v{margin-top:6px;font-size:24px;font-weight:800;font-stretch:75%}
.metrica.logro .v{color:var(--gold)}
.metrica .d{margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--ink2)}

/* Vitrina (las seis piezas de la v20, con su moneda) */
.vitrina .hito{justify-content:flex-start;gap:14px}
.vitrina .hito .pieza{flex:none;width:30px;height:30px;border-radius:50%;background:var(--cell);box-shadow:inset 0 0 0 1.5px var(--line)}
.vitrina .hito.ok .pieza{background:var(--moneda);box-shadow:inset 0 0 0 2px #9C6B1C}
.vitrina .hito.ok .d{color:var(--gold);font-weight:600}

/* ---------- Registros y Por clasificar ---------- */
.buscador{display:flex;align-items:center;gap:10px;height:48px;margin-top:4px;padding:0 16px;border-radius:24px;background:var(--card);color:var(--ink2)}
.buscador input{flex:1;align-self:stretch;min-width:0;border:0;outline:none;background:transparent;color:var(--ink);font-size:16px}
.buscador input::placeholder{color:var(--ink2)}
.grupo{margin-top:12px;padding:12px 0 0 16px;border-radius:20px;background:var(--card);overflow:hidden}
.grupo-cab{display:flex;justify-content:space-between;align-items:baseline;padding:0 16px 6px 0}
.grupo-cab span:first-child{font-size:20px;font-weight:800;font-stretch:75%}
.grupo-cab span:last-child{font-size:14px;font-weight:700;color:var(--gold)}
.tarjeta-paso .grupo-cab span:last-child,.tarjeta-paso .monto{color:var(--ink2)}
.dice{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:14px;border-radius:20px;background:var(--card)}
.dice p{margin:0;font-size:16px;font-weight:600;line-height:1.35}
.dice-socio{flex:none;display:block;width:46px;height:46px}
.dice-fila{display:flex;align-items:center;gap:12px}
.dice-fila p{margin:0;font-size:16px;font-weight:600;line-height:1.35}
.tarjeta-estado{margin-top:12px}
#bd-lista + .panel{margin-top:12px}
.bd-tarjeta{margin-bottom:12px;padding:16px;border-radius:20px;background:var(--card)}
.bd-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.bd-monto{display:flex;align-items:baseline;gap:4px;font-size:36px;font-weight:800;font-stretch:75%;color:var(--gold)}
.bd-monto input{width:100%;min-width:0;min-height:44px;padding:0;border:0;outline:none;background:transparent;color:var(--gold);font-size:36px;font-weight:800;font-stretch:75%}
.bd-det{margin-top:2px;font-size:14px;color:var(--ink2)}
.bd-origen{font-size:13px;color:var(--ink2);white-space:nowrap}
.bd-acciones{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:14px}
.bd-acciones button{min-height:44px;padding:0 6px;border:0;border-radius:22px;background:var(--cell);color:var(--ink);font-size:14px;font-weight:700}
.bd-acciones button.si{background:var(--btnbg);color:var(--btnink)}
.bd-acciones button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--focus)}
.bd-acciones button.si[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--btnbg),inset 0 0 0 4px var(--btnink)}   /* adentro: afuera es el anillo de foco */
.bd-paso{display:none;flex-direction:column;gap:10px;margin-top:12px}
.bd-paso.visible{display:flex}
.bd-paso .etiqueta{margin:4px 0 0}
.bd-paso input[type=text]{display:block;width:100%;min-height:44px;padding:10px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;outline:none;background:transparent;color:var(--ink);font-size:16px}
.bd-paso .boton{height:48px;margin-top:0}
.bd-aviso{font-size:13px;font-weight:600;color:var(--ink)}

/* ---------- Yo ---------- */
.yo-cab{display:flex;align-items:center;gap:18px;margin:4px 4px 0}
.yo-socio{flex:none;position:relative;display:block;width:96px;height:96px;margin:6px;--badgering:var(--bg)}
.yo-nombre{font-size:28px;font-weight:800;font-stretch:75%;line-height:1.1}
.socios{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:4px 0}
.socios button{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:44px;padding:8px 0 4px;border:0;border-radius:14px;background:none;color:var(--ink2);font-size:13px;font-weight:600;--badgering:var(--bg)}
.socios button .socio{width:54px;height:54px}
.socios button[aria-checked="true"]{color:var(--ink);font-weight:800}
.ajuste{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:6px 0;border-bottom:1px solid var(--line)}
.ajuste:last-child,.panel .ajuste:last-of-type{border-bottom:0}
.ajuste label{font-size:15px;font-weight:600;color:var(--ink)}
.ajuste input{width:180px;min-width:0;min-height:44px;padding:10px 0;border:0;outline:none;background:transparent;color:var(--ink);font-size:16px;text-align:right}
.ajuste input.cifra{font-weight:800;font-stretch:75%;font-size:18px;color:var(--gold)}
.ajuste input[type=time]{width:120px}
.panel.ajustes{padding:4px 16px}
.estado{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.estado i{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1px var(--limeedge)}
.recordatorio{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--elev);box-shadow:inset 0 0 0 1.5px var(--focus);font-size:14px;line-height:1.45}
.fuente-fila{display:flex;align-items:center;gap:6px;padding:4px 0;border-bottom:1px solid var(--line)}
.punto{flex:none;width:44px;height:44px;border:0;background:transparent;display:grid;place-items:center}
.punto i{width:18px;height:18px;border-radius:50%}
.fuente-fila input{flex:1;min-width:0;min-height:44px;padding:10px 0;border:0;outline:none;background:transparent;color:var(--ink);font-size:16px;font-weight:600}
.tipo-btn{flex:none;min-height:44px;padding:0 12px;border:0;border-radius:22px;font-size:13px;font-weight:700}
.tipo-btn.activo{background:var(--cell);color:var(--ink)}
.tipo-btn.pasivo{background:rgba(154,140,255,.18);color:var(--violet)}
#aj-fuente-nueva{margin-top:12px}
#aj-borrar{margin-top:30px;color:var(--ink2)}
.pie-yo{margin:12px 4px 0;font-size:13px;line-height:2.2;color:var(--ink2);text-align:center}

/* ---------- Hoja: Registrar ingreso ---------- */
#capa-registro{position:absolute;inset:0;z-index:20;display:none}
#capa-registro.abierta{display:block}
#capa-registro:not(.visible){pointer-events:none}   /* mientras se cierra, los toques ya llegan a la app */
#capa-registro .velo{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity 260ms var(--ease)}
#capa-registro.visible .velo{opacity:1}
.hoja{position:absolute;left:0;right:0;bottom:var(--teclado,0px);display:flex;flex-direction:column;gap:18px;max-height:calc(92% - var(--teclado,0px));overflow:hidden;padding:10px 20px calc(var(--safe-bottom) + 22px);border-radius:32px 32px 0 0;background:var(--sheet);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 1px 0 var(--line),0 -20px 50px rgba(0,0,0,.35);transform:translateY(100%);transition:transform 260ms var(--ease)}
#capa-registro.visible .hoja{transform:none}
.asa{align-self:center;width:40px;height:4px;border-radius:2px;background:var(--ink3)}
.hoja-cab{display:flex;justify-content:space-between;align-items:center}
.hoja-cab h2{margin:0;font-size:28px;font-weight:800;font-stretch:75%;line-height:1.05}
.hoja-cuerpo{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:20px;overflow-y:auto;margin:-4px -4px 0;padding:4px;scroll-padding:4px}   /* 4 px de aire: el anillo de foco no se corta */
.monto-caja{display:flex;align-items:baseline;gap:4px;padding:10px 14px;border-radius:14px;background:var(--cell);color:var(--gold)}
.monto-caja:focus-within{box-shadow:inset 0 0 0 2px var(--focus)}
.monto-caja span{font-size:40px;font-weight:800;font-stretch:75%}
#monto{flex:1;min-width:0;padding:0;border:0;outline:none;background:transparent;color:var(--gold);font-size:44px;font-weight:800;font-stretch:75%;line-height:1.1}
.atajos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.atajos .chip{padding:0 4px;font-size:14px}
.leido{margin-top:10px;font-size:14px;font-weight:600;color:var(--ink)}
.nueva-fuente{display:none;gap:8px;margin-top:10px}
.nueva-fuente.visible{display:flex}
.nueva-fuente input{flex:1;min-width:0;height:44px;padding:0 16px;border:0;border-radius:22px;outline:none;background:var(--cell);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-size:16px}
#fecha-otra{display:none;width:100%;height:48px;margin-top:10px;padding:0 16px;border:0;border-radius:24px;background:var(--cell);color:var(--ink);font-size:16px}
#fecha-otra.visible{display:block}
.mas-opciones{padding:4px 14px 14px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}
.mas-opciones summary{display:flex;align-items:center;gap:6px;min-height:44px;list-style:none;cursor:pointer;color:var(--ink2);font-size:15px;font-weight:600}
.mas-opciones summary::-webkit-details-marker{display:none}
.mas-opciones .etiqueta{margin-top:12px}
#nota{display:block;width:100%;min-height:44px;padding:10px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;outline:none;background:transparent;color:var(--ink);font-size:16px}
#nota::placeholder,.bd-paso input::placeholder{color:var(--ink2)}
.contador{margin-top:4px;font-size:13px;color:var(--ink2);text-align:right}
.mas-opciones .nota{margin:8px 0 0}
.segmento button[data-tipo="pasivo"][aria-pressed="true"]{color:var(--violet)}
.acciones-hoja{flex:none;display:flex;flex-direction:column;gap:6px;padding-top:2px}
.boton-eliminar{display:none;min-height:44px;padding:0 12px;border:0;background:none;color:var(--ink2);font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.boton-eliminar.visible{display:block}
.sacudir{animation:sacudir 260ms}
@keyframes sacudir{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ---------- Cierre de mes ---------- */
#reflexion{position:absolute;inset:0;z-index:46;display:none;overflow-y:auto;scroll-padding:4px 0;background:var(--bg)}
#reflexion.abierta{display:block}
.rf-caja{display:flex;flex-direction:column;max-width:520px;margin:0 auto;padding:calc(var(--safe-top) + 28px) 16px calc(var(--safe-bottom) + 32px)}
.rf-caja .titulo-grande{margin:10px 0 16px}
.rf-caja>.etiqueta{margin:22px 4px 0}
.rf-caja .lista{margin-top:2px}
.rf-caja textarea{display:block;width:100%;margin-top:4px;padding:12px 14px;border:0;border-radius:14px;outline:none;resize:none;background:var(--card);color:var(--ink);font-size:16px}
.rf-caja textarea::placeholder{color:var(--ink2)}
.rf-caja textarea:focus{box-shadow:inset 0 0 0 2px var(--focus)}
.rf-caja .boton{margin-top:22px}
.gusto{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:10px}
.gusto button{height:44px;border:0;border-radius:12px;background:var(--card);color:var(--ink);font-size:16px;font-weight:700}
.gusto button[aria-pressed="true"]{background:var(--moneda);color:#1A1204}
.margen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.margen button{height:44px;border:0;border-radius:12px;background:var(--card);color:var(--ink);font-size:15px;font-weight:700}
.margen button[aria-pressed="true"]{background:var(--lime);color:#0B0B0B;box-shadow:inset 0 0 0 1.5px var(--limeedge)}
.margen-aviso{margin-top:18px;padding:12px 14px;border-radius:14px;background:var(--elev);font-size:15px;line-height:1.5}

/* ---------- Celebración: lluvia de monedas, socio en «celebra» y papel rasgado ---------- */
#celebracion{position:absolute;inset:0;z-index:45;display:none;flex-direction:column;overflow:hidden;background:#0B0B0B;color:#F5F5F2;cursor:pointer}
#celebracion.abierta{display:flex}
.cel-arriba{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:22px;padding:calc(var(--safe-top) + 40px) 20px 40px;overflow:hidden}
.cel-lluvia{position:absolute;inset:0;pointer-events:none}
.cel-lluvia span{position:absolute;animation:bmCae var(--dur,800ms) var(--ease) var(--delay,0ms) both}
.cel-lluvia span i{display:block;width:100%;height:100%;border-radius:50%;background:var(--moneda);box-shadow:inset 0 0 0 2px #9C6B1C,inset 0 0 0 4px rgba(255,240,200,.45),0 8px 16px rgba(0,0,0,.5)}
#celebracion.saltada .cel-lluvia span{animation:none}
@keyframes bmCae{from{transform:translateY(-560px);opacity:0}25%{opacity:1}to{transform:translateY(0);opacity:1}}
.cel-socio{position:relative;display:block;width:132px;height:132px;--badgering:#0B0B0B;--lime:#D8FF00;--limeedge:transparent;--halo:rgba(242,193,78,.3)}
.cel-titulo{position:relative;margin:0;font-size:clamp(72px,24vw,96px);font-weight:900;font-stretch:62%;line-height:.86;text-align:center;color:#F5F5F2}
.cel-titulo span{color:#F2C14E}
.cel-abajo{--focus:#0B0B0B;position:relative;display:flex;flex-direction:column;gap:14px;padding:40px 24px calc(var(--safe-bottom) + 32px);background:#F2C14E;color:#1A1204}
.cel-abajo::before{content:"";position:absolute;left:-20px;right:-20px;top:-17px;height:34px;background:url("./img/rasgado.png") center/auto 34px repeat-x}
.cel-texto{margin:0;font-size:19px;font-weight:600;line-height:1.4}
.cel-texto strong{font-weight:800}
.cel-abajo .boton{margin-top:6px}

/* ---------- Diálogos y avisos ---------- */
/* El diálogo va encima de todo, también del PIN («Olvidé mi PIN») y del cierre de mes */
#dialogo{position:absolute;inset:0;z-index:40;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.55)}
#dialogo.abierto{display:flex}
#dialogo.sobre-pin{z-index:130}   /* solo «Olvidé mi PIN»: los demás diálogos quedan debajo del bloqueo */
.dialogo-caja{width:100%;max-width:420px;padding:24px 20px 20px;border-radius:28px;background:var(--sheet);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 0 0 1px var(--line),0 24px 60px rgba(0,0,0,.45)}
.dialogo-caja h2{margin:0;font-size:24px;font-weight:800;font-stretch:75%;line-height:1.1}
.dialogo-caja p{margin:10px 0 20px;font-size:15px;line-height:1.55;color:var(--ink2)}
.dialogo-botones{display:flex;flex-direction:column;gap:8px}
.dialogo-botones .boton.secundario{margin-top:0}
#pegar{position:absolute;inset:0;z-index:70;display:none;align-items:flex-end;justify-content:center;padding:16px;background:rgba(0,0,0,.55)}
#pegar.abierto{display:flex}
#pegar textarea{display:block;width:100%;margin:12px 0 0;padding:12px;border:0;border-radius:14px;outline:none;resize:vertical;background:var(--cell);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-size:16px}
#pegar textarea:focus{box-shadow:inset 0 0 0 2px var(--focus)}
#pegar textarea::placeholder{color:var(--ink2)}
/* Avisos: el texto sigue en el árbol de accesibilidad (role=status anuncia cada cambio), pero el botón oculto de
   «Deshacer» o «Actualizar» no recibe el foco */
#deshacer:not(.visible) button,#actualizar:not(.visible) button{visibility:hidden}
#deshacer[inert],#actualizar[inert]{visibility:hidden}   /* con una capa abierta no se ven: no se pueden tocar */
#deshacer.visible ~ #actualizar{visibility:hidden;pointer-events:none}   /* ocupan el mismo lugar: «Actualizar» espera a que se vaya «Deshacer» */
#mini{position:absolute;left:16px;right:16px;top:calc(var(--safe-top) + 14px);z-index:48;display:flex;align-items:center;gap:12px;max-width:528px;margin:0 auto;padding:12px 16px;border-radius:20px;background:var(--sheet);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 0 0 1px var(--line),0 14px 30px -12px rgba(0,0,0,.55);transform:translateY(-140%);opacity:0;transition:transform 260ms var(--ease),opacity 200ms;--badgering:#1E1E1E}
:root[data-tema="claro"] #mini{--badgering:#FFFFFF}
#mini.visible{transform:none;opacity:1}
.mini-socio{flex:none;display:block;width:46px;height:46px}
#mini b{display:block;font-size:15px;font-weight:800}
#mini span{display:block;margin-top:2px;font-size:14px;line-height:1.4;color:var(--ink2)}
#aviso{position:absolute;left:16px;right:16px;bottom:calc(var(--safe-bottom) + 104px);z-index:50;width:fit-content;max-width:528px;margin:0 auto;padding:14px 20px;border-radius:24px;background:var(--ink);color:var(--bg);font-size:15px;font-weight:600;line-height:1.35;text-align:center;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity 200ms,transform 200ms var(--ease)}
#aviso.visible{opacity:1;transform:none}
#aviso.alto{bottom:calc(var(--safe-bottom) + 190px)}
#aviso{z-index:51}
#deshacer,#actualizar{position:absolute;left:16px;right:16px;bottom:calc(var(--safe-bottom) + 104px);z-index:50;display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:528px;margin:0 auto;padding:8px 8px 8px 18px;border-radius:20px;background:var(--sheet);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 0 0 1px var(--line),0 14px 30px -12px rgba(0,0,0,.55);font-size:15px;font-weight:600;line-height:1.35;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity 200ms,transform 200ms var(--ease)}
#deshacer.visible,#actualizar.visible{opacity:1;transform:none;pointer-events:auto}
#deshacer button,#actualizar button{flex:none;min-height:44px;padding:0 18px;border:0;border-radius:22px;background:var(--btnbg);color:var(--btnink);font-size:15px;font-weight:700}

/* ---------- PIN ---------- */
.pin{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:calc(var(--safe-top) + 20px) 20px calc(var(--safe-bottom) + 20px);background:var(--bg)}
.pin[hidden]{display:none}
.pin-caja{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:340px;text-align:center}
.pin-caja h2{margin:18px 0 0;font-size:28px;font-weight:800;font-stretch:75%}
.pin-texto{min-height:22px;margin:0;font-size:15px;color:var(--ink2)}
.pin-texto.error{color:var(--ink);font-weight:700}
.pin-puntos{display:flex;gap:16px;margin:10px 0 18px}
.pin-puntos i{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink3);transition:background 150ms}
.pin-puntos i.lleno{background:var(--lime);border-color:var(--lime);box-shadow:0 0 0 1px var(--limeedge)}
.pin-puntos.sacudir{animation:sacudir 260ms}
.pin-teclado{display:grid;grid-template-columns:repeat(3,72px);gap:14px;justify-content:center}
.pin-teclado button{width:72px;height:72px;border:0;border-radius:50%;background:var(--card);color:var(--ink);font-size:28px;font-weight:600}
.pin-teclado button:active{background:var(--elev)}
.pin-enlaces{display:flex;gap:20px;margin-top:14px}
/* Pantallas bajas (320x568, o el navegador con sus barras): el bloqueo entra entero; si aún no cabe, se desplaza */
.pin{overflow-y:auto}
.pin-caja{margin:auto 0}
@media (max-height:600px){
  .pin-caja h2{margin-top:6px}
  .pin-puntos{margin:6px 0 10px}
  .pin-teclado{grid-template-columns:repeat(3,64px);gap:10px}
  .pin-teclado button{width:64px;height:64px}
  .pin-enlaces{margin-top:6px}
}

/* Con «reducir movimiento», nada se mueve */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}