/* HyperUX · widgets in Seguimiento (PLAN_NOCHE_2026-10-07 §3 paso 4): Hark's left column, with Spore's stat card
   (spore/concept/pages.css:759-768: 13.5 px title with a dotted underline, 24 px tabular number, 56 px sparkline,
   honest empty states) and its 264 px popover (pages.css:865). GSAP animates transforms: no CSS transform transitions. */
.wg-col{position:absolute;left:32px;top:18px;bottom:24px;width:320px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;overflow-x:hidden;padding:2px 2px 24px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent)}
.wg-col::-webkit-scrollbar{display:none}
.wg{position:relative;flex:none;border-radius:22px;padding:14px 16px 16px;min-width:0}
.wg-h{display:flex;align-items:center;gap:8px;min-height:22px}
.wg-h svg.ic{width:16px;height:16px;flex:none;color:var(--ink-2)}
.wg-t{flex:1;min-width:0;font-size:13.5px;line-height:1.35;font-weight:500;text-decoration:underline dotted var(--line-2);text-underline-offset:4px}
.wg-ex{flex:none;font-size:11px;color:var(--ink-3);border:1px solid var(--line-2);border-radius:999px;padding:1px 7px}
.wg-x{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3);opacity:0;transition:opacity .2s,background .2s,color .2s}
.wg:hover .wg-x,.wg:focus-within .wg-x{opacity:1}
.wg-x:hover{background:var(--glass-2);color:var(--ink)}
@media (hover:none){.wg-x{opacity:1}}
.wg-big{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.wg-big b{font-size:24px;line-height:30px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wg-big small{font-size:12px;color:var(--ink-2)}
.wg-big small.up{color:var(--up)}
.wg-sp{display:block;width:100%;height:56px;margin-top:8px;overflow:visible}
.wg-sp .l{fill:none;stroke:var(--up);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.wg-sp .a{fill:var(--up);opacity:.12}
.wg-empty{margin-top:10px;font-size:13px;line-height:1.45;color:var(--ink-2)}
.wg-empty button,.wg-link{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.wg-bars{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.wg-bars div{display:grid;grid-template-columns:78px 1fr 40px;gap:10px;align-items:center;font-size:12.5px}
.wg-bars span:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.wg-bar{height:6px;border-radius:6px;background:var(--glass-2);overflow:hidden}
.wg-bar i{display:block;height:100%;border-radius:6px;background:var(--up);transform-origin:0 50%}
/* weather (Hark: three tiles, the source line and a full-width button) */
.wg-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
.wg-tile{border-radius:14px;padding:9px 10px;background:var(--glass-2);min-width:0}
.wg-tile span{display:block;font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.wg-tile b{display:block;font-size:22px;line-height:28px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.wg-src{font-size:12px;color:var(--ink-3);margin-top:10px}
.wg-btn{display:flex;align-items:center;justify-content:center;width:100%;height:36px;margin-top:10px;border-radius:12px;font-size:13px;font-weight:500;background:var(--glass-2);color:var(--ink);transition:background .2s}
.wg-btn:hover{background:var(--bubble)}
/* uxy's to-dos */
.wg-todo{list-style:none;display:flex;flex-direction:column;margin-top:8px}
.wg-todo li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;padding:8px 0;font-size:13px;line-height:1.4}
.wg-todo li+li{border-top:1px solid var(--line)}
.wg-todo button.ck{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);display:grid;place-items:center;color:transparent;margin-top:1px}
.wg-todo li.done button.ck{background:var(--up);box-shadow:none;color:#0B1A12}
.wg-todo li.done span{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--line-2)}
.wg-todo small{display:block;font-size:11.5px;color:var(--ink-3)}
.wg-list{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.wg-list li{display:flex;justify-content:space-between;gap:10px}.wg-list li span:last-child{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
/* + Agregar un widget, and its popover */
.wg-add{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink)}
.wg-pop{position:fixed;z-index:13;width:264px;display:flex;flex-direction:column;padding:6px;border-radius:12px;border:1px solid var(--line);background:var(--glass);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);box-shadow:0 18px 40px -16px rgba(0,0,0,.5);visibility:hidden;opacity:0}
.wg-pop button{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;text-align:left;font-size:13px;line-height:17px;color:var(--ink);transition:background .15s}
.wg-pop button:hover,.wg-pop button:focus-visible{background:var(--glass-2);outline:0}
.wg-pop button>span{flex:1;min-width:0;display:flex;flex-direction:column}
.wg-pop b{font-weight:500}.wg-pop small{font-size:12px;color:var(--ink-2)}
.wg-pop .gi{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--glass-2);flex:none}
.wg-pop .gi svg{width:15px;height:15px;color:var(--ink-2)}
.wg-pop p{font-size:12.5px;color:var(--ink-2);padding:8px}
@media (max-width:900px){
  .wg-col{left:0;right:0;top:6px;bottom:auto;width:auto;flex-direction:row;align-items:flex-start;overflow-x:auto;overflow-y:hidden;padding:2px 16px 8px;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none}
  .wg,.wg-add{width:272px;scroll-snap-align:start}
  .wg-add{height:48px;align-self:center}
  #view-seg .chat{top:238px}
}
.wg-add svg{width:16px;height:16px;flex:none}
.wg-x svg{width:14px;height:14px}
.wg-todo .ck svg{width:12px;height:12px}
.wg-vis{height:6px;border-radius:999px;background:var(--glass-2);overflow:hidden;margin:2px 0 10px}.wg-vis i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#5B8CFF,#3DDC97)}

/* The servers that try the QA of 2026-10-16 (ext/g-widgets.js puts body.lm-try): the column beside the chat also for a
   client's person (an agency runs her page), on the computer; with «Hoy en tu negocio» first (widgets.js). And mkr's
   button with the localmkr «m» (marca/logo-bloques.js) */
@media (min-width:1181px){body.app-home.lm-member.lm-try:not(.lm-negocio) #stats{display:flex}}   /* never over the open system (a-shell.css) */
.c-mkr .c-mkr-m{font-size:19px}
/* the «m» never turns with the buttons' hover (index.html .c-btn:hover svg): only its own colour wink (logo-bloques.js);
   with mkr's menu open the button goes --pill-bg and the «m» takes its ink, so it is still seen (QA 2026-10-16) */
.c-btn.c-mkr svg,.c-btn.c-mkr:hover svg{transform:none;transition:none}
#uxyTasks.c-mkr[aria-expanded="true"]{color:var(--pill-ink)}