/* Controles de medición de objetivos (portal y vista previa del configurador).
   Fuente única: public/shared/. Usa los tokens de tokens.css (dirección A). */
.om-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.om-ico { flex: none; }
.om-q { font-size: 15px; font-weight: 700; color: var(--t-ink-2); }
.om-meta { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--t-muted); font-size: 15px; font-weight: 600; }
.om-meta.center { justify-content: center; }
.om-stack { display: flex; flex-direction: column; gap: 10px; }
.om-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.om-link { align-self: center; min-height: 44px; border: 0; background: none; color: var(--t-action); font: 700 15px var(--t-font); cursor: pointer; padding: 0 8px; }

.om-opt, .om-range, .om-chip, .om-tab, .om-big, .om-step, .om-clock { font-family: var(--t-font); -webkit-tap-highlight-color: transparent; transition: background-color .15s, color .15s, transform .1s; }
.om-opt:active, .om-range:active, .om-chip:active, .om-big:active, .om-step:active { transform: scale(.97); }
button[disabled].om-opt, button[disabled].om-range, button[disabled].om-chip, button[disabled].om-tab,
button[disabled].om-big, button[disabled].om-step, button[disabled].om-clock { opacity: .5; cursor: default; transform: none; }

/* Nivel de apoyo */
.om-opt { display: flex; align-items: center; gap: 16px; min-height: 80px; padding: 10px 20px; border: 0; border-radius: 20px; background: var(--t-surface); color: var(--t-ink); text-align: left; cursor: pointer; box-shadow: var(--t-shadow-1); width: 100%; }
.om-opt[aria-checked="true"] { background: var(--t-action); color: var(--t-on-action); }
.om-pie { flex: none; }
.om-opt-t { display: flex; flex-direction: column; gap: 2px; }
.om-opt-t b { font-size: 19px; font-weight: 700; }
.om-opt-t small { font-size: 14px; font-weight: 600; opacity: .85; }

/* Conteo */
.om-count { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 8px 0; }
.om-count .om-meta { align-self: flex-start; }
.om-num { margin: 0; font-family: var(--t-font-display); font-weight: 700; font-size: 136px; line-height: 1; color: var(--t-ink); font-variant-numeric: tabular-nums; }
.om-num.over { color: var(--t-warn); }
.om-dots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 280px; }
.om-dot { width: 12px; height: 12px; border-radius: 6px; background: var(--t-line); }
.om-dot.on { background: var(--t-action); }
.om-dot.over { background: var(--t-warn); }
.om-steps { display: flex; align-items: center; gap: 36px; }
.om-step { display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; cursor: pointer; }
.om-step.minus { width: 80px; height: 80px; background: var(--t-surface-2); color: var(--t-ink); }
.om-step.plus { width: 112px; height: 112px; background: var(--t-action); color: var(--t-on-action); box-shadow: 0 12px 32px rgba(15, 118, 110, .25); }

/* Duración */
.om-timer { position: relative; width: 250px; height: 250px; align-self: center; }
.om-ring { position: absolute; inset: 0; }
.om-ring-bg { stroke: var(--t-line); }
.om-ring-fg { stroke: var(--t-action); }
.om-clock { position: absolute; inset: 26px; border: 0; border-radius: 50%; background: var(--t-action-tint); color: var(--t-action); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
.om-clock.running { background: var(--t-ink); color: var(--t-on-action); }
.om-clock-t { font-family: var(--t-font-display); font-weight: 700; font-size: 56px; line-height: 1; font-variant-numeric: tabular-nums; }
.om-ranges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.om-range { height: 72px; border: 0; border-radius: 18px; background: var(--t-surface); color: var(--t-ink); font: 700 20px var(--t-font-display); cursor: pointer; box-shadow: var(--t-shadow-1); }
.om-range[aria-checked="true"], .om-chip[aria-checked="true"] { background: var(--t-action); color: var(--t-on-action); }
.om-ends { display: flex; flex-direction: column; gap: 10px; }
.om-chip { min-height: 48px; padding: 0 16px; border: 0; border-radius: 24px; background: var(--t-surface); color: var(--t-ink); font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: var(--t-shadow-1); }

/* Intensidad */
.om-tabs { display: flex; gap: 6px; background: var(--t-surface-2); border-radius: 16px; padding: 4px; }
.om-tab { flex: 1; min-width: 0; min-height: 52px; border: 0; border-radius: 12px; background: transparent; color: var(--t-ink); font-size: 13px; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.om-tab[aria-checked="true"] { background: var(--t-surface); box-shadow: var(--t-shadow-1); }
.om-tabdot { width: 6px; height: 6px; border-radius: 3px; background: transparent; }
.om-tabdot.on { background: var(--t-action); }
/* Escala calma y progresiva: teal → salvia → ámbar → terracota → granate, apagada y más oscura
   con cada nivel (se distingue también por luminosidad). El número va en tinta sobre el círculo
   (AA). La opción elegida lleva un borde grueso de su color y un check en tinta. */
.om-i1 { --om-c: #7FB5AE; } .om-i2 { --om-c: #A9C29A; } .om-i3 { --om-c: #E2BE78; } .om-i4 { --om-c: #D99A7E; } .om-i5 { --om-c: #C2868D; }
.om-int { min-height: 72px; border: 3px solid transparent; }
.om-int[aria-checked="true"] { background: var(--t-surface); color: var(--t-ink); border-color: var(--om-c); }
.om-lvl { flex: none; width: 40px; height: 40px; border-radius: 20px; background: var(--om-c); color: var(--t-ink); display: flex; align-items: center; justify-content: center; font: 700 19px var(--t-font-display); box-sizing: border-box; }
.om-int .om-opt-t { flex: 1; }
.om-check { color: var(--t-ink); }

/* Hecho / no hecho */
.om-week { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.om-week li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--t-muted); }
.om-wd { width: 28px; height: 28px; border-radius: 14px; border: 2px dashed var(--t-line-strong); box-sizing: border-box; }
.om-wd.s-done { background: var(--t-action); border: 0; }
.om-wd.s-not_done { background: var(--t-line-strong); border: 0; }
.om-wd.s-none { border-style: solid; }
.om-wd.s-today { border-color: var(--t-action); }
.om-yesno { display: flex; flex-direction: column; gap: 12px; min-height: 340px; }
.om-big { flex: 1; min-height: 120px; border: 0; border-radius: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 19px; font-weight: 800; cursor: pointer; background: var(--t-surface); box-shadow: var(--t-shadow-1); }
.om-big.yes { flex: 1.3; color: var(--t-action); }
.om-big.no { color: var(--t-ink-2); }
.om-big.yes[aria-checked="true"] { background: var(--t-action); color: var(--t-on-action); }
.om-big.no[aria-checked="true"] { background: var(--t-ink); color: var(--t-on-action); }

@media (prefers-reduced-motion: reduce) {
  .om-opt, .om-range, .om-chip, .om-tab, .om-big, .om-step, .om-clock { transition: none; }
  .om-opt:active, .om-range:active, .om-chip:active, .om-big:active, .om-step:active { transform: none; }
}