/* Stylesheet of the case workspace. Linked from the page head after tokens-ev.css (the design tokens
   of the redesign, --ev-*, and its vendored brand fonts), before the runtime boots.
   Holds the self-hosted fonts of the loading animation's canvas, the tokens of tokens-osint.js as
   custom properties (tests/tokens.test.js checks that every --osint-* colour equals its JS token), the
   page ground, ink and type from the --ev-* tokens, the keyframes the shell animates with, the focus
   ring, reduced motion, the fullscreen surface, the shell of the redesign (T1.4: rail of the screens,
   top bar, popovers, calm cards, shortcuts sheet, boot card; T1.5: command palette, toasts) and the classes of the tools (rail,
   drawers, modals, dialog, health dots). The stage, the Bitácora and the loading view keep their
   inline styles. */

/* Fonts: Manrope for the UI and the canvas, DM Mono for captions, counters, hosts and the loader
   percentage. Latin subset, OFL licensed (vendor/fonts/OFL-*.txt), never fetched from the network. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('./vendor/fonts/manrope-400.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('./vendor/fonts/manrope-500.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('./vendor/fonts/manrope-600.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('./vendor/fonts/manrope-700.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('./vendor/fonts/manrope-800.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./vendor/fonts/dmmono-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./vendor/fonts/dmmono-500.woff2') format('woff2'); }

:root {
  /* ink shared by the canvas and the stage */
  --osint-amber: #f5b84b;
  --osint-green: #35d0a5;
  --osint-red: #ef4444;
  --osint-accent: #2f8bff;
  /* body-text hint (4.9:1 on the panel #131c2e) */
  --osint-hint: #7c8ba3;
  /* the folded group, "Otros vínculos", in both layers */
  --osint-otros: #8aa0c4;
  /* group hues, in the order the groups take them */
  --osint-group-0: #38bdf8;
  --osint-group-1: #a855f7;
  --osint-group-2: #f5b400;
  --osint-group-3: #fb923c;
  --osint-group-4: #22c55e;
  --osint-group-5: #14b8a6;
  --osint-group-6: #ef4444;
  --osint-group-7: #2f8bff;
  --osint-group-8: #e879f9;
  --osint-group-9: #a3e635;
  --osint-group-10: #6366f1;
  --osint-group-11: #db2777;
  --osint-group-12: #8d8f00;
  --osint-group-13: #3f8f2a;
  --osint-group-14: #b06a2c;
  --osint-font-ui: Manrope, system-ui, sans-serif;
  --osint-font-mono: 'DM Mono', monospace;
}
/* the swatches of the map legend on the Zonas board of the wall: the halo and the heat palette of the report maps (mapas-informe.js COLORS
   and HEAT_STOPS), literal values that mirror what the map image bakes in; a muro name, not an --osint-* token (those mirror tokens-osint.js) */
:root {
  --muro-legend-halo: #FFFFFF;
  --muro-legend-ring: #9fb0c8;
  --muro-legend-heat: linear-gradient(90deg, #0000ff, #00ffff 40%, #00ff00 60%, #ffff00 80%, #ff0000);
}

/* The page takes the design tokens (tokens-ev.css): ground, ink, type and base size follow data-theme and data-densidad. Since
   T1.4 the root of the template is the shell (.ev-app below): the case workspace inside it takes the page ground, ink and type,
   its 13 px size stays, and every panel keeps its own inline colours until its task restyles it. */
html, body { margin: 0; background: var(--ev-bg); }
body { background: var(--ev-bg); color: var(--ev-text); font-family: var(--ev-font-ui); font-size: var(--ev-fs-base); }
a { color: #7fb4ff; }
a:hover { color: #b6d3ff; }
* { box-sizing: border-box; }
input, textarea, button { font-family: inherit; }

/* Keyboard focus is always visible; the inline outline:none of the shell only hides the mouse focus */
:focus-visible { outline: 2px solid var(--ev-focus) !important; outline-offset: 2px; }
input:focus-visible, textarea:focus-visible { outline-offset: 0; }

/* Fullscreen puts the whole stage wrap (graph, toolbar, legend, counters) on the screen. T2.1: the wrap also holds the bar of the views
   and the lower panel of the case, which step aside there; the Ficha floats over the stage when a node is selected */
[data-osint-stage-wrap]:fullscreen { border: 0 !important; border-radius: 0 !important; background: #070b14 !important; grid-template-rows: 0 minmax(0, 1fr) 0 !important; }
[data-osint-stage-wrap]:fullscreen > .ws-viewbar, [data-osint-stage-wrap]:fullscreen > .ws-dock { display: none !important; }

/* Motion, literal values of the signature */
@keyframes osintPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes osintSpin { to { transform: rotate(360deg); } }
@keyframes osintPop { from { opacity: 0; } to { opacity: 1; } }
@keyframes osintEmerge { from { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.15); opacity: 0; } 60% { opacity: 1; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes osintShimmer { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@keyframes osintIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes osintBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes osintDrawerIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes osintBar { from { background-position: 0 0; } to { background-position: 28px 0; } }
@keyframes osintFade { from { opacity: 0; } to { opacity: 1; } }

/* Reduced motion, the design proposal's rule (plan 4.4): with the system setting on, every CSS animation and transition ends at
   once (tokens-ev.css also zeroes the --ev-dur-* durations). The canvas of the loading animation is drawn by script, not here. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------------------------------------
   Shell (T1.4 of docs/plan-investigador-osint3.md, plan 3.6; the prototype's css/app.css .app, .rail,
   .topbar and .main): the grid of the rail and the top bar around the main area; the rail of the
   screens, 64 px or 224 px open (ev-rail); the top bar of 52 px with the path, the search, the
   services, Modo demostración and Nuevo caso; the popovers of the services and of the analyst; the
   calm card of a screen in preparation; the sheet of the shortcuts; the skip link and the card of a
   start that failed. Tokens only, both themes. The plan names the areas rail, topbar and main: they
   are scoped to the shell here, because the workspace has elements of class main inside its rows.
   ------------------------------------------------------------------------------------------------ */
/* the ground and ink of tooltips and, from T1.5, toasts (the prototype's values); the kinds of a toast in the colours of the dark theme,
   since its ground is dark in both themes */
:root { --toast-bg: #16212C; --toast-fg: #EEF3F6; --toast-ok: #3DD6A3; --toast-warn: #F5B84B; --toast-bad: #F07167; }
[data-theme="dark"] { --toast-bg: #22313F; --toast-fg: #E6EDF3; }
/* T5.2: a text in the info colour on its soft ground reads at 4.27:1 in the light theme (#2563EB on #E0EAFD, under the 4.5:1 rule),
   so such a text takes this ink: a deeper blue of the same hue in the light theme (5.5:1), the info colour itself in the dark one */
:root { --info-ink: #1D4ED8; }
[data-theme="dark"] { --info-ink: var(--ev-info); }
/* an icon of the sprite (iconos-ev.js): 18 px unless its place says otherwise */
.ev-ic { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: middle; }

.ev-app {
  --rail-w: var(--ev-rail);
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: var(--ev-topbar) minmax(0, 1fr);
  height: 100vh;
  transition: grid-template-columns var(--ev-dur-3) var(--ev-ease-out);
}
.ev-app.rail-open { --rail-w: var(--ev-rail-open); }

/* Rail of the screens: the symbol, five screens, and at the bottom the rail toggle, Ayuda, the theme and the analyst. Closed, the
   names fade out (they stay the accessible names) and a tip shows beside the pointer or the focus. */
.ev-app > .rail {
  grid-row: 1 / 3;
  grid-column: 1;
  position: relative;
  z-index: var(--ev-z-nav);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 12px 12px;
  background: var(--ev-surface);
  border-right: 1px solid var(--ev-border);
  line-height: var(--ev-lh);
}
.ev-rail-brand { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 4px; margin-bottom: 14px; border-radius: 10px; color: var(--ev-text); text-decoration: none; white-space: nowrap; }
.ev-rail-brand:hover { color: var(--ev-text); }
.ev-rail-brand img { width: 32px; height: 32px; flex: none; }
.ev-logo-dark { display: none; }
[data-theme="dark"] .ev-logo-dark { display: block; }
[data-theme="dark"] .ev-logo-light { display: none; }
.ev-wordmark { font: 600 15px/1.1 var(--ev-font-doc); letter-spacing: -0.005em; color: var(--ev-text); white-space: nowrap; }
.ev-rail-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ev-text-2);
  font: 500 13.5px/1.2 var(--ev-font-ui);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--ev-dur-1), color var(--ev-dur-1);
}
.ev-rail-item .ev-ic { width: 20px; height: 20px; }
.ev-rail-item:hover { background: var(--ev-surface-2); color: var(--ev-text); }
.ev-rail-item.is-current, .ev-rail-item.is-current:hover { background: var(--ev-brand-soft); color: var(--ev-brand); }
.ev-rail-label, .ev-wordmark { opacity: 0; pointer-events: none; transition: opacity var(--ev-dur-2); }
.ev-app.rail-open .ev-rail-label, .ev-app.rail-open .ev-wordmark { opacity: 1; }
.ev-app:not(.rail-open) .ev-rail-item[data-tip]:hover::after,
.ev-app:not(.rail-open) .ev-rail-item[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  padding: 6px 9px;
  border-radius: 7px;
  background: var(--toast-bg);
  color: var(--toast-fg);
  box-shadow: var(--ev-shadow-2);
  font: 500 12px/1.3 var(--ev-font-ui);
  white-space: nowrap;
  pointer-events: none;
}
.ev-rail-badge { position: absolute; top: 4px; left: 23px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ev-bad); color: var(--ev-surface); font: 600 10px/16px var(--ev-font-mono); text-align: center; box-shadow: 0 0 0 2px var(--ev-surface); }
.ev-app.rail-open .ev-rail-badge { position: static; margin-left: auto; box-shadow: none; }
.ev-rail-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.ev-rail-sep { height: 1px; margin: 8px 6px; background: var(--ev-border); }
.ev-avatar {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: -3px;
  flex: none;
  border: 1px solid color-mix(in srgb, var(--ev-t-persona) 30%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ev-t-persona) 18%, var(--ev-surface));
  color: color-mix(in srgb, var(--ev-t-persona) 80%, var(--ev-text));
  font: 600 10.5px/1 var(--ev-font-ui);
  letter-spacing: 0.02em;
}

/* Top bar: the path (crumbs), the search trigger in the middle, and at the right the services, the chip of the demonstration
   mode and Nuevo caso. The right side never shrinks under its content; the path gives way first. */
.ev-app > .topbar {
  grid-row: 1;
  grid-column: 2;
  position: relative;
  z-index: var(--ev-z-nav);
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 0 16px 0 20px;
  background: var(--ev-surface);
  border-bottom: 1px solid var(--ev-border);
  line-height: var(--ev-lh);
}
.ev-crumbs { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; font-size: 13px; color: var(--ev-text-3); white-space: nowrap; }
.ev-crumb { color: var(--ev-text-2); text-decoration: none; }
a.ev-crumb:hover { color: var(--ev-text); text-decoration: underline; }
.ev-crumb.is-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ev-text); font-weight: 500; }
.ev-crumb.is-code { font-family: var(--ev-font-mono); font-size: 12px; }
.ev-crumb-sep { color: var(--ev-border-strong); }
.ev-cmd {
  flex: 0 1 360px;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 8px 0 12px;
  border: 1px solid var(--ev-border-strong);
  border-radius: 9px;
  background: var(--ev-bg);
  color: var(--ev-text-3);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--ev-dur-1), color var(--ev-dur-1);
}
.ev-cmd:hover { border-color: var(--ev-text-3); color: var(--ev-text-2); }
.ev-cmd .ev-ic { width: 16px; height: 16px; }
.ev-cmd-label { flex: 1; min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.ev-cmd kbd, .ev-sheet kbd, .ev-palette kbd, .wsd-keys kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--ev-border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--ev-surface);
  color: var(--ev-text-2);
  font: 500 10.5px/1 var(--ev-font-mono);
  white-space: nowrap;
}
.ev-topbar-right { flex: 1 1 0; min-width: max-content; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ev-svc { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--ev-text-2); font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.ev-svc:hover, .ev-svc[aria-expanded="true"] { background: var(--ev-surface-2); color: var(--ev-text); }
.ev-dot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ev-neutral); }
.ev-dot.ok { background: var(--ev-ok); }
.ev-dot.warn { background: var(--ev-doubt); }
.ev-dot.bad { background: var(--ev-bad); }
.ev-svc .ev-dot.ok { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev-ok) 22%, transparent); }
.ev-svc .ev-dot.warn { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev-doubt) 22%, transparent); }
.ev-svc .ev-dot.bad { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev-bad) 22%, transparent); }
.ev-demo-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; margin: 0 4px; padding: 0 9px; border: 1px dashed var(--ev-border-strong); border-radius: var(--ev-r-pill); color: var(--ev-text-2); font: 500 11px/1 var(--ev-font-mono); letter-spacing: 0.02em; white-space: nowrap; }
.ev-demo-chip .ev-ic { width: 13px; height: 13px; color: var(--ev-text-3); }
/* under 1100 px the path keeps its room: the services and the demonstration chip show their mark only (the words stay for
   assistive technology and in the tip) */
@media (max-width: 1100px) {
  .ev-svc-label, .ev-demo-chip-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ev-demo-chip { padding: 0 6px; }
}

/* Buttons of the shell (the prototype's .btn): 34 px, 32 px small, never under the 32 px of the hit targets */
.ev-btn {
  --h: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--h);
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  font: 500 13.5px/1 var(--ev-font-ui);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background var(--ev-dur-1), border-color var(--ev-dur-1), color var(--ev-dur-1);
}
.ev-btn .ev-ic { width: 16px; height: 16px; }
.ev-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.ev-btn-sm { --h: 32px; padding: 0 11px; gap: 6px; font-size: 12.5px; }
.ev-btn-sm .ev-ic { width: 14px; height: 14px; }
.ev-btn-primary, .ev-btn-primary:hover { color: var(--ev-on-brand); text-decoration: none; }
.ev-btn-primary { background: var(--ev-brand); }
.ev-btn-primary:hover { background: var(--ev-brand-hover); }
.ev-btn-secondary { border-color: var(--ev-border-strong); background: var(--ev-surface); color: var(--ev-text); }
.ev-btn-secondary:hover { border-color: var(--ev-text-3); background: var(--ev-surface-2); color: var(--ev-text); text-decoration: none; }
.ev-btn-ghost { color: var(--ev-text-2); }
.ev-btn-ghost:hover { background: var(--ev-surface-2); color: var(--ev-text); text-decoration: none; }
.ev-btn-group { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.ev-icon-btn { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--ev-text-2); cursor: pointer; }
.ev-icon-btn:hover { background: var(--ev-surface-2); color: var(--ev-text); }

/* Main area: the workspace of a case (full, it never scrolls; hidden, not unmounted, on the other screens) or the card of a screen */
.ev-app > .main { grid-row: 2; grid-column: 2; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: auto; background: var(--ev-bg); }
.ev-app > .main.is-full { overflow: hidden; }
.ev-app > .main:focus, .ev-app > .main:focus-visible { outline: none !important; }
.ev-app > .main > .sc-host { flex: 1 0 auto; display: flex; flex-direction: column; }
/* I-23: under 900 px, one line at the top of the main area of every screen */
.ev-narrow-notice { flex: none; padding: 7px 16px; border-bottom: 1px solid var(--ev-border); border-left: 3px solid var(--ev-doubt); background: var(--ev-doubt-soft); color: var(--ev-text); font-size: 12.5px; line-height: 1.4; }

/* The calm card of a screen in preparation (OsintPendiente, the prototype's .placeholder) */
.ev-pending { flex: 1; display: grid; place-items: center; padding: 40px 24px; line-height: var(--ev-lh); }
.ev-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 460px; padding: 36px 24px; text-align: center; color: var(--ev-text-2); }
.ev-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--ev-brand-soft); color: var(--ev-brand); }
.ev-empty-icon .ev-ic { width: 24px; height: 24px; }
.ev-pending-title { margin: 6px 0 0; font-size: 22px; font-weight: 600; line-height: var(--ev-lh-tight); letter-spacing: -0.01em; color: var(--ev-text); }
.ev-pending-line { margin: 0; font-size: 13.5px; line-height: 1.55; }
.ev-route { padding: 5px 8px; border-radius: 6px; background: var(--ev-surface-2); color: var(--ev-text-2); font: 500 12px/1 var(--ev-font-mono); }
.ev-empty .ev-btn-group { margin-top: 10px; }

/* Popovers of the shell (services, the menu of the analyst): fixed beside their button, over everything but the palette */
.ev-popover {
  position: fixed;
  z-index: calc(var(--ev-z-toast) + 5);
  min-width: 200px;
  max-width: min(360px, calc(100vw - 16px));
  padding: 6px;
  border: 1px solid var(--ev-border-strong);
  border-radius: 12px;
  background: var(--ev-surface);
  color: var(--ev-text);
  box-shadow: var(--ev-shadow-3);
  font-size: 13px;
  line-height: var(--ev-lh);
  animation: evPopIn var(--ev-dur-2) var(--ev-ease-out);
}
/* the popover itself takes the focus when it opens (Esc and Tab start there); its own edge is its focus mark */
.ev-popover:focus, .ev-popover:focus-visible { outline: none !important; }
.ev-popover-wide { width: 340px; }
.ev-menu { width: 280px; }
.ev-pop-head { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 6px; padding: 8px 10px 10px; border-bottom: 1px solid var(--ev-border); }
.ev-pop-titles { min-width: 0; }
.ev-pop-titles strong { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.ev-pop-sub { display: block; font-size: 11.5px; color: var(--ev-text-3); }
.ev-svc-list { margin: 0; padding: 0; list-style: none; }
.ev-svc-list li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px; border-radius: 7px; }
.ev-svc-list li .ev-dot { margin-top: 6px; }
.ev-svc-list strong { display: block; font-size: 13px; font-weight: 500; }
.ev-svc-list li > div > span { font-size: 12px; color: var(--ev-text-3); }
.ev-svc-note { margin: 6px 4px 2px; padding: 8px 10px; border-left: 3px solid var(--ev-doubt); border-radius: 8px; background: var(--ev-doubt-soft); color: var(--ev-text); font-size: 12px; line-height: 1.45; }
.ev-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 8px 4px 2px; border-top: 1px solid var(--ev-border); }
.ev-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 6px 10px; border: 0; border-radius: 7px; background: none; color: var(--ev-text); font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; }
.ev-menu-item:hover, .ev-menu-item:focus { background: var(--ev-surface-2); color: var(--ev-text); text-decoration: none; }
.ev-menu-item .ev-ic { width: 16px; height: 16px; color: var(--ev-text-3); }
@keyframes evPopIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }

/* The sheet of the keyboard shortcuts (Ayuda, ?): a centred dialog over the overlay; since T1.5 its groups (General, Caso, Escenario,
   Panel inferior) in two columns, as the prototype's wide sheet, one column on a narrow window */
.ev-sheet-layer { position: fixed; inset: 0; z-index: var(--ev-z-modal); display: grid; place-items: center; padding: 24px; background: var(--ev-overlay); animation: evFadeIn var(--ev-dur-2) ease; }
.ev-sheet { display: flex; flex-direction: column; width: min(880px, 100%); max-height: calc(100vh - 48px); border: 1px solid var(--ev-border); border-radius: 16px; background: var(--ev-surface); color: var(--ev-text); box-shadow: var(--ev-shadow-3); line-height: var(--ev-lh); }
.ev-sheet-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 14px; }
.ev-sheet-titles { flex: 1; min-width: 0; }
.ev-sheet-head h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: var(--ev-lh-tight); }
.ev-sheet-sub { margin: 5px 0 0; font-size: 13px; color: var(--ev-text-2); }
.ev-sheet-head .ev-icon-btn { margin: -4px -8px 0 auto; }
.ev-sheet-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 22px 20px; }
.ev-sheet-group { margin: 6px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; color: var(--ev-text-3); }
.ev-sheet-section + .ev-sheet-section { margin-top: 12px; }
.ev-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.ev-shortcut { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--ev-border); font-size: 13px; }
.ev-shortcut-label { min-width: 0; }
.ev-keys { display: inline-flex; flex: none; gap: 4px; }
@media (max-width: 760px) { .ev-shortcuts { grid-template-columns: minmax(0, 1fr); } }
@keyframes evFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* T1.5: the command palette (Ctrl K, the prototype's .palette): the overlay over every other layer, the dialog 11 % from the top, the
   input, the rows by group (the selected one on the soft brand ground) and the keys at its foot */
.ev-palette-layer { position: fixed; inset: 0; z-index: var(--ev-z-palette); display: flex; justify-content: center; align-items: flex-start; padding: 11vh 16px 16px; background: var(--ev-overlay); animation: evFadeIn var(--ev-dur-2) ease; }
.ev-palette { display: flex; flex-direction: column; width: min(640px, 100%); max-height: min(560px, 76vh); overflow: hidden; border: 1px solid var(--ev-border-strong); border-radius: 16px; background: var(--ev-surface); color: var(--ev-text); box-shadow: var(--ev-shadow-3); font-family: var(--ev-font-ui); line-height: var(--ev-lh); }
.ev-palette-top { position: relative; flex: none; border-bottom: 1px solid var(--ev-border); }
.ev-palette-top > .ev-ic { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--ev-text-3); pointer-events: none; }
.ev-palette-input { display: block; width: 100%; height: 54px; padding: 0 16px 0 48px; border: 0; background: transparent; color: var(--ev-text); font: 400 16px/1.2 var(--ev-font-ui); }
.ev-palette-input:focus, .ev-palette-input:focus-visible { outline: none !important; }
.ev-palette-input::placeholder { color: var(--ev-text-3); opacity: 1; }
.ev-palette-list { flex: 1; min-height: 0; overflow: auto; padding: 6px 8px 8px; }
.ev-palette-list:empty { display: none; }
.ev-palette-group-label { padding: 10px 10px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; color: var(--ev-text-3); }
.ev-palette-item { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 6px 10px; border-radius: 9px; cursor: pointer; }
.ev-palette-item[aria-selected="true"] { background: var(--ev-brand-soft); }
.ev-palette-ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 7px; background: var(--ev-surface-2); color: var(--ev-text-2); }
.ev-palette-item[aria-selected="true"] .ev-palette-ic { background: var(--ev-surface); color: var(--ev-brand); }
.ev-palette-ic .ev-ic { width: 16px; height: 16px; }
.ev-palette-txt { flex: 1; min-width: 0; }
.ev-palette-label { display: block; overflow: hidden; font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ev-palette-sub { display: block; overflow: hidden; font-size: 11.5px; color: var(--ev-text-3); text-overflow: ellipsis; white-space: nowrap; }
.ev-palette-go { flex: none; font: 500 10.5px/1 var(--ev-font-mono); color: var(--ev-text-3); }
/* T5.3: on the chosen row (the brand soft ground) the third ink reads under 4.5:1 (3.79:1 dark, 3.88:1 light; the prototype has the same
   pair), so the line under the name and the verb take the second ink there */
.ev-palette-item[aria-selected="true"] .ev-palette-sub, .ev-palette-item[aria-selected="true"] .ev-palette-go { color: var(--ev-text-2); }
.ev-palette-empty { padding: 28px 16px; color: var(--ev-text-3); font-size: 13px; text-align: center; }
.ev-palette-foot { display: flex; flex: none; align-items: center; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--ev-border); font-size: 11.5px; color: var(--ev-text-3); }
.ev-palette-hint { display: inline-flex; align-items: center; gap: 6px; }

/* T1.5: the toasts (the prototype's .toasts and .toast): a stack at the bottom right, the newest first in the page and nearest to the
   corner on screen (column-reverse); the same dark ground in both themes (--toast-bg), the kind in the colour of its icon. A toast
   is drawn from its entering state and fades in; leaving, it fades out (with reduced motion the durations are zero). Its buttons keep
   the 32 px of every control. */
.ev-toasts { position: fixed; right: 20px; bottom: 20px; z-index: var(--ev-z-toast); display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 8px; max-width: calc(100vw - 40px); pointer-events: none; }
.ev-toast { display: flex; align-items: flex-start; gap: 10px; width: max-content; min-width: min(260px, 100%); max-width: min(420px, 100%); padding: 11px 12px 11px 14px; border-radius: 11px; background: var(--toast-bg); color: var(--toast-fg); box-shadow: var(--ev-shadow-3); font: 400 13px/1.45 var(--ev-font-ui); pointer-events: auto; transition: opacity var(--ev-dur-3) var(--ev-ease-out), transform var(--ev-dur-3) var(--ev-ease-out); }
.ev-toast.is-entering { opacity: 0; transform: translateY(10px); transition: none; }
.ev-toast.is-leaving { opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity var(--ev-dur-2) ease-in, transform var(--ev-dur-2) ease-in; }
.ev-toast > .ev-ic { width: 18px; height: 18px; margin-top: 1px; color: var(--ev-petroleo-300); }
.ev-toast.is-ok > .ev-ic { color: var(--toast-ok); }
.ev-toast.is-warn > .ev-ic { color: var(--toast-warn); }
.ev-toast.is-error > .ev-ic { color: var(--toast-bad); }
.ev-toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ev-toast-action { flex: none; min-height: 32px; margin: -7px 0 -7px 8px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--ev-chispa); font: 600 12.5px/1.2 var(--ev-font-ui); white-space: nowrap; cursor: pointer; }
.ev-toast-action:hover { text-decoration: underline; }
.ev-toast-close { display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin: -7px -8px -7px -4px; padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; opacity: 0.65; cursor: pointer; }
.ev-toast-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.ev-toast-close .ev-ic { width: 15px; height: 15px; }

/* I-25: Saltar al contenido, off the screen until the keyboard reaches it (no transition: it shows at once) */
.ev-skip { position: fixed; left: 12px; top: 10px; z-index: 200; padding: 8px 14px; border: 1px solid var(--ev-border-strong); border-radius: 10px; background: var(--ev-surface); color: var(--ev-text); font: 500 13px/1.2 var(--ev-font-ui); text-decoration: none; transform: translateY(-160%); }
.ev-skip:hover { color: var(--ev-text); }
.ev-skip:focus, .ev-skip:focus-visible { transform: none; }

/* I-26: the card of a start that failed. The watchdog of the page head builds it over a blank page (data-boot-error 1); the shell
   shows the same card over the screen for ?arranque=error */
.ev-boot-layer { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: var(--ev-bg); color: var(--ev-text); font-family: var(--ev-font-ui); line-height: var(--ev-lh); }
.ev-boot-layer.is-overlay { background: var(--ev-overlay); }
.ev-boot { display: flex; flex-direction: column; width: min(560px, 100%); border: 1px solid var(--ev-border); border-radius: 16px; background: var(--ev-surface); box-shadow: var(--ev-shadow-3); }
.ev-boot-title { margin: 0; padding: 20px 22px 6px; font-size: 18px; font-weight: 600; line-height: var(--ev-lh-tight); }
.ev-boot-text { margin: 0; padding: 4px 22px 18px; font-size: 14px; line-height: 1.55; color: var(--ev-text); }
.ev-boot-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 22px 18px; border-top: 1px solid var(--ev-border); }

/* ------------------------------------------------------------------------------------------------
   Casos (T1.6 of docs/plan-investigador-osint3.md; the prototype's css/app.css, sections "6 screens"
   and "Casos", and css/pantallas-c.css for the selection bar and the papelera): the home of the saved
   cases. The page and its head, the row Para revisar hoy, the toolbar (search, status filter,
   Seleccionar, Papelera), the profile chips, the bar of the selection, the table (code and title,
   state pill, analyst, findings bar, dates, the actions of a row on hover or focus), the menu of a row
   and the papelera at the right edge. Tokens only, both themes; the row hover and the pressed chip
   take the prototype's values. Every control keeps the 32 px of the hit targets.
   ------------------------------------------------------------------------------------------------ */
:root { --row-hover: var(--ev-niebla-100); --seg-on: var(--ev-surface); }
[data-theme="dark"] { --row-hover: #122030; --seg-on: var(--ev-noche-600); }
.ev-page { box-sizing: border-box; width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 32px 56px; color: var(--ev-text); line-height: var(--ev-lh); }
.ev-page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.ev-page-titles { flex: 1; min-width: 0; }
.ev-page-title { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.ev-page-sub { margin: 5px 0 0; font-size: 13.5px; color: var(--ev-text-2); }
.ev-section-label { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; color: var(--ev-text-3); }
.ev-home-note { margin: -6px 0 18px; padding: 9px 12px; border-left: 3px solid var(--ev-doubt); border-radius: 8px; background: var(--ev-doubt-soft); color: var(--ev-text); font-size: 12.5px; line-height: 1.45; }
.ev-home-note.is-calm { border-left-color: var(--ev-border-strong); background: var(--ev-surface-2); color: var(--ev-text-2); }

/* Para revisar hoy: three cards at most, one column on a narrow window */
.ev-review-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.ev-review-card { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 16px; border: 1px solid var(--ev-border); border-radius: 12px; background: var(--ev-surface); color: var(--ev-text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--ev-dur-1), background var(--ev-dur-1); }
.ev-review-card:hover { border-color: var(--ev-border-strong); background: var(--row-hover); }
.ev-review-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; }
.ev-review-ic.is-info { background: var(--ev-info-soft); color: var(--ev-info); }
.ev-review-ic.is-doubt { background: var(--ev-doubt-soft); color: var(--ev-doubt); }
.ev-review-ic.is-neutral { background: var(--ev-surface-2); color: var(--ev-text-2); }
.ev-review-txt { flex: 1; min-width: 0; }
.ev-review-title { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.ev-review-sub { display: block; overflow: hidden; font-size: 12px; color: var(--ev-text-3); text-overflow: ellipsis; white-space: nowrap; }
.ev-review-go { color: var(--ev-text-3); }

/* Toolbar: the search, the status filter, then Seleccionar and Papelera at the right; the profile chips on their own line */
.ev-home-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.ev-toolbar-spacer { flex: 1 1 auto; }
.ev-search-field { position: relative; display: block; flex: 0 1 330px; min-width: 200px; }
.ev-search-field > .ev-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ev-text-3); pointer-events: none; }
.ev-input { box-sizing: border-box; width: 100%; height: 34px; padding: 0 12px; border: 1px solid var(--ev-border-strong); border-radius: 8px; background: var(--ev-surface); color: var(--ev-text); font: 400 13.5px/1.2 var(--ev-font-ui); transition: border-color var(--ev-dur-1), box-shadow var(--ev-dur-1); }
.ev-input::placeholder { color: var(--ev-text-3); opacity: 1; }
.ev-input:hover { border-color: var(--ev-text-3); }
.ev-input:focus, .ev-input:focus-visible, .ev-select:focus-visible { border-color: var(--ev-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev-focus) 22%, transparent); outline: none; }
.ev-search-field .ev-input { padding-left: 34px; }
.ev-select-wrap { position: relative; display: inline-block; flex: none; min-width: 0; }
.ev-select { box-sizing: border-box; height: 34px; padding: 0 32px 0 12px; border: 1px solid var(--ev-border-strong); border-radius: 8px; background: var(--ev-surface); color: var(--ev-text); font: 400 13.5px/1.2 var(--ev-font-ui); cursor: pointer; appearance: none; }
.ev-select:hover { border-color: var(--ev-text-3); }
.ev-select option { background: var(--ev-surface); color: var(--ev-text); }
.ev-select-wrap > .ev-ic { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--ev-text-3); pointer-events: none; }
.ev-btn[aria-pressed="true"] { background: var(--ev-brand-soft); color: var(--ev-brand); }
.ev-btn-danger { border-color: color-mix(in srgb, var(--ev-bad) 45%, transparent); background: var(--ev-surface); color: var(--ev-bad); }
.ev-btn-danger:hover { background: var(--ev-bad-soft); color: var(--ev-bad); }
.ev-home-profiles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.ev-home-profiles-label { font-size: 11px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; color: var(--ev-text-3); }
.ev-segmented { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; max-width: 100%; padding: 3px; border: 1px solid var(--ev-border); border-radius: 10px; background: var(--ev-surface-2); }
.ev-segmented button { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--ev-text-2); font: 500 13px/1 var(--ev-font-ui); white-space: nowrap; cursor: pointer; transition: background var(--ev-dur-1), color var(--ev-dur-1); }
.ev-segmented button:hover { color: var(--ev-text); }
.ev-segmented button[aria-pressed="true"] { background: var(--seg-on); color: var(--ev-text); box-shadow: var(--ev-shadow-1); }
.ev-filter-note { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 0 0 0 12px; border-radius: 9px; background: var(--ev-brand-soft); color: var(--ev-brand); font-size: 12.5px; font-weight: 500; }
.ev-filter-note .ev-ic { width: 16px; height: 16px; }
.ev-filter-note .ev-icon-btn { color: var(--ev-brand); }

/* The bar of the selection (?seleccion=1) and the checkboxes, each inside a 32 px hit area */
.ev-home-bulk { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 4px 8px 4px 4px; border-radius: 10px; background: var(--ev-brand-soft); font-size: 13px; }
.ev-home-bulk-text { min-width: 0; }
.ev-check-hit { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; cursor: pointer; }
.ev-check { width: 16px; height: 16px; margin: 0; accent-color: var(--ev-brand); cursor: pointer; }
.ev-check[disabled] { cursor: not-allowed; }

/* The table of the saved cases: the whole row opens its case; its actions show on hover or focus; it scrolls sideways inside its card
   when the window is narrow, never the page */
.ev-card { background: var(--ev-surface); border: 1px solid var(--ev-border); border-radius: var(--ev-r-lg); }
.ev-home-card { overflow: hidden; }
.ev-table-wrap { overflow-x: auto; min-height: 0; }
.ev-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.ev-table th { padding: 10px 12px; border-bottom: 1px solid var(--ev-border); background: var(--ev-surface); color: var(--ev-text-3); font-size: 11px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-align: left; text-transform: uppercase; white-space: nowrap; }
.ev-table td { padding: 12px; border-bottom: 1px solid var(--ev-border); vertical-align: middle; }
.ev-table tbody tr { transition: background var(--ev-dur-1); }
.ev-table tbody tr:hover td { background: var(--row-hover); }
.ev-table tbody tr.is-open { cursor: pointer; }
.ev-table tbody tr.is-selected td { background: var(--ev-brand-soft); }
.ev-table tbody tr.is-selected td:first-child { box-shadow: inset 2px 0 0 var(--ev-brand); }
.ev-table tbody tr:last-child td { border-bottom: 0; }
.ev-table tbody tr:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: -2px; }
.ev-col-pick { width: 32px; padding-right: 0 !important; padding-left: 8px !important; }
/* the case column takes its share and ellipsis beyond it (max-width 0), never less than 220 px: a narrow window scrolls the card instead */
.ev-col-case { width: 36%; min-width: 220px; max-width: 0; }
.ev-col-who { max-width: 200px; }
.ev-col-actions { width: 132px; }
.ev-case-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ev-case-code { font: 500 11.5px/1.2 var(--ev-font-mono); color: var(--ev-text-3); }
.ev-case-title { overflow: hidden; color: var(--ev-text); font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ev-status { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border: 1px solid transparent; border-radius: var(--ev-r-pill); background: var(--ev-surface-2); color: var(--ev-text-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.ev-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.ev-status.is-running { background: var(--ev-brand-soft); color: var(--ev-brand); }
.ev-status.is-awaiting { background: var(--ev-doubt-soft); color: var(--ev-doubt); }
.ev-status.is-cancelled { border-color: var(--ev-border-strong); border-style: dashed; background: transparent; }
.ev-status.is-demo { background: var(--ev-info-soft); color: var(--info-ink); }
.ev-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; white-space: nowrap; }
.ev-who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ev-who-name.is-none { color: var(--ev-text-3); }
.ev-avatar.ev-avatar-sm { width: 22px; height: 22px; margin-left: 0; font-size: 9.5px; }
.ev-findings { display: flex; flex-direction: column; gap: 5px; width: 104px; }
.ev-findings-nums { font: 500 12px/1 var(--ev-font-mono); color: var(--ev-text-2); white-space: nowrap; }
.ev-findings-nums b { color: var(--ev-text); font-weight: 600; }
.ev-bar { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 2px; background: var(--ev-surface-3); }
.ev-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--ev-ok); }
.ev-date-mono { font: 400 12px/1.2 var(--ev-font-mono); color: var(--ev-text-2); white-space: nowrap; }
.ev-muted { color: var(--ev-text-2); }
.ev-nowrap { white-space: nowrap; }
.ev-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; opacity: 0; transition: opacity var(--ev-dur-1); }
.ev-table tbody tr:hover .ev-row-actions, .ev-table tbody tr:focus-within .ev-row-actions, .ev-row-actions:has([aria-expanded="true"]) { opacity: 1; }
.ev-home-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--ev-border); color: var(--ev-text-3); font-size: 12.5px; }
.ev-empty h3 { margin: 0; color: var(--ev-text); font-size: 15px; font-weight: 600; }
.ev-empty p { margin: 0; font-size: 13px; line-height: 1.55; }
.ev-home-empty { margin: 0 auto; }
.ev-home-empty .ev-empty-icon { width: 46px; height: 46px; border: 1px solid var(--ev-border); border-radius: 13px; background: var(--ev-surface-2); color: var(--ev-text-3); }

/* The menu of a row (fixed by its button, over the table); a danger item keeps its colour, the separator is its top line */
.ev-home-menu { width: 240px; }
.ev-menu-item.is-danger, .ev-menu-item.is-danger .ev-ic { color: var(--ev-bad); }
.ev-menu-item.has-sep { position: relative; margin-top: 9px; }
.ev-menu-item.has-sep::before { content: ''; position: absolute; left: 4px; right: 4px; top: -5px; height: 1px; background: var(--ev-border); }
.ev-menu-item[disabled] { opacity: 0.5; cursor: not-allowed; }
.ev-menu-item[disabled]:hover { background: none; }

/* The papelera (?papelera=1): a panel at the right edge over the overlay, under the in-app dialog (the same layer, the dialog comes later
   in the page) */
.ev-drawer-layer { position: fixed; inset: 0; z-index: var(--ev-z-drawer); background: var(--ev-overlay); animation: evFadeIn var(--ev-dur-2) ease; }
.ev-drawer { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(520px, 94vw); border-left: 1px solid var(--ev-border); background: var(--ev-surface); color: var(--ev-text); box-shadow: var(--ev-shadow-3); line-height: var(--ev-lh); animation: evDrawerIn var(--ev-dur-3) var(--ev-ease-out); }
@keyframes evDrawerIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.ev-drawer-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 16px; border-bottom: 1px solid var(--ev-border); }
.ev-drawer-titles { flex: 1; min-width: 0; }
.ev-drawer-head h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: var(--ev-lh-tight); }
.ev-drawer-sub { margin: 4px 0 0; color: var(--ev-text-3); font-size: 12.5px; }
.ev-drawer-head .ev-icon-btn { margin: -4px -6px 0 auto; }
.ev-drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px; }
.ev-drawer-foot { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--ev-border); }
.ev-hint { margin: 0 0 12px; color: var(--ev-text-2); font-size: 12.5px; line-height: 1.5; }
.ev-link { color: var(--ev-brand); text-decoration: underline; text-underline-offset: 2px; }
.ev-link:hover { color: var(--ev-brand-hover); }
.ev-trash-list { display: flex; flex-direction: column; margin: 4px 0 16px; padding: 0; list-style: none; }
.ev-trash-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ev-border); }
.ev-trash-txt { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; }
.ev-trash-txt strong { font-weight: 600; overflow-wrap: anywhere; }
.ev-trash-txt .ev-case-code { margin-right: 4px; }
.ev-trash-line { color: var(--ev-text-3); font-size: 11.5px; }
.ev-trash-constancy { margin-top: 18px; }

@media (max-width: 1380px) { .ev-page { padding: 24px 24px 48px; } }
@media (max-width: 1200px) { .ev-review-row { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------------------------------------
   The case workspace (T2.1 of docs/plan-investigador-osint3.md; plan 3.6, the prototype's css/app.css
   section 7 and css/pantallas-c.css): the lateral panel (280 px), the centre and the Ficha (360 px)
   under the 56 px header of the case, the tools rail (44 px) as the fourth column. The stage wrap spans
   the centre and the Ficha: the bar of the views (44 px), the view (the loading animation or the stage),
   the lower panel (40 px folded) and the Ficha. Drawers sit under the header, beside the rail, and never
   resize the stage. Tokens only, both themes; the stage, the Ficha body, the Bitacora rows and the
   drawers' own content keep their colours until their tasks (T2.2, T2.4, T2.5, F4). No transition on
   the columns: the stage keeps one size through the handoff of a run.
   ------------------------------------------------------------------------------------------------ */
.ws {
  --ws-lateral: var(--ev-lateral);
  --ws-ficha: var(--ev-ficha);
  --ws-tools: 44px;
  --ws-dock-h: var(--ev-dock);
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: var(--ws-lateral) minmax(0, 1fr) var(--ws-ficha) var(--ws-tools);
  grid-template-rows: 56px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  color: var(--ev-text);
  font-size: 13px;
}
.ws[hidden] { display: none; }
.ws.no-lateral, .ws.presenting { --ws-lateral: 0px; }
.ws.no-ficha, .ws.presenting { --ws-ficha: 0px; }
.ws.dock-open { --ws-dock-h: max(220px, min(300px, 34vh)); }
.ws.is-narrow, .ws.presenting { --ws-dock-h: 0px; }

/* The header of the case: code, name (edited in place), state, analyst; the save chip; Exportar and Informe */
.ws-head { grid-row: 1; grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 0 16px 0 20px; background: var(--ev-surface); border-bottom: 1px solid var(--ev-border); line-height: var(--ev-lh); }
.ws-title { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.ws-code { flex: none; padding: 5px 7px; border-radius: 6px; background: var(--ev-surface-2); color: var(--ev-text-2); font: 500 12.5px/1 var(--ev-font-mono); white-space: nowrap; }
.ws-h1 { min-width: 0; margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.ws-title-btn, .ws-title-text { display: block; max-width: 100%; min-height: 32px; overflow: hidden; padding: 0 6px; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--ev-text); font: inherit; line-height: 30px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.ws-title-btn { cursor: text; }
.ws-title-btn:hover { border-color: var(--ev-border-strong); background: var(--ev-surface-2); }
.ws-title-input { flex: 1 1 auto; width: auto; min-width: 160px; max-width: 520px; height: 32px; font-size: 15px; font-weight: 600; }
.ws-status { flex: none; }
.ev-status.is-bad { background: var(--ev-bad-soft); color: var(--ev-bad); }
.ev-status.is-none { border-color: var(--ev-border-strong); background: transparent; color: var(--ev-text-3); }
.ws-analyst { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; color: var(--ev-text-3); }
.ws-analyst .ev-avatar { margin: 0; }
.ws-snap { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; padding-left: 14px; border-left: 1px solid var(--ev-border); }
.ws-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 320px; height: 32px; padding: 0 9px 0 10px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-pill); background: var(--ev-surface); color: var(--ev-text-2); font: 500 12px/1 var(--ev-font-ui); white-space: nowrap; cursor: pointer; }
.ws-chip:hover, .ws-chip[aria-expanded="true"] { border-color: var(--ev-border-strong); background: var(--ev-surface-2); }
.ws-chip-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ws-chip .ev-ic { width: 13px; height: 13px; color: var(--ev-text-3); }
.ws-chip-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ev-ok); }
.ws-chip.is-singuardar { border-color: color-mix(in srgb, var(--ev-doubt) 40%, transparent); color: var(--ev-doubt); }
.ws-chip.is-singuardar .ws-chip-dot, .ws-chip.is-demo .ws-chip-dot { background: var(--ev-doubt); }
.ws-chip.is-demo { color: var(--ev-doubt); }
.ws-chip.is-terminada .ws-chip-dot { background: var(--ev-brand); }
.ws-chip.is-viendo .ws-chip-dot { background: var(--ev-info); }
.ws-chip.is-error { border-color: color-mix(in srgb, var(--ev-bad) 45%, transparent); color: var(--ev-bad); }
.ws-chip.is-error .ws-chip-dot { background: var(--ev-bad); }
.ws-old-service { max-width: 340px; overflow: hidden; padding: 6px 9px; border-radius: 8px; background: var(--ev-doubt-soft); color: var(--ev-doubt); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ws-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.ws-vsep { width: 1px; height: 22px; margin: 0 4px; background: var(--ev-border); }
.ws-save-menu { width: 320px; }
@media (max-width: 1400px) { .ws-h1 { font-size: 14.5px; } .ws-chip { max-width: 190px; } .ws-old-service { max-width: 220px; } }
@media (max-width: 1380px) { .ws-actions .ws-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* The tools rail: the fourth column, after the header in the page so the keyboard reaches it before the stage */
.ws-tools { grid-row: 2; grid-column: 4; position: relative; z-index: 2; padding: 6px 0 10px; }

/* The lateral panel: search, entities by group, verdict filters, more filters, the run of the case */
.ws-lateral { grid-row: 2; grid-column: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--ev-surface); border-right: 1px solid var(--ev-border); }
.ws.no-lateral .ws-lateral, .ws.presenting .ws-lateral { visibility: hidden; border-right: 0; }
.lat-inner { width: var(--ev-lateral); flex: 1; min-height: 0; overflow: auto; padding: 14px 14px 20px; }
.lat-section { margin-top: 20px; }
.lat-section:first-child { margin-top: 0; }
.lat-h { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; font-size: 10.5px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; color: var(--ev-text-3); }
.lat-n { margin-left: auto; font: 500 11.5px/1 var(--ev-font-mono); letter-spacing: 0; text-transform: none; color: var(--ev-text-3); }
.lat-search { width: 100%; min-width: 0; }
.lat-grp-head { display: flex; align-items: center; gap: 10px; width: 100%; height: max(32px, calc(34px * var(--ev-density-row))); padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--ev-text); font: 500 13px/1.2 var(--ev-font-ui); text-align: left; cursor: pointer; }
.lat-grp-head:hover { background: var(--ev-surface-2); }
.lat-grp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lat-swatch { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--ev-t-otro)); }
.ws-chev { flex: none; width: 14px; height: 14px; color: var(--ev-text-3); transition: transform var(--ev-dur-2); }
[aria-expanded="true"] > .ws-chev { transform: rotate(90deg); }
.lat-list { margin: 0; padding: 2px 0 6px; list-style: none; }
.lat-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 4px 8px 4px 26px; border: 0; border-radius: 7px; background: none; color: var(--ev-text-2); font: 400 12.5px/1.3 var(--ev-font-ui); text-align: left; cursor: pointer; }
.lat-row:hover { background: var(--ev-surface-2); color: var(--ev-text); }
.lat-row.is-selected { background: var(--ev-brand-soft); color: var(--ev-text); }
.lat-row.is-discarded .lat-name { text-decoration: line-through; }
.lat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 2026-10-22 (docs/taxonomia-entidades/diseno.md): "vía {origen}" of a row only another entity reaches, in grey after its name */
.lat-via-n { flex: none; color: var(--ev-text-3); font-size: 11px; white-space: nowrap; }
/* 2026-10-22 (contacts in common): the grey count holds contacts «Mostrar solo contactos en común» hides: the hidden rows' italic */
.lat-via-n.is-hidden { font-style: italic; }
.lat-via { flex: 0 1 auto; max-width: 45%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ev-text-3); font-size: 11px; }
.lat-vglyph { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; font-size: 11px; font-weight: 700; }
.lat-vglyph.v-confirmed, .lat-chip.v-confirmed .lat-vmark { color: var(--ev-ok); }
.lat-vglyph.v-doubt, .lat-chip.v-doubt .lat-vmark { color: var(--ev-doubt); }
.lat-vglyph.v-unreviewed, .lat-chip.v-unreviewed .lat-vmark { color: var(--ev-text-3); }
.lat-vglyph.v-discarded { color: var(--ev-bad); }
.lat-new { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ev-brand); }
.lat-unread { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ev-bad); }
.lat-hint { margin: 2px 4px; color: var(--ev-text-3); font-size: 12px; line-height: 1.45; }
.lat-list .lat-hint { margin: 0; padding: 4px 8px 6px 26px; }
.lat-vfilters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px; }
.lat-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-pill); background: var(--ev-surface-2); color: var(--ev-text); font: 500 12.5px/1 var(--ev-font-ui); cursor: pointer; }
.lat-chip .lat-n { margin-left: 2px; color: var(--ev-text-2); }
.lat-chip.is-off { border-style: dashed; background: transparent; color: var(--ev-text-3); }
.lat-vmark { font-weight: 700; }
.lat-links { display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: 6px; }
.lat-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--ev-text-2); font: 400 12.5px/1 var(--ev-font-ui); cursor: pointer; }
.lat-link:hover, .lat-link[aria-pressed="true"] { color: var(--ev-brand); }
.lat-link .ev-ic { width: 14px; height: 14px; }
.lat-more { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--ev-text); font: 500 13px/1 var(--ev-font-ui); text-align: left; cursor: pointer; }
.lat-more:hover { background: var(--ev-surface-2); }
.lat-more > .ev-ic { width: 15px; height: 15px; color: var(--ev-text-3); }
.lat-more > .ws-chev { margin-left: auto; }
.lat-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ev-brand); color: var(--ev-on-brand); font: 600 10.5px/1 var(--ev-font-mono); }
.lat-filters { display: flex; flex-direction: column; gap: 2px; padding: 6px 6px 4px 10px; }
.lat-sub { margin: 4px 0 2px; font-size: 10.5px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; color: var(--ev-text-3); }
.lat-check { display: flex; align-items: center; gap: 8px; min-height: 32px; color: var(--ev-text-2); font-size: 12.5px; cursor: pointer; }
.lat-check input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--ev-brand); }
.lat-check-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lat-filters .ev-btn { align-self: flex-start; margin-top: 4px; }
.lat-run { display: flex; gap: 10px; width: 100%; padding: 9px 10px; border: 1px solid var(--ev-border); border-radius: 10px; background: var(--ev-surface); color: var(--ev-text); font: inherit; text-align: left; cursor: pointer; }
.lat-run:hover { border-color: var(--ev-border-strong); background: var(--row-hover); }
.lat-run > .ev-ic { width: 16px; height: 16px; margin-top: 1px; color: var(--ev-text-3); }
.lat-run-txt { min-width: 0; }
.lat-run-title { display: block; font: 500 12.5px/1.35 var(--ev-font-ui); }
.lat-run-line { display: block; margin-top: 2px; color: var(--ev-text-3); font: 400 11px/1.4 var(--ev-font-mono); }

/* The stage wrap: the bar of the views, the view, the lower panel and the Ficha (a column, a drawer or the floating card) */
.ws-body { grid-row: 2; grid-column: 2 / 4; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--ws-ficha); grid-template-rows: 44px minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.ws-viewbar { grid-row: 1; grid-column: 1; display: flex; align-items: center; gap: 8px; min-width: 0; height: 44px; padding: 0 10px 0 8px; background: var(--ev-surface); border-bottom: 1px solid var(--ev-border); container: wsbar / inline-size; }
.ws-flip .ev-ic { transform: scaleX(-1); }
.ev-icon-btn[aria-pressed="true"] { background: var(--ev-brand-soft); color: var(--ev-brand); }
.ws-tabs { display: flex; align-self: stretch; gap: 2px; min-width: 0; }
.ws-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 43px; padding: 0 12px; border: 0; background: none; color: var(--ev-text-2); font: 500 13px/1 var(--ev-font-ui); white-space: nowrap; cursor: pointer; }
.ws-tab .ev-ic { width: 16px; height: 16px; }
.ws-tab:hover:not(:disabled), .ws-tab[aria-selected="true"] { color: var(--ev-text); }
.ws-tab[aria-selected="true"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ev-brand); }
.ws-tab:disabled { color: var(--ev-text-3); cursor: default; }
.ws-viewbar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }
.ws-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 6px; color: var(--ev-text-2); font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.ws-switch input { position: absolute; left: 6px; top: 50%; width: 30px; height: 18px; margin: -9px 0 0; opacity: 0; cursor: pointer; }
.ws-switch-track { position: relative; flex: none; width: 30px; height: 18px; border-radius: 9px; background: var(--ev-surface-3); transition: background var(--ev-dur-1); }
.ws-switch-track::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ev-text-2); transition: transform var(--ev-dur-1); }
.ws-switch input:checked + .ws-switch-track { background: var(--ev-brand); }
.ws-switch input:checked + .ws-switch-track::after { background: var(--ev-on-brand); transform: translateX(12px); }
.ws-switch input:focus-visible + .ws-switch-track { outline: 2px solid var(--ev-focus); outline-offset: 2px; }
/* a narrow centre: the tabs lose their icons first, then the switch its words, then the tabs theirs (kept for assistive technology) */
@container wsbar (max-width: 660px) { .ws-tab .ev-ic { display: none; } .ws-tab { padding: 0 9px; } }
/* S12: with the sixth tab (Camino) the tabs lose their icons a little earlier, so the bar keeps its switches clear */
@container wsbar (max-width: 820px) { .ws-tab .ev-ic { display: none; } .ws-tab { padding: 0 9px; } }
/* S14: with the switch Cursor de tiempo the two switches keep only their track (their name stays for a screen reader and in the tip)
   below 860 px, so the bar of the views does not run longer than before */
@container wsbar (max-width: 860px) { .ws-switch .ws-switch-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@container wsbar (max-width: 560px) { .ws-switch-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@container wsbar (max-width: 440px) { .ws-tab .ev-ic { display: inline-block; } .ws-tab-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.ws-view { grid-row: 2; grid-column: 1; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--ev-stage); }

/* The stage toolbar (plan T2.1 step 3): disposition, zoom, fit, pointer, fullscreen, Ver de nuevo; the hint line and the zoom pill below */
.ws-toolbar-wrap { position: absolute; top: 12px; left: 0; right: 0; height: 0; z-index: 9; }
.ws-stage-tools { position: absolute; top: 0; right: 12px; display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--ev-border); border-radius: 11px; background: color-mix(in srgb, var(--ev-surface) 90%, transparent); box-shadow: var(--ev-shadow-2); backdrop-filter: blur(8px); }
.ws-sep { flex: none; width: 1px; height: 20px; margin: 0 2px; background: var(--ev-border); }
.ws-select-sm .ev-select { height: 32px; border-color: transparent; background: transparent; font-size: 12.5px; }
.ws-select-sm .ev-select:hover { background: var(--ev-surface-2); }
.ws-stage-tools .ev-btn .ev-ic { width: 15px; height: 15px; }
@media (max-width: 1200px) { .ws-stage-tools .ws-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.ws-filter-banner { position: absolute; left: 12px; top: 58px; z-index: 9; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 0 4px 0 12px; border-radius: 10px; background: var(--ev-doubt-soft); color: var(--ev-doubt); font-size: 12.5px; font-weight: 500; box-shadow: var(--ev-shadow-2); }
.ws-filter-banner > .ev-ic { width: 15px; height: 15px; }
.ws-filter-banner .ev-btn { color: var(--ev-text); }
/* the empty stage (I-77): where the order is written, over the sentence that names the run button (the stage keeps its own colours) */
.ws-empty-order { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 16px; }
.ws-empty-order p { margin: 0; color: var(--ev-text-2); }
/* T4.1: the guide of the manual way, in the tokens of both themes */
.ws-empty-eyebrow { color: var(--ev-text-2); font: 500 10.5px/1.2 var(--ev-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.ws-empty-open { min-height: 32px; padding: 6px 14px; border: 1px solid #2f8bff; border-radius: 8px; background: #0f2a55; color: #fff; font-size: 12.5px; cursor: pointer; }

/* T2.5: the lower panel (the prototype's dock, css/app.css and pantallas-c.css): a 40 px bar with the tabs Evidencia, Asistente and
   Bitacora, the hint of the tab shown, the phase of a run and the chevron; opened, min(300px, 34vh) and never under 220 px (plan 3.6);
   a drawer beside the rail in the narrow layout. Tokens only, both themes. The panel is a container (its Evidencia rows fold to two lines
   on a narrow centre) and sits over the view so the card of a person linked in an answer may reach above it. */
.ws-dock { position: relative; z-index: 11; grid-row: 3; grid-column: 1; display: flex; flex-direction: column; height: var(--ws-dock-h); min-width: 0; min-height: 0; background: var(--ev-surface); border-top: 1px solid var(--ev-border); container: wsdock / inline-size; }
.ws.is-narrow .ws-dock:not(.is-drawer), .ws.presenting .ws-dock { display: none; }
.ws-dock-bar { flex: none; display: flex; align-items: center; gap: 8px; height: 39px; min-width: 0; padding: 0 6px 0 8px; }
.ws-dock-tabs { display: flex; align-items: center; gap: 2px; flex: none; }
.ws-dock-tab { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 32px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: var(--ev-text-2); font: 500 12.5px/1 var(--ev-font-ui); white-space: nowrap; cursor: pointer; }
.ws-dock-tab .ev-ic { width: 15px; height: 15px; }
.ws-dock-tab:hover { background: var(--ev-surface-2); color: var(--ev-text); }
.ws-dock.is-open .ws-dock-tab[aria-selected="true"], .ws-dock.is-drawer .ws-dock-tab[aria-selected="true"] { background: var(--ev-brand-soft); color: var(--ev-brand); }
.ws-dock-count { font: 500 11px/1 var(--ev-font-mono); color: var(--ev-text-2); }
.ws-dock-hint { flex: 1 1 auto; min-width: 0; margin-left: 8px; overflow: hidden; color: var(--ev-text-3); font-size: 11.5px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.ws-dock-phase { flex: none; max-width: 40%; overflow: hidden; font: 500 11px/1.2 var(--ev-font-mono); text-overflow: ellipsis; white-space: nowrap; }
.ws-dock-chev { flex: none; }
.ws-dock-pane { flex: 1; display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--ev-border); }
.ws-dock-pane[hidden], .ws-dock:not(.is-open):not(.is-drawer) .ws-dock-pane { display: none; }
.ws-dock.is-drawer { position: absolute; grid-row: 1 / -1; grid-column: 1 / -1; top: 0; right: 0; bottom: 0; z-index: var(--ev-z-drawer); width: min(420px, 90vw); height: auto; border-top: 0; border-left: 1px solid var(--ev-border); box-shadow: var(--ev-shadow-3); animation: osintDrawerIn .2s ease both; }
.ws-dock.is-drawer .ws-dock-bar { flex-wrap: wrap; height: auto; min-height: 39px; gap: 6px; padding: 4px 10px; }
.ws-dock.is-drawer .ws-dock-hint { display: none; }
.ws-dock.is-drawer .osint-close { min-height: 32px; margin-left: auto; border-color: var(--ev-border-strong); background: var(--ev-surface); color: var(--ev-text); }
.ws-dock.is-drawer .osint-close:hover { background: var(--ev-surface-2); color: var(--ev-text); }
/* the tools line of a pane: the order of Evidencia, the filters of the Bitacora, and what they show */
.dk-tools { flex: none; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 14px; border-bottom: 1px solid var(--ev-border); }
.dk-tools-label { color: var(--ev-text-3); font-size: 12px; white-space: nowrap; }
.dk-seg { flex: none; padding: 2px; }
.dk-seg button { height: 32px; padding: 0 11px; font-size: 12.5px; }
.dk-tools-hint { margin-left: auto; min-width: 0; overflow: hidden; color: var(--ev-text-3); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.dk-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 0; padding: 14px 18px; text-align: center; }
.dk-empty .ev-empty-icon { width: 40px; height: 40px; border-radius: 12px; }
.dk-empty .ev-empty-icon .ev-ic { width: 20px; height: 20px; }
.dk-empty h3 { margin: 2px 0 0; color: var(--ev-text); font-size: 14px; font-weight: 600; }
.dk-empty p { max-width: 480px; margin: 0; color: var(--ev-text-2); font-size: 12.5px; line-height: 1.5; }
/* Evidencia: one row per page of the case (glyph, title and site, when it was read, its identity, the fingerprint of a Rama copy or
   Sin copia local, Ver and Verificar copia); under 820 px of panel the row takes two lines */
.dk-ev-list { flex: 1; min-height: 0; margin: 0; padding: 0; overflow: auto; list-style: none; }
.dk-ev-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 118px 150px 168px 82px; grid-template-areas: "g t w i p a" ". v v v v v"; align-items: center; column-gap: 12px; row-gap: 2px; padding: 6px 12px 6px 14px; border-bottom: 1px solid var(--ev-border); font-size: 12.5px; }
.dk-ev-row:hover { background: var(--row-hover); }
.dk-ev-glyph { grid-area: g; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--ev-border); border-radius: 7px; background: var(--ev-surface-2); color: var(--ev-text-3); }
.dk-ev-glyph .ev-ic { width: 15px; height: 15px; }
.dk-ev-row[data-evidence-kind="rama"] .dk-ev-glyph { color: var(--ev-brand); }
.dk-ev-t { grid-area: t; min-width: 0; }
.dk-ev-t strong { display: block; overflow: hidden; color: var(--ev-text); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.dk-ev-host { display: block; overflow: hidden; color: var(--ev-text-2); font: 400 11px/1.4 var(--ev-font-mono); text-overflow: ellipsis; white-space: nowrap; }
.dk-ev-when { grid-area: w; color: var(--ev-text-2); font: 400 11.5px/1.2 var(--ev-font-mono); white-space: nowrap; }
.dk-ev-ident { grid-area: i; justify-self: start; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; overflow: hidden; padding: 3px 9px 3px 8px; border-radius: var(--ev-r-pill); background: var(--ev-surface-2); color: var(--ev-text-2); font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.dk-ev-ident::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ev-neutral); }
.dk-ev-ident.is-subject::before, .dk-ev-ident.is-analyst::before { background: var(--ev-ok); }
.dk-ev-ident.is-supplied::before { background: var(--ev-info); }
.dk-ev-ident.is-doubt::before { background: var(--ev-doubt); }
.dk-ev-ident.is-unconfirmed::before { background: var(--ev-bad); }
.dk-ev-print, .dk-ev-nocopy { grid-area: p; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-ev-print { display: inline-flex; align-items: center; gap: 5px; color: var(--ev-text); font: 500 11px/1.2 var(--ev-font-mono); }
.dk-ev-print .ev-ic { flex: none; width: 13px; height: 13px; color: var(--ev-brand); }
.dk-ev-nocopy { color: var(--ev-text-2); font-size: 11.5px; }
.dk-ev-acts { grid-area: a; display: flex; justify-content: flex-end; gap: 4px; }
.dk-ev-verified { grid-area: v; margin: 0; color: var(--ev-text-2); font-size: 11.5px; line-height: 1.4; }
.dk-ev-verified.is-ok { color: var(--ev-ok); }
.dk-ev-verified.is-altered, .dk-ev-verified.is-error { color: var(--ev-bad); }
@container wsdock (max-width: 820px) {
  .dk-ev-row { grid-template-columns: 30px auto auto minmax(0, 1fr) auto; grid-template-areas: "g t t t a" "g w i p a" ". v v v v"; }
}
/* the drawer of the narrow layout (420 px): the identity on a line of its own */
@container wsdock (max-width: 540px) {
  .dk-ev-row { grid-template-columns: 30px auto minmax(0, 1fr) auto; grid-template-areas: "g t t a" "g w p a" "g i i a" ". v v v"; }
}
/* the Asistente: the conversation (the question on the right, the generated answer with its icon on the left and its numbered sources,
   whose number shows the entity in the Ficha), the suggested questions, the field and its note */
.dk-chat { position: relative; }
.dk-chat-log { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 12px 18px 8px; }
.dk-chat-lead { margin: 0; color: var(--ev-text-3); font-size: 11.5px; line-height: 1.45; }
.dk-chat-empty { color: var(--ev-text-2); font-size: 12.5px; line-height: 1.5; }
.osint-asst-turn { display: flex; flex-direction: column; gap: 8px; }
.osint-asst-turn .q { align-self: flex-end; max-width: 70%; padding: 8px 12px; border-radius: 12px 12px 3px 12px; background: var(--ev-brand-soft); color: var(--ev-text); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.osint-asst-turn .q .who { display: block; margin-bottom: 2px; color: var(--ev-text-2); font: 600 10px/1.3 var(--ev-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.osint-asst-turn .a { align-self: flex-start; display: flex; gap: 10px; max-width: 760px; color: var(--ev-text); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.osint-asst-turn .a .who-ic { display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin-top: 1px; border-radius: 8px; background: var(--ev-surface-2); color: var(--ev-brand); }
.osint-asst-turn .a .who-ic .ev-ic { width: 15px; height: 15px; }
.osint-asst-turn .a .body { flex: 1; min-width: 0; }
.osint-asst-turn .a .text p { margin: 0 0 6px; }
.osint-asst-turn .a .osint-caption { display: block; margin-top: 6px; color: var(--ev-text-2); }
.osint-asst-turn .a.none { display: block; padding: 8px 12px; border: 1px solid var(--ev-border); border-radius: 10px; }
.osint-asst-turn .a.warn { display: block; padding: 8px 12px; border: 1px solid var(--ev-border); border-left: 3px solid var(--ev-doubt); border-radius: 10px; }
.osint-asst-turn .a.pending { align-items: center; gap: 8px; color: var(--ev-text-2); font-style: italic; }
.osint-asst-turn .spin { flex: none; width: 14px; height: 14px; border: 2px solid var(--ev-border-strong); border-top-color: var(--ev-brand); border-radius: 50%; animation: osintSpin .9s linear infinite; }
.osint-asst-turn .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.dk-gen { color: var(--ev-text-3); font-size: 11.5px; }
.osint-asst-cites { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.osint-asst-cites li { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ev-text-2); font-size: 12px; }
.osint-asst-cites .n { flex: none; min-width: 32px; color: var(--ev-brand); font: 600 11px/1 var(--ev-font-mono); text-align: center; }
.dk-cite-n { display: inline-grid; place-items: center; flex: none; min-width: 32px; height: 32px; padding: 0 6px; border: 1px solid var(--ev-border-strong); border-radius: 8px; background: var(--ev-surface); color: var(--ev-brand); font: 600 11.5px/1 var(--ev-font-mono); cursor: pointer; }
.dk-cite-n:hover { border-color: var(--ev-brand); background: var(--ev-brand); color: var(--ev-on-brand); }
.osint-asst-cites .src { flex: none; color: var(--ev-text-3); font: 500 11px/1.3 var(--ev-font-mono); }
.osint-asst-cites .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osint-asst-cites a.title { color: var(--ev-brand); }
.dk-chat-foot { flex: none; padding: 8px 14px; border-top: 1px solid var(--ev-border); }
.dk-chat-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dk-chip { min-height: 32px; max-width: 100%; padding: 4px 12px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-pill); background: var(--ev-surface-2); color: var(--ev-text); font: 500 12.5px/1.3 var(--ev-font-ui); text-align: left; cursor: pointer; }
.dk-chip:hover:not(:disabled) { border-color: var(--ev-border-strong); }
.dk-chip:disabled { opacity: .5; cursor: not-allowed; }
.dk-chat-input { display: flex; align-items: flex-end; gap: 8px; }
.dk-chat-field { flex: 1; height: 36px; min-height: 36px; max-height: 96px; padding: 8px 12px; line-height: 1.35; resize: vertical; }
.dk-chat-note { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--ev-text-3); font-size: 11px; }
.dk-chat-note .ev-ic { width: 12px; height: 12px; }
/* the Bitacora: each line its time, its mark (the phase by its colour family) and its text with the site of a reading line; the filters
   hide lines and keep their place; the line a run is writing is lit and blinks its caret */
.dk-log-list { flex: 1; min-height: 0; overflow: auto; padding: 4px 0 8px; scroll-behavior: smooth; }
.dk-log-row { display: grid; grid-template-columns: 64px 104px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 6px 16px; border-bottom: 1px solid var(--ev-border); font-size: 12.5px; line-height: 1.45; }
.dk-log-row[hidden] { display: none; }
.dk-log-row:last-of-type { border-bottom: 0; }
.dk-log-row.is-live { background: var(--row-hover); animation: osintIn .25s ease-out; }
.dk-log-t { grid-column: 1; grid-row: 1; color: var(--ev-text-3); font: 400 11.5px/1.45 var(--ev-font-mono); white-space: nowrap; }
.dk-log-kind { grid-column: 2; grid-row: 1; justify-self: start; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--ev-border-strong); border-radius: 5px; color: var(--ev-text-2); font: 600 9.5px/1 var(--ev-font-mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.dk-log-kind.k-brand { color: var(--ev-brand); border-color: color-mix(in srgb, var(--ev-brand) 40%, transparent); }
.dk-log-kind.k-doubt { color: var(--ev-doubt); border-color: color-mix(in srgb, var(--ev-doubt) 40%, transparent); }
.dk-log-kind.k-persona { color: var(--ev-t-persona); border-color: color-mix(in srgb, var(--ev-t-persona) 40%, transparent); }
.dk-log-kind.k-org { color: var(--ev-t-org); border-color: color-mix(in srgb, var(--ev-t-org) 40%, transparent); }
.dk-log-kind.k-info { color: var(--ev-info); border-color: color-mix(in srgb, var(--ev-info) 40%, transparent); }
.dk-log-kind.k-contacto { color: var(--ev-t-contacto); border-color: color-mix(in srgb, var(--ev-t-contacto) 40%, transparent); }
.dk-log-kind.k-ok { color: var(--ev-ok); border-color: color-mix(in srgb, var(--ev-ok) 40%, transparent); }
.dk-log-kind.k-bad { color: var(--ev-bad); border-color: color-mix(in srgb, var(--ev-bad) 40%, transparent); }
.dk-log-text { grid-column: 3; grid-row: 1; min-width: 0; color: var(--ev-text); overflow-wrap: anywhere; }
.dk-log-site { display: block; max-width: 100%; overflow: hidden; color: var(--ev-text-2); font: 400 11px/1.4 var(--ev-font-mono); text-overflow: ellipsis; white-space: nowrap; }
.dk-log-site:hover { color: var(--ev-brand); }
.dk-log-text .osint-log-change { color: var(--ev-brand); }
.dk-caret { margin-left: 1px; color: var(--ev-brand); animation: osintBlink 1s steps(1) infinite; }
.dk-caret.is-off { display: none; }
.dk-log-foot { margin: 6px 16px 0; padding: 6px 8px; border: 1px dashed var(--ev-border-strong); border-radius: 7px; color: var(--ev-brand); font: 400 11px/1.4 var(--ev-font-mono); }
.dk-blink { margin-left: 2px; animation: osintBlink 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .dk-caret, .dk-blink, .dk-log-row.is-live, .ws-dock.is-drawer { animation: none; } .dk-log-list { scroll-behavior: auto; } }
/* the card of a cited page: the fingerprint of a Rama copy and its check */
.fx-cap-print { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 12px; padding: 10px 12px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-md); background: var(--ev-surface-2); }
.fx-cap-print-head { display: flex; align-items: center; gap: 6px; color: var(--ev-text); font-size: 12.5px; font-weight: 600; }
.fx-cap-print-head .ev-ic { width: 14px; height: 14px; color: var(--ev-brand); }
.fx-cap-print-when { margin-left: auto; color: var(--ev-text-2); font: 400 11px/1.3 var(--ev-font-mono); }
.fx-cap-hash { display: block; padding: 6px 8px; border-radius: 6px; background: var(--ev-surface); color: var(--ev-text); font: 400 11.5px/1.5 var(--ev-font-mono); word-break: break-all; }
.fx-cap-print-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fx-cap-verified { margin: 0; color: var(--ev-text-2); font-size: 12px; line-height: 1.45; }
.fx-cap-verified.is-ok { color: var(--ev-ok); }
.fx-cap-verified.is-altered, .fx-cap-verified.is-error { color: var(--ev-bad); }

/* The drawer Investigar desde este caso (rail I) under the header of the case, beside the rail: since T4.1 it holds the composer of
   Nuevo caso (OsintComposer, the .nc-* rules below); the identity anchor strip of the confirmation drawer keeps the .ws-anchor rules */
.ws-inv { position: absolute; top: 56px; right: 44px; bottom: 0; z-index: var(--ev-z-drawer); display: flex; flex-direction: column; width: min(560px, 90vw); background: var(--ev-surface); color: var(--ev-text); border-left: 1px solid var(--ev-border); box-shadow: var(--ev-shadow-3); line-height: var(--ev-lh); animation: osintDrawerIn .2s ease both; }
.ws-inv[hidden] { display: none; }
.ws-drawer-head { flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 12px 18px; border-bottom: 1px solid var(--ev-border); }
.ws-drawer-titles { flex: 1; min-width: 0; }
.ws-drawer-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.ws-drawer-sub { margin: 3px 0 0; font-size: 12px; line-height: 1.4; color: var(--ev-text-3); }
.ws-anchor { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 12px; border: 1px solid var(--ev-border); border-radius: 11px; background: var(--ev-surface-2); color: var(--ev-text); }
.ws-anchor.is-ck { flex: none; margin: 10px 14px 0; }
.ws-anchor-head { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0; border: 0; background: none; color: var(--ev-text); font: 600 12.5px/1.2 var(--ev-font-ui); text-align: left; cursor: pointer; }
.ws-anchor-title { white-space: nowrap; }
.ws-anchor-note { margin-left: auto; color: var(--ev-text-2); font: 500 10.5px/1.2 var(--ev-font-mono); text-align: right; }
.ws-anchor[data-anchor="locked"] .ws-anchor-note, .nc-anchor[data-anchor="locked"] .ws-anchor-note { color: var(--ev-doubt); }
.ws-anchor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.ws-anchor-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ws-anchor-label { color: var(--ev-text-2); font: 500 10px/1.2 var(--ev-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.ws-anchor-input { height: 32px; font-size: 13px; }
.ws-anchor-input:disabled { background: var(--ev-surface-2); color: var(--ev-text-2); }
.ws-anchor-help { margin: 0; color: var(--ev-text-2); font-size: 12px; line-height: 1.45; }

/* ---- T4.1 (plan T4.1; the prototype's app.css Nuevo caso and Automatica, pantallas-c.css .anchor-form and .demo-switch): Nuevo caso.
   The three ways under Más opciones and over the line of the barrier; the composer on its page, the form beside the note of what the
   system will do, and in the drawer of the rail I, the same form in one column under the head of the drawer. Tokens only. ---- */
.nc-page { max-width: 1080px; }
.nc-more { margin-bottom: 20px; }
.nc-more-toggle { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 32px; padding: 0 4px; border: 0; border-radius: 6px; background: none; color: var(--ev-text-2); font: 500 13px/1.2 var(--ev-font-ui); cursor: pointer; }
.nc-more-toggle:hover { color: var(--ev-text); }
.nc-more-toggle .ev-ic { width: 14px; height: 14px; transition: transform var(--ev-dur-2) var(--ev-ease); }
.nc-more-toggle[aria-expanded="true"] .ev-ic { transform: rotate(180deg); }
.nc-meta-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; margin-top: 12px; padding: 16px; border: 1px solid var(--ev-border); border-radius: 12px; background: var(--ev-surface); }
.nc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nc-field.is-wide, .nc-meta-note { grid-column: 1 / -1; }
.nc-meta-note { margin: 0; }
.nc-label { color: var(--ev-text-2); font-size: 12.5px; font-weight: 600; }
.nc-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nc-way { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 24px; border: 1px solid var(--ev-border); border-radius: 16px; background: var(--ev-surface); transition: border-color var(--ev-dur-2), box-shadow var(--ev-dur-2); }
.nc-way:hover { border-color: color-mix(in srgb, var(--ev-brand) 45%, var(--ev-border)); box-shadow: var(--ev-shadow-2); }
.nc-way.is-off:hover { border-color: var(--ev-border); box-shadow: none; }
.nc-way-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ev-brand-soft); color: var(--ev-brand); }
.nc-way-ic .ev-ic { width: 22px; height: 22px; }
.nc-way.is-off .nc-way-ic { background: var(--ev-surface-2); color: var(--ev-text-3); }
.nc-way-name { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.nc-way-promise { margin: 6px 0 0; min-height: 42px; color: var(--ev-text-2); font-size: 14px; line-height: 1.5; }
.nc-way-dl { display: flex; flex-direction: column; gap: 12px; margin: 0; padding-top: 14px; border-top: 1px solid var(--ev-border); }
.nc-way-dl dt { margin-bottom: 3px; color: var(--ev-text-3); font-size: 11px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.nc-way-dl dd { margin: 0; color: var(--ev-text); font-size: 13.5px; line-height: 1.45; }
.nc-way-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
.nc-time { display: inline-flex; align-items: center; gap: 6px; color: var(--ev-text-3); font: 500 12px/1 var(--ev-font-mono); }
.nc-time .ev-ic { width: 14px; height: 14px; }
/* T5.5: where the questions of the Asistida way are asked in this installation (no status word) */
.nc-where { min-width: 0; color: var(--ev-text-2); font-size: 12px; font-weight: 500; line-height: 1.35; }
.nc-barrier { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px 0 0; color: var(--ev-text-2); font-size: 13px; }
.nc-barrier .ev-ic { flex: none; width: 16px; height: 16px; color: var(--ev-brand); }
/* the composer */
.nc-auto { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.nc-composer { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px 24px 20px; border: 1px solid var(--ev-border); border-radius: 16px; background: var(--ev-surface); }
.nc-text { height: auto; min-height: 200px; padding: 14px 16px; border-radius: 11px; font-size: 15px; line-height: 1.6; resize: vertical; }
.nc-text[aria-invalid="true"], .nc-text[aria-invalid="true"]:focus { border-color: var(--ev-bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev-bad) 22%, transparent); transition: none; }
.nc-error { margin: 0; color: var(--ev-bad); font-size: 12.5px; }
.nc-hint { margin: 0; color: var(--ev-text-2); font-size: 12px; line-height: 1.45; }
.nc-from { margin: 0; padding: 8px 12px; border-radius: 9px; background: var(--ev-brand-soft); color: var(--ev-text); font-size: 12.5px; line-height: 1.45; }
.nc-opts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; margin-top: 6px; }
.nc-opts .nc-field { gap: 8px; }
.nc-options { display: flex; flex-direction: column; gap: 10px; }
.nc-anchor { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; border: 1px solid var(--ev-border); border-radius: 11px; background: var(--ev-surface-2); }
.nc-anchor-head { display: flex; align-items: center; gap: 10px; }
.nc-anchor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.nc-demo { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--ev-surface-2); color: var(--ev-text-2); font-size: 12.5px; line-height: 1.45; cursor: pointer; }
.nc-demo input { position: absolute; z-index: 1; left: 12px; top: 50%; width: 30px; height: 18px; margin: -9px 0 0; opacity: 0; cursor: pointer; }
.nc-demo input:checked + .ws-switch-track { background: var(--ev-brand); }
.nc-demo input:checked + .ws-switch-track::after { background: var(--ev-on-brand); transform: translateX(12px); }
.nc-demo input:focus-visible + .ws-switch-track { outline: 2px solid var(--ev-focus); outline-offset: 2px; }
.nc-demo input:disabled, .nc-demo input:disabled + .ws-switch-track { cursor: default; opacity: 0.6; }
.nc-demo b { color: var(--ev-text); font-weight: 600; }
.nc-demo-text { min-width: 0; }
.nc-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--ev-border); }
.nc-note { flex: 1; min-width: 0; color: var(--ev-text-2); font-size: 12.5px; line-height: 1.45; }
.nc-run { --h: 40px; flex: none; padding: 0 18px; font-size: 14px; font-weight: 600; }
.nc-run[disabled] { opacity: 0.7; cursor: default; }
.nc-health { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-top: 12px; border-top: 1px solid var(--ev-border); }
.nc-health-label { color: var(--ev-text-2); font-size: 11.5px; }
.nc-health .osint-dot { color: var(--ev-text-2); font-size: 11px; }
.nc-side { padding: 22px 24px; border: 1px solid var(--ev-border); border-radius: 16px; background: var(--ev-surface-2); }
.nc-side-title { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.nc-steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.nc-steps li { display: flex; gap: 12px; color: var(--ev-text-2); font-size: 13.5px; line-height: 1.5; }
.nc-step-n { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1px solid var(--ev-border-strong); border-radius: 50%; background: var(--ev-surface); color: var(--ev-text-2); font: 600 11px/1 var(--ev-font-mono); }
.nc-stop { display: flex; gap: 10px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--ev-border); color: var(--ev-text); font-size: 13px; font-weight: 500; line-height: 1.45; }
.nc-stop .ev-ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ev-brand); }
/* the profile pill of the order and its menu (M1), in the tokens of both themes */
.nc-composer .osint-profile-pill { min-height: 36px; border-color: var(--ev-border-strong); background: var(--ev-surface); color: var(--ev-text); }
.nc-composer .osint-profile-pill:hover, .nc-composer .osint-profile-pill[aria-expanded="true"] { border-color: var(--ev-focus); background: var(--ev-brand-soft); color: var(--ev-text); }
.nc-composer .osint-profile-pill .caret { color: var(--ev-text-3); }
.nc-composer .osint-profile-menu { left: 0; right: auto; background: var(--ev-surface); border-color: var(--ev-border-strong); box-shadow: var(--ev-shadow-3); }
.nc-composer .osint-profile-option:hover, .nc-composer .osint-profile-option:focus-visible { background: var(--ev-surface-2); }
.nc-composer .osint-profile-option .pname, .nc-composer .osint-profile-option.on .pname { color: var(--ev-text); }
.nc-composer .osint-profile-option .phint { color: var(--ev-text-2); }
.nc-composer .osint-profile-option.on::before { color: var(--ev-ok); }
.nc-composer .osint-profile-picker { align-self: flex-start; }
/* in the drawer: the head, then the form in one column, scrolling under it */
.ws-inv > .sc-host { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ws-inv .ws-drawer-head { flex: none; }
.ws-inv .nc-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ws-inv .nc-auto { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: auto; padding: 14px 18px 20px; }
.ws-inv .nc-composer { padding: 0; border: 0; border-radius: 0; background: none; }
.ws-inv .nc-text { min-height: 110px; font-size: 14px; }
.ws-inv .nc-anchor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ws-inv .nc-stop { margin-top: 16px; }
@media (max-width: 1200px) { .nc-ways, .nc-auto { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .nc-meta-grid, .nc-opts { grid-template-columns: minmax(0, 1fr); } .nc-anchor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .nc-more-toggle .ev-ic, .nc-way { transition: none; } }

/* ------------------------------------------------------------------------------------------------
   Tools (T4.1 to T4.2c): the 44 px rail, the drawers and modals it opens and the in-app dialog.
   Overlays never move the stage: the rail is the fourth column of the body grid, drawers are
   position:absolute over the grid (right: the rail), modals and the dialog are fixed over the page.
   ------------------------------------------------------------------------------------------------ */

/* Rail: the icon of the tool (the sprite) and its count; the tool's name and its letter travel in the tip and the aria-label (T4.3: the
   letter left the button for the tip, "Casos y fotos guardadas · H"). T2.1: the fourth column of the workspace, in tokens (the prototype's
   .ws-tools and .tool-btn) */
/* overflow stays visible: the tool tooltips (::after, 8px to the left of the rail) are clipped by any other value */
.osint-dock { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 0; padding: 8px 0 10px; overflow: visible; background: var(--ev-surface); border-left: 1px solid var(--ev-border); }
.osint-tool { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--ev-text-2); cursor: pointer; transition: background-color var(--ev-dur-1), color var(--ev-dur-1); }
.osint-tool .ev-ic { width: 18px; height: 18px; }
.osint-tool:hover { background: var(--ev-surface-2); color: var(--ev-text); }
.osint-tool.on { background: var(--ev-brand-soft); color: var(--ev-brand); }
.osint-tool.on::before { content: ""; position: absolute; right: -4px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--ev-brand); }
.osint-tool .count { position: absolute; top: 1px; right: -2px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--ev-surface-3); color: var(--ev-text-2); font: 600 9.5px/15px var(--ev-font-mono); text-align: center; box-shadow: 0 0 0 2px var(--ev-surface); }
.osint-tool.on .count { background: var(--ev-brand); color: var(--ev-on-brand); }
/* The rail's own tooltip: to the left of the button, at once, never under the cursor nor clipped by the window edge
   (the browser's native title appeared below the pointer and was cut on the right). */
.osint-tool[data-tip]:hover::after, .osint-tool[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 6px 10px; border-radius: 7px; background: var(--toast-bg); color: var(--toast-fg); font: 500 11.5px/1 var(--ev-font-ui); box-shadow: var(--ev-shadow-2); pointer-events: none; z-index: 30; }
.osint-tool[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.osint-tool[aria-disabled="true"]:hover { background: transparent; }
.osint-dock-sep { flex: none; width: 20px; height: 1px; margin: 5px 0; background: var(--ev-border); }
/* T4.3: the separator before Ajustes and Exportar takes the rest of the column (the prototype's tools-sep push) */
.osint-dock-sep.is-push { margin-top: auto; }

/* Drawer parts (the container's position and width come from the shell) */
.osint-close { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #27344d; border-radius: 7px; background: #131c2e; color: #b8c5da; font-size: 11.5px; white-space: nowrap; cursor: pointer; }
.osint-close:hover { background: #1b2740; color: #dfe6f2; }

/* Buttons, fields, captions */
.osint-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border: 1px solid #27344d; border-radius: 9px; background: #131c2e; color: #b8c5da; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.osint-btn:hover { background: #1b2740; color: #dfe6f2; }
.osint-btn.primary { background: #0f2a55; border-color: #2f8bff; color: #fff; font-weight: 700; }
.osint-btn.primary:hover { background: #143a75; }
.osint-btn.danger { background: #1a0f14; border-color: #3a1a1a; color: #e7a3a3; }
.osint-btn.danger:hover { background: #2a1519; }
.osint-btn.ghost { background: transparent; border-color: transparent; color: #9fb0c8; }
.osint-btn.ghost:hover { background: #1b2740; color: #dfe6f2; }
.osint-btn.done { background: #35d0a51f; border-color: #35d0a566; color: #35d0a5; }
.osint-btn.quiet { color: #9fb0c8; }
.osint-btn.sm { padding: 6px 10px; font-size: 11.5px; border-radius: 7px; }
.osint-btn.xs { padding: 4px 9px; font-size: 11px; border-radius: 6px; }
.osint-btn.icon { padding-left: 8px; padding-right: 8px; }
.osint-btn[aria-expanded="true"] { border-color: #2f8bff; color: #fff; background: #1d2a42; }
.osint-btn:disabled { opacity: .45; cursor: not-allowed; }
.osint-link { padding: 0; border: 0; background: transparent; color: #7fb4ff; font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.osint-link:hover { color: #b6d3ff; text-decoration: underline; }
.osint-input, .osint-textarea { width: 100%; padding: 9px 12px; background: #131c2e; border: 1px solid #27344d; border-radius: 9px; color: #fff; font-size: 13px; outline: none; }
.osint-input:focus, .osint-textarea:focus { border-color: #2f8bff; box-shadow: 0 0 0 3px #2f8bff33; }
.osint-input::placeholder, .osint-textarea::placeholder { color: #6f7f99; }
.osint-input.sm { padding: 6px 9px; font-size: 12px; border-radius: 7px; }
.osint-input.mono { font-family: 'DM Mono', monospace; font-size: 12px; }
.osint-input[readonly] { color: #9fb0c8; }
.osint-textarea { min-height: 110px; resize: vertical; font-size: 12px; line-height: 1.45; }
.osint-field { display: flex; flex-direction: column; gap: 5px; }
.osint-caption, .osint-field > label { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #6f83a3; font-weight: 600; }
.osint-help { font-size: 11px; color: #8193ad; line-height: 1.4; }
.osint-note { font-size: 12px; color: #9fb0c8; line-height: 1.45; }
.osint-list-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.osint-hint-text { font: 400 10.5px 'DM Mono', monospace; color: #6f7f99; white-space: nowrap; }
.osint-host { font: 400 10.5px 'DM Mono', monospace; color: #6f83a3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osint-date { font: 400 10.5px 'DM Mono', monospace; color: #6f7f99; white-space: nowrap; }
.osint-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border: 1px solid #2f3d58; border-bottom-width: 2px; border-radius: 4px; background: #131c2e; font: 400 10px 'DM Mono', monospace; color: #b8c5da; }
.osint-search { position: relative; }
.osint-search::before { content: "⌕"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #8193ad; font-size: 14px; pointer-events: none; }
.osint-search .osint-input { padding-left: 30px; }

/* Pills: run status of a case and origin of a manual source */
.osint-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid #27344d; border-radius: 999px; background: #131c2e; font: 500 10px/16px 'DM Mono', monospace; letter-spacing: .04em; text-transform: uppercase; color: #9fb0c8; white-space: nowrap; }
.osint-pill.done { color: #35d0a5; border-color: #35d0a555; background: #35d0a512; }
.osint-pill.running { color: #7fb4ff; border-color: #2f8bff66; background: #2f8bff14; }
.osint-pill.awaiting { color: #f5b84b; border-color: #f5b84b66; background: #f5b84b14; }
.osint-pill.cancelled { color: #ef4444; border-color: #ef444466; background: #ef444414; }
.osint-pill.origin-pasted { color: #b8c5da; }
.osint-pill.origin-rama { color: #c08bff; border-color: #a855f766; background: #a855f712; }
.osint-pill.origin-wanted { color: #fb923c; border-color: #fb923c66; background: #fb923c12; }
/* E9: a row of the local index of public records used as a source */
.osint-pill.origin-registro { color: #8cbeff; border-color: #2f8bff66; background: #2f8bff12; }

/* Overflow menu of a row */
.osint-menu { position: absolute; z-index: 25; right: 6px; top: calc(100% - 8px); min-width: 168px; padding: 4px; background: #0d1526; border: 1px solid #2f3d58; border-radius: 9px; box-shadow: 0 18px 48px #00000080; }
.osint-menu-item { display: flex; width: 100%; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: #b8c5da; font-size: 12.5px; text-align: left; cursor: pointer; }
.osint-menu-item:hover { background: #1b2740; color: #dfe6f2; }
.osint-menu-item.danger { color: #e7a3a3; }

/* Casos */
.osint-open-case { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #2f8bff10; border: 1px solid #2f8bff55; border-radius: 12px; }
.osint-open-case .who { flex: 1; min-width: 0; }
.osint-open-case .name { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osint-open-case .sub { font-size: 11px; color: #8193ad; margin-top: 2px; line-height: 1.4; }
.osint-open-case .unsaved { color: #f5b84b; font-weight: 600; }
.osint-case-list { display: flex; flex-direction: column; }
.osint-case-row { position: relative; padding: 9px 6px 10px; border-bottom: 1px solid #1c2740; }
.osint-case-row.open { box-shadow: inset 2px 0 0 #2f8bff; padding-left: 10px; }
.osint-case-row .l1 { display: flex; align-items: baseline; gap: 8px; }
.osint-case-row .name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #dfe6f2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osint-case-row.open .name { color: #fff; }
.osint-case-row .order { margin-top: 2px; font-size: 11px; color: #8193ad; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osint-case-row .stats { display: block; margin-top: 3px; font: 400 10px 'DM Mono', monospace; color: #6f7f99; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osint-case-row .stats .confirmed { color: #35d0a5; }
/* cost and effort of the case (proposal 7): one quiet line under its figures */
.osint-case-row .effort { display: block; margin-top: 2px; font: 400 10px 'DM Mono', monospace; color: #8193ad; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osint-case-row .l4 { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.osint-case-row .l4 .actions { margin-left: auto; display: flex; gap: 4px; }
.osint-case-row .open-tag { font: 400 10px 'DM Mono', monospace; color: #8cbeff; letter-spacing: .04em; text-transform: uppercase; }

/* Fuentes */
.osint-paste-note { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; background: #f5b84b0f; border: 1px dashed #f5b84b66; border-radius: 9px; font-size: 11.5px; color: #b8c5da; line-height: 1.45; }
.osint-paste-note .glyph { flex: none; color: #f5b84b; font-size: 14px; line-height: 1.2; }
.osint-source-list { display: flex; flex-direction: column; }
.osint-source-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 4px; border-bottom: 1px solid #1c2740; }
.osint-source-row .main { flex: 1; min-width: 0; }
.osint-source-row .title { font-size: 12.5px; font-weight: 600; color: #dfe6f2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osint-source-row .meta { display: flex; align-items: center; gap: 6px 8px; margin-top: 4px; flex-wrap: wrap; min-width: 0; }
.osint-source-row .excerpt { margin-top: 4px; font-size: 11px; color: #8193ad; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.osint-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Rostros */

/* Procesos */
.osint-rama-note { display: flex; gap: 10px; align-items: flex-start; padding: 8px 11px; background: #a855f70f; border: 1px solid #a855f74d; border-radius: 9px; font-size: 11.5px; color: #b8c5da; line-height: 1.4; }
.osint-rama-note .glyph { flex: none; font-size: 16px; line-height: 1.1; color: #c08bff; }
.osint-search-row { display: flex; gap: 8px; align-items: center; }
.osint-search-row .osint-input { flex: 1; min-width: 0; }
.osint-id-row { display: flex; gap: 6px 8px; align-items: baseline; flex-wrap: wrap; font-size: 11.5px; color: #8193ad; }
.osint-lock { font: 400 10.5px 'DM Mono', monospace; color: #f5b84b; border: 1px solid #f5b84b55; background: #f5b84b12; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.osint-result-note { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: #b8c5da; line-height: 1.35; }
.osint-result-note .text { flex: 1; min-width: 0; }
.osint-proc-list { display: flex; flex-direction: column; gap: 8px; }
.osint-proc { background: #131c2e; border: 1px solid #27344d; border-radius: 9px; }
.osint-proc.expanded { background: #0f172a; border-color: #2f3d58; }
.osint-proc.added { border-color: #35d0a566; }
.osint-proc .head { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; }
.osint-proc .main { flex: 1; min-width: 0; }
.osint-proc .radicado { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 400 12.5px 'DM Mono', monospace; color: #fff; letter-spacing: .02em; overflow-wrap: anywhere; }
.osint-proc .despacho { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: #dfe6f2; }
.osint-proc .despacho .dept { font-weight: 400; color: #9fb0c8; }
.osint-proc .dates { margin-top: 3px; font: 400 10.5px 'DM Mono', monospace; color: #6f7f99; }
.osint-proc .parties { margin-top: 3px; font-size: 11.5px; color: #9fb0c8; overflow-wrap: anywhere; }
.osint-proc .pactions { flex: none; width: 112px; display: flex; flex-direction: column; gap: 6px; }
.osint-proc .sheet { border-top: 1px dashed #27344d; padding: 8px 12px 9px; }
.osint-proc .facts { display: grid; grid-template-columns: auto 1fr auto 1fr; column-gap: 10px; row-gap: 3px; margin: 0; font-size: 11.5px; align-items: baseline; }
.osint-proc .facts dt { font: 400 10.5px 'DM Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #6f83a3; }
.osint-proc .facts dd { margin: 0; color: #dfe6f2; overflow-wrap: anywhere; }
.osint-proc .acts { margin: 2px 0 0; padding: 0; list-style: none; }
.osint-proc .acts li { display: flex; gap: 10px; align-items: baseline; padding: 1px 0; font-size: 11.5px; color: #b8c5da; }
.osint-proc .acts li .osint-date { flex: none; width: 76px; }
.osint-proc .sheet-foot { margin-top: 6px; font-size: 11px; color: #8193ad; line-height: 1.4; }
/* The local copy that "Agregar" keeps (T6.3): its progress under the row, with Cancelar */
.osint-proc.saving { border-color: #2f8bff88; }
.osint-proc-evid { display: flex; align-items: center; gap: 10px; padding: 7px 12px 8px; border-top: 1px dashed #27344d; font-size: 11.5px; color: #b8c5da; }
.osint-proc-evid .bar { flex: none; width: 72px; height: 4px; border-radius: 2px; background: #1d2a42; overflow: hidden; }
.osint-proc-evid .text { flex: 1; min-width: 0; }
.osint-source-evidence { margin-top: 4px; font: 400 10.5px 'DM Mono', monospace; color: #8193ad; }
.osint-source-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* The demonstration case in Casos (proposal 3): its pill in the simulation amber, so it never reads as a saved case */
.osint-pill.demo { color: #fbbf24; border-color: #6b5316; background: #2a2008; }
/* Verificar copia (proposal 2): the result under the source, green when every fingerprint matches, red when the copy changed */
.osint-source-verified { margin-top: 4px; padding: 4px 8px; border-radius: 7px; border: 1px solid #27344d; font-size: 11px; line-height: 1.45; color: #b8c5da; overflow-wrap: anywhere; }
.osint-source-verified.ok { border-color: #35d0a566; background: #35d0a514; color: #dfe6f2; }
.osint-source-verified.altered { border-color: #ef444499; background: #ef44441a; color: #fde2e2; }
.osint-source-verified.error { border-color: #f5b84b66; color: #f1f5fb; }
a.osint-btn { text-decoration: none; }
.osint-disclosure { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 10px; border: 1px dashed #27344d; border-radius: 9px; }
.osint-disclosure > button { display: inline-flex; gap: 6px; align-items: center; padding: 0; border: 0; background: transparent; color: #b8c5da; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.osint-disclosure .tri { font-family: 'DM Mono', monospace; color: #6f83a3; }

/* Modal and dialog */
.osint-modal-layer, .osint-dialog-layer { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: #000a; animation: osintFade .15s ease both; }
/* T2.4: the layers of the tokens (plan 4.1): a modal over the drawers of the workspace (the card of a cited page opens from the Ficha,
   a drawer under 1280 px; the photo modal opens from the Fotos drawer), the in-app dialog over a modal, the toasts over both */
.osint-modal-layer { z-index: var(--ev-z-modal); }
.osint-dialog-layer { z-index: calc(var(--ev-z-modal) + 5); }
.osint-modal { position: relative; width: min(720px, 100%); max-height: min(660px, 86vh); display: flex; flex-direction: column; background: #0d1526; border: 1px solid #2f3d58; border-radius: 14px; box-shadow: 0 18px 48px #00000080; }
.osint-modal-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; border-bottom: 1px solid #1c2740; }
.osint-modal-title { font-size: 15px; font-weight: 700; color: #fff; }
.osint-modal-sub { font-size: 11px; color: #8193ad; margin-top: 2px; }
.osint-modal-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 20px; display: flex; flex-direction: column; gap: 8px; }
.osint-modal-foot { flex: none; display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 11px 20px; border-top: 1px solid #1c2740; }
.osint-modal-foot .left { margin-right: auto; font-size: 11.5px; color: #8193ad; line-height: 1.4; }
.osint-dialog { width: min(440px, 100%); }
.osint-dialog .osint-modal-body { font-size: 13px; color: #dfe6f2; line-height: 1.5; }
.osint-dialog .osint-modal-body p { margin: 0; }
.osint-mono-note { font: 400 11px 'DM Mono', monospace; color: #6f83a3; overflow-wrap: anywhere; }


.osint-toggle { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 34px; height: 18px; margin: 0; border: 1px solid #27344d; border-radius: 999px; background: #1b2740; cursor: pointer; }
.osint-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #9fb0c8; transition: left .12s ease; }
.osint-toggle:checked { background: #0f2a55; border-color: #2f8bff; }
.osint-toggle:checked::after { left: 18px; background: #fff; }

/* Health dots: GET /health, generic names, fixed order; the value in the title attribute */
.osint-health { flex: none; display: grid; grid-template-columns: repeat(3, auto); column-gap: 12px; row-gap: 4px; }
.osint-dot { display: inline-flex; align-items: center; gap: 5px; font: 400 10px 'DM Mono', monospace; color: #8193ad; white-space: nowrap; }
.osint-dot::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #4a5d7e; box-shadow: 0 0 0 2px #4a5d7e33; }
.osint-dot.ok::before { background: #35d0a5; box-shadow: 0 0 0 2px #35d0a533; }
.osint-dot.warn::before { background: #f5b84b; box-shadow: 0 0 0 2px #f5b84b33; }
.osint-dot.down::before { background: #ef4444; box-shadow: 0 0 0 2px #ef444433; }
.osint-dot.unknown::before { background: transparent; border: 1px solid #8193ad; box-shadow: none; }

/* proposal 13: the Ficha's list of the other cases that name the entity (the dot on the stage is in the T2.2 block) */
.osint-ficha-cross { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 2px 0 4px; font-size: 11.5px; color: #b8c5da; }
.osint-ficha-cross .lead { color: #b8c5da; }

/* ------------------------------------------------------------------------------------------------
   Stage overlays: the hint lines that hide 8 s after the first use of the stage (T4.4). The legend
   and the counters of the stage are in the Stage block of T2.2; the pill that asked to zoom in is gone
   with the level of detail that hid the names (I-56).
   ------------------------------------------------------------------------------------------------ */
.osint-stage-hint { flex: 0 1 auto; min-width: 0; margin-top: 4px; padding: 2px 4px; border-radius: 6px; background: var(--ev-stage); text-align: right; font: 400 10px/14px var(--ev-font-mono); color: var(--ev-text-2); pointer-events: none; }
.osint-stage-hint > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------------------------------------
   Breakpoints and the accessibility baseline (T4.5). [data-layout] on the page: wide from 1280 px,
   medium from 1024 px (the Ficha is a drawer), narrow under 1024 px (the Bitácora is a drawer too and
   the order takes a row of its own). Controls are at least 32 px; the skip link shows on focus.
   ------------------------------------------------------------------------------------------------ */
.osint-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* since T1.4 the skip link and the narrow notice belong to the shell (.ev-skip, .ev-narrow-notice) */
/* T2.1: the order row lives in the drawer Investigar, where it always takes its own line (the layouts no longer rearrange it) */
.osint-btn, .osint-close, .osint-link, .osint-menu-item, .osint-disclosure > button { min-height: 32px; }
.osint-btn, .osint-close { min-width: 32px; }
.osint-link { display: inline-flex; align-items: center; }
[data-osint-stage-col]:focus-visible { outline-offset: -3px; }

/* ------------------------------------------------------------------------------------------------
   C1: the body of a page card, the same in the confirmation drawer and in the Ficha's Descartados tab
   (one template block, #osint-page-body): the host, date and tag line, the title linking the page, the
   passages that name the subject with the anchor's words marked, the kept text on request, the entity
   pills and the photos (88 px thumbnails through the service; a click opens one in the modal).
   ------------------------------------------------------------------------------------------------ */
.osint-page { min-width: 0; }
.osint-page-meta { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.osint-page-meta .osint-host { flex: 0 1 auto; }
.osint-page-meta .osint-date, .osint-page-meta .tag { flex: none; white-space: nowrap; }
.osint-page-meta .tag { font: 400 10.5px 'DM Mono', monospace; color: #6f83a3; }
.osint-page-meta > * + *::before { content: '\00b7'; margin-right: 6px; color: #4a5d7e; }
.osint-page-title { display: block; margin-top: 3px; font-size: 13px; font-weight: 700; line-height: 1.3; color: #ffffff; text-decoration: none; overflow-wrap: anywhere; }
/* E4: what the page is and what the subject is in it, under the title */
.osint-page-role { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 5px; }
.osint-page-role span { padding: 1px 7px; border-radius: 999px; border: 1px solid #2f3d58; background: #131c2e; font: 600 10.5px/1.5 Manrope, system-ui, sans-serif; color: #dfe6f2; }
.osint-page-role .role { border-color: #2f8bff66; color: #8cbeff; }
.osint-page-role[data-page-role=not_subject] .role, .osint-page-role[data-page-role=mentioned] .role, .osint-page-role[data-page-role=quoted] .role { border-color: #6b5316; color: #f5b84b; }
a.osint-page-title:hover, a.osint-page-title:focus-visible { color: #7fb4ff; text-decoration: underline; text-underline-offset: 2px; }
.osint-page-excerpt { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding-left: 8px; border-left: 2px solid #27344d; }
.osint-page-excerpt p { margin: 0; font-size: 11.5px; line-height: 1.45; color: #b8c5da; overflow-wrap: anywhere; }
.osint-page-excerpt mark { padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, var(--osint-amber) 18%, transparent); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--osint-amber) 60%, transparent); color: #f1f5fb; }
.osint-page-toggle { margin-top: 2px; font-size: 11px; }
.osint-page-text { max-height: 240px; overflow: auto; margin-top: 2px; padding: 8px 10px; border: 1px solid #1c2740; border-radius: 8px; background: #0b1220; font-size: 11.5px; line-height: 1.5; color: #b8c5da; white-space: pre-wrap; overflow-wrap: anywhere; }
.osint-page-ents { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.osint-page-ent { display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%; padding: 2px 8px; border: 1px solid #27344d; border-radius: 999px; background: #131c2e; font-size: 11px; line-height: 1.35; color: #dfe6f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osint-page-ent .k { flex: none; font: 400 9.5px 'DM Mono', monospace; letter-spacing: .02em; color: #9fb0c8; }
.osint-page-ent.person { border-color: #2f8bff55; }
.osint-page-ent.place { border-color: #35d0a555; }
.osint-page-ent.org { border-color: #a855f755; }
.osint-page-ent.date { border-color: #f5b84b55; }
.osint-page-more { min-width: 32px; min-height: 32px; padding: 0 8px; border: 1px dashed #2f3d58; border-radius: 999px; background: transparent; color: #7fb4ff; font-size: 11px; font-weight: 600; cursor: pointer; }
.osint-page-more:hover { color: #b6d3ff; border-color: #7fb4ff; }
.osint-page-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.osint-page-thumb { flex: none; width: 88px; height: 66px; padding: 0; border: 1px solid #27344d; border-radius: 7px; background: #0b1220; overflow: hidden; cursor: zoom-in; }
.osint-page-thumb:hover { border-color: #7fb4ff; }
.osint-page-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* W5: "Es la persona buscada" under a Descartados card, its state and its undo; a reinstated card carries a green edge */
.osint-reinstate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.osint-reinstate .osint-btn { min-height: 32px; }
.osint-reinstate .note { flex: 1 1 100%; font-size: 11.5px; line-height: 1.4; color: #b8c5da; }
.osint-reinstate .note.doubt { color: var(--osint-amber); }
/* the photo modal: the photo large, its caption and the page it comes from */

/* ------------------------------------------------------------------------------------------------
   The faces of a case's photos (plan-rostros-etiquetados F2): the Fotos drawer (560 px, the rail's O), the badges on the page
   thumbnails, the boxes and chips of the photo modal. An engine proposal is always outlined (dashed ring, outlined chip whose
   label opens with "¿"); only the analyst's confirmation is solid (3 px green ring with the glow of a confirmed leaf).
   ------------------------------------------------------------------------------------------------ */
/* F2.2a: the faces found on a page thumbnail ("☺ n") and up to three dots: filled for the analyst's tags, outlined for proposals */
.osint-page-thumb { position: relative; }
.osint-face-badge { position: absolute; right: 3px; bottom: 3px; padding: 0 5px; border-radius: 999px; background: #0b1220e6; border: 1px solid #2f3d58; color: #f1f5fb; font: 600 10.5px/15px Manrope, system-ui, sans-serif; white-space: nowrap; pointer-events: none; }
.osint-face-dots { position: absolute; left: 4px; bottom: 5px; display: flex; gap: 3px; pointer-events: none; }
.osint-face-dots .dot { display: block; width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%; }
.osint-face-dots .dot.confirmed { background: var(--osint-green); box-shadow: 0 0 0 1px #0b1220; }
.osint-face-dots .dot.doubt { background: var(--osint-amber); box-shadow: 0 0 0 1px #0b1220; }
.osint-face-dots .dot.high { border: 2px solid var(--osint-accent); background: #0b1220; }
.osint-face-dots .dot.review { border: 2px solid var(--osint-amber); background: #0b1220; }
/* F2.2a: the photo modal: the frame shrinks to the photo as drawn, so a face box is the same fraction of the frame as of the photo */
.osint-photo-stage { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.osint-photo-frame { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.osint-photo-frame img { display: block; max-width: 100%; max-height: min(62vh, 600px); object-fit: contain; border-radius: 8px; background: var(--ev-surface-2); }
/* the ring of each state (plan 4.2): hint for untagged, dashed accent or amber for a proposal, thin amber for doubt, and the only
   solid ring, 3 px green with the glow of a confirmed leaf, for the analyst's confirmation */
.osint-face-box { position: absolute; box-sizing: border-box; border-radius: 8px; pointer-events: none; }
.osint-face-box.untagged { border: 1px solid var(--osint-hint); }
.osint-face-box.high { border: 2px dashed var(--osint-accent); }
.osint-face-box.review { border: 2px dashed var(--osint-amber); }
.osint-face-box.doubt { border: 1px solid var(--osint-amber); }
.osint-face-box.confirmed.solid { border: 3px solid var(--osint-green); box-shadow: 0 0 14px #35d0a5cc; }
.osint-face-box.focus { outline: 2px solid #ffffffb3; outline-offset: 3px; }
/* F2.2b: an untagged face or a proposal takes a click on its box (the tag field); the chips under each box, 32 px targets */
.osint-face-hit { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; pointer-events: auto; }
.osint-face-hit:hover { background: #ffffff14; }
.osint-face-hit:disabled { cursor: default; background: transparent; }
.osint-face-chip { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1.2; }
.osint-face-chip.hidden { display: none; }
.osint-face-chip .row { display: inline-flex; align-items: stretch; border-radius: 999px; overflow: hidden; box-shadow: 0 2px 10px #0009; }
.osint-face-chip .lab, .osint-face-chip button { display: inline-flex; align-items: center; min-height: 32px; margin: 0; padding: 0 11px; border: 0; background: transparent; font: 700 12px Manrope, system-ui, sans-serif; white-space: nowrap; }
.osint-face-chip button { cursor: pointer; }
.osint-face-chip button:disabled { cursor: default; opacity: .6; }
.osint-face-chip .x { min-width: 32px; justify-content: center; padding: 0 9px; }
/* a proposal: outlined (dashed ring in the band's colour), its label a question */
.osint-face-chip.proposal .row { border: 1.5px dashed var(--osint-accent); background: #0b1220eb; }
.osint-face-chip.proposal.review .row { border-color: var(--osint-amber); }
.osint-face-chip.proposal .lab { color: #8cbeff; }
.osint-face-chip.proposal.review .lab { color: var(--osint-amber); }
.osint-face-chip.proposal .x { color: #dfe6f2; border-left: 1px solid #2f3d58; }
.osint-face-chip.proposal button:hover { background: #1b2740; }
/* the analyst's tags: filled */
.osint-face-chip.tag.confirmed .row { background: var(--osint-green); }
.osint-face-chip.tag.doubt .row { background: var(--osint-amber); }
.osint-face-chip.tag .lab, .osint-face-chip.tag button { color: #0b1220; }
.osint-face-chip.tag .x { border-left: 1px solid #0b122033; }
.osint-face-chip.tag button:hover { background: #0b12201f; }
/* an untagged face: "+ Etiquetar" shows on hover or focus */
.osint-face-chip.untagged { opacity: 0; transition: opacity .12s ease; }
.osint-face-box:hover + .osint-face-chip.untagged, .osint-face-box:focus-within + .osint-face-chip.untagged, .osint-face-chip.untagged:hover, .osint-face-chip.untagged:focus-within { opacity: 1; }
.osint-face-chip.untagged .row { border: 1px solid var(--osint-hint); background: #0b1220eb; }
.osint-face-chip.untagged button { color: #dfe6f2; }
.osint-face-chip .cap { padding: 2px 8px; border-radius: 6px; background: #0b1220eb; color: #b8c5da; font: 500 11px Manrope, system-ui, sans-serif; white-space: nowrap; }
/* F2.3a: the Fotos drawer: the filter, Personas (one row per person, the reference crop solid and labelled) and Sin etiqueta */
/* F2.3b: Sin etiqueta: fixed cells (the rows of a virtualised grid all have one height), the "x2" of a folded same shot */
/* W6: what the page of a crop's photo is (perfil, publicación, artículo), over the bottom of the crop: the cell keeps its height */
/* E8.3: the longer label of an author's avatar wraps inside the crop instead of being cut */
/* E10.2: a face of a photo the image queries found is an engine proposal: outlined like one, its label wraps, the page it came from
   is linked under the crop */
/* F2.6: a case saved before its photos were kept: the caption and "Recuperar fotos" */
/* F3.2: another saved case's confirmed face: a proposal like any other (dashed accent ring, outlined chip whose label is a
   question) plus the discreet cross dot of the name matches (proposal 13) at the box's corner; "Otros casos" in the Fotos drawer */
.osint-face-box.cross { border: 2px dashed var(--osint-accent); }
.osint-face-crossdot { position: absolute; right: -5px; top: -5px; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; background: #8cbeff; border: 2px solid #0b1220; }
.osint-face-chip.inline { position: static; }
/* a chip from another case names that case too: its label may wrap instead of running past the photo or the drawer */
.osint-face-chip.cross .row { border-radius: 14px; }
.osint-face-chip.cross .lab { max-width: 320px; padding-top: 5px; padding-bottom: 5px; white-space: normal; text-align: left; line-height: 1.3; }
/* who says whose a face is (osintRostros.provenanceOf), over the photo: yellow what the system proposes by resemblance, blue the tag of a
   social network; what the analyst confirmed keeps its green. The band of a proposal (high or review) stays in its glyph and its caption. */
.osint-face-box.prov-proposed { border: 2px dashed var(--osint-amber); }
.osint-face-box.prov-tagged { border: 2px dashed var(--osint-accent); }
.osint-face-chip.proposal.prov-proposed .row { border-color: var(--osint-amber); }
.osint-face-chip.proposal.prov-proposed .lab { color: var(--osint-amber); }
.osint-face-chip.proposal.prov-tagged .row { border-color: var(--osint-accent); }
.osint-face-chip.proposal.prov-tagged .lab { color: #8cbeff; }
/* M1, search profiles: the pill of the order row and its menu, the profile tabs of Ajustes › Reglas with the mark of a rule
   each profile keeps, the profile of the confirmation drawer, and the profile pill and filter of Casos */
.osint-profile-picker { position: relative; flex: none; }
.osint-profile-pill { display: inline-block; min-height: 36px; padding: 7px 12px; border: 1px solid #27344d; border-radius: 999px; background: #131c2e; color: #dfe6f2; font: 600 12px/20px 'Manrope', system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
.osint-profile-pill:hover { border-color: #2f8bff; }
.osint-profile-pill[aria-expanded="true"] { border-color: #2f8bff; background: #0f2a55; color: #fff; }
.osint-profile-pill:disabled { opacity: .6; cursor: default; }
.osint-profile-pill .caret { margin-left: 2px; color: #8193ad; font-size: 10px; }
/* under 1440 px the order keeps its room: the pill shows the profile's name alone (its accessible name and title keep "Perfil") */
@media (max-width: 1439px) { .osint-profile-pill { padding: 7px 10px; font-size: 11.5px; } .osint-profile-pill .pfx { display: none; } }
.osint-profile-menu { position: absolute; z-index: 45; right: 0; top: calc(100% + 6px); width: 290px; padding: 4px; background: #0d1526; border: 1px solid #2f3d58; border-radius: 10px; box-shadow: 0 18px 48px #00000080; }
.osint-profile-option { position: relative; display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px 8px 28px; border: 0; border-radius: 7px; background: transparent; text-align: left; cursor: pointer; }
.osint-profile-option:hover, .osint-profile-option:focus-visible { background: #1b2740; }
.osint-profile-option .pname { color: #dfe6f2; font-size: 12.5px; font-weight: 600; }
.osint-profile-option .phint { color: #8193ad; font-size: 11px; line-height: 1.35; }
.osint-profile-option.on .pname { color: #fff; }
.osint-profile-option.on::before { content: "✓"; position: absolute; left: 10px; top: 8px; color: #35d0a5; font-size: 12px; font-weight: 700; }
.osint-profile-tag { display: inline-block; margin-top: 6px; padding: 2px 8px; border: 1px solid #2f8bff66; border-radius: 999px; background: #2f8bff14; color: #8cbeff; font: 500 10px/16px 'DM Mono', monospace; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.osint-pill.profile { color: #8cbeff; border-color: #2f8bff55; background: #2f8bff12; }
.osint-case-profiles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.osint-case-profiles .osint-caption { margin-right: 2px; }
.osint-chip-filter { min-height: 32px; padding: 3px 10px; border: 1px solid #27344d; border-radius: 999px; background: #131c2e; color: #9fb0c8; font-size: 11.5px; white-space: nowrap; cursor: pointer; }
.osint-chip-filter:hover { color: #dfe6f2; }
.osint-chip-filter.on { border-color: #2f8bff; background: #0f2a55; color: #fff; }

/* ------------------------------------------------------------------------------------------------
   M3: the case assistant lives in the lower panel since T2.5 (its rules sit with the dock's). W10: a person already investigated in
   another saved case, linked in an answer, and its card (beside the link, inside the Asistente's pane, above it when the panel is short).
   ------------------------------------------------------------------------------------------------ */
.osint-person-link { color: var(--ev-brand); text-decoration: underline dotted; text-underline-offset: 3px; border-radius: 3px; }
.osint-person-link:hover, .osint-person-link:focus-visible { color: var(--ev-text); text-decoration-style: solid; }
.osint-person-link:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: 2px; }
.osint-person-card { position: absolute; z-index: 25; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; padding: 11px 12px; border: 1px solid var(--ev-border-strong); border-radius: var(--ev-r-md); background: var(--ev-surface); color: var(--ev-text); box-shadow: var(--ev-shadow-3); font-size: 12px; line-height: 1.45; }
.osint-person-card:focus { outline: none; }
.osint-person-card .photo { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 2px solid var(--ev-ok); background: var(--ev-surface-2); }
.osint-person-card .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.osint-person-card .name { color: var(--ev-text); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.osint-person-card .aliases { color: var(--ev-doubt); overflow-wrap: anywhere; }
.osint-person-card .meta { color: var(--ev-text-2); font: 500 10.5px/1.5 var(--ev-font-mono); }
.osint-person-card .line { color: var(--ev-text-2); overflow-wrap: anywhere; }
.osint-person-card .several { flex-basis: 100%; min-width: 0; }
.osint-person-card .several .osint-help, .osint-person-card .opens { color: var(--ev-text-2); }
.osint-person-card .cases { list-style: none; margin: 2px 0 0; padding: 0; max-height: 160px; overflow: auto; }
.osint-person-card .cases a { display: flex; align-items: center; min-height: 32px; color: var(--ev-brand); }
.osint-person-card .opens { flex-basis: 100%; }


/* W2: the chip of the case bar that says where the notices go and opens Ajustes › Analista at them. The button is a 32 px target;
   the pill inside is what shows, and the button's own margins keep the case bar from growing by more than the pill */
.osint-avisos-chip { display: inline-flex; align-items: center; min-height: 32px; min-width: 32px; margin: -6px 0 -6px -2px; padding: 0 2px; border: 0; background: transparent; cursor: pointer; }
.osint-avisos-chip .pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; border: 1px solid #2f5f9a; background: #0f2a55;
  color: #dfe6f2; font: 500 10.5px/1.4 'DM Mono', monospace; white-space: nowrap; }
.osint-avisos-chip[data-avisos-chip=none] .pill { border-color: #6b5316; background: #2a2008; color: #f5b84b; }
.osint-avisos-chip:hover .pill, .osint-avisos-chip:focus-visible .pill { border-color: #2f8bff; }
/* W2: "Cambiar" after the Bitácora line of a notice sent */
.osint-log-change { display: inline-flex; align-items: center; min-height: 32px; min-width: 32px; vertical-align: middle; margin: -8px 0; font-size: 11px; text-decoration: underline; text-underline-offset: 2px; }

/* W3: the way to tagging faces: the subject's Ficha, the hint over a photo, the box as one target, a photo of a page set aside */
.osint-face-hit:hover, .osint-face-hit:focus-visible { background: #2f8bff26; box-shadow: inset 0 0 0 2px #2f8bff; }

/* W4: the names the tag field suggests, opened on focus: groups, one row per person, its badges, a crop for a tagged person */

/* E9: "Registros guardados" in the Fuentes drawer: a search over the local index of public records and its rows */
.osint-registry { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.osint-registry-search { display: flex; gap: 8px; align-items: center; }
.osint-registry-search .osint-input { flex: 1; min-width: 0; }
.osint-registry-list { display: flex; flex-direction: column; }
.osint-registry-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 4px; border-bottom: 1px solid #1c2740; }
.osint-registry-row .main { flex: 1; min-width: 0; }
.osint-registry-row .name { font-size: 12.5px; font-weight: 700; color: #f1f5fb; overflow-wrap: anywhere; }
.osint-registry-row .fields { margin-top: 2px; font: 400 10.5px 'DM Mono', monospace; color: #b8c5da; overflow-wrap: anywhere; }
.osint-registry-row .quote { margin-top: 4px; font-size: 11px; color: #9fb0c8; line-height: 1.4; overflow-wrap: anywhere; }
.osint-registry-row .src { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; margin-top: 4px; font-size: 11.5px; min-width: 0; }
.osint-registry-row .src a { color: #7fb4ff; overflow-wrap: anywhere; }
.osint-registry-row .when { margin-top: 2px; font: 400 10.5px 'DM Mono', monospace; color: #8193ad; }

/* W11: the menu of a node (right click, the context menu key or Shift+F10 on a focused node), the same two actions in the Ficha,
   the strip over the stage while a search on a datum runs, and the dashed line from a datum to what its search found */
/* T4.5: the banner of a search or a lookup on a datum (I-88), on the design tokens: what runs, what happens to the case, and Detener; on
   the Grafo it sits under the band of the toolbar (the 60 px of STAGE_TOP), which would cover it */
.osint-pivot-banner { position: absolute; left: 12px; top: 68px; z-index: 9; display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100% - 24px)); padding: 10px 12px; border: 1px solid var(--ev-border-strong); border-left: 3px solid var(--ev-brand); border-radius: 10px; background: var(--ev-surface); color: var(--ev-text); box-shadow: var(--ev-shadow-3); }
.osint-pivot-banner .spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ev-border); border-top-color: var(--ev-brand); animation: osintSpin .9s linear infinite; }
.osint-pivot-banner .txt { flex: 1; min-width: 0; }
.osint-pivot-banner .t1 { font-size: 13px; font-weight: 600; color: var(--ev-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osint-pivot-banner .t2 { margin-top: 2px; font-size: 12px; color: var(--ev-text-2); line-height: 1.4; }
.osint-pivot-banner .stop { flex: none; min-height: 32px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--ev-bad); background: transparent; color: var(--ev-bad); font: 600 12.5px/1 var(--ev-font-ui); cursor: pointer; }
.osint-pivot-banner .stop:hover { background: var(--ev-bad-soft); }
/* B21: the strip only reports. Since the task card sits inline under its two lines (tareas.css, 2026-10-11) it is tall enough to cover
   the leaves at the top left of the stage, so the pointer passes through it to the stage (a right click on a leaf under it opens that
   leaf's menu) and only its controls take it */
.osint-pivot-banner { pointer-events: none; }
.osint-pivot-banner :is(button, a, input, select, summary, [role="button"]) { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .osint-pivot-banner .spin { animation: none; } }

/* W12: the fold control of a searched datum's branch, between the datum and what hangs from it (the minus sign while open, "+N"
   folded; grown with the group pills at small scales, --branch-k), and the short mark on what a search just added: a ring that pulses
   (a still ring with reduced motion) for as long as the mark lasts */
@keyframes osintFresh { 0% { transform: scale(.75); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { [data-fresh="1"] > div:first-child::after { animation: none; } }

/* ------------------------------------------------------------------------------------------------
   Stage (T2.2, plan 4.5): the radial stage of the redesign on the tokens, in both themes. A node
   paints its type family (fam-*: --gc, the --ev-t-* tokens); every leaf label sits beside its node,
   outward, where the layout kept room for it (grafo-layout.js), drawn at --lsr (osintLayout.labelSize)
   from the side that touches the node. A selection dims what it does not light to 25 %, the node under
   the pointer to 45 %. The counters sit at the bottom left, the legend chip at the bottom right; the
   layout keeps PAD_BOTTOM free for them. --glass and --shadow-float are the prototype's values.
   ------------------------------------------------------------------------------------------------ */
:root { --glass: rgba(255, 255, 255, 0.88); --shadow-float: 0 2px 10px rgba(16, 25, 35, 0.08); }
[data-theme="dark"] { --glass: rgba(15, 23, 32, 0.86); --shadow-float: 0 4px 16px rgba(0, 0, 0, 0.35); }
.fam-persona { --gc: var(--ev-t-persona); }
.fam-org { --gc: var(--ev-t-org); }
.fam-contacto { --gc: var(--ev-t-contacto); }
.fam-doc { --gc: var(--ev-t-doc); }
.fam-lugar { --gc: var(--ev-t-lugar); }
.fam-otro { --gc: var(--ev-t-otro); }
.g-stage-col { background: var(--ev-stage); }
.g-stage { position: relative; margin: 0 auto; overflow: hidden; background-color: var(--ev-stage); background-image: radial-gradient(var(--ev-stage-grid) 1.1px, transparent 1.3px); background-size: 24px 24px; font-family: var(--ev-font-ui); color: var(--ev-text); --lsr: 1; }
.g-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.g-hull { fill: var(--gc); fill-opacity: 0.075; stroke: var(--gc); stroke-opacity: 0.22; stroke-width: 1; stroke-dasharray: 3 4; transition: opacity var(--ev-dur-2); }
.g-edge { fill: none; stroke: var(--gc); stroke-linecap: round; transition: opacity var(--ev-dur-2); }
.g-edge.spine { stroke-width: 2.2; stroke-opacity: 0.5; }
.g-edge.spine.is-lit { stroke-opacity: 0.85; }
.g-edge.member.is-doubt { stroke: var(--ev-doubt); }
.g-edge.member.is-struck { stroke: var(--ev-text-3); }
.g-pivot { fill: none; stroke: var(--gc); }
.g-stage.has-focus .g-hull, .g-stage.has-focus .is-off { opacity: 0.25; }
.g-stage.is-hovering .is-off { opacity: 0.45; }
.g-glow { position: absolute; width: 192px; height: 192px; margin: -96px 0 0 -96px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ev-brand) 30%, transparent) 0%, color-mix(in srgb, var(--ev-brand) 8%, transparent) 55%, transparent 72%); pointer-events: none; transition: opacity var(--ev-dur-2); }
.g-stage.has-focus .g-glow { opacity: 0.25; }

/* the subject: a 64 px disc with its initials, the brand ring, the identity badge, its name and aliases under it */
.g-subject { position: absolute; width: 64px; height: 64px; transform: translate(-50%, -50%); z-index: 3; }
.g-subject .g-disc-wrap { position: relative; width: 100%; height: 100%; }
.g-subject .g-disc { width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ev-brand) 24%, var(--ev-stage)); border: 2.6px solid var(--ev-brand); box-shadow: 0 0 0 7px color-mix(in srgb, var(--ev-brand) 14%, transparent); font: 600 17px/1 var(--ev-font-ui); color: var(--ev-text); letter-spacing: 0.02em; }
.g-subject-badge { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--ev-stage); display: flex; align-items: center; justify-content: center; font: 800 11px/1 var(--ev-font-ui); color: var(--ev-stage); }
.g-subject.v-unreviewed .g-subject-badge { background: var(--ev-stage); box-shadow: inset 0 0 0 1.5px var(--ev-text-3); }
.g-subject.v-confirmed .g-subject-badge { background: var(--ev-ok); }
.g-subject.v-doubt .g-subject-badge { background: var(--ev-doubt); }
.g-subject.v-discarded .g-subject-badge { background: var(--ev-bad); color: #ffffff; }
.g-subject-label { position: absolute; left: 50%; top: calc(100% + 4px * var(--lsr)); transform: translateX(-50%) scale(var(--lsr)); transform-origin: 50% 0; text-align: center; white-space: nowrap; pointer-events: none; text-shadow: 0 0 3px var(--ev-stage), 0 0 2px var(--ev-stage), 0 0 1px var(--ev-stage); }
.g-subject-label .name { font: 600 13.5px/16px var(--ev-font-ui); color: var(--ev-text); }
.g-subject-label .cap { font: 500 9.5px/14px var(--ev-font-mono); letter-spacing: 0.04em; color: var(--ev-text-2); }

/* the hubs: a 38 px disc with the icon of its type and its pill "Nombre (N)" where the layout placed it */
.g-hub { position: absolute; width: 38px; height: 38px; transform: translate(-50%, -50%); z-index: 2; cursor: zoom-in; transition: opacity var(--ev-dur-2); }
.g-hub .g-disc { width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--gc) 22%, var(--ev-stage)); border: 2.2px solid var(--gc); color: var(--gc); }
.g-hub .g-disc .ev-ic { width: 18px; height: 18px; }
.g-hub:hover .g-disc, .g-hub.is-lit .g-disc { border-width: 2.8px; }
.g-hub:focus-visible { outline: none; }
.g-hub:focus-visible .g-disc { box-shadow: 0 0 0 2px var(--ev-stage), 0 0 0 4px var(--ev-focus); }
/* B: a group of a dense stage opens and closes on a click; closed, its disc says how many it holds, open, its border is the open one */
.g-hub.is-closed, .g-hub.is-open { cursor: pointer; }
.g-hub .g-hub-n { font: 600 13px/1 var(--ev-font-mono); color: var(--ev-text); }
.g-hub.is-open .g-disc { border-width: 3px; }
.g-pill { position: absolute; display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 11px; box-sizing: border-box; border-radius: 11px; background: var(--ev-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 45%, transparent); transform: translate(-50%, -50%) scale(var(--lsr)); white-space: nowrap; pointer-events: none; }
.g-pill .name { font: 600 11.5px/1 var(--ev-font-ui); color: var(--ev-text); }
.g-pill .n { font: 500 11px/1 var(--ev-font-mono); color: var(--ev-text-2); }

/* the leaves: a 28 px disc with initials or the icon of its type, the badge at its lower right, its label beside it */
.g-leaf { position: absolute; width: 28px; height: 28px; transform: translate(-50%, -50%); cursor: pointer; transition: opacity var(--ev-dur-2); }
.g-leaf:focus-visible { outline: none; }
.g-leaf:focus-visible .g-disc { box-shadow: 0 0 0 2px var(--ev-stage), 0 0 0 4px var(--ev-focus); }
.g-disc-wrap { position: relative; width: 100%; height: 100%; }
.g-leaf .g-disc { width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--gc) 16%, var(--ev-stage)); border: 1.5px solid color-mix(in srgb, var(--gc) 80%, transparent); color: var(--ev-text); transition: border-width var(--ev-dur-1), background-color var(--ev-dur-2); }
.g-leaf .g-disc .ini { font: 600 10px/1 var(--ev-font-ui); letter-spacing: 0.02em; }
.g-leaf .g-disc .ev-ic { width: 14px; height: 14px; color: var(--gc); }
.g-leaf:hover .g-disc { border-width: 2.4px; }
.g-leaf.v-confirmed .g-disc { border: 2.5px solid var(--gc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc) 22%, transparent); }
.g-leaf.v-doubt .g-disc { border: 1.5px dashed var(--ev-doubt); }
.g-leaf.v-discarded .g-disc { border: 1.5px dashed var(--ev-text-3); background: var(--ev-stage); opacity: 0.5; }
.g-leaf.v-discarded .g-label { opacity: 0.6; }
.g-leaf.is-sel .g-disc { border-width: 3px; background: color-mix(in srgb, var(--gc) 32%, var(--ev-stage)); box-shadow: 0 0 0 3px var(--ev-stage), 0 0 0 5px var(--gc); }
.g-leaf.is-more .g-disc { border: 1.5px dashed var(--gc); background: var(--ev-stage); }
.g-leaf.is-more .g-disc .ini { font: 600 11px/1 var(--ev-font-mono); color: var(--gc); }
.g-leaf.is-sel, .g-hub.is-lit, .g-leaf.is-lit { opacity: 1; }
.g-label { position: absolute; white-space: nowrap; pointer-events: none; text-shadow: 0 0 3px var(--ev-stage), 0 0 2px var(--ev-stage), 0 0 1px var(--ev-stage); }
.g-label .name { font: 500 10.5px/13px var(--ev-font-ui); color: var(--ev-text); }
.g-label .cap { display: none; font: 500 9px/11px var(--ev-font-mono); color: var(--ev-text-2); }
.g-label.has-cap .cap { display: block; }
.g-leaf.v-confirmed .g-label .name { font-weight: 600; }
.g-leaf.is-sel .g-label .name { font-weight: 600; }
.g-label.side-right { left: calc(100% + 5px * var(--lsr)); top: 50%; transform: translateY(-50%) scale(var(--lsr)); transform-origin: 0 50%; text-align: left; }
.g-label.side-left { right: calc(100% + 5px * var(--lsr)); top: 50%; transform: translateY(-50%) scale(var(--lsr)); transform-origin: 100% 50%; text-align: right; }
.g-label.side-top { bottom: calc(100% + 5px * var(--lsr)); left: 50%; transform: translateX(-50%) scale(var(--lsr)); transform-origin: 50% 100%; text-align: center; }
.g-label.side-bottom { top: calc(100% + 5px * var(--lsr)); left: 50%; transform: translateX(-50%) scale(var(--lsr)); transform-origin: 50% 0; text-align: center; }
/* the name of the relation on the lit edge of the selection */
.g-rel-label { position: absolute; transform: translate(-50%, -50%) scale(var(--lsr)); padding: 1px 4px; border-radius: 4px; background: color-mix(in srgb, var(--ev-stage) 85%, transparent); font: 500 10px/13px var(--ev-font-mono); color: var(--ev-text-2); white-space: nowrap; pointer-events: none; z-index: 3; }

/* the space-time cube (docs/propuesta-grafo-3d), an optional screen-only layout: the glass plates behind the nodes in the amber of
   grafo-layout.js (the --cube-col each element carries, never a tokens-ev.css colour), the count on each plate, and the control bar over
   the stage. The nodes are placed by an inline transform built from cubeProject and keep their 2D centring, so the photos, marks, verdicts
   and the lens read as they do in 2D. */
.cube-plate { fill: var(--cube-col); fill-opacity: 0.05; stroke: var(--cube-col); stroke-opacity: 0.55; stroke-width: 1.2; }
.cube-axis { stroke: var(--cube-col); stroke-opacity: 0.5; stroke-width: 1.3; stroke-dasharray: 4 4; }
.cube-plate-n { position: absolute; transform: translate(-50%, -50%) scale(var(--lsr)); padding: 2px 7px; border-radius: 8px; background: color-mix(in srgb, var(--cube-col) 18%, var(--ev-stage)); border: 1px solid var(--cube-col); color: var(--cube-col); font: 600 10.5px/1 var(--ev-font-mono); white-space: nowrap; pointer-events: none; z-index: 3; }
.g-cube-bar { position: absolute; top: 68px; left: 50%; transform: translateX(-50%); z-index: 9; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; max-width: calc(100% - 28px); padding: 6px 10px; border: 1px solid var(--ev-border); border-radius: 10px; background: var(--glass); backdrop-filter: blur(8px); box-shadow: var(--shadow-float); font-size: 12px; }
.g-cube-turn { display: inline-flex; align-items: center; gap: 6px; color: var(--ev-text-2); }
.g-cube-turn input[type="range"] { width: 120px; accent-color: var(--ev-brand); }
.g-cube-turn .mono { font: 500 11px/1 var(--ev-font-mono); color: var(--ev-text); min-width: 36px; text-align: right; }
/* the cube nodes jump between turns by transform, so a browser that honours reduced motion should not animate the step */
@media (prefers-reduced-motion: reduce) { .g-stage.is-cube .g-leaf, .g-stage.is-cube .g-hub, .g-stage.is-cube .g-subject { transition: none; } }

/* the badges: the engine's marks outlined in their colour, the analyst's verdicts filled, a supplied node's square, the other case
   ring at the lower left and the padlock of a sensitive datum at the upper left */
.g-mark { position: absolute; right: -4px; bottom: -4px; width: 13px; height: 13px; box-sizing: border-box; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--ev-stage); font: 800 7.5px/1 var(--ev-font-ui); }
.g-mark.none { display: none; }
.g-mark.engine { background: var(--ev-stage); border-color: currentColor; }
.g-mark.engine.high { color: var(--ev-brand); font-size: 7px; }
.g-mark.engine.review { color: var(--ev-doubt); font-size: 8px; }
.g-mark.v.unreviewed { background: var(--ev-stage); border: 1.2px dashed var(--ev-text-3); color: var(--ev-text-3); }
.g-mark.v.confirmed { background: var(--ev-ok); color: var(--ev-stage); }
.g-mark.v.doubt { background: var(--ev-doubt); color: var(--ev-stage); }
.g-mark.v.discarded { background: var(--ev-bad); color: #ffffff; }
.g-mark.supplied { border-radius: 4px; background: var(--ev-t-org); color: #ffffff; }
[data-theme="dark"] .g-mark.supplied { color: var(--ev-stage); }
.g-mark.more { position: static; width: auto; min-width: 18px; height: 16px; padding: 0 3px; border-radius: 8px; border: 1.5px dashed var(--ev-text-3); background: transparent; color: var(--ev-text-2); font: 600 9.5px/1 var(--ev-font-mono); }
.osint-cross-mark { position: absolute; left: -3px; bottom: -3px; width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%; background: var(--ev-surface); border: 2px solid var(--ev-info); }
.osint-sensitive-mark { position: absolute; left: -5px; top: -5px; width: 14px; height: 14px; box-sizing: border-box; border-radius: 4px; background: var(--ev-doubt-soft); border: 1.2px solid var(--ev-doubt); display: flex; align-items: center; justify-content: center; color: var(--ev-doubt); pointer-events: none; }
.osint-sensitive-mark .ev-ic { width: 9px; height: 9px; stroke-width: 2; }
.osint-cross-mark.is-legend, .osint-sensitive-mark.is-legend { position: static; flex: none; }
.osint-branch-toggle { position: absolute; transform: translate(-50%, -50%) scale(var(--branch-k, 1)); z-index: 3; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; border: 1.5px solid var(--branch-col, var(--ev-brand)); background: var(--ev-surface); color: var(--ev-text); font: 600 11.5px/1 var(--ev-font-ui); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 0 3px var(--ev-stage); }
.osint-branch-toggle:hover { background: var(--ev-surface-2); }
.osint-branch-toggle[aria-expanded="false"] { background: var(--ev-surface-2); box-shadow: 0 0 0 3px var(--ev-stage), 0 0 10px var(--branch-col, var(--ev-brand)); }
[data-fresh="1"] > div:first-child::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--ev-doubt); pointer-events: none; animation: osintFresh 1.2s ease-out 0s 4; }
@media (prefers-reduced-motion: reduce) { [data-fresh="1"] > div:first-child::after { animation: none; } .g-stage .g-leaf, .g-stage .g-hub, .g-edge, .g-hull, .g-glow { transition: none; } }

/* the toolbar and, at its left, the hint lines share the band above the stage column (STAGE_TOP), so the hint never covers a leaf;
   at a narrow stage the hint lines are cut with an ellipsis */
.ws-toolbar-wrap { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 10px; padding: 0 12px; pointer-events: none; }
.ws-toolbar-wrap > * { pointer-events: auto; }
.ws-toolbar-wrap > .ws-stage-tools { position: relative; top: auto; right: auto; flex: none; }
/* "Agrupar por" and "Mostrar" sit beside the layout select: with the lateral panel open on a window up to 1500 px the replay button keeps
   its icon (its name stays for screen readers), and a stage column still narrower than the toolbar makes its three selects give up the
   room their longest option asks for (each keeps 64 px), so the toolbar stays in one row inside the stage */
@media (max-width: 1500px) { .ws:not(.no-lateral):not(.presenting) .ws-stage-tools .ws-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.ws-toolbar-wrap > .ws-stage-tools { max-width: 100%; box-sizing: border-box; }
.ws-stage-tools > .ev-select-wrap { flex: 0 1 auto; min-width: 64px; }
.ws-stage-tools > .ev-select-wrap > .ev-select { width: 100%; text-overflow: ellipsis; }
.ws-stage-tools > :not(.ev-select-wrap) { flex-shrink: 0; }

/* the counters (bottom left) and the legend chip (bottom right) over the stage */
.g-counters { position: absolute; left: 14px; bottom: 14px; z-index: 8; display: flex; border: 1px solid var(--ev-border); border-radius: 10px; background: var(--glass); backdrop-filter: blur(8px); box-shadow: var(--shadow-float); pointer-events: none; }
.g-counters > div { padding: 6px 12px 7px; border-left: 1px solid var(--ev-border); }
.g-counters > div:first-child { border-left: 0; }
.g-counters > div > strong { display: block; font: 600 14px/1.2 var(--ev-font-mono); color: var(--ev-text); }
.g-counters > div > span { display: block; font-size: 10.5px; color: var(--ev-text-2); }
/* 2026-10-21 (docs/taxonomia-entidades): under Rol, how many entities the ring draws, under the count of the case */
.g-counters > div > span.g-counter-sub { font: 400 10px var(--ev-font-mono); }
.g-counters > .is-reviewed > strong { color: var(--ev-ok); }
.g-legend { position: absolute; right: 14px; bottom: 14px; z-index: 8; max-width: min(320px, calc(100% - 28px)); max-height: calc(100% - 28px); overflow: auto; border: 1px solid var(--ev-border); border-radius: 12px; background: var(--glass); backdrop-filter: blur(8px); box-shadow: var(--shadow-float); font-size: 12px; color: var(--ev-text-2); }
.g-legend-toggle { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 12px; border: 0; background: none; color: var(--ev-text-2); font: 500 12px var(--ev-font-ui); cursor: pointer; border-radius: 12px; }
.g-legend-toggle:hover { color: var(--ev-text); }
.g-legend-toggle .ev-ic { width: 14px; height: 14px; }
.g-legend-toggle .chev { margin-left: auto; transition: transform var(--ev-dur-2); }
.g-legend.is-open .g-legend-toggle .chev { transform: rotate(180deg); }
.g-legend-body { padding: 2px 14px 12px; }
.g-legend h5 { margin: 8px 0 6px; font-size: 10.5px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; color: var(--ev-text-2); }
.g-legend h5 .sub { text-transform: none; letter-spacing: 0; font-weight: 400; }
.g-legend-types { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.g-legend-type { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 32px; padding: 0 6px; border: 0; border-radius: 8px; background: none; color: var(--ev-text); font: 400 12px var(--ev-font-ui); text-align: left; cursor: pointer; }
.g-legend-type:hover { background: var(--row-hover); }
.g-legend-type .swatch { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--c, var(--ev-t-otro)); }
.g-legend-type .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-legend-type .n { margin-left: auto; font: 400 11px var(--ev-font-mono); color: var(--ev-text-2); }
.g-legend-type[aria-pressed="false"] .swatch { background: none; box-shadow: inset 0 0 0 1.5px var(--c, var(--ev-t-otro)); }
.g-legend-type[aria-pressed="false"] .name { color: var(--ev-text-2); text-decoration: line-through; }
.g-legend-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; }
.g-legend-list.one { grid-template-columns: 1fr; }
.g-legend-list li { display: flex; align-items: center; gap: 7px; color: var(--ev-text-2); }
.g-legend-list .g-mark { position: static; flex: none; }
.g-line { display: inline-block; flex: none; width: 24px; height: 0; border-top: 1.4px dashed var(--ev-text-3); }

/* ------------------------------------------------------------------------------------------------
   Stage (T2.3, plan 3.1 and 4.5): the image inside a node and the collections. A node that has an
   image (a confirmed face crop, a profile photo of an account) shows it round, inside its border, over
   its initials or its icon (a photo that does not arrive hides and leaves them); the ring, the badge
   and the label stay. A collection node ("N más", "Contraer") is a dashed disc with +N or a minus sign.
   ------------------------------------------------------------------------------------------------ */
.g-subject .g-disc, .g-leaf .g-disc { position: relative; overflow: hidden; }
.g-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; pointer-events: none; user-select: none; }
[data-theme="dark"] .g-img { filter: saturate(0.92) brightness(0.95); }
.g-subject.has-img .g-disc { background: var(--ev-surface-2); }
.g-leaf.has-img .g-disc { background: var(--ev-surface-2); }
.g-leaf.is-more { cursor: pointer; }
.g-leaf.is-collapse .g-disc { border-style: solid; }
/* 2026-10-13 (the owner: a profile photo read 6 px wide on the fitted stage): a node that shows an image reads at any fit. Its box takes
   the diameter the page gives it (--img-d, in stage px: osintLayout.imageSizes over the room the layout left), so its label, which sits
   beside its box, moves out with its edge; the badge stays on the disc's rim (14.64 % is where the rim meets the diagonal), at the place
   it always had at the base size; under the lens it grows only up to the size the lens gives any leaf (--lens-ki) */
.g-leaf.has-img { width: var(--img-d, 28px); height: var(--img-d, 28px); }
.g-subject.has-img { width: var(--img-d, 64px); height: var(--img-d, 64px); }
.g-leaf.has-img .g-mark { right: calc(14.64% - 8.1px); bottom: calc(14.64% - 8.1px); }
.g-subject.has-img .g-subject-badge { right: calc(14.64% - 12.37px); bottom: calc(14.64% - 12.37px); }
.g-stage.is-lens .g-leaf.has-img.is-lens-on, .g-stage.is-lens .g-leaf.has-img.is-lens-nb { transform: translate(-50%, -50%) scale(var(--lens-ki, 1)); }

/* ------------------------------------------------------------------------------------------------
   The lens of the stage (lupa-grafo.js), at any scale: the relations of the node under the pointer
   or the keyboard that the stage does not draw flow from their origin to their destination (to the
   hub of a folded end; --lens-u is one screen px in stage px, so the line, its dashes and its head
   read the same at any scale) and a card beside it reads it (a selected node has the same lens, with
   no card: the Ficha reads it). While the fitted graph draws a leaf under about 20 screen px, the
   node grows by --lens-k (to 22 screen px, at most ten times) and what it is connected with by
   --lens-k2 (to 12 screen px, at most five times), labels included; zoomed in both are 1, so the
   scale is the identity and only the stacking lifts the node and its neighbours. The rules
   live under .is-lens only, so the emerge of the handoff (osintEmerge owns the transform while it
   runs) is never touched; a leaf carries its stacking in its inline style, hence the important
   z-index. The card never takes the pointer and never prints. At any scale, the lines the stage lights
   for the node under the pointer or selected (is-flow: the spine of its hub, the member edges, the
   edge of a finding, the dashed line of a search) flow the same way, from the start of the path to
   its end, which is the origin of the relation and its destination; --lens-u is set on the stage at
   every scale for them.
   ------------------------------------------------------------------------------------------------ */
.g-stage.is-lens .g-leaf, .g-stage.is-lens .g-hub { transition: opacity var(--ev-dur-2), transform var(--ev-dur-1); }
.g-stage.is-lens .g-leaf.is-lens-on, .g-stage.is-lens .g-hub.is-lens-on { transform: translate(-50%, -50%) scale(var(--lens-k)); z-index: 6 !important; opacity: 1; }
.g-stage.is-lens .g-leaf.is-lens-nb, .g-stage.is-lens .g-hub.is-lens-nb { transform: translate(-50%, -50%) scale(var(--lens-k2)); z-index: 5 !important; opacity: 1; }
.g-lens-edge { fill: none; stroke: var(--gc); stroke-width: calc(1.5px * var(--lens-u, 1)); stroke-linecap: round; stroke-dasharray: calc(6px * var(--lens-u, 1)) calc(8px * var(--lens-u, 1)); animation: osintLensFlow 1.2s linear infinite; }
.g-lens-arrow { fill: var(--gc); stroke: none; }
/* 2026-10-22 (fix/lupa-tope-simetrico): past DENSE_CURVES (lupa-grafo.js) every curve is still drawn, thinner and without its head */
.g-lens-edge.is-dense { stroke-width: calc(0.75px * var(--lens-u, 1)); opacity: 0.75; }
@keyframes osintLensFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: calc(-14px * var(--lens-u, 1)); } }
.g-stage .g-edge.is-flow, .g-stage .g-pivot.is-flow { stroke-width: calc(1.5px * var(--lens-u, 1)); stroke-dasharray: calc(6px * var(--lens-u, 1)) calc(8px * var(--lens-u, 1)); animation: osintLensFlow 1.2s linear infinite; }
.g-lens { position: absolute; z-index: 9; display: flex; align-items: flex-start; gap: 10px; width: 240px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-md); background: var(--ev-surface); box-shadow: var(--ev-shadow-2); color: var(--ev-text); font-family: var(--ev-font-ui); text-align: left; pointer-events: none; user-select: none; transform: translateY(-50%); }
.g-lens.side-left { transform: translate(-100%, -50%); }
.g-lens-img { position: relative; flex: none; width: 48px; height: 48px; box-sizing: border-box; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--gc) 16%, var(--ev-surface)); border: 1.5px solid color-mix(in srgb, var(--gc) 80%, transparent); }
.g-lens-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 2026-10-13: the card of a node that shows an image draws the photo large (lupa-grafo.js CARD_W_IMG) */
.g-lens.has-img { width: 296px; }
.g-lens.has-img .g-lens-img { width: 88px; height: 88px; }
.g-lens-img .ini { font: 600 15px/1 var(--ev-font-ui); letter-spacing: 0.02em; color: var(--ev-text); }
.g-lens-img .ev-ic { width: 22px; height: 22px; color: var(--gc); }
.g-lens-body { flex: 1; min-width: 0; }
.g-lens-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font: 600 13px/17px var(--ev-font-ui); color: var(--ev-text); }
.g-lens-sub { margin-top: 2px; font: 400 11.5px/15px var(--ev-font-ui); color: var(--ev-text-2); }
.g-lens-net { margin-top: 4px; font: 500 11.5px/15px var(--ev-font-ui); color: var(--ev-text); }
.g-lens-profile { margin-top: 2px; font: 400 11px/15px var(--ev-font-mono); color: var(--ev-text-2); overflow-wrap: anywhere; }
.g-lens-links { margin-top: 6px; font: 400 11.5px/15px var(--ev-font-ui); color: var(--ev-text-2); overflow-wrap: anywhere; }
.g-lens-links b { display: block; font-weight: 600; color: var(--ev-text); }
/* the account a reading read the node from (before the connections) and what the readings of an account read (under them) */
.g-lens-origin { margin-top: 6px; font: 400 11.5px/15px var(--ev-font-ui); color: var(--ev-text-2); overflow-wrap: anywhere; }
.g-lens-read { margin-top: 6px; font: 400 11.5px/15px var(--ev-font-ui); color: var(--ev-text-2); overflow-wrap: anywhere; }
.g-lens-read b { display: block; font-weight: 600; color: var(--ev-text); }
@media (prefers-reduced-motion: reduce) { .g-lens-edge { animation: none; } }
@media (prefers-reduced-motion: reduce) { .g-stage .g-edge.is-flow, .g-stage .g-pivot.is-flow { animation: none; } }
/* 2026-10-22 (docs/taxonomia-entidades/diseno.md, the path of the source): the path of a node that is the origin of a relation of the
   node under the lens (an outlet, an account that was read, the from of a relation between third parties) flows toward the subject:
   the same dashes, run backwards along the member edge and the spine, which are drawn from the subject outward */
.g-stage .g-edge.is-flow-src { stroke-width: calc(1.5px * var(--lens-u, 1)); stroke-dasharray: calc(6px * var(--lens-u, 1)) calc(8px * var(--lens-u, 1)); animation: osintLensFlow 1.2s linear infinite; animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .g-stage .g-edge.is-flow-src { animation: none; } }
@media print { .g-lens, .g-lens-edge, .g-lens-arrow { display: none; } }

/* ------------------------------------------------------------------------------------------------
   Ficha (T2.4, plan 5 and the prototype's Ficha), design tokens only. One element: the column of the
   workspace (360 px, the wrap's own second column), the drawer of the rail on medium and narrow screens
   and in presentation, the floating card of a selection in presentation and fullscreen. A bar (Ficha,
   Quitar selección, Cerrar), the header (media, name, type line, the verdict control with its reason,
   author line and history, the quick actions), the tabs and the body; the empty state; the card of a
   cited page. The classes the specs read (osint-ficha-section, osint-caption, osint-ficha-note, the
   page body, the faces rows) keep their names and take the tokens inside the Ficha.
   ------------------------------------------------------------------------------------------------ */
.osint-ficha { display: flex; flex-direction: column; min-height: 0; outline: none; color: var(--ev-text); font-size: 13px; }
.osint-ficha.column { grid-row: 1 / -1; grid-column: 2; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--ev-surface); border-left: 1px solid var(--ev-border); }
.osint-ficha.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 90vw); z-index: var(--ev-z-drawer); background: var(--ev-surface); border-left: 1px solid var(--ev-border); box-shadow: var(--ev-shadow-3); animation: osintDrawerIn .2s ease both; }
.osint-ficha.float { position: absolute; right: 12px; top: 96px; width: 340px; max-height: calc(100% - 184px - var(--ws-dock-h)); z-index: 10; overflow-y: auto; background: var(--ev-surface); border: 1px solid var(--ev-border); border-radius: var(--ev-r-lg); box-shadow: var(--ev-shadow-3); cursor: auto; user-select: text; }
.osint-ficha.hidden { display: none; }
.osint-ficha.float .fx-head { max-height: none; overflow: visible; }
.osint-ficha.float .fx-body { flex: none; overflow: visible; }
.osint-ficha.float .fx-seg-opt { padding: 0 2px; font-size: 11.5px; }
.fx-bar { flex: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 8px 0 18px; }
.fx-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; color: var(--ev-text-3); }
.fx-tabname { font: 500 10.5px var(--ev-font-mono); color: var(--ev-text-3); }
.fx-bar-right { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.fx-clear { color: var(--ev-text-2); }
.fx-head { flex: none; max-height: 62%; overflow-y: auto; padding: 2px 18px 14px; border-bottom: 1px solid var(--ev-border); }
.fx-id { display: flex; gap: 12px; align-items: flex-start; }
.fx-media { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--gc, var(--ev-t-otro)) 14%, transparent); color: var(--gc, var(--ev-t-otro)); overflow: hidden; }
.fx-media.is-ini, .fx-media.has-img { border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gc, var(--ev-t-otro)) 60%, transparent); }
.fx-media .ini { font: 600 14px/1 var(--ev-font-ui); letter-spacing: .02em; color: var(--ev-text); }
.fx-media .ev-ic { width: 22px; height: 22px; }
.fx-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* 2026-10-13: the Ficha's header draws the node's image large (a face, a profile photo, the reference photo) */
.fx-media.has-img { width: 88px; height: 88px; }
.fx-txt { flex: 1; min-width: 0; }
.fx-name { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ev-text); overflow-wrap: anywhere; }
.fx-type { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 5px; font-size: 12px; color: var(--ev-text-2); }
.fx-pill-role { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 5px; background: var(--ev-brand-soft); color: var(--ev-brand); font: 600 10px/1 var(--ev-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.fx-new { display: inline-flex; align-items: center; gap: 5px; color: var(--ev-brand); font: 600 10px/1 var(--ev-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.fx-new-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ev-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev-brand) 25%, transparent); }
.fx-img-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border: 1px dashed var(--ev-border-strong); border-radius: 5px; color: var(--ev-text-2); font: 500 10px/1 var(--ev-font-mono); white-space: nowrap; }
.fx-img-tag.is-unconfirmed { border-color: var(--ev-doubt); background: var(--ev-doubt-soft); color: var(--ev-text); }
.fx-sens-tag { display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 7px; border-radius: 5px; background: var(--ev-doubt-soft); color: var(--ev-text); font-size: 11px; font-weight: 500; }
.fx-sens-tag .ev-ic { width: 12px; height: 12px; color: var(--ev-doubt); }
/* 2026-10-22: an account the reader discovered and never read (lupa-grafo.js unreadAccounts): the red tag of the head and its read actions */
.fx-unread-tag { display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 7px; border-radius: 5px; background: var(--ev-bad-soft); color: var(--ev-bad); font-size: 11px; font-weight: 600; cursor: help; }
.fx-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ev-bad); }
.fx-unread-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* 2026-10-22 (contacts in common, docs/taxonomia-entidades/diseno.md): the contacts a contact's lists gave, what is not shown and the way
   to bring it, and a list the reading got only part of, in amber */
.fx-contacts { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 12px; color: var(--ev-text-2); }
.fx-contacts-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.fx-contacts-partial { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--ev-doubt); }
.fx-contacts-partial .ev-ic { width: 14px; height: 14px; flex: none; }
.fx-contacts-bring { border: 0; padding: 0; background: none; font: inherit; color: var(--ev-brand); text-decoration: underline; cursor: pointer; }
.fx-contacts-bring[aria-disabled="true"] { color: var(--ev-text-3); cursor: not-allowed; text-decoration: none; }
.fx-supplied { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, var(--ev-t-org) 12%, transparent); font-size: 12px; line-height: 1.45; color: var(--ev-text); }
.fx-supplied .ev-ic { width: 14px; height: 14px; margin-top: 2px; color: var(--ev-t-org); }
/* 2026-10-14 (feat/parentesco-con-genero): the sex of a person in the Ficha, its select and who gave it on one row */
.fx-sex .fx-sec-title { display: block; }
.fx-sex-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.fx-sex-row .ev-select-wrap { min-width: 160px; }
.fx-sex-by { font-size: 12px; color: var(--ev-text-2); }
.fx-sex-conflict { margin-top: 6px; padding-left: 8px; border-left: 2px solid var(--ev-text-3); }
/* the verdict: one segmented row (the icon shows on the pressed option, in the colour of its state) */
.fx-verdict { margin-top: 12px; }
.fx-vtitle { margin-bottom: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; color: var(--ev-text-3); }
.fx-seg { display: flex; width: 100%; gap: 2px; padding: 3px; border: 1px solid var(--ev-border); border-radius: 10px; background: var(--ev-surface-2); }
/* the density the subject variant already used: at the width of the Ficha, four options at 12px cut "Confirmado" to "Confir..." */
.fx-seg-opt { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 3px; height: 32px; padding: 0 2px; border: 0; border-radius: 7px; background: none; color: var(--ev-text-2); font: 500 11.5px/1 var(--ev-font-ui); white-space: nowrap; cursor: pointer; transition: background var(--ev-dur-1), color var(--ev-dur-1); }
.fx-seg.is-subject .fx-seg-opt { padding: 0 2px; font-size: 11.5px; }
.fx-seg-opt .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fx-seg-opt .ev-ic { display: none; width: 13px; height: 13px; }
.fx-seg-opt:hover { color: var(--ev-text); }
.fx-seg-opt.on { background: var(--seg-on); color: var(--ev-text); box-shadow: var(--ev-shadow-1); }
.fx-seg-opt.on .ev-ic { display: inline-block; }
.fx-seg-opt.on.v-confirmed .ev-ic { color: var(--ev-ok); }
.fx-seg-opt.on.v-doubt .ev-ic { color: var(--ev-doubt); }
.fx-seg-opt.on.v-discarded .ev-ic { color: var(--ev-bad); }
.fx-seg-opt.on.v-unreviewed .ev-ic { display: none; }
.fx-seg-opt:disabled { cursor: default; }
.fx-reason { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.fx-reason-label { font-size: 11.5px; font-weight: 500; color: var(--ev-text-2); }
.fx-reason-input { height: 32px; font-size: 12.5px; }
.fx-vmeta { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--ev-text-2); }
.fx-vhist { margin-top: 4px; }
.fx-vhist-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.fx .fx-vhist-head .fx-vhist-toggle { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin: 0; padding: 0 6px 0 0; border: 0; background: none; color: var(--ev-text-2); font-size: 10.5px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; cursor: pointer; }
.fx .fx-vhist-head .fx-vhist-toggle:hover { color: var(--ev-text); }
.fx-vhist-toggle .ev-ic { width: 14px; height: 14px; }
.fx-vhist-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 2px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--ev-surface-2); font-size: 11.5px; line-height: 1.4; }
.fx-vhist-list[hidden] { display: none; }
.fx-vhist-list .row { display: flex; flex-direction: column; }
.fx-vhist-list .change { font-weight: 500; color: var(--ev-text); overflow-wrap: anywhere; }
.fx-vhist-list .meta { font: 400 10.5px var(--ev-font-mono); color: var(--ev-text-2); }
.fx-vhist-list .why { color: var(--ev-text-2); overflow-wrap: anywhere; }
/* the quick actions: at most three and the menu */
.fx-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.fx-quick .ev-btn { flex: 0 1 auto; min-width: 0; }
.fx-quick .ev-btn .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-quick .ev-btn-ghost { padding: 0 8px; }
.fx-q-main { flex: 1 1 100%; justify-content: flex-start; }
.fx-more { margin-left: auto; }
.fx-why { margin-top: 8px; padding-left: 8px; border-left: 2px solid var(--ev-doubt); font-size: 12px; line-height: 1.4; color: var(--ev-text-2); }
/* the tabs */
/* The tabs of the Ficha read as a tab strip: a surface of their own, pills, the open one filled with the brand colour. They wrap, so
   with six of them none is ever clipped out of sight (the old overflow with a hidden scrollbar lost "Notas"). */
.fx-tabs { flex: none; display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px 2px; padding: 6px 8px; background: var(--ev-surface-2); border-bottom: 1px solid var(--ev-border); }
/* B21: 32 px high, the size rule of every control outside the stage (accesibilidad.py hit_targets), as its sub-tabs already are */
.fx-tab { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--ev-text-2); font: 500 12.5px/1 var(--ev-font-ui); white-space: nowrap; cursor: pointer; }
.fx-tab:hover { color: var(--ev-text); background: rgba(255, 255, 255, 0.05); }
.fx-tab.on { color: var(--ev-text); background: color-mix(in srgb, var(--ev-brand) 18%, transparent); border-color: color-mix(in srgb, var(--ev-brand) 45%, transparent); font-weight: 600; }
.fx-tab .count { font: 500 10.5px/1 var(--ev-font-mono); color: var(--ev-text-2); }
.fx-tab.on .count { color: var(--ev-brand); }
/* the Vistazo: six chips under the verdict and the actions, each a shortcut to the tab that holds its detail; the two of most value (where,
   last seen) take the ok colour */
/* two chips per row: at the width of the Ficha three gave 90px each and every value was cut ("Localidad Ke...", "Hace 4 sema...") */
.fx-glance { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--ev-border); background: var(--ev-surface-2); }
.fx-chip { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; padding: 7px 8px; border: 1px solid var(--ev-border); border-radius: 8px; background: var(--ev-surface); color: var(--ev-text); font: inherit; text-align: left; cursor: pointer; }
.fx-chip:hover { border-color: var(--ev-brand); }
.fx-chip:focus-visible { outline: 2px solid var(--ev-brand); outline-offset: 1px; }
.fx-chip.is-hot { border-color: color-mix(in srgb, var(--ev-ok) 45%, var(--ev-border)); }
/* the value may take two lines; a chip whose figure is cut off says nothing in the two seconds it is meant for */
.fx-chip-v { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%; overflow: hidden; white-space: normal; overflow-wrap: anywhere; font: 600 13px/1.25 var(--ev-font-ui); }
.fx-chip.is-hot .fx-chip-v { color: var(--ev-ok); }
.fx-chip-v .d { margin-right: 6px; }
.fx-chip-v .d:last-child { margin-right: 0; }
.fx-chip-v .d.up { color: var(--ev-ok); }
.fx-chip-v .d.down { color: var(--ev-bad); }
.fx-chip-v .d.flat { color: var(--ev-text-3); }
.fx-chip-s { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%; overflow: hidden; white-space: normal; overflow-wrap: anywhere; font-size: 10.5px; line-height: 1.3; color: var(--ev-text-2); }
/* the sub-tabs of Evidencia (Fuentes, Descartados, Fotos): the same bar one step lower, under the tabs */
.fx-subtabs { background: transparent; padding-top: 4px; }
.fx-subtab { height: 32px; font-size: 11.5px; }
/* what holds the verdict ("Es el? Que lo sostiene"), the first section of Resumen: its reason, who and when, and the history folded */
.fx-support .fx-reason { margin-top: 0; }
.fx-support .fx-vmeta { margin-top: 6px; }
/* the body and its sections */
.fx-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px 22px; font-size: 13px; line-height: 1.5; color: var(--ev-text); }
.fx-sec { margin-top: 18px; }
.fx-body > .fx-sec:first-child { margin-top: 0; }
/* the Resumen de inteligencia at the top of the body: a card that reads as a synthesis, its brief in paragraphs or bullets, a note that it is generated */
.fx-summary { margin: 0 0 6px; padding: 12px 14px; border: 1px solid var(--ev-border); border-radius: 12px; background: var(--ev-surface-2); }
.fx-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* the card sits on --ev-surface-2, where --ev-text-3 reads 4.4:1 (dark) and 4.2:1 (light) at 10.5 px: its title takes --ev-text-2 */
.fx-summary-head .fx-sec-title { margin: 0; color: var(--ev-text-2); }
.fx-summary [data-summary-action] { flex: none; }
.fx-summary .fx-hint { margin-top: 8px; }
.osint-summary-wait { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--ev-text-2); }
.osint-summary-wait .txt { flex: 1; }
.osint-summary-spin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ev-border-strong); border-top-color: var(--ev-brand); animation: osintSpin 0.8s linear infinite; }
.osint-summary-brief { margin-top: 10px; }
.osint-summary-brief .osint-summary-p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--ev-text); }
.osint-summary-brief .osint-summary-p:last-of-type { margin-bottom: 0; }
.osint-summary-list { margin: 0 0 8px; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.osint-summary-list li { font-size: 13px; line-height: 1.5; color: var(--ev-text); }
/* the control that unfolds the rest of a brief that opens short */
.osint-summary-fold { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; margin: 6px 0 0; padding: 0; border: 0; background: none; color: var(--ev-brand); font: 500 12px/1 var(--ev-font-ui); cursor: pointer; }
.osint-summary-fold:hover { text-decoration: underline; }
.osint-summary-fold .ev-ic { width: 14px; height: 14px; }
.osint-summary-note { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--ev-border); font-size: 11.5px; line-height: 1.45; color: var(--ev-text-3); }
.osint-summary-meta { margin: 4px 0 0; font: 400 11px var(--ev-font-mono); color: var(--ev-text-3); }
.fx-summary [data-summary-message="error"] { color: var(--ev-bad); }
.fx-sec-title, .fx .osint-caption { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 10.5px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; color: var(--ev-text-3); }
.fx-sec-title .n { font: 500 11px/1 var(--ev-font-mono); letter-spacing: 0; text-transform: none; color: var(--ev-text-3); }
.fx-hint, .fx-text, .fx .osint-ficha-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ev-text-2); }
.fx .osint-host, .fx .osint-date { color: var(--ev-text-2); font: 400 11px var(--ev-font-mono); }
.fx .osint-link { color: var(--ev-brand); }
.fx .osint-link:hover { color: var(--ev-brand-hover); }
/* Resumen: the properties with their citation */
.fx-props { display: flex; flex-direction: column; margin: 0; }
.fx-prop { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--ev-border); }
.fx-prop:last-child { border-bottom: 0; }
.fx-prop dt { padding-top: 7px; font-size: 12px; color: var(--ev-text-2); }
.fx-prop dd { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; min-height: 32px; margin: 0; font-size: 13px; line-height: 1.45; color: var(--ev-text); overflow-wrap: anywhere; }
.fx-v.mono { font: 500 12px var(--ev-font-mono); }
.fx-sens { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--ev-doubt); }
.fx-sens .ev-ic { width: 13px; height: 13px; }
.fx-cite { display: inline-flex; align-items: center; min-width: 32px; min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.fx-cite .chip { display: inline-flex; align-items: center; gap: 4px; max-width: 180px; height: 22px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--ev-brand) 30%, transparent); border-radius: 5px; background: color-mix(in srgb, var(--ev-brand) 9%, transparent); color: var(--ev-brand); font: 500 11px/1 var(--ev-font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-cite .ev-ic { width: 12px; height: 12px; }
/* S2.6: the profile reading kept with the case, shown in the Ficha of the account (Informacion, Publicaciones, Reels) */
.osint-perfil-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.osint-perfil-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: 1px solid var(--ev-border); border-radius: 11px; background: var(--ev-surface-2); color: var(--ev-text-2); font: 500 11px/1 var(--ev-font-mono); }
.osint-perfil-block { margin-top: 14px; }
.osint-perfil-block > .osint-caption { margin-bottom: 6px; }
.osint-perfil-group { margin-bottom: 8px; }
.osint-perfil-group:last-child { margin-bottom: 0; }
.osint-perfil-grouptitle { margin: 2px 0 2px; font-size: 12px; font-weight: 600; color: var(--ev-text); }
.osint-perfil-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ev-border); }
.osint-perfil-item:last-child { border-bottom: 0; }
.osint-perfil-img { flex: 0 0 auto; width: 72px; height: 72px; margin: 0; border: 1px solid var(--ev-border); border-radius: 6px; overflow: hidden; background: var(--ev-surface-2); }
.osint-perfil-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.osint-perfil-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.osint-perfil-date { font: 400 11px var(--ev-font-mono); color: var(--ev-text-2); }
.osint-perfil-text { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ev-text); overflow-wrap: anywhere; }
.osint-perfil .osint-perfil-block .fx-props { margin: 0; }
/* S: what others did on an activity (kudos, partners, comments), under its text; tokens only, light and dark */
.osint-perfil-extra { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ev-text-2); overflow-wrap: anywhere; }
.osint-perfil-extra.is-muted { color: var(--ev-text-3); }
.osint-perfil-comments { list-style: none; margin: 2px 0 0; padding: 0 0 0 8px; border-left: 2px solid var(--ev-border); display: flex; flex-direction: column; gap: 3px; }
.osint-perfil-comments li { font-size: 12px; line-height: 1.45; color: var(--ev-text); overflow-wrap: anywhere; }
.osint-perfil-comments .who { font-weight: 600; }
.osint-perfil-comments .what { color: var(--ev-text-2); }
/* S: the tables of an athlete's sections (totals by sport and period, best efforts, gear, trophies, achievements) */
.osint-st-wrap { max-width: 100%; overflow-x: auto; }
.osint-st { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.4; }
.osint-st th { padding: 4px 8px 4px 0; text-align: left; font: 500 10.5px var(--ev-font-mono); letter-spacing: .02em; color: var(--ev-text-3); border-bottom: 1px solid var(--ev-border); }
.osint-st td { padding: 4px 8px 4px 0; vertical-align: middle; color: var(--ev-text); border-bottom: 1px solid var(--ev-border); overflow-wrap: break-word; }
.osint-st tr:last-child td { border-bottom: 0; }
.osint-st td.is-head { font-weight: 600; white-space: nowrap; }
.osint-st td.is-val, .osint-st td.is-date { font-family: var(--ev-font-mono); font-size: 11.5px; white-space: nowrap; }
.osint-st td.is-total { font-family: var(--ev-font-mono); font-size: 11.5px; }
.osint-st td.is-date { color: var(--ev-text-2); }
.osint-st .fx-textlink { min-height: 24px; font: inherit; }
.osint-st-more { margin: 4px 0 0; }
/* S (2026-10-07): the contact lists of a profile (Seguidores, Siguiendo, Amigos): a header that opens the people, a pill with the state of the list,
   and a plain list of names with the place each person shows; tokens only, light and dark */
.osint-people-head { flex-wrap: wrap; row-gap: 2px; }
.osint-people-head .osint-people-toggle, .pf-group .osint-people-toggle { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; margin: 0; padding: 0 6px 0 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.osint-people-toggle:hover { color: var(--ev-text); }
.osint-people-toggle .ev-ic { width: 14px; height: 14px; }
.osint-people-state { margin-left: auto; padding: 1px 7px; border: 1px solid var(--ev-border); border-radius: 999px; font-size: 10.5px; font-weight: 500; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--ev-text-3); }
.osint-people { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.osint-people li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; padding: 3px 0; border-bottom: 1px solid var(--ev-border); font-size: 12.5px; line-height: 1.4; color: var(--ev-text); overflow-wrap: anywhere; }
.osint-people li:last-child { border-bottom: 0; }
.osint-people .fx-textlink { min-height: 24px; font: inherit; }
.osint-people .loc { font-size: 11.5px; color: var(--ev-text-3); }
.osint-people-badge { align-self: center; padding: 1px 8px; border: 1px solid var(--ev-border); border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 1.4; }
.osint-people-badge.is-nuevo, .osint-people-badge.is-volvio { border-color: color-mix(in srgb, var(--ev-ok) 45%, transparent); background: var(--ev-ok-soft); color: var(--ev-ok); }
.osint-people-badge.is-times { border-color: color-mix(in srgb, var(--ev-ok) 45%, transparent); background: var(--ev-ok-soft); color: var(--ev-ok); }
.osint-people-badge.is-tags { font-weight: 500; color: var(--ev-text-2); }
/* Con quien: the people of the associates, the changes, the search and the engagers carry the place or the detail to the right of the row */
[data-who-person] .loc { margin-left: auto; text-align: right; }
.osint-people-badge.is-salio { border-color: color-mix(in srgb, var(--ev-doubt) 45%, transparent); background: var(--ev-doubt-soft); color: var(--ev-doubt); }
/* S: the pattern of a day computed from the activities: one bar per weekday and per band of four hours */
.osint-rutina { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; margin-top: 4px; }
.osint-rutina-col { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.osint-rutina-h { font: 500 10.5px var(--ev-font-mono); color: var(--ev-text-3); margin-bottom: 2px; }
.osint-rutina-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 32px; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ev-text-2); }
.osint-rutina-row .k { white-space: nowrap; }
.osint-rutina-row .bar { display: block; height: 8px; border-radius: 4px; background: var(--ev-surface-2); overflow: hidden; }
.osint-rutina-row .fill { display: block; height: 100%; border-radius: 4px; background: var(--ev-brand); }
.osint-rutina-row .n { font-family: var(--ev-font-mono); text-align: right; color: var(--ev-text); }
/* the days and the band that repeat are lit: that is when the account is predictable */
.osint-rutina-row.is-top { color: var(--ev-text); font-weight: 600; }
.osint-rutina-row.is-top .fill { background: var(--ev-ok); }
/* Frescura: what depends on the time says when it was extracted and offers to update just that (inline in the brief, a row under the card of Donde y cuando) */
.fx-fresh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 12px; padding: 6px 2px 0; border-top: 1px dashed var(--ev-border); font-size: 11px; color: var(--ev-text-2); }
.osint-summary-brief p.fx-fresh { margin: 8px 0 0; }
.fx-fresh-as { font-size: 11px; color: var(--ev-text-2); }
.fx-fresh-inline { white-space: normal; }
.fx-fresh-inline .fx-fresh-as { margin-right: 6px; }
.fx-refresh { display: inline-block; margin: -5px 0; padding: 5px 0; border: 0; background: none; color: var(--ev-brand); font: 500 11px/1.3 var(--ev-font-ui); white-space: nowrap; cursor: pointer; }
.fx-refresh:hover { text-decoration: underline; }
.fx-refresh:focus-visible { outline: 2px solid var(--ev-brand); outline-offset: 2px; border-radius: 3px; }
.fx-refresh:disabled { color: var(--ev-text-3); cursor: default; text-decoration: none; }
/* Donde y cuando: the card of the last time the account was located, the tag that says a zone is an estimate, and the head of a fold with its "Ver todas" */
.fx-last { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 0 0 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--ev-ok) 40%, var(--ev-border)); border-radius: 10px; background: color-mix(in srgb, var(--ev-ok) 10%, var(--ev-surface)); }
.fx-last-main, .fx-last-when { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fx-last-place { font: 600 14px/1.25 var(--ev-font-ui); color: var(--ev-ok); overflow-wrap: anywhere; }
.fx-last-sub, .fx-last-approx { font-size: 11.5px; line-height: 1.35; color: var(--ev-text-2); }
.fx-last-when { align-items: flex-end; text-align: right; }
.fx-last-when b { font: 600 12.5px/1.25 var(--ev-font-ui); color: var(--ev-doubt); white-space: nowrap; }
.fx-last-when small { font: 400 11px/1.3 var(--ev-font-mono); color: var(--ev-text-2); white-space: nowrap; }
.fx-est { margin-left: 6px; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 10.5px; color: var(--ev-text-3); }
.fx-foldhead { align-items: center; }
.fx-fold-all { margin: -6px 0 -6px auto; padding: 6px 0; border: 0; background: none; color: var(--ev-brand); font: 500 11.5px/1 var(--ev-font-ui); letter-spacing: 0; text-transform: none; cursor: pointer; }
.fx-fold-all:hover { text-decoration: underline; }
/* S: the zones of a day of an athlete (osintScrap.zonesOf). A card per zone with its estimated role, the place name and the centroid, the
   count and share, the dates and the typical hour, and the weekday and band spread (the osint-rutina bars, tightened). Tokens only. */
.osint-zona { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--ev-border); border-radius: 8px; background: var(--ev-surface-2); }
.osint-zona:first-of-type { margin-top: 6px; }
.osint-zona-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.osint-zona-rol { font-size: 10.5px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; color: var(--ev-brand); }
.osint-zona-name { font-size: 12.5px; font-weight: 600; color: var(--ev-text); }
.osint-zona-coord { font: 500 11px/1.3 var(--ev-font-mono); color: var(--ev-text-3); }
.osint-zona-aprox { font-size: 10.5px; color: var(--ev-text-3); border: 1px solid var(--ev-border); border-radius: 999px; padding: 1px 7px; }
.osint-zona-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 4px 0 2px; font-size: 11.5px; color: var(--ev-text-2); }
.osint-zona-share { color: var(--ev-text); }
.osint-zona-rutina { margin-top: 6px; }
.pf-more { display: flex; justify-content: center; padding-top: 14px; }
/* S2.7: the control that opens the reader, under the chips of the panel */
.osint-perfil-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
/* S2.8: "Desvincular esta lectura" reads as the one undo of the panel: a ghost button that takes the danger colour on hover and focus */
.osint-perfil-unlink:hover, .osint-perfil-unlink:focus-visible { background: var(--ev-bad-soft); color: var(--ev-bad); }
.osint-perfil-unlink:hover .ev-ic, .osint-perfil-unlink:focus-visible .ev-ic { color: var(--ev-bad); }
/* S2.7: the reader of the stored profile (?modal=perfil): the whole profile in one column, read like a page; tokens only, light and dark */
.osint-modal.pf-modal { width: min(760px, 100%); max-height: min(900px, 94vh); }
.osint-modal.cal-modal { width: min(900px, 100%); max-height: min(780px, 92vh); }
.osint-heat-body { padding: 0; gap: 0; }
.osint-heat-canvas { flex: 1; min-height: 360px; width: 100%; background: var(--ev-surface); }
.osint-heat-canvas .leaflet-container { height: 100%; width: 100%; background: var(--ev-surface); }
.osint-heat-note { margin: 0; padding: 10px 20px; border-top: 1px solid var(--ev-border); }
.osint-heat-body [data-heat-empty] { padding: 16px 20px; }
/* the heat map modal moves by its title bar and fills the window when maximized (the move is a translate set by the page; maximized, the box
   leaves the centered layer and takes the window less a small margin) */
.osint-modal.cal-modal .osint-modal-head { cursor: grab; touch-action: none; user-select: none; }
.osint-modal.cal-modal[data-dragging] .osint-modal-head { cursor: grabbing; }
.osint-modal.cal-modal .osint-modal-head button { cursor: pointer; }
.osint-modal.cal-modal .osint-modal-head [data-heat-max] { margin-left: auto; }
.osint-modal.cal-modal.is-max { position: fixed; inset: 8px; width: auto; max-height: none; transform: none !important; }
.osint-modal.cal-modal.is-max .osint-heat-canvas { min-height: 0; }
.pf-read { display: block; padding: 20px 28px 32px; }
.pf-read:focus-visible { outline-offset: -3px; }
.pf-read > * { width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; }
.pf-head { padding-bottom: 14px; border-bottom: 1px solid var(--ev-border); }
.pf-headline { margin: 0 0 10px; font-size: 16px; line-height: 1.5; color: var(--ev-text); overflow-wrap: anywhere; }
.pf-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; }
.pf-fact { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ev-text-2); }
.pf-fact .ev-ic { width: 14px; height: 14px; color: var(--ev-text-3); }
.pf-note { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--ev-text-2); }
.pf-head .pf-note { margin: 0; }
.pf-sec { margin-top: 26px; }
.pf-sec > .fx-sec-title { margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--ev-border); }
.pf-group { margin-bottom: 14px; }
.pf-group:last-child { margin-bottom: 0; }
.pf-group-title { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--ev-text); }
.pf-read .fx-prop { grid-template-columns: 150px minmax(0, 1fr); }
.pf-read .fx-prop dd { font-size: 14px; }
.pf-post { display: flex; flex-direction: column; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--ev-border); }
.pf-post:first-of-type { padding-top: 6px; }
.pf-post:last-child { border-bottom: 0; padding-bottom: 0; }
.pf-date { font: 500 11.5px/1.2 var(--ev-font-mono); color: var(--ev-text-2); }
.pf-text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ev-text); white-space: pre-line; overflow-wrap: anywhere; }
.pf-fig { display: flex; justify-content: center; margin: 2px 0 0; border: 1px solid var(--ev-border); border-radius: var(--ev-r-md); overflow: hidden; background: var(--ev-surface-2); }
.pf-fig img { display: block; width: auto; max-width: 100%; height: auto; max-height: 460px; object-fit: contain; }
.pf-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.pf-reels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-items: start; gap: 14px; }
.pf-reel { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-md); background: var(--ev-surface-2); }
.pf-reel-fig { margin: 0; border-radius: var(--ev-r-sm); overflow: hidden; background: var(--ev-surface-3); }
.pf-reel-fig img { display: block; width: 100%; height: auto; max-height: 240px; object-fit: cover; }
@media (max-width: 640px) {
  .pf-read { padding: 16px 16px 24px; }
  .pf-read .fx-prop { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pf-read .fx-prop dt { padding-top: 6px; }
}
.fx-cite:hover .chip { background: color-mix(in srgb, var(--ev-brand) 20%, transparent); }
/* Vínculos: the other end, the quote, the page, the three marks of the relation */
.fx-rel { padding: 0 0 10px; margin-bottom: 10px; border-bottom: 1px solid var(--ev-border); }
.fx-rel:last-of-type { margin-bottom: 0; border-bottom: 0; }
.fx-link-card { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--ev-border); border-radius: 10px; background: var(--ev-surface); color: var(--ev-text); font: inherit; text-align: left; cursor: pointer; }
.fx-link-card:hover { border-color: var(--ev-border-strong); background: var(--row-hover); }
.fx-link-card .txt { flex: 1; min-width: 0; }
.fx-link-card .pred { display: block; margin-bottom: 2px; font-size: 11.5px; line-height: 1.3; color: var(--ev-text-2); }
.fx-link-card .other { display: block; font-size: 13px; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-rel .fx-link-card { margin-bottom: 0; }
.fx-rel.v-discarded .fx-link-card { border-style: dashed; }
.fx-badge { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: color-mix(in srgb, var(--gc, var(--ev-t-otro)) 14%, transparent); color: var(--gc, var(--ev-t-otro)); }
.fx-badge .ev-ic { width: 14px; height: 14px; }
.fx-conf { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--ev-text-2); font: 500 11px/1 var(--ev-font-mono); }
.fx-conf .bar { position: relative; width: 44px; height: 4px; overflow: hidden; border-radius: 2px; background: var(--ev-surface-2); }
.fx-conf .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
.fx-conf.high .bar i { background: var(--ev-brand); }
.fx-conf.review .bar i { background: var(--ev-doubt); }
.fx-rel .quote { margin: 8px 0 6px; padding: 0 0 0 10px; border-left: 2px solid var(--ev-brand); font: italic 400 13px/1.5 var(--ev-font-doc); color: var(--ev-text); overflow-wrap: anywhere; }
.fx-rel.low .quote { border-left-style: dashed; }
.fx-rel .src { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; color: var(--ev-text-2); font: 400 11px var(--ev-font-mono); }
.fx-rel .src a { min-width: 0; max-width: 100%; color: var(--ev-brand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-rel .ident { color: var(--ev-text-2); }
/* 2026-10-22 (docs/taxonomia-entidades/diseno.md): the genre tag of a relation, beside its host, on the line of the source */
.fx-rel .src .osint-page-role { display: inline-flex; margin-top: 0; }
.fx .osint-evidence { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 4px; font: 400 11px var(--ev-font-mono); }
.fx .osint-evidence .lvl { color: var(--ev-doubt); }
.fx .osint-evidence .why { color: var(--ev-text-2); }
.fx .osint-discovery { margin-top: 4px; color: var(--ev-text-2); font: 400 11px/1.45 var(--ev-font-mono); }
.fx-rel-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.fx-rv { display: inline-flex; gap: 2px; margin-left: auto; }
.fx-rv-opt { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--ev-border); border-radius: 7px; background: var(--ev-surface); color: var(--ev-text-2); cursor: pointer; }
.fx-rv-opt .ev-ic { width: 14px; height: 14px; }
.fx-rv-opt:hover { border-color: var(--ev-border-strong); color: var(--ev-text); }
.fx-rv-opt.on.v-confirmed { border-color: transparent; background: var(--ev-ok-soft); color: var(--ev-ok); }
.fx-rv-opt.on.v-doubt { border-color: transparent; background: var(--ev-doubt-soft); color: var(--ev-doubt); }
.fx-rv-opt.on.v-discarded { border-color: transparent; background: var(--ev-bad-soft); color: var(--ev-bad); }
.fx-rv-opt:disabled { cursor: default; }
/* También aparece en, Procedencia, Origen y camino */
.fx-cross-lead { margin: 0 0 2px; font-size: 12.5px; font-weight: 500; color: var(--ev-text-2); }
.fx-also { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.fx-also li { border-bottom: 1px solid var(--ev-border); }
.fx-also li:last-child { border-bottom: 0; }
.fx-also-link { display: flex; align-items: center; width: 100%; min-height: 34px; padding: 4px 0; border: 0; background: none; color: var(--ev-brand); font: 500 12.5px/1.35 var(--ev-font-ui); text-align: left; cursor: pointer; }
.fx-also-link:hover { text-decoration: underline; }
.fx-prov { margin: 0; color: var(--ev-text-2); font: 500 12px/1.5 var(--ev-font-mono); }
.fx-pages { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.fx-page, .fx .osint-ficha-page { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 24px; padding: 0 8px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-pill); background: var(--ev-surface); color: var(--ev-text-2); font: 500 10.5px/1 var(--ev-font-mono); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-page.subject, .fx-page.analyst, .fx .osint-ficha-page.subject { border-color: color-mix(in srgb, var(--ev-ok) 50%, transparent); color: var(--ev-text); }
.fx-page.supplied { border-color: color-mix(in srgb, var(--ev-t-org) 50%, transparent); color: var(--ev-text); }
.fx-page.doubt, .fx-page.unconfirmed { border-style: dashed; }
.fx-page .r { color: var(--ev-text-3); }
.fx-path { margin: 6px 0 0; color: var(--ev-text-2); font: 400 11.5px/1.45 var(--ev-font-mono); overflow-wrap: anywhere; }
/* the subject: the identity anchor, its data, Procedencia with the Bitácora */
.fx-anchor { margin-bottom: 14px; padding: 6px 10px 10px; border: 1px dashed var(--ev-border-strong); border-radius: 11px; }
.fx-anchor-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; margin-bottom: 4px; }
.fx-anchor-head .fx-sec-title { margin: 0; }
.fx-anchor-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.fx-anchor-chip { display: inline-flex; flex-direction: column; max-width: 100%; padding: 3px 7px; border-radius: 6px; background: var(--ev-surface-2); color: var(--ev-text); font-size: 12px; overflow-wrap: anywhere; }
.fx-anchor-chip i { color: var(--ev-text-2); font: 500 9px/1.3 var(--ev-font-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.fx-prov-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 16px 0 6px; }
.fx-prov-line .fx-sec-title { margin: 0; }
.fx-prov-line .ev-btn { margin-left: auto; }
.fx .osint-faces-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 4px; padding: 8px 10px; border-radius: 10px; background: var(--ev-brand-soft); }
.fx .osint-faces-cta .txt { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.4; color: var(--ev-text); }
.fx .osint-faces-cta[data-faces-cta=aside] { background: var(--ev-doubt-soft); }
.fx .osint-faces-cta .ev-btn { flex: none; }
.fx .osint-face-strip { margin-top: 16px; }
.fx .osint-face-strip .crops { display: flex; flex-wrap: wrap; gap: 8px; }
.fx .osint-face-strip .crop { width: 52px; height: 52px; padding: 0; overflow: hidden; border: 0; border-radius: 50%; background: var(--ev-surface-2); box-shadow: 0 0 0 2px var(--ev-ok); cursor: zoom-in; }
.fx .osint-face-strip .crop img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fx .osint-face-strip .pages { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.fx .osint-face-strip .row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.fx .osint-face-strip .same { font-size: 11.5px; color: var(--ev-text-2); }
.osint-timeline-day { margin-top: 8px; }
.osint-timeline-date { color: var(--ev-text-2); font: 500 11px var(--ev-font-mono); }
.osint-timeline-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 7px; width: 100%; min-height: 32px; margin-top: 2px; padding: 5px 8px 5px 10px; border: 0; border-left: 2px solid var(--ev-border-strong); border-radius: 0 7px 7px 0; background: transparent; color: var(--ev-text); font-size: 12px; line-height: 1.35; text-align: left; cursor: pointer; }
.osint-timeline-row:hover { background: var(--row-hover); }
.osint-timeline-row .name { font-weight: 500; overflow-wrap: anywhere; }
.osint-timeline-row .pred { color: var(--ev-text-2); font: 400 11px var(--ev-font-mono); }
.osint-timeline-row .host { min-width: 0; color: var(--ev-text-2); font: 400 10.5px var(--ev-font-mono); overflow-wrap: anywhere; }
.osint-timeline-row.confirmed { border-left-color: var(--ev-ok); }
.osint-timeline-row.doubt { border-left-color: var(--ev-doubt); }
.osint-timeline-row.discarded { border-left-style: dashed; }
/* 2026-10-21 (docs/taxonomia-entidades): the blocks of the subject's Ficha the taxonomy fills (Datos clave, Delitos, Pistas por resolver,
   Variantes del nombre), each row a timeline row with its quote and its page; and the groups of the lateral panel kept off the ring */
.fx-tax-head { display: flex; align-items: baseline; gap: 6px; }
.fx-tax-head .n { color: var(--ev-text-2); font: 400 11px var(--ev-font-mono); }
.fx-tax-row { margin-top: 2px; }
.fx-tax-row .fx-cite { margin-left: 12px; }
.fx-tax-quote { margin: 2px 0 2px 12px; font-style: italic; }
.fx-v.fx-tax-why { color: var(--ev-text-2); }
.lat-aside { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--ev-border-strong); }
.osint-timeline-row.discarded .name { color: var(--ev-text-2); text-decoration: line-through; }
/* Six columns in a 360px Ficha: the table scrolls sideways instead of breaking every word letter by letter */
.osint-traj { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 12px; }
.osint-traj th, .osint-traj td { min-width: 88px; }
.osint-traj th { padding: 4px 6px 6px 0; color: var(--ev-text-3); font: 500 10px var(--ev-font-mono); letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.osint-traj td { padding: 6px 6px 6px 0; border-top: 1px solid var(--ev-border); color: var(--ev-text-2); vertical-align: top; overflow-wrap: normal; }
.osint-traj td a { color: var(--ev-brand); }
/* Fuentes: one card a page; Descartados: one card a page set aside, with who decided */
.fx-src-card { margin-bottom: 10px; padding: 12px; border: 1px solid var(--ev-border); border-radius: 11px; background: var(--ev-surface); }
.fx-src-card .title { display: block; color: var(--ev-text); font-size: 13px; font-weight: 500; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
.fx-src-card .title:hover { color: var(--ev-brand); text-decoration: underline; }
.fx-src-card .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 4px; color: var(--ev-text-2); font: 400 11px var(--ev-font-mono); }
.fx-src-card .ident { margin-top: 3px; color: var(--ev-text-2); font-size: 11.5px; }
.fx-src-card .role { margin-top: 3px; color: var(--ev-text); font-size: 11.5px; font-weight: 500; }
.fx-src-card .role.blocked, .fx-src-card .role.scanned, .fx-src-card .role.saved { color: var(--ev-text-2); font-weight: 400; }
/* B15 (docs/busqueda-inicial 8.4): the face verdict of a page or a photo against the reference photo: a chip with the sensitive mark, outlined
   (an engine mark, never a tag), on the checkpoint cards, the sources of the Ficha and the crops of Fotos */
.osint-face-verdict { border: 1px dashed var(--ev-border-strong); background: transparent; }
.osint-face-verdict.is-match { border-color: var(--ev-ok); color: var(--ev-text); }
.osint-face-verdict.is-review { border-color: var(--ev-doubt); color: var(--ev-text); }
.osint-face-verdict.is-different { border-color: var(--ev-bad); color: var(--ev-text); }
.ck-card .osint-face-verdict { margin: 2px 0 6px; }
.fx-src-card .role.face .osint-face-verdict { height: auto; min-height: 20px; white-space: normal; }
.osint-crop > .osint-face-verdict { height: auto; max-width: 84px; padding: 1px 5px; font-size: 10px; line-height: 13px; white-space: normal; }
/* a crop of Sin etiqueta keeps its fixed height (the grid's window, LOOSE_ROW_H): its badge takes the line of the side, on one line */
.osint-crop.loose > .osint-face-verdict { display: block; height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-prop-txt .osint-face-verdict { height: auto; white-space: normal; }
.fx-src-card .acts { display: flex; gap: 6px; margin-top: 8px; }
.fx-extra { padding-top: 12px; border-top: 1px solid var(--ev-border); }
.fx-search { display: block; max-width: none; margin: 0 0 10px; }
.fx-disc-card { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; padding: 11px 12px; border: 1px solid var(--ev-border); border-radius: 11px; background: var(--ev-surface); }
.fx-disc-card.reinstated { border-color: color-mix(in srgb, var(--ev-ok) 50%, transparent); }
.fx-disc-card .why { margin: 0; color: var(--ev-text-2); font-size: 12.5px; line-height: 1.45; }
.fx-disc-card .by { color: var(--ev-text-2); font: 400 11px var(--ev-font-mono); white-space: nowrap; }
.fx .osint-reinstate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fx .osint-reinstate .note { flex: 1 1 100%; color: var(--ev-text-2); font-size: 12px; line-height: 1.4; }
.fx .osint-reinstate .note.doubt { padding-left: 8px; border-left: 2px solid var(--ev-doubt); color: var(--ev-text); }
.fx .osint-page-meta .tag { color: var(--ev-text-2); }
.fx .osint-page-meta > * + *::before { color: var(--ev-text-3); }
.fx .osint-page-title { color: var(--ev-text); font-weight: 600; }
.fx a.osint-page-title:hover, .fx a.osint-page-title:focus-visible { color: var(--ev-brand); }
.fx .osint-page-role span { border-color: var(--ev-border); background: var(--ev-surface-2); color: var(--ev-text); }
.fx .osint-page-role .role, .fx .osint-page-role[data-page-role=not_subject] .role, .fx .osint-page-role[data-page-role=mentioned] .role, .fx .osint-page-role[data-page-role=quoted] .role { border-color: var(--ev-border-strong); color: var(--ev-text); }
.fx .osint-page-excerpt { border-left-color: var(--ev-border-strong); }
.fx .osint-page-excerpt p { color: var(--ev-text-2); }
.fx .osint-page-excerpt mark { background: var(--ev-doubt-soft); box-shadow: inset 0 -1px 0 var(--ev-doubt); color: var(--ev-text); }
.fx .osint-page-text { border-color: var(--ev-border); background: var(--ev-surface-2); color: var(--ev-text-2); }
.fx .osint-page-ent { border-color: var(--ev-border); background: var(--ev-surface-2); color: var(--ev-text); }
.fx .osint-page-ent .k { color: var(--ev-text-2); }
.fx .osint-page-more { border-color: var(--ev-border-strong); color: var(--ev-brand); }
.fx .osint-page-thumb { border-color: var(--ev-border); background: var(--ev-surface-2); }
/* Fotos: the people of the case's photos (the rows of the Fotos drawer) and the rule that a person confirms */
.fx .osint-ficha-faces { display: flex; flex-direction: column; gap: 8px; }
.fx .osint-ficha-cross, .fx .osint-ficha-cross .lead { color: var(--ev-text-2); }
.fx .osint-btn { border-color: var(--ev-border-strong); background: var(--ev-surface); color: var(--ev-text); }
.fx .osint-btn:hover { background: var(--ev-surface-2); color: var(--ev-text); }
.fx .osint-btn.primary { border-color: var(--ev-brand); background: var(--ev-brand); color: var(--ev-on-brand); }
.fx .osint-btn.ghost { border-color: transparent; background: transparent; color: var(--ev-text-2); }
.fx-note-fixed { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; color: var(--ev-text-2); font-size: 12px; line-height: 1.45; }
.fx-note-fixed .ev-ic { width: 15px; height: 15px; margin-top: 1px; color: var(--ev-brand); }
/* Notas: the compose form above the list, newest first */
.fx-note-compose { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ev-border); }
.fx .osint-note-about { display: flex; align-items: center; gap: 8px; min-height: 32px; color: var(--ev-text); font-size: 12.5px; cursor: pointer; }
.fx .osint-note-about .lab { flex: 1; min-width: 0; }
.fx .osint-note-about .disc { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ev-t-persona); color: var(--ev-text); font: 600 9.5px var(--ev-font-ui); }
.fx .osint-note-about input:disabled + .lab { color: var(--ev-text-2); }
.fx .osint-toggle { border-color: var(--ev-border-strong); background: var(--ev-surface-2); }
.fx .osint-toggle::after { background: var(--ev-text-3); }
.fx .osint-toggle:checked { border-color: var(--ev-brand); background: var(--ev-brand); }
.fx .osint-toggle:checked::after { background: var(--ev-on-brand); }
.fx-textarea { height: auto; min-height: 72px; padding: 8px 12px; font-size: 13px; line-height: 1.45; resize: vertical; }
.fx .osint-note-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.fx .osint-note-hint { margin-right: auto; color: var(--ev-text-2); font-size: 11.5px; line-height: 1.4; }
.fx .osint-note-hint .osint-link { min-height: 32px; padding: 0; border: 0; background: transparent; font-size: 11.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fx-note { margin-bottom: 8px; padding: 11px 12px; border-radius: 10px; background: var(--ev-surface-2); font-size: 13px; line-height: 1.5; }
.fx-note .meta { margin-bottom: 4px; color: var(--ev-text-2); font: 400 11px var(--ev-font-mono); }
.fx-note .text { color: var(--ev-text); overflow-wrap: anywhere; }
.fx-note .chip { display: inline-flex; margin-right: 6px; padding: 0 6px; border-radius: 5px; background: var(--ev-surface); color: var(--ev-text-2); font: 500 10.5px/18px var(--ev-font-mono); }
.fx-note.assistant { border-left: 3px solid var(--ev-doubt); }
.fx-note.assistant .text { white-space: pre-line; }
.fx-note .mark { margin-bottom: 3px; color: var(--ev-text-2); font: 500 10px var(--ev-font-mono); letter-spacing: .04em; text-transform: uppercase; }
/* what a lookup on a datum found, and the datum's lookups (W13) */
.fx .osint-lookup-note { margin: 0 0 8px; padding-left: 8px; border-left: 2px solid var(--ev-doubt); color: var(--ev-text); font-size: 12px; line-height: 1.45; }
.fx .osint-lookup-hint { margin: 0 0 8px; padding-left: 8px; border-left: 2px solid var(--ev-info); color: var(--ev-text); font-size: 12px; line-height: 1.45; }
.fx .osint-lookup-row { display: grid; grid-template-columns: minmax(92px, auto) 1fr; gap: 8px; padding: 3px 0; font-size: 12px; line-height: 1.4; }
.fx .osint-lookup-row .k { color: var(--ev-text-2); }
.fx .osint-lookup-row .v { color: var(--ev-text); overflow-wrap: anywhere; }
.fx-textlink { display: inline-flex; align-items: center; min-height: 32px; color: var(--ev-brand); font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; }
/* the empty state: nothing selected, or no case open */
.fx-blank { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 12px; text-align: center; }
.fx-blank-title { margin: 0; color: var(--ev-text); font-size: 15px; font-weight: 600; }
.fx-blank-text { max-width: 280px; margin: 0; color: var(--ev-text-2); font-size: 13px; line-height: 1.55; }
.fx-blank-counts { margin: 6px 0 0; color: var(--ev-text-2); font: 500 11.5px var(--ev-font-mono); }
/* the subject on the stage is a node like the others: a press shows its Ficha */
.g-subject { cursor: pointer; }
/* the card of a cited page (a modal in the tokens; the other modals keep theirs until their tasks) */
.osint-modal.fx-modal { border-color: var(--ev-border); background: var(--ev-surface); color: var(--ev-text); box-shadow: var(--ev-shadow-3); }
.osint-modal.fx-modal .osint-modal-head, .osint-modal.fx-modal .osint-modal-foot { border-color: var(--ev-border); background: var(--ev-surface); }
.osint-modal.fx-modal .osint-modal-title { color: var(--ev-text); }
.osint-modal.fx-modal .osint-modal-sub { color: var(--ev-text-2); font-size: 12px; }
.osint-modal.fx-modal .osint-close { border-color: var(--ev-border-strong); background: var(--ev-surface); color: var(--ev-text); }
.osint-modal.fx-modal .osint-close:hover { background: var(--ev-surface-2); }
.fx-capture { gap: 10px; }
.fx-cap-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.fx-capture .osint-host, .fx-capture .osint-date { color: var(--ev-text-2); font: 500 11.5px var(--ev-font-mono); }
.fx-cap-ident { color: var(--ev-text-2); font-size: 12px; }
.fx-cap-role { margin: 0; color: var(--ev-text); font-size: 12.5px; }
.fx-capture .fx-sec-title { margin: 6px 0 0; }
.fx-cap-quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--ev-border-strong); border-radius: 0 8px 8px 0; background: var(--ev-surface-2); }
.fx-cap-quote.is-mine { border-left-color: var(--ev-brand); }
.fx-cap-quote blockquote { margin: 0; color: var(--ev-text); font: italic 400 14px/1.55 var(--ev-font-doc); overflow-wrap: anywhere; }
.fx-cap-quote figcaption { margin-top: 4px; color: var(--ev-text-2); font-size: 11.5px; }
.fx-cap-copy { margin: 0; color: var(--ev-text-2); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .osint-ficha.drawer { animation: none; } }

/* ---- T3.1 (plan T3.1; the prototype app.css Tabla view and pantallas-c.css tbl-tools): the four views of the case and the Tabla over the
   stage, on the design tokens. The stage stays mounted under the other views and leaves the tab order (hidden). Every control 32 px or
   more; counts and secondary words on --ev-text-2 (the contrast rule of the workspace). */
.g-stage-col[hidden] { display: none; }
.ws-view.is-tabla, .ws-view.is-tiempo, .ws-view.is-mapa { background: var(--ev-surface); }
/* a search on a datum started from another view keeps its status and its Detener in sight, over the foot of the view */
.ws-view:not(.is-grafo) .osint-pivot-banner { top: auto; bottom: 12px; z-index: 11; }
.ws-tab:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: -2px; border-radius: 6px; }
.tbl-view { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--ev-surface); color: var(--ev-text); }
.tbl-bar { display: flex; align-items: flex-end; gap: 10px; min-width: 0; padding: 8px 14px 0; border-bottom: 1px solid var(--ev-border); flex: none; }
.tbl-tabs { display: flex; align-items: stretch; gap: 2px; min-width: 0; }
.tbl-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border: 0; background: none; color: var(--ev-text-2); font: 500 12.5px/1 var(--ev-font-ui); white-space: nowrap; cursor: pointer; }
.tbl-tab:hover, .tbl-tab[aria-selected="true"] { color: var(--ev-text); }
.tbl-tab[aria-selected="true"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ev-brand); }
.tbl-tab .count { font: 500 11px/1 var(--ev-font-mono); color: var(--ev-text-2); }
.tbl-tab:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: -2px; border-radius: 6px; }
.tbl-hint { min-width: 0; margin-left: auto; padding-bottom: 10px; overflow: hidden; color: var(--ev-text-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.tbl-tools { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 14px; border-bottom: 1px solid var(--ev-border); flex: none; }
.tbl-tools .tbl-search { flex: 0 1 260px; min-width: 150px; }
.tbl-tools .ev-input { height: 32px; }
.tbl-count { display: -webkit-box; min-width: 0; overflow: hidden; color: var(--ev-text-2); font-size: 12px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tbl-why { margin-left: 5px; }
.tbl-spacer { flex: 1 1 auto; }
.tbl-wrap { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; container: tbl / inline-size; }
.tbl-table { table-layout: fixed; }
.tbl-table th { position: sticky; top: 0; z-index: 1; height: 40px; padding: 4px 10px; color: var(--ev-text-2); }
.tbl-table td { padding: 7px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-table th:first-child, .tbl-table td:first-child { padding-left: 16px; }
.tbl-table th.num, .tbl-table td.num { text-align: right; }
.tbl-table td.num { color: var(--ev-text); font: 500 12px/1 var(--ev-font-mono); }
.tbl-th { display: inline-flex; align-items: center; min-height: 32px; }
.tbl-sort { display: inline-flex; align-items: center; gap: 4px; min-width: 32px; min-height: 32px; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.tbl-sort > span { overflow: hidden; text-overflow: ellipsis; }
.tbl-sort:hover { color: var(--ev-text); }
.tbl-sort .ev-ic { flex: none; width: 12px; height: 12px; opacity: 0; }
.tbl-sort:hover .ev-ic, .tbl-sort:focus-visible .ev-ic { opacity: .6; }
.tbl-sort.is-sorted { color: var(--ev-text); }
.tbl-sort.is-sorted .ev-ic { opacity: 1; color: var(--ev-brand); }
.tbl-sort:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: 2px; border-radius: 4px; }
.tbl-row { cursor: pointer; }
.tbl-row:focus-visible td { background: var(--row-hover); }
.tbl-row.is-discarded .tbl-name strong, .tbl-row.is-discarded .tbl-ent strong { color: var(--ev-text-2); font-weight: 400; }
.tbl-c-tipo { width: 74px; }
.tbl-c-ids { width: 190px; }
/* Identifiers (cedula, phone, mail, account urls) are what the investigator came for: the cell wraps to two lines
   instead of being cut at the first one; the full list stays in the title */
.tbl-table td.tbl-c-ids { white-space: normal; overflow-wrap: anywhere; }
.tbl-c-v { width: 130px; }
.tbl-c-num { width: 100px; }
.tbl-c-date { width: 122px; }
.tbl-c-rel { width: 150px; }
.tbl-c-conf { width: 112px; }
.tbl-c-cite { width: 140px; }
.tbl-c-state { width: 160px; }
.tbl-looks .tbl-c-date { width: 140px; }
.tbl-looks .tbl-c-num { width: 116px; }
.tbl-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tbl-name strong { overflow: hidden; color: var(--ev-text); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.tbl-sub { overflow: hidden; color: var(--ev-text-2); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.tbl-ent { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tbl-ent strong { min-width: 0; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.tbl-badge { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 6px; background: color-mix(in srgb, var(--gc, var(--ev-t-otro)) 14%, transparent); color: var(--gc, var(--ev-t-otro)); vertical-align: middle; }
.tbl-badge .ev-ic { width: 13px; height: 13px; }
.tbl-ids, .tbl-date { color: var(--ev-text-2); font: 400 11.5px/1.3 var(--ev-font-mono); }
/* T5.5 (owner's rule of plan 1.7): the padlock of a sensitive identifier in the Tabla, the value shown in full beside it */
.tbl-sens { display: inline-flex; vertical-align: -2px; margin-right: 5px; color: var(--ev-doubt); }
.tbl-sens .ev-ic { width: 13px; height: 13px; }
.tbl-v { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 22px; padding: 0 8px; border-radius: 999px; color: var(--ev-text); font-size: 12px; font-weight: 500; white-space: nowrap; }
.tbl-v > span { overflow: hidden; text-overflow: ellipsis; }
.tbl-v .ev-ic { flex: none; width: 13px; height: 13px; }
.tbl-v.v-confirmed { background: var(--ev-ok-soft); }
.tbl-v.v-confirmed .ev-ic { color: var(--ev-ok); }
.tbl-v.v-doubt { background: var(--ev-doubt-soft); }
.tbl-v.v-doubt .ev-ic { color: var(--ev-doubt); }
.tbl-v.v-unreviewed { border: 1px dashed var(--ev-border-strong); color: var(--ev-text-2); }
.tbl-v.v-discarded { background: var(--ev-bad-soft); }
.tbl-v.v-discarded .ev-ic { color: var(--ev-bad); }
.tbl-pred { min-width: 0; overflow: hidden; color: var(--ev-text-2); font: 400 12px/1.3 var(--ev-font-mono); text-overflow: ellipsis; white-space: nowrap; }
.tbl-vglyph { flex: none; font-size: 12px; font-weight: 700; }
.tbl-vglyph.v-confirmed { color: var(--ev-ok); }
.tbl-vglyph.v-doubt { color: var(--ev-doubt); }
.tbl-vglyph.v-discarded { color: var(--ev-bad); }
.tbl-conf { display: flex; align-items: center; gap: 8px; color: var(--ev-text-2); font: 500 11.5px/1 var(--ev-font-mono); }
.tbl-conf .bar { position: relative; flex: none; width: 44px; height: 4px; overflow: hidden; border-radius: 2px; background: var(--ev-surface-3); }
.tbl-conf .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
.tbl-conf.high .bar i { background: var(--ev-brand); }
.tbl-conf.review .bar i { background: var(--ev-doubt); }
.tbl-faint { color: var(--ev-text-2); font-size: 12px; }
.tbl-link { min-width: 0; min-height: 32px; max-width: 100%; padding: 0; overflow: hidden; border: 0; background: none; color: var(--ev-text); font: 500 13px/1.2 var(--ev-font-ui); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.tbl-link:hover { color: var(--ev-brand); text-decoration: underline; text-underline-offset: 2px; }
.tbl-link:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: 1px; border-radius: 4px; }
.tbl-cite { display: inline-flex; align-items: center; gap: 5px; min-width: 32px; max-width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--ev-border); border-radius: 999px; background: var(--ev-surface); color: var(--ev-text-2); font-size: 11.5px; cursor: pointer; }
.tbl-cite > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-cite .ev-ic { flex: none; width: 13px; height: 13px; }
.tbl-cite:hover { border-color: var(--ev-border-strong); color: var(--ev-text); }
.tbl-cite:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: 1px; }
.tbl-note { margin: 0; padding: 10px 16px; color: var(--ev-text-2); font-size: 12px; }
.tbl-empty { margin: 32px auto 0; }
/* Narrow table: the two date columns go first; the identifiers stay, they are what the row is for */
@container tbl (max-width: 820px) { .tbl-c-last, .tbl-table:not(.tbl-looks) .tbl-c-date { display: none; } }
@container tbl (max-width: 640px) { .tbl-rels .tbl-c-rel { width: 120px; } .tbl-rels .tbl-c-cite { width: 112px; } .tbl-looks .tbl-c-date { width: 128px; } }
@media (max-width: 1100px) { .tbl-hint { display: none; } }
/* ---- T3.2 (plan T3.2; the prototype app.css Linea de tiempo and pantallas-c.css tl-bar): the Linea de tiempo over the stage, on the
   design tokens. Lanes of 44 px (times the density), the names 210 px wide, the track 16 px after them (a marker of the first day stays
   clear of the names) and 28 px short of the right edge; a marker is a 32 px button around a 14 px dot (18 px with the count of a day
   with several events) in the family colour of its lane (fam-*: --gc); a date the source gives only as a month or a year is a hollow
   dashed dot. The card of a marker sits over the view and lets the pointer through until a click or the focus pins it. Reduced motion:
   the markers neither appear nor grow with an animation. ---- */
.tl-view { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--ev-surface); color: var(--ev-text); }
.tl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; padding: 8px 14px; border-bottom: 1px solid var(--ev-border); flex: none; }
.tl-ranges { flex: none; }
.tl-notes { display: flex; flex: 1 1 260px; flex-wrap: wrap; align-items: center; gap: 2px 14px; min-width: 0; }
.tl-note { color: var(--ev-text-2); font-size: 12px; white-space: nowrap; }
.tl-span { font: 400 11.5px/1.3 var(--ev-font-mono); }
.tl-approx-note { display: inline-flex; align-items: center; gap: 6px; }
.tl-approx-key { flex: none; box-sizing: border-box; width: 10px; height: 10px; border: 1.5px dashed var(--ev-text-2); border-radius: 50%; }
.tl-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; padding-bottom: 12px; }
.tl-grid { position: relative; min-width: 520px; }
.tl-axis, .tl-lane { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; }
.tl-axis { position: sticky; top: 0; z-index: 3; height: 34px; border-bottom: 1px solid var(--ev-border); background: var(--ev-surface); }
.tl-ticks, .tl-track { position: relative; height: 100%; margin: 0 28px 0 16px; }
.tl-tick { position: absolute; top: 0; bottom: 0; color: var(--ev-text-2); font: 500 11px/34px var(--ev-font-mono); white-space: nowrap; transform: translateX(-50%); }
.tl-gridlines { position: absolute; top: 34px; bottom: 0; left: 226px; right: 28px; pointer-events: none; }
.tl-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ev-border); opacity: 0.7; }
.tl-lane { position: relative; height: calc(44px * var(--ev-density-row)); border-bottom: 1px solid var(--ev-border); }
.tl-lane:hover { background: var(--row-hover); }
.tl-lane.is-selected { background: var(--ev-brand-soft); }
.tl-who { display: flex; align-items: center; gap: 8px; min-width: 0; height: 100%; min-height: 32px; padding: 0 12px 0 16px; border: 0; background: none; color: var(--ev-text); font: 500 12.5px/1.2 var(--ev-font-ui); text-align: left; cursor: pointer; }
.tl-who:hover .tl-name { color: var(--ev-brand); text-decoration: underline; text-underline-offset: 2px; }
.tl-who:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: -2px; border-radius: 6px; }
.tl-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-n { flex: none; color: var(--ev-text-2); font: 500 11px/1 var(--ev-font-mono); }
.tl-lane.is-selected .tl-name { font-weight: 600; }
.tl-lane.is-discarded .tl-name { color: var(--ev-text-2); font-weight: 400; }
.tl-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ev-border-strong); opacity: 0.6; }
.tl-mark { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; margin: -16px 0 0 -16px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.tl-mark:hover, .tl-mark:focus-visible, .tl-mark.is-open { z-index: 2; }
.tl-mark:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: -3px; }
.tl-dot { display: grid; place-items: center; box-sizing: border-box; width: 14px; height: 14px; border: 2px solid var(--gc, var(--ev-t-otro)); border-radius: 50%; background: color-mix(in srgb, var(--gc, var(--ev-t-otro)) 35%, var(--ev-surface)); color: var(--ev-text); font: 600 9px/1 var(--ev-font-mono); transition: transform var(--ev-dur-1) var(--ev-ease); animation: tlMarkIn var(--ev-dur-2) var(--ev-ease-out); }
.tl-mark.is-many .tl-dot { width: 18px; height: 18px; }
.tl-mark.is-approx .tl-dot { border-style: dashed; background: var(--ev-surface); }
.tl-mark.is-new .tl-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev-brand) 30%, transparent); }
.tl-lane.is-selected .tl-dot { border-width: 2.5px; }
.tl-mark:hover .tl-dot, .tl-mark:focus-visible .tl-dot, .tl-mark.is-open .tl-dot { transform: scale(1.3); }
@keyframes tlMarkIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.tl-empty-range { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px 16px; color: var(--ev-text-2); font-size: 13px; }
.tl-hint { flex: none; margin: 0; padding: 8px 16px; border-top: 1px solid var(--ev-border); overflow: hidden; color: var(--ev-text-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.tl-empty { margin: 32px auto 0; }
.tl-tip { position: absolute; z-index: 12; pointer-events: none; box-sizing: border-box; width: 320px; max-width: calc(100% - 16px); max-height: 60%; overflow: auto; padding: 10px 12px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-md); background: var(--ev-surface); box-shadow: var(--ev-shadow-2); color: var(--ev-text); font-size: 12.5px; }
.tl-tip-date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 8px; }
.tl-tip-day { font: 600 12px/1.2 var(--ev-font-mono); }
.tl-tip-approx { color: var(--ev-text-2); font-size: 11.5px; }
.tl-tip-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tl-tip-item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.tl-tip-kind { color: var(--ev-text-2); font-size: 10.5px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.tl-tip-text { max-width: 100%; line-height: 1.4; overflow-wrap: anywhere; }
.tl-tip.is-pinned { pointer-events: auto; border-color: var(--ev-border-strong); }
.tl-cite { max-width: 100%; }
.tl-cite-text { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; color: var(--ev-text-2); font-size: 11.5px; }
.tl-cite-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-cite-text .ev-ic { flex: none; width: 13px; height: 13px; }
.tl-tip-hint { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--ev-border); color: var(--ev-text-2); font-size: 11.5px; }
.tl-faint { color: var(--ev-text-2); font-size: 12px; }
.tl-tip-more { margin: 8px 0 0; color: var(--ev-text-2); font-size: 12px; }
@media (max-width: 1100px) { .tl-hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .tl-dot { animation: none; transition: none; }
  .tl-mark:hover .tl-dot, .tl-mark:focus-visible .tl-dot, .tl-mark.is-open .tl-dot { transform: none; }
}
/* ---- S14 (docs/integracion-plataforma, C-50 to C-52, C-44): the tools of the Linea de tiempo (the window From and To, the histogram
   strip, Agregar hito and its form), the lane of the milestones (a diamond per day in the info colour, its card with Quitar hito), the bar
   of the time cursor (in the view under the lanes; on the stage a floating bar at the bottom centre), the faded line of a relation whose
   validity ended and the thin ring of a leaf observed within the hour. */
.tl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-width: 0; padding: 8px 14px; border-bottom: 1px solid var(--ev-border); flex: none; }
.tl-window, .tl-hist { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.tl-tools-lbl { color: var(--ev-text-2); font-size: 11px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.tl-date { display: inline-flex; align-items: center; gap: 5px; color: var(--ev-text-2); font-size: 12px; }
.tl-date .ev-input, .tl-hito-form .ev-input { height: 28px; padding: 0 8px; font-size: 12.5px; }
.tl-hist-svg { display: block; box-sizing: border-box; width: 240px; height: 32px; border-bottom: 1px solid var(--ev-border-strong); cursor: crosshair; }
.tl-hist-bar { fill: var(--ev-text-3); }
.tl-hist-bar.is-in { fill: var(--ev-brand); }
.tl-hist-shade { fill: var(--ev-brand-soft); }
.tl-hito-add { margin-left: auto; }
.tl-hito-form { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 8px; }
.tl-hito-form .tl-hito-text { flex: 1 1 260px; min-width: 0; }
.tl-hitos-lane { background: color-mix(in srgb, var(--ev-info-soft) 45%, transparent); }
.tl-hitos-lane .tl-who { cursor: default; }
.tl-hitos-lane .tbl-badge { color: var(--ev-info); }
.tl-hito { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; border: 0; background: none; cursor: pointer; }
.tl-hito:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: -3px; border-radius: 6px; }
.tl-hito-dot { display: grid; place-items: center; box-sizing: border-box; width: 13px; height: 13px; border: 2px solid var(--ev-info); border-radius: 2px; background: var(--ev-info-soft); color: var(--ev-text); font: 600 8px/1 var(--ev-font-mono); transform: rotate(45deg); }
.tl-hito.is-many .tl-hito-dot { width: 16px; height: 16px; }
.tl-hito.is-open .tl-hito-dot { background: var(--ev-info); color: var(--ev-surface); }
.tl-hito-card { position: absolute; top: calc(50% + 16px); z-index: 12; box-sizing: border-box; width: 300px; max-width: 70vw; padding: 10px 12px; border: 1px solid var(--ev-border-strong); border-radius: var(--ev-r-md); background: var(--ev-surface); box-shadow: var(--ev-shadow-2); color: var(--ev-text); font-size: 12.5px; transform: translateX(-50%); }
.tc-bar { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px 14px; border-top: 1px solid var(--ev-border); background: var(--ev-surface); color: var(--ev-text); flex: none; }
.tc-bar.is-grafo { position: absolute; left: 50%; bottom: 64px; z-index: 9; box-sizing: border-box; width: min(680px, calc(100% - 24px)); padding: 8px 12px; border: 1px solid var(--ev-border); border-radius: 12px; box-shadow: var(--ev-shadow-2); transform: translateX(-50%); }
.tc-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tc-play { flex: none; }
.tc-slider { flex: 1 1 auto; min-width: 120px; accent-color: var(--ev-brand); }
.tc-at { flex: none; color: var(--ev-text); font: 500 12px/1.2 var(--ev-font-mono); white-space: nowrap; }
.tc-note { margin: 0; color: var(--ev-text-2); font-size: 12px; }
.tc-window { display: flex; align-items: center; gap: 6px; }
.tc-window .ev-ic { flex: none; width: 14px; height: 14px; }
.g-line.is-expired { border-top: 1px solid var(--ev-text-3); opacity: 0.45; }
/* 2026-10-15 (docs/interacciones 8.4, I11): the legend's mark of a width that follows the band of a tie */
.g-line.is-band { border-top: 3px solid var(--ev-text-3); }
.g-leaf.is-recent .g-disc-wrap::after { content: ''; position: absolute; inset: -3px; border: 1px solid var(--ev-info); border-radius: 50%; pointer-events: none; }
.g-recent-ring { display: inline-block; flex: none; box-sizing: border-box; width: 12px; height: 12px; border: 1px solid var(--ev-info); border-radius: 50%; }
/* ---- T3.3 (plan T3.3; the prototype app.css map-view, .map .dept, .map .pin and map-legend): the Mapa over the stage, on the design
   tokens. The map fills the view on the stage colour with the departments in the strokes of the document family (--ev-t-doc), the ones
   with a place of the case tinted in the place family (--ev-t-lugar); the column of the places without a pin (248 px, only when there is
   one) at its right, under the map when the view is narrow. A pin is a 32 px button: a 24 px dot in the place family with its count, a soft halo, and its name
   beside it on a ground of the stage colour, every dot above every name; a cluster of places is drawn in the brand colour. The drawing never animates while the
   analyst drags it; reduced motion: no transition on the outlines and the dots. ---- */
.map-view { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--ev-surface); color: var(--ev-text); container: mapa / inline-size; }
.map-body { display: flex; flex: 1 1 auto; min-height: 0; }
.map-canvas { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; background: var(--ev-stage); cursor: grab; touch-action: none; user-select: none; }
.map-canvas:active { cursor: grabbing; }
.map-canvas:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: -2px; }
.map-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; }
.map-country { fill: color-mix(in srgb, var(--ev-t-doc) 4%, var(--ev-stage)); stroke: var(--ev-t-doc); stroke-opacity: 0.32; stroke-width: 0.7; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill var(--ev-dur-2) var(--ev-ease); }
.map-country.has-case { fill: color-mix(in srgb, var(--ev-t-lugar) 16%, var(--ev-stage)); stroke: var(--ev-t-lugar); stroke-opacity: 0.7; }
.map-country:hover { fill: color-mix(in srgb, var(--ev-t-lugar) 22%, var(--ev-stage)); }
.map-dept { fill: color-mix(in srgb, var(--ev-t-doc) 7%, var(--ev-stage)); stroke: var(--ev-t-doc); stroke-opacity: 0.55; stroke-width: 0.9; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill var(--ev-dur-2) var(--ev-ease); }
.map-dept.has-case { fill: color-mix(in srgb, var(--ev-t-lugar) 13%, var(--ev-stage)); }
.map-dept:hover { fill: color-mix(in srgb, var(--ev-t-lugar) 20%, var(--ev-stage)); }
.map-inset { fill: none; stroke: var(--ev-border-strong); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.map-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.map-dept-label { position: absolute; z-index: 0; transform: translate(-50%, -50%); color: var(--ev-text-2); font: 500 10.5px/1 var(--ev-font-ui); letter-spacing: 0.02em; white-space: nowrap; pointer-events: none; text-shadow: 0 0 3px var(--ev-stage), 0 0 2px var(--ev-stage); }
.map-pins { position: absolute; left: 0; top: 0; }
.map-pin { position: absolute; display: flex; align-items: center; gap: 2px; min-width: 32px; height: 32px; margin: -16px 0 0 -16px; padding: 0; border: 0; border-radius: 16px; background: none; color: var(--ev-text); text-align: left; cursor: pointer; }
/* a name at the left: the component places the right edge of the button (no transform, so the pin makes no layer of its own) */
.map-pin.is-left { flex-direction: row-reverse; margin: -16px 0 0 0; }
.map-pin:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: 2px; }
.map-dot { position: relative; z-index: 3; flex: none; display: grid; place-items: center; box-sizing: border-box; width: 24px; height: 24px; margin: 4px; border-radius: 50%; background: var(--gc, var(--ev-t-lugar)); box-shadow: 0 0 0 2px var(--ev-stage), 0 0 0 8px color-mix(in srgb, var(--gc, var(--ev-t-lugar)) 18%, transparent); color: var(--ev-surface); font: 600 11px/1 var(--ev-font-mono); transition: transform var(--ev-dur-1) var(--ev-ease); }
.map-pin.is-cluster .map-dot { width: 28px; height: 28px; margin: 2px; background: var(--ev-brand); box-shadow: 0 0 0 2px var(--ev-stage), 0 0 0 9px color-mix(in srgb, var(--ev-brand) 18%, transparent); }
.map-pin.is-selected .map-dot { box-shadow: 0 0 0 2px var(--ev-stage), 0 0 0 4.5px var(--ev-text); }
.map-pin:hover .map-dot, .map-pin:focus-visible .map-dot, .map-pin.is-open .map-dot { transform: scale(1.12); }
.map-plabel { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1px; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--ev-stage) 84%, transparent); white-space: nowrap; pointer-events: none; }
.map-pname { color: var(--ev-text); font: 600 12px/1.2 var(--ev-font-ui); }
.map-psub { color: var(--ev-text-2); font: 400 10.5px/1.2 var(--ev-font-ui); }
.map-pin.is-left .map-plabel { text-align: right; }
/* the name of the pin under the pointer, the focus, the selection or an open list comes over the other names (never over a dot) */
.map-pin:hover .map-plabel, .map-pin:focus-visible .map-plabel, .map-pin.is-open .map-plabel, .map-pin.is-selected .map-plabel { z-index: 2; }
.map-pin.is-selected .map-pname { text-decoration: underline; text-underline-offset: 2px; }
.map-note { position: absolute; left: 12px; top: 12px; z-index: 4; max-width: calc(100% - 160px); padding: 7px 10px; border: 1px solid var(--ev-border); border-radius: 10px; background: var(--glass); backdrop-filter: blur(8px); box-shadow: var(--shadow-float); color: var(--ev-text-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.map-tools { position: absolute; top: 12px; right: 12px; z-index: 4; display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--ev-border); border-radius: 11px; background: color-mix(in srgb, var(--ev-surface) 90%, transparent); box-shadow: var(--ev-shadow-2); backdrop-filter: blur(8px); cursor: default; }
.map-tools .ev-icon-btn { width: 32px; height: 32px; }
.map-tools .ev-icon-btn:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: -2px; }
.map-card { position: absolute; left: 50%; top: 50%; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px; box-sizing: border-box; width: min(360px, calc(100% - 32px)); padding: 18px 20px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-md); background: var(--ev-surface); box-shadow: var(--ev-shadow-2); color: var(--ev-text-2); text-align: center; transform: translate(-50%, -50%); cursor: default; }
.map-card h3 { margin: 0; color: var(--ev-text); font-size: 14px; font-weight: 600; }
.map-card p { margin: 0; font-size: 13px; line-height: 1.5; }
.map-pop { position: absolute; z-index: 5; box-sizing: border-box; width: 280px; max-width: calc(100% - 16px); max-height: 320px; overflow: auto; padding: 6px; border: 1px solid var(--ev-border-strong); border-radius: var(--ev-r-md); background: var(--ev-surface); box-shadow: var(--ev-shadow-2); color: var(--ev-text); cursor: default; }
.map-pop-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; padding: 4px 8px 8px; border-bottom: 1px solid var(--ev-border); }
.map-pop-name { font-size: 13px; font-weight: 600; }
.map-pop-sub { color: var(--ev-text-2); font-size: 11.5px; }
.map-pop-item, .map-side-row { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; min-height: 32px; padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: var(--ev-text); font: 500 12.5px/1.3 var(--ev-font-ui); text-align: left; cursor: pointer; }
.map-pop-item:hover, .map-side-row:hover { background: var(--row-hover); }
.map-pop-item:focus-visible, .map-side-row:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: -2px; }
.map-pop-item.is-selected, .map-side-row.is-selected { background: var(--ev-brand-soft); }
.map-pop-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-side { flex: none; display: flex; flex-direction: column; box-sizing: border-box; width: 248px; min-height: 0; overflow: auto; padding: 12px 10px 16px; border-left: 1px solid var(--ev-border); background: var(--ev-surface); }
.map-side-title { margin: 0 6px 4px; color: var(--ev-text); font-size: 13px; font-weight: 600; }
.map-side-hint { margin: 0 6px 10px; color: var(--ev-text-2); font-size: 12px; line-height: 1.45; }
.map-side-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.map-side-row { align-items: flex-start; padding: 6px 8px; }
.map-side-row .tbl-badge { margin-top: 1px; }
.map-side-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.map-side-name { overflow-wrap: anywhere; }
.map-side-why { color: var(--ev-text-2); font-size: 11.5px; font-weight: 400; line-height: 1.35; }
.map-hint { flex: none; margin: 0; padding: 8px 16px; border-top: 1px solid var(--ev-border); overflow: hidden; color: var(--ev-text-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.map-empty { margin: 32px auto 0; }
@container mapa (max-width: 640px) {
  .map-body { flex-direction: column; }
  .map-side { width: auto; max-height: 38%; border-left: 0; border-top: 1px solid var(--ev-border); }
}
@media (max-width: 1100px) { .map-hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .map-dept, .map-country, .map-dot { transition: none; }
  .map-pin:hover .map-dot, .map-pin:focus-visible .map-dot, .map-pin.is-open .map-dot { transform: none; }
}

/* ------------------------------------------------------------------------------------------------
   T4.2 Ejecucion (plan T4.2; the prototype, css/app.css section 8 and css/pantallas-c.css): the route of
   the execution is the grid of the workspace with the header of the run in place of the one of the case, no
   lateral panel, no Ficha and no bar of the views; the tools rail stays. The loading view lies over the
   body from under the header (56 px) to the lower panel and the rail, on that route and through the
   handoff (its corner never moves); its canvas keeps the own colours of the player in both themes (the
   signature), and the loader strip at its foot, the strip of the Bitacora, the banner, the cards of a
   run that cannot go on and the confirmation drawer follow the theme. Tokens only.
   ------------------------------------------------------------------------------------------------ */
.ws { --run-ld-h: 80px; }
.ws.is-run { --ws-lateral: 0px; --ws-ficha: 0px; --ws-dock-h: 40px; }
.ws.is-run.log-open { --ws-dock-h: 250px; }
.ws.is-run > .ws-head, .ws.is-run > .ws-lateral, .ws.is-run .ws-viewbar, .ws.is-run [data-ficha-col] { display: none; }
.ws.is-run .ws-body { grid-template-rows: 0 minmax(0, 1fr) auto; }
.ws.is-run .ws-view { background-color: var(--ev-stage); background-image: radial-gradient(var(--ev-stage-grid) 1.1px, transparent 1.3px); background-size: 24px 24px; }

/* the 3 px bar at the top of the window while a run goes (I-24) */
.run-progress-top { position: fixed; left: 0; top: 0; right: 0; z-index: 50; height: 3px; background: var(--ev-border); pointer-events: none; }
.run-progress-top > [data-progress-top] { height: 100%; background: var(--ev-brand); transition: width .6s ease; }

/* the header of the run: the code, what runs, its profile and depth, and the six stages */
.run-head { grid-row: 1; grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; min-width: 0; height: 56px; padding: 0 16px 0 20px; background: var(--ev-surface); border-bottom: 1px solid var(--ev-border); line-height: var(--ev-lh); }
.run-code { flex: none; padding: 5px 7px; border-radius: 6px; background: var(--ev-surface-2); color: var(--ev-text-2); font: 500 12px/1 var(--ev-font-mono); white-space: nowrap; }
.run-title { flex: 1 1 auto; min-width: 0; }
.run-h1 { margin: 0; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.run-sub { display: block; margin-top: 2px; overflow: hidden; color: var(--ev-text-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.run-stages { display: flex; align-items: center; gap: 4px; flex: none; margin: 0; padding: 0; list-style: none; }
.run-step { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: var(--ev-r-pill); color: var(--ev-text-3); font-size: 12px; white-space: nowrap; }
.run-step .d { flex: none; box-sizing: border-box; width: 7px; height: 7px; border: 1.5px solid currentColor; border-radius: 50%; }
.run-step.is-done { color: var(--ev-text-2); }
.run-step.is-done .d { border-color: var(--ev-ok); background: var(--ev-ok); }
.run-step.is-current { background: var(--ev-brand-soft); color: var(--ev-brand); font-weight: 500; }
.run-step.is-current .d { border-color: var(--ev-brand); background: var(--ev-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev-brand) 25%, transparent); }
@media (max-width: 1250px) { .run-step:not(.is-current) .run-step-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .run-step { padding: 0 7px; } }

/* the loading view over the body, and the banner over its top */
.run-anim { position: absolute; top: 56px; left: 0; right: var(--ws-tools); bottom: var(--ws-dock-h); z-index: 12; overflow: hidden; }
.run-banner { position: absolute; top: 56px; left: 0; right: var(--ws-tools); z-index: 13; box-sizing: border-box; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px 0 20px; border-bottom: 1px solid var(--ev-border); background: color-mix(in srgb, var(--ev-doubt) 14%, var(--ev-surface)); color: var(--ev-text); font-size: 12.5px; }
.run-banner-tag { flex: none; color: var(--ev-doubt); font: 600 10.5px/1 var(--ev-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.run-banner-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-banner .ev-btn { flex: none; }
.run-banner.is-replay { background: color-mix(in srgb, var(--ev-info) 12%, var(--ev-surface)); }
.run-banner.is-replay .run-banner-tag { color: var(--ev-info); }

/* the loader strip at the foot of the loading view (I-143): the stage, what runs and its detail, the percentage and the time left,
   Detener or Saltar al final, and the bar of the progress (amber while the run waits, green once it is done) */
.run-ld { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; box-sizing: border-box; display: flex; align-items: center; gap: 22px; min-height: var(--run-ld-h); padding: 12px 24px 15px; border-top: 1px solid var(--ev-border); background: color-mix(in srgb, var(--ev-surface) 94%, transparent); color: var(--ev-text); backdrop-filter: blur(8px); transition: opacity .4s ease; }
.run-ld-spin { flex: none; box-sizing: border-box; width: 30px; height: 30px; border: 2.5px solid var(--ev-border-strong); border-top-color: var(--ev-brand); border-radius: 50%; animation: osintSpin 1.1s linear infinite; }
.run-ld-spin.is-paused { border-top-color: var(--ev-doubt); animation-play-state: paused; }
.run-ld-spin.is-done { border-color: var(--ev-ok); animation: none; }
.run-ld-stage { flex: none; width: 128px; }
.run-ld-eyebrow { display: block; color: var(--ev-text-3); font: 600 10.5px/1.2 var(--ev-font-ui); letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.run-ld-stg { min-height: 19px; margin-top: 4px; font-size: 15px; font-weight: 600; line-height: 1.25; }
.run-ld-doing { flex: 1 1 auto; min-width: 0; }
.run-ld-sentence { overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.run-ld-detail { margin-top: 4px; overflow: hidden; color: var(--ev-text-3); font: 400 12px/1.3 var(--ev-font-mono); text-overflow: ellipsis; white-space: nowrap; }
.run-ld.is-paused .run-ld-detail { color: var(--ev-doubt); }
.run-ld-pct { flex: none; min-width: 84px; text-align: right; }
.run-ld-num { min-height: 28px; font: 600 28px/1 var(--ev-font-mono); letter-spacing: -0.02em; }
.run-ld-eta { min-height: 12px; margin-top: 5px; color: var(--ev-text-3); font: 400 11.5px/1 var(--ev-font-mono); }
.run-ld-btn { flex: none; }
.run-ld-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ev-border); }
.run-ld-bar > i { display: block; width: 0; height: 100%; background: var(--ev-brand); transition: width 180ms linear; }
.run-ld.is-paused .run-ld-bar > i { background: var(--ev-doubt); }
.run-ld.is-done .run-ld-bar > i { background: var(--ev-ok); }
@media (max-width: 1250px) { .run-ld { gap: 16px; padding: 12px 16px 15px; } .run-ld-stage { width: 104px; } }

/* the strip of the Bitacora under the run (the lower panel of the workspace): its last line and Ver bitacora, which opens its rows */
.ws.is-run .ws-dock.is-runlog { display: flex; }
.ws-dock.is-runlog .ws-dock-bar { gap: 10px; padding: 0 12px 0 16px; color: var(--ev-text-2); font-size: 12.5px; }
.ws-dock.is-runlog .ws-dock-phase, .ws-dock.is-runlog .ws-dock-hint { display: none; }
.run-log-eyebrow { flex: none; color: var(--ev-text-3); font: 600 10.5px/1 var(--ev-font-ui); letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.run-log-last { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.run-log-last .dk-log-kind { flex: none; }
.run-log-text { min-width: 0; overflow: hidden; color: var(--ev-text); text-overflow: ellipsis; white-space: nowrap; }
.run-log-toggle { flex: none; }

/* the cards of a run that cannot go on (I-78, I-79): over the body, on a veil */
.run-cards { position: absolute; top: 56px; left: 0; right: var(--ws-tools); bottom: var(--ws-dock-h); z-index: 13; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 24px; background: color-mix(in srgb, var(--ev-overlay) 60%, transparent); }
.run-card { box-sizing: border-box; width: min(460px, 100%); max-height: 100%; overflow: auto; padding: 22px; border: 1px solid var(--ev-border); border-radius: 16px; background: var(--ev-surface); color: var(--ev-text); box-shadow: var(--ev-shadow-3); line-height: var(--ev-lh); animation: osintIn var(--ev-dur-3) var(--ev-ease-out) both; }
.run-card.run-stop { width: min(420px, 100%); }
.run-card-eyebrow { color: var(--ev-bad); font: 600 10.5px/1.2 var(--ev-font-ui); letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.run-card-title { margin: 6px 0 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.run-stop .run-card-title { margin-top: 0; }
.run-card-text { margin: 8px 0 0; color: var(--ev-text-2); font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.run-card-text.is-muted { color: var(--ev-text-3); font-size: 12.5px; }
.run-card-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.run-card-acts.is-stack { flex-direction: column; margin-top: 18px; }
.run-card-acts.is-stack .ev-btn { width: 100%; justify-content: center; }

/* the confirmation drawer of a run (I-144 to I-150): beside the rail, from under the header to the loader strip, no Cerrar */
.ck-drawer { position: absolute; top: 56px; right: var(--ws-tools); bottom: calc(var(--ws-dock-h) + var(--run-ld-h)); z-index: var(--ev-z-drawer); box-sizing: border-box; display: flex; flex-direction: column; width: min(430px, 92vw); border-left: 1px solid var(--ev-border); border-bottom: 1px solid var(--ev-border); border-radius: 0 0 0 12px; background: var(--ev-surface); color: var(--ev-text); box-shadow: var(--ev-shadow-3); line-height: var(--ev-lh); animation: osintDrawerIn .2s ease both; }
.ck-head { flex: none; padding: 14px 18px 12px; border-bottom: 1px solid var(--ev-border); }
.ck-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.ck-sub { margin-top: 3px; color: var(--ev-text-3); font-size: 12.5px; }
.ck-drawer .osint-profile-tag { border-color: var(--ev-border-strong); background: var(--ev-surface-2); color: var(--ev-text-2); }
.ck-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; padding: 14px 18px 18px; }
.ck-note { margin: 0; color: var(--ev-text-2); font-size: 12.5px; line-height: 1.5; }
.ck-note-more { color: var(--ev-text-3); }
.ck-count { margin-top: 2px; color: var(--ev-text-3); font: 600 10.5px/1.2 var(--ev-font-ui); letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.ck-card { flex: none; overflow: hidden; border: 1px solid var(--ev-border); border-radius: 12px; background: var(--ev-surface); }
.ck-card.is-saved { border-style: dashed; border-color: var(--ev-brand); }
.ck-card.is-changed { border-color: color-mix(in srgb, var(--ev-doubt) 55%, var(--ev-border)); }
.ck-card .osint-page { padding: 14px 16px 0; }
.ck-seen { padding: 8px 16px 0; color: var(--ev-text-3); font-size: 11.5px; line-height: 1.4; }
.ck-seen b { color: var(--ev-text-2); font-weight: 600; }
.ck-proposal { display: flex; gap: 10px; margin-top: 12px; padding: 12px 16px; border-top: 1px solid var(--ev-border); background: color-mix(in srgb, var(--ev-ok) 7%, var(--ev-surface)); font-size: 13px; line-height: 1.45; }
.ck-proposal > .ev-ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ev-ok); }
.ck-proposal.is-homonym { background: color-mix(in srgb, var(--ev-bad) 6%, var(--ev-surface)); }
.ck-proposal.is-homonym > .ev-ic { color: var(--ev-bad); }
.ck-proposal.is-doubt { background: color-mix(in srgb, var(--ev-doubt) 8%, var(--ev-surface)); }
.ck-proposal.is-doubt > .ev-ic { color: var(--ev-doubt); }
.ck-proposal-txt { min-width: 0; }
.ck-eyebrow { display: block; margin-bottom: 4px; color: var(--ev-text-2); font: 600 10.5px/1.2 var(--ev-font-ui); letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.ck-pill { display: inline-block; padding: 0 8px; border: 1px solid currentColor; border-radius: var(--ev-r-pill); font: 600 10.5px/1.6 var(--ev-font-mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.ck-pill.is-subject { color: var(--ev-ok); }
.ck-pill.is-homonym { color: var(--ev-bad); }
.ck-pill.is-doubt { color: var(--ev-doubt); }
.ck-reason { color: var(--ev-text-2); }
.ck-by { color: var(--ev-text-3); font: 400 11px var(--ev-font-mono); }
.ck-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--ev-border); }
.ck-choice { min-height: 32px; padding: 0 8px; border: 1px solid var(--ev-border-strong); border-radius: 8px; background: var(--ev-surface); color: var(--ev-text); font: 500 12.5px/1.2 var(--ev-font-ui); cursor: pointer; }
.ck-choice:hover { background: var(--ev-surface-2); }
.ck-choice:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: 2px; }
.ck-choice[aria-pressed="true"] { font-weight: 600; }
.ck-choice.is-subject[aria-pressed="true"] { border-color: var(--ev-ok); background: var(--ev-ok-soft); color: var(--ev-ok); }
.ck-choice.is-homonym[aria-pressed="true"] { border-color: var(--ev-bad); background: var(--ev-bad-soft); color: var(--ev-bad); }
.ck-choice.is-doubt[aria-pressed="true"] { border-color: var(--ev-doubt); background: var(--ev-doubt-soft); color: var(--ev-doubt); }
.ck-changed { padding: 0 16px 12px; color: var(--ev-doubt); font: 500 11px var(--ev-font-mono); }
.ck-anchor { flex: none; padding-top: 6px; border-top: 1px solid var(--ev-border); }
.ck-anchor-head { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 0; border: 0; background: none; color: var(--ev-text); font: 600 13px/1.2 var(--ev-font-ui); text-align: left; cursor: pointer; }
.ck-anchor-head .ev-ic { width: 14px; height: 14px; margin-left: auto; color: var(--ev-text-3); transition: transform var(--ev-dur-2); }
.ck-anchor-head[aria-expanded="true"] .ev-ic { transform: rotate(180deg); }
.ck-anchor .ws-anchor.is-ck { margin: 6px 0 0; }
/* B11 (docs/busqueda-inicial 3.10 (1)): the base's persons of the subject's name at the checkpoint, one pick or none */
.ck-base { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--ev-border); border-radius: 12px; background: var(--ev-surface); }
.ck-base-list { display: flex; flex-direction: column; gap: 4px; }
.ck-base-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid var(--ev-border); border-radius: 8px; background: var(--ev-surface); color: var(--ev-text); text-align: left; cursor: pointer; }
.ck-base-row:hover { background: var(--ev-surface-2); }
.ck-base-row:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: 2px; }
.ck-base-row.is-on { border-color: var(--ev-ok); background: var(--ev-ok-soft); }
.ck-base-row.is-none.is-on { border-color: var(--ev-border-strong); background: var(--ev-surface-2); }
.ck-base-name { display: inline-flex; align-items: center; gap: 4px; font: 600 12.5px/1.3 var(--ev-font-ui); }
.ck-base-meta { color: var(--ev-text-2); font-size: 11.5px; line-height: 1.35; }
.ck-base-bring { display: flex; align-items: center; gap: 6px; color: var(--ev-text); font-size: 12.5px; cursor: pointer; }
/* 2026-10-13 (docs/descubrimiento 6.2, 6.4, D08): the discovery's cards in the confirmation drawer, by source; a weak one quieter */
.ck-dc-group { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 6px; border-top: 1px solid var(--ev-border); }
.ck-dc-group:first-of-type { border-top: 0; }
.ck-dc-card { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; width: 100%; padding: 8px; border: 1px solid var(--ev-border); border-radius: 8px; background: var(--ev-surface); }
.ck-dc-card.is-weak { border-style: dashed; }
.ck-dc-card.is-confirmed { border-color: var(--ev-ok); }
.ck-dc-card.is-rejected { border-color: var(--ev-bad); opacity: .8; }
.ck-dc-photo { width: 48px; height: 48px; flex: none; border-radius: 6px; object-fit: cover; background: var(--ev-surface-2); }
.ck-dc-main { display: flex; flex: 1 1 200px; flex-direction: column; gap: 2px; min-width: 0; }
.ck-dc-name { font: 600 12.5px/1.3 var(--ev-font-ui); overflow-wrap: anywhere; }
.ck-dc-meta, .ck-dc-link { color: var(--ev-text-2); font-size: 11.5px; line-height: 1.35; overflow-wrap: anywhere; }
.ck-dc-why { color: var(--ev-text); font-size: 11.5px; }
.ck-dc-conflict { color: var(--ev-bad); font-size: 11.5px; }
/* 2026-10-20 (docs/descubrimiento/homonimos-paginas-grupos.md): the kind of account, the reasons against the case, the resident model's
   note, and the line that opens the namesakes and the pages of a source */
.ck-dc-kind { align-self: flex-start; padding: 1px 6px; border: 1px solid var(--ev-border); border-radius: 999px; color: var(--ev-text-2); font-size: 11px; }
.ck-dc-reason { color: var(--ev-text-2); font-size: 11.5px; }
/* 2026-10-22 (closint-scrap PR 25): a candidate found through the web search says so, and one not checked on the network is grey */
.ck-dc-via, .ck-dc-unchecked { align-self: flex-start; padding: 1px 6px; border: 1px solid var(--ev-border); border-radius: 999px; color: var(--ev-text-2); font-size: 11px; }
.ck-dc-unchecked { border-style: dashed; color: var(--ev-text-3, var(--ev-text-2)); background: var(--ev-surface-2); }
.ck-dc-reason.is-contradictory { color: var(--ev-bad); }
.ck-dc-reason.is-consistent { color: var(--ev-ok); }
.ck-dc-parody { color: var(--ev-doubt); font-size: 11.5px; font-style: italic; }
.ck-dc-lead { width: 100%; margin: 4px 0 0; color: var(--ev-text); font: 600 12px/1.35 var(--ev-font-ui); }
.ck-dc-lead-note { width: 100%; margin: 0; color: var(--ev-text-2); font-size: 11.5px; line-height: 1.35; }
.ck-dc-quote { margin: 0; color: var(--ev-text-2); font-size: 11.5px; line-height: 1.4; }
.ck-foot { flex: none; padding: 10px 18px 12px; border-top: 1px solid var(--ev-border); }
.ck-foot-line { display: flex; justify-content: space-between; gap: 8px; color: var(--ev-text-2); font-size: 11.5px; }
.ck-clock { color: var(--ev-doubt); font: 500 11.5px var(--ev-font-mono); white-space: nowrap; }
.ck-foot-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.ck-spacer { flex: 1 1 auto; }
.ck-cancel { color: var(--ev-bad); }
.ck-cancel:hover { color: var(--ev-bad); }
/* the body of a page card in the drawer (OsintPageBody, as the Ficha's Descartados shows it) */
.ck-drawer .osint-host, .ck-drawer .osint-date, .ck-drawer .osint-page-meta .tag { color: var(--ev-text-3); font: 400 11px var(--ev-font-mono); }
.ck-drawer .osint-page-meta > * + *::before { color: var(--ev-text-3); }
.ck-drawer .osint-page-title { margin-top: 6px; color: var(--ev-text); font-size: 14px; font-weight: 600; }
.ck-drawer a.osint-page-title:hover, .ck-drawer a.osint-page-title:focus-visible { color: var(--ev-brand); }
.ck-drawer .osint-page-role span { border-color: var(--ev-border); background: var(--ev-surface-2); color: var(--ev-text); }
.ck-drawer .osint-page-role .role, .ck-drawer .osint-page-role[data-page-role=not_subject] .role, .ck-drawer .osint-page-role[data-page-role=mentioned] .role, .ck-drawer .osint-page-role[data-page-role=quoted] .role { border-color: var(--ev-border-strong); color: var(--ev-text); }
.ck-drawer .osint-page-excerpt { margin-top: 10px; padding: 8px 12px; border-left: 3px solid var(--ev-brand); border-radius: 0 8px 8px 0; background: var(--ev-surface-2); }
.ck-drawer .osint-page-excerpt p { color: var(--ev-text); font: italic 400 13.5px/1.55 var(--ev-font-doc); }
.ck-drawer .osint-page-excerpt mark { background: var(--ev-doubt-soft); box-shadow: inset 0 -1px 0 var(--ev-doubt); color: var(--ev-text); }
.ck-drawer .osint-page-text { border-color: var(--ev-border); background: var(--ev-surface-2); color: var(--ev-text-2); }
.ck-drawer .osint-page-ent { border-color: var(--ev-border); background: var(--ev-surface-2); color: var(--ev-text); }
.ck-drawer .osint-page-ent .k { color: var(--ev-text-2); }
.ck-drawer .osint-page-more { border-color: var(--ev-border-strong); color: var(--ev-brand); }
.ck-drawer .osint-page-thumb { border-color: var(--ev-border); background: var(--ev-surface-2); }
.ck-drawer .osint-link { color: var(--ev-brand); }
@media (prefers-reduced-motion: reduce) {
  .run-card, .ck-drawer { animation: none; }
  .run-ld-bar > i, .run-progress-top > [data-progress-top] { transition: none; }
}

/* ------------------------------------------------------------------------------------------------
   T4.3 Tools rail and the drawers Casos (H), Fuentes (U), Procesos (J) (plan T4.3; the prototype's css/pantallas-c.css .ws-drawer, .wsd-*,
   .open-case, .us-card, .origin, .copy-line, .rec-row, .pj-*): in-page drawers over the Ficha column, beside the rail (right: the rail's
   own width, --ws-tools), under the header of the case; the stage never moves. Tokens only, both themes. Rostros and Fotos keep the
   frame of before until T4.4. Small text of the color --ev-text-3 sits on --ev-surface only (on --ev-surface-2 it reads 4.4:1).
   ------------------------------------------------------------------------------------------------ */
.ws-drawer { position: absolute; top: 56px; right: var(--ws-tools); bottom: 0; z-index: var(--ev-z-drawer); box-sizing: border-box; display: flex; flex-direction: column; width: min(420px, 90vw); border-left: 1px solid var(--ev-border); background: var(--ev-surface); color: var(--ev-text); box-shadow: var(--ev-shadow-3); font-size: 13px; line-height: var(--ev-lh); animation: wsdIn var(--ev-dur-2) var(--ev-ease-out) both; }
.ws-drawer.is-wide { width: min(560px, 90vw); }
@keyframes wsdIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.wsd-head { flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 12px 18px; border-bottom: 1px solid var(--ev-border); }
.wsd-titles { flex: 1; min-width: 0; }
.ws-drawer .wsd-title { margin: 0; color: var(--ev-text); font-size: 15px; font-weight: 600; line-height: 1.3; }
.wsd-sub { margin: 3px 0 0; color: var(--ev-text-3); font-size: 12px; line-height: 1.4; }
.wsd-close { margin: -4px -2px 0 0; }
.wsd-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px 20px; display: flex; flex-direction: column; gap: 16px; overscroll-behavior: contain; }
.wsd-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--ev-border); background: var(--ev-surface); }
.wsd-spacer { flex: 1; }
.wsd-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wsd-h { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ev-text-3); font-size: 10.5px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); line-height: 1.3; text-transform: uppercase; }
.wsd-h .n { color: var(--ev-text-3); font: 500 11px/1 var(--ev-font-mono); letter-spacing: 0; text-transform: none; }
.wsd-hint { margin: 0; color: var(--ev-text-3); font-size: 12px; line-height: 1.45; }
.wsd-label { color: var(--ev-text); font-size: 12.5px; font-weight: 500; }
.wsd-note { margin: 0; padding: 8px 10px; border-radius: var(--ev-r-sm); background: var(--ev-info-soft); color: var(--ev-text); font-size: 12px; line-height: 1.45; }
.wsd-note.is-inline { margin-right: auto; padding: 4px 8px; }
.wsd-note[data-dato-note="error"] { background: var(--ev-bad-soft); color: var(--ev-bad); }
.wsd-mono { color: var(--ev-text-3); font: 500 11px var(--ev-font-mono); }
.wsd-code { color: var(--ev-text-2); font: 500 11.5px var(--ev-font-mono); }
.wsd-row-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.wsd-grow { flex: 1; min-width: 0; }
.wsd-search-row { display: flex; align-items: center; gap: 8px; }
.wsd-search-row > .ev-search-field, .wsd-search-row > .ev-input { flex: 1 1 auto; min-width: 0; }
.wsd-search { flex: none; min-width: 0; }
.wsd-textarea { height: auto; min-height: 96px; padding: 9px 12px; line-height: 1.45; resize: vertical; font: inherit; }
/* 2026-10-14 (entidad-manual.js): Agregar una entidad y su relación, in Fuentes */
.wsd-man .wsd-textarea { min-height: 56px; }
.wsd-man-mode { display: flex; flex-wrap: wrap; gap: 6px; }
.wsd-man-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wsd-man-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.wsd-man-period > legend { padding: 0; margin-bottom: 6px; }
.wsd-man-period > .wsd-hint { flex: 1 1 100%; }
.wsd-man-pair { display: flex; flex: 1 1 96px; flex-direction: column; gap: 4px; min-width: 0; color: var(--ev-text-2); font-size: 12px; }
.wsd-man-check { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--ev-text); font-size: 12.5px; }
.wsd-man-dup { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--ev-border-strong); border-radius: var(--ev-r-sm); background: var(--ev-surface); }
.wsd-man-dup > strong { color: var(--ev-text); font-size: 12.5px; font-weight: 600; }
.wsd-man-dup-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.wsd-man-dup-row > .name { flex: 1 1 auto; min-width: 0; color: var(--ev-text); font-size: 12.5px; overflow-wrap: anywhere; }
.wsd-note[data-manual-note="error"] { background: var(--ev-bad-soft); color: var(--ev-bad); }
.wsd-man-photo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wsd-man-thumb { display: block; width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--ev-border); border-radius: var(--ev-r-sm); background: var(--ev-surface); }
.wsd-card { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 11px 12px; border: 1px solid var(--ev-border); border-radius: 11px; background: var(--ev-surface); }
.wsd-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; font-size: 11px; }
.wsd-card strong { color: var(--ev-text); font-size: 13px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.wsd-excerpt { margin: 0; color: var(--ev-text-2); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.wsd-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ws-drawer .osint-host { color: var(--ev-text-3); font: 400 11px var(--ev-font-mono); overflow-wrap: anywhere; }
/* the origin of a source the analyst supplied (the prototype's .origin) */
.wsd-origin { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 5px; background: var(--ev-surface-2); color: var(--ev-text-2); font: 600 10px/1 var(--ev-font-mono); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.wsd-origin.o-rama { background: color-mix(in srgb, var(--ev-t-doc) 16%, transparent); color: var(--ev-text); }
.wsd-origin.o-wanted { background: var(--ev-bad-soft); color: var(--ev-bad); }
.wsd-origin.o-reinstated { background: var(--ev-ok-soft); color: var(--ev-ok); }
.wsd-origin.o-registro, .wsd-origin.o-dato { background: var(--ev-info-soft); color: var(--info-ink); }
.wsd-origin.o-pasted { background: color-mix(in srgb, var(--ev-t-org) 16%, transparent); color: var(--ev-text); }
.wsd-copy-line, .wsd-node-line { display: flex; align-items: center; gap: 6px; color: var(--ev-text-2); font-size: 11.5px; line-height: 1.4; }
.wsd-copy-line .ev-ic { width: 14px; height: 14px; flex: none; color: var(--ev-ok); }
.wsd-node-line .ev-ic { width: 14px; height: 14px; flex: none; color: var(--ev-brand); }
.wsd-verified { padding: 6px 9px; border-radius: var(--ev-r-sm); background: var(--ev-surface-2); color: var(--ev-text); font-size: 11.5px; line-height: 1.4; }
.wsd-verified.is-ok { background: var(--ev-ok-soft); }
.wsd-verified.is-altered, .wsd-verified.is-error, .wsd-verified.is-gone { background: var(--ev-bad-soft); }
/* Casos: the case open, where its subject also appears, the saved cases */
.wsd-open-case { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--ev-border); border-radius: 11px; background: var(--ev-surface-2); }
.wsd-open-top { display: flex; align-items: center; gap: 8px; }
.wsd-eyebrow { color: var(--ev-text-2); font-size: 10.5px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.wsd-open-title { color: var(--ev-text); font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsd-open-case .wsd-hint { color: var(--ev-text-2); }
.wsd-open-case .wsd-hint.is-unsaved { color: var(--ev-text); }
.wsd-open-case .ev-btn { align-self: flex-start; }
.wsd-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.wsd-list > li { min-width: 0; border-bottom: 1px solid var(--ev-border); }
.wsd-list > li:last-child { border-bottom: 0; }
.wsd-also { display: flex; align-items: baseline; gap: 8px; width: 100%; min-height: 34px; padding: 6px 0; border: 0; background: none; color: var(--ev-text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.wsd-also:hover .wsd-also-name, .wsd-also:focus-visible .wsd-also-name { color: var(--ev-brand); text-decoration: underline; text-underline-offset: 2px; }
.wsd-also-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wsd-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--ev-border-strong); border-radius: var(--ev-r-pill); background: var(--ev-surface); color: var(--ev-text-2); font: inherit; font-size: 12px; cursor: pointer; }
.wsd-chip:hover { border-color: var(--ev-text-3); color: var(--ev-text); }
.wsd-chip[aria-pressed="true"] { border-color: color-mix(in srgb, var(--ev-brand) 40%, transparent); background: var(--ev-brand-soft); color: var(--ev-brand); }
.wsd-caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; margin-top: 2px; }
.wsd-cases { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.wsd-case { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 2px 10px 0; border-bottom: 1px solid var(--ev-border); }
.wsd-case:last-child { border-bottom: 0; }
.wsd-case.is-open { padding-left: 10px; box-shadow: inset 2px 0 0 var(--ev-brand); }
.wsd-case-l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.wsd-case .name { flex: 1; min-width: 0; color: var(--ev-text); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsd-date { flex: none; color: var(--ev-text-3); font: 400 11px var(--ev-font-mono); }
.wsd-case-order { color: var(--ev-text-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsd-case-stats, .wsd-case-effort { color: var(--ev-text-3); font: 400 11px/1.4 var(--ev-font-mono); overflow-wrap: anywhere; }
.wsd-case-stats .is-ok { color: var(--ev-ok); }
.wsd-case-l4 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.wsd-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-pill); color: var(--ev-text-2); font-size: 11.5px; white-space: nowrap; }
.wsd-open-tag { color: var(--ev-brand); font: 600 10.5px var(--ev-font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.wsd-case-acts { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.wsd-menu { position: absolute; z-index: 5; right: 0; top: calc(100% - 6px); display: flex; flex-direction: column; min-width: 220px; padding: 6px; border: 1px solid var(--ev-border-strong); border-radius: 12px; background: var(--ev-surface); box-shadow: var(--ev-shadow-3); animation: evPopIn var(--ev-dur-2) var(--ev-ease-out); }
.wsd-menu.is-up { top: auto; bottom: 46px; }
.ws-drawer .wsd-menu .ev-menu-item { font-size: 13px; }
/* Fuentes: the records kept on this machine (the prototype's .rec-row) */
.wsd-recs { display: flex; flex-direction: column; }
.wsd-rec { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ev-border); }
.wsd-rec:last-child { border-bottom: 0; }
.wsd-rec .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.wsd-rec .name { color: var(--ev-text); font-size: 13px; font-weight: 500; }
.wsd-rec .fields { color: var(--ev-text-2); font: 400 11.5px var(--ev-font-mono); overflow-wrap: anywhere; }
.wsd-rec .quote { color: var(--ev-text); font: italic 12.5px/1.45 var(--ev-font-doc); }
.wsd-rec .src { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.wsd-rec .src a { min-width: 0; color: var(--ev-brand); overflow-wrap: anywhere; }
.wsd-rec .when { color: var(--ev-text-3); font-size: 11.5px; }
.wsd-keys { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* Procesos (560 px): the sentence of the Rama Judicial, the field, the results, the sheet, the copy in course, the folded paste area */
.wsd-info { display: flex; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--ev-info-soft); color: var(--ev-text); font-size: 12.5px; line-height: 1.5; }
.wsd-info .ev-ic { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--ev-info); }
.wsd-id-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.wsd-linkbtn { min-height: 32px; padding: 0; border: 0; background: none; color: var(--ev-brand); font: inherit; font-size: 12.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.wsd-linkbtn:hover { color: var(--ev-brand-hover); }
.wsd-lock { display: inline-flex; align-items: center; gap: 5px; color: var(--ev-text-2); font-size: 12px; }
.wsd-lock .ev-ic { width: 13px; height: 13px; }
.wsd-proc-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; color: var(--ev-text-2); font-size: 12.5px; line-height: 1.45; }
.wsd-proc-note .text { flex: 1 1 200px; min-width: 0; }
.wsd-procs { display: flex; flex-direction: column; gap: 8px; }
.wsd-proc.is-added { border-color: color-mix(in srgb, var(--ev-ok) 45%, var(--ev-border)); }
.wsd-proc.is-current { border-color: var(--ev-focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ev-focus) 22%, transparent); }
.wsd-radicado { color: var(--ev-text); font-size: 12px; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.wsd-proc-court .dept { color: var(--ev-text-2); font-weight: 400; }
.wsd-chip-mark { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--ev-r-pill); background: var(--ev-surface-2); color: var(--ev-text-2); font-size: 11px; font-weight: 500; }
.wsd-chip-mark.is-ok { background: var(--ev-ok-soft); color: var(--ev-text); }
.wsd-chip-mark .ev-ic { width: 12px; height: 12px; }
.wsd-chip-mark.is-ok .ev-ic { color: var(--ev-ok); }
.wsd-sheet { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; padding: 10px; border-radius: 8px; background: var(--ev-surface-2); }
.wsd-sheet .wsd-hint, .wsd-sheet .wsd-h, .wsd-sheet .wsd-mono { color: var(--ev-text-2); }
.wsd-facts { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 12.5px; }
.wsd-facts dt { color: var(--ev-text-2); font-size: 12px; }
.wsd-facts dd { margin: 0; color: var(--ev-text); overflow-wrap: anywhere; }
.wsd-acts-h { margin-top: 4px; }
.wsd-acts-list { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.wsd-acts-list li { display: flex; gap: 8px; color: var(--ev-text); }
.wsd-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ev-text-2); font-size: 12px; }
.wsd-progress .text { flex: 1 1 160px; min-width: 0; }
.wsd-bar { flex: 0 0 100%; display: block; height: 4px; border-radius: 2px; background: var(--ev-surface-3); overflow: hidden; }
.wsd-bar > span { display: block; height: 100%; background: var(--ev-brand); transition: width 0.4s ease; }
.ws-drawer .ev-btn.is-done, .ws-drawer .ev-btn.is-done[disabled] { color: var(--ev-ok); opacity: 1; }
.wsd-fold { display: flex; flex-direction: column; gap: 8px; }
.wsd-fold-head { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 32px; padding: 0; border: 0; background: none; color: var(--ev-text-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.wsd-fold-head:hover { color: var(--ev-text); }
.wsd-fold-head .ev-ic { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform var(--ev-dur-2); }
.wsd-fold-head[aria-expanded="true"] .ev-ic { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ws-drawer, .wsd-menu { animation: none; }
  .wsd-bar > span, .wsd-fold-head .ev-ic { transition: none; }
}

/* ------------------------------------------------------------------------------------------------
   T4.4 Rostros (R) and Fotos (O) drawers, the photo modal (plan T4.4; the prototype's css/pantallas-c.css .drop-zone, .ro-query,
   .band-legend, .mw-card, .note-fixed, .person-faces, .face-strip, .prop-row, .face-legend, .tagger, .tg-*). Both drawers in the frame of
   T4.3 (ws-drawer is-wide, 560 px). Tokens only, both themes; the boxes and the chips over a photo keep the ink of the photo (the rules
   above: an engine proposal outlined, the analyst's confirmation the one solid ring). Faces are candidates by similarity: nothing here
   reads as an identification.
   ------------------------------------------------------------------------------------------------ */
/* Rostros: the drop zone (Subir foto, the file chosen, Usar una foto del caso), the photos of the case, the link */
.ro-drop { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px dashed var(--ev-border-strong); border-radius: 12px; background: var(--ev-surface); transition: border-color var(--ev-dur-2) var(--ev-ease), background var(--ev-dur-2) var(--ev-ease); }
.ro-drop.is-over { border-color: var(--ev-brand); background: var(--ev-brand-soft); }
.ro-dz-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ev-surface-2); color: var(--ev-brand); }
.ro-dz-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ro-fname { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro-file { display: none; }
.ro-case-btn { flex: none; }
.ro-case-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.ro-case-photo { position: relative; width: 72px; height: 72px; padding: 0; overflow: hidden; border: 1px solid var(--ev-border-strong); border-radius: 10px; background: var(--ev-surface-2); cursor: pointer; }
.ro-case-photo:hover { border-color: var(--ev-brand); }
.ro-case-photo:disabled { cursor: default; opacity: 0.6; }
.ro-case-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ro-case-n { position: absolute; right: 3px; bottom: 3px; min-width: 18px; padding: 0 5px; border-radius: var(--ev-r-pill); background: var(--ev-surface); color: var(--ev-text); font: 600 10.5px/16px var(--ev-font-mono); text-align: center; box-shadow: var(--ev-shadow-1); }
/* the faces found (the prototype's .ro-query), the bands, the candidates in two columns */
.ro-query { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ev-border); border-radius: 11px; background: var(--ev-surface); }
.ro-crop { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--ev-surface-2); box-shadow: 0 0 0 2px var(--ev-info); }
.ro-q-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ro-q-txt strong { color: var(--ev-text); font-size: 13px; font-weight: 500; }
.ro-q-txt .wsd-hint { overflow-wrap: anywhere; }
.ro-q-n { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ro-q-n .n { color: var(--ev-text); font: 600 20px/1 var(--ev-font-mono); }
.ro-q-n .l { color: var(--ev-text-3); font-size: 11px; }
.ro-cand-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: 4px; }
.ro-bands { display: flex; flex-wrap: wrap; gap: 6px; font: 500 10.5px var(--ev-font-mono); }
.ro-band { padding: 2px 7px; border-radius: 5px; background: var(--ev-surface-2); color: var(--ev-text-2); white-space: nowrap; }
.ro-band.is-hi { background: var(--ev-ok-soft); color: var(--ev-ok); }
.ro-band.is-mid { background: var(--ev-doubt-soft); color: var(--ev-doubt); }
.osint-cand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.osint-cand { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 10px; row-gap: 8px; align-content: start; padding: 10px; border: 1px solid var(--ev-border); border-radius: 11px; background: var(--ev-surface); }
/* below the review threshold: the border and the ink only, never the opacity (its words stay readable) */
.osint-cand.hi { border-color: color-mix(in srgb, var(--ev-ok) 55%, var(--ev-border)); }
.osint-cand.mid { border-color: color-mix(in srgb, var(--ev-doubt) 55%, var(--ev-border)); }
.osint-cand.lo { border-color: var(--ev-border); border-style: dashed; }
.osint-cand.is-aside { border-style: dashed; border-color: var(--ev-border-strong); background: var(--ev-surface-2); }
.osint-cand .photo { position: relative; width: 56px; height: 64px; overflow: hidden; border-radius: 8px; border: 1px solid var(--ev-border); background: var(--ev-surface-2); }
/* the list's photo over a drawn silhouette, which shows when the list has no photo of the person */
.osint-cand .photo::before { content: ""; position: absolute; left: 50%; top: 13px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--ev-border-strong); }
.osint-cand .photo::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -8px; height: 30px; border-radius: 20px 20px 0 0; background: var(--ev-border-strong); }
.osint-cand .photo img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.osint-cand .main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.osint-cand .cname { color: var(--ev-text); font-size: 12.5px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osint-cand .calias { color: var(--ev-text-2); font-size: 11.5px; }
.osint-cand .calias.none { color: var(--ev-text-3); font-style: italic; }
.osint-cand .where { color: var(--ev-text-3); font-size: 11px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osint-cand .pct-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
.osint-cand .pct { color: var(--ev-text); font: 600 16px/1 var(--ev-font-mono); }
.osint-cand .band { padding: 2px 6px; border-radius: 5px; background: var(--ev-surface-2); color: var(--ev-text-2); font: 500 10px var(--ev-font-mono); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.osint-cand.hi .pct { color: var(--ev-ok); }
.osint-cand.hi .band { background: var(--ev-ok-soft); color: var(--ev-ok); }
.osint-cand.mid .pct { color: var(--ev-doubt); }
.osint-cand.mid .band { background: var(--ev-doubt-soft); color: var(--ev-doubt); }
.osint-cand.lo .pct { color: var(--ev-text-2); }
.osint-cand.lo .cname { color: var(--ev-text-2); font-weight: 500; }
.ro-set-aside { grid-column: 1 / -1; margin: 0; color: var(--ev-text-2); font-size: 11.5px; line-height: 1.4; }
.osint-cand .cactions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.osint-cand .cactions .ev-btn { flex: 1 1 auto; justify-content: center; }
.osint-cand .cactions [data-cand-reject][aria-pressed="true"] { border-color: var(--ev-border-strong); background: var(--ev-surface); color: var(--ev-text); }
/* the fixed sentence (the prototype's .note-fixed) and the way to Fotos (.link-row) */
.ro-fixed { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--ev-text-2); font-size: 12px; line-height: 1.45; }
.ro-fixed b { color: var(--ev-text); font-weight: 600; }
.ro-fixed .ev-ic { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--ev-brand); }
.ro-link-row { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; border: 0; background: none; color: var(--ev-text-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.ro-link-row:hover, .ro-link-row:focus-visible { color: var(--ev-brand); }
.ro-link-row .ev-ic { width: 14px; height: 14px; }
/* Fotos: what was reviewed, Recuperar fotos and Actualizar, the switch of the pages set aside */
.fo-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.fo-progress { font-family: var(--ev-font-mono); font-size: 11.5px; }
.fo-running { color: var(--ev-info); font-size: 12px; animation: osintPulse 1.2s ease-in-out infinite; }
.fo-old { background: var(--ev-doubt-soft); }
.fo-filter { display: flex; flex-direction: column; gap: 2px; }
.fo-switch-btn { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; min-height: 32px; padding: 0; border: 0; background: none; color: var(--ev-text); font: inherit; font-size: 13px; cursor: pointer; }
.fo-switch { position: relative; flex: none; width: 32px; height: 18px; border-radius: 9px; background: var(--ev-surface-3); box-shadow: inset 0 0 0 1px var(--ev-border-strong); transition: background var(--ev-dur-2) var(--ev-ease); }
.fo-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--ev-surface); box-shadow: var(--ev-shadow-1); transition: transform var(--ev-dur-2) var(--ev-ease); }
/* three states: on (included in both sections), off (left out of both), mixed (the two defaults: knob in the middle) */
.fo-switch-btn.is-true .fo-switch { background: var(--ev-brand); box-shadow: none; }
.fo-switch-btn.is-true .fo-switch::after { transform: translateX(14px); }
.fo-switch-btn.is-mixed .fo-switch::after { transform: translateX(7px); }
.fo-switch-btn:focus-visible { outline: none; }
.fo-switch-btn:focus-visible .fo-switch { outline: 2px solid var(--ev-focus); outline-offset: 2px; }
/* the person's row (OsintFacePerson: the Fotos drawer and the Ficha's Fotos tab; the prototype's .person-faces) */
.osint-photos-section { gap: 4px; }
.osint-face-person { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 12px; border-bottom: 1px solid var(--ev-border); }
.osint-face-person:last-child { border-bottom: 0; }
.osint-face-person .head { display: flex; align-items: center; gap: 10px; }
.fp-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden; border-radius: 50%; background: var(--ev-surface-2); color: var(--ev-t-persona); box-shadow: 0 0 0 1.5px var(--ev-t-persona); }
.fp-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fp-av .ev-ic { width: 16px; height: 16px; }
.osint-face-person .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.osint-face-person .name { color: var(--ev-text); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osint-face-person .line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.fp-role { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 5px; background: var(--ev-brand-soft); color: var(--ev-brand); font: 600 10px/1 var(--ev-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.osint-face-person .count { color: var(--ev-text-3); font: 400 11.5px var(--ev-font-mono); }
.osint-face-person .head .ev-btn { flex: none; }
.osint-face-person .osint-ficha-cross { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; color: var(--ev-text-2); font-size: 12px; }
/* the crops: 64 px, the confirmed one solid green, a doubt thin amber, a proposal dashed; Sin etiqueta in fixed cells (the virtualised
   grid of F2.3b counts on 84 px wide, 94 px tall, 10 px apart) */
.osint-crop-row, .osint-crop-grid { display: flex; flex-wrap: wrap; gap: 10px; }
/* 2026-10-13: Fotos de las entidades: every image an entity carries, a row each (its thumbnail, who carries it, what it is, the mark of an
   unconfirmed account, what the scan of faces says, the entity's address and Ver en el grafo) */
.fo-ent-list { display: flex; flex-direction: column; gap: 8px; }
.fo-ent { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; border: 1px solid var(--ev-border); border-radius: 10px; background: var(--ev-surface); }
.fo-ent.is-unconfirmed { border-style: dashed; }
.fo-ent-img { flex: none; width: 64px; height: 64px; padding: 0; border: 2px dashed var(--ev-info); border-radius: 10px; background: var(--ev-surface-2); overflow: hidden; cursor: zoom-in; }
.fo-ent-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fo-ent-img:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: 2px; }
.fo-ent-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fo-ent-name { color: var(--ev-text); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.fo-ent-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ev-text-2); font-size: 11.5px; }
.fo-ent-unconf { padding: 0 6px; border-radius: var(--ev-r-pill); background: var(--ev-doubt-soft); color: var(--ev-text); font-size: 10.5px; font-weight: 600; }
.fo-ent-status { color: var(--ev-text-3); font-family: var(--ev-font-mono); font-size: 10.5px; }
.fo-ent-links { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; }
.osint-crop { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 84px; }
.osint-crop .img { position: relative; width: 64px; height: 64px; padding: 0; border: 2px solid var(--ev-border-strong); border-radius: 10px; background: var(--ev-surface-2); overflow: visible; cursor: zoom-in; }
.osint-crop .img img { display: block; width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
.osint-crop.loose .img { border: 1px solid var(--ev-border-strong); }
.osint-crop.confirmed .img { border: 3px solid var(--ev-ok); }
.osint-crop.doubt .img { border: 1.5px solid var(--ev-doubt); }
.osint-crop.proposal .img, .osint-crop.loose.high .img, .osint-crop.loose.imagesearch .img, .osint-crop.loose.cross .img, .osint-crop.cross .img { border: 2px dashed var(--ev-info); }
.osint-crop.proposal.review .img, .osint-crop.loose.review .img { border-color: var(--ev-doubt); }
.osint-crop.other .img { border: 2px solid var(--ev-border); cursor: default; }
.osint-crop .glyph { position: absolute; right: -6px; top: -6px; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ev-info); background: var(--ev-surface); color: var(--ev-info); font-size: 8.5px; font-weight: 800; line-height: 1; }
.osint-crop.proposal.review .glyph { border-color: var(--ev-doubt); color: var(--ev-doubt); }
.osint-crop .anchor { color: var(--ev-ok); font: 600 10px var(--ev-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.osint-crop .side { color: var(--ev-text-3); font: 400 10.5px var(--ev-font-mono); }
.osint-crop .cap { color: var(--ev-text-2); font-size: 11px; line-height: 1.3; }
.osint-crop a.cap.page { color: var(--ev-brand); text-decoration: underline; text-underline-offset: 2px; }
.osint-crop .fp-use-anchor { min-height: 28px; font-size: 11.5px; text-align: left; line-height: 1.25; }
.osint-crop .twins { position: absolute; left: -5px; top: -7px; padding: 0 5px; border-radius: var(--ev-r-pill); background: var(--ev-surface); box-shadow: 0 0 0 1px var(--ev-border-strong); color: var(--ev-text); font: 700 10px/15px var(--ev-font-ui); }
.osint-crop .img .kind { position: absolute; left: 2px; right: 2px; bottom: 2px; overflow: hidden; padding: 0 3px; border-radius: 5px; background: color-mix(in srgb, var(--ev-surface) 88%, transparent); color: var(--ev-text); font: 600 8.5px/13px var(--ev-font-ui); text-align: center; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.osint-crop .img .kind[data-page-kind=author], .osint-crop .img .kind[data-page-kind=imageSearch] { white-space: normal; font-size: 8px; line-height: 9px; padding: 1px 2px; }
.osint-crop.loose { height: 94px; overflow: hidden; }
.osint-crop.loose .cap { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osint-crop-grid { row-gap: 10px; }
.osint-crop-pad { flex: 0 0 100%; }
/* the proposals of a person (the prototype's .prop-row): the crop, the question with its band, the size, Confirmar and No es */
.fp-props { display: flex; flex-direction: column; gap: 6px; }
.fp-eyebrow { color: var(--ev-text-3); font-size: 10.5px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.fp-prop-list { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
.fp-prop-list .osint-crop { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: auto; padding: 6px 8px; border: 1px dashed var(--ev-border-strong); border-radius: 10px; }
.fp-prop-list .osint-crop .img { width: 44px; height: 44px; }
.fp-prop-txt { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fp-prop-txt strong { color: var(--ev-text); font-size: 12.5px; font-weight: 500; }
.fp-prop-list .acts { display: flex; flex-wrap: wrap; gap: 6px; }
/* Who says whose a face is (osintRostros.provenanceOf): green the analyst's confirmation, yellow what the system proposes by resemblance
   (and the analyst's tag in doubt), blue the tag of a social network. A crop wears its own evidence on its border; a group (a person's
   row) wears the strongest of its faces on its stripe, its avatar ring and its badge; the badge always says it in words. */
.osint-crop.proposal.prov-proposed .img, .osint-crop.loose.prov-proposed .img { border: 2px dashed var(--ev-doubt); }
.osint-crop.proposal.prov-tagged .img, .osint-crop.loose.prov-tagged .img { border: 2px dashed var(--ev-info); }
.osint-crop.proposal.prov-proposed .glyph { border-color: var(--ev-doubt); color: var(--ev-doubt); }
.osint-crop.proposal.prov-tagged .glyph { border-color: var(--ev-info); color: var(--ev-info); }
.fp-prop-list .osint-crop.prov-proposed { border-color: color-mix(in srgb, var(--ev-doubt) 55%, var(--ev-border-strong)); }
.fp-prop-list .osint-crop.prov-tagged { border-color: color-mix(in srgb, var(--ev-info) 55%, var(--ev-border-strong)); }
.osint-crop .img .prov-name { position: absolute; left: 2px; right: 2px; top: 2px; overflow: hidden; padding: 0 3px; border-radius: 5px; font: 600 8.5px/13px var(--ev-font-ui); text-align: center; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.osint-crop .img .prov-name.prov-proposed { background: var(--ev-doubt-soft); color: var(--ev-doubt); }
.osint-crop .img .prov-name.prov-tagged { background: var(--ev-info-soft); color: var(--ev-info); }
.fp-prov { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 5px; font: 600 10px/1 var(--ev-font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.fp-prov:empty { display: none; }
.fp-prov.prov-confirmed { background: var(--ev-ok-soft); color: var(--ev-ok); }
.fp-prov.prov-doubt, .fp-prov.prov-proposed { background: var(--ev-doubt-soft); color: var(--ev-doubt); }
.fp-prov.prov-tagged { background: var(--ev-info-soft); color: var(--ev-info); }
.fp-prop-txt .fp-prov { align-self: flex-start; }
.osint-face-person.prov-confirmed { padding-left: 10px; border-left: 3px solid var(--ev-ok); }
.osint-face-person.prov-doubt, .osint-face-person.prov-proposed { padding-left: 10px; border-left: 3px solid var(--ev-doubt); }
.osint-face-person.prov-tagged { padding-left: 10px; border-left: 3px solid var(--ev-info); }
.osint-face-person.prov-confirmed .fp-av { box-shadow: 0 0 0 1.5px var(--ev-ok); color: var(--ev-ok); }
.osint-face-person.prov-doubt .fp-av, .osint-face-person.prov-proposed .fp-av { box-shadow: 0 0 0 1.5px var(--ev-doubt); color: var(--ev-doubt); }
.osint-face-person.prov-tagged .fp-av { box-shadow: 0 0 0 1.5px var(--ev-info); color: var(--ev-info); }
.tg-face.prov-confirmed { border-left: 3px solid var(--ev-ok); }
.tg-face.prov-doubt, .tg-face.prov-proposed { border-left: 3px solid var(--ev-doubt); }
.tg-face.prov-tagged { border-left: 3px solid var(--ev-info); }
.tg-prop.prov-proposed { color: var(--ev-doubt); }
.tg-prop.prov-tagged { color: var(--ev-info); }
/* Otros casos: this face beside the other case's confirmed one, the question in an outlined chip, the case; the weak ones folded */
.osint-cross-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--ev-border); border-radius: 11px; background: var(--ev-surface); }
.osint-cross-row .osint-crop { width: 68px; }
.osint-cross-row .main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.osint-cross-row .case, .osint-cross-weak-list .case { color: var(--ev-text-3); font: 400 11px var(--ev-font-mono); }
.ws-drawer .osint-face-chip.inline .row { border: 1.5px dashed var(--ev-info); background: var(--ev-surface); box-shadow: none; }
.ws-drawer .osint-face-chip.inline .lab { color: var(--ev-info); }
.ws-drawer .osint-face-chip.inline .x { display: inline-flex; gap: 4px; border-left: 1px solid var(--ev-border); color: var(--ev-text-2); }
.ws-drawer .osint-face-chip.inline .x .ev-ic { width: 13px; height: 13px; }
.ws-drawer .osint-face-chip.inline button:hover { background: var(--ev-surface-2); }
.osint-cross-weak { align-self: flex-start; }
.osint-cross-weak-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.osint-cross-weak-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.osint-cross-weak-list img { display: block; width: 40px; height: 40px; border-radius: 7px; object-fit: cover; }
.osint-cross-weak-list .self { min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--ev-border-strong); border-radius: 9px; background: var(--ev-surface-2); cursor: zoom-in; }
.osint-cross-weak-list .other { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; border: 1px solid var(--ev-border); border-radius: 9px; }
/* the legend of the faces (the drawer's foot and the photo modal): a proposal dashed, a confirmation solid, the fixed sentence */
.osint-face-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--ev-text-2); font-size: 11.5px; }
.osint-face-legend .row { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.osint-face-legend .key { display: inline-block; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; }
.osint-face-legend .key.proposal { border: 1.5px dashed var(--ev-doubt); }
.osint-face-legend .key.confirmed { border: 2px solid var(--ev-ok); }
.osint-face-legend .key.tagged { border: 1.5px dashed var(--ev-info); }
.osint-face-legend .fixed { flex-basis: 100%; margin: 0; color: var(--ev-text); }
.fo-legend .fixed { flex-basis: auto; margin-left: auto; color: var(--ev-text-2); text-align: right; }
/* S2.4/S2.5: Perfil social (the profile reading drawer). The field and its platform/session lines, the depth, the progress strip,
   the session card, the preview (profile, sections, photos, reading path) and the link checkboxes. Colours from the design tokens only. */
.scrap-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.scrap-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 9px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-pill); background: var(--ev-surface-2); max-width: 100%; }
.scrap-chip .k { color: var(--ev-text-3); font: 600 9.5px/1 var(--ev-font-ui); letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.scrap-chip .v { color: var(--ev-text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scrap-depth { display: flex; flex-direction: column; gap: 6px; }
.scrap-radio { display: inline-flex; align-items: center; gap: 8px; color: var(--ev-text-2); font-size: 12.5px; cursor: pointer; }
.scrap-radio input { accent-color: var(--ev-brand); }
/* a held choice still shows which one is on: the chosen label reads stronger, the held ones say they cannot change */
.scrap-radio:has(input:checked) { color: var(--ev-text); font-weight: 600; }
.scrap-radio:has(input:disabled) { cursor: not-allowed; }
.scrap-radio:has(input:disabled:not(:checked)) { opacity: 0.6; }
.scrap-run { gap: 8px; }
.scrap-ids { display: flex; flex-direction: column; gap: 4px; }
.scrap-id { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-sm); cursor: pointer; }
.scrap-id input { accent-color: var(--ev-brand); flex: none; }
.scrap-id-name { flex: 1; min-width: 0; color: var(--ev-text-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scrap-id-state { flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: var(--ev-r-pill); background: var(--ev-surface-2); color: var(--ev-text-3); font: 600 10px/1 var(--ev-font-ui); letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.scrap-id-state.is-valida { background: var(--ev-ok-soft); color: var(--ev-ok); }
.scrap-id-state.is-vencida { background: var(--ev-doubt-soft); color: var(--ev-doubt); }
.scrap-id-state.is-sin { background: var(--ev-surface-2); color: var(--ev-text-3); }
.scrap-no-id { margin: 0; }
.scrap-anon-note { margin: 0; }
.scrap-run-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.scrap-tor { display: inline-flex; align-items: center; gap: 8px; color: var(--ev-text-2); font-size: 12.5px; cursor: pointer; }
.scrap-tor input { accent-color: var(--ev-brand); }
.scrap-tor-hint { margin: 0; }
.scrap-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ev-border); border-radius: 11px; background: var(--ev-surface-2); }
.scrap-progress-line { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.scrap-progress-line strong { color: var(--ev-text); font-size: 12.5px; font-weight: 600; }
.scrap-progress-line .wsd-hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scrap-spin { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ev-brand); box-shadow: 0 0 0 3px var(--ev-brand-soft); }
.scrap-progress .ev-btn { flex: none; }
.scrap-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--ev-doubt-soft); border-radius: 11px; background: var(--ev-doubt-soft); }
.scrap-card h3 { margin: 0; color: var(--ev-text); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.scrap-card p { margin: 0; color: var(--ev-text-2); font-size: 12.5px; line-height: 1.5; }
.scrap-cmd { align-self: flex-start; padding: 4px 9px; border-radius: var(--ev-r-sm); background: var(--ev-surface); color: var(--ev-text); font: 600 12px var(--ev-font-mono); }
.scrap-preview { display: flex; flex-direction: column; gap: 14px; padding: 14px; border: 1px solid var(--ev-border); border-radius: 12px; background: var(--ev-surface); }
.scrap-preview-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.scrap-preview-head .wsd-h, .scrap-preview-head h3 { margin: 0; flex: 1; color: var(--ev-text); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.scrap-state { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: var(--ev-r-pill); background: var(--ev-surface-2); color: var(--ev-text-2); font: 600 10.5px/1 var(--ev-font-ui); letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.scrap-state.is-ok { background: var(--ev-ok-soft); color: var(--ev-ok); }
.scrap-state.is-parcial { background: var(--ev-doubt-soft); color: var(--ev-doubt); }
.scrap-state.is-error { background: var(--ev-bad-soft); color: var(--ev-bad); }
.scrap-warn { margin: 0; padding: 7px 10px; border-radius: var(--ev-r-sm); background: var(--ev-info-soft); color: var(--ev-text); font-size: 12px; line-height: 1.45; }
.scrap-block { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.scrap-block .scrap-h { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ev-text-3); font-size: 10.5px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); line-height: 1.3; text-transform: uppercase; }
.scrap-block .scrap-h .n { color: var(--ev-text-3); font: 500 11px/1 var(--ev-font-mono); letter-spacing: 0; text-transform: none; }
.scrap-name { margin: 0; color: var(--ev-text); font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.scrap-summary { margin: 0; color: var(--ev-text-2); font-size: 12.5px; line-height: 1.45; }
.scrap-line { margin: 0; color: var(--ev-text-2); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.scrap-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.scrap-photo { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.scrap-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--ev-r-sm); border: 1px solid var(--ev-border); background: var(--ev-surface-2); }
.scrap-photo figcaption { color: var(--ev-text-3); font-size: 10.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scrap-path { overflow-wrap: anywhere; }
.scrap-path b { color: var(--ev-text); }
.scrap-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 10px; border-top: 1px solid var(--ev-border); }
.scrap-pick > .wsd-hint { flex-basis: 100%; }
.scrap-check { display: inline-flex; align-items: center; gap: 7px; color: var(--ev-text-2); font-size: 12.5px; cursor: pointer; }
.scrap-check input { accent-color: var(--ev-brand); }
.scrap-check .n { color: var(--ev-text-3); font: 500 11px/1 var(--ev-font-mono); }
.scrap-upd .scrap-pick { flex-direction: column; align-items: flex-start; gap: 8px; border-top: 0; padding-top: 6px; }
.scrap-upd-row { display: flex; flex-direction: column; gap: 1px; }
.scrap-upd-row .wsd-hint { margin: 0 0 0 25px; }
/* 2026-10-15 (docs/interacciones I12): the reactors checkbox sits under the section Interacciones */
.scrap-upd-row .scrap-upd-sub { margin-left: 25px; }
.scrap-idle { padding: 14px; border: 1px dashed var(--ev-border); border-radius: 11px; text-align: center; }
/* The photo modal (?modal=etiquetar; the prototype's .tagger): wide, in the tokens; the photo at the left, the faces at the right */
.osint-modal.tg-modal { width: min(1080px, 100%); max-height: min(860px, 94vh); }
.tg { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr); align-items: start; gap: 18px; padding: 14px 20px; }
.tg-photo { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.tg-photo .cap { color: var(--ev-text-2); font-size: 12px; line-height: 1.4; text-align: center; }
.osint-photo-hint { align-self: stretch; margin: 0; padding: 6px 10px; border-radius: var(--ev-r-sm); background: var(--ev-info-soft); color: var(--ev-text); font-size: 12px; }
.osint-photo-aside { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: var(--ev-r-pill); background: var(--ev-doubt-soft); color: var(--ev-doubt); font: 600 11px/1.5 var(--ev-font-ui); }
.osint-photo-aside.found { background: var(--ev-info-soft); color: var(--info-ink); }
.tg-box-n { position: absolute; left: -9px; top: -9px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ev-petroleo-700); color: var(--ev-blanco); font: 700 10px/1 var(--ev-font-mono); box-shadow: 0 0 0 2px var(--ev-surface); pointer-events: none; }
.tg-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tg-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tg-face { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--ev-border); border-radius: 10px; background: var(--ev-surface); }
.tg-face.is-focus { border-color: var(--ev-focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ev-focus) 22%, transparent); }
.tg-face.is-changed { border-color: color-mix(in srgb, var(--ev-brand) 55%, var(--ev-border)); }
.tg-n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ev-petroleo-700); color: var(--ev-blanco); font: 700 10.5px/1 var(--ev-font-mono); }
.tg-crop { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--ev-surface-2); }
.tg-ctl { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tg-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.tg-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--ev-r-pill); font-size: 12px; font-weight: 600; }
.tg-chip.is-confirmed { background: var(--ev-ok-soft); color: var(--ev-ok); }
.tg-chip.is-doubt { background: var(--ev-doubt-soft); color: var(--ev-doubt); }
.tg-prop { color: var(--ev-info); font-size: 12px; font-weight: 500; }
.tg-prop.is-review { color: var(--ev-doubt); }
.tg-select, .tg-select .ev-select { width: 100%; }
.tg-select .ev-select { height: 32px; font-size: 12.5px; }
.tg-legend { padding-top: 8px; border-top: 1px solid var(--ev-border); }
.tg-legend .fixed { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.45; }
.tg-legend .fixed .ev-ic { flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--ev-brand); }
.tg-foot { flex-wrap: wrap; gap: 6px; }
.tg-count { white-space: nowrap; }
/* the name field under a box and the names it suggests (W4), in the tokens: a popover of the modal */
.osint-face-field { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 4px; width: 300px; padding: 7px; border: 1px solid var(--ev-focus); border-radius: 10px; background: var(--ev-surface); box-shadow: var(--ev-shadow-3); line-height: 1.3; }
.osint-face-field .osint-input { width: 100%; box-sizing: border-box; height: 32px; padding: 0 10px; border: 1px solid var(--ev-border-strong); border-radius: 8px; background: var(--ev-surface); color: var(--ev-text); font: inherit; font-size: 13px; }
.osint-face-field .hint { color: var(--ev-text-3); font-size: 11px; }
.osint-face-list { max-height: 260px; overflow: auto; margin: 2px 0 0; padding: 4px; border: 1px solid var(--ev-border); border-radius: 8px; background: var(--ev-surface); }
.osint-face-group + .osint-face-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--ev-border); }
.osint-face-group .gh { padding: 3px 6px; color: var(--ev-text-3); font: 600 10px/1.4 var(--ev-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.osint-face-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; min-height: 32px; padding: 4px 6px; border-radius: 6px; color: var(--ev-text); font-size: 12.5px; cursor: pointer; }
.osint-face-opt.on, .osint-face-opt:hover { background: var(--ev-brand-soft); }
.osint-face-opt .crop { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.osint-face-opt .nm { font-weight: 600; }
.osint-face-opt .sub { flex-basis: 100%; color: var(--ev-text-2); font-size: 11px; }
.osint-face-opt .bd { padding: 0 6px; border-radius: var(--ev-r-pill); background: var(--ev-info-soft); color: var(--info-ink); font: 500 10px/1.5 var(--ev-font-mono); }
.osint-face-opt.near { border: 1px solid color-mix(in srgb, var(--ev-doubt) 50%, transparent); background: var(--ev-doubt-soft); color: var(--ev-text); font-weight: 600; }
.osint-face-opt.create { color: var(--ev-brand); font-weight: 600; }
.osint-face-none { padding: 6px; color: var(--ev-text-2); font-size: 11.5px; }
@media (max-width: 1100px) {
  .tg { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ro-drop, .fo-switch, .fo-switch::after { transition: none; }
  .fo-running { animation: none; }
}

/* ---------------------------------------------------------------- T4.5 The node menu, the typed consultas, Fijar and Ocultar
   The menu of a node (the prototype's .popover.ctx with its .ctx-head, .menu-label, .menu-item, .meta and .paid): fixed over the
   workspace, above the drawers and under the modals, 320 px; a consulta shows its time at the right and "acceso contratado" under it; an
   item that cannot run now keeps its place and says why under its name. On the stage: the ring of a pinned node, the dashed outline of a
   hidden one that Ver ocultos shows, the progress on the node a search runs on (the prototype's .g-node .progress). In the panel of the
   case: the list Fijados and the pin of a row. Design tokens only, both themes. */
.ev-node-menu { position: fixed; z-index: calc(var(--ev-z-drawer) + 5); width: 320px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; }
.nm-head { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 2px; padding: 6px 8px 10px; border-bottom: 1px solid var(--ev-border); }
.nm-av { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--gc, var(--ev-t-otro)) 16%, transparent); color: var(--gc, var(--ev-t-otro)); }
.nm-av .ev-ic { width: 15px; height: 15px; }
.nm-titles { min-width: 0; }
.nm-name { display: block; max-width: 250px; font-size: 13px; font-weight: 600; color: var(--ev-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-sub { display: block; font-size: 11.5px; color: var(--ev-text-3); }
/* T5.5: the sensitive mark in the head of the node menu (the Ficha's tag) */
.nm-sens { display: inline-flex; align-items: center; gap: 4px; height: 18px; margin-top: 4px; padding: 0 6px; border-radius: 5px; background: var(--ev-doubt-soft); color: var(--ev-text); font-size: 11px; font-weight: 500; }
.nm-sens .ev-ic { width: 12px; height: 12px; color: var(--ev-doubt); }
.nm-group + .nm-group { margin-top: 2px; padding-top: 2px; border-top: 1px solid var(--ev-border); }
.nm-label { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; color: var(--ev-text-3); }
.nm-item { align-items: flex-start; min-height: 36px; padding: 7px 10px; }
.nm-item > .ev-ic { flex: none; margin-top: 1px; }
.nm-item:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: -2px; }
.nm-txt { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.nm-txt .lbl { line-height: 1.35; overflow-wrap: anywhere; }
.nm-txt .why { font-size: 11.5px; line-height: 1.35; color: var(--ev-text-2); }
.nm-item.is-off { cursor: default; }
.nm-item.is-off .lbl { color: var(--ev-text-2); }
.nm-item.is-off .why::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--ev-doubt); vertical-align: middle; }
.nm-meta { flex: none; margin-left: auto; padding-left: 10px; text-align: right; white-space: nowrap; }
.nm-meta .t { display: block; font: 500 10.5px/1.5 var(--ev-font-mono); color: var(--ev-text-3); }
.nm-meta .paid { display: block; font-size: 10.5px; line-height: 1.3; color: var(--ev-t-org); }
/* 2026-10-14: what a consulta of no cost uses instead (the identity of the reader with a session), and the note under its name */
.nm-meta .need { display: block; font-size: 10.5px; line-height: 1.3; color: var(--ev-text-3); }
.nm-txt .note { font-size: 11.5px; line-height: 1.35; color: var(--ev-text-2); }
.g-leaf.is-pinned .g-disc-wrap::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--ev-brand); pointer-events: none; }
.g-pin-ring { display: inline-block; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--ev-brand); }
.g-pin-ring.is-legend { position: static; flex: none; }
/* 2026-10-22: an account the reader discovered and never read: a red dashed ring around the disc and a red dot at its top right, at least
   2 and 9 px on screen at any scale (--lens-u is one screen px in stage px) */
.g-unread-ring { position: absolute; inset: calc(-3px * var(--lens-u, 1)); border-radius: 50%; border: max(2px, calc(2px * var(--lens-u, 1))) dashed var(--ev-bad); pointer-events: none; box-sizing: border-box; }
.g-unread-dot { position: absolute; right: calc(-3px * var(--lens-u, 1)); top: calc(-3px * var(--lens-u, 1)); width: max(9px, calc(9px * var(--lens-u, 1))); height: max(9px, calc(9px * var(--lens-u, 1))); box-sizing: border-box; border-radius: 50%; background: var(--ev-bad); border: max(1.5px, calc(1.5px * var(--lens-u, 1))) solid var(--ev-stage); }
.g-unread-ring.is-legend { position: static; display: inline-block; flex: none; width: 12px; height: 12px; border-width: 1.5px; }
.g-leaf.is-hidden-shown .g-disc { border-style: dashed; opacity: 0.7; }
.g-leaf.is-hidden-shown .g-label { opacity: 0.7; font-style: italic; }
.g-leaf.is-running::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2.5px solid transparent; border-top-color: var(--ev-brand); border-right-color: var(--ev-brand); pointer-events: none; animation: osintSpin .9s linear infinite; }
.lat-pinned { margin: 4px 0 6px; }
.lat-pinned .lat-sub { display: block; padding-left: 8px; }
.lat-pinned .lat-row { padding-left: 8px; }
.lat-pin { flex: none; width: 13px; height: 13px; margin-left: auto; color: var(--ev-brand); }
.lat-row.is-hidden .lat-name { font-style: italic; color: var(--ev-text-3); }
@media (prefers-reduced-motion: reduce) { .g-leaf.is-running::after { animation: none; border-color: var(--ev-brand); border-style: dotted; } }

/* ------------------------------------------------------------------------------------------------
   T4.6 Exportar (X) and the report page (#/caso/:id/informe): the prototype's .fmt-list, .exp-preview and .set-row
   (pantallas-c.css) and its .rep-* (pantallas-a.css). Tokens only, both themes (the desk of the paper is the palette's niebla-200 in
   the light theme and noche-950 in the dark one, near the prototype's own desk); the paper itself is white in both themes and
   carries its own styles inside the page it shows (caso.js PAPER_CSS), so only its desk and its frame are drawn here.
   ------------------------------------------------------------------------------------------------ */
/* Exportar: the two face switches, the seven rows, the preview of the report's order */
.xp-sets { gap: 0; }
.xp-set { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--ev-border); cursor: pointer; }
.xp-set:first-child { padding-top: 0; border-top: 0; }
.xp-set-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.4; }
.xp-set-txt strong { color: var(--ev-text); font-weight: 500; }
.xp-help { color: var(--ev-text-3); font-size: 11.5px; line-height: 1.4; }
.ws-switch.xp-switch, .ws-switch.rep-ol-sw { flex: none; min-height: 0; padding: 0; }
.ws-switch.xp-switch input, .ws-switch.rep-ol-sw input { left: 0; }
/* the input lies over its track (invisible), so a press on the track is a press on the switch itself */
.xp-switch input, .rep-ol-sw input, .rep-switch input { z-index: 1; }
.xp-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.xp-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ev-border); }
.xp-row:last-child { border-bottom: 0; }
.xp-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--ev-r-sm); background: var(--ev-surface-2); color: var(--ev-text-2); }
.xp-ic .ev-ic { width: 16px; height: 16px; }
.xp-row.is-main .xp-ic, .xp-row.is-client.is-on .xp-ic { background: var(--ev-brand-soft); color: var(--ev-brand); }
.xp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--ev-text-3); font-size: 12px; line-height: 1.4; }
.xp-txt .name { color: var(--ev-text); font-size: 13px; font-weight: 500; }
.xp-txt .file { overflow: hidden; color: var(--ev-text-3); font: 400 10.5px/1.4 var(--ev-font-mono); text-overflow: ellipsis; white-space: nowrap; }
.xp-row > .ev-btn { flex: none; }
.xp-row.is-off .xp-txt .name { color: var(--ev-text-2); }
.xp-preview { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-md); background: var(--ev-surface-2); }
.xp-pv-title { color: var(--ev-text); font-size: 12.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.xp-dots { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.xp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gc); }
.xp-pv-row { display: flex; align-items: center; gap: 8px; color: var(--ev-text); font-size: 12.5px; }
.xp-pv-row .ev-ic { flex: none; width: 14px; height: 14px; }
.xp-pv-row.v-confirmed .ev-ic { color: var(--ev-ok); }
.xp-pv-row.v-doubt .ev-ic { color: var(--ev-doubt); }
.xp-pv-row.v-unreviewed .ev-ic { color: var(--ev-text-3); }
.xp-pv-row.v-discarded .ev-ic { color: var(--ev-bad); }
.xp-pv-client { align-self: flex-start; margin-top: 2px; padding: 2px 8px; border-radius: var(--ev-r-pill); background: var(--ev-brand-soft); color: var(--ev-brand); font-size: 11.5px; font-weight: 500; }
.xp-note { margin-top: 2px; }

/* The report page: its head (the switches and the two actions), the outline of the sections with the Foto block, the paper on its desk */
:root { --rep-desk: var(--ev-niebla-200); }
[data-theme="dark"] { --rep-desk: var(--ev-noche-950); }
.ev-app > .main.is-report { display: flex; }
.ev-app > .main.is-report > * { min-height: 0; }
.rep { flex: 1 1 auto; display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; min-height: 0; color: var(--ev-text); font-family: var(--ev-font-ui); line-height: var(--ev-lh); }
.rep-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 16px 24px 16px 28px; border-bottom: 1px solid var(--ev-border); background: var(--ev-surface); }
.rep-titles { flex: 1 1 240px; min-width: 0; }
.rep-titles .ev-page-sub { margin-top: 3px; }
.rep-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-right: 18px; border-right: 1px solid var(--ev-border); }
.rep-dl { flex: none; justify-content: flex-end; }
.rep-body { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 0; }
.rep-outline { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; padding: 18px 12px 16px; border-right: 1px solid var(--ev-border); background: var(--ev-surface); }
.rep-eyebrow { padding: 0 8px; color: var(--ev-text-3); font-size: 10.5px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); line-height: 1.3; text-transform: uppercase; }
.rep-ol { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rep-ol-row { display: flex; align-items: center; gap: 4px; padding-right: 4px; border-radius: var(--ev-r-sm); transition: background var(--ev-dur-1) var(--ev-ease); }
.rep-ol-row.is-current { background: var(--ev-brand-soft); }
.rep-ol-go { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; height: 34px; padding: 0 8px; border: 0; border-radius: var(--ev-r-sm); background: none; color: var(--ev-text); font: 500 13px/1 var(--ev-font-ui); text-align: left; cursor: pointer; }
.rep-ol-go:hover { background: var(--ev-surface-2); }
.rep-ol-row.is-current .rep-ol-go:hover { background: transparent; }
.rep-ol-go:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: -2px; }
.rep-ol-n { flex: none; width: 16px; color: var(--ev-text-3); font: 600 11px/1 var(--ev-font-mono); text-align: center; }
.rep-ol-row.is-current .rep-ol-n { color: var(--ev-brand); }
.rep-ol-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-ol-c { flex: none; color: var(--ev-text-3); font: 500 11px/1 var(--ev-font-mono); }
.rep-ol-row.is-off .rep-ol-go { color: var(--ev-text-3); cursor: default; }
.rep-ol-row.is-off .rep-ol-go:hover { background: none; }
.rep-ol-note { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--ev-border); }
.rep-ol-note p { margin: 0; color: var(--ev-text-3); font-size: 12px; line-height: 1.5; }
.rep-ol-note .rep-mono { display: block; margin-bottom: 2px; color: var(--ev-text); font: 500 12px/1.4 var(--ev-font-mono); }
.rep-ol-note .ev-btn { align-self: flex-start; }
.rep-stage { display: flex; justify-content: center; min-height: 0; padding: 24px 32px 0; overflow: hidden; background: var(--rep-desk); }
.rep-frame { display: block; width: min(794px, 100%); height: 100%; border: 0; border-radius: 3px 3px 0 0; background: var(--ev-blanco); box-shadow: var(--ev-shadow-3); color-scheme: light; }
.rep-wait { flex: 1; }
@media (max-width: 1380px) { .rep-head { padding: 14px 20px; } .rep-stage { padding: 20px 24px 0; } }
@media (max-width: 1200px) { .rep-opts { padding-right: 0; border-right: 0; } }
@media (max-width: 1023px) { .rep-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .rep-outline { max-height: 180px; border-right: 0; border-bottom: 1px solid var(--ev-border); } .rep-ol-note { display: none; } }
@media (prefers-reduced-motion: reduce) { .rep-ol-row { transition: none; } }

/* ---- T4.7 (plan T4.7; the prototype's css/pantallas-b.css .ad-* and pantallas-c.css .set-*): Administración and Ajustes. The tabs of the
   screen, the ten sections on the left (sticky) and the one shown on the right in cards of rows: each row its name, what it does and its
   initial value, then its control at the right (a switch whose input lies over its track, a field, a chip of state). The drawer Ajustes del
   caso takes the frame of the drawers (wsd-*) and its own rows (as-*). Tokens only, both themes, reduced motion by the tokens. ---- */
.ad-page { max-width: 1240px; }
.ad-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: -6px 0 18px; border-bottom: 1px solid var(--ev-border); }
.ad-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 0; background: none; color: var(--ev-text-2); font: 500 13.5px/1 var(--ev-font-ui); cursor: pointer; }
.ad-tab .ev-ic { width: 16px; height: 16px; }
.ad-tab:hover { color: var(--ev-text); }
.ad-tab[aria-selected="true"] { color: var(--ev-text); }
.ad-tab[aria-selected="true"]::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--ev-brand); }
.ad-pending { display: grid; place-items: center; padding: 24px; }
.ad-pending .ev-empty { margin: 0 auto; }
.ad-summary { margin: 0 0 14px; color: var(--ev-text-2); font-size: 13px; line-height: 1.5; }
.set-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
.set-nav { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; }
.set-nav button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--ev-text-2); font: 400 13px/1.2 var(--ev-font-ui); text-align: left; cursor: pointer; transition: background var(--ev-dur-1), color var(--ev-dur-1); }
.set-nav button .ev-ic { flex: none; width: 16px; height: 16px; }
.set-nav button:hover { background: var(--ev-surface-2); color: var(--ev-text); }
.set-nav button[aria-current="true"] { background: var(--ev-brand-soft); color: var(--ev-brand); font-weight: 500; }
.ad-settings { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 880px; }
.ad-sec-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ad-sec-note { margin: -6px 0 2px; color: var(--ev-text-2); font-size: 12.5px; line-height: 1.5; }
.ad-set { padding: 4px 20px 6px; }
.ad-set-title { margin: 0; padding: 14px 0 4px; color: var(--ev-text-3); font-size: 11px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); line-height: 1.3; text-transform: uppercase; }
.ad-set-note { margin: 2px 0 8px; color: var(--ev-text-2); font-size: 12.5px; line-height: 1.5; }
.ad-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: calc(14px * var(--ev-density-row)) 0; border-top: 1px solid var(--ev-border); }
.ad-set-title + .ad-row, .ad-set-note + .ad-row, .ad-set > .ad-state + .ad-row { border-top: 0; }
.ad-row .txt { flex: 1 1 360px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ad-name { display: block; color: var(--ev-text); font-size: 14px; font-weight: 500; line-height: 1.35; }
label.ad-name { cursor: pointer; }
.ad-hint { color: var(--ev-text-3); font-size: 12px; line-height: 1.45; }
.ad-name .ad-hint { display: block; margin-top: 1px; font-weight: 400; font-family: var(--ev-font-mono); font-size: 11px; }
.ad-does { color: var(--ev-text-3); font-size: 12.5px; line-height: 1.5; }
.ad-def { color: var(--ev-text-2); font-size: 12px; line-height: 1.45; }
.ad-state { margin: 0; color: var(--ev-text-2); font-size: 12px; line-height: 1.45; }
.ad-row .ctl { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; max-width: 100%; }
.ad-row .ctl.is-wide, .ad-row.is-list .ctl { flex: 1 1 100%; justify-content: flex-start; }
.ad-switch.ws-switch { min-height: 32px; padding: 0; }
.ad-switch.ws-switch input { left: 0; z-index: 1; }
.ad-input { width: 260px; max-width: 100%; }
.ad-input.is-short { width: 96px; font-family: var(--ev-font-mono); }
.ad-text { width: 100%; }
.ad-num { width: 96px; font-family: var(--ev-font-mono); }
.ad-unit { color: var(--ev-text-3); font-size: 12.5px; }
.ad-input[readonly] { background: var(--ev-surface-2); color: var(--ev-text-2); }
.ad-lookup.is-on { color: var(--ev-ok); }
.ad-lookup.is-off { color: var(--ev-doubt); }
.ad-tag { display: inline-flex; align-items: center; height: 18px; margin-left: 8px; padding: 0 6px; border-radius: 5px; background: var(--ev-surface-2); color: var(--ev-text-2); font: 500 10px/1 var(--ev-font-mono); letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 2px; }
.ad-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: var(--ev-r-pill); background: var(--ev-surface-2); color: var(--ev-text-2); font-size: 12px; line-height: 1.35; }
.ad-chip.is-ok { background: var(--ev-ok-soft); color: var(--ev-text); }
.ad-chip.is-warn { background: var(--ev-doubt-soft); color: var(--ev-text); }
.ad-chip.is-bad { background: var(--ev-bad-soft); color: var(--ev-text); }
.ad-folded { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 12px; border: 1px solid var(--ev-border-strong); border-radius: 8px; background: var(--ev-surface); color: var(--ev-text); font: 400 12.5px/1.3 var(--ev-font-mono); text-align: left; cursor: pointer; }
.ad-folded:hover { border-color: var(--ev-text-3); }
.ad-folded .count { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-folded .edit { flex: none; color: var(--ev-brand); font: 500 12.5px var(--ev-font-ui); }
.ad-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0 10px; border-top: 1px solid var(--ev-border); }
.ad-svc { display: flex; flex-direction: column; margin: 4px 0 6px; padding: 0; list-style: none; }
.ad-svc li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 32px; padding: 4px 0; font-size: 13px; }
.ad-svc li strong { font-weight: 500; }
.ad-svc .ad-svc-state { margin-left: auto; color: var(--ev-text-2); font-size: 12.5px; }
.ad-svc.is-compact li { min-height: 28px; font-size: 12.5px; }
.ad-svc.is-compact .ad-svc-state { font-size: 12px; }
.ad-subtabs { align-self: flex-start; }
.ad-subtabs button[aria-selected="true"] { background: var(--seg-on); color: var(--ev-text); box-shadow: var(--ev-shadow-1); }
.ad-seg button[aria-pressed="true"] { color: var(--ev-text); }
.ad-pairing { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 12px; padding: 12px; border-radius: 10px; background: var(--ev-surface-2); }
.ad-pairing .ad-state { color: var(--ev-text); }
.ad-pair-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ad-pair-row .ad-input { flex: 1; min-width: 180px; background: var(--ev-surface); }
.ad-group { display: block; }
.ad-foot { margin: 0; padding: 4px 0 8px; color: var(--ev-text-2); font-size: 12.5px; }
@media (max-width: 1100px) {
  .set-layout { grid-template-columns: 1fr; }
  .set-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .set-nav button { width: auto; }
}
/* the drawer Ajustes del caso (rail coma) */
.as-body { gap: 18px; }
.as-field { display: flex; flex-direction: column; gap: 6px; }
.as-state { margin: 0; color: var(--ev-text-2); font-size: 12px; line-height: 1.45; }
.as-rows { display: flex; flex-direction: column; }
.as-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 4px 0; border-top: 1px solid var(--ev-border); }
.as-rows .as-row:first-child { border-top: 0; }
.as-name { flex: 1; min-width: 0; color: var(--ev-text); font-size: 12.5px; line-height: 1.4; cursor: pointer; }
.as-dl { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 12px; line-height: 1.45; }
.as-dl dt { color: var(--ev-text-2); }
.as-dl dd { margin: 0; color: var(--ev-text); overflow-wrap: anywhere; }
.as-modes { align-self: flex-start; }
.as-control { padding: 10px 12px; border-radius: 10px; background: var(--ev-surface-2); }
/* the field of an optional control in the composer (Número de caso) */
.nc-casenum { margin-top: 4px; }

/* ---- T4.8 (plan T4.8; the prototype's css/pantallas-a.css .srch-* and pantallas-b.css .df-* .pb-*): Buscar and Datos. Buscar: the field
   with Buscar at its right, the types of datum (the one recognised marked), the line while the cases are read, the summary with a jump to
   each group, the groups of rows (the type badge, the name with the words of the query marked, its identifiers and what it is, the cases
   that hold it, Abrir) and the foot. Datos: the tabs with their counts, the line of the service, the table of the sources (clickable rows,
   the chip of the state), the detail of one, the catalog grouped by input type. Tokens only, both themes, reduced motion by the tokens. ---- */
.srch-page, .df-page { max-width: 1240px; }
.srch-form { display: flex; align-items: center; gap: 10px; max-width: 940px; }
.srch-field { flex: 1 1 auto; max-width: none; }
.srch-field > .ev-ic { left: 14px; width: 18px; height: 18px; }
.srch-field .ev-input.srch-input { height: 44px; padding-left: 42px; border-radius: 10px; font-size: 15px; }
.srch-submit { --h: 44px; padding: 0 20px; border-radius: 10px; font-size: 14px; }
.srch-types { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 22px; }
.srch-types-lbl { margin-right: 4px; color: var(--ev-text-3); font-size: 12px; }
.srch-type { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-pill); background: var(--ev-surface); color: var(--ev-text-2); font-size: 12.5px; }
.srch-type .ev-ic { width: 14px; height: 14px; }
.srch-type.is-on { border-color: color-mix(in srgb, var(--ev-brand) 45%, transparent); background: var(--ev-brand-soft); color: var(--ev-brand); font-weight: 500; }
.srch-reading { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--ev-text-2); font-size: 13px; }
.srch-spin { flex: none; width: 14px; height: 14px; border: 2px solid var(--ev-border-strong); border-top-color: var(--ev-brand); border-radius: 50%; animation: osintSpin 0.9s linear infinite; }
.srch-card { display: grid; place-items: center; padding: 12px; }
.srch-card .ev-empty { margin: 0 auto; }
.srch-card-note { color: var(--ev-text-3); font-size: 12.5px; }
.srch-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 18px; }
.srch-total { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--ev-text-2); font-size: 13.5px; }
.srch-total b { color: var(--ev-text); font-weight: 600; }
.srch-kind { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; background: var(--ev-brand-soft); color: var(--ev-brand); font: 600 10px/1 var(--ev-font-mono); letter-spacing: 0.07em; text-transform: uppercase; }
.srch-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.srch-jump-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-pill); background: var(--ev-surface-2); color: var(--ev-text-2); font: 500 12px/1 var(--ev-font-ui); cursor: pointer; }
.srch-jump-chip:hover { border-color: var(--ev-border-strong); color: var(--ev-text); }
.srch-jump-chip b { color: var(--ev-text); font: 600 10.5px/1 var(--ev-font-mono); }
.srch-group { margin-bottom: 24px; scroll-margin-top: 16px; }
.srch-group:focus { outline: none; }
.srch-group-title .ev-ic { width: 14px; height: 14px; }
.srch-count { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ev-surface-2); color: var(--ev-text-2); font: 600 10.5px/1 var(--ev-font-mono); letter-spacing: 0; }
.srch-list { overflow: hidden; }
.srch-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: calc(12px * var(--ev-density-row)) 16px; border-bottom: 1px solid var(--ev-border); transition: background var(--ev-dur-1); }
.srch-row:last-child { border-bottom: 0; }
.srch-row:hover { background: var(--row-hover); }
.srch-badge { width: 28px; height: 28px; border-radius: 8px; }
.srch-badge .ev-ic { width: 15px; height: 15px; }
.srch-main { min-width: 0; }
.srch-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.srch-title strong { min-width: 0; overflow: hidden; color: var(--ev-text); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.srch-hit { padding: 0 1px; border-radius: 3px; background: color-mix(in srgb, var(--ev-brand) 22%, transparent); color: inherit; }
.srch-meta { display: flex; gap: 6px; min-width: 0; margin-top: 3px; color: var(--ev-text-2); font-size: 12.5px; }
.srch-ids { flex: 0 1 auto; min-width: 0; overflow: hidden; font: 500 11.5px/1.5 var(--ev-font-mono); text-overflow: ellipsis; white-space: nowrap; }
.srch-detail { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-stats { flex: none; color: var(--ev-text-3); white-space: nowrap; }
.srch-sep { flex: none; color: var(--ev-text-3); }
.srch-via { margin-top: 3px; overflow: hidden; color: var(--ev-text-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.srch-cases { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; }
.srch-incase { display: inline-flex; align-items: center; gap: 4px; max-width: 280px; height: 22px; padding: 0 8px 0 5px; border-radius: 6px; background: var(--ev-surface-2); color: var(--ev-text-2); font-size: 11.5px; text-decoration: none; }
.srch-incase .ev-ic { flex: none; width: 12px; height: 12px; }
.srch-incase-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.srch-incase:hover { background: var(--ev-surface-3); color: var(--ev-text); text-decoration: none; }
.srch-incase.v-confirmed .ev-ic { color: var(--ev-ok); }
.srch-incase.v-doubt .ev-ic { color: var(--ev-doubt); }
.srch-incase.v-discarded .ev-ic { color: var(--ev-bad); }
.srch-incase.is-more { padding: 0 8px; background: none; color: var(--ev-text-3); }
.srch-acts { display: flex; align-items: center; gap: 6px; }
.srch-more { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 8px 4px 0; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--ev-text-2); font: 500 12.5px/1 var(--ev-font-ui); cursor: pointer; }
.srch-more:hover { background: var(--ev-surface-2); color: var(--ev-text); }
.srch-more .ev-ic { width: 14px; height: 14px; }
.srch-unread { margin: 0 0 12px; padding: 9px 12px; border-left: 3px solid var(--ev-doubt); border-radius: 8px; background: var(--ev-doubt-soft); color: var(--ev-text); font-size: 12.5px; line-height: 1.45; }
.srch-foot, .df-foot { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: var(--ev-text-3); font-size: 12.5px; line-height: 1.45; }
.srch-foot .ev-ic, .df-foot .ev-ic { flex: none; width: 15px; height: 15px; color: var(--ev-brand); }
@media (prefers-reduced-motion: reduce) { .srch-spin { animation: none; } .srch-row { transition: none; } }
@media (max-width: 1100px) {
  .srch-row { grid-template-columns: 28px minmax(0, 1fr); }
  .srch-acts { grid-column: 2; }
}
/* Datos */
.df-tab-n { margin-left: 2px; color: var(--ev-text-3); font: 500 11px/1 var(--ev-font-mono); }
.df-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; }
.df-note-txt { flex: 1 1 420px; min-width: 0; }
.df-note-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.df-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.df-spacer { flex: 1 1 auto; }
.df-summary { margin: 0; color: var(--ev-text-2); font-size: 13px; }
.df-legend { color: var(--ev-text-3); font-size: 12.5px; }
.df-search { flex: 0 1 320px; }
.df-n { margin-left: 4px; color: var(--ev-text-3); font: 500 11px/1 var(--ev-font-mono); }
.df-card { overflow: hidden; }
.df-table th.num, .df-table td.num { text-align: right; }
.df-table tbody tr { cursor: pointer; }
.df-table td { padding-top: calc(11px * var(--ev-density-row)); padding-bottom: calc(11px * var(--ev-density-row)); }
.df-c-name { width: 36%; }
.df-c-kind { width: 16%; }
.df-c-rec { width: 15%; }
.df-c-use { width: 17%; }
.df-c-state { width: 16%; }
.df-src > strong { display: block; color: var(--ev-text); font-size: 13.5px; font-weight: 500; }
.df-src > span { display: block; margin-top: 2px; color: var(--ev-text-3); font-size: 12px; line-height: 1.45; }
.df-dim { color: var(--ev-text-2); font-size: 12.5px; }
.df-num { color: var(--ev-text); font: 500 12.5px/1.3 var(--ev-font-mono); }
.df-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 2px 8px; border-radius: var(--ev-r-pill); background: var(--ev-neutral-soft); color: var(--ev-text-2); font-size: 12px; font-weight: 500; line-height: 1.3; }
.df-chip .ev-ic { flex: none; width: 12px; height: 12px; }
.df-chip.is-ok { background: var(--ev-ok-soft); color: var(--ev-text); }
.df-chip.is-ok .ev-ic { color: var(--ev-ok); }
.df-chip.is-warn { background: var(--ev-doubt-soft); color: var(--ev-text); }
.df-chip.is-warn .ev-ic { color: var(--ev-doubt); }
.df-chip.is-bad { background: var(--ev-bad-soft); color: var(--ev-text); }
.df-chip.is-bad .ev-ic { color: var(--ev-bad); }
.df-detail { margin-top: 14px; padding: 16px 20px 18px; }
.df-detail-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.df-detail-titles { flex: 1; min-width: 0; }
.df-eyebrow { color: var(--ev-text-3); font-size: 11px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.df-detail-title { margin: 2px 0 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.df-props { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 13px; line-height: 1.5; }
.df-props > div { display: contents; }
.df-props dt { color: var(--ev-text-3); }
.df-props dd { margin: 0; color: var(--ev-text); overflow-wrap: anywhere; }
.df-cat tbody th { position: static; }
.df-grp-head th { padding-top: 12px; padding-bottom: 10px; background: var(--ev-surface-2); color: var(--ev-text); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.df-grp-title { display: inline-flex; align-items: center; gap: 10px; }
.df-grp-n { color: var(--ev-text-3); font: 500 11px/1 var(--ev-font-mono); }
.df-c-q { width: 52%; }
.df-c-time { width: 13%; }
.df-c-cost { width: 15%; }
.df-c-cstate { width: 20%; }
.df-q > strong { display: block; color: var(--ev-text); font-size: 13.5px; font-weight: 500; }
.df-q > span { display: block; margin-top: 2px; color: var(--ev-text-3); font-size: 12px; line-height: 1.45; }
.df-time { display: inline-flex; align-items: center; gap: 6px; color: var(--ev-text-3); font: 500 12px/1 var(--ev-font-mono); white-space: nowrap; }
.df-time .ev-ic { width: 14px; height: 14px; }
.df-paid { color: var(--ev-t-org); font-size: 12.5px; font-weight: 500; }
/* 2026-10-14: under the cost, what a consulta of no cost uses instead */
.df-uses { display: block; margin-top: 2px; color: var(--ev-text-3); font-size: 11.5px; line-height: 1.35; }
.df-empty { margin: 0 auto; }
@media (max-width: 1100px) {
  .df-c-kind, .df-c-use { width: auto; }
  .df-props { grid-template-columns: 1fr; }
}
/* S13 (docs/integracion-plataforma, especificacion.md 6.5 and 6.8): the knowledge base in Datos (its sources, its requests, the state of its
   service folded at the bottom of Fuentes) and the hints of the composer under the order. Tokens only. */
.df-base { margin-top: 28px; }
.df-base-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.df-base-title { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--ev-text); font-size: 15px; font-weight: 600; line-height: 1.3; }
.df-base-title .ev-ic { width: 16px; height: 16px; color: var(--ev-brand); }
.df-base-sub { flex: 1 1 100%; margin: 0; color: var(--ev-text-3); font-size: 12.5px; line-height: 1.45; }
.df-base-none { margin: 0; padding: 14px 16px; color: var(--ev-text-2); font-size: 13px; }
.df-b-name { width: 30%; }
/* B21: the chip keeps its own text colour and size; the row's ".df-src > span" (--ev-text-3, 12 px) read 4.4:1 on the chip's --ev-surface-2 */
.df-base-table .df-src > .wsd-chip-mark { display: inline-flex; margin-top: 4px; color: var(--ev-text-2); font-size: 11px; }
.df-base-cat .df-q > span { color: var(--ev-text-2); }
.df-base-status { margin-top: 20px; padding: 14px 18px; }
.df-base-status-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.df-base-status-body { margin-top: 12px; }
.df-base-h { margin: 14px 0 6px; color: var(--ev-text-2); font-size: 12px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.df-base-comps { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.df-base-comps li { display: inline-flex; align-items: center; gap: 8px; }
.df-base-hist td { font-size: 12.5px; }
.df-mono { font: 500 12px/1.3 var(--ev-font-mono); overflow-wrap: anywhere; }
.df-base-index { margin: 16px 0 0; color: var(--ev-text); font-size: 13px; }
.df-base-old { margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid var(--ev-doubt); border-radius: 8px; background: var(--ev-doubt-soft); color: var(--ev-text); font-size: 12.5px; line-height: 1.45; }
.nc-base { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.nc-base-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--ev-text-2); font-size: 12.5px; line-height: 1.45; }
.nc-base-line > .ev-ic { flex: none; width: 14px; height: 14px; color: var(--ev-brand); }
.nc-base-line.is-hard > .ev-ic { color: var(--ev-doubt); }
.nc-base-line > span:not(.nc-base-acts) { flex: 1 1 260px; min-width: 0; }
.nc-base-acts { display: inline-flex; align-items: center; gap: 8px; }
.nc-base-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0 22px; padding: 0; list-style: none; font-size: 12.5px; color: var(--ev-text-2); }
.nc-base-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.nc-base-date, .nc-base-n { font: 500 12px/1.3 var(--ev-font-mono); color: var(--ev-text); }
/* S21: Precisar la persona en la base, the folded block under the anchor strip of the composer. Tokens only. */
.nc-guided { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 12px; border: 1px solid var(--ev-border); border-radius: 11px; background: var(--ev-surface-2); }
.nc-guided-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px; }
.nc-guided-judicial { display: inline-flex; align-items: center; gap: 6px; color: var(--ev-text-2); font-size: 12.5px; cursor: pointer; }
.nc-guided-body, .nc-guided-session, .nc-guided-q, .nc-guided-anchor { display: flex; flex-direction: column; gap: 8px; }
.nc-guided-body > p, .nc-guided-session > p, .nc-guided-q > p, .nc-guided-q > h3, .nc-guided-anchor > p { margin: 0; }
.nc-guided-person { color: var(--ev-text); font-size: 13px; }
.nc-guided-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.nc-guided-count strong { color: var(--ev-text); font-size: 17px; font-weight: 600; }
.nc-guided-text { display: flex; gap: 8px; }
.nc-guided-text .ev-input { flex: 1 1 auto; min-width: 0; }
.nc-guided-back, .nc-guided-use { align-self: flex-start; }
.nc-guided .ev-btn-group { justify-content: flex-start; }
.nc-guided-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.nc-guided-card > p { margin: 0; }
.nc-guided-anchor .wsd-chip b { margin-right: 4px; font-weight: 600; }
.nc-guided-trail li { align-items: baseline; }
/* B10 (docs/busqueda-inicial, especificacion.md 4): the four blocks of Más opciones of the composer, each folded with its summary, and the
   summary line of the run under them. Tokens only. */
.nc-bi { display: flex; flex-direction: column; gap: 8px; }
.nc-bi-block { display: flex; flex-direction: column; gap: 8px; padding: 6px 14px 8px; border: 1px solid var(--ev-border); border-radius: 11px; background: var(--ev-surface-2); }
.nc-bi-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.nc-bi-sum { min-width: 0; color: var(--ev-text-3); font-size: 12px; }
.nc-bi-body { display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
.nc-bi-body[hidden] { display: none; }
.nc-bi-body > p { margin: 0; }
.nc-bi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 12px; }
.nc-bi-under { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.nc-bi-under:empty { display: none; }
.nc-bi-from { color: var(--ev-text-3); font-size: 11.5px; font-style: italic; }
.nc-bi-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-pill); background: var(--ev-surface); color: var(--ev-text); font: 500 11.5px/1 var(--ev-font-mono); }
.nc-bi-clear { align-self: flex-start; }
.nc-bi-switch { align-self: flex-start; padding-left: 0; white-space: normal; }
.nc-bi-switch input { left: 0; }
.nc-bi-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.nc-bi-ids { display: flex; flex-direction: column; gap: 4px; }
.nc-bi-ids > p { margin: 0; }
.nc-bi-plat { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 6px 0; border-top: 1px solid var(--ev-border); }
.nc-bi-plat:first-child { border-top: 0; }
.nc-bi-plat-name { color: var(--ev-text); font-size: 12.5px; font-weight: 600; line-height: 24px; }
.nc-bi-plat-rows { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nc-bi-id { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 24px; color: var(--ev-text-2); font-size: 12.5px; cursor: pointer; }
.nc-bi-id input:disabled { cursor: default; }
.nc-bi-id-label { color: var(--ev-text); }
.nc-bi-state { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: var(--ev-r-pill); background: var(--ev-surface); color: var(--ev-text-3); font: 600 10.5px/1 var(--ev-font-ui); }
.nc-bi-state.is-valida { background: var(--ev-ok-soft); color: var(--ev-ok); }
.nc-bi-state.is-vencida { background: var(--ev-doubt-soft); color: var(--ev-doubt); }
.nc-bi-id-date { color: var(--ev-text-3); font-size: 11.5px; }
.nc-bi-stale { color: var(--ev-doubt); font-size: 11.5px; line-height: 24px; }
.nc-bi-auto { color: var(--ev-text-3); font-size: 11.5px; line-height: 24px; }
.nc-bi-none { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--ev-text-3); font-size: 12px; line-height: 24px; }
/* 2026-10-13 (docs/descubrimiento 9.1, D07): "Fuentes por dato", one row per source of the registry: its chip and, when the run will not ask it, why */
.nc-dc-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nc-dc-src { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 24px; padding: 2px 0; border-top: 1px solid var(--ev-border); }
.nc-dc-src:first-child { border-top: 0; }
.nc-dc-pick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.nc-dc-pick input:disabled { cursor: default; }
.nc-dc-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: var(--ev-r-pill); background: var(--ev-surface); color: var(--ev-text-2); font: 600 11.5px/1 var(--ev-font-ui); }
.nc-dc-src.is-ok .nc-dc-chip { background: var(--ev-ok-soft); color: var(--ev-ok); }
.nc-dc-why { color: var(--ev-text-3); font-size: 11.5px; line-height: 20px; }
.nc-bi-ref { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.nc-bi-ref-img { position: relative; display: inline-block; line-height: 0; }
.nc-bi-ref-img img { display: block; max-width: 180px; max-height: 120px; border-radius: 6px; }
.nc-bi-ref-box { position: absolute; padding: 0; border: 2px dashed var(--ev-text-3); border-radius: 4px; background: transparent; cursor: pointer; }
.nc-bi-ref-box.is-on { border-style: solid; border-color: var(--ev-brand); }
.nc-bi-ref-box:disabled { cursor: default; }
.nc-bi-ref-box:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: 1px; }
.nc-bi-ref-crop { width: 64px; height: 64px; border: 1px solid var(--ev-border); border-radius: 6px; object-fit: cover; }
.nc-bi-ok { color: var(--ev-ok); }
.nc-bi-warn { color: var(--ev-doubt); }
.nc-bi-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; color: var(--ev-text); font-size: 12.5px; line-height: 1.45; }
.nc-bi-line-k { color: var(--ev-text-3); font-size: 11.5px; }

/* S: Administración > Identidades (the accounts the profile reading service keeps). Tokens only, like the rest of the admin screen. */
.ad-id-card { padding: 4px 20px 14px; }
.ad-id-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ad-id-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--ev-border); }
.ad-id-row:first-child { border-top: 0; }
.ad-id-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ad-id-net { color: var(--ev-text); font-size: 13px; font-weight: 600; }
.ad-id-state { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: var(--ev-r-pill); background: var(--ev-surface-2); color: var(--ev-text-3); font: 600 10px/1 var(--ev-font-ui); letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.ad-id-state.is-valida { background: var(--ev-ok-soft); color: var(--ev-ok); }
.ad-id-state.is-vencida { background: var(--ev-doubt-soft); color: var(--ev-doubt); }
.ad-id-state.is-sin { background: var(--ev-surface-2); color: var(--ev-text-3); }
.ad-id-fields { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.ad-id-f { display: flex; flex-direction: column; gap: 4px; min-width: 180px; flex: 1; color: var(--ev-text-3); font-size: 11px; }
.ad-id-f > span { font-weight: 600; }
.ad-id-f .ad-input { font-size: 13px; }
.ad-id-pass { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.ad-id-pass > span { flex-basis: 100%; }
.ad-id-pass .ad-input { flex: 1; min-width: 160px; }
.ad-id-note { margin: 0; }
.ad-id-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-id-session { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ev-border); }
.ad-id-session-input { width: 100%; min-height: 84px; resize: vertical; font-size: 12px; line-height: 1.4; }

/* ------------------------------------------------------------------------------------------------
   Windows apart for other monitors (docs/plan-multimonitor.md). A satellite window is this same page opened with
   ?pane=<region>; the head script puts the regions it shows on the root as data-pane ("ficha", "ficha panel", ...). The page keeps
   its markup: the rest of the chrome (rail, top bar, header of the case, tools rail, palette, backdrops) is hidden, and what is
   left fills the window. The main window gets data-detached with the regions that live in a satellite right now; the ones it
   handles by its own state (the Ficha column, the lateral panel) need no rule here.
   ------------------------------------------------------------------------------------------------ */
html[data-pane] .ev-skip,
html[data-pane] .ev-app > .rail,
html[data-pane] .ev-app > .topbar,
html[data-pane] .ev-narrow-notice,
html[data-pane] .ws-head,
html[data-pane] .ws-tools,
html[data-pane] .run-progress-top,
html[data-pane] [data-drawer-backdrop],
html[data-pane] .ev-palette-layer,
html[data-pane] .ev-sheet-layer { display: none !important; }
html[data-pane] .ev-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); transition: none; }
html[data-pane] .ev-app > .main { grid-row: 1; grid-column: 1; }
html[data-pane] .ws { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
html[data-pane] .ws > .ws-lateral, html[data-pane] .ws > .ws-body { grid-row: 1; grid-column: 1; }
/* the head script puts data-has-panel, -ficha, -view, -graph, -dock and -bar on the root for what the window shows; the rest is hidden */
html[data-pane]:not([data-has-panel]) .ws > .ws-lateral,
html[data-pane]:not([data-has-ficha]) [data-ficha-col],
html[data-pane]:not([data-has-bar]) .ws-viewbar,
html[data-pane]:not([data-has-view]) .ws-view,
html[data-pane]:not([data-has-dock]):not([data-has-graph]) .ws-dock,
html[data-pane]:not([data-has-view]):not([data-has-dock]):not([data-has-ficha]) .ws > .ws-body { display: none; }
/* the body of the workspace: rows for the bar, the view and the lower panel by what is there; the Ficha beside them or alone */
html[data-pane] { --p-bar: 0px; --p-view: 0px; --p-dock: 0px; }
html[data-pane][data-has-bar] { --p-bar: 44px; }
html[data-pane][data-has-view] { --p-view: minmax(0, 1fr); }
html[data-pane][data-has-dock], html[data-pane][data-has-graph] { --p-dock: auto; }
html[data-pane][data-has-dock]:not([data-has-view]) { --p-dock: minmax(0, 1fr); }
html[data-pane][data-has-ficha]:not([data-has-view]):not([data-has-dock]) { --p-view: minmax(0, 1fr); }
html[data-pane] .ws-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--p-bar) var(--p-view) var(--p-dock); }
html[data-pane][data-has-ficha]:is([data-has-view], [data-has-dock]) .ws-body { grid-template-columns: minmax(0, 1fr) var(--ws-ficha); }
html[data-pane]:not([data-has-view]):not([data-has-dock]) .ws-body > .osint-ficha.column { grid-column: 1; }
html[data-pane][data-has-dock]:not([data-has-view]) .ws-dock { height: auto; }
/* the lateral panel beside whatever else the window shows */
html[data-pane][data-has-panel]:is([data-has-view], [data-has-dock], [data-has-ficha]) .ws { grid-template-columns: var(--ev-lateral) minmax(0, 1fr); }
html[data-pane][data-has-panel]:is([data-has-view], [data-has-dock], [data-has-ficha]) .ws > .ws-body { grid-column: 2; }
/* the heat map as a view of a satellite */
.ws-heat { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; background: var(--ev-surface); }
.ws-heat .osint-heat-canvas { flex: 1; min-height: 0; }
.ws-heat-empty { margin: 0; padding: 14px 20px; }
/* the Sala view over the stage: the bar of the room (toolbar and strip) and its grid of panels filling the rest; the room's own look is
   sala.css and sala-tema.css under .sala-op. Where the panels stack (narrow or short screens, sala-tema.css) the view scrolls them */
.ws-sala { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.ws-sala > .sala-bar { flex: none; }
.ws-sala > .sala-grid { flex: 1 1 auto; min-height: 0; }
.ws-sala-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ws-sala > .ev-empty { margin: 48px auto; }
@media (max-width: 1100px), (max-height: 820px) {
  .ws-sala > .sala-grid { flex: none; }
  /* a window apart that holds panels of the room gives them its whole height, one under the other when they stack */
  .ws-sala[data-sala-view="ventana"] > .sala-grid { flex: 1 1 auto; }
  .ws-sala[data-sala-view="ventana"] .sala-panel { max-height: none; }
}

/* feat/sala-muro-de-mando: the command wall (Muro de mando), the projector mode of the Sala view. A modifier on the same .sala-op section:
   it reuses the same panels (sala-paneles.js) laid out as large tiles over a command band, with much larger type and high contrast so the
   room reads from across a meeting. The dark operativo theme and its tokens come from tokens-ev.css by reference; nothing here edits that
   file. It is off unless the analyst enters it; the normal Sala keeps its own look. */
.ws-sala.is-muro { background: var(--ev-bg); overflow: hidden; }
.ws-sala.is-muro:fullscreen, .ws-sala.is-muro:-webkit-full-screen { background: var(--ev-bg); overflow: hidden; }
.ws-sala.is-muro > .sala-muro-band { flex: none; }
.ws-sala.is-muro > .sala-muro-tabs { flex: none; }
.ws-sala.is-muro > .sala-muro-board { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sala-muro-board > .sala-grid.is-muro { flex: 1 1 auto; min-height: 0; }
.sala-muro-board > .sala-muro-rostros, .sala-muro-board > .sala-muro-zonas { flex: 1 1 auto; min-height: 0; overflow: auto; padding: clamp(16px, 1.8vw, 32px); }

/* the command band: the subject large, then the case id, the live clock and when the case was last active, then the way out */
.sala-muro-band { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: clamp(14px, 1.6vw, 24px) clamp(18px, 2.4vw, 40px); border-bottom: 2px solid var(--ev-border-strong); background: var(--ev-surface); }
.sala-muro-subject { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); flex: 1 1 360px; min-width: 0; }
.sala-muro-face { flex: none; display: flex; align-items: center; justify-content: center; width: clamp(64px, 7vw, 108px); height: clamp(64px, 7vw, 108px); border-radius: var(--ev-r-md); border: 2px solid var(--ev-border-strong); background: var(--ev-surface-2); overflow: hidden; }
.sala-muro-face img { width: 100%; height: 100%; object-fit: cover; }
.sala-muro-face .ev-ic { width: 44%; height: 44%; color: var(--ev-text-3); }
.sala-muro-names { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sala-muro-eyebrow { color: var(--ev-text-3); font: 600 12px/1 var(--ev-font-ui); letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.sala-muro-name { margin: 0; color: var(--ev-text); font: 700 clamp(28px, 3.6vw, 52px)/1.05 var(--ev-font-ui); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.sala-muro-verdict { align-self: flex-start; display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 999px; font: 600 clamp(14px, 1.3vw, 18px)/1 var(--ev-font-ui); letter-spacing: 0.02em; }
.sala-muro-verdict.v-confirmed { background: var(--ev-ok-soft); color: var(--ev-ok); }
.sala-muro-verdict.v-doubt { background: var(--ev-doubt-soft); color: var(--ev-doubt); }
.sala-muro-verdict.v-discarded { background: var(--ev-bad-soft); color: var(--ev-bad); }
.sala-muro-verdict.v-unreviewed { border: 1px dashed var(--ev-border-strong); color: var(--ev-text-3); }
.sala-muro-meta { display: flex; flex-direction: column; gap: 6px; margin-left: auto; text-align: right; }
.sala-muro-meta-row { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; }
.sala-muro-meta-l { color: var(--ev-text-3); font: 600 11px/1 var(--ev-font-ui); letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.sala-muro-meta-v { color: var(--ev-text); font: 500 clamp(15px, 1.4vw, 20px)/1.1 var(--ev-font-ui); }
.sala-muro-meta-v.mono { font-family: var(--ev-font-mono); }
.sala-muro-exit { flex: none; align-self: center; height: 44px; padding: 0 18px; font-size: 15px; }
.sala-muro-exit .ev-ic { width: 18px; height: 18px; }

/* the tiles: the operational panels as large cards in a responsive grid */
.sala-grid.is-muro { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(320px, 30vw, 520px), 1fr)); align-content: start; gap: clamp(14px, 1.4vw, 24px); padding: clamp(14px, 1.4vw, 24px); overflow: auto; }
.sala-muro-tile { display: flex; flex-direction: column; min-height: clamp(260px, 32vh, 420px); border: 1px solid var(--ev-border); border-radius: var(--ev-r-md); background: var(--ev-surface); box-shadow: var(--ev-shadow-2); overflow: hidden; }
.sala-muro-tile > .sala-panel { flex: 1 1 auto; min-height: 0; max-height: none; border: 0; background: transparent; }
.sala-muro-tile[data-sala-tile="sectores"] { grid-column: span 2; min-height: clamp(320px, 44vh, 560px); }
@media (max-width: 900px) { .sala-muro-tile[data-sala-tile="sectores"] { grid-column: auto; } }
/* the big figure of each tile, above its panel */
.sala-muro-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; flex: none; padding: clamp(10px, 1vw, 16px) clamp(14px, 1.4vw, 22px) 0; }
.sala-muro-big-n { color: var(--ev-text); font: 700 clamp(40px, 4.4vw, 72px)/0.95 var(--ev-font-mono); letter-spacing: -0.02em; }
.sala-muro-big-u { color: var(--ev-text-2); font: 600 clamp(14px, 1.3vw, 19px)/1.2 var(--ev-font-ui); }
.sala-muro-big-cap { flex-basis: 100%; color: var(--ev-text-3); font: 500 clamp(13px, 1.2vw, 17px)/1.3 var(--ev-font-ui); overflow-wrap: anywhere; }
/* larger, higher-contrast panel text so the tiles read across a room */
.ws-sala.is-muro .sala-panel-title { font-size: clamp(16px, 1.5vw, 22px); }
.ws-sala.is-muro .so-lead { font-size: clamp(18px, 1.8vw, 26px); }
.ws-sala.is-muro .so-figure-n { font-size: clamp(32px, 3.4vw, 54px); }
.ws-sala.is-muro .so-stat-n { font-size: clamp(18px, 1.8vw, 26px); }
.ws-sala.is-muro .so-card-title { font-size: clamp(15px, 1.4vw, 20px); }
.ws-sala.is-muro .so-ev-text, .ws-sala.is-muro .so-reading { font-size: clamp(14px, 1.2vw, 17px); }
.ws-sala.is-muro .sala-panel-body { color: var(--ev-text); }
/* the Sectores map tile shows its map big */
.ws-sala.is-muro [data-sala-tile="sectores"] .sala-map-slot { min-height: clamp(260px, 40vh, 520px); }
.ws-sala.is-muro [data-sala-tile="sectores"] .sala-map-slot .leaflet-container { min-height: clamp(260px, 40vh, 520px); }

/* feat/muro-pestanas: the boards of the wall. A prominent tab bar of big, high-contrast pills switches the full-screen board below (the
   left and right arrows move between them, Esc leaves). The bar shows only when more than one board has data; a single board keeps the wall
   of before. The chosen board is per-session, never saved to the case. */
.sala-muro-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(8px, 0.9vw, 14px); padding: clamp(10px, 1.1vw, 18px) clamp(18px, 2.4vw, 40px); border-bottom: 1px solid var(--ev-border); background: var(--ev-surface-2); }
.sala-muro-tablist { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(8px, 0.9vw, 14px); }
.sala-muro-tab { display: inline-flex; align-items: center; gap: 10px; height: clamp(44px, 4.4vh, 60px); padding: 0 clamp(16px, 1.6vw, 28px); border: 2px solid var(--ev-border-strong); border-radius: 999px; background: var(--ev-surface); color: var(--ev-text-2); font: 700 clamp(15px, 1.4vw, 21px)/1 var(--ev-font-ui); letter-spacing: 0.01em; cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.sala-muro-tab .ev-ic { width: clamp(18px, 1.5vw, 24px); height: clamp(18px, 1.5vw, 24px); }
.sala-muro-tab:hover { color: var(--ev-text); border-color: var(--ev-text-3); }
.sala-muro-tab.is-on { background: var(--ev-brand); border-color: var(--ev-brand); color: var(--ev-on-brand); box-shadow: var(--ev-shadow-2); }
.sala-muro-tab:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: 2px; }
.sala-muro-tabhint { margin-left: auto; color: var(--ev-text-3); font: 500 clamp(12px, 1vw, 15px)/1.2 var(--ev-font-ui); }
@media (max-width: 720px) { .sala-muro-tabhint { display: none; } }

/* the Rostros board: every detected face grouped by person exactly as the Fotos module, a big recognition board. The crop colours come from
   the Fotos classes themselves (.osint-crop.confirmed green, .doubt amber, .proposal dashed, .prov-tagged blue), reused here; this block only
   sizes them big for the wall and lays out the person groups and Sin etiqueta. */
.sala-muro-rhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin-bottom: clamp(14px, 1.6vw, 26px); }
.sala-muro-reyebrow { color: var(--ev-text-3); font: 600 clamp(12px, 1.1vw, 15px)/1 var(--ev-font-ui); letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.sala-muro-rcount { color: var(--ev-text); font: 700 clamp(22px, 2.4vw, 38px)/1 var(--ev-font-ui); letter-spacing: -0.01em; }
.sala-muro-rnote { flex-basis: 100%; margin: 2px 0 0; color: var(--ev-text-2); font: 500 clamp(14px, 1.3vw, 19px)/1.35 var(--ev-font-ui); }
.sala-muro-rsection { margin-bottom: clamp(16px, 1.8vw, 30px); }
.sala-muro-rsub { margin: 0 0 clamp(10px, 1vw, 16px); color: var(--ev-text); font: 700 clamp(16px, 1.5vw, 24px)/1.1 var(--ev-font-ui); }
.sala-muro-rempty { margin: 6px 0 0; color: var(--ev-text-3); font: 500 clamp(14px, 1.3vw, 18px)/1.4 var(--ev-font-ui); }
/* the person groups, one card each */
.sala-muro-rpeople { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(280px, 26vw, 400px), 1fr)); gap: clamp(14px, 1.4vw, 24px); }
.sala-muro-rperson { margin: 0; padding: clamp(12px, 1.1vw, 18px); border: 1px solid var(--ev-border); border-radius: var(--ev-r-md); background: var(--ev-surface); box-shadow: var(--ev-shadow-2); }
.sala-muro-rphead { display: flex; align-items: center; gap: clamp(10px, 1vw, 16px); margin-bottom: clamp(10px, 1vw, 16px); }
.sala-muro-ravatar { flex: none; display: flex; align-items: center; justify-content: center; width: clamp(48px, 5vw, 76px); height: clamp(48px, 5vw, 76px); border-radius: var(--ev-r-md); border: 2px solid var(--ev-border-strong); background: var(--ev-surface-2); overflow: hidden; }
.sala-muro-ravatar img { width: 100%; height: 100%; object-fit: cover; }
.sala-muro-ravatar .ev-ic { width: 44%; height: 44%; color: var(--ev-text-3); }
.sala-muro-rpinfo { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sala-muro-rpname { color: var(--ev-text); font: 700 clamp(15px, 1.4vw, 21px)/1.15 var(--ev-font-ui); overflow-wrap: anywhere; }
.sala-muro-rpcount { color: var(--ev-text-3); font: 500 clamp(11px, 1vw, 14px)/1.2 var(--ev-font-mono); }
.sala-muro-rpcap { margin: clamp(6px, 0.6vw, 10px) 0 0; color: var(--ev-text-3); font: 500 clamp(12px, 1.1vw, 15px)/1.3 var(--ev-font-ui); }
/* the crops of Sin etiqueta and inside a group: the Fotos tile, sized big for the wall (the colours stay the Fotos ones) */
.sala-muro-rgrid { display: flex; flex-wrap: wrap; gap: clamp(8px, 0.9vw, 14px); }
.sala-muro-rostros .osint-crop.sala-muro-rtile { width: auto; height: auto; gap: 0; overflow: visible; }
.sala-muro-rostros .osint-crop.sala-muro-rtile .img { width: clamp(72px, 7vw, 116px); height: clamp(72px, 7vw, 116px); border-radius: var(--ev-r-md); background: var(--ev-surface-2); cursor: default; }
.sala-muro-rostros .osint-crop.sala-muro-rtile .img img { width: 100%; height: 100%; border-radius: calc(var(--ev-r-md) - 2px); object-fit: cover; }

/* feat/muro-red-escenario-vivo: the Red board frames the LIVE stage of the Grafo view. The wall's full screen is the body of the workspace
   ([data-osint-stage-wrap]); on Red the view of the case (the stage's box) is pushed under the band and the tabs by --muro-top (their height,
   index.html salaMuroTop), the wall reaches back up over that gap, and its board is a transparent frame the pointer goes through, so the
   stage, its toolbar, its counters, its legend, its time cursor and its lens draw in the board area exactly as in the Grafo view. */
.ws-body:has(.ws-sala.is-muro-red) > .ws-view { margin-top: var(--muro-top, 0px); overflow: visible; }
.ws-sala.is-muro.is-muro-red { top: calc(-1 * var(--muro-top, 0px)); background: transparent; pointer-events: none; }
.ws-sala.is-muro.is-muro-red > .sala-muro-band, .ws-sala.is-muro.is-muro-red > .sala-muro-tabs { pointer-events: auto; }
.ws-sala.is-muro.is-muro-red > .sala-muro-board { background: transparent; }
/* the Ficha of a selection floats beside the stage under the band, as in the stage's own full screen; on the other boards the wall covers
   the stage, and its floating Ficha with it, as before */
.ws-body:has(.ws-sala.is-muro-red) > .osint-ficha.float { top: calc(var(--muro-top, 0px) + 64px); max-height: calc(100% - var(--muro-top, 0px) - 140px); }
.ws-body:has(.ws-sala.is-muro:not(.is-muro-red)) > .osint-ficha.float { display: none; }
/* on Red the band and the tabs step down to a compact strip (the same content, smaller), so the stage gets the room of the wall */
.ws-sala.is-muro-red > .sala-muro-band { padding-top: clamp(8px, 0.8vw, 12px); padding-bottom: clamp(8px, 0.8vw, 12px); gap: 8px 24px; }
.ws-sala.is-muro-red .sala-muro-subject { gap: clamp(10px, 1vw, 16px); }
.ws-sala.is-muro-red .sala-muro-face { width: clamp(40px, 3.6vw, 56px); height: clamp(40px, 3.6vw, 56px); }
.ws-sala.is-muro-red .sala-muro-names { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.ws-sala.is-muro-red .sala-muro-eyebrow { flex-basis: 100%; }
.ws-sala.is-muro-red .sala-muro-name { font-size: clamp(20px, 2vw, 30px); }
.ws-sala.is-muro-red .sala-muro-verdict { align-self: center; padding: 4px 12px; font-size: clamp(12px, 1vw, 15px); }
.ws-sala.is-muro-red .sala-muro-meta { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
.ws-sala.is-muro-red .sala-muro-exit { height: 38px; }
.ws-sala.is-muro-red > .sala-muro-tabs { padding-top: clamp(6px, 0.6vw, 10px); padding-bottom: clamp(6px, 0.6vw, 10px); }
.ws-sala.is-muro-red .sala-muro-tab { height: clamp(36px, 3.4vh, 46px); }
/* the bar of the Red board in the tab row: the caption of the graph and the switches Descartados and Cursor de tiempo */
.sala-muro-redbar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px clamp(10px, 1vw, 18px); }
.sala-muro-redcap { color: var(--ev-text); font: 700 clamp(15px, 1.4vw, 20px)/1.1 var(--ev-font-ui); }
.sala-muro-switch { font-size: clamp(13px, 1.1vw, 16px); color: var(--ev-text-2); }
/* 2026-10-15 (docs/interacciones 8.6, I11): the side column "Interactúan más (90 días)" of the Red board, floating over the left of the live
   stage between its toolbar and its counters; the only part of the transparent board the pointer reaches */
.sala-muro-board[data-board="red"] { position: relative; }
.sala-muro-redtop { position: absolute; left: 14px; top: 64px; z-index: 9; width: min(320px, calc(100% - 28px)); max-height: calc(100% - 140px); overflow: auto;
  pointer-events: auto; padding: 10px 12px; border: 1px solid var(--ev-border); border-radius: 12px; background: var(--glass); backdrop-filter: blur(8px); box-shadow: var(--shadow-float); }
.sala-muro-redtop-title { margin: 0 0 6px; color: var(--ev-text); font: 700 clamp(13px, 1.1vw, 16px)/1.2 var(--ev-font-ui); }
.sala-muro-redtop-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sala-muro-redtop-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 4px 6px; border-radius: 8px; }
.sala-muro-redtop-row.is-link { cursor: pointer; }
.sala-muro-redtop-row.is-link:hover, .sala-muro-redtop-row.is-link:focus-visible { background: var(--ev-surface-2, var(--ev-surface)); }
.sala-muro-redtop-name { color: var(--ev-text); font-weight: 600; }
.sala-muro-redtop-net { color: var(--ev-text-2); font-size: 12px; }
.sala-muro-redtop-row > .so-chips { flex-basis: 100%; }

/* the Zonas board: the SAME live, pannable, zoomable maps the app draws (the heat of the activity, the Sectores map), big for the wall,
   each with its legend and the tile attribution Leaflet shows */
.sala-muro-zonas { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(320px, 42vw, 640px), 1fr)); align-content: start; gap: clamp(16px, 1.8vw, 30px); }
.sala-muro-znote { grid-column: 1 / -1; margin: 0; padding: clamp(20px, 3vh, 60px) 0; text-align: center; color: var(--ev-text-2); font: 500 clamp(15px, 1.5vw, 22px)/1.4 var(--ev-font-ui); }
/* a card: its title, the live map (pannable, zoomable), and the legend under it */
.sala-muro-zcard { margin: 0; display: flex; flex-direction: column; min-height: 0; }
.sala-muro-zcardhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: clamp(8px, 0.8vw, 14px); }
.sala-muro-zhead { color: var(--ev-text); font: 700 clamp(16px, 1.5vw, 22px)/1.2 var(--ev-font-ui); }
.sala-muro-zsub { color: var(--ev-text-2); font: 500 clamp(13px, 1.2vw, 17px)/1.3 var(--ev-font-ui); }
/* the live heat map (osintMapaCalor.render draws Leaflet into this box); Leaflet fills it absolutely, so the box carries an explicit height */
.sala-muro-zmaplive { position: relative; flex: none; height: clamp(300px, 52vh, 620px); border: 1px solid var(--ev-border); border-radius: var(--ev-r-md); overflow: hidden; background: var(--ev-surface-2); }
.sala-muro-zmaplive .leaflet-container { position: absolute; inset: 0; height: 100%; width: 100%; background: var(--ev-surface-2); }
/* the live Sectores map (R.room.map.build fills this slot with the room's own .so-map) sized big for the wall; the selector outweighs the
   room theme's own .so-map height (sala-tema.css) */
.sala-muro-zonas .sala-muro-zslot .so-map { min-height: clamp(300px, 52vh, 620px); }
.sala-muro-zonas .map-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 6px 0 2px; padding: 0; }
.sala-muro-zonas .map-legend li { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--ev-text-2); font: 500 clamp(12px, 1.1vw, 15px)/1.4 var(--ev-font-ui); }
.sala-muro-zonas .map-key { display: inline-block; flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--muro-legend-halo); box-shadow: 0 0 0 1px var(--muro-legend-ring); }
.sala-muro-zonas .map-key.k-ring, .sala-muro-zonas .map-key.k-dash { background: var(--muro-legend-halo); border: 2.5px solid currentColor; box-shadow: none; }
.sala-muro-zonas .map-key.k-dash { border-style: dashed; }
.sala-muro-zonas .map-key.k-area { width: 16px; height: 16px; border: 2px dashed currentColor; box-shadow: none; background: transparent; }
.sala-muro-zonas .map-key.k-line { width: 18px; height: 0; border: 0; border-top: 3px solid currentColor; border-radius: 0; box-shadow: none; }
.sala-muro-zonas .map-key.k-heat { width: 48px; height: 10px; border-radius: 5px; border: 0; box-shadow: none; background: var(--muro-legend-heat); }
/* the picker of screens and parts */
.ev-win-pick { max-height: calc(100vh - 80px); overflow: auto; }
.wp-sec { padding: 4px 14px 8px; }
.wp-h { margin: 8px 0 6px; color: var(--ev-text-3); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.wp-screen { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--ev-text); font-size: 13px; }
.wp-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 8px; padding: 3px 0; }
.wp-name { color: var(--ev-text); font-size: 13px; }
.wp-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--ev-border); }
/* a satellite that lost the main window says so over the top edge */
.ev-win-banner { position: fixed; top: 0; left: 0; right: 0; z-index: var(--ev-z-toast); padding: 8px 16px; background: var(--ev-surface-2); border-bottom: 1px solid var(--ev-border-strong); color: var(--ev-text); font-size: 12.5px; text-align: center; }
/* the main window while the lower panel lives in a satellite: it is not drawn twice */
html[data-detached~="dock"] .ws-dock { display: none; }
/* the button Desacoplar of the lateral panel sits at the top of it, like a link */
.lat-win { padding-bottom: 0; }

/* S09 (docs/integracion-plataforma): the drawer Base de conocimiento (K): the dot and the date of the facets, the tabs, Panorama's totals,
   type tiles and sources, Buscar's cards (the rows of Buscar, srch-*), its too-broad panel and pager */
.bs-status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ev-text-2); }
.bs-status-txt { flex: 1; min-width: 0; }
.bs-row { display: flex; align-items: center; gap: 10px; }
.bs-tabs { align-self: flex-start; }
.bs-totals { margin: 0; color: var(--ev-text); font-size: 15px; font-weight: 600; }
.bs-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.bs-tile { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-sm); background: var(--ev-surface); color: var(--ev-text); font: inherit; text-align: left; cursor: pointer; }
.bs-tile:hover { border-color: var(--ev-border-strong); background: var(--row-hover); }
.bs-tile > span:first-child { grid-row: 1 / 3; }
.bs-tile-n { font: 600 13px/1.2 var(--ev-font-mono); }
.bs-tile-l { min-width: 0; overflow-wrap: anywhere; color: var(--ev-text-2); font-size: 11.5px; line-height: 1.25; }
.bs-sources { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bs-sources li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; font-size: 12.5px; }
.bs-sources .wsd-hint { grid-column: 1 / 3; }
.bs-src-name { min-width: 0; overflow: hidden; color: var(--ev-text); text-overflow: ellipsis; white-space: nowrap; }
.bs-src-n, .bs-n { color: var(--ev-text-3); font: 500 11.5px/1.5 var(--ev-font-mono); }
.bs-n { margin-left: 6px; }
.bs-broad { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; font-size: 13px; }
.bs-broad p { margin: 0; color: var(--ev-text-2); }
.bs-tag { flex: none; color: var(--ev-brand); font-size: 11.5px; }
.bs-hit:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: -2px; }
.bs-pager { display: flex; align-items: center; justify-content: center; gap: 10px; font: 500 12.5px/1 var(--ev-font-mono); color: var(--ev-text-2); }
.bs-entity-name { margin: 0; color: var(--ev-text); font-size: 15px; font-weight: 600; }
/* S10: the card of an entity (its actions, its three parts, the assertions with their origin row), the candidates of the Ficha's section
   "En la base de conocimiento", the Registro of a relation of the base and the level word of a confidence */
.bs-acts { flex-wrap: wrap; }
.bs-part { display: flex; flex-direction: column; gap: 8px; }
.bs-facts, .bs-cands { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bs-fact { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-sm); font-size: 12.5px; }
.bs-cands li { font-size: 12.5px; }
.fx-record { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.fx-record-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--ev-text-2); font: 500 12px/1.4 var(--ev-font-ui); cursor: pointer; }
.fx-record-toggle[aria-expanded="true"] .ev-ic { transform: rotate(180deg); }
.fx-record > .fx-props, .fx-record > .ev-btn, .fx-record > .fx-hint { flex-basis: 100%; }
.fx-conf .lvl { font: 500 10.5px/1 var(--ev-font-ui); color: var(--ev-text-3); }
/* S11: the path the base found between two datums, lit on the stage until the next selection (a halo on its datums, the accent of the
   brand on its relations), and the strip over the stage while an expansion or a path search of the base runs (the strip of a search on
   a datum, with the brand's accent) */
.g-leaf.is-path .g-disc-wrap::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--ev-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ev-brand) 22%, transparent); pointer-events: none; }
.g-leaf.is-path .g-label .name { font-weight: 600; }
.g-edge.is-path { stroke: var(--ev-brand); }
.osint-pivot-banner.is-base { border-left-color: var(--ev-brand); }
/* S15 (docs/integracion-plataforma, C-41): manual merges. The pill of a node drawn for a merge (top right of its disc, the corner the
   other marks leave free), a node chosen in the pick mode, the pick bar over the stage, the duplicates chip in the legend, the dialog's
   cards and warning, the Ficha section and the selection column of the Tabla. */
.osint-merged-pill { position: absolute; right: -7px; top: -7px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; border: 1.5px solid var(--ev-stage); background: var(--ev-info); color: var(--ev-on-brand); font: 700 9.5px/13px var(--ev-font-ui); text-align: center; pointer-events: none; }
.g-leaf.is-merge-picked .g-disc { box-shadow: 0 0 0 3px var(--ev-info); }
.fu-pick { position: absolute; left: 50%; top: 58px; z-index: 10; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; box-sizing: border-box; max-width: calc(100% - 24px); padding: 6px 8px 6px 12px; border: 1px solid var(--ev-border); border-radius: 10px; background: var(--ev-surface); box-shadow: var(--ev-shadow-2); color: var(--ev-text); font-size: 12.5px; }
.fu-pick > .ev-ic { width: 15px; height: 15px; color: var(--ev-info); }
.fu-pick-n { color: var(--ev-text-2); font-variant-numeric: tabular-nums; }
.fu-dupes { display: inline-flex; align-items: center; gap: 6px; margin: 0 8px 8px; padding: 4px 10px; border: 1px solid var(--ev-doubt); border-radius: 999px; background: var(--ev-doubt-soft); color: var(--ev-doubt); font: 600 11.5px/1.4 var(--ev-font-ui); cursor: pointer; }
.fu-dupes .ev-ic { width: 13px; height: 13px; }
.osint-dialog[data-dialog="fusion"] { width: min(560px, 100%); }
.fu-dialog { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.fu-warn { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--ev-doubt); border-radius: 8px; background: var(--ev-doubt-soft); color: var(--ev-doubt); }
.fu-warn .ev-ic { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.fu-cards { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.fu-cards legend { margin-bottom: 6px; padding: 0; font-size: 11.5px; font-weight: 600; color: var(--ev-niebla-300); }
.fu-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--ev-border-strong); border-radius: 10px; cursor: pointer; }
.fu-card.is-on { border-color: var(--ev-info); background: var(--ev-info-soft); }
.fu-card input { flex: none; margin: 0; }
.fu-card-ic .ev-ic { width: 18px; height: 18px; }
.fu-card-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.fu-card-txt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fu-card-meta, .fu-card-attrs { font-size: 11.5px; color: var(--ev-niebla-300); overflow-wrap: anywhere; }
.fu-keep { flex: none; font-size: 11px; font-weight: 600; color: var(--ev-info); }
.fu-reason { min-height: 52px; resize: vertical; }
.fu-reversible { font-size: 12px; color: var(--ev-niebla-300); }
.fu-members { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 8px; padding: 0; list-style: none; }
.fu-member { display: flex; align-items: center; gap: 8px; }
.fu-member-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.fu-member-meta { font-size: 11.5px; color: var(--ev-text-2); }
.fu-stays { font-size: 11px; font-weight: 600; color: var(--ev-info); }
.tbl-c-pick { width: 34px; text-align: center; }
.tbl-merge { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; }
.tbl-merge .tbl-why { min-width: 0; max-width: 240px; margin-left: 0; overflow: hidden; color: var(--ev-text-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.tbl-merged { align-self: flex-start; padding: 0 6px; border-radius: 999px; background: var(--ev-info-soft); color: var(--ev-info); font-size: 10.5px; font-weight: 600; line-height: 16px; white-space: nowrap; }

/* S12 (docs/integracion-plataforma, especificacion.md 6.4): the Camino view (camino-saltos.js draws its cards; index.html caminoVals), the
   banner of the datums picked for it and their mark on the stage */
.cm-view { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--ev-surface); color: var(--ev-text); }
.cm-tools { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--ev-border); }
.cm-title { min-width: 0; max-width: 52ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cm-grow { flex: 1 1 auto; }
.cm-zoom { display: inline-flex; align-items: center; gap: 2px; }
.cm-zoom-n { min-width: 5ch; text-align: center; font: 12px var(--ev-font-mono); color: var(--ev-text-2); }
.cm-report { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ev-text-2); cursor: pointer; }
.cm-note { font-size: 12.5px; color: var(--ev-text-2); }
.cm-cut { flex: none; margin: 6px 16px 0; }
.cm-wait { margin: 16px; }
.cm-empty { margin: 48px auto; max-width: 440px; }
.cm-scroll { flex: 1 1 auto; min-height: 120px; overflow: auto; padding: 16px; cursor: grab; }
.cm-scroll[hidden] { display: none; }
.cm-scroll:active { cursor: grabbing; }
.cm-board { margin: 0 auto; }
.cm-board > svg { display: block; width: 100%; height: auto; overflow: visible; }
.cm-edge { fill: none; stroke: var(--ev-border-strong); stroke-width: 1.4; }
.cm-edge.is-step { stroke: var(--ev-brand); stroke-width: 2.2; }
.cm-card { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--ev-border-strong); border-radius: var(--ev-r-md); background: var(--ev-surface-2); color: var(--ev-text); font: 12px/1.4 var(--ev-font-ui); overflow: hidden; cursor: pointer; }
.cm-card:hover { border-color: var(--ev-brand); }
.cm-card:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: 2px; }
.cm-card.is-origin, .cm-card.is-target { border: 2px solid var(--ev-brand); }
.cm-card.is-subject { background: var(--ev-brand-soft); }
.cm-card-type { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--ev-text-3); text-transform: uppercase; letter-spacing: var(--ev-tracking-caps); }
.cm-card-type .ev-ic { width: 13px; height: 13px; }
.cm-card-lock { margin-left: auto; display: inline-flex; color: var(--ev-bad); }
.cm-card-name { font-weight: 600; overflow-wrap: anywhere; }
.cm-card-id { font: 11px/1.3 var(--ev-font-mono); color: var(--ev-text-2); word-break: break-all; }
.cm-narr { flex: none; max-height: 42%; overflow: auto; padding: 8px 16px 12px; border-top: 1px solid var(--ev-border); }
.cm-narr-h { margin: 4px 0 8px; font-size: 11.5px; font-weight: 600; color: var(--ev-text-2); text-transform: uppercase; letter-spacing: var(--ev-tracking-caps); }
.cm-steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cm-step { display: flex; align-items: flex-start; gap: 8px; }
.cm-step p { flex: 1 1 auto; margin: 0; font-size: 13px; line-height: 1.5; }
.cm-step.is-provisional p { color: var(--ev-text-2); }
.cm-banner { top: auto; bottom: 12px; border: 1px solid var(--ev-border-strong); background: var(--ev-surface-2); color: var(--ev-text); }
.g-leaf.is-hop-picked .g-disc-wrap { border-radius: 50%; outline: 2px dashed var(--ev-info); outline-offset: 5px; }
/* S17 (docs/integracion-plataforma, especificacion.md 6.9; C-77, C-07): Actualizar desde la base under the dot, the count of the arrivals
   not seen beside it, the arrivals after the last visit in Novedades, and the mark of a relation the base stopped serving in the Ficha */
.bs-badge { flex: none; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: var(--ev-r-pill); background: var(--ev-info); color: var(--ev-on-brand); font: 700 10.5px/18px var(--ev-font-ui); text-align: center; }
.bs-refresh { flex-wrap: wrap; }
.bs-nov.is-new { box-shadow: inset 3px 0 0 var(--ev-info); }
.bs-nov .srch-meta { flex-wrap: wrap; }
.bs-nov .srch-stats { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.fx-gone { margin-left: 6px; padding: 0 6px; border-radius: var(--ev-r-pill); background: var(--ev-doubt-soft); color: var(--ev-doubt); font: 600 10.5px/18px var(--ev-font-ui); }
/* S16 (docs/integracion-plataforma 6.7): the relations of the lateral panel (the step chosen, the kinds of relation), the Exportar row
   of "Solo lo confirmado", and the days left and the way back of a case in the papelera */
/* B21: 32 px high like every control outside the stage (the size rule of the accessibility pass, accesibilidad.py hit_targets) */
.lat-step { height: 32px; padding: 0 9px; }
.lat-step.is-on { border-color: var(--ev-brand); color: var(--ev-brand); }
.lat-kinds { max-height: 168px; margin-top: 2px; overflow: auto; }
.lat-kind { height: 32px; padding: 0 9px; font-size: 12px; }
.ev-trash-left { color: var(--ev-doubt); font-size: 11.5px; }
.ev-trash-acts { display: flex; flex: 0 0 auto; gap: 6px; }
.ev-trash-err { margin: 2px 0 0; color: var(--ev-bad); font-size: 11.5px; }
/* 2026-10-13 (docs/descubrimiento 8, D09): the chip of a case whose search was incomplete, and "Qué no se buscó" in the Ficha */
.ev-incomplete { display: inline-flex; align-items: center; height: 22px; margin-left: 6px; padding: 0 8px; border-radius: var(--ev-r-pill); background: var(--ev-doubt-soft); color: var(--ev-doubt); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.cv-rows { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.cv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 8px; border: 1px solid var(--ev-border); border-radius: 8px; background: var(--ev-surface); }
.cv-label { font: 600 12.5px/1.3 var(--ev-font-ui); }
.cv-why { flex: 1 1 160px; min-width: 0; color: var(--ev-text-2); font-size: 11.5px; line-height: 1.35; overflow-wrap: anywhere; }
.cv-at { color: var(--ev-text-2); font-size: 11px; white-space: nowrap; }
/* 2026-10-22: the networks whose candidates came from the web search, and how many of them are not checked on the network */
.cv-vias { margin-top: 6px; }
.cv-via { flex: 1 1 120px; min-width: 0; color: var(--ev-text-2); font-size: 11.5px; }
.cv-unchecked { color: var(--ev-text-3, var(--ev-text-2)); font-size: 11px; white-space: nowrap; }
/* 2026-10-13 (docs/descubrimiento 6.2, 10; D12): Revisar candidatos under "Qué no se buscó"; its drawer reuses the cards of the confirmation */
.cv-review { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; padding: 6px 8px; border: 1px dashed var(--ev-border-strong); border-radius: 8px; background: var(--ev-surface); }
.tool-revisar .ck-dc { flex: none; }

/* feat/portada-del-caso: the presentation cover of a case (#/caso/:id/portada). A read-only, projector-ready view in the app's dark operativo
   theme, mounted full in the main area as the report is; "Presentar" fills the browser's screen (the .por root carries its own background so
   it reads detached). Its design tokens come from tokens-ev.css by reference; nothing here edits that file. A block with no data is omitted by
   the view model (por.has.*), so there is no empty frame. */
.ev-app > .main.is-portada { display: block; overflow: auto; }
.ev-app > .main.is-portada > * { min-height: 0; }
.por { display: block; min-height: 100%; background: var(--ev-bg); color: var(--ev-text); font-family: var(--ev-font-ui); line-height: var(--ev-lh); }
.por:fullscreen { overflow: auto; }
.por-top { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 28px; border-bottom: 1px solid var(--ev-border); background: var(--ev-surface); }
.por-mark { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; flex: 1 1 auto; min-width: 0; }
.por-res { padding: 3px 10px; border: 1px solid var(--ev-bad); border-radius: 999px; color: var(--ev-bad); font: 600 10.5px/1 var(--ev-font-mono); letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.por-code { color: var(--ev-text-2); font: 500 13px/1 var(--ev-font-mono); }
.por-when { color: var(--ev-text-3); font: 400 12px/1 var(--ev-font-mono); }
.por-top-actions { display: flex; flex: none; align-items: center; gap: 8px; }
.por-body { display: flex; flex-direction: column; gap: 22px; min-height: 0; overflow: visible; padding: 28px clamp(24px, 4vw, 56px) 36px; }
.por-body > * { width: 100%; max-width: 1180px; margin-inline: auto; }
.por-eyebrow { color: var(--ev-text-3); font-size: 11px; font-weight: 600; letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.por-h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--ev-text-2); font: 600 12px/1.3 var(--ev-font-ui); letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.por-count { padding: 1px 7px; border-radius: 999px; background: var(--ev-surface-3); color: var(--ev-text-2); font: 600 11px/1.6 var(--ev-font-mono); }

/* the subject, large: the confirmed face, the name, the alias, the identity verdict, the profile and the key identifiers in full */
.por-subject { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 36px); align-items: flex-start; }
.por-face-main { flex: none; }
.por-face-main img { display: block; width: clamp(120px, 15vw, 188px); height: clamp(120px, 15vw, 188px); object-fit: cover; border-radius: var(--ev-r-md); border: 2px solid var(--ev-ok); box-shadow: var(--ev-shadow-2); background: var(--ev-surface-2); }
.por-subject-main { flex: 1 1 320px; min-width: 0; }
.por-name { margin: 0; color: var(--ev-text); font: 700 clamp(26px, 4vw, 44px)/1.08 var(--ev-font-ui); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.por-aka { margin: 8px 0 0; color: var(--ev-text-2); font-size: 15px; }
.por-aka .por-eyebrow { margin-right: 6px; }
.por-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.por-id { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font: 600 12.5px/1 var(--ev-font-ui); letter-spacing: 0.02em; }
.por-id.v-confirmed { background: var(--ev-ok-soft); color: var(--ev-ok); }
.por-id.v-doubt { background: var(--ev-doubt-soft); color: var(--ev-doubt); }
.por-id.v-discarded { background: var(--ev-bad-soft); color: var(--ev-bad); }
.por-id.v-unreviewed { border: 1px dashed var(--ev-border-strong); color: var(--ev-text-3); }
.por-chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--ev-border-strong); background: var(--ev-surface-2); color: var(--ev-text-2); font: 500 12.5px/1 var(--ev-font-ui); }
.por-ident { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 22px; margin: 20px 0 0; }
.por-ident > div { min-width: 0; padding-bottom: 8px; border-bottom: 1px solid var(--ev-border); }
.por-ident dt { color: var(--ev-text-3); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; }
.por-ident dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; color: var(--ev-text); font-size: 16px; overflow-wrap: anywhere; }
.por-id-val { font-weight: 600; }
.por-sens { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border: 1px solid var(--ev-doubt); border-radius: 5px; color: var(--ev-doubt); font: 600 10px/1.5 var(--ev-font-ui); letter-spacing: 0.03em; text-transform: uppercase; }
.por-sens .ev-ic { width: 12px; height: 12px; }

/* the stat row: six headline numbers */
.por-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.por-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 14px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-md); background: var(--ev-surface); text-align: center; }
.por-stat-n { color: var(--ev-text); font: 700 clamp(24px, 3vw, 34px)/1 var(--ev-font-mono); }
.por-stat-l { color: var(--ev-text-3); font-size: 11.5px; letter-spacing: 0.02em; text-transform: uppercase; }

/* the map (big) and the top findings, side by side on a wide screen */
.por-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(18px, 2.5vw, 30px); align-items: start; }
.por-map { margin: 0; }
.por-map-img { display: block; width: 100%; height: auto; border-radius: var(--ev-r-md); border: 1px solid var(--ev-border); background: var(--ev-surface-2); }
.por-map-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 10px; }
.por-map-title { color: var(--ev-text); font-weight: 600; font-size: 14px; }
.por-map-sub { color: var(--ev-text-3); font-size: 12.5px; }
.por-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; width: 100%; margin: 6px 0 0; padding: 0; list-style: none; }
.por-legend li { display: inline-flex; align-items: center; gap: 7px; color: var(--ev-text-2); font-size: 12px; }
.por-legend li::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--por-leg, var(--ev-text-3)); }
.por-leg-ring::before { background: transparent; border: 2px solid var(--por-leg, var(--ev-text-3)); }
.por-leg-area::before { border-radius: 3px; background: color-mix(in srgb, var(--por-leg, var(--ev-text-3)) 30%, transparent); border: 1px solid var(--por-leg, var(--ev-text-3)); }
.por-leg-dash::before { background: transparent; border: 2px dashed var(--por-leg, var(--ev-text-3)); }
.por-leg-heat::before { background: linear-gradient(90deg, blue, cyan, lime, yellow, red); }
.por-attrib { width: 100%; color: var(--ev-text-3); font: 400 10.5px/1.4 var(--ev-font-mono); }

.por-findings { min-width: 0; }
.por-find-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.por-find { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 10px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--ev-border); }
.por-find:last-child { border-bottom: 0; }
.por-fv { grid-row: 1 / span 2; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--ev-neutral); }
.por-fv.v-confirmed { background: var(--ev-ok); }
.por-fv.v-doubt { background: var(--ev-doubt); }
.por-fv.v-unreviewed { background: transparent; border: 1.5px dashed var(--ev-text-3); }
.por-find-t { margin: 0; color: var(--ev-text); font-size: 15.5px; line-height: 1.4; }
.por-src { margin-top: 3px; color: var(--ev-brand); font: 400 12px/1.4 var(--ev-font-mono); text-decoration: none; overflow-wrap: anywhere; }
.por-src:hover, .por-src:focus-visible { text-decoration: underline; }
.por-src-plain { color: var(--ev-text-3); }

/* the face strip: the subject's confirmed face album */
.por-face-row { display: flex; flex-wrap: wrap; gap: 10px; }
.por-face-row img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: var(--ev-r-sm); border: 2px solid var(--ev-ok); background: var(--ev-surface-2); }

/* the last trail */
.por-trail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 14px 16px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-md); background: var(--ev-surface); }
.por-trail-v { color: var(--ev-text); font-size: 15px; font-weight: 500; }
.por-wait { flex: 1 1 auto; grid-row: 2; }

@media (max-width: 900px) {
  .por-grid { grid-template-columns: minmax(0, 1fr); }
  .por-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .por-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .por-body { padding: 20px 16px 28px; }
}

/* 2026-10-15 (docs/interacciones I10): the chips of an interaction (an arrow says who did it: in, the counterpart; out, the subject), the
   block of Con quién and the view Interacciones (its filters, its sortable table and the open rows of each counterpart) */
.iv-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.iv-chip.is-in::before { content: "\2190\00a0"; }
.iv-chip.is-out::before { content: "\2192\00a0"; }
.iv-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 0 0 12px; }
.iv-f { display: inline-flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--ev-text-2); }
.iv-f.iv-check { flex-direction: row; align-items: center; gap: 6px; }
.iv-search { min-width: 180px; padding: 4px 8px; border: 1px solid var(--ev-border); border-radius: 6px; background: var(--ev-surface); color: var(--ev-text); }
.iv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.iv-table th, .iv-table td { padding: 6px 8px; border-bottom: 1px solid var(--ev-border); text-align: left; vertical-align: top; }
.iv-sort { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--ev-text); cursor: pointer; }
.iv-table th[aria-sort="ascending"] .iv-sort::after { content: "\00a0\2191"; }
.iv-table th[aria-sort="descending"] .iv-sort::after { content: "\00a0\2193"; }
.iv-band { font-weight: 600; margin-right: 6px; }
.iv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.iv-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.iv-what { font-weight: 600; color: var(--ev-text-2); }
.iv-quote { color: var(--ev-text); }
.iv-unconfirmed { color: var(--ev-doubt); font-weight: 600; }
.iv-cover { margin-top: 14px; }
@media (max-width: 560px) {
  .iv-table th:nth-child(5), .iv-table th:nth-child(6), .iv-table td:nth-child(5), .iv-table td:nth-child(6) { display: none; }
}

/* ------------------------------------------------------------ docs/tatuajes 5.4: the tattoos of the case's photos
   The Fotos drawer's section Tatuajes reuses the crops of Sin etiqueta (.osint-crop.loose: green solid confirmed, dashed yellow proposed,
   neutral otherwise); the comparison sets the tattoo on the left and its candidates on the right. The photo modal draws one box per tattoo,
   dashed --ev-doubt while proposed and solid --ev-ok once confirmed. Tokens only. */
.osint-tattoo.is-discarded .img { border-style: dotted; border-color: var(--ev-border); }
.osint-tattoo.is-discarded .img img { filter: grayscale(1); }
.osint-tattoo.is-open .img { outline: 2px solid var(--ev-focus); outline-offset: 2px; }
.osint-tattoo-grid { margin-top: 6px; }
.osint-tattoo-fold { margin-top: 8px; }
.osint-tattoo-fixed { margin-top: 10px; }
.osint-tattoo-compare { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; margin: 6px 0 12px; padding: 12px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-md); background: var(--ev-surface-2); }
.osint-tattoo-compare .tc-self { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.osint-tattoo-compare .osint-tattoo-self { width: auto; }
.osint-tattoo-compare .osint-tattoo-self .img { width: 128px; height: 128px; cursor: default; }
.osint-tattoo-compare .osint-tattoo-self.other .img { border: 2px solid var(--ev-border-strong); }
.osint-tattoo-compare .tc-tier, .osint-tattoo-compare .tc-src { color: var(--ev-text-2); font-size: 11.5px; line-height: 1.3; }
.osint-tattoo-compare .tc-assigned { padding: 1px 6px; border-radius: var(--ev-r-pill); background: var(--ev-ok-soft); color: var(--ev-ok); font: 600 11px/16px var(--ev-font-ui); }
.osint-tattoo-compare .tc-discarded { padding: 1px 6px; border-radius: var(--ev-r-pill); background: var(--ev-neutral-soft); color: var(--ev-text-2); font: 600 11px/16px var(--ev-font-ui); }
.osint-tattoo-compare .tc-assign { width: 100%; }
.osint-tattoo-compare .tc-assign .ev-select { width: 100%; }
.osint-tattoo-compare .tc-cands { min-width: 0; }
.osint-tattoo-compare .tc-h { margin: 0; color: var(--ev-text); font: 600 12.5px/1.3 var(--ev-font-ui); }
.osint-tattoo-compare .tc-question { margin: 2px 0 8px; color: var(--ev-text-2); font-size: 12px; }
.osint-tattoo-compare .tc-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.osint-tattoo-cand { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 8px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-md); background: var(--ev-surface); }
.osint-tattoo-cand .tc-crop { width: 64px; height: 64px; box-sizing: border-box; border: 2px dashed var(--ev-doubt); border-radius: 10px; overflow: hidden; background: var(--ev-surface-2); }
.osint-tattoo-cand .tc-crop img { display: block; width: 100%; height: 100%; object-fit: cover; }
.osint-tattoo-cand.band-high .tc-crop { border-width: 2px; }
.osint-tattoo-cand.band-review .tc-crop { border-color: color-mix(in srgb, var(--ev-doubt) 60%, var(--ev-border-strong)); }
.osint-tattoo-cand.is-same .tc-crop { border: 3px solid var(--ev-ok); }
.osint-tattoo-cand .tc-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.osint-tattoo-cand .tc-score { display: flex; align-items: baseline; gap: 8px; }
.osint-tattoo-cand .tc-score .pct { color: var(--ev-text); font: 700 14px/1.2 var(--ev-font-mono); }
.osint-tattoo-cand .tc-score .band { color: var(--ev-doubt); font: 600 11px/1.2 var(--ev-font-ui); }
.osint-tattoo-cand.is-same .tc-score .band { color: var(--ev-text-3); }
.osint-tattoo-cand .tc-src { overflow: hidden; color: var(--ev-text-2); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.osint-tattoo-cand .tc-freq { color: var(--ev-text-3); font-size: 11px; }
.osint-tattoo-cand .tc-btns, .osint-tattoo-cand .tc-done { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.osint-tattoo-cand .tc-ok { color: var(--ev-ok); font: 600 11.5px/1.3 var(--ev-font-ui); }
@media (max-width: 560px) { .osint-tattoo-compare { grid-template-columns: minmax(0, 1fr); } }
/* docs/tatuajes 5.4 (T2.3): the boxes of the photo modal (no pointer: the faces stay clickable), the switch beside the photo, the line
   Tatuajes of the Ficha (square crops, green: the analyst gave them that person) and the board of the Muro (the Rostros board's classes) */
.osint-tattoo-box { position: absolute; box-sizing: border-box; border: 2px dashed var(--ev-doubt); border-radius: 6px; pointer-events: none; }
.osint-tattoo-box.confirmed { border: 2px solid var(--ev-ok); }
.osint-tattoo-box .tg-tattoo-tag { position: absolute; left: -2px; bottom: -18px; padding: 0 5px; border-radius: 4px; background: var(--ev-doubt-soft); color: var(--ev-doubt); font: 600 9.5px/15px var(--ev-font-ui); white-space: nowrap; }
.osint-tattoo-box.confirmed .tg-tattoo-tag { background: var(--ev-ok-soft); color: var(--ev-ok); }
.tg-tattoos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }
.fx .osint-tattoo-strip .crop { border-radius: 10px; }
.sala-muro-tatuajes .osint-crop.sala-muro-rtile.loose { height: auto; }
/* docs/tatuajes T3.1: "Ver puntos que coinciden", under its candidate across both columns: the two crops side by side on a stage of the
   drawing's proportions, one line per shared point over them (--ev-info, dots at both ends), the count and the fixed sentence */
.osint-tattoo-cand .tc-explain-btn { align-self: flex-start; margin-top: 2px; }
.osint-tattoo-cand .tc-explain { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--ev-border); }
.osint-tattoo-cand .tc-ex-stage { position: relative; width: 100%; border-radius: var(--ev-r-md); background: var(--ev-surface-2); overflow: hidden; }
.osint-tattoo-cand .tc-ex-crop { position: absolute; display: block; object-fit: fill; border-radius: 4px; }
.osint-tattoo-cand .tc-ex-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.osint-tattoo-cand .tc-ex-lines path { fill: var(--ev-info); stroke: var(--ev-info); stroke-width: 1.2; stroke-opacity: .85; }
.osint-tattoo-cand .tc-ex-count { margin: 0; color: var(--ev-text); font: 600 12px/1.3 var(--ev-font-ui); }
.osint-tattoo-cand .tc-ex-fixed { margin: 0; }
/* docs/tatuajes T3.2: the description on the tattoo's side (label over value, the candidate reading and the analyst's correction as small
   tags), its form to correct zone, motif and text, and the quiet line when it cannot be written now */
.osint-tattoo-compare .tc-desc { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--ev-border); }
.osint-tattoo-compare .tc-desc-rows { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.osint-tattoo-compare .tc-desc-row dt { color: var(--ev-text-3); font: 600 10.5px/1.3 var(--ev-font-ui); }
.osint-tattoo-compare .tc-desc-row dd { margin: 0; color: var(--ev-text); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.osint-tattoo-compare .tc-desc-row.is-empty dd { color: var(--ev-text-3); }
.osint-tattoo-compare .tc-tag { display: inline-block; padding: 0 5px; border-radius: var(--ev-r-pill); background: var(--ev-neutral-soft); color: var(--ev-text-2); font: 600 10px/15px var(--ev-font-ui); }
.osint-tattoo-compare .tc-desc-edit { display: flex; flex-direction: column; gap: 4px; }
.osint-tattoo-compare .tc-desc-edit .ev-input { width: 100%; box-sizing: border-box; }
.osint-tattoo-compare .tc-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.osint-tattoo-compare .tc-quiet { color: var(--ev-text-2); }
/* docs/tatuajes T3.3: the analyst's group signal (its text, the fixed candidate label in --ev-doubt, author and date), its chip on a crop
   of the grid and under the Ficha's crops; the drawing surface of the photo modal (crosshair, above the face boxes) and the box being drawn
   (dashed --ev-info), with its bar beside the switch Mostrar tatuajes */
.osint-tattoo-compare .tc-group { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--ev-border); }
.osint-tattoo-compare .tc-group .ev-input { width: 100%; box-sizing: border-box; }
.osint-tattoo-compare .tc-group-text { margin: 0; color: var(--ev-text); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.osint-tattoo-compare .tc-group-label, .tc-signal-chip { display: inline-block; padding: 1px 6px; border-radius: var(--ev-r-pill); background: var(--ev-doubt-soft); color: var(--ev-doubt); font: 600 10.5px/15px var(--ev-font-ui); }
.osint-crop .img .tc-signal { position: absolute; left: 2px; right: 2px; bottom: 2px; overflow: hidden; padding: 0 1px; border-radius: 5px; background: var(--ev-doubt-soft); color: var(--ev-doubt); font: 600 7.5px/13px var(--ev-font-ui); text-align: center; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
/* the caption of a tattoo marked by hand sits inside its crop (a grid row has room for one line under it); the signal chip goes above it */
.osint-crop .img .tc-manual { position: absolute; left: 2px; right: 2px; bottom: 2px; overflow: hidden; padding: 0 1px; border-radius: 5px; background: color-mix(in srgb, var(--ev-surface) 88%, transparent); color: var(--ev-text-2); font: 600 8px/9px var(--ev-font-ui); text-align: center; pointer-events: none; }
.osint-crop .img:has(.tc-manual) .tc-signal { bottom: 23px; }
.fx .osint-tattoo-strip .tc-signals { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.osint-tattoo-draw { position: absolute; inset: 0; z-index: 3; cursor: crosshair; touch-action: none; }
.osint-tattoo-box.drawing { border: 2px dashed var(--ev-info); background: color-mix(in srgb, var(--ev-info) 12%, transparent); }
.tg-tattoo-draw { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 4px; }
.tg-tattoo-draw .tc-quiet { color: var(--ev-text-2); }
/* docs/tatuajes (F2 review): the tattoo rows of the Fotos legend (square keys: a tattoo box, not a face's circle); the optional
   justification across the top of the comparison */
.osint-face-legend .key.tattoo-proposed { border-radius: 3px; border: 1.5px dashed var(--ev-doubt); }
.osint-face-legend .key.tattoo-confirmed { border-radius: 3px; border: 2px solid var(--ev-ok); }
.osint-tattoo-compare .tc-just { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; }
.osint-tattoo-compare .tc-just .ev-input { width: 100%; box-sizing: border-box; }
/* 2026-10-19 (owner): the Rostros drawer's switch Rostros | Tatuajes and its mode Tatuajes (an uploaded photo against the saved cases'
   tattoos): the photo with a dashed box per tattoo found, the way to mark one by hand, and per tattoo its ranked matches */
.ro-mode { display: inline-flex; align-self: flex-start; gap: 2px; padding: 2px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-pill); background: var(--ev-surface-2); }
.ro-mode-btn { min-height: 28px; padding: 0 14px; border: 0; border-radius: var(--ev-r-pill); background: transparent; color: var(--ev-text-2); font: 600 12.5px/1 var(--ev-font-ui); cursor: pointer; }
.ro-mode-btn:hover { color: var(--ev-text); }
.ro-mode-btn.is-on { background: var(--ev-surface); color: var(--ev-text); box-shadow: 0 0 0 1px var(--ev-border-strong); }
.ro-mode-btn:focus-visible { outline: 2px solid var(--ev-brand); outline-offset: 1px; }
.tu-result { display: flex; flex-direction: column; gap: 10px; }
.tu-stage { display: flex; justify-content: center; padding: 6px; border: 1px solid var(--ev-border); border-radius: 12px; background: var(--ev-surface-2); }
.tu-frame { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.tu-frame img { display: block; max-width: 100%; max-height: 340px; object-fit: contain; border-radius: 8px; }
.tu-box.is-possible { border-style: dotted; }
.tu-item { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--ev-border); }
.tu-item .tc-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.osint-tattoo-cand.band-low .tc-crop { border-color: var(--ev-border-strong); }
.osint-tattoo-cand.band-low .tc-score .band { color: var(--ev-text-3); }
.tu-item .ro-crop { border-radius: 10px; object-fit: cover; }
/* 2026-10-19 (owner): a tattoo in a popup over its whole photo: the photo at the left (every tattoo of it outlined and numbered, the one
   compared thicker; a click on a box compares that one), the comparison at the right in one column; stacked on narrow screens */
.osint-modal.tp-modal { width: min(1240px, 100%); max-height: min(900px, 95vh); }
.tp-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); align-items: start; gap: 18px; padding: 14px 20px; }
.tp-photo { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.tp-photo .ro-mode { align-self: flex-start; }
.tp-stage { display: flex; justify-content: center; width: 100%; padding: 6px; box-sizing: border-box; border: 1px solid var(--ev-border); border-radius: 12px; background: var(--ev-surface-2); }
.tp-frame { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.tp-frame img { display: block; max-width: 100%; max-height: min(70vh, 680px); object-fit: contain; border-radius: 8px; }
.osint-tattoo-box.tp-box { padding: 0; background: transparent; cursor: pointer; pointer-events: auto; font: inherit; }
/* a button: the colours of the box are set here, so no rule for buttons in a modal can recolour it */
.tp-frame .osint-tattoo-box.tp-box { border-style: dashed; border-color: var(--ev-doubt); }
.tp-frame .osint-tattoo-box.tp-box.confirmed { border-style: solid; border-color: var(--ev-ok); }
.tp-frame .osint-tattoo-box.tp-box.neutral { border-style: dashed; border-color: var(--ev-border-strong); }
.osint-tattoo-box.tp-box:disabled { cursor: default; }
.osint-tattoo-box.tp-box.neutral { border: 2px dashed var(--ev-border-strong); }
.osint-tattoo-box.tp-box.neutral .tg-tattoo-tag { background: var(--ev-surface-2); color: var(--ev-text-2); }
.osint-tattoo-box.tp-box.is-discarded { opacity: .55; }
.osint-tattoo-box.tp-box .tg-tattoo-tag { left: -2px; top: -20px; bottom: auto; min-width: 14px; text-align: center; }
.osint-tattoo-box.tp-box.is-selected { border-width: 4px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ev-surface) 70%, transparent), 0 0 0 5px color-mix(in srgb, var(--ev-doubt) 35%, transparent); }
.osint-tattoo-box.tp-box.confirmed.is-selected { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ev-surface) 70%, transparent), 0 0 0 5px color-mix(in srgb, var(--ev-ok) 35%, transparent); }
.osint-tattoo-box.tp-box.is-selected .tg-tattoo-tag { font-size: 11px; line-height: 17px; }
.osint-tattoo-box.tp-box:focus-visible { outline: 2px solid var(--ev-brand); outline-offset: 2px; }
.tp-fallback { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.tp-fallback-crop { width: 160px; height: 160px; border: 2px dashed var(--ev-doubt); border-radius: 12px; object-fit: cover; background: var(--ev-surface-2); }
.tp-side { min-width: 0; }
.tp-side .osint-tattoo-compare.tp-compare { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) { .tp-body { grid-template-columns: minmax(0, 1fr); } .tp-photo { position: static; } }