@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/saira-condensed-600.woff2") format("woff2");}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/saira-condensed-700.woff2") format("woff2");}
/* ============================================================
   TORMO MARINE — DESIGN SYSTEM (drop-in)
   Vanilla CSS. No build. Works alongside Pico/Tailwind.
   Scope: apply classes (.tm-*) to existing markup.
   Tokens live on :root so you can retheme in one place.
   ------------------------------------------------------------
   THEMES:  data-theme="dark" (default)  |  data-theme="day"
   DIRECTIONS (pick one, then delete the others):
            data-treat="a" Instrumento | "b" Hi-Vis | "c" Composite
   ============================================================ */

/* ---------- 1. FONTS -------------------------------------------------
   Swap the display @font-face src for your own .woff2 and you are done.
   Body uses the native system stack (fast, offline, robust).
   Mono is for codes / references / stock / quantities. */
:root {
  --tm-font-display: "Saira Condensed", "Oswald", system-ui, sans-serif;
  --tm-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --tm-font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;
}

/* ---------- 2. TOKENS — DARK (default) ------------------------------ */
:root,
[data-theme="dark"] {
  /* surfaces */
  --tm-bg:        #0c0f12;
  --tm-bg-grad:   #0e1216;
  --tm-surface:   #14181d;
  --tm-surface-2: #1b2026;
  --tm-surface-3: #232a31;
  --tm-line:      rgba(255,255,255,.08);
  --tm-line-2:    rgba(255,255,255,.15);

  /* ink */
  --tm-text:      #eef2f5;
  --tm-text-dim:  #9aa6b2;
  --tm-text-faint:#5d6a76;

  /* signal */
  --tm-signal:     #f5e617;
  --tm-signal-2:   #d9ca0e;
  --tm-signal-ink: #15170a;
  --tm-signal-soft: rgba(245,230,23,.14);
  --tm-signal-line: rgba(245,230,23,.45);

  /* marine info accent */
  --tm-info:      #2f9fe0;
  --tm-info-soft: rgba(47,159,224,.16);

  /* semáforo */
  --tm-ok:        #34c878;
  --tm-ok-soft:   rgba(52,200,120,.14);
  --tm-low:       #ff9d2e;
  --tm-low-soft:  rgba(255,157,46,.16);
  --tm-crit:      #ff4d52;
  --tm-crit-soft: rgba(255,77,82,.16);

  --tm-danger:    #ff4d52;

  /* shape */
  --tm-r-sm: 8px;
  --tm-r:    12px;
  --tm-r-lg: 16px;
  --tm-shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 24px -12px rgba(0,0,0,.7);
  --tm-shadow-lg: 0 12px 40px -16px rgba(0,0,0,.8);

  /* spacing scale (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;

  /* tap targets */
  --tm-tap: 56px;

  color-scheme: dark;
}

/* ---------- 2b. TOKENS — DAY (high-contrast sunlight) --------------- */
[data-theme="day"] {
  --tm-bg:        #eef1f4;
  --tm-bg-grad:   #e6eaee;
  --tm-surface:   #ffffff;
  --tm-surface-2: #ffffff;
  --tm-surface-3: #f0f3f6;
  --tm-line:      rgba(13,20,28,.12);
  --tm-line-2:    rgba(13,20,28,.22);

  --tm-text:      #10161c;
  --tm-text-dim:  #4a5763;
  --tm-text-faint:#7a8794;

  --tm-signal:     #f5e617;
  --tm-signal-2:   #c9bb00;
  --tm-signal-ink: #15170a;
  --tm-signal-soft: rgba(214,200,0,.20);
  --tm-signal-line: rgba(170,158,0,.55);

  --tm-info:      #0d6fb8;
  --tm-info-soft: rgba(13,111,184,.12);

  --tm-ok:        #128a4e;
  --tm-ok-soft:   rgba(18,138,78,.14);
  --tm-low:       #c46a00;
  --tm-low-soft:  rgba(196,106,0,.14);
  --tm-crit:      #cc1f24;
  --tm-crit-soft: rgba(204,31,36,.12);
  --tm-danger:    #cc1f24;

  --tm-shadow: 0 1px 2px rgba(13,20,28,.08), 0 8px 20px -14px rgba(13,20,28,.4);
  --tm-shadow-lg: 0 14px 40px -18px rgba(13,20,28,.5);
  color-scheme: light;
}

/* ============================================================
   3. APP SHELL
   ============================================================ */
.tm-app {
  font-family: var(--tm-font-body);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--tm-bg-grad), var(--tm-bg) 60%);
  color: var(--tm-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.tm-app *, .tm-app *::before, .tm-app *::after { box-sizing: border-box; }

.tm-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--s4) var(--s4) var(--s8);
}

/* ============================================================
   4. TYPE
   ============================================================ */
.tm-h1 { font-family: var(--tm-font-display); font-weight: 700; font-size: 30px; line-height: 1.02; letter-spacing: .2px; margin: 0; color: var(--tm-text); }
.tm-h2 { font-family: var(--tm-font-display); font-weight: 600; font-size: 22px; line-height: 1.08; margin: 0; }
.tm-overline {
  font-family: var(--tm-font-body);
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tm-text-faint); margin: 0;
}
.tm-mono { font-family: var(--tm-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tm-code { font-family: var(--tm-font-mono); font-weight: 600; font-size: 26px; letter-spacing: .02em; color: var(--tm-text); }
.tm-dim  { color: var(--tm-text-dim); }
.tm-faint{ color: var(--tm-text-faint); }

/* ============================================================
   5. TOOLBARS  (project bar + warehouse subbar)
   ============================================================ */
.tm-projbar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4);
  background: var(--tm-surface);
  border-bottom: 1px solid var(--tm-line);
  position: relative;
}
.tm-projbar::after { /* thin brand accent line */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background: linear-gradient(90deg, var(--tm-signal), transparent 55%);
  opacity: .9;
}
.tm-projbar .tm-ico { color: var(--tm-text-dim); flex: none; }
.tm-projbar__title { font-family: var(--tm-font-display); font-weight:600; font-size:18px; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tm-projbar__code  { font-family: var(--tm-font-mono); font-size: 12.5px; color: var(--tm-text-dim); font-weight:600; }

.tm-whbar {
  display:flex; align-items:center; gap: var(--s2);
  padding: var(--s2) var(--s4);
  background: var(--tm-surface-2);
  border-bottom: 1px solid var(--tm-line);
  font-size: 13px; color: var(--tm-text-dim);
}
.tm-whbar .tm-ico { width:18px; height:18px; color: var(--tm-text-dim); }
.tm-whbar strong { color: var(--tm-text); font-weight:600; }

/* generic top header (scanner / reception) */
.tm-header {
  display:flex; align-items:center; gap: var(--s3);
  padding: var(--s4); background: var(--tm-surface);
  border-bottom:1px solid var(--tm-line);
}
.tm-header__title { font-family: var(--tm-font-display); font-weight:600; font-size:19px; }
.tm-header .tm-ico { color: var(--tm-text); }

/* loading variant of bar */
.tm-loading-bar { color: var(--tm-text-faint); }
.tm-loading-bar .tm-projbar__title { color: var(--tm-text-faint); }

/* ============================================================
   6. BUTTONS
   ============================================================ */
.tm-btn {
  font-family: var(--tm-font-body);
  font-weight: 700; font-size: 16px;
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items:center; justify-content:center; gap: var(--s2);
  min-height: var(--tm-tap); padding: 0 var(--s5);
  width: 100%;
  border-radius: var(--tm-r);
  border: 1px solid transparent;
  cursor: pointer; user-select:none; -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, filter .15s ease, background .15s ease;
}
.tm-btn:active { transform: translateY(1px) scale(.995); }
.tm-btn .tm-ico { width:20px; height:20px; }

.tm-btn--primary {
  background: var(--tm-signal); color: var(--tm-signal-ink);
  border-color: var(--tm-signal-2);
  box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset, 0 8px 22px -12px var(--tm-signal-line);
}
.tm-btn--primary:hover { filter: brightness(1.04); }

.tm-btn--info { background: var(--tm-info); color:#fff; }

.tm-btn--secondary {
  background: transparent; color: var(--tm-text);
  border-color: var(--tm-line-2);
}
.tm-btn--secondary:hover { background: var(--tm-surface-2); }

.tm-btn--ghost { background: var(--tm-surface-2); color: var(--tm-text); border-color: var(--tm-line); }

.tm-btn--sm { min-height:44px; font-size:14px; width:auto; padding: 0 var(--s4); border-radius: var(--tm-r-sm); }
.tm-btn--danger { color: var(--tm-danger); background: var(--tm-crit-soft); border-color: transparent; }

/* ============================================================
   7. CARDS
   ============================================================ */
.tm-card {
  background: var(--tm-surface);
  border: 1px solid var(--tm-line);
  border-radius: var(--tm-r);
  box-shadow: var(--tm-shadow);
}
.tm-card--pad { padding: var(--s4); }

/* category card (grid) */
.tm-grid { display:grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.tm-cat {
  background: var(--tm-surface);
  border: 1px solid var(--tm-line);
  border-radius: var(--tm-r);
  min-height: 132px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--s3);
  padding: var(--s4); text-align:center;
  cursor:pointer; transition: border-color .15s, background .15s, transform .08s;
}
.tm-cat:active { transform: scale(.98); }
.tm-cat:hover { border-color: var(--tm-line-2); background: var(--tm-surface-2); }
.tm-cat__ico { color: var(--tm-text-dim); width:34px; height:34px; }
.tm-cat__label { font-weight:600; font-size:15px; line-height:1.15; }

/* product result card */
.tm-prod {
  display:flex; flex-direction:column; gap: 2px;
  padding: var(--s4);
  background: var(--tm-surface);
  border: 1px solid var(--tm-line);
  border-radius: var(--tm-r);
  cursor:pointer; transition: border-color .15s;
  position: relative;
}
.tm-prod:hover { border-color: var(--tm-signal-line); }
.tm-prod__code { font-family: var(--tm-font-mono); font-weight:600; font-size:18px; color: var(--tm-text); }
.tm-prod__name { font-size:14px; color: var(--tm-text-dim); }

/* ============================================================
   8. STOCK — SEMÁFORO ROWS
   ============================================================ */
.tm-stock { display:flex; flex-direction:column; gap: var(--s2); }
.tm-stock__row {
  display:flex; align-items:center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border:1px solid var(--tm-line);
  border-radius: var(--tm-r-sm);
  background: var(--tm-surface);
}
.tm-stock__row.is-active {
  border-color: var(--tm-signal-line);
  background: var(--tm-signal-soft);
}
.tm-stock__dot { width:10px; height:10px; border-radius:50%; flex:none; }
.tm-stock__dot--ok   { background: var(--tm-ok);   box-shadow: 0 0 0 3px var(--tm-ok-soft); }
.tm-stock__dot--low  { background: var(--tm-low);  box-shadow: 0 0 0 3px var(--tm-low-soft); }
.tm-stock__dot--crit { background: var(--tm-crit); box-shadow: 0 0 0 3px var(--tm-crit-soft); }
.tm-stock__name { flex:1; font-weight:600; font-size:16px; }
.tm-stock__qty  { font-family: var(--tm-font-mono); font-weight:600; font-size:17px; font-variant-numeric: tabular-nums; white-space:nowrap; flex:none; }
.tm-qty--ok   { color: var(--tm-ok); }
.tm-qty--low  { color: var(--tm-low); }
.tm-qty--crit { color: var(--tm-crit); }
.tm-qty--sig  { color: var(--tm-text); }

/* "Recogerás de" banner */
.tm-pickfrom {
  display:flex; align-items:center; justify-content:center; gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--tm-signal-soft);
  border: 1px solid var(--tm-signal-line);
  border-radius: var(--tm-r-sm);
  font-size: 14px; color: var(--tm-text-dim);
  white-space: nowrap;
}
.tm-pickfrom strong { color: var(--tm-text); }
.tm-pickfrom .tm-mono { color: var(--tm-text); font-weight:700; font-size:15px; }

/* ============================================================
   9. STEPPER (quantity)
   ============================================================ */
.tm-stepper { display:flex; align-items:center; justify-content:center; gap: var(--s5); }
.tm-stepper__btn {
  width: 64px; height: 64px; border-radius: 50%;
  appearance: none; -webkit-appearance: none;
  display:flex; align-items:center; justify-content:center;
  background: var(--tm-surface-3); border:1px solid var(--tm-line-2);
  color: var(--tm-text); cursor:pointer; font-size: 28px; line-height:1;
  -webkit-tap-highlight-color: transparent; transition: background .12s, transform .08s;
}
.tm-stepper__btn:active { transform: scale(.94); }
.tm-stepper__btn:hover { background: var(--tm-surface-3); }
.tm-stepper__btn--plus { background: var(--tm-signal); color: var(--tm-signal-ink); border-color: var(--tm-signal-2); }
.tm-stepper__val {
  font-family: var(--tm-font-mono); font-weight:700; font-size: 40px;
  min-width: 110px; text-align:center; font-variant-numeric: tabular-nums;
  border-bottom: 2px solid var(--tm-line-2); padding-bottom: var(--s1);
}
.tm-stepper__unit { font-family: var(--tm-font-mono); color: var(--tm-text-dim); font-size:16px; }

/* ============================================================
   10. BOTTOM NAV
   ============================================================ */
.tm-nav {
  display:flex; align-items:stretch;
  background: var(--tm-surface);
  border-top: 1px solid var(--tm-line);
  padding: var(--s1) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom, 0px));
}
.tm-nav__item {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 3px;
  min-height: 52px; padding: var(--s2) 0;
  color: var(--tm-text-faint); cursor:pointer; position:relative;
  background:none; border:none; appearance:none; -webkit-appearance:none; -webkit-tap-highlight-color: transparent;
}
.tm-nav__item .tm-ico { width:24px; height:24px; }
.tm-nav__label { font-size:10px; font-weight:600; letter-spacing:.02em; }
.tm-nav__item.is-active { color: var(--tm-text); }
.tm-nav__item.is-active::before {
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width: 26px; height:3px; border-radius: 0 0 3px 3px; background: var(--tm-signal);
}
.tm-badge {
  position:absolute; top: 2px; left: calc(50% + 6px);
  min-width:18px; height:18px; padding:0 5px;
  background: var(--tm-crit); color:#fff;
  border-radius: 9px; font-family: var(--tm-font-mono); font-weight:700; font-size:11px;
  display:flex; align-items:center; justify-content:center; line-height:1;
  box-shadow: 0 0 0 2px var(--tm-surface);
}

/* ============================================================
   11. LIST / HISTORY
   ============================================================ */
.tm-period {
  width:100%; min-height:52px; padding:0 var(--s4);
  appearance:none; -webkit-appearance:none;
  background: var(--tm-surface); color: var(--tm-text);
  border:1px solid var(--tm-line-2); border-radius: var(--tm-r);
  font-size:16px; font-weight:600; font-family: var(--tm-font-body);
  display:flex; align-items:center; justify-content:space-between;
}
.tm-summary {
  border:1px solid var(--tm-line); border-radius: var(--tm-r);
  background: linear-gradient(180deg, var(--tm-signal-soft), transparent);
  padding: var(--s5); text-align:center;
}
.tm-summary__num { font-family: var(--tm-font-mono); font-weight:700; font-size: 44px; color: var(--tm-text); }
.tm-summary__label { font-size:13px; color: var(--tm-text-dim); letter-spacing:.04em; }

.tm-move {
  display:flex; align-items:center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border:1px solid var(--tm-line); border-radius: var(--tm-r-sm);
  background: var(--tm-surface);
}
.tm-move__icon { width:38px; height:38px; border-radius: var(--tm-r-sm); display:flex; align-items:center; justify-content:center; flex:none; }
.tm-move__icon--out { background: var(--tm-crit-soft); color: var(--tm-crit); }
.tm-move__icon--in  { background: var(--tm-ok-soft); color: var(--tm-ok); }
.tm-move__body { flex:1; min-width:0; }
.tm-move__code { font-family: var(--tm-font-mono); font-weight:600; font-size:14px; }
.tm-move__meta { font-size:12px; color: var(--tm-text-faint); }
.tm-move__qty  { font-family: var(--tm-font-mono); font-weight:700; font-size:16px; }

/* ============================================================
   12. CHIPS / BADGES
   ============================================================ */
.tm-chip {
  display:inline-flex; align-items:center; gap: var(--s2);
  height:32px; padding: 0 var(--s3); white-space:nowrap;
  border-radius: var(--tm-r-sm); font-size:13px; font-weight:600;
  background: var(--tm-surface-2); border:1px solid var(--tm-line); color: var(--tm-text-dim);
}
.tm-chip--wh { background: var(--tm-signal-soft); border-color: var(--tm-signal-line); color: var(--tm-text); }
.tm-chip .tm-ico { width:16px; height:16px; }

/* ============================================================
   13. INPUTS / SEARCH / LOGIN
   ============================================================ */
.tm-field { display:flex; flex-direction:column; gap: var(--s2); }
.tm-label { font-size:13px; font-weight:700; letter-spacing:.04em; color: var(--tm-text-dim); text-transform:uppercase; }
.tm-input {
  width:100%; min-height:54px; padding: 0 var(--s4);
  background: var(--tm-surface-2); color: var(--tm-text);
  border:1px solid var(--tm-line-2); border-radius: var(--tm-r);
  font-size:16px; font-family: var(--tm-font-body);
  transition: border-color .15s, box-shadow .15s;
}
.tm-input::placeholder { color: var(--tm-text-faint); }
.tm-input:focus {
  outline:none; border-color: var(--tm-signal);
  box-shadow: 0 0 0 3px var(--tm-signal-soft);
}
.tm-search {
  display:flex; align-items:center; gap: var(--s2);
  background: var(--tm-surface-2); border:1px solid var(--tm-line-2);
  border-radius: var(--tm-r); padding: 0 var(--s3); min-height:52px;
}
.tm-search .tm-ico { color: var(--tm-text-faint); flex:none; }
.tm-search input { flex:1; background:none; border:none; color:var(--tm-text); font-size:16px; min-height:50px; }
.tm-search input:focus { outline:none; }
.tm-search input::placeholder { color: var(--tm-text-faint); }

/* ============================================================
   14. TOAST
   ============================================================ */
.tm-toast {
  display:flex; align-items:center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--tm-surface-3); border:1px solid var(--tm-line-2);
  border-left: 3px solid var(--tm-ok);
  border-radius: var(--tm-r-sm); box-shadow: var(--tm-shadow-lg);
  color: var(--tm-text); font-size:14px; font-weight:600;
}
.tm-toast .tm-ico { color: var(--tm-ok); flex:none; }
.tm-toast--err { border-left-color: var(--tm-crit); }
.tm-toast--err .tm-ico { color: var(--tm-crit); }

/* ============================================================
   15. EMPTY / LOADING
   ============================================================ */
.tm-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--s3); padding: var(--s10) var(--s4); text-align:center; }
.tm-empty__ico { width:64px; height:64px; border-radius: var(--tm-r); background: var(--tm-surface-2); border:1px solid var(--tm-line); display:flex; align-items:center; justify-content:center; color: var(--tm-text-faint); }
.tm-empty__title { font-family: var(--tm-font-display); font-weight:600; font-size:20px; }
.tm-empty__sub { font-size:14px; color: var(--tm-text-faint); }

.tm-skel { background: linear-gradient(90deg, var(--tm-surface) 0%, var(--tm-surface-2) 50%, var(--tm-surface) 100%); background-size: 200% 100%; animation: tm-shimmer 1.2s infinite; border-radius: var(--tm-r-sm); }
@keyframes tm-shimmer { to { background-position: -200% 0; } }

/* ============================================================
   16. ICON SIZING
   ============================================================ */
.tm-ico { width:22px; height:22px; stroke-width: 2; display:inline-flex; flex:none; }

/* ============================================================
   17. DIVIDERS / HELPERS
   ============================================================ */
.tm-rule { height:1px; background: var(--tm-line); border:none; margin: var(--s2) 0; }
.tm-stack > * + * { margin-top: var(--s4); }
.tm-stack-sm > * + * { margin-top: var(--s2); }

/* ============================================================
   18. SELECTION CARDS  (proyecto / almacén)
   ============================================================ */
.tm-select {
  display:flex; align-items:center; gap: var(--s4);
  padding: var(--s4);
  background: var(--tm-surface); border:1px solid var(--tm-line);
  border-radius: var(--tm-r); cursor:pointer; min-height: 76px;
  transition: border-color .15s, background .15s, transform .08s;
}
.tm-select:active { transform: scale(.99); }
.tm-select.is-active { border-color: var(--tm-signal-line); background: var(--tm-signal-soft); }
.tm-select__ico {
  width:52px; height:52px; border-radius: var(--tm-r-sm); flex:none;
  display:flex; align-items:center; justify-content:center;
  background: var(--tm-surface-3); color: var(--tm-text);
}
.tm-select.is-active .tm-select__ico { background: var(--tm-signal); color: var(--tm-signal-ink); }
.tm-select__body { flex:1; min-width:0; }
.tm-select__title { font-family: var(--tm-font-display); font-weight:600; font-size:20px; line-height:1.1; }
.tm-select__sub { font-size:13px; color: var(--tm-text-dim); margin-top:2px; }
.tm-select__code { font-family: var(--tm-font-mono); font-weight:600; font-size:13px; color: var(--tm-text-dim); }
.tm-select__check { color: var(--tm-ok); flex:none; }

/* ============================================================
   19. LIST ROW  (perfil / ajustes)
   ============================================================ */
.tm-row {
  display:flex; align-items:center; gap: var(--s3);
  padding: var(--s4); min-height: 60px;
  background: var(--tm-surface); border:1px solid var(--tm-line);
  border-radius: var(--tm-r); cursor:pointer; width:100%;
  appearance:none; -webkit-appearance:none; text-align:left; color:inherit;
}
.tm-row__ico { width:38px; height:38px; border-radius: var(--tm-r-sm); flex:none; display:flex; align-items:center; justify-content:center; background: var(--tm-surface-3); color: var(--tm-text-dim); }
.tm-row__body { flex:1; min-width:0; }
.tm-row__label { font-weight:600; font-size:15px; }
.tm-row__val { font-size:13px; color: var(--tm-text-dim); margin-top:1px; }
.tm-row__val .tm-mono { color: var(--tm-text); }
.tm-row .tm-chev { color: var(--tm-text-faint); flex:none; }

.tm-avatar {
  width:72px; height:72px; border-radius: 50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--tm-font-display); font-weight:700; font-size:28px;
  background: var(--tm-surface-3); color: var(--tm-text);
  border: 2px solid var(--tm-signal);
}

/* small segmented toggle (e.g. Taller / Sol inside a row) */
.tm-seg { display:inline-flex; background: var(--tm-surface-3); border:1px solid var(--tm-line); border-radius: var(--tm-r-sm); padding:3px; gap:3px; }
.tm-seg button { appearance:none; border:none; background:none; color: var(--tm-text-dim); font:inherit; font-weight:700; font-size:13px; padding:6px 12px; border-radius: 6px; cursor:pointer; display:flex; align-items:center; gap:5px; }
.tm-seg button.on { background: var(--tm-signal); color: var(--tm-signal-ink); }
.tm-seg .tm-ico { width:15px; height:15px; }

/* ============================================================
   20. TIMER  (horas por tarea — patrón futuro)
   ============================================================ */
.tm-pill { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background: var(--tm-info-soft); color: var(--tm-info); }
.tm-timer { font-family: var(--tm-font-mono); font-weight:700; font-variant-numeric: tabular-nums; font-size:44px; letter-spacing:-.01em; text-align:center; line-height:1; color: var(--tm-text); }
.tm-timer__dot { display:inline-block; width:12px; height:12px; border-radius:50%; background: var(--tm-ok); margin-right:8px; vertical-align:middle; animation: tm-pulse 1.4s infinite; }
@keyframes tm-pulse { 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.tm-task {
  display:flex; align-items:center; gap: var(--s3); padding: var(--s4);
  background: var(--tm-surface-2); border:1px solid var(--tm-line); border-radius: var(--tm-r);
}
.tm-task__ico { width:40px; height:40px; border-radius: var(--tm-r-sm); background: var(--tm-surface-3); display:flex; align-items:center; justify-content:center; color: var(--tm-text-dim); flex:none; }
.tm-task__name { font-weight:600; font-size:16px; }
.tm-task__meta { font-size:12px; color: var(--tm-text-faint); }

/* ============================================================
   21. SCANNER OVERLAY (cámara)
   ============================================================ */
.tm-scanner { position:relative; flex:1; min-height:0; display:flex; flex-direction:column;
  background:
    radial-gradient(140% 90% at 50% 35%, #2c333b, #14181d 70%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 2px, transparent 2px 5px);
  color:#fff; overflow:hidden;
}
.tm-scanner__top { display:flex; align-items:center; justify-content:space-between; padding: var(--s4); gap: var(--s3); }
.tm-scanner__top .tm-mono { font-weight:600; font-size:15px; }
.tm-scanner__icobtn { width:42px; height:42px; border-radius:50%; background: rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; color:#fff; border:none; cursor:pointer; }
.tm-frame { flex:1; display:flex; align-items:center; justify-content:center; }
.tm-frame__box { position:relative; width:64%; aspect-ratio:1; border:1px solid rgba(255,255,255,.22); border-radius:10px; }
.tm-frame__box::before, .tm-frame__box::after,
.tm-frame__box > span::before, .tm-frame__box > span::after {
  content:""; position:absolute; width:34px; height:34px; border:4px solid #fff; border-radius:4px;
}
.tm-frame__box::before { top:0; left:0; border-right:none; border-bottom:none; }
.tm-frame__box::after  { top:0; right:0; border-left:none; border-bottom:none; }
.tm-frame__box > span::before { bottom:0; left:0; border-right:none; border-top:none; }
.tm-frame__box > span::after  { bottom:0; right:0; border-left:none; border-top:none; }
.tm-frame__line { position:absolute; left:8%; right:8%; height:2px; background: var(--tm-signal); box-shadow:0 0 12px 2px var(--tm-signal-line); top:10%; animation: tm-scan 2.4s ease-in-out infinite; }
@keyframes tm-scan { 0%,100%{ top:10%; } 50%{ top:88%; } }
.tm-scanner__bottom { padding: var(--s4) var(--s4) var(--s6); display:flex; flex-direction:column; gap: var(--s4); }
.tm-scanner__field { display:flex; align-items:center; gap: var(--s2); background: rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.18); border-radius: var(--tm-r); padding: 0 var(--s3); min-height:50px; color:#fff; }
.tm-scanner__field input { flex:1; background:none; border:none; color:#fff; font-size:16px; min-height:48px; }
.tm-scanner__field input::placeholder { color: rgba(255,255,255,.55); }
.tm-scanner__actions { display:flex; align-items:center; justify-content:center; gap: var(--s8); }
.tm-scanner__round { width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; border:2px solid #fff; background: transparent; color:#fff; }
.tm-scanner__round--scan { background:#fff; color:#14181d; border-color:#fff; }