/* Hito · estilo de la app (inspirado en iOS, identidad Peaks: carbón, hueso, brasa) */
:root{
  /* noche de montaña: grafito azulado, casi negro */
  --bg:#121211; --s1:#1A1918; --s1h:#1F1E1C; --s2:#232220; --s3:#2E2C2A; --line:rgba(237,230,218,.07); --line2:rgba(237,230,218,.13);
  --fg:#F1ECE4; --fg2:#A39B91; --fg3:#6E675F; --acc:#EE5B25; --acc2:#ff7a45; --acc-bg:rgba(238,91,37,.14);
  --ok:#4FC28A; --imp:#E9B949; --azul:#7C9CF0; --font:'Almarai',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;
  --r:20px; --r2:14px; --tab:64px; --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --sheet:#171615; --bar:rgba(18,18,17,.74); --toast:rgba(38,36,34,.92); --toast-fg:#F1ECE4; --shadow:rgba(0,0,0,.5);
  --hi:rgba(255,255,255,.05); --glass:rgba(26,25,24,.62); --sky1:#1E1C1A; --sky2:#181716; --ridge1:rgba(237,230,218,.07); --ridge2:rgba(237,230,218,.045);
  --card-sh:0 1px 0 var(--hi) inset,0 8px 24px -14px rgba(0,0,0,.6);
  color-scheme:dark;
}
/* Modo día (papel cálido): automático según el celu (sin data-theme) o forzado con data-theme="light" */
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){
  --bg:#F4F1EC; --s1:#FFFFFF; --s1h:#FFFFFF; --s2:#F1EDE7; --s3:#E5DFD7; --line:rgba(13,12,11,.07); --line2:rgba(13,12,11,.13);
  --fg:#151311; --fg2:#6B645C; --fg3:#A39B91; --sheet:#FFFFFF; --bar:rgba(250,248,245,.8); --toast:rgba(28,26,24,.94); --toast-fg:#F3EFE9; --shadow:rgba(60,40,20,.14);
  --hi:rgba(255,255,255,.9); --glass:rgba(255,255,255,.72); --sky1:#EDE6DA; --sky2:#F1ECE4; --ridge1:rgba(120,90,60,.07); --ridge2:rgba(120,90,60,.045); --ok:#1F9D63; --imp:#D69A1E; --azul:#4C6FD6;
  --card-sh:0 1px 2px rgba(60,40,20,.06),0 10px 30px -18px rgba(60,40,20,.25);
  color-scheme:light; } }
:root[data-theme="light"]{
  --bg:#F4F1EC; --s1:#FFFFFF; --s1h:#FFFFFF; --s2:#F1EDE7; --s3:#E5DFD7; --line:rgba(13,12,11,.07); --line2:rgba(13,12,11,.13);
  --fg:#151311; --fg2:#6B645C; --fg3:#A39B91; --sheet:#FFFFFF; --bar:rgba(250,248,245,.8); --toast:rgba(28,26,24,.94); --toast-fg:#F3EFE9; --shadow:rgba(60,40,20,.14);
  --hi:rgba(255,255,255,.9); --glass:rgba(255,255,255,.72); --sky1:#EDE6DA; --sky2:#F1ECE4; --ridge1:rgba(120,90,60,.07); --ridge2:rgba(120,90,60,.045); --ok:#1F9D63; --imp:#D69A1E; --azul:#4C6FD6;
  --card-sh:0 1px 2px rgba(60,40,20,.06),0 10px 30px -18px rgba(60,40,20,.25);
  color-scheme:light; }
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
input,textarea{background:var(--s2);border:1px solid var(--line);border-radius:12px;padding:13px 14px;width:100%;outline:none;transition:border-color .15s}
input:focus,textarea:focus{border-color:var(--acc)}
textarea{resize:vertical;min-height:96px;line-height:1.5}
::placeholder{color:var(--fg3)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
[hidden]{display:none!important}
svg{display:block}

/* ---------- estructura */
#app{display:flex;min-height:100%}
#side{display:none}
#main{flex:1;min-width:0;padding:calc(var(--sat) + 8px) max(18px,var(--sar)) calc(var(--tab) + var(--sab) + 40px) max(18px,var(--sal))}
.view{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:22px;animation:entra .32s cubic-bezier(.2,.8,.3,1);position:relative;isolation:isolate}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vt .view{animation:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}

#tabbar{view-transition-name:tabbar;position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);
  padding:6px max(8px,var(--sal)) calc(6px + var(--sab)) max(8px,var(--sar));
  background:var(--bar);backdrop-filter:saturate(1.6) blur(22px);-webkit-backdrop-filter:saturate(1.6) blur(22px);border-top:1px solid var(--line)}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 2px;color:var(--fg3);font-size:10.5px;font-weight:700;letter-spacing:.01em;position:relative}
.tab svg{width:25px;height:25px}
.tab[aria-current]{color:var(--acc)}
#tabbar .tab[aria-current] svg{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--acc) 55%,transparent))}
.badge{position:absolute;top:1px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--acc);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;line-height:1}

@media (min-width:900px){
  #tabbar{display:none}
  #side{display:flex;flex-direction:column;gap:4px;width:250px;flex:none;position:sticky;top:0;height:100vh;padding:28px 16px;border-right:1px solid var(--line);background:var(--bg)}
  #side .brand{display:flex;align-items:center;gap:10px;padding:0 10px 22px;font-weight:800;font-size:20px}
  #side .brand .ico{width:34px;height:34px;border-radius:9px;overflow:hidden}
  #side .tab{flex-direction:row;gap:12px;font-size:15px;padding:11px 12px;border-radius:12px;color:var(--fg2)}
  #side .tab[aria-current]{background:var(--s1);color:var(--fg)}
  #side .tab[aria-current] svg{color:var(--acc)}
  #side .tab svg{width:22px;height:22px}
  #side .badge{position:static;margin-left:auto}
  #side .grow{flex:1}
  #main{padding:44px 40px 80px}
  .fab{right:calc(50% - 340px - 125px)!important;bottom:36px!important}
}

/* ---------- tipografía */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg2)}
h1{font-size:34px;line-height:1.08;font-weight:800;letter-spacing:-.025em;margin:2px 0 0;text-wrap:balance}
h2{font-size:21px;font-weight:800;letter-spacing:-.015em;margin:0;text-wrap:balance}
h3{font-size:17px;font-weight:700;margin:0}
p{margin:0}
.sub{color:var(--fg2);font-size:15px}
.muted{color:var(--fg2)}
.small{font-size:13px}
.num{font-variant-numeric:tabular-nums}

/* ---------- encabezado de pantalla */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:12px}
.head .t{min-width:0}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--s2);display:grid;place-items:center;font-weight:800;color:var(--fg);flex:none;border:1px solid var(--line2)}

/* ---------- grupos estilo iOS */
.sec{display:flex;flex-direction:column;gap:10px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 4px}
.sec-h .eyebrow{color:var(--fg2)}
.link{color:var(--acc);font-weight:700;font-size:15px}
.group{background:linear-gradient(180deg,var(--s1h),var(--s1));border-radius:var(--r);overflow:hidden;box-shadow:var(--card-sh)}
.row{display:flex;align-items:center;gap:13px;padding:14px 16px;min-height:54px;position:relative;width:100%;text-align:left}
.row+.row::before{content:"";position:absolute;top:0;left:52px;right:0;height:1px;background:var(--line)}
.row.noind+.row::before,.row.noind::before{left:16px}
.row .grow{flex:1;min-width:0}
.row .t{font-size:16px;overflow-wrap:anywhere}
.row .d{font-size:13px;color:var(--fg2);margin-top:1px}
.row.done .t{color:var(--fg3);text-decoration:line-through;text-decoration-color:var(--fg3)}
.chev{color:var(--fg3);width:18px;height:18px;flex:none}
.card{background:linear-gradient(180deg,var(--s1h),var(--s1));border-radius:var(--r);padding:18px;box-shadow:var(--card-sh)}
.empty{padding:22px 18px;text-align:center;color:var(--fg2);font-size:15px;display:flex;flex-direction:column;gap:12px;align-items:center}

/* ---------- check circular */
.chk{width:26px;height:26px;border-radius:50%;border:2px solid var(--fg3);flex:none;display:grid;place-items:center;transition:all .18s}
.chk svg{width:15px;height:15px;opacity:0;color:#fff;transform:scale(.6);transition:all .18s}
.chk.on{background:var(--acc);border-color:var(--acc);box-shadow:0 0 14px -2px color-mix(in srgb,var(--acc) 70%,transparent)}
.chk.inn.on{background:var(--imp);border-color:var(--imp);box-shadow:0 0 12px -2px color-mix(in srgb,var(--imp) 60%,transparent)}
.chk.on svg{opacity:1;transform:none}
.chk.min{background:transparent;border-color:var(--acc)}
.chk.min svg{opacity:1;transform:none;color:var(--acc)}
.chk.roca{border-color:var(--acc)}
.pop{animation:pop .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.8)}45%{transform:scale(1.22)}100%{transform:none}}

/* ---------- botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 22px;border-radius:15px;background:var(--acc);color:#fff;font-weight:800;font-size:16px;width:100%;transition:transform .1s,opacity .15s}
.btn svg{width:20px;height:20px;flex:none}
.empty h1,.empty h2{color:var(--fg)}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.35;pointer-events:none}
.btn.sec2{background:var(--s2);color:var(--fg)}
.btn.ghost{background:transparent;color:var(--acc);height:44px}
.btn.sm{height:38px;padding:0 14px;font-size:14px;border-radius:11px;width:auto}
.pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:99px;background:var(--s2);font-size:13px;font-weight:700;color:var(--fg2);white-space:nowrap}
.pill.on{background:var(--acc-bg);color:var(--acc)}
.pill svg{width:15px;height:15px}
.tag{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:6px;background:var(--acc-bg);color:var(--acc);white-space:nowrap}
.tag.imp{background:color-mix(in srgb,var(--imp) 16%,transparent);color:color-mix(in srgb,var(--imp) 80%,var(--fg))}
.tag.gris{background:var(--s3);color:var(--fg2)}
.iconbtn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--fg2);flex:none}
.iconbtn:hover{background:var(--s2)}
.iconbtn svg{width:20px;height:20px}

/* segmentado */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--s2);border-radius:11px;padding:3px;gap:2px}
.seg button{height:34px;border-radius:9px;font-size:14px;font-weight:700;color:var(--fg2)}
.seg button[aria-pressed=true]{background:var(--s3);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.4)}

/* switch */
.sw{width:51px;height:31px;border-radius:16px;background:var(--s3);position:relative;flex:none;transition:background .2s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.sw.on{background:var(--acc)}
.sw.on::after{transform:translateX(20px)}

/* FAB */
.fab{view-transition-name:fab;position:fixed;right:max(20px,calc(var(--sar) + 16px));bottom:calc(var(--tab) + var(--sab) + 18px);z-index:25;width:58px;height:58px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px color-mix(in srgb,var(--acc) 45%,transparent),0 2px 6px var(--shadow),inset 0 1px 0 rgba(255,255,255,.25);background:linear-gradient(160deg,var(--acc2),var(--acc));transition:transform .15s}
.fab:active{transform:scale(.92)}
.fab svg{width:28px;height:28px}

/* ---------- Hoy */
.hero{display:flex;align-items:center;gap:18px}
.ring{position:relative;width:96px;height:96px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .in{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1.05}
.ring .in b{font-size:24px;font-weight:800}
.ring .in span{font-size:11px;color:var(--fg2);font-weight:700}
.stat{display:flex;flex-direction:column;gap:6px;min-width:0}
.reto-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 22%,var(--s1)) 0%,var(--s1) 70%);border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);border-radius:var(--r);padding:16px;text-align:left;width:100%}
.reto-card .n{width:48px;height:48px;border-radius:14px;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px;flex:none}
.reto-card .grow{flex:1;min-width:0}
.sos{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border-radius:var(--r);background:var(--s1);text-align:left}
.sos .ic{width:36px;height:36px;border-radius:11px;background:var(--s3);display:grid;place-items:center;color:var(--acc)}
.sos .ic svg{width:20px;height:20px}
.prio-dot{width:8px;height:8px;border-radius:50%;flex:none}
.bajaE{background:linear-gradient(135deg,color-mix(in srgb,#5b7fd6 18%,var(--s1)),var(--s1));border:1px solid color-mix(in srgb,#5b7fd6 25%,transparent)}
.frase{font-size:17px;font-weight:700;line-height:1.35}

/* ---------- Hábitos */
.hab{display:flex;align-items:center;gap:14px;padding:16px;width:100%;text-align:left}
.hab .big{width:46px;height:46px;border-radius:50%;border:2.5px solid var(--fg3);display:grid;place-items:center;flex:none;transition:all .18s}
.hab .big svg{width:22px;height:22px;opacity:0;color:#fff}
.hab .big.on{background:var(--acc);border-color:var(--acc)}
.hab .big.on svg{opacity:1}
.hab .big.min{border-color:var(--acc)}
.hab .big.min svg{opacity:1;color:var(--acc)}
.hab .big.off{opacity:.35}
.dots{display:flex;gap:5px;margin-top:7px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--s3)}
.dots i.on{background:var(--acc)}
.dots i.min{background:transparent;box-shadow:inset 0 0 0 2px var(--acc)}
.dots i.com{background:var(--fg3)}
.dots i.no{background:transparent;box-shadow:inset 0 0 0 1px var(--s3)}
.racha{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.racha b{font-size:22px;font-weight:800;line-height:1}
.racha span{font-size:11px;color:var(--fg2);font-weight:700}
.heat{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.heat i{aspect-ratio:1;border-radius:5px;background:var(--s3)}
.heat i.on{background:var(--acc)}
.heat i.min{background:color-mix(in srgb,var(--acc) 40%,transparent)}
.heat i.com{background:var(--fg3)}
.heat i.no{background:transparent;box-shadow:inset 0 0 0 1px var(--s3)}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.days button{height:40px;border-radius:11px;background:var(--s2);font-weight:800;font-size:14px;color:var(--fg2)}
.days button[aria-pressed=true]{background:var(--acc);color:#fff}

/* ---------- Reto */
.retohead{display:flex;align-items:center;gap:18px}
.dia{display:flex;align-items:center;gap:13px;padding:13px 16px;width:100%;text-align:left;position:relative}
.dia+.dia::before{content:"";position:absolute;top:0;left:62px;right:0;height:1px;background:var(--line)}
.dia .n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;background:var(--s3);color:var(--fg2);flex:none}
.dia.hecho .n{background:var(--acc);color:#fff}
.dia.hoy .n{background:transparent;box-shadow:inset 0 0 0 2px var(--acc);color:var(--acc)}
.dia.lock{opacity:.45}
.dia .n svg{width:16px;height:16px}
.leccion{font-size:17px;line-height:1.62;color:var(--fg);display:flex;flex-direction:column;gap:14px}
.idea{border-left:3px solid var(--acc);padding:4px 0 4px 14px;font-size:18px;font-weight:700;line-height:1.4}
.pasos{display:flex;flex-direction:column;gap:10px;counter-reset:p;margin:0;padding:0;list-style:none}
.pasos li{display:flex;gap:12px;align-items:flex-start}
.pasos li::before{counter-increment:p;content:counter(p);width:24px;height:24px;border-radius:50%;background:var(--s3);font-size:13px;font-weight:800;display:grid;place-items:center;flex:none;margin-top:1px}
.lista{display:flex;flex-direction:column;gap:12px}
.lista div{display:flex;flex-direction:column;gap:2px}
.lista b{font-size:15px}
.lista span{color:var(--fg2);font-size:15px}
.accion{background:var(--s1);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:14px;border:1px solid var(--line)}
.accion .eyebrow{color:var(--acc)}
.slider{display:flex;flex-direction:column;gap:6px}
.slider .top{display:flex;justify-content:space-between;font-weight:700}
.slider .top b{color:var(--acc);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;padding:0;border:0;border-radius:3px;background:var(--s3)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.4)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:0}
.cajas{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;flex:none}
.cajas button{height:32px;min-width:34px;border-radius:9px;background:var(--s3);font-size:13px;font-weight:800;color:var(--fg2)}
.cajas button[aria-pressed=true]{background:var(--acc);color:#fff}
.bloque{background:var(--s2);border-radius:var(--r2);padding:12px;display:flex;flex-direction:column;gap:8px}
.bloque-h{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:14px}
.chip{display:flex;align-items:center;gap:8px;background:var(--s3);border-radius:10px;padding:9px 10px;font-size:15px}
.chip .grow{flex:1;min-width:0}
.chip .iconbtn{width:28px;height:28px}
.chip[draggable=true]{cursor:grab}
.addline{display:flex;gap:8px}
.addline input{flex:1;padding:11px 12px}
.timer{font-size:64px;font-weight:800;letter-spacing:-.03em;text-align:center;font-variant-numeric:tabular-nums;line-height:1}

/* ---------- Semana */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.week button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 0;border-radius:14px;background:var(--s1);font-size:12px;color:var(--fg2);font-weight:700}
.week button b{font-size:18px;color:var(--fg)}
.week button[aria-pressed=true]{background:var(--acc);color:#fff}
.week button[aria-pressed=true] b{color:#fff}
.week button i{width:5px;height:5px;border-radius:50%;background:transparent}
.week button i.on{background:var(--acc)}
.week button[aria-pressed=true] i.on{background:#fff}
.week button.hoy:not([aria-pressed=true]) b{color:var(--acc)}
.roca{padding:16px;display:flex;flex-direction:column;gap:10px}
.roca+.roca{border-top:1px solid var(--line)}
.bar{height:6px;border-radius:3px;background:var(--s3);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:3px;transition:width .4s;box-shadow:0 0 10px color-mix(in srgb,var(--acc) 60%,transparent)}
.cerebro-card{background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 55%),var(--s1);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:12px;border:1px solid color-mix(in srgb,var(--acc) 22%,transparent)}

/* ---------- Progreso */
.monte{background:linear-gradient(180deg,var(--s1) 0%,var(--bg) 100%);border-radius:24px;padding:22px 20px 18px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px}
.monte svg.perfil{width:100%;height:auto;margin-top:8px}
.alt{font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.alt small{font-size:20px;color:var(--fg2);font-weight:700;margin-left:4px}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kpi{background:var(--s1);border-radius:var(--r2);padding:14px 16px}
.kpi b{font-size:26px;font-weight:800;display:block;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi span{font-size:13px;color:var(--fg2)}
.ins{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.insg{background:var(--s1);border-radius:var(--r2);padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.insg .med{width:52px;height:52px}
.insg b{font-size:13px;line-height:1.2}
.insg.off{opacity:.33}
.insg.off .med{filter:grayscale(1)}

/* ---------- hojas (sheets) */
#scrim{position:fixed;inset:0;background:rgba(3,6,12,.5);z-index:40;opacity:0;transition:opacity .25s;backdrop-filter:blur(2px)}
#scrim.on{opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;background:color-mix(in srgb,var(--sheet) 90%,transparent);backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);border-radius:22px 22px 0 0;max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.9,.25,1);
  padding-bottom:var(--sab);box-shadow:0 -10px 40px var(--shadow);border-top:1px solid var(--line2)}
.sheet.on{transform:none}
.sheet.full{top:calc(var(--sat) + 10px);max-height:none}
.sheet .grab{width:38px;height:5px;border-radius:3px;background:var(--s3);margin:8px auto 0;flex:none}
.sheet .sh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px max(18px,var(--sar)) 6px max(18px,var(--sal));flex:none}
.sheet .sh h2{font-size:19px}
.sheet .body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px max(18px,var(--sar)) 24px max(18px,var(--sal));display:flex;flex-direction:column;gap:18px}
.sheet .body>*{max-width:640px;width:100%;margin-left:auto;margin-right:auto}
.sheet .foot{padding:10px max(18px,var(--sar)) 14px max(18px,var(--sal));border-top:1px solid var(--line);flex:none}
.sheet .foot>*{max-width:640px;margin:0 auto}
@media (min-width:900px){
  .sheet{left:50%;right:auto;width:600px;bottom:auto;top:50%;border-radius:24px;max-height:86vh;transform:translate(-50%,-46%) scale(.98);opacity:0;transition:all .22s ease;pointer-events:none}
  .sheet.on{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
  .sheet.full{top:50%;height:86vh}
  .sheet .grab{display:none}
}
.close{width:32px;height:32px;border-radius:50%;background:var(--s2);display:grid;place-items:center;color:var(--fg2);flex:none}
.close svg{width:16px;height:16px}

/* toast */
#toast{position:fixed;left:50%;top:calc(var(--sat) + 14px);transform:translate(-50%,-140%);z-index:60;background:var(--toast);color:var(--toast-fg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:11px 18px;border-radius:99px;font-weight:700;font-size:15px;transition:transform .35s cubic-bezier(.2,.9,.25,1);white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.4);display:flex;gap:8px;align-items:center}
#toast.on{transform:translate(-50%,0)}
#toast .xp{color:var(--acc)}

/* ---------- acceso y onboarding */
.gate{min-height:100%;display:flex;align-items:center;justify-content:center;padding:calc(var(--sat) + 30px) max(22px,var(--sar)) calc(var(--sab) + 30px) max(22px,var(--sal))}
.gate .box{width:100%;max-width:400px;display:flex;flex-direction:column;gap:22px}
.logo{width:76px;height:76px;border-radius:19px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;font-weight:700;color:var(--fg2);padding-left:2px}
.err{color:#ff8a65;font-size:14px;min-height:20px}
.steps{display:flex;gap:6px}
.steps i{flex:1;height:4px;border-radius:2px;background:var(--s3)}
.steps i.on{background:var(--acc)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{padding:9px 14px;border-radius:99px;background:var(--s2);font-size:14px;font-weight:700;color:var(--fg2);border:1px solid transparent}
.chips button[aria-pressed=true]{background:var(--acc-bg);color:var(--acc);border-color:color-mix(in srgb,var(--acc) 40%,transparent)}
.inst{display:flex;flex-direction:column;gap:12px}
.inst .row{background:var(--s1);border-radius:var(--r2)}
.inst .row+.row::before{display:none}
.inst .k{width:30px;height:30px;border-radius:9px;background:var(--s3);display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}

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

/* selector de color y tema */
.swatches{display:flex;flex-wrap:wrap;gap:12px}
.swatches button{width:44px;height:44px;border-radius:50%;border:3px solid transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.swatches button[aria-pressed=true]{border-color:var(--fg)}

/* ================================================================ Ronda 3 · Hoy, juego y herramientas */
.avatar.pj{overflow:hidden;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--acc) 22%,var(--s2)),var(--s2) 70%);padding:0;border:1px solid var(--line2)}
.avatar.pj svg{width:100%;height:100%}
.head-me{flex:none;border-radius:50%}
.inl{width:13px;height:13px;display:inline;vertical-align:-2px}

/* cielo de madrugada arriba de Hoy */
.hoy-sky{position:absolute;z-index:-1;left:-18px;right:-18px;top:calc(-1 * (var(--sat) + 8px));height:calc(330px + var(--sat));pointer-events:none;overflow:hidden;
  background:radial-gradient(90% 60% at 78% 0%,color-mix(in srgb,var(--acc) 20%,transparent),transparent 70%),radial-gradient(120% 80% at 10% 0%,var(--sky2),transparent 70%),linear-gradient(180deg,var(--sky1),transparent 92%)}
.hoy-sky::before{content:"";position:absolute;inset:0;opacity:.55;background-image:radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 32% 9%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 56% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 71% 12%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 88% 28%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 22% 36%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 46% 6%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 93% 6%,#fff 50%,transparent 51%)}
.hoy-sky svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:110px}
.hoy-sky .r1{fill:var(--ridge1)}.hoy-sky .r2{fill:var(--ridge2)}
.hoy-sky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(transparent,var(--bg))}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .hoy-sky::before{display:none}}
:root[data-theme="light"] .hoy-sky::before{display:none}
@media (min-width:900px){.hoy-sky{left:-160px;right:-160px;top:-44px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}}

.hoy-head{align-items:center}
.hoy-pj{position:relative;width:64px;height:64px;border-radius:50%;flex:none;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--acc) 30%,var(--s2)),var(--s1) 72%);border:1px solid var(--line2);box-shadow:0 10px 30px -10px color-mix(in srgb,var(--acc) 60%,transparent);display:grid;place-items:center}
.hoy-pj>svg{width:100%;height:100%;border-radius:50%}
.hoy-lv{position:absolute;right:-4px;bottom:-4px;min-width:26px;height:26px;padding:0 6px;border-radius:13px;background:linear-gradient(160deg,var(--acc2),var(--acc));color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center;border:3px solid var(--bg)}

.hoy-player{display:flex;flex-direction:column;gap:9px;width:100%;text-align:left;padding:14px 16px;border-radius:var(--r);background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--line2);box-shadow:var(--card-sh)}
.hp-row{display:flex;align-items:center;gap:8px}
.hp-row .grow{flex:1}
.hp-lv{font-weight:800;font-size:16px}
.hp-tit{font-size:13px;color:var(--fg2);font-weight:700}
.hp-chip{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:99px;background:var(--s2);font-size:13px;color:var(--fg2);border:1px solid var(--line)}
.hp-chip svg{width:15px;height:15px}
.hp-chip b{color:var(--fg);font-size:14px}
.hp-chip small{font-size:11px;font-weight:700}
.hp-chip.fire svg{color:#F08A3C}
.hp-chip.fire.on{background:color-mix(in srgb,#F08A3C 16%,var(--s2));border-color:color-mix(in srgb,#F08A3C 35%,transparent)}
.hp-chip.fire.on svg{filter:drop-shadow(0 0 6px rgba(240,138,60,.8));animation:llama 1.6s ease-in-out infinite}
@keyframes llama{50%{transform:scale(1.12) rotate(-4deg)}}
.hp-bar{height:10px;border-radius:6px;background:var(--s3);overflow:hidden;position:relative}
.hp-bar.sm{height:5px;display:block;margin-top:5px}
.hp-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--acc),var(--acc2));box-shadow:0 0 14px color-mix(in srgb,var(--acc) 70%,transparent);position:relative;transition:width .8s cubic-bezier(.2,.8,.3,1)}
.hp-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-100%);animation:brillo 3.2s ease-in-out 1s infinite}
@keyframes brillo{40%,100%{transform:translateX(100%)}}
.hp-bar.pulso{animation:pulsoBar .6s ease}
@keyframes pulsoBar{40%{box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 35%,transparent)}}
.hp-sub{display:flex;justify-content:space-between;font-size:12px;color:var(--fg2);font-weight:700}

.hoy-hero{display:flex;align-items:center;gap:20px;padding:20px;background:radial-gradient(120% 120% at 0% 0%,color-mix(in srgb,var(--acc) 12%,transparent),transparent 60%),linear-gradient(180deg,var(--s1h),var(--s1))}
.hoy-rings{position:relative;width:132px;height:132px;flex:none}
.hoy-rings svg{width:100%;height:100%;overflow:visible}
.hoy-rings-in{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.05}
.hoy-rings-in b{font-size:26px;font-weight:800}
.hoy-rings-in b small{font-size:14px;color:var(--fg2)}
.hoy-rings-in span{font-size:11px;color:var(--fg2);font-weight:700}
.hoy-leg{display:flex;flex-direction:column;gap:12px;flex:1;min-width:0}
.hoy-leg>div{display:flex;align-items:center;gap:8px;font-size:14px}
.hoy-leg i{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 8px currentColor}
.hoy-leg span{flex:1;color:var(--fg2)}
.hoy-leg b{font-size:17px}
.hoy-baja{text-align:left;display:flex;flex-direction:column;gap:6px;width:100%}
.hoy-baja .eyebrow svg{width:15px;height:15px;display:inline;vertical-align:-2px}
.reto-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 18%,var(--s1)) 0%,var(--s1) 70%);border:1px solid color-mix(in srgb,var(--acc) 26%,transparent);border-radius:var(--r);padding:14px 16px;text-align:left;width:100%;box-shadow:var(--card-sh)}
.reto-card .grow{display:flex;flex-direction:column;gap:2px}
.reto-card .eyebrow{color:var(--acc);font-size:11px}
.reto-card b{font-size:16px;line-height:1.25}
.reto-card .n{width:44px;height:44px;border-radius:13px;background:linear-gradient(160deg,var(--acc2),var(--acc));box-shadow:0 8px 18px -8px var(--acc)}

.hoy-tareas{gap:12px}
.hoy-g{display:flex;flex-direction:column;gap:8px}
.hoy-gh{display:flex;justify-content:space-between;align-items:center;padding:0 6px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3)}
.hoy-gh span:first-child::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;vertical-align:1px;background:var(--fg3)}
.hoy-g-roca .hoy-gh span:first-child::before{background:var(--acc);box-shadow:0 0 8px var(--acc)}
.hoy-g-imp .hoy-gh span:first-child::before{background:var(--imp)}
.hoy-vacio{display:flex;flex-direction:column;gap:14px}
.hoy-vacio-b{display:flex;gap:8px}
.hoy-viejas{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;border-radius:var(--r);background:var(--s1);border:1px dashed var(--line2)}
.hoy-viejas .grow{display:flex;flex-direction:column;gap:1px;flex:1}
.hoy-viejas .grow span{font-size:13px;color:var(--fg2)}
.hoy-viejas-n{width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--imp) 18%,transparent);color:var(--imp);display:grid;place-items:center;font-weight:800;flex:none}

.hoy-habs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.hoy-hab{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;border-radius:18px;background:linear-gradient(180deg,var(--s1h),var(--s1));border:1px solid var(--line);text-align:left;transition:transform .15s,background .25s,border-color .25s;box-shadow:var(--card-sh)}
.hoy-hab:active{transform:scale(.96)}
.hoy-hab-ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-size:20px;background:color-mix(in srgb,var(--hc) 18%,transparent);color:var(--hc);transition:all .25s}
.hoy-hab-ic svg{width:20px;height:20px}
.hoy-hab-t{font-weight:700;font-size:15px;line-height:1.2}
.hoy-hab-d{font-size:12.5px;color:var(--fg2);display:flex;align-items:center;gap:3px}
.hoy-hab-d .fl svg{width:13px;height:13px;color:#F08A3C}
.hoy-hab.on{background:color-mix(in srgb,var(--hc) 15%,var(--s1));border-color:color-mix(in srgb,var(--hc) 45%,transparent)}
.hoy-hab.on .hoy-hab-ic{background:var(--hc);color:#fff;box-shadow:0 6px 18px -6px var(--hc);animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
.hoy-inn{display:flex;flex-wrap:wrap;gap:8px}
.hoy-innb{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:99px;background:var(--s1);border:1px solid var(--line);font-size:14px;font-weight:700}
.hoy-innb .chk{width:22px;height:22px;border-color:color-mix(in srgb,var(--imp) 70%,var(--fg3))}
.hoy-innb.on{color:var(--fg2)}
@media (min-width:900px){.hoy-habs{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}

.hoy-fin{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px;border-radius:var(--r);background:linear-gradient(135deg,color-mix(in srgb,var(--azul) 14%,var(--s1)),var(--s1) 70%);border:1px solid color-mix(in srgb,var(--azul) 22%,transparent);box-shadow:var(--card-sh)}
.hoy-fin .grow{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.hoy-fin .grow span{font-size:13px;color:var(--fg2)}
.hoy-fin b{font-size:16px}
.hoy-fin-ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--azul) 20%,transparent);color:var(--azul);flex:none}
.hoy-fin-ic svg{width:21px;height:21px}
.hoy-fin.hot{border-color:color-mix(in srgb,var(--azul) 55%,transparent);box-shadow:0 10px 30px -14px var(--azul)}
.hoy-fin.hot .hoy-fin-ic{background:var(--azul);color:#fff}
.hoy-fin.ok{background:linear-gradient(135deg,color-mix(in srgb,var(--ok) 13%,var(--s1)),var(--s1) 70%);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
.hoy-fin.ok .hoy-fin-ic{background:var(--ok);color:#fff}

/* rutina de mañana */
.rut{display:flex;flex-direction:column;gap:4px;padding:14px 14px 8px;border-radius:var(--r);background:radial-gradient(120% 100% at 100% 0%,color-mix(in srgb,#F2B33D 16%,transparent),transparent 60%),linear-gradient(180deg,var(--s1h),var(--s1));border:1px solid color-mix(in srgb,#F2B33D 22%,var(--line));box-shadow:var(--card-sh)}
button.rut{flex-direction:row;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px}
button.rut .grow{display:flex;flex-direction:column;gap:1px;flex:1}
button.rut .grow span{font-size:13px;color:var(--fg2)}
.rut-h{display:flex;align-items:center;gap:12px;padding-bottom:6px}
.rut-h .grow{display:flex;flex-direction:column;flex:1}
.rut-h .eyebrow{color:#E0A23A;font-size:11px}
.rut-h b{font-size:17px}
.rut-ring{position:relative;flex:none;color:#F2B33D}
.rut-ring svg{width:40px;height:40px;transform:rotate(-90deg)}
.rut-min .rut-ring svg{width:34px;height:34px}
.rut-ring circle+circle{stroke:#F2B33D}
.rut-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:14px}
.rut-l{display:flex;flex-direction:column}
.rut-p{display:flex;align-items:center;gap:12px;padding:11px 4px;border-top:1px solid var(--line);text-align:left;font-weight:700;font-size:15px}
.rut-p .grow{flex:1}
.rut-p.on .grow{color:var(--fg3);text-decoration:line-through}
.rut-e{width:32px;height:32px;border-radius:10px;background:var(--s2);display:grid;place-items:center;font-size:17px;flex:none}
.rut-p .chk.on{background:#F2B33D;border-color:#F2B33D;box-shadow:0 0 12px -2px rgba(242,179,61,.7)}
.rut-okic{width:34px;height:34px;border-radius:11px;background:#F2B33D;color:#fff;display:grid;place-items:center;flex:none}
.rut-okic svg{width:18px;height:18px}
.rut-ed .iconbtn{width:30px;height:30px}

/* + agregar */
.sheet.mas .sh{padding-bottom:0}
.mas-in{display:flex;gap:8px;align-items:center;background:var(--s2);border-radius:16px;padding:6px 6px 6px 4px;border:1px solid var(--line2)}
.mas-in input{background:transparent;border:0;font-size:17px;padding:10px 10px}
.mas-in:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-bg)}
.mas-go{width:42px;height:42px;border-radius:12px;background:var(--acc);color:#fff;display:grid;place-items:center;flex:none}
.mas-go svg{width:20px;height:20px}
.mas-g{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mas-g button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px 12px;border-radius:18px;background:var(--s2);text-align:left;border:1px solid transparent;transition:transform .12s}
.mas-g button:active{transform:scale(.96)}
.mas-g button b{font-size:14.5px}
.mas-g button span:last-child{font-size:11.5px;color:var(--fg2);line-height:1.25}
.mas-g button.on{border-color:var(--azul)}
.mas-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--acc-bg);color:var(--acc);margin-bottom:6px}
.mas-ic.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.mas-ic.imp{background:color-mix(in srgb,var(--imp) 18%,transparent);color:var(--imp)}
.mas-ic.azul{background:color-mix(in srgb,var(--azul) 18%,transparent);color:var(--azul)}
.mas-ic svg{width:19px;height:19px}
@media (max-width:360px){.mas-g{grid-template-columns:1fr 1fr}}

/* terminar el día */
.ci-top{display:flex;align-items:center;gap:18px}
.ci-ring{position:relative;width:112px;height:112px;flex:none}
.ci-ring svg{width:100%;height:100%;transform:rotate(-90deg);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--acc) 40%,transparent))}
.ci-ring>div{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.ci-ring b{font-size:34px;font-weight:800}
.ci-ring span{font-size:12px;color:var(--fg2);font-weight:700}
.ci-k{display:flex;flex-direction:column;gap:10px;min-width:0}
.ci-chips{display:flex;flex-wrap:wrap;gap:6px}
.ci-l{display:flex;flex-direction:column;gap:8px}
.ci-t{background:var(--s1);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);transition:opacity .2s}
.ci-t.del{opacity:.5}
.ci-t.del .ci-tt .grow{text-decoration:line-through}
.ci-tt{display:flex;gap:8px;align-items:center;font-weight:700}
.ci-tt .grow{flex:1;min-width:0}
.ci-o{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.ci-o button{height:34px;border-radius:10px;background:var(--s2);font-size:13px;font-weight:700;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.ci-o button[aria-pressed=true]{background:var(--acc);color:#fff}
.ci-o button[data-v=del][aria-pressed=true]{background:#ff8a65}
.ci-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.ci-dias button{display:flex;flex-direction:column;align-items:center;padding:6px 0;border-radius:10px;background:var(--s2);font-size:11px;color:var(--fg2);font-weight:700}
.ci-dias button b{font-size:15px;color:var(--fg)}
.ci-dias button[aria-pressed=true]{background:var(--acc);color:#fff}
.ci-dias button[aria-pressed=true] b{color:#fff}
.ci-ok{display:flex;align-items:center;gap:10px;padding:16px;border-radius:16px;background:color-mix(in srgb,var(--ok) 12%,var(--s1));font-weight:700}
.ci-ok svg{width:22px;height:22px;color:var(--ok)}

/* perfil y productos */
.perfil-card{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:16px;border-radius:22px;background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 60%),linear-gradient(180deg,var(--s1h),var(--s1));border:1px solid var(--line2);box-shadow:var(--card-sh)}
.perfil-card .grow{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.perfil-card b{font-size:21px;font-weight:800}
.perfil-card .eyebrow{color:var(--acc)}
.perfil-pj{width:92px;height:92px;border-radius:50%;overflow:hidden;flex:none;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--acc) 26%,var(--s2)),var(--s2) 75%)}
.perfil-pj svg{width:100%;height:100%}
.prods{display:flex;flex-direction:column;gap:8px}
.prod{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:linear-gradient(180deg,var(--s1h),var(--s1));border:1px solid var(--line);box-shadow:var(--card-sh)}
.prod .grow{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.prod .grow b{font-size:15.5px}
.prod .grow span{font-size:12.5px;color:var(--fg2);line-height:1.35}
.prod-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--s2);color:var(--fg3);flex:none}
.prod-ic svg{width:21px;height:21px}
.prod.on .prod-ic{background:linear-gradient(160deg,var(--acc2),var(--acc));color:#fff;box-shadow:0 8px 18px -10px var(--acc)}
.prod:not(.on):not(.pronto){border-color:color-mix(in srgb,var(--acc) 25%,var(--line));background:radial-gradient(120% 120% at 100% 0%,var(--acc-bg),transparent 60%),linear-gradient(180deg,var(--s1h),var(--s1))}
.prod:not(.on):not(.pronto) .prod-ic{color:var(--acc);background:var(--acc-bg)}
.prod-st{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:800;color:var(--ok);flex:none}
.prod-st svg{width:14px;height:14px}
.prod .btn.sm{flex:none}
.side-me{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;text-align:left;width:100%}
.side-me:hover{background:var(--s1)}
.side-me .grow{display:flex;flex-direction:column;min-width:0;flex:1}
.side-me b{font-size:14px}
.side-me .grow>span:not(.hp-bar){font-size:12px;color:var(--fg2)}

/* efectos */
#fx{position:fixed;inset:0;pointer-events:none;z-index:80}
.fx-xp{position:absolute;transform:translate(-50%,0);font-weight:800;font-size:22px;color:var(--acc);text-shadow:0 2px 14px color-mix(in srgb,var(--acc) 70%,transparent),0 1px 0 rgba(0,0,0,.3);animation:xpSube 1.25s cubic-bezier(.2,.8,.3,1) forwards;white-space:nowrap}
.fx-xp small{font-size:12px;margin-left:3px}
@keyframes xpSube{0%{opacity:0;transform:translate(-50%,6px) scale(.7)}18%{opacity:1;transform:translate(-50%,-14px) scale(1.12)}100%{opacity:0;transform:translate(-50%,-70px) scale(1)}}
.fx-ring{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2px solid var(--c);animation:fxRing .55s ease-out forwards}
@keyframes fxRing{from{transform:scale(.4);opacity:.9}to{transform:scale(1.5);opacity:0}}
.fx-dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--c);animation:fxDot .6s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes fxDot{to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
.fx-conf{position:absolute;inset:0;width:100%;height:100%}
.fx-cel{position:absolute;inset:0;pointer-events:auto;display:grid;place-items:center;padding:24px;background:rgba(4,7,14,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transition:opacity .3s}
.fx-cel.on{opacity:1}
.fx-cel-c{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:340px;transform:scale(.9);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.fx-cel.on .fx-cel-c{transform:none}
.fx-cel-glow{position:absolute;top:-30px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 45%,transparent),transparent 65%);z-index:-1;animation:glow 2.4s ease-in-out infinite}
@keyframes glow{50%{transform:scale(1.1);opacity:.8}}
.fx-cel-pj{animation:salto 1.1s cubic-bezier(.3,1.4,.5,1) .15s both}
@keyframes salto{0%{transform:translateY(30px) scale(.8);opacity:0}60%{transform:translateY(-10px)}100%{transform:none;opacity:1}}
.fx-cel h1{font-size:40px;color:#fff}
.fx-cel .eyebrow{color:var(--acc)}
.fx-cel .sub{color:rgba(255,255,255,.75)}
.fx-cel .btn{margin-top:12px;min-width:220px}
.fx-cel-acc{margin-top:4px}

/* tirar para actualizar */
.ptr{position:fixed;left:50%;top:calc(var(--sat) + 4px);z-index:70;width:44px;height:44px;margin-top:-48px;border-radius:50%;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line2);box-shadow:0 8px 24px -8px var(--shadow);display:grid;place-items:center;transform:translate(-50%,0);transition:opacity .2s}
.ptr svg{width:28px;height:28px;transform:rotate(-90deg)}
.ptr .tr{fill:none;stroke:var(--s3);stroke-width:3.2}
.ptr .ar{fill:none;stroke:var(--acc);stroke-width:3.2;stroke-linecap:round;transition:stroke-dashoffset .05s}
.ptr .ok{fill:none;stroke:var(--ok);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:rotate(90deg);transform-origin:18px 18px}
.ptr.listo{box-shadow:0 0 0 4px var(--acc-bg),0 8px 24px -8px var(--shadow)}
.ptr.cargando{transition:transform .25s cubic-bezier(.2,.8,.3,1)}
.ptr.cargando svg{animation:gira .8s linear infinite}
.ptr.cargando .ar{stroke-dashoffset:70!important}
.ptr.fin .ar{stroke-dashoffset:100!important}
.ptr.fin .ok{opacity:1}
.ptr.out{opacity:0;transition:opacity .25s,transform .25s}
@keyframes gira{to{transform:rotate(270deg)}}

/* nueva versión */
.nv{position:fixed;left:50%;bottom:calc(var(--tab) + var(--sab) + 90px);transform:translate(-50%,20px);opacity:0;z-index:35;display:flex;gap:8px;align-items:center;padding:10px 16px;border-radius:99px;background:var(--toast);color:var(--toast-fg);font-weight:700;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:all .3s}
.nv.on{opacity:1;transform:translate(-50%,0)}
.nv svg{width:16px;height:16px}

/* acceso */
.gate{position:relative;overflow:hidden}
.gate-sky{position:fixed;inset:0 0 auto 0;height:60vh;z-index:-1;background:radial-gradient(80% 60% at 80% 0%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%),linear-gradient(180deg,var(--sky1),transparent)}
.gate-brand{display:flex;align-items:center;gap:14px}
.gate-brand .logo{width:58px;height:58px;border-radius:16px}
.gate-brand b{display:block;font-size:20px}
.gate-brand span{font-size:13px;color:var(--fg2);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.gate-f{display:flex;flex-direction:column;gap:16px}
.gate-seg button{height:38px}
.gate-row{display:flex;justify-content:space-between}
.gate-row .link[disabled]{color:var(--fg3)}
.gate-help{text-align:center}
.code-in{font-size:32px;font-weight:800;letter-spacing:.45em;text-align:center;padding:14px 0 14px .45em;font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){.hp-bar i::after,.hp-chip.fire.on svg{animation:none}}

svg.cu-pj.busto{overflow:hidden;border-radius:50%}
.v-semana .head h1{white-space:nowrap;font-size:clamp(28px,8vw,34px)}
.v-semana .head .eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:420px){.se-vseg button{width:30px}.se-nav .iconbtn{width:32px}}
.gate{min-height:100vh;min-height:100dvh;isolation:isolate}
.gate-sky{z-index:-1}

/* ---------- ofertas (oferta v4): bloque de compra en tarjetas bloqueadas y Mis productos */
.of{display:flex;flex-direction:column;gap:10px}
.of .btn{height:56px}
.of-combo{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;text-align:left;width:100%;border:1px solid color-mix(in srgb,var(--acc) 30%,var(--line));background:radial-gradient(120% 140% at 100% 0%,var(--acc-bg),transparent 65%),linear-gradient(180deg,var(--s1h),var(--s1));box-shadow:var(--card-sh);transition:transform .12s}
.of-combo:active{transform:scale(.985)}
.of-combo.main{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-bg),var(--card-sh)}
.of-combo-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;background:linear-gradient(160deg,var(--acc2),var(--acc));color:#fff;box-shadow:0 8px 18px -10px var(--acc)}
.of-combo-ic svg{width:21px;height:21px}
.of-combo .grow{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.of-combo .grow b{font-size:15.5px}
.of-combo .grow>span:last-child{font-size:12.5px;color:var(--fg2)}
.of-k{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.of-p{display:flex;flex-direction:column;align-items:flex-end;flex:none;line-height:1.15}
.of-p s{font-size:12px;color:var(--fg3)}
.of-p b{font-size:18px;font-weight:800}
.of-p em{font-style:normal;font-size:11px;font-weight:800;color:var(--ok);margin-top:2px;white-space:nowrap}
.of-pronto{display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;color:var(--fg2);padding:12px;border-radius:14px;background:var(--s2)}
.of-pronto svg{width:15px;height:15px}
.prod-hero{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:22px;margin-bottom:10px;overflow:hidden;border:1px solid color-mix(in srgb,var(--acc) 35%,var(--line));
  background:radial-gradient(90% 90% at 100% 0%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 60%),radial-gradient(70% 80% at 0% 100%,color-mix(in srgb,var(--acc2) 10%,transparent),transparent 70%),linear-gradient(180deg,var(--s1h),var(--s1));box-shadow:var(--card-sh)}
.prod-hero .ph-top{display:flex;align-items:center;justify-content:space-between}
.prod-hero .prod-ic{background:linear-gradient(160deg,var(--acc2),var(--acc));color:#fff;box-shadow:0 10px 22px -10px var(--acc)}
.ph-t{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.ph-d{font-size:14px;color:var(--fg2);line-height:1.4}
.ph-parts{display:flex;flex-wrap:wrap;gap:6px}
.ph-parts span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;background:var(--s2);font-size:12.5px;font-weight:700;color:var(--fg2)}
.ph-parts span.on{color:var(--ok)}
.ph-parts svg{width:15px;height:15px;color:var(--acc)}
.ph-p{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:2px}
.ph-p>span{display:flex;flex-direction:column;line-height:1.1}
.ph-p s{font-size:13px;color:var(--fg3)}
.ph-p b{font-size:32px;font-weight:800;letter-spacing:-.02em}
.ph-p em{font-style:normal;font-size:13px;font-weight:800;color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent);padding:6px 10px;border-radius:99px;white-space:nowrap}
.prod-hero .btn{height:54px}
.prod-precio{font-weight:800;color:var(--fg)!important;font-size:14px!important;margin-top:3px}
.prods-base{margin-top:14px}
.prods-base .prod.on .prod-ic{background:var(--s2);color:var(--ok);box-shadow:none}
.prod.pronto{opacity:.85}
/* barra lateral (compu): áreas */
.side-sep{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);padding:18px 12px 6px}
.side-lock{margin-left:auto;color:var(--fg3)}
.side-lock svg{width:15px!important;height:15px!important}
/* + : anotar un gasto */
.mas-plata{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--s2);text-align:left;width:100%}
.mas-plata .mas-ic{margin:0;background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.mas-plata .grow{display:flex;flex-direction:column;flex:1}
.mas-plata .grow span{font-size:12.5px;color:var(--fg2)}
.mas-plata>svg{width:18px;height:18px;color:var(--fg3)}
.sheet .body>.group,.sheet .body>.card,.sheet .body>.sec{flex-shrink:0}

.prod-up{align-items:flex-start}
.prod-f{display:flex!important;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;min-height:38px}
.prod-f .prod-precio{margin:0;font-size:16px!important}
.prod-enc{display:inline-flex;align-items:center;gap:2px;font-size:13px;font-weight:800;color:var(--acc);padding:8px 4px 8px 10px;border-radius:10px;background:var(--acc-bg)}
.prod-enc svg{width:15px;height:15px}
.prod .grow .prod-st{color:var(--ok);font-size:13px}.prod .grow .pill{color:var(--fg2);font-size:13px}

/* ---------- mundo "Ojos cumbre" (17/10): logo visor, el robot te habla, estados vacíos */
.logo-visor{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}
.rb-dice{display:flex;align-items:center;gap:12px;margin:2px 0 14px;padding:10px 14px 10px 10px;border-radius:18px;background:var(--s1);border:1px solid var(--line)}
.rb-dice-pj{width:44px;height:44px;flex:none;border-radius:50%;overflow:hidden;background:#0B0B0C;display:grid;place-items:center}
.rb-dice-pj svg{width:100%;height:100%}
.rb-dice p{margin:0;font-size:15px;line-height:1.35;font-weight:700;color:var(--fg)}
.rb-dice.triste p{color:var(--fg2)}
.empty.rb-vacio>svg{width:84px;height:84px;margin:0 auto 4px;display:block;border-radius:50%;background:#0B0B0C}
.ha-alerta-ic.rb{background:#0B0B0C!important;overflow:hidden;padding:0!important}
.ha-alerta-ic.rb svg{width:100%;height:100%}
.ha-share{margin:14px auto 0;display:flex}
.fx-cel-share{margin-top:10px}

.rb-push{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-4px 0 14px;padding:12px 14px 12px 12px;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 14%,var(--s1)),var(--s1) 70%);border:1px solid color-mix(in srgb,var(--acc) 30%,var(--line))}
.rb-push .grow{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.rb-push b{font-size:15px}.rb-push span{font-size:13.5px;color:var(--fg2);line-height:1.35}
.rb-push-b{display:flex;align-items:center;gap:14px;flex-basis:100%;padding-left:56px}
.rb-ok{animation:rbOk .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes rbOk{0%{transform:none}30%{transform:translateY(-6px) scale(1.06)}60%{transform:translateY(1px) scale(.98)}100%{transform:none}}