/* Define Tu Cuerpo, the app (daniel/SPEC.md section 6). Every class starts with "dc-", every token "--dc-", everything
   is scoped to .dc-root except the icon (.dc-icon*), which the page may draw. The host declares the fonts (daniel/
   fonts.css: Barlow Condensed 600 / 700 / 800, Inter) and sets --dc-w / --dc-h on the mount; app.js writes --dc-spIcon.
   His world: the gym at night, chalk text, one orange accent. Clean and light screens: 20 px side margins, an 8 px
   grid, one title, one big number, one primary button. No text under 13 px.
   Motion: transform, opacity and stroke-dashoffset only. */

/* ------------------------------------------------------------------ the icon (works inside and outside the app) */
.dc-icon {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  width: var(--t, 56px); height: var(--t, 56px); overflow: hidden; border-radius: calc(var(--t, 56px) * .2237);
  background: radial-gradient(120% 110% at 22% 0%, #2A2F34 0%, #171A1D 46%, #0F1113 78%);
  box-shadow: inset 0 0 0 max(.5px, calc(var(--t, 56px) * .008)) rgba(242, 239, 233, .1);
}
.dc-icon .dc-icon__bm { width: calc(var(--t, 56px) * .42); height: calc(var(--t, 56px) * .42); margin-top: calc(var(--t, 56px) * -.04); overflow: visible; }
.dc-icon__bm path { fill: #F18012; stroke: #F18012; stroke-width: 2.4; stroke-linejoin: round; }
.dc-icon__t { margin-top: calc(var(--t, 56px) * .05); font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 800; font-size: calc(var(--t, 56px) * .17); line-height: 1; letter-spacing: .06em; color: #F2EFE9; font-synthesis: none; }
.dc-icon--sm .dc-icon__t { display: none; }
.dc-icon.dc-icon--sm .dc-icon__bm { width: calc(var(--t, 56px) * .5); height: calc(var(--t, 56px) * .5); margin-top: 0; }

/* ------------------------------------------------------------------ root */
.dc-root {
  --dc-night: #0F1113; --dc-slate: #181B1E; --dc-slate2: #202428; --dc-iron: #2A2F34; --dc-chalk: #F2EFE9; --dc-mute: #A8A49C;
  --dc-veil: rgba(15, 17, 19, .72); --dc-orange: #F18012; --dc-orange-ink: #FF9A3C; --dc-orange-soft: rgba(241, 128, 18, .14);
  --dc-ios: cubic-bezier(.32, .72, 0, 1); --dc-out: cubic-bezier(.22, 1, .36, 1);
  --dc-display: "Barlow Condensed", "Arial Narrow", -apple-system, "Segoe UI", sans-serif;
  --dc-sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --dc-hl: 1px;
  /* the vertical rhythm (852; .dc-short below for 780) */
  --dc-top: 64px; --dc-tab: 83px; --dc-ctaB: 99px; --dc-freeB: 48px;
  --dc-ringD: 216px; --dc-ringT: 128px;
  --dc-rtHd: 208px; --dc-rowH: 52px; --dc-thumb: 40px;
  --dc-exMedia: 440px; --dc-dsD: 240px; --dc-dsM: 72px; --dc-tileH: 120px; --dc-hcMark: 216px;
  position: relative; display: block; overflow: hidden; overflow: clip;
  width: var(--dc-w, 393px); height: var(--dc-h, 852px);
  background: var(--dc-night); color: var(--dc-chalk);
  font: 500 15px/1.35 var(--dc-sans); letter-spacing: 0; text-align: left;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; font-kerning: normal;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  touch-action: pan-y; isolation: isolate; contain: layout paint style;
}
.dc-root.dc-short { --dc-ringD: 192px; --dc-ringT: 120px; --dc-rtHd: 160px; --dc-rowH: 48px; --dc-thumb: 36px; --dc-exMedia: 380px; --dc-dsD: 208px; --dc-dsM: 48px; --dc-tileH: 104px; --dc-hcMark: 168px; }
@media (min-resolution: 2dppx) { .dc-root { --dc-hl: .5px; } }
.dc-root :where(*), .dc-root :where(*)::before, .dc-root :where(*)::after { box-sizing: border-box; touch-action: pan-y; }
.dc-root :where(button) { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; letter-spacing: inherit; -webkit-tap-highlight-color: transparent; }
.dc-root :where(h2, h3, h4, p, ul, ol, li) { margin: 0; padding: 0; font: inherit; list-style: none; }
.dc-root :where(img, video, svg) { display: block; max-width: none; }
.dc-root :where(img) { -webkit-user-drag: none; }
.dc-root :where(b, strong) { font-weight: inherit; }
.dc-root :where(i, em) { font-style: normal; }
.dc-story { pointer-events: none; }
.dc-desk.dc-live :where(button, [data-act]) { cursor: pointer; }
.dc-root :focus { outline: none; }
.dc-root :focus-visible { outline: 2px solid var(--dc-orange); outline-offset: 3px; border-radius: 12px; }
.dc-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ glass, layers, chrome */
.dc-glass { position: absolute; inset: 0; overflow: hidden; background: var(--dc-night); }
.dc-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--dc-night); contain: layout style size; }
.dc-layer:not(.is-on):not(.is-leaving) { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.dc-layer.is-moving { box-shadow: -14px 0 38px -10px rgba(0, 0, 0, .6); }
.dc-l-start { z-index: 2; } .dc-l-ejercicio, .dc-l-descanso { z-index: 3; } .dc-l-hecha { z-index: 4; } .dc-l-splash { z-index: 9; }
.dc-status { position: absolute; left: 0; right: 0; top: 0; height: 47px; z-index: 20; pointer-events: none; color: var(--dc-chalk); }
.dc-status__t { position: absolute; left: 0; width: 132px; top: 15px; text-align: center; font: 600 17px/1 var(--dc-sans); letter-spacing: -.012em; font-variant-numeric: tabular-nums; }
.dc-status__r { position: absolute; right: 26px; top: 17px; display: flex; align-items: center; gap: 6px; }
.dc-homeind { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: rgba(242, 239, 233, .9); z-index: 20; pointer-events: none; }
.dc-full .dc-status, .dc-full .dc-homeind { display: none; }
.dc-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--dc-tab); z-index: 5; display: flex; padding: 0 8px 34px; background: rgb(18, 20, 23); box-shadow: inset 0 var(--dc-hl) 0 var(--dc-iron); }
.dc-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding-top: 6px; color: #77736C; font: 500 13px/1.1 var(--dc-sans); letter-spacing: 0; }
.dc-tab svg { width: 26px; height: 26px; }
.dc-tab.is-on { color: var(--dc-orange); }
.dc-touch { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; z-index: 21; pointer-events: none; opacity: 0; background: rgba(242, 239, 233, .22); box-shadow: 0 0 0 1.5px rgba(242, 239, 233, .9), 0 6px 18px rgba(0, 0, 0, .4); }
.dc-ripple { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; z-index: 21; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1.5px rgba(242, 239, 233, .7); }

/* ------------------------------------------------------------------ shared parts */
.dc-scr { position: absolute; inset: 0; padding: var(--dc-top) 20px 0; }
.dc-ah { font: 800 30px/1 var(--dc-display); letter-spacing: 0; color: var(--dc-chalk); }
.dc-big { font: 800 44px/1 var(--dc-display); letter-spacing: -.005em; color: var(--dc-chalk); }
.dc-big__m { color: var(--dc-mute); }
.dc-body { font: 500 15px/1.35 var(--dc-sans); color: var(--dc-chalk); }
.dc-cue { font: 500 14px/1.35 var(--dc-sans); color: var(--dc-mute); }
.dc-ov { display: block; font: 700 14px/1.2 var(--dc-display); letter-spacing: .08em; text-transform: uppercase; color: var(--dc-mute); }
.dc-card { position: relative; background: var(--dc-slate); border-radius: 18px; box-shadow: inset 0 0 0 var(--dc-hl) rgba(242, 239, 233, .06); }
.dc-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dc-av { position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; background: var(--dc-iron); box-shadow: 0 0 0 2px var(--dc-night), 0 0 0 3.5px var(--dc-orange); }
.dc-vs { position: relative; display: block; overflow: hidden; background: var(--dc-slate); }
.dc-vs__p, .dc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dc-video { opacity: 0; transition: opacity .2s linear; pointer-events: none; }
.dc-vs.is-playing .dc-video { opacity: 1; }
.dc-src { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/16px var(--dc-sans); color: var(--dc-mute); white-space: nowrap; }
.dc-src__ic { width: 13px; height: 13px; flex: none; color: var(--dc-orange); }
.dc-draft { display: inline-flex; align-items: center; height: 18px; padding: 1px 6px 0; border-radius: 5px; box-shadow: inset 0 0 0 1px #6F6B64; font: 700 13px/1 var(--dc-display); letter-spacing: .08em; color: var(--dc-mute); white-space: nowrap; vertical-align: 1px; }
.dc-calc { display: inline-block; font: 500 13px/1 var(--dc-sans); color: #827E77; white-space: nowrap; }
.dc-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--dc-slate); box-shadow: inset 0 0 0 var(--dc-hl) var(--dc-iron); font: 600 13px/1 var(--dc-sans); color: var(--dc-chalk); white-space: nowrap; }
.dc-chip--o { background: var(--dc-orange-soft); box-shadow: none; color: var(--dc-orange-ink); }
.dc-chip--line { background: transparent; box-shadow: inset 0 0 0 1.5px var(--dc-orange); color: var(--dc-orange-ink); }
.dc-ic-check { width: 14px; height: 14px; }
.dc-ic-chev { width: 16px; height: 16px; flex: none; color: #6F6B64; }
.dc-bm { display: block; width: 100%; height: 100%; overflow: visible; }
.dc-bm path { fill: var(--dc-orange); stroke: var(--dc-orange); stroke-width: 2.2; stroke-linejoin: round; }
.dc-brand { display: flex; align-items: center; gap: 10px; height: 28px; font: 800 16px/1 var(--dc-display); letter-spacing: .06em; }
/* the pill: orange is the action (night text for contrast), slate is waiting */
.dc-pill { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; border-radius: 28px; background: var(--dc-orange); color: var(--dc-night); font: 600 17px/1 var(--dc-sans); letter-spacing: -.005em; box-shadow: 0 16px 30px -18px rgba(241, 128, 18, .8); transition: transform .16s var(--dc-out), background-color .22s linear, color .22s linear, box-shadow .22s linear; }
.dc-pill svg { width: 18px; height: 18px; flex: none; }
.dc-pill.is-press, .dc-live .dc-pill:active { transform: scale(.97); }
.dc-pill.is-off { background: var(--dc-slate2); color: var(--dc-mute); box-shadow: none; }
.dc-story .dc-pill { transition: none; }
.dc-cta { position: absolute; left: 20px; right: 20px; bottom: var(--dc-ctaB); }
.dc-cta--free { bottom: var(--dc-freeB); }
.dc-ib { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--dc-chalk); background: rgba(15, 17, 19, .56); box-shadow: inset 0 0 0 var(--dc-hl) rgba(242, 239, 233, .14); }
.dc-ib::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
/* timer rings */
.dc-tm { display: block; width: 100%; height: 100%; overflow: visible; }
.dc-tm__tr { fill: none; stroke: var(--dc-iron); }
.dc-tm__a { fill: none; stroke: var(--dc-orange); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }

/* ------------------------------------------------------------------ splash */
.dc-sp { position: absolute; inset: 0; }
.dc-sp__light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 46% at 50% 0%, rgba(242, 239, 233, .07) 0%, rgba(242, 239, 233, 0) 70%), radial-gradient(60% 30% at 50% 44%, rgba(241, 128, 18, .12) 0%, rgba(241, 128, 18, 0) 70%); }
.dc-sp__icon { position: absolute; left: 50%; top: var(--dc-spIcon, 280px); width: 112px; height: 112px; margin-left: -56px; }
.dc-sp__icon .dc-icon { box-shadow: inset 0 0 0 1px rgba(242, 239, 233, .1), 0 24px 44px -20px rgba(241, 128, 18, .45); }
.dc-sp__wm { position: absolute; left: 20px; right: 20px; top: calc(var(--dc-spIcon, 280px) + 144px); height: 44px; overflow: hidden; text-align: center; }
.dc-sp__wf { display: inline-block; font: 800 38px/44px var(--dc-display); letter-spacing: .04em; color: var(--dc-chalk); }
.dc-sp__by { position: absolute; left: 20px; right: 20px; top: calc(var(--dc-spIcon, 280px) + 200px); text-align: center; font: 500 15px/20px var(--dc-sans); color: var(--dc-mute); }
.dc-sp__dots { position: absolute; left: 50%; bottom: 120px; display: flex; gap: 12px; width: 108px; margin-left: -54px; }
.dc-sp__dots > i { position: relative; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--dc-iron); }
.dc-sp__dots > i > i { position: absolute; inset: 0; border-radius: 50%; background: var(--dc-orange); transform: scale(0); }

/* ------------------------------------------------------------------ start */
.dc-st__t { margin-top: 24px; }
.dc-st__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }
.dc-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: var(--dc-tileH); padding: 16px; border-radius: 18px; background: var(--dc-slate); box-shadow: inset 0 0 0 var(--dc-hl) rgba(242, 239, 233, .06); color: var(--dc-chalk); transition: transform .16s var(--dc-out); }
.dc-tile__ring { position: absolute; inset: 0; border-radius: 18px; box-shadow: inset 0 0 0 2px var(--dc-orange); background: var(--dc-orange-soft); opacity: 0; }
.dc-tile__ic { position: relative; display: block; width: 28px; height: 28px; color: var(--dc-mute); }
.dc-tile__ic svg { width: 28px; height: 28px; }
.dc-tile.is-on .dc-tile__ic { color: var(--dc-orange); }
.dc-tile__l { position: relative; font: 600 15px/1.2 var(--dc-sans); }
.dc-tile__ck { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--dc-orange); color: var(--dc-night); opacity: 0; }
.dc-tile.is-press, .dc-live .dc-tile:active { transform: scale(.97); }
.dc-st__q { margin-top: 32px; }
.dc-seg { position: relative; display: flex; height: 48px; margin-top: 16px; padding: 4px; border-radius: 24px; background: var(--dc-slate); box-shadow: inset 0 0 0 var(--dc-hl) rgba(242, 239, 233, .06); }
.dc-seg__k { position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc(50% - 4px); border-radius: 20px; background: var(--dc-orange); opacity: 0; }
.dc-seg__b { position: relative; flex: 1; display: grid; place-items: center; border-radius: 20px; font: 600 15px/1 var(--dc-sans); color: var(--dc-mute); transition: color .2s linear; }
.dc-seg__b.is-on { color: var(--dc-night); }
.dc-story .dc-seg__b { transition: none; }
.dc-st__src { margin-top: 12px; }

/* ------------------------------------------------------------------ hoy */
.dc-hy__top { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.dc-hy__ring { position: absolute; left: 50%; top: var(--dc-ringT); width: var(--dc-ringD); height: var(--dc-ringD); margin-left: calc(var(--dc-ringD) / -2); }
.dc-dr { display: block; width: 100%; height: 100%; }
.dc-dr__s { fill: none; stroke: var(--dc-iron); stroke-width: 10; stroke-linecap: butt; }
.dc-dr__s--d1 { stroke: var(--dc-orange); }
.dc-hy__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dc-hy__c .dc-big { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dc-hy__c .dc-big__m { font: 600 15px/1 var(--dc-sans); }
.dc-hy__chips { position: absolute; left: 20px; right: 20px; top: calc(var(--dc-ringT) + var(--dc-ringD) + 24px); display: flex; justify-content: center; gap: 8px; }
.dc-hy__src { position: absolute; left: 20px; right: 20px; top: calc(var(--dc-ringT) + var(--dc-ringD) + 64px); text-align: center; }
.dc-today { position: absolute; left: 20px; right: 20px; top: calc(var(--dc-ringT) + var(--dc-ringD) + 104px); display: flex; align-items: center; gap: 16px; padding: 16px; }
.dc-today__th { flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--dc-iron); }
.dc-today__tx { flex: 1; min-width: 0; display: block; }
.dc-today__h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.dc-today__h b { font: 600 15px/20px var(--dc-sans); color: var(--dc-chalk); white-space: nowrap; }
.dc-today__dr { display: inline; }
.dc-today__tx .dc-draft { margin-left: 6px; }

/* ------------------------------------------------------------------ rutina */
.dc-rt { position: absolute; inset: 0; }
.dc-rt__hd { position: absolute; left: 0; right: 0; top: 0; height: var(--dc-rtHd); }
.dc-rt__vs { position: absolute; inset: 0; }
.dc-rt__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(15, 17, 19, .55) 0%, rgba(15, 17, 19, 0) 34%, rgba(15, 17, 19, 0) 62%, var(--dc-night) 100%); }
.dc-rt__tr { position: absolute; left: 20px; right: 20px; top: calc(var(--dc-rtHd) + 16px); display: flex; align-items: center; justify-content: space-between; height: 30px; }
.dc-rt__bm { flex: none; width: 24px; height: 28px; }
.dc-rt__l { position: absolute; left: 20px; right: 20px; top: calc(var(--dc-rtHd) + 54px); }
.dc-rt__src { position: absolute; left: 20px; top: calc(var(--dc-rtHd) + 80px); }
.dc-trio { position: absolute; left: 20px; right: 20px; top: calc(var(--dc-rtHd) + 112px); height: 64px; display: flex; align-items: center; }
.dc-trio__i { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 40px; text-align: center; }
.dc-trio__i + span + .dc-trio__i { box-shadow: inset var(--dc-hl) 0 0 var(--dc-iron); }
.dc-trio__i b { font: 800 24px/1 var(--dc-display); color: var(--dc-chalk); }
.dc-trio__i span { font: 500 13px/1 var(--dc-sans); color: var(--dc-mute); }
.dc-rows { position: absolute; left: 20px; right: 20px; top: calc(var(--dc-rtHd) + 192px); }
.dc-row { display: flex; align-items: center; gap: 12px; height: var(--dc-rowH); box-shadow: inset 0 calc(-1 * var(--dc-hl)) 0 var(--dc-iron); }
.dc-row:last-child { box-shadow: none; }
.dc-row__th { flex: none; width: var(--dc-thumb); height: var(--dc-thumb); border-radius: 10px; overflow: hidden; background: var(--dc-iron); }
.dc-row__n { flex: none; width: 14px; font: 800 17px/1 var(--dc-display); color: var(--dc-orange); text-align: center; }
.dc-row__t { flex: 1; min-width: 0; font: 700 17px/1.1 var(--dc-display); letter-spacing: .03em; text-transform: uppercase; color: var(--dc-chalk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ ejercicio */
.dc-ex { position: absolute; inset: 0; }
.dc-ex__media { position: absolute; left: 0; right: 0; top: 0; height: var(--dc-exMedia); }
.dc-ex__vs { position: absolute; inset: 0; }
.dc-ex__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(15, 17, 19, .5) 0%, rgba(15, 17, 19, 0) 22%, rgba(15, 17, 19, 0) 70%, var(--dc-night) 100%); }
.dc-ex__back { position: absolute; left: 20px; top: 55px; z-index: 2; }
.dc-rest { position: absolute; left: 50%; top: 50%; width: 136px; height: 136px; margin: -68px 0 0 -68px; padding: 8px; border-radius: 50%; background: var(--dc-veil); opacity: 0; }
.dc-rest__t { position: absolute; inset: 0; display: grid; place-items: center; font: 800 34px/1 var(--dc-display); color: var(--dc-chalk); font-variant-numeric: tabular-nums; }
.dc-ex__t { position: absolute; left: 20px; right: 20px; top: calc(var(--dc-exMedia) + 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-ex__c { position: absolute; left: 20px; top: calc(var(--dc-exMedia) + 62px); }
.dc-cb { position: absolute; left: 20px; right: 20px; top: calc(var(--dc-exMedia) + 110px); display: flex; gap: 6px; height: 6px; }
.dc-cb__s { position: relative; flex: 1; border-radius: 3px; background: var(--dc-iron); overflow: hidden; }
.dc-cb__s.is-cur { box-shadow: inset 0 0 0 1.5px var(--dc-orange); }
.dc-cb__f { position: absolute; inset: 0; border-radius: 3px; background: var(--dc-orange); transform: scaleX(0); transform-origin: 0 50%; }
.dc-ex__reps { position: absolute; right: 20px; top: calc(var(--dc-exMedia) + 52px); display: flex; align-items: baseline; gap: 6px; }
.dc-ex__n { font: 800 44px/1 var(--dc-display); color: var(--dc-chalk); font-variant-numeric: tabular-nums; }
.dc-ex__reps span { font: 500 15px/1 var(--dc-sans); color: var(--dc-mute); }
.dc-ex__cue { position: absolute; left: 20px; right: 20px; top: calc(var(--dc-exMedia) + 140px); color: var(--dc-chalk); font-size: 15px; }
.dc-ex__src { position: absolute; left: 20px; top: calc(var(--dc-exMedia) + 168px); }
.dc-pulse { position: absolute; inset: 0; border-radius: 28px; pointer-events: none; box-shadow: 0 0 0 0 rgba(241, 128, 18, .55); opacity: 0; }
.dc-live .dc-pill.is-hint .dc-pulse { opacity: 1; animation: dc-pulse 1.6s var(--dc-out) infinite; }
.dc-osrm .dc-pill.is-hint .dc-pulse, .dc-rm .dc-pill.is-hint .dc-pulse { animation: none; opacity: 0; }
@keyframes dc-pulse { 0% { box-shadow: 0 0 0 0 rgba(241, 128, 18, .55); } 70% { box-shadow: 0 0 0 14px rgba(241, 128, 18, 0); } 100% { box-shadow: 0 0 0 0 rgba(241, 128, 18, 0); } }

/* ------------------------------------------------------------------ descanso */
.dc-ds { text-align: center; }
.dc-ds__ring { position: relative; width: var(--dc-dsD); height: var(--dc-dsD); margin: var(--dc-dsM) auto 0; }
.dc-ds__n { position: absolute; inset: 0; display: grid; place-items: center; font: 800 64px/1 var(--dc-display); color: var(--dc-chalk); font-variant-numeric: tabular-nums; }
.dc-ds__l { max-width: 300px; margin: 32px auto 0; color: var(--dc-chalk); font-size: 15px; text-wrap: balance; }
.dc-ds__src { margin-top: 8px; }
.dc-next { position: absolute; left: 20px; right: 20px; bottom: var(--dc-freeB); display: flex; align-items: center; gap: 12px; height: 72px; padding: 0 16px; text-align: left; }
.dc-next .dc-row__th { width: 44px; height: 44px; }
.dc-next__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dc-next__tx b { font: 600 15px/1.2 var(--dc-sans); color: var(--dc-orange-ink); }
.dc-next__tx span { font: 500 13px/1.2 var(--dc-sans); color: var(--dc-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ guardadas */
.dc-gu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 8px; margin-top: 24px; }
.dc-sv { position: relative; display: block; }
.dc-sv__im { display: block; height: calc((var(--dc-h, 852px) - 64px - 54px - 99px - 32px - 132px) / 3); border-radius: 14px; overflow: hidden; background: var(--dc-iron); }
.dc-sv__lb { display: flex; align-items: flex-start; gap: 8px; height: 44px; padding-top: 8px; }
.dc-sv__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dc-sv__tx b { font: 600 14px/18px var(--dc-sans); color: var(--dc-chalk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-sv__m { font: 500 13px/16px var(--dc-sans); color: var(--dc-mute); white-space: nowrap; }
.dc-sv__m.is-done { color: var(--dc-orange-ink); font-weight: 600; }
.dc-sv__bm { flex: none; width: 16px; height: 19px; margin-top: 1px; }

/* ------------------------------------------------------------------ hecha (the signature overlay) */
.dc-hc { position: absolute; inset: 0; text-align: center; }
.dc-hc__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 34% at 50% 34%, rgba(241, 128, 18, .16) 0%, rgba(241, 128, 18, 0) 72%); }
.dc-hc__x { position: absolute; right: 20px; top: 55px; }
.dc-hc__o { position: absolute; left: 72px; right: 72px; top: 64px; line-height: 40px; }
.dc-hc__mark { position: absolute; left: 50%; top: var(--dc-hcMark); width: 128px; height: 128px; margin-left: -64px; }
.dc-hc__disc { position: absolute; inset: 0; border-radius: 50%; background: var(--dc-orange); box-shadow: 0 24px 48px -20px rgba(241, 128, 18, .7); opacity: 0; }
.dc-hc__svg { position: absolute; left: 20px; top: 20px; width: 88px; height: 88px; overflow: visible; }
.dc-hc__pa, .dc-hc__pb { stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.dc-hc__pa { fill: var(--dc-orange); stroke: var(--dc-orange); stroke-width: 2.6; }
.dc-hc__pb { fill: none; stroke: var(--dc-night); stroke-width: 2.6; opacity: 0; }
.dc-hc__h { position: absolute; left: 20px; right: 20px; top: calc(var(--dc-hcMark) + 168px); }
.dc-hc__day { position: absolute; left: 20px; right: 20px; top: calc(var(--dc-hcMark) + 248px); }
.dc-hc__dl { display: block; font: 600 15px/20px var(--dc-sans); color: var(--dc-chalk); }
.dc-db { display: flex; gap: 3px; height: 8px; margin-top: 12px; }
.dc-db__s { position: relative; flex: 1; border-radius: 2px; background: var(--dc-iron); overflow: hidden; }
.dc-db__f { position: absolute; inset: 0; background: var(--dc-orange); transform: scaleX(0); transform-origin: 0 50%; }
.dc-hc__tag { position: absolute; left: 20px; right: 20px; top: calc(var(--dc-hcMark) + 328px); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dc-hc__tag .dc-chip { height: 36px; padding: 0 16px; border-radius: 18px; font-size: 15px; }