/* Tasks in progress (docs/progreso-de-tareas.md): what the window is doing, drawn from the registry of tareas.js so the analyst never
   takes a wait for a hang. Four pieces, one language:
   1. .tk-scan, a thin scan bar under the top bar while any task runs: a sheen that sweeps it, or the fill of the main task when that
      task has a real total.
   2. .tk-chip, the chip Tareas of the top bar ("2 en curso"), which opens the tray .tk-tray (a popover of the shell).
   3. .tk-task, the block OsintTarea: the card of one task, in the tray and inline where the task was started (.is-inline): its icon,
      title, elapsed time and Cancelar; the step it is on in small capitals; the segmented track of its steps (lit, the active one
      pulsing, the pending ones dim); its bar (determinate: done of total with a scan line over the fill; indeterminate: a glow that
      moves); its count with figures that tick; the line that says since when it waits for an answer; its outcome once it ends.
   4. .tk-recent, the last ten tasks that ended, in the tray.
   Colours come from the theme: the role tokens of tokens-ev.css in the light and the dark themes, the room's palette in the operative
   theme (tema-operativo.css declares it on the root). Nothing here changes a size, a gap or a position of what the page already draws;
   every rule is scoped to the classes above. With reduced motion every animation and transition stops: the fills are static, the
   indeterminate bar is a still half-lit track, the figures change at once. */

/* ------------------------------------------------------------ tokens */
:root {
  --tk-accent: var(--ev-brand);
  --tk-accent-2: var(--ev-info);
  --tk-ok: var(--ev-ok);
  --tk-bad: var(--ev-bad);
  --tk-warn: var(--ev-doubt);
  --tk-ground: var(--ev-surface);
  --tk-ground-2: var(--ev-surface-2);
  --tk-line: var(--ev-border);
  --tk-line-2: var(--ev-border-strong);
  --tk-ink: var(--ev-text);
  --tk-ink-2: var(--ev-text-2);
  --tk-ink-3: var(--ev-text-3);
  --tk-mono: var(--ev-font-mono);
  --tk-track: color-mix(in srgb, var(--ev-text-3) 20%, transparent);
  --tk-glow: 0 0 6px color-mix(in srgb, var(--tk-accent) 45%, transparent);
  --tk-glow-strong: 0 0 10px color-mix(in srgb, var(--tk-accent) 65%, transparent), 0 0 2px var(--tk-accent);
  --tk-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* the light that runs over a fill: the ground of the light theme, the ink of the dark one, the room's pale cyan */
  --tk-shine: var(--ev-surface);
}
:root[data-theme="dark"] { --tk-shine: var(--ev-text); }
:root[data-theme="operativo"] {
  --tk-shine: var(--sala-cyan-ink);
  --tk-accent: var(--sala-cyan);
  --tk-accent-2: var(--sala-magenta);
  --tk-ok: var(--sala-green);
  --tk-bad: var(--sala-red);
  --tk-warn: var(--sala-amber);
  --tk-ground: var(--sala-glass-2);
  --tk-ground-2: var(--sala-panel-2);
  --tk-line: var(--sala-line);
  --tk-line-2: var(--sala-line-2);
  --tk-ink: var(--sala-text);
  --tk-ink-2: var(--sala-text-2);
  --tk-ink-3: var(--sala-text-3);
  --tk-track: color-mix(in srgb, var(--sala-line-2) 70%, transparent);
  --tk-glow: 0 0 8px color-mix(in srgb, var(--sala-cyan) 55%, transparent);
  --tk-glow-strong: 0 0 14px color-mix(in srgb, var(--sala-cyan) 70%, transparent), 0 0 3px var(--sala-cyan);
}

/* the figures that tick: a whole number the browser interpolates when it changes (the counter shows it); the words around it are text */
@property --tk-v { syntax: '<integer>'; inherits: false; initial-value: 0; }

/* ------------------------------------------------------------ 1. the scan bar under the top bar */
.tk-scan {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms var(--tk-ease);
}
.tk-scan.is-on { opacity: 1; background: var(--tk-track); }
.tk-scan-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--tk-accent-2), var(--tk-accent));
  box-shadow: var(--tk-glow-strong);
  transition: width 600ms var(--tk-ease);
}
.tk-scan.is-determinate .tk-scan-fill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  right: 0;
  background: linear-gradient(90deg, transparent, var(--tk-shine));
  animation: tkScanTip 1.4s ease-in-out infinite;
}
.tk-scan.is-indeterminate::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 32%;
  background: linear-gradient(90deg, transparent, var(--tk-accent-2) 30%, var(--tk-accent) 70%, transparent);
  box-shadow: var(--tk-glow-strong);
  animation: tkSweep 1.7s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes tkSweep { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
@keyframes tkScanTip { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ------------------------------------------------------------ 2. the chip Tareas and its tray */
.tk-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--tk-line);
  border-radius: 999px;
  background: transparent;
  color: var(--tk-ink-2);
  font-family: var(--tk-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.tk-chip:hover, .tk-chip[aria-expanded="true"] { color: var(--tk-ink); border-color: var(--tk-line-2); background: var(--tk-ground-2); }
.tk-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tk-ink-3); flex: none; }
.tk-chip.is-busy { color: var(--tk-ink); border-color: color-mix(in srgb, var(--tk-accent) 55%, var(--tk-line)); box-shadow: inset 0 0 12px color-mix(in srgb, var(--tk-accent) 14%, transparent); }
.tk-chip.is-busy .tk-chip-dot { background: var(--tk-accent); box-shadow: var(--tk-glow-strong); animation: tkPulse 1.3s ease-in-out infinite; }
.tk-chip.is-error .tk-chip-dot { background: var(--tk-bad); }
.tk-chip.is-ok .tk-chip-dot { background: var(--tk-ok); }
@keyframes tkPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.7); } }

.ev-popover.tk-tray .ev-pop-head .ev-pop-titles { flex: 1 1 auto; min-width: 0; }
.ev-popover.tk-tray { width: 400px; max-width: min(400px, calc(100vw - 16px)); max-height: min(72vh, 640px); overflow: auto; padding: 8px; }
.tk-tray-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.tk-none { margin: 8px 6px; color: var(--tk-ink-3); font-size: 12.5px; }
.tk-recent-h {
  margin: 14px 6px 6px;
  color: var(--tk-ink-3);
  font-family: var(--tk-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.tk-recent { margin: 0; padding: 0; list-style: none; }
.tk-recent li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: start;
  padding: 6px;
  border-radius: 6px;
  font-size: 12.5px;
}
.tk-recent li + li { border-top: 1px solid color-mix(in srgb, var(--tk-line) 60%, transparent); }
.tk-recent .ev-ic { width: 14px; height: 14px; margin-top: 2px; color: var(--tk-ink-3); }
.tk-recent .tk-r-title { color: var(--tk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-recent .tk-r-time { color: var(--tk-ink-3); font-family: var(--tk-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.tk-recent .tk-r-line { grid-column: 2 / 4; color: var(--tk-ink-3); font-size: 12px; }
.tk-recent li.is-ok .ev-ic { color: var(--tk-ok); }
.tk-recent li.is-error .ev-ic, .tk-recent li.is-error .tk-r-line { color: var(--tk-bad); }

/* ------------------------------------------------------------ 3. the card of a task (OsintTarea) */
.tk-task {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--tk-line);
  border-radius: 8px;
  background: var(--tk-ground);
  color: var(--tk-ink);
  font-size: 12.5px;
  text-align: left;
}
:root[data-theme="operativo"] .tk-task { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sala-cyan) 10%, transparent), inset 0 0 22px color-mix(in srgb, var(--sala-blue) 6%, transparent); }
.tk-task.is-running { border-color: color-mix(in srgb, var(--tk-accent) 38%, var(--tk-line)); }
.tk-task.is-done { border-color: color-mix(in srgb, var(--tk-ok) 45%, var(--tk-line)); }
.tk-task.is-failed { border-color: color-mix(in srgb, var(--tk-bad) 55%, var(--tk-line)); }
.tk-task.is-inline { margin: 8px 0; }
.tk-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tk-ic { display: inline-flex; flex: none; color: var(--tk-accent); }
.tk-ic .ev-ic { width: 16px; height: 16px; }
.tk-task.is-running .tk-ic { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tk-accent) 60%, transparent)); }
.tk-task.is-done .tk-ic { color: var(--tk-ok); }
.tk-task.is-failed .tk-ic { color: var(--tk-bad); }
.tk-task.is-cancelled .tk-ic { color: var(--tk-ink-3); }
.tk-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tk-time { flex: none; color: var(--tk-ink-3); font-family: var(--tk-mono); font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.tk-cancel {
  flex: none;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--tk-line-2);
  border-radius: 6px;
  background: transparent;
  color: var(--tk-ink-2);
  font-size: 11.5px;
  cursor: pointer;
}
.tk-cancel:hover { color: var(--tk-bad); border-color: color-mix(in srgb, var(--tk-bad) 60%, var(--tk-line-2)); }
.tk-cancel[disabled] { opacity: 0.6; cursor: default; }
.tk-step {
  margin: 0;
  color: var(--tk-accent);
  font-family: var(--tk-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme="operativo"] .tk-task.is-running .tk-step { text-shadow: 0 0 8px color-mix(in srgb, var(--sala-cyan) 45%, transparent); }
.tk-task.is-done .tk-step, .tk-task.is-cancelled .tk-step { color: var(--tk-ink-3); }
.tk-task.is-failed .tk-step { color: var(--tk-bad); }

/* the segmented track of the steps */
.tk-track { display: flex; gap: 3px; margin: 0; padding: 0; list-style: none; }
.tk-track li { flex: 1 1 0; min-width: 0; }
.tk-seg { display: block; height: 4px; border-radius: 2px; background: var(--tk-track); transition: background-color 300ms var(--tk-ease), box-shadow 300ms var(--tk-ease); }
.tk-track li.is-done .tk-seg { background: color-mix(in srgb, var(--tk-accent) 75%, var(--tk-accent-2)); box-shadow: var(--tk-glow); }
.tk-track li.is-active .tk-seg { background: var(--tk-accent); box-shadow: var(--tk-glow-strong); animation: tkStepPulse 1.2s ease-in-out infinite; }
.tk-track li.is-stopped .tk-seg { background: var(--tk-bad); }
.tk-task.is-done .tk-track li .tk-seg { background: var(--tk-ok); box-shadow: none; }
.tk-seg-label { display: block; margin-top: 3px; overflow: hidden; color: var(--tk-ink-3); font-family: var(--tk-mono); font-size: 9.5px; letter-spacing: 0.06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.tk-track li.is-active .tk-seg-label { color: var(--tk-accent); }
.tk-track li.is-done .tk-seg-label { color: var(--tk-ink-2); }
@keyframes tkStepPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* the bar */
.tk-bar { position: relative; height: 6px; overflow: hidden; border-radius: 3px; background: var(--tk-track); }
.tk-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--tk-accent-2), var(--tk-accent));
  box-shadow: var(--tk-glow);
  transition: width 600ms var(--tk-ease);
}
.tk-bar.is-determinate .tk-fill { overflow: hidden; }
.tk-bar.is-determinate .tk-fill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tk-shine) 60%, transparent), transparent);
  animation: tkScanLine 1.8s linear infinite;
}
.tk-bar.is-indeterminate .tk-fill { width: 36%; animation: tkGlide 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
.tk-task.is-done .tk-fill { background: var(--tk-ok); box-shadow: none; }
.tk-task.is-failed .tk-fill { background: var(--tk-bad); box-shadow: none; }
.tk-task.is-cancelled .tk-fill { background: var(--tk-ink-3); box-shadow: none; }
.tk-task:not(.is-running) .tk-fill, .tk-task:not(.is-running) .tk-fill::after { animation: none; }
.tk-task:not(.is-running) .tk-bar.is-indeterminate .tk-fill { width: 100%; }
@keyframes tkScanLine { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes tkGlide { from { left: 0; } to { left: 64%; } }

/* the count, the waiting line, the note and the outcome */
.tk-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 16px; color: var(--tk-ink-2); font-size: 12px; }
.tk-count { display: inline-flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.tk-num { font-family: var(--tk-mono); font-weight: 600; color: var(--tk-ink); counter-reset: tkv var(--tk-v); transition: --tk-v 700ms var(--tk-ease); }
.tk-num::before { content: counter(tkv); }
:root[data-theme="operativo"] .tk-task.is-running .tk-num { color: var(--sala-cyan-ink); text-shadow: 0 0 8px color-mix(in srgb, var(--sala-cyan) 50%, transparent); }
.tk-unit { color: var(--tk-ink-3); }
.tk-stall { color: var(--tk-warn); font-size: 11.5px; }
.tk-stall::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; animation: tkPulse 1.6s ease-in-out infinite; }
.tk-note { color: var(--tk-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tk-outcome { margin: 0; font-size: 12px; color: var(--tk-ok); }
.tk-task.is-failed .tk-outcome { color: var(--tk-bad); }
.tk-task.is-cancelled .tk-outcome { color: var(--tk-ink-3); }

/* ------------------------------------------------------------ the places that hold a card inline */
/* the opening of a case, over the view (the view is the positioned box of the stage) */
.tk-overlay { position: absolute; left: 50%; top: 68px; z-index: 11; width: min(420px, calc(100% - 24px)); transform: translateX(-50%); pointer-events: auto; }
.tk-overlay .tk-task { margin: 0; box-shadow: var(--ev-shadow-3); }
/* the strip of a search on a datum: the card under its two lines */
.osint-pivot-banner .tk-task { margin: 8px 0 0; padding: 8px 10px; }
/* the menu of the save chip: the card of the save under its head */
.ws-save-menu .tk-task { margin: 6px 4px; }
/* the save chip: a short scan line beside its label while the case is saved */
.tk-mini {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--tk-track), var(--tk-accent), var(--tk-track));
  background-size: 200% 100%;
  box-shadow: var(--tk-glow);
  animation: tkMini 0.9s linear infinite;
}
@keyframes tkMini { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ------------------------------------------------------------ reduced motion: static fills and text */
@media (prefers-reduced-motion: reduce) {
  .tk-scan, .tk-scan-fill, .tk-seg, .tk-fill { transition: none; }
  .tk-scan.is-indeterminate::before { animation: none; transform: none; width: 100%; opacity: 0.45; }
  .tk-scan.is-determinate .tk-scan-fill::after, .tk-bar.is-determinate .tk-fill::after { animation: none; display: none; }
  .tk-bar.is-indeterminate .tk-fill { animation: none; left: 0; width: 100%; opacity: 0.45; }
  .tk-chip.is-busy .tk-chip-dot, .tk-track li.is-active .tk-seg, .tk-stall::before, .tk-mini { animation: none; }
  .tk-num { transition: none; }
}