/* =========================================================
   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);--spark:#FFE7A1;--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);--spark:#B07A12;
}

*{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,#hoja-info:focus,#rf-titulo:focus,#bienvenida h1:focus,#in-saludo:focus{outline:none}

/* ---------- Marco ---------- */
/* v21.1 (iPhone): fija a toda la pantalla. En la app instalada, el alto del 100 % de html y body se quedaba corto
   (le faltaba la barra de estado) y la barra de abajo subía; con position:fixed e inset:0 llega siempre al borde. */
#app{position:fixed;top:0;bottom:0;left:0;right:0;max-width:560px;margin:0 auto;overflow:hidden;background:var(--bg)}
/* v21.2 (iPhone instalado): si el viewport termina antes del borde de la pantalla, ui.js mide ese hueco (--hueco-abajo)
   y #app baja hasta el borde de verdad. Así la barra queda a safe-bottom + 5 del borde. Sin hueco, nada cambia. */
:root[data-hueco] #app{bottom:calc(-1 * var(--hueco-abajo, 0px))}
:root[data-hueco] .pin{bottom:calc(-1 * var(--hueco-abajo, 0px))}
/* Franja bajo la barra de estado: el fondo de la app, en claro y en oscuro (v21.1; antes negra fija). La barra de estado
   va en «default» (index.html), así iOS pone la hora oscura en claro; esta franja solo cuenta si el área segura llega aquí. */
#app::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--safe-top);background:var(--bg);z-index:200;pointer-events:none}
#app:has(#bienvenida.activa)::before{background:#0B0B0B}   /* la bienvenida es negra en los dos temas */
.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) + 132px + var(--tapa, 0px));scroll-padding:calc(var(--safe-top) + 16px) 0 calc(var(--safe-bottom) + 132px + var(--tapa, 0px))}
/* v21.1 (iPhone): 132 px abajo, como el README, más el área segura: lo último queda entero sobre la barra y la moneda */
.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[aria-pressed="true"][aria-expanded="true"]{outline:2px solid var(--ink);outline-offset:2px}   /* el chip cuyo panel está abierto */
.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}
.chips.desliza{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
/* v21.1 (decisión 63): las fichas de Hoy van en varias líneas, como en «¿Qué jugadas hiciste hoy?»: todas a la vista */
#hm-chips{margin-top:8px}
.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:"→";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:"✦";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:"~";content:"~" / "";font-size:26cqw;font-weight:800;color:var(--ink2)}
.socio-ins.duerme{background:#525252;padding-bottom:2cqw}
.socio-ins.duerme::before{content:"z";content:"z" / "";font-size:22cqw;font-weight:800;color:#FFFFFF}
.socio-ins.alerta{background:var(--ink)}
.socio-ins.alerta::before{content:"!";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:var(--spark);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 ---------- */
/* v21.1 (iPhone): la barra va abajo, 5 px sobre el área segura (sin ella, a 16 px, como antes), y por debajo la tapa el fondo:
   el contenido ya no se ve entre la barra y el borde. */
.nav-envoltura{--nav-abajo:max(16px, calc(var(--safe-bottom) + 5px));position:absolute;left:16px;right:16px;bottom:var(--nav-abajo);z-index:5}
.nav-envoltura::after{content:"";position:absolute;left:-16px;right:-16px;top:100%;height:var(--nav-abajo);background:var(--bg)}
.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.sin-carga .contenido>:not(.grano):not(.logo):not(.lema){display:none}   /* la carga falló: solo el logo y «Error inesperado» */
#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 var(--ink3)}   /* F6-20: borde de 1 px en --ink3 (la bienvenida lo fija en #737373) */
.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}
/* Estados (Avisos.dc.html): vidrio, el socio a 46 px, la etiqueta «// …», el texto y sus acciones a la derecha */
.estado{display:flex;flex-direction:column;gap:12px;margin:0 0 12px;padding:16px;border-radius:20px;background:var(--sheet);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 0 0 1px var(--line),0 12px 28px -14px rgba(0,0,0,.5);--badgering:var(--sheet)}
.estado[hidden]{display:none}
.estado-fila{display:flex;align-items:flex-start;gap:12px}
.estado-txt{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.estado-txt p{margin:0;font-size:15px;font-weight:600;line-height:1.4;color:var(--ink)}
.estado-acciones{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.estado-acciones .boton{margin-top:0}
.estado-x{flex:none;width:44px;height:44px;margin:-10px -10px 0 0;border:0;border-radius:50%;background:none;font-size:22px;line-height:1;color:var(--ink2)}
.estado.en-hoja{margin:12px 0 0}
a.boton{text-decoration:none}
/* Primera vez: la moneda + queda resaltada */
.barra-nav .mas.resaltada{box-shadow:0 0 0 3px #171717,0 0 0 5px #D8FF00}
.barra-nav .mas.resaltada:focus-visible{outline-offset:8px;box-shadow:0 0 0 3px #171717,0 0 0 5px #D8FF00,0 0 0 8px #171717}   /* el foco va por fuera del resaltado, separado por un anillo oscuro */
.tarjeta.hoy{margin-top:0}
/* Tarjeta del día: el socio a 46 px con la cara del momento, el título y, si hay, el subtítulo */
.dia-cab{display:flex;align-items:center;gap:12px}
.dia-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.dia-txt .tarjeta-titulo{line-height:1.25;text-wrap:pretty}
.dia-sub{margin:0;font-size:14px;line-height:1.35;color:var(--ink2)}
.tarjeta.hoy .chips{margin-top:14px}
.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}
#siembra-pie{padding-top:12px;border-top:1px solid var(--line)}
.racha{flex:none;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);white-space:nowrap}
.racha-txt{display:flex;flex-direction:column;line-height:1.15}
.racha-txt span{font-size:13px;color:var(--ink2)}
.racha-txt b{font-size:14px;font-weight:700}
.racha .torre-caja{width:28px;height:28px}
.torre-caja{flex:none;display:block}
.hoy-cierre{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.hoy-cierre p{margin:2px 0 0;font-size:14px;line-height:1.35;color:var(--ink2)}
.cierre-titulo{font-size:15px;font-weight:700}
/* Botón compacto (dentro de las tarjetas): 44 px */
.boton.compacto{width:auto;height:44px;padding:0 16px;border-radius:22px;font-size:15px}
.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}
#hm-tu-mes .enlace-sutil{align-self:flex-start}
/* Tu mes (fase 3): la cifra en oro, el anillo de 72 px con el próximo paso al lado y la curva del mes contra el mejor mes */
#hm-tu-mes{display:flex;flex-direction:column;gap:10px;padding:16px 18px 4px}
#hm-tu-mes .etiqueta-tec{margin:0}
.esquina{position:absolute;font-size:18px;font-weight:300;line-height:1;color:var(--ink3)}
/* v21.1 (decisión 64): a −4 px (antes −9). Siguen en las esquinas, sobre la curva, y quedan a 12 px del borde de la pantalla */
.esquina.e1{top:-4px;left:-4px}.esquina.e2{top:-4px;right:-4px}.esquina.e3{bottom:-4px;left:-4px}.esquina.e4{bottom:-4px;right:-4px}
.mes-cifra{display:flex;flex-direction:column;gap:4px}
.cifra-mes{font-size:60px;font-weight:800;font-stretch:75%;line-height:1;letter-spacing:-.01em;color:var(--gold);white-space:nowrap}
.mes-sub{min-height:19px;font-size:14px;line-height:1.35;color:var(--ink2)}
.mes-fila{display:flex;align-items:center;gap:14px}
.anillo-caja.chico{width:72px;height:72px}
.anillo-caja.chico .anillo-pct{font-size:16px}
.mes-paso{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.mes-paso .hero-record{margin:0;font-weight:600}
.paso-titulo{font-size:15px;font-weight:700;line-height:1.3}
.paso-detalle{font-size:13px;line-height:1.35;color:var(--ink2)}
.paso-barra{height:4px;margin-top:2px;border-radius:2px;background:var(--track);overflow:hidden}
.paso-barra i{display:block;height:100%;width:0;border-radius:2px;background:var(--goldstroke)}
.curva{position:relative;height:72px;margin-top:6px;touch-action:pan-y;cursor:ew-resize;border-radius:6px}
.curva svg{display:block;width:100%;height:72px;overflow:visible}
.curva-mejor{fill:none;stroke:var(--ink3);stroke-width:1.5;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.curva-area{fill:var(--goldstroke);opacity:.14}
.curva-linea{fill:none;stroke:var(--goldstroke);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.curva-guia{position:absolute;top:-4px;bottom:0;width:1px;background:var(--ink2);pointer-events:none}
.curva-guia .punto{position:absolute;left:50%;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--card)}
.curva-guia .punto.mejor{width:8px;height:8px;background:var(--ink3)}
.curva-guia .punto.actual{width:10px;height:10px;background:var(--goldstroke)}
.curva-leyenda{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;font-weight:600;color:var(--ink2)}
.curva-leyenda .ley{display:flex;align-items:center;gap:10px}
.curva-leyenda .ley span{display:flex;align-items:center;gap:5px}
.curva-leyenda .tr{width:14px;height:0;border-top:2px solid var(--goldstroke)}
.curva-leyenda .tr.mejor{border-top:1.5px dashed var(--ink3)}
/* Tira de la semana: 7 casillas L–D (toque de 44 px), la monedita de los días con ingreso y el total de la semana */
.tira{display:flex;flex-direction:column;gap:4px;margin-top:14px}
.tira-cab{align-self:flex-end;font-size:14px;font-weight:600;color:var(--ink2)}
.tira-cab b{font-weight:700}
.tira-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin:0 -9px}   /* −9 px: cada día llega a 44 px de ancho desde 360 px */
.tira-dia{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:44px;padding:5px 5px 0;border:0;background:none;color:inherit;font:inherit}
.casilla{display:grid;place-items:center;width:100%;height:34px;border-radius:10px;background:var(--cell);font-size:14px;font-weight:800;color:var(--ink2)}
.casilla.si{background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--limeedge);color:#0B0B0B}
.casilla.viene{background:transparent;border:1.5px dashed var(--ink3)}
.casilla.hoy{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink)}
.casilla.si.hoy{box-shadow:inset 0 0 0 1.5px var(--limeedge),0 0 0 2px var(--card),0 0 0 4px var(--ink)}
.tira-dia:focus-visible{outline-offset:4px;border-radius:12px}
.monedita{width:8px;height:8px;border-radius:50%}
.monedita.con{background:linear-gradient(150deg,#FFE7A1,#F2C14E 50%,#C8902B);box-shadow:0 0 0 1px rgba(156,107,28,.7)}
/* Hoja de información: el día de la tira y «Por qué» */
#capa-info{position:absolute;inset:0;z-index:22;display:none}
#capa-info.abierta{display:block}
#capa-info:not(.visible){pointer-events:none}
#capa-info .velo{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity 260ms var(--ease)}
#capa-info.visible .velo{opacity:1}
#capa-info.visible .hoja{transform:none}
.hoja-info .hoja-cuerpo{gap:14px}
/* Compartir (HojaInforme.dc.html): encima del cierre de mes; con poca altura, la hoja se desplaza */
#capa-informe{position:absolute;inset:0;z-index:47;display:none}
#capa-informe.abierta{display:block}
#capa-informe:not(.visible){pointer-events:none}
#capa-informe .velo{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity 260ms var(--ease)}
#capa-informe.visible .velo{opacity:1}
#capa-informe.visible .hoja{transform:none}
.hoja-informe{gap:6px;padding-bottom:0}
.hi-scroll{display:flex;flex-direction:column;gap:12px;min-height:0;margin:0 -20px;padding:0 20px calc(var(--safe-bottom) + 22px);overflow-y:auto;overscroll-behavior:contain}
.hi-etq{display:flex;align-items:center;gap:8px;min-height:20px;font-size:13px;font-weight:700;font-stretch:118%;letter-spacing:.08em;color:var(--ink2)}
.hi-etq img{width:20px;height:20px}
.hoja-informe .hoja-cab h2{font-size:28px;font-weight:800;font-stretch:75%;line-height:1.05}
.hi-estilos{margin-top:0}
.hi-scroll .interruptor-fila{margin-top:0}
.hi-vista{position:relative;flex:none;align-self:center;width:180px;height:320px;border-radius:12px;overflow:hidden;background:#0B0B0B;box-shadow:0 0 0 1px var(--line),0 12px 24px -12px rgba(0,0,0,.6)}
.hi-lienzo{display:block;width:100%;height:100%}
.hi-vista.cargando .hi-lienzo{opacity:.35}
.hi-cargando{position:absolute;inset:0;display:grid;place-items:center;padding:16px;color:#A3A3A3;font-size:13px;text-align:center}
.hoja-informe .boton.circ{flex:none;margin-top:4px}
.hi-botones{display:flex;gap:10px}
.hi-botones .boton.secundario{flex:1;min-height:44px;margin-top:0;font-size:15px}
/* «Preparando…»: los tres botones esperan (aria-disabled: siguen enfocables y del mismo tamaño), en gris con el texto en
   --ink2 (AA sobre la hoja en los dos temas), sin opacidad */
.hoja-informe .boton[aria-disabled="true"],.hoja-informe .boton[aria-disabled="true"]:active{cursor:default;transform:none}
.hoja-informe .boton.circ[aria-disabled="true"]{background:var(--cell);color:var(--ink2)}
.hoja-informe .boton.circ[aria-disabled="true"] .ci{background:var(--ink2)}
.hoja-informe .boton.circ[aria-disabled="true"] .ci::before{background:var(--card)}
.hoja-informe .boton.secundario[aria-disabled="true"]{color:var(--ink2)}
.interruptor-bm.lima[aria-checked="true"] i{background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--limeedge)}
.interruptor-bm.lima[aria-checked="true"] i::after,:root[data-tema="claro"] .interruptor-bm.lima[aria-checked="true"] i::after{background:#0B0B0B}
/* F6-20: la píldora elegida del selector lleva un contorno de 1,5 px en --focus, por dentro; el anillo de foco del teclado
   (2 px, a 2 px por fuera) se suma por fuera, así que se distingue: elegida sola = un filete; elegida con foco = dos */
.segmento button[role="radio"][aria-checked="true"]{background:var(--card);color:var(--ink);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--focus),0 1px 3px rgba(0,0,0,.2)}
.dia-entro{margin:0;font-size:16px;font-weight:700}
.dia-ing{margin-top:4px;font-size:14px;line-height:1.4;color:var(--ink2)}
.dia-jugadas{margin:0;font-size:16px;font-weight:700}
.dia-acciones{display:flex;flex-direction:column}
.dia-accion{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;border-bottom:1px solid var(--line);font-size:15px}
.dia-accion:last-child{border-bottom:0}
.pastilla{flex:none;min-width:28px;height:28px;padding:0 8px;border-radius:8px;display:grid;place-items:center;background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--limeedge);color:#0B0B0B;font-size:14px;font-weight:800}
/* Tu semana: la tarjeta con el socio y la jugada de la semana (Plus) */
.semana-tarjeta{display:flex;flex-direction:column;gap:14px;padding:16px}
.semana-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.semana-rango{margin-top:4px;font-size:17px;font-weight:700}
.semana-tarjeta .sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.semana-tarjeta .sc-v{font-size:28px}
.sc-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.sc-pie p{margin:0;font-size:14px;line-height:1.4;color:var(--ink2)}
.sc-pie .boton{flex:none;margin-top:0}
.jugada{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:var(--elev)}
.jugada-etq{display:flex;align-items:center;gap:8px}
.jugada-etq img{width:18px;height:18px}
.jugada-titulo{margin:0;font-size:17px;font-weight:700;line-height:1.25}
.jugada-frase{margin:0;font-size:14px;line-height:1.4;color:var(--ink2)}
.jugada-botones{display:flex;gap:8px;flex-wrap:wrap}
.jugada-botones .boton{margin-top:0}
.jugada-barra{height:6px;border-radius:3px;background:var(--cell);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.jugada-barra i{display:block;height:100%;border-radius:3px;background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--limeedge)}
#info-etq{margin-bottom:-8px}
.jugada-avance{margin:0;font-size:14px;font-weight:600}
.jugada-cierre{margin:0;font-size:15px;font-weight:700}
.porque-frase{margin:0;font-size:16px;line-height:1.45}
.porque-barras{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:12px 0}
.porque-barras span{font-size:13px;color:var(--ink2)}
.porque-barras .pb{height:14px;border-radius:7px;background:var(--cell);overflow:hidden}
.porque-barras .pb i{display:block;height:100%;border-radius:7px}
.porque-barras b{font-size:13px;font-weight:700}
.porque-base{margin:0;font-size:14px;line-height:1.45;color:var(--ink2)}
.info-pie{display:flex;justify-content:center;margin-top:-8px}
.enlace-tenue{color:var(--ink2)}
/* Mi compromiso: el avance de la jugada de la semana (Plus) */
.comp-jugada{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.comp-jugada .cj-fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.comp-jugada .cj-accion{font-size:15px;font-weight:600}
.comp-jugada .cj-n{font-size:17px;font-weight:800;font-stretch:75%;white-space:nowrap}
.comp-jugada .cj-falta{margin:0;font-size:13px;color:var(--ink2)}
/* Registros: el filtro de un día (desde la hoja del día) */
.filtro-dia{display:flex;align-items:center;gap:8px;max-width:100%;padding-top:10px;padding-bottom:10px;white-space:normal;text-align:left;line-height:1.25;background:var(--elev);box-shadow:inset 0 0 0 1.5px var(--focus)}   /* un nombre largo parte en dos líneas y la × sigue a la vista */
.filtro-dia .x-chip{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--ink)}
.filtro-dia .x-chip::before{content:"";width:14px;height:14px;background:var(--bg);-webkit-mask:url("./img/iconos/x.svg") center/contain no-repeat;mask:url("./img/iconos/x.svg") center/contain no-repeat}
.rg-dia{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:10px}
.rg-dia:empty{display:none}
.rg-resumen{margin:4px 4px 0;font-size:14px;font-weight:400;color:var(--ink2)}
.rg-resumen b{font-weight:700}
.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)}
/* Para ti en Hoy (Hoy.dc.html): una sola tarjeta, un hallazgo por fila con su enlace; sin índice ni minigráfica */
.parati-hoy{padding:0 16px}
.insight{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-top:14px}
.insight + .insight{border-top:1px solid var(--line)}
.insight-frase,.hallazgo-frase{margin:0;font-size:16px;font-weight:600;line-height:1.35;text-wrap:pretty}
.insight-base,.hallazgo-base{margin:0;font-size:14px;line-height:1.4;color:var(--ink2)}

/* ---------- Plata (fase 4): Tus números, Jugadas → plata y Para ti con sus minigráficas ---------- */
.numeros-caja,.bloque-plata{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.numeros-caja > .etiqueta-tec,.bloque-plata > .etiqueta-tec{margin:0 4px}
.numeros{display:flex;gap:10px;margin:0 -16px;padding:4px 16px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.numeros::-webkit-scrollbar{display:none}
.numero{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:136px;min-height:118px;padding:14px;border:0;border-radius:20px;background:var(--card);color:var(--ink);font:inherit;text-align:left}
.numero[aria-expanded="true"]{box-shadow:inset 0 0 0 2px var(--focus)}
.numero .t{font-size:14px;font-weight:600;color:var(--ink2)}
.numero .v{font-size:24px;font-weight:800;font-stretch:75%;line-height:1.05;white-space:nowrap}
.numero .v.oro{color:var(--gold)}
.numero .v.violeta{color:var(--violet)}
.numero .d{font-size:13px;line-height:1.3;color:var(--ink2)}
.numero-frase{margin:0;padding:14px 16px;border-radius:14px;background:var(--card);font-size:15px;line-height:1.45;text-wrap:pretty}
.numero-frase b{font-weight:700}
.jp-cab{display:flex;justify-content:space-between;align-items:center;margin:0 4px}
.jp-cab .etiqueta-tec{margin:0}
.jp-plus{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--gold)}
.jp{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:20px;background:var(--card)}
.jp-frase{margin:0;font-size:16px;font-weight:600;line-height:1.35;text-wrap:pretty}
.jp-base{margin:0;font-size:14px;line-height:1.4;color:var(--ink2)}
.jp-fila{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.jp-fila .cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;font-weight:600}
.jp-fila .cab b{font-size:17px;font-weight:800;font-stretch:75%;color:var(--gold)}
.jp-barra{height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.jp-barra i{display:block;height:100%;border-radius:3px;background:var(--goldstroke)}
.jp-nota{margin:0;font-size:13px;line-height:1.35;color:var(--ink2)}
.hallazgos{display:flex;flex-direction:column;gap:12px}
#in-parati + .lista{margin-top:16px}
.hallazgo{display:flex;flex-direction:column;gap:8px;padding:16px 16px 2px;border-radius:20px;background:var(--card)}
.hallazgo-i{font-size:13px;font-weight:700;font-stretch:118%;letter-spacing:.08em;color:var(--ink2)}
.hallazgo .enlace-sutil,.insight .enlace-sutil{align-self:flex-start}
/* Minigráficas de 60 px: el dibujo va con aria-hidden; la etiqueta accesible la lleva su caja (role="img") */
.mini{height:60px}
.mini > div{height:100%}
.mini-lbl{font-size:11px;font-weight:600;line-height:1;color:var(--ink2)}
.mini-barras{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-content:center;align-items:center;gap:10px}
.mini-barras span{font-size:13px;color:var(--ink2)}
.mini-barras .pb{height:14px;border-radius:7px;background:var(--cell);overflow:hidden}
.mini-barras .pb i{display:block;height:100%;border-radius:7px}
.mini-barras b{font-size:13px;font-weight:700}
.mini-ingresos{display:flex;align-items:flex-end;gap:12px}
.mi-col{flex:0 1 34px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.mi-col i{display:block;width:100%;border-radius:6px 6px 2px 2px;background:var(--goldstroke)}
.mi-col .mini-lbl{white-space:nowrap}
.mi-der{flex:none;align-self:center;margin-left:auto;white-space:nowrap;font-size:13px;font-weight:700;color:var(--gold)}
.mini-ingresos{min-width:0}
.mi-svg{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}
.mi-svg svg{display:block;width:100%;height:36px;fill:var(--goldstroke)}
.mi-fechas{display:flex;justify-content:space-between}
.mi-fechas .mini-lbl{white-space:nowrap}
.mini-meses{position:relative;display:grid;align-items:end}
.mm-hueco{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:flex-start;border-radius:10px;background:var(--cell)}
.mm-hueco .mini-lbl{position:relative;top:6px;font-weight:700;white-space:nowrap}
.mm-col{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:4px}
.mm-dot{width:14px;height:14px;border-radius:50%;border:1.5px dashed var(--ink2)}
.mm-dot.con{border:0;background:linear-gradient(150deg,#FFE7A1,#F2C14E 50%,#C8902B);box-shadow:0 0 0 1px rgba(156,107,28,.6)}
.mini-carga{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-content:center;align-items:center;gap:10px}
.mini-carga span{font-size:13px;color:var(--ink2)}
.mini-carga .pb{height:14px;border-radius:7px;background:var(--cell);overflow:hidden}
.mini-carga .pb i{display:block;height:100%;border-radius:7px;background:var(--goldstroke)}
.mini-carga b{font-size:13px;font-weight:700;color:var(--gold)}
.mini-svg{display:flex;align-items:center;gap:12px}
.mini-svg svg{flex:1;min-width:0;height:60px;overflow:visible}
.mini-svg .der{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:13px;color:var(--ink2)}
.mini-svg .der b{font-weight:700;color:var(--gold)}
.ms-actual{fill:none;stroke:var(--goldstroke);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ms-antes{fill:none;stroke:var(--ink3);stroke-width:1.5;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.ms-proy{fill:none;stroke:var(--goldstroke);stroke-width:2;stroke-dasharray:2 5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mini-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;gap:6px}
.md-col{display:flex;flex-direction:column;align-items:center;gap:3px}
.md-col i{display:block;width:100%;max-width:26px;border-radius:4px 4px 1px 1px;background:var(--ink3)}
.md-col i.cero{height:2px;border-radius:1px;background:var(--track)}
.md-col.gana i{background:var(--goldstroke)}
.md-col.gana .mini-lbl:first-child{font-weight:700;color:var(--gold)}
.md-col.gana .mini-lbl:last-child{font-weight:700;color:var(--ink)}
/* «Arma tu juego» (fase 6): la tarjeta del día 2 */
.arma{display:flex;flex-direction:column;gap:14px}
.arma > .etiqueta-tec{margin:0}
.arma-bloque{display:flex;flex-direction:column;gap:10px}
.arma-bloque.linea{padding-top:14px;border-top:1px solid var(--line)}
.arma-bloque .tarjeta-titulo{font-size:17px}
.arma-ayuda{margin:-4px 0 0;font-size:14px;line-height:1.4;color:var(--ink2);text-wrap:pretty}
.arma-socios{display:flex;justify-content:space-between;gap:4px;--badgering:var(--card)}
.arma-socio{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:44px;padding:6px 0 2px;border:0;border-radius:14px;background:none;color:var(--ink2);font-size:13px;font-weight:600}
.arma-socio .disco{display:block;width:54px;max-width:100%;aspect-ratio:1}
.arma-socio[aria-checked="true"]{color:var(--ink);font-weight:800}
.arma-pers{display:flex;flex-direction:column;gap:8px}
.arma-pers .personalidad{padding:10px 14px;background:var(--cell);box-shadow:inset 0 0 0 1px var(--line)}
.arma-pers .personalidad[aria-checked="true"]{background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--limeedge)}
.arma-pers .personalidad[aria-checked="true"] .tus-datos{color:#0B0B0B}
.arma-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.arma-cuenta{font-size:13px;color:var(--ink2);white-space:nowrap}
.arma .chips .chip{padding:0 14px}
.arma-nueva{margin-top:0}
.arma-sub{font-size:15px;font-weight:700}
.arma-nota{margin:0;font-size:13px;color:var(--ink2)}
.arma-botones{display:flex;gap:10px}
.arma-botones .boton{flex:1;margin-top:0}
.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}


/* 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;justify-content:space-between;gap:14px}
/* La frase de la racha: la dice el socio en un globo --elev */
.comp-dice{display:flex;align-items:flex-start;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.globo{position:relative;flex:1;margin:0;padding:12px 14px;border-radius:14px;background:var(--elev);font-size:15px;font-weight:600;line-height:1.4;text-wrap:pretty}
.globo::before{content:"";position:absolute;left:-5px;top:17px;width:10px;height:10px;border-radius:2px;background:var(--elev);transform:rotate(45deg)}
.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)}
/* Tablero: el panel interior es negro en claro (--tab) y transparente sobre la tarjeta en oscuro; los colores no cambian con el tema */
.tablero-caja{padding:16px}
.tablero{display:flex;flex-direction:column;gap:5px;padding:12px;border-radius:14px;background:var(--tab)}
.calor-dias,.calor{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.calor-dias{padding-bottom:2px;font-size:11px;font-weight:600;color:#A3A3A3;text-align:center}
.calor i,.tablero-leyenda i{display:block;border-radius:7px;background:rgba(255,255,255,.08)}
.calor i{height:26px}
.calor i.n1,.tablero-leyenda i.n1{background:rgba(216,255,0,.28)}
.calor i.n2,.tablero-leyenda i.n2{background:rgba(216,255,0,.58)}
.calor i.n3,.tablero-leyenda 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;justify-content:flex-end;align-items:center;gap:5px;padding-top:6px;font-size:13px;font-weight:600;color:#A3A3A3}
.tablero-leyenda i{width:14px;height:14px;border-radius:4px}
/* Este mes: cuatro filas y «Lo que más hiciste» en la misma tarjeta */
.este-mes .fila-ios{min-height:62px}
.este-mes .fila-ios .v{font-size:20px}
.em-top{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px 0}
.em-top .k{margin:0;font-size:16px;font-weight:600}
.em-top-fila{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;line-height:1.35;color:var(--ink2)}
.em-top-fila b{font-size:15px;font-weight:700;color:var(--ink)}
/* Tus acciones: índice .01 (decorativo) y el nombre */
.acciones-lista .fila-ios{justify-content:flex-start;min-height:52px}
.acciones-lista .indice{font-size:13px;font-weight:700;font-stretch:118%;letter-spacing:.08em;color:var(--ink3)}
.acciones-lista .k{font-weight:400}
.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}
/* F6-20: borde de 1 px en --ink3, sin quitarle ancho al texto (el mismo de antes del borde, para que quepan los nombres
   sugeridos): la caja sale 8 px a la izquierda, así el texto sigue alineado con el panel, y «Quitar» absorbe el espacio
   entre la cuenta y su ícono (el ícono ya tiene 12 px de aire dentro de sus 44 px) */
.accion-fila input{flex:1;min-width:0;min-height:44px;margin-left:-8px;padding:10px 8px;border:0;border-radius:12px;outline:none;background:transparent;box-shadow:inset 0 0 0 1px var(--ink3);color:var(--ink);font-size:16px}
.accion-fila .quitar{margin-left:-8px}
.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:calc(100% + 20px);min-height:56px;margin:6px -10px 0;padding:8px 10px;border:0;border-radius:12px;outline:none;resize:none;background:transparent;box-shadow:inset 0 0 0 1px var(--ink3);color:var(--ink);font-size:20px;font-weight:600;line-height:1.3}   /* F6-20; el texto queda alineado con la frase */
.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)}

/* ---------- 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);box-shadow:inset 0 0 0 1px var(--ink3);color:var(--ink2)}   /* F6-20 */
.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}
/* Registros (Registros.dc.html): «// OCTUBRE 2026» encima de cada grupo, sin total; filas de 64 px */
.grupo-tit{margin:18px 4px 8px}
.grupo-tit + .grupo{margin-top:0;padding-top:0}
#rg-lista .fila{min-height:64px}
.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(--ink3);border-radius:0;outline:none;background:transparent;color:var(--ink);font-size:16px}   /* F6-20: subrayado de 1 px en --ink3 */
.bd-paso .boton{height:48px;margin-top:0}
.bd-aviso{font-size:13px;font-weight:600;color:var(--ink)}

/* ---------- Yo ---------- */
/* Cabecera de 332 px, siempre negra (incluye la barra de estado): «YO», el nombre gigante en contorno, el socio a 172 con
   aro y halo (con los tonos del modo oscuro aunque el tema sea claro) y el papel rasgado, que en claro se funde con el fondo */
.yo-cabecera{--yo-top:max(var(--safe-top), 24px);position:relative;height:calc(278px + var(--yo-top));margin:calc(-20px - var(--safe-top)) -16px 0;background:#0B0B0B;overflow:hidden}
.yo-titulo{position:absolute;left:20px;top:calc(var(--yo-top) + 10px);margin:0;font-size:40px;font-weight:900;font-stretch:62%;line-height:.9;text-transform:uppercase;color:#F5F5F2}
.yo-gigante{position:absolute;left:50%;top:calc(var(--yo-top) + 64px);transform:translateX(-50%);font-size:156px;font-weight:900;font-stretch:62%;line-height:.9;white-space:nowrap;color:transparent;-webkit-text-stroke:2px rgba(245,245,242,.05)}
.yo-socio{position:absolute;left:50%;top:calc(var(--yo-top) + 54px);display:block;width:172px;height:172px;margin-left:-86px;--badgering:#0B0B0B;--lime:#D8FF00;--limeedge:transparent;--halo:rgba(216,255,0,.22)}
.yo-rasgado{position:absolute;left:-20px;right:-20px;height:34px;-webkit-mask:url("./img/rasgado.png") center/auto 34px repeat-x;mask:url("./img/rasgado.png") center/auto 34px repeat-x}
.yo-rasgado.papel{bottom:0;background:#F5F5F2}
:root[data-tema="claro"] .yo-rasgado.papel{background:transparent}
.yo-rasgado.fondo{bottom:-18px;background:var(--bg)}
.yo-quien{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 4px 0;text-align:center}
.yo-nombre{font-size:28px;font-weight:800;font-stretch:75%;line-height:1.1;overflow-wrap:anywhere}
.yo-sub{font-size:15px;color:var(--ink2)}
/* Constancia: tres cifras, nunca montos */
.constancia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:20px}
.cst{display:flex;flex-direction:column;gap:6px;padding:14px 12px;border-radius:14px;background:var(--card)}
.cst b{font-size:30px;font-weight:800;font-stretch:75%;line-height:1}
.cst span{font-size:13px;line-height:1.3;color:var(--ink2)}
/* Tu estilo real */
.estilo-real{margin-top:0;padding:16px;display:flex;flex-direction:column;gap:12px}
.estilo-fila{display:flex;gap:12px;align-items:flex-start}
.estilo-fila.centro{align-items:center}
.estilo-txt{display:flex;flex-direction:column;gap:4px}
.estilo-frase{font-size:16px;font-weight:600;line-height:1.35;text-wrap:pretty}
.estilo-base{font-size:14px;color:var(--ink2)}
.estilo-real .boton.secundario{align-self:flex-start;margin-top:0}
/* Tu vitrina: 3 columnas; marco lima si está lograda; pendiente en gris, con candado, barra y lo que falta */
.vitrina{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pieza,.pieza-nueva,.socio-tarjeta{position:relative;display:flex;flex-direction:column;padding:4px;border:0;border-radius:8px;background:var(--elev);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-align:left}
.pieza.lograda,.pieza-nueva,.socio-tarjeta[aria-checked="true"]{background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--limeedge);color:#0B0B0B}
.pieza-estudio{position:relative;height:92px;border-radius:4px;display:grid;place-items:center;background:radial-gradient(circle at 30% 16%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 58%),#E6E6E3}
.pieza-dibujo{display:grid;place-items:center;width:72px;height:72px}
.pieza-dibujo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 6px rgba(0,0,0,.25))}
.pieza-dibujo .torre{width:64px;height:64px}
.pieza:not(.lograda) .pieza-dibujo,.hoja-pieza:not(.lograda) .pieza-disco .pieza-dibujo{filter:grayscale(1);opacity:.45}
.candado{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:#0B0B0B;display:grid;place-items:center}
.candado::before{content:"";width:13px;height:13px;background:#F5F5F2;-webkit-mask:url("./img/iconos/lock.svg") center/contain no-repeat;mask:url("./img/iconos/lock.svg") center/contain no-repeat}
.pieza-pie{display:flex;flex-direction:column;gap:4px;padding:7px 4px 4px}
.pieza-n{font-size:14px;font-weight:800;font-stretch:75%;line-height:1.1}
.pieza-f{font-size:13px;font-weight:600}
.pieza:not(.lograda) .pieza-f{font-weight:400;line-height:1.3;color:var(--ink2)}
.pieza-barra{display:block;height:4px;margin-top:2px;border-radius:2px;background:var(--cell);overflow:hidden}
.pieza-barra i{display:block;height:100%;background:var(--ink2)}
/* Hoja de la pieza: centrada, con el disco de 168 (aro lima si está lograda) y la pieza a 124 (la torre a 112) */
.hoja-pieza{align-items:center;text-align:center}
.hoja-pieza .hoja-cab{justify-content:center}
.hoja-pieza #info-cerrar{position:absolute;top:12px;right:12px}
.hoja-pieza #info-etq{margin:14px 0 0}
.pieza-disco{display:grid;place-items:center;width:168px;height:168px;border-radius:50%;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 50%),#E6E6E3}
.hoja-pieza.lograda .pieza-disco{box-shadow:0 0 0 4px var(--sheet),0 0 0 7px var(--lime),0 0 0 8px var(--limeedge)}
.pieza-disco .pieza-dibujo{width:124px;height:124px}
.pieza-disco img{filter:drop-shadow(0 8px 10px rgba(0,0,0,.28))}
.pieza-disco .torre{width:112px;height:112px}
.hoja-pieza .hoja-cuerpo{align-items:center;width:100%}
.pieza-regla{max-width:320px;margin:0;font-size:16px;line-height:1.45;text-wrap:pretty}
.pieza-fecha{margin:0;font-size:15px;color:var(--ink2)}
.hoja-pieza .pieza-barra{width:100%;max-width:300px;height:6px;margin:0;border-radius:3px}
.pieza-falta{margin:0;font-size:15px;font-weight:600}
/* Piezas nuevas en Hoy: entran una sola vez con el rebote */
.piezas-nuevas{display:flex;gap:12px}
.pieza-nueva{flex:0 1 112px;min-width:0;transform-origin:50% 80%}
.pieza-nueva .pieza-estudio{height:96px}
.pieza-nueva .pieza-dibujo{width:68px;height:68px}
.pieza-nueva .pieza-dibujo .torre{width:68px;height:68px}
.pieza-nueva .pieza-pie{gap:2px;padding:7px 4px 3px}
.pieza-nueva .pieza-n{font-size:15px;line-height:1.05}
.pieza-nueva.rebote{transform:scale(.6);opacity:0}
.pieza-nueva.rebote.entra{transform:none;opacity:1;transition:transform 600ms cubic-bezier(.34,1.16,.64,1),opacity 200ms var(--ease)}
@media (prefers-reduced-motion:reduce){.pieza-nueva.rebote{transform:none;opacity:1}}
/* Tu socio: tarjetas coleccionables en fila; el accesorio debajo del nombre */
.socios{display:flex;gap:16px;overflow-x:auto;margin:0 -16px;padding:10px 20px 12px;scrollbar-width:none}
.socios::-webkit-scrollbar{display:none}
.socio-tarjeta{flex:none;width:132px;padding:5px;--badgering:#E6E6E3}
.socio-tarjeta .pieza-estudio{height:118px}
.socio-86{display:block;width:86px;height:86px;margin-top:10px}
.tu-socio{position:absolute;top:7px;left:7px;padding:4px 6px 3px;border-radius:3px;background:#0B0B0B;color:#D8FF00;font-size:13px;font-weight:700;font-stretch:118%;letter-spacing:.08em;line-height:1;text-transform:uppercase}
.socio-pie{display:flex;flex-direction:column;gap:2px;padding:8px 5px 4px}
.socio-n{font-size:20px;font-weight:900;font-stretch:62%;line-height:.95;text-transform:uppercase}
.socio-r{font-size:13px;font-weight:600;color:var(--ink2)}
.socio-tarjeta[aria-checked="true"] .socio-r{color:#0B0B0B}
/* Tu personalidad */
.personalidades{margin-top:0;padding:8px;display:flex;flex-direction:column;gap:6px}
.personalidad{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 12px;border:0;border-radius:14px;background:transparent;color:var(--ink);text-align:left}
.personalidad[aria-checked="true"]{background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--limeedge);color:#0B0B0B}
.per-punto{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--ink3)}
.personalidad[aria-checked="true"] .per-punto{border-color:#0B0B0B;background:#0B0B0B}
.per-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.per-t{font-size:15px;font-weight:700}
.per-r{font-size:13px;line-height:1.35;color:var(--ink2)}
.personalidad[aria-checked="true"] .per-r{color:#0B0B0B}
.tus-datos{flex:none;font-size:13px;font-weight:700;font-stretch:118%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
/* Ajustes: filas que abren su sub-pantalla («‹ Yo» vuelve) */
.fila-ajuste{position:relative;width:100%;display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px 0 0;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);font-size:16px;text-align:left}
.fila-ajuste:first-child{border-top:0}
.fila-ajuste .k{flex:1}
.fila-ajuste .v{font-size:15px;color:var(--ink2)}
.fila-ajuste .ch{font-size:20px;line-height:1;color:var(--ink3)}
.fila-ajuste.borrar{color:var(--ink2)}
.filas-ajustes + .filas-ajustes{margin-top:12px}
.lista .fila-ajuste:focus-visible{outline:none}
.lista .fila-ajuste:focus-visible::before{content:"";position:absolute;inset:3px 3px 3px -10px;border:2px solid var(--focus);border-radius:14px;pointer-events:none}
.yo-detalle .titulo-grande{margin-bottom:16px}
.yo-detalle .titulo-grande:focus{outline:none}
.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 12px;border:0;border-radius:12px;outline:none;background:transparent;box-shadow:inset 0 0 0 1px var(--ink3);color:var(--ink);font-size:16px;text-align:right}   /* F6-20 */
.ajuste input.cifra{font-weight:800;font-stretch:75%;font-size:18px;color:var(--gold)}
.ajuste input[type=time]{width:144px}   /* 120 de hora + 12 + 12 del borde de F6-20 */
.panel.ajustes{padding:4px 16px}
.guardado-linea{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.guardado-linea 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%}
/* F6-20: borde de 1 px en --ink3 con el mismo ancho de texto de antes: la caja toca el punto (13 px de aire dentro de sus
   44 px). Entre la etiqueta y «Quitar» quedan 8 px; para no quitárselos al nombre, la etiqueta lleva 8 px por lado y el
   campo 4 px a la derecha, donde el texto se corta. En pantallas angostas (menos de 375 px) «Negocio principal» no cabe
   junto a la etiqueta y «Quitar»: los dos pasan a una segunda línea, a la derecha, y el nombre usa toda la fila. */
.fuente-fila input{flex:1;min-width:0;min-height:44px;margin-left:-6px;padding:10px 4px 10px 8px;border:0;border-radius:12px;outline:none;background:transparent;box-shadow:inset 0 0 0 1px var(--ink3);color:var(--ink);font-size:16px;font-weight:600}
.fuente-fila .quitar{margin-left:2px}
.fuente-fila .tipo-btn{padding:0 8px}
@media (max-width:374px){
  .fuente-fila{flex-wrap:wrap;row-gap:4px}
  .fuente-fila input{flex-basis:calc(100% - 56px);padding-right:8px}
  .fuente-fila .tipo-btn{margin-left:auto;padding:0 12px}
}
.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}
.pie-yo{margin:12px 4px 0;font-size:13px;line-height:2.2;color:var(--ink2);text-align:center}
.pie-version{touch-action:manipulation}
/* v21.2: medidas escondidas para diagnóstico (cinco toques en la versión). Texto técnico, de 13 px o más, sin animación. */
#medidas{position:fixed;inset:0;z-index:110;overflow-y:auto;padding:calc(var(--safe-top) + 20px) 16px calc(var(--safe-bottom) + 20px);background:var(--bg);color:var(--ink);-webkit-user-select:text;user-select:text}
#medidas[hidden]{display:none}
.medidas-caja{max-width:528px;margin:0 auto}
.medidas-caja h2{margin:0 0 12px;font-size:20px;font-weight:700;color:var(--ink)}
#medidas-lista{margin:0 0 20px}
#medidas-lista div{padding:8px 0;border-bottom:1px solid var(--line)}
#medidas-lista dt{font-size:13px;font-weight:600;color:var(--ink2)}
#medidas-lista dd{margin:2px 0 0;font-size:14px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
#medidas-cerrar{min-height:44px}

/* ---------- 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 */
/* F6-20: el monto va en su caja (README y RegistrarIngreso: caja --cell de radio 14), así que también lleva el borde de
   1 px en --ink3; con el foco, el anillo de 2 px. El monto de Por clasificar (.bd-monto) es una cifra héroe sin caja: sin borde. */
.monto-caja{display:flex;align-items:baseline;gap:4px;padding:10px 14px;border-radius:14px;background:var(--cell);box-shadow:inset 0 0 0 1px var(--ink3);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(--ink3);color:var(--ink);font-size:16px}   /* F6-20: también #tj-nueva y #plus-codigo */
#fecha-otra{display:none;width:100%;height:48px;margin-top:10px;padding:0 16px;border:0;border-radius:24px;background:var(--cell);box-shadow:inset 0 0 0 1px var(--ink3);color:var(--ink);font-size:16px}   /* F6-20 */
#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(--ink3);border-radius:0;outline:none;background:transparent;color:var(--ink);font-size:16px}   /* F6-20: subrayado de 1 px en --ink3 */
#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}
/* «Es pasivo» (fase 6): interruptor. Apagado, punto en --ink2; encendido, violeta con el punto oscuro (en claro, blanco) */
.interruptor-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.int-txt{display:flex;flex-direction:column;gap:2px}
.int-t{font-size:15px;font-weight:600}
.int-d{font-size:13px;line-height:1.35;color:var(--ink2)}
.interruptor-bm{flex:none;display:grid;place-items:center;width:58px;height:44px;padding:0;border:0;background:none}
.interruptor-bm i{position:relative;display:block;width:50px;height:30px;border-radius:15px;background:var(--cell);box-shadow:inset 0 0 0 1.5px var(--line);transition:background 150ms var(--ease)}
.interruptor-bm i::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--ink2);transition:transform 150ms var(--ease)}
.interruptor-bm[aria-checked="true"] i{background:var(--violet);box-shadow:none}
.interruptor-bm[aria-checked="true"] i::after{transform:translateX(20px);background:#0B0B0B}
:root[data-tema="claro"] .interruptor-bm[aria-checked="true"] i::after{background:#FFFFFF}
/* «¿Qué jugadas lo trajeron?» al final de la hoja, a la vista */
.hoja-jugadas{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.hj-cab{display:flex;align-items:center;gap:8px}
.hj-t{font-size:15px;font-weight:700}
.etq-neutra{padding:3px 6px 2px;border-radius:4px;background:var(--cell);color:var(--ink2);font-size:13px;font-weight:700;font-stretch:118%;letter-spacing:.08em;text-transform:uppercase}
.hj-ayuda{margin:0;font-size:13px;line-height:1.4;color:var(--ink2)}
.hoja-jugadas .chip,.guardado-aviso .chip{padding:0 14px;white-space:normal;text-align:left;line-height:1.25}
.chip[aria-disabled="true"]{opacity:.55}
/* El aviso después de guardar: arriba, de vidrio, con el socio en «celebra» */
.guardado-aviso{position:absolute;left:12px;right:12px;top:calc(var(--safe-top) + 14px);z-index:47;display:flex;gap:12px;align-items:flex-start;max-width:532px;margin:0 auto;padding:14px 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 16px 30px -12px rgba(0,0,0,.5);transform:translateY(-140%);opacity:0;transition:transform 260ms var(--ease),opacity 200ms;--badgering:var(--card)}
.guardado-aviso.visible{transform:none;opacity:1}
.guardado-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.guardado-t{margin:0;font-size:15px;font-weight:700;line-height:1.35}
.guardado-t b{color:var(--gold)}
.guardado-d{margin:-6px 0 0;font-size:14px;line-height:1.4;color:var(--ink2)}
.guardado-botones{display:flex;justify-content:flex-end;gap:8px}
.guardado-botones .boton{margin-top:0}
.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);box-shadow:inset 0 0 0 1px var(--ink3);color:var(--ink);font-size:16px}   /* F6-20 */
.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}
/* ¿Cómo calificas tu mes? 5 monedas de 44 px: hasta la elegida en oro, las demás en gris (con contraste de 3:1 en los dos temas) */
.rf-monedas{display:flex;gap:10px;margin-top:10px}
.rf-moneda{flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none}
.rf-moneda .moneda{transition:filter 150ms var(--ease),opacity 150ms var(--ease)}
.rf-moneda:not(.llena) .moneda{filter:grayscale(1);opacity:.5}
:root[data-tema="claro"] .rf-moneda:not(.llena) .moneda{opacity:.75}
.rf-moneda:focus-visible{outline-offset:3px}
.rf-caja #rf-informe{margin-top:14px}
.rf-linea{display:flex;align-items:center;gap:6px;margin-top:22px;padding:4px 4px 4px 14px;border-radius:14px;background:var(--card)}
.rf-linea .linea-plus-btn img{width:20px;height:20px}
.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:1px 24px;background:rgba(0,0,0,.55);overflow-y:auto}
#dialogo .dialogo-caja:not(.estado){margin:auto}   /* ronda 5 (R4-A-7): una caja más alta que la pantalla (de lado) se desplaza y no se corta */
/* ronda 6 (R5-A-5): la de estado conserva su margen de abajo, como en la ronda 4. R5-A-6: arriba y abajo, 1 px en vez de
   24: la caja que cabe en la pantalla queda centrada como en la ronda 4 (el centro no cambia) y no se desplaza; la que no
   cabe se abre centrada (ui.js, centrarDialogo). Ese píxel evita que el redondeo del desplazamiento corte su borde. */
#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)}
#dlg-texto:focus{outline:none}#dlg-texto:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:6px}   /* ronda 5 (R4-A-3): el foco de la vuelta extra; el anillo, solo con teclado */
.dialogo-botones{display:flex;flex-direction:column;gap:8px}
.dialogo-botones .boton.secundario{margin-top:0}
/* Diálogo como estado (archivo que no es respaldo): el socio a la izquierda, la etiqueta como título y botones compactos */
.dialogo-caja.estado{display:grid;grid-template-columns:46px 1fr;column-gap:12px;row-gap:0;align-items:start;--badgering:var(--sheet)}
.dialogo-caja.estado #dlg-socio{grid-row:1 / span 2}
.dialogo-caja.estado #dlg-titulo{font-size:13px;font-weight:700;font-stretch:118%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);line-height:1.3}
.dialogo-caja.estado #dlg-titulo::before{content:"// ";content:"// " / ""}
.dialogo-caja.estado #dlg-texto{margin:4px 0 16px;font-size:15px;font-weight:600;line-height:1.4;color:var(--ink)}
.dialogo-caja.estado .dialogo-botones{grid-column:1 / -1;flex-direction:row;justify-content:flex-end}
.dialogo-caja.estado .boton{width:auto;height:44px;padding:0 16px;border-radius:22px;font-size:15px}
.dialogo-caja.estado.solo #dlg-si{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink3);font-weight:600}
#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(--ink3);color:var(--ink);font-size:16px}   /* F6-20 */
#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,#error-app:not(.visible) button{visibility:hidden}
#deshacer[inert],#actualizar[inert],#error-app[inert]{visibility:hidden}
#actualizar:not(.visible)>*,#error-app:not(.visible)>*{visibility:hidden;transition:visibility 0s 200ms}   /* sin aviso a la vista, el lector no oye su texto (la región viva queda) */
#error-app.visible{z-index:52}   /* sobre «Actualizar» si salen los dos */   /* 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-texto{display:block;margin-top:2px;font-size:14px;line-height:1.4;color:var(--ink2)}
.mini-txt{flex:1;min-width:0}
.mini-pieza{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 50%),#E6E6E3}
.mini-pieza .pieza-dibujo{width:44px;height:44px}
.mini-pieza .torre{width:40px;height:40px}
#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,#error-app{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,#error-app.visible{opacity:1;transform:none;pointer-events:auto}
/* «Versión nueva» y «Error inesperado» son estados: el socio, la etiqueta, el texto y el botón a la derecha */
#actualizar,#error-app{flex-direction:column;align-items:stretch;gap:12px;padding:16px;--badgering:var(--sheet)}
#deshacer button,#actualizar button,#error-app 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}
}

/* =========================================================
   GRATIS Y PLUS (fase 6)
   ========================================================= */
.etq-plus{padding:3px 6px 2px;border-radius:4px;background:rgba(242,193,78,.16);color:var(--gold);font-size:13px;font-weight:700;font-stretch:118%;letter-spacing:.08em;text-transform:uppercase}
.etq-lima{padding:3px 6px 2px;border-radius:4px;background:var(--lime);box-shadow:inset 0 0 0 1px var(--limeedge);color:#0B0B0B;font-size:13px;font-weight:700;font-stretch:118%;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.yo-pro{vertical-align:-3px}
/* Tarjeta de Yo */
.plus-tarjeta{margin-top:12px;padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:inset 0 0 0 1px var(--goldstroke)}
.plus-cab{display:flex;align-items:center;gap:10px}
.plus-nombre{margin:0;font-size:17px;font-weight:700}
.plus-etq{margin-left:auto;font-size:13px;font-weight:700;font-stretch:118%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.plus-etq.oro{padding:4px 7px 3px;border-radius:4px;background:rgba(242,193,78,.16);color:var(--gold)}
.plus-txt{margin:0;font-size:15px;line-height:1.4;color:var(--ink2)}
.plus-estado{margin:0;font-size:15px;font-weight:700;color:var(--gold)}
.plus-tarjeta-botones{display:flex;flex-wrap:wrap;gap:8px}
.plus-tarjeta-botones .boton,.plus-tarjeta .enlace-sutil{margin-top:0;align-self:flex-start}
/* Las líneas discretas y la de vencer */
.linea-plus{display:flex;align-items:center;gap:10px;min-height:52px;margin-top:12px;padding:0 4px 0 14px;border-radius:14px;background:var(--card)}
.linea-plus.vence{background:var(--elev)}
.linea-plus[hidden]{display:none}
.linea-plus-btn{flex:1;display:flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;background:none;color:var(--gold);font-size:15px;font-weight:600;text-align:left}
.linea-txt{flex:1;font-size:14px;line-height:1.35;color:var(--ink)}
.linea-x .ico{width:28px;height:28px;background:none}
.linea-x .ico::before{inset:8px;background:var(--ink2)}
.jp-linea{display:flex;align-items:center;gap:6px;padding:4px 0 6px;border-top:1px solid var(--line)}
.jp-linea .linea-plus-btn img{width:18px;height:18px}
/* Conocer Plus */
.plus-hero{display:flex;flex-direction:column;gap:12px;margin:8px 4px 4px}
.plus-hero img{filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.plus-marca{margin:0;font-size:48px;font-weight:900;font-stretch:62%;line-height:.9}
.plus-lema{margin:0;font-size:17px;font-weight:600;line-height:1.4;color:var(--ink2)}
.plus-card{display:flex;flex-direction:column;gap:6px;padding:16px}
.plus-card .etiqueta-tec{margin:0}
.plus-titulo-fila{display:flex;align-items:center;gap:8px}
.plus-card .plus-txt{font-size:14px}
.plus-lista{display:flex;flex-direction:column;gap:6px;margin:6px 0 0;padding:0;list-style:none}
.plus-lista li{display:flex;align-items:baseline;gap:10px;font-size:15px;line-height:1.35}
.plus-lista .chulo{color:var(--gold);font-weight:800}
.plus-lista .etq-neutra{margin-left:auto;flex:none}
.plus-gratis{margin:16px 0 0;padding:14px 16px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;line-height:1.45;color:var(--ink2)}
.plus-gratis b{color:var(--ink)}
#plus-estado .plus-estado{margin:16px 4px 0}
/* v20.9: con el mensual activo, en vez del botón de pagar */
.plus-tras-pagar{margin:14px 4px 0}
#plus-botones .boton.secundario{margin-top:10px}
.plus-suyo{margin:12px 4px 0;font-size:15px;line-height:1.45;font-weight:600;color:var(--ink)}
.plus-planes{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.plus-plan{display:flex;align-items:center;gap:12px;min-height:56px;padding:14px 16px;border:0;border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-align:left}
.plus-plan[aria-checked="true"]{box-shadow:inset 0 0 0 2px var(--focus)}
.plus-plan[aria-checked="true"] .per-punto{border-color:var(--focus);background:var(--focus)}
.plus-precio{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.plus-precio b{font-size:22px;font-weight:800;font-stretch:75%}
.plus-botones{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.plus-botones .boton{margin-top:0}
.plus-botones .nota{margin:0}
.plus-pie{margin:12px 4px 0;font-size:13px;line-height:1.45;color:var(--ink2)}
/* v21.0: el pago con el servidor. Arriba, el pago pendiente; debajo de los planes, el correo, la casilla de novedades
   (sin marcar) y «Abrir Mercado Pago». Nada en rojo: el correo que no sirve se marca con el oro. */
.plus-pendiente{margin:16px 0 0;padding:14px 16px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px var(--goldstroke);font-size:15px;line-height:1.45;font-weight:600;color:var(--ink)}
.plus-pago{display:flex;flex-direction:column;gap:10px}
.plus-correo-etq{margin:0 4px;font-size:14px;font-weight:600;color:var(--ink)}
.plus-pago input[type="email"]{width:100%;min-width:0;height:48px;padding:0 18px;border:0;border-radius:24px;outline:none;background:var(--cell);box-shadow:inset 0 0 0 1px var(--ink3);color:var(--ink);font-size:16px}
.plus-pago input[type="email"]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.plus-pago input[type="email"][aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--goldstroke)}
.plus-casilla{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 4px;font-size:14px;line-height:1.45;color:var(--ink2);cursor:pointer}
.plus-casilla input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--focus)}
.plus-casilla input:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
#plus-ir[aria-disabled="true"]{opacity:.6;cursor:default}
.plus-codigo{margin-top:16px}
.plus-codigo .ajuste{min-height:0;padding:0;border:0}
.plus-codigo .nueva-fuente{margin-top:10px}
/* v21.3 · Ayuda de la IA: «O cuéntalo en palabras» en la hoja de registrar (mismo subrayado que el detalle) */
.ia-palabras{margin-top:14px}
.ia-fila{display:flex;align-items:flex-end;gap:10px}
.ia-fila textarea{flex:1;min-width:0;min-height:44px;padding:10px 0;border:0;border-bottom:1px solid var(--ink3);border-radius:0;outline:none;resize:none;background:transparent;color:var(--ink);font-size:16px;line-height:1.35}
.ia-fila textarea::placeholder{color:var(--ink2)}
html .ia-fila textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ia-fila .chip{flex:none}
.ia-fila .chip[aria-busy="true"]{opacity:.6}
.ia-estado{margin-top:8px;font-size:14px;font-weight:600;color:var(--ink2)}
.ia-estado:empty{display:none}
/* v21.4 · La IA escribe: «Tu mes en palabras» en el cierre y la frase de la tarjeta «Tu semana» */
.rf-ia{margin-top:16px;padding:16px;border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.rf-ia p{margin:8px 0 0;font-size:16px;line-height:1.45;color:var(--ink)}
.rf-ia .rf-ia-titulo{margin-top:6px;font-size:19px;font-weight:800;font-stretch:90%;line-height:1.2}
.rf-ia .rf-ia-espera{color:var(--ink2)}
.rf-ia-accion{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.rf-ia-accion .k{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.rf-ia-accion p{margin-top:4px;font-weight:700}
.rf-ia-accion .enlace{margin-top:6px}
.rf-ia .nota{margin-top:12px;font-size:13px;color:var(--ink2)}
.sc-ia{margin:12px 0 0;font-size:15px;font-weight:600;line-height:1.4;color:var(--ink)}
/* Fase 3 · «Pregúntale a tu socio» (oculta mientras esté apagada) */
.socio-chat .socio-respuesta{margin-top:12px;font-size:16px;line-height:1.45;color:var(--ink)}
.socio-chat .socio-respuesta:empty{display:none}
.socio-chat .nota{margin-top:10px;font-size:13px;color:var(--ink2)}