/* Peaks OS · Hábitos visuales (todas las clases con prefijo .ha-) */
@media (min-width:900px){ .view.v-habitos{max-width:960px} }

/* burbuja de ícono (emoji) en el color del hábito */
.ha-ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;font-size:19px;line-height:1;
  background:color-mix(in srgb,var(--hc,var(--acc)) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hc,var(--acc)) 26%,transparent)}
.ha-ico.xs{width:22px;height:22px;border-radius:7px;font-size:12px}
.ha-ico.sm{width:30px;height:30px;border-radius:9px;font-size:16px}
.ha-ico.xl{width:64px;height:64px;border-radius:20px;font-size:34px}

/* anillo */
.ha-ring{position:relative;width:var(--sz);height:var(--sz);flex:none}
.ha-ring>svg{width:100%;height:100%;transform:rotate(-90deg)}
.ha-ring-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.05}
.ha-ring-in b{font-size:32px;font-weight:800;letter-spacing:-.035em}
.ha-ring-in b em{font-style:normal;font-size:17px;color:var(--fg2);margin-left:1px}
.ha-ring-in span{font-size:11.5px;color:var(--fg2);font-weight:700;margin-top:3px}

/* ---------- héroe */
.ha-hero{display:grid;grid-template-columns:auto 1fr;gap:16px 18px;align-items:center;padding:20px;
  background:radial-gradient(120% 130% at 0% 0%,color-mix(in srgb,var(--acc) 15%,transparent),transparent 58%),var(--s1)}
.ha-hero.ok{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 40%,transparent)}
.ha-hero-r{display:flex;flex-direction:column;gap:12px;min-width:0}
.ha-msg{font-size:17px;font-weight:800;line-height:1.22;letter-spacing:-.01em;text-wrap:balance;display:flex;gap:8px;align-items:flex-start}
.ha-okic{width:22px;height:22px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;flex:none;margin-top:-1px}
.ha-okic svg{width:13px;height:13px}
.ha-bars{display:flex;flex-direction:column;gap:7px}
.ha-hb{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--fg2);text-align:left}
.ha-bar{height:7px;border-radius:4px;background:var(--s3);overflow:hidden}
.ha-bar i{display:block;height:100%;border-radius:4px;background:var(--hc);transition:width .5s cubic-bezier(.2,.9,.25,1)}
.ha-trio{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1.2fr .7fr;border-top:1px solid var(--line);padding-top:14px}
.ha-trio>div{display:flex;flex-direction:column;gap:3px;padding:0 4px;min-width:0}
.ha-trio>div+div{border-left:1px solid var(--line);padding-left:12px}
.ha-trio b{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.ha-trio b small{font-size:13px;color:var(--fg2);font-weight:700;margin-left:3px;letter-spacing:0}
.ha-trio span{font-size:12px;color:var(--fg2);font-weight:700;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ---------- nunca dos */
.ha-alerta{border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 16%,var(--s1)),var(--s1) 75%);border:1px solid color-mix(in srgb,var(--acc) 34%,transparent)}
.ha-alerta-h{display:flex;gap:12px;align-items:center}
.ha-alerta-h b{display:block;font-size:16px}
.ha-alerta-h span{font-size:14px;color:var(--fg2)}
.ha-alerta-ic{width:38px;height:38px;border-radius:12px;background:var(--acc);color:#fff;display:grid;place-items:center;flex:none}
.ha-alerta-ic svg{width:22px;height:22px}
.ha-alerta-r{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.ha-alerta-r .grow{flex:1;min-width:0}
.ha-alerta-r b{display:block;font-size:15px}
.ha-alerta-r small{display:block;font-size:12.5px;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ha-alerta-r .pill{height:34px}

/* ---------- tabla semanal */
.ha-nav{align-items:center}
.ha-navb{display:flex;align-items:center;gap:2px}
.ha-navb .iconbtn[disabled]{opacity:.25;pointer-events:none}
.ha-navb .pill{height:28px}
.ha-t{padding:6px 10px 10px}
.ha-r{display:grid;grid-template-columns:repeat(7,1fr);align-items:center;position:relative}
.ha-r+.ha-r:not(.ha-tf){border-top:1px solid var(--line)}
.ha-n0,.ha-w0,.ha-w{display:none}
.ha-th{padding:6px 0 4px}
.ha-d{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:800;color:var(--fg3);letter-spacing:.02em;text-transform:uppercase}
.ha-d i{font-style:normal;font-size:15px;font-weight:800;color:var(--fg2);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;text-transform:none}
.ha-d.hoy{color:var(--acc)}
.ha-d.hoy i{background:var(--acc);color:#fff}
.ha-d.fut{opacity:.45}
.ha-n{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:12px 4px 6px;text-align:left;min-width:0}
.ha-nt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ha-nt b{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ha-nt small{font-size:12.5px;color:var(--fg2);font-weight:700;display:flex;gap:5px;align-items:center;white-space:nowrap;overflow:hidden}
.ha-nt small em{font-style:normal;color:var(--acc)}
.ha-fire{display:inline-flex;align-items:center;gap:2px;color:var(--hc)}
.ha-fire svg{width:13px;height:13px}
.ha-nw{font-size:15px;font-weight:800;flex:none}
.ha-nw i{font-style:normal;color:var(--fg3);font-weight:700}
.ha-c{display:grid;place-items:center;padding:4px 0 12px;align-self:stretch}
.ha-c.hoy{background:color-mix(in srgb,var(--acc) 6%,transparent)}
.ha-r:first-of-type .ha-c.hoy{border-radius:0}

/* celda: círculo tocable */
.ha-k{--k:38px;width:var(--k);height:var(--k);border-radius:50%;display:grid;place-items:center;flex:none;position:relative;
  border:2px solid var(--line2);color:#fff;transition:transform .12s,background .18s,border-color .18s}
.ha-k svg{width:58%;height:58%}
.ha-k:not([disabled]):active{transform:scale(.88)}
.ha-k:not([disabled]):hover{border-color:color-mix(in srgb,var(--hc) 70%,transparent)}
.ha-k[disabled]{cursor:default}
.ha-k.on{background:var(--hc);border-color:var(--hc);box-shadow:0 3px 10px -3px color-mix(in srgb,var(--hc) 70%,transparent)}
.ha-k.min{border-color:var(--hc);background:linear-gradient(to top,var(--hc) 50%,transparent 50%)}
.ha-k.com{border:2px dashed color-mix(in srgb,var(--hc) 75%,transparent);color:var(--hc);background:color-mix(in srgb,var(--hc) 10%,transparent)}
.ha-k.com svg{width:50%;height:50%}
.ha-k.no{border-color:transparent}
.ha-k.no::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--fg3);opacity:.6}
.ha-k.pend{border-color:color-mix(in srgb,var(--hc) 55%,transparent);background:color-mix(in srgb,var(--hc) 6%,transparent)}
.ha-k.miss{color:var(--fg3);border-color:var(--line)}
.ha-k.miss svg{width:46%;height:46%}
.ha-k.fut{border-style:dashed;border-color:var(--line);opacity:.6}
.ha-k[disabled]:not(.fut){opacity:.8}
.ha-pop{animation:haPop .42s cubic-bezier(.2,.9,.25,1.4)}
@keyframes haPop{0%{transform:scale(.7)}55%{transform:scale(1.15)}100%{transform:scale(1)}}
.ha-pop.on::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--hc);animation:haRing .6s ease-out forwards}
@keyframes haRing{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}

/* pie: cumplimiento del día */
.ha-tf{padding-top:2px}
.ha-tfc{display:grid;place-items:center}
.ha-tfc i{width:6px;height:22px;border-radius:3px;background:var(--s3);overflow:hidden;display:flex;align-items:flex-end}
.ha-tfc u{display:block;width:100%;background:var(--acc);border-radius:3px}
.ha-tf .ha-c{padding:0}

/* leyenda */
.ha-ley{display:flex;flex-wrap:wrap;gap:6px 14px;padding:2px 6px;font-size:12px;font-weight:700;color:var(--fg2)}
.ha-ley span{display:inline-flex;align-items:center;gap:6px}
.ha-ley .ha-k{--k:16px;--hc:var(--acc);border-width:1.5px}
.ha-ley .ha-k.com{border-width:1.5px}
.ha-tip{padding:0 6px}

/* compu: tabla clásica con columna de nombre */
@media (min-width:720px){
  .ha-t{padding:8px 18px 14px}
  .ha-r{grid-template-columns:minmax(200px,1.7fr) repeat(7,1fr) 64px}
  .ha-n{grid-column:auto;padding:12px 8px 12px 0}
  .ha-nw{display:none}
  .ha-n0,.ha-w0{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3)}
  .ha-w0{text-align:right}
  .ha-w{display:block;text-align:right;font-size:13px;color:var(--fg3);font-weight:700}
  .ha-w b{font-size:18px;color:var(--fg);font-weight:800}
  .ha-c{padding:8px 0}
  .ha-k{--k:40px}
  .ha-ley .ha-k{--k:16px}
}

/* ---------- gráficos */
.ha-duo{display:grid;gap:16px}
@media (min-width:900px){ .ha-duo{grid-template-columns:1fr 1fr} }
.ha-chart{display:flex;flex-direction:column;gap:12px;min-width:0}
.ha-ch-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ha-big{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:4px}
.ha-big small{font-size:14px;color:var(--fg2);font-weight:700;letter-spacing:0;margin-left:5px}
.ha-delta{font-size:12.5px;font-weight:800;padding:4px 9px;border-radius:99px;white-space:nowrap}
.ha-delta.up{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.ha-delta.down{background:var(--s2);color:var(--fg2)}
.ha-svg{width:100%;height:auto;overflow:visible}
.ha-svg text{fill:var(--fg3);font-size:9.5px;font-weight:700;font-family:var(--font)}
.ha-svg .ha-tv{fill:var(--fg);font-size:10.5px;font-weight:800}
.ha-svg .ha-gl{stroke:var(--line);stroke-width:1}
.ha-svg .ha-avg{stroke:var(--fg2);stroke-width:1.2;stroke-dasharray:3 4;opacity:.7}
.ha-svg .ha-b0{fill:var(--s3)}

/* mapa de calor */
.ha-heat.gen{--hc:var(--acc)}
.ha-heat{display:grid;grid-template-columns:16px 1fr;gap:4px 5px;align-items:start}
.ha-heat-m,.ha-heat-g{display:grid;grid-template-columns:var(--cols);column-gap:3px}
.ha-heat-m{font-size:10.5px;font-weight:700;color:var(--fg3);height:14px;text-transform:capitalize}
.ha-heat-m span{white-space:nowrap}
.ha-heat-g{grid-template-rows:repeat(7,auto);grid-auto-flow:column;row-gap:3px}
.ha-heat-d{display:grid;grid-template-rows:repeat(7,1fr);row-gap:3px;font-size:9.5px;font-weight:700;color:var(--fg3);height:100%}
.ha-heat-d span{display:flex;align-items:center;line-height:1}
.ha-heat-g i{aspect-ratio:1;border-radius:3px;background:var(--s3)}
.ha-heat.tres .ha-heat-g i{border-radius:6px}
.ha-heat.tres .ha-heat-g,.ha-heat.tres .ha-heat-m{column-gap:5px}
.ha-heat.tres .ha-heat-g,.ha-heat.tres .ha-heat-d{row-gap:5px}
.ha-heat i.l1{background:color-mix(in srgb,var(--hc) 30%,var(--s3))}
.ha-heat i.l2{background:color-mix(in srgb,var(--hc) 55%,var(--s3))}
.ha-heat i.l3{background:color-mix(in srgb,var(--hc) 78%,var(--s3))}
.ha-heat i.l4{background:var(--hc)}
.ha-heat i.c,.ha-heat-ley i.c{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--hc) 55%,transparent) 0 2px,transparent 2px 4px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hc) 45%,transparent)}
.ha-heat i.n{background:transparent;box-shadow:inset 0 0 0 1px var(--line);opacity:.6}
.ha-heat i.f{background:transparent}
.ha-heat i.h{outline:1.5px solid var(--fg);outline-offset:1px}
.ha-heat.anio{overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.ha-heat.anio::-webkit-scrollbar{display:none}
.ha-heat.anio .ha-heat-d{position:sticky;left:0;background:var(--s1);z-index:1}
.ha-heat-ley{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:11px;font-weight:700;color:var(--fg3);margin-top:2px}
.ha-heat-ley i{width:11px;height:11px;border-radius:3px;background:var(--s3)}
.ha-heat-ley span:first-child{margin-right:3px}.ha-heat-ley span:last-child{margin-left:3px}
.ha-heat-ley i.l1{background:color-mix(in srgb,var(--hc,var(--acc)) 30%,var(--s3))}
.ha-heat-ley i.l2{background:color-mix(in srgb,var(--hc,var(--acc)) 55%,var(--s3))}
.ha-heat-ley i.l3{background:color-mix(in srgb,var(--hc,var(--acc)) 78%,var(--s3))}
.ha-heat-ley i.l4{background:var(--hc,var(--acc))}

/* ---------- reglas */
.ha-reglas{display:grid;gap:10px}
@media (min-width:720px){ .ha-reglas{grid-template-columns:repeat(3,1fr)} }
.ha-regla{display:flex;gap:12px;align-items:flex-start;padding:16px}
.ha-regla b{display:block;font-size:15px;margin-bottom:2px}
.ha-regla p{font-size:13.5px;color:var(--fg2);line-height:1.4}
.ha-rg-ic{width:34px;height:34px;border-radius:11px;background:var(--acc-bg);color:var(--acc);display:grid;place-items:center;flex:none}
.ha-rg-ic svg{width:19px;height:19px}
.ha-tokens{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ha-tok{position:relative;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:16px;background:color-mix(in srgb,var(--hc) 16%,transparent)}
.ha-tok i{position:absolute;right:-4px;bottom:-4px;width:17px;height:17px;border-radius:50%;background:var(--s1);color:var(--hc);display:grid;place-items:center}
.ha-tok i svg{width:13px;height:13px}
.ha-tok.usado{filter:grayscale(.85);opacity:.55}
.ha-tok.usado i{color:var(--fg2)}

/* soltados */
.ha-arch summary{padding:0 4px;cursor:pointer;list-style:none}
.ha-arch summary::-webkit-details-marker{display:none}
.ha-arch summary::before{content:"›";display:inline-block;margin-right:6px;transition:transform .2s}
.ha-arch[open] summary::before{transform:rotate(90deg)}
.ha-arch .row::before{display:none}

/* vacío */
.ha-vacio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:30px 20px}
.ha-vacio-ic{width:64px;height:64px;border-radius:20px;background:var(--acc-bg);color:var(--acc);display:grid;place-items:center}
.ha-vacio-ic svg{width:34px;height:34px}
.ha-vacio .chips{justify-content:center}

/* ---------- hoja de detalle */
.ha-sht{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ha-det{display:flex;flex-direction:column;gap:18px}
.ha-dh{display:flex;gap:14px;align-items:center}
.ha-dh-t{display:flex;flex-direction:column;gap:8px;min-width:0}
.ha-dh-tags{display:flex;flex-wrap:wrap;gap:6px}
.ha-dh .sub{display:flex;gap:6px;align-items:center}
.ha-dh .sub svg{width:15px;height:15px;color:var(--hc);flex:none}
.ha-dk{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ha-dk-main{grid-column:1/-1;display:flex;align-items:center;gap:16px;background:var(--s1);border-radius:var(--r);padding:16px;
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--hc) 18%,transparent),transparent 60%),var(--s1)}
.ha-dk-main .ha-ring svg circle:last-child{stroke:var(--hc)}
.ha-dk-main .ha-ring-in b{font-size:28px}
.ha-dk-msg{font-size:17px;font-weight:800;line-height:1.25;margin-top:4px;text-wrap:balance}
.ha-dk-k{background:var(--s1);border-radius:var(--r2);padding:13px 14px}
.ha-dk-k b{font-size:24px;font-weight:800;display:block;line-height:1.1;letter-spacing:-.02em}
.ha-dk-k span{font-size:12px;color:var(--fg2);font-weight:700}
.ha-dstat{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--r);background:var(--s1)}
.ha-dstat .ha-rg-ic{background:color-mix(in srgb,var(--hc) 18%,transparent);color:var(--hc)}
.ha-dstat b{display:block;font-size:15px}
.ha-dstat span{font-size:13px;color:var(--fg2)}
.ha-dstat.alerta{border:1px solid color-mix(in srgb,var(--acc) 34%,transparent);background:color-mix(in srgb,var(--acc) 8%,var(--s1))}
.ha-dstat.alerta .ha-rg-ic{background:var(--acc);color:#fff}
.ha-rango{width:170px}
.ha-rango button{height:28px;font-size:13px}
.ha-pd{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:16px 12px 12px}
.ha-pd>div{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--fg3)}
.ha-pd b{font-size:12px;color:var(--fg2)}
.ha-pd-b{width:100%;max-width:26px;height:64px;border-radius:7px;background:var(--s3);display:flex;align-items:flex-end;overflow:hidden}
.ha-pd-b u{display:block;width:100%;background:var(--hc);border-radius:7px}
.ha-pd .flojo b,.ha-pd .flojo{color:var(--fg)}
.ha-pd .flojo .ha-pd-b u{opacity:.55}
.ha-ri{width:30px;height:30px;border-radius:9px;background:var(--s2);color:var(--fg2);display:grid;place-items:center;flex:none}
.ha-ri svg{width:17px;height:17px}
.ha-ri.on{background:var(--hc);color:#fff}
.ha-det .row .d{margin:0}
.ha-danger .t,.ha-danger .ha-ri{color:#e5604a}
.ha-foot{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ha-foot .btn{background:var(--hc);font-size:15px;padding:0 12px}
.ha-foot .btn.sec2{background:var(--s2);color:var(--fg)}
.ha-foot .btn.ha-hecho{box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.ha-foot .btn.ha-minon{background:color-mix(in srgb,var(--hc) 22%,var(--s2));color:var(--fg)}
.ha-foot .btn svg{width:18px;height:18px}

/* ---------- hoja crear / editar */
.ha-prev{display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--r);
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--hc) 20%,transparent),transparent 62%),var(--s2)}
.ha-prev b{display:block;font-size:20px;font-weight:800;letter-spacing:-.01em}
.ha-prev span:not(.ha-ico){font-size:13px;color:var(--fg2);font-weight:700}
.ha-sug button{font-size:13.5px}
.ha-emo{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.ha-emo button{aspect-ratio:1;border-radius:12px;background:var(--s2);font-size:21px;line-height:1;display:grid;place-items:center;border:2px solid transparent;transition:transform .1s}
.ha-emo button:active{transform:scale(.9)}
.ha-emo button[aria-pressed=true]{border-color:var(--fg);background:var(--s3)}
@media (min-width:600px){ .ha-emo{grid-template-columns:repeat(12,1fr)} }
.ha-cols{display:flex;flex-wrap:wrap;gap:8px}
.ha-cols button{width:34px;height:34px;border-radius:50%;background:var(--hc);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 0 var(--hc);transition:box-shadow .15s}
.ha-cols button svg{width:18px;height:18px}
.ha-cols button[aria-pressed=true]{box-shadow:0 0 0 3px var(--sheet),0 0 0 5px var(--hc)}
.ha-chsm{margin-top:8px}
.ha-chsm button{padding:6px 11px;font-size:12.5px}
.ha-time{width:auto;min-width:140px}

@media (max-width:380px){
  .ha-hero{gap:14px;padding:16px}
  .ha-trio b{font-size:21px}
  .ha-k{--k:34px}
}
@media (prefers-reduced-motion:reduce){ .ha-pop,.ha-pop::before{animation:none!important} }
@media (min-width:900px){
  .ha-hero{grid-template-columns:auto minmax(0,1fr) 250px;gap:20px 28px;padding:24px 26px}
  .ha-hero-r{max-width:460px}
  .ha-trio{grid-column:auto;grid-template-columns:1fr;border-top:0;border-left:1px solid var(--line);padding:0 0 0 22px;gap:14px;align-self:stretch;align-content:center}
  .ha-trio>div+div{border-left:0;padding-left:4px;border-top:1px solid var(--line);padding-top:12px}
}
.ha-heat.tres{max-width:460px;margin:0 auto;width:100%}
@media (max-width:520px){.ha-alerta-r .pill{padding:0 10px;font-size:12.5px}.ha-alerta-r{gap:8px}}
.ha-alerta-ic.rb{width:46px!important;height:46px!important;border-radius:50%!important}