/* The visual system of the operative situation room (the root class sala-op: #sala of sala.html, and the Sala view of index.html): deep navy ground with a faint
   grid and a vignette, glass panels with a 1 px luminous edge, small uppercase monospaced titles, big figures with a thin accent rule,
   chips that glow in the hue of their network (--gc), luminous dots by age, the hour grid, evidence rows with a left accent bar, the
   selected ring, the pulse of a line that just arrived and the dark map. Linked after sala.css; every rule is scoped under
   .sala-op, the root of the room, so nothing reaches the rest of index.html or the older panes of the sala. The contract for the renderer, with one example per
   class, is docs/sala-de-situacion/estilo.md; docs/sala-de-situacion/estilo-demo.html shows every piece once.

   Rules this file keeps: the colours live only in the palette block below, everything else reads a --sala-* variable (or mixes one
   with transparent); body text is 13 px or more, captions 12 px monospaced; every text colour reads at 4.5:1 or more on the panel
   ground; glow is for edges, icons, dots, marks, chips and the big figures, never for running text. The room is dark by design, so
   the role tokens of the app (--ev-*) are pointed at this palette inside .sala-op: the ev-* classes the renderer reuses (buttons,
   the segmented control, the dots, the verdict chips) read dark even when the analyst chose the light theme. tokens-ev.css itself is
   not touched. */

/* ------------------------------------------------------------ palette and scales */
.sala-op {
  /* ground and glass */
  --sala-bg: #040a14;
  --sala-bg-2: #071222;
  --sala-panel: #0a1628;
  --sala-panel-2: #0e1d33;
  --sala-panel-3: #13253f;
  --sala-glass: rgba(11, 24, 44, 0.78);
  --sala-glass-2: rgba(8, 18, 34, 0.86);
  --sala-line: #1a2e4a;
  --sala-line-2: #25436a;
  --sala-grid: rgba(110, 170, 255, 0.05);
  --sala-shade: rgba(0, 3, 8, 0.62);
  --sala-haze: rgba(40, 120, 220, 0.16);
  /* ink: text 15.9:1, text-2 9.3:1, text-3 6.2:1 on --sala-panel */
  --sala-text: #e8f1fb;
  --sala-text-2: #a9bcd3;
  --sala-text-3: #8399b3;
  /* accents */
  --sala-cyan: #3fd0ff;
  --sala-cyan-ink: #9ee9ff;
  --sala-on-cyan: #03121f;
  --sala-blue: #4c9dff;
  --sala-magenta: #e36bff;
  --sala-amber: #ffb84d;
  --sala-red: #ff6470;
  --sala-green: #3ee49a;
  --sala-green-2: #21b878;
  /* the three ages of a mark: the last 90 days, the last 12 months, older */
  --sala-age-recent: #7af4ff;
  --sala-age-year: #3f8cff;
  --sala-age-old: #5f7896;

  /* type */
  --sala-font: var(--ev-font-ui);
  --sala-mono: var(--ev-font-mono);
  --sala-fs-cap: 12px;
  --sala-fs-body: 13px;
  --sala-fs-row: 13.5px;
  --sala-fs-lead: 17px;
  --sala-fs-figure-sm: 24px;
  --sala-fs-figure: 40px;
  --sala-tracking: 0.09em;

  /* space, radius, motion */
  --sala-sp-1: 4px;
  --sala-sp-2: 8px;
  --sala-sp-3: 12px;
  --sala-sp-4: 16px;
  --sala-sp-5: 24px;
  --sala-sp-6: 32px;
  --sala-r-sm: 4px;
  --sala-r: 8px;
  --sala-r-lg: 12px;
  --sala-hit: 32px;
  --sala-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* the glows, built from the palette */
  --sala-ring: 0 0 0 1px var(--sala-cyan), 0 0 0 4px color-mix(in srgb, var(--sala-cyan) 18%, transparent), 0 0 18px color-mix(in srgb, var(--sala-cyan) 28%, transparent);
  --sala-edge: inset 0 1px 0 color-mix(in srgb, var(--sala-cyan) 10%, transparent), inset 0 0 28px color-mix(in srgb, var(--sala-blue) 6%, transparent);
  --sala-lift: 0 10px 30px color-mix(in srgb, var(--sala-bg) 70%, transparent);

  /* the app's role tokens, pointed at the palette for this dark-only room */
  --ev-bg: var(--sala-bg);
  --ev-surface: var(--sala-panel);
  --ev-surface-2: var(--sala-panel-2);
  --ev-surface-3: var(--sala-panel-3);
  --ev-border: var(--sala-line);
  --ev-border-strong: var(--sala-line-2);
  --ev-text: var(--sala-text);
  --ev-text-2: var(--sala-text-2);
  --ev-text-3: var(--sala-text-3);
  --ev-brand: var(--sala-cyan);
  --ev-brand-hover: var(--sala-cyan-ink);
  --ev-brand-soft: color-mix(in srgb, var(--sala-cyan) 16%, var(--sala-panel));
  --ev-on-brand: var(--sala-on-cyan);
  --ev-focus: var(--sala-cyan);
  --ev-stage: var(--sala-bg-2);
  --ev-stage-grid: var(--sala-grid);
  --ev-ok: var(--sala-green);
  --ev-ok-soft: color-mix(in srgb, var(--sala-green) 16%, var(--sala-panel));
  --ev-doubt: var(--sala-amber);
  --ev-doubt-soft: color-mix(in srgb, var(--sala-amber) 16%, var(--sala-panel));
  --ev-bad: var(--sala-red);
  --ev-bad-soft: color-mix(in srgb, var(--sala-red) 16%, var(--sala-panel));
  --ev-info: var(--sala-blue);
  --ev-info-soft: color-mix(in srgb, var(--sala-blue) 16%, var(--sala-panel));
  --ev-neutral: var(--sala-text-3);
  --ev-neutral-soft: var(--sala-panel-2);
  --ev-shadow-1: 0 1px 2px var(--sala-shade);
  --ev-shadow-2: var(--sala-lift);
  --ev-shadow-3: 0 24px 64px var(--sala-shade);
  --seg-on: color-mix(in srgb, var(--sala-cyan) 16%, var(--sala-panel));
  --row-hover: var(--sala-panel-3);
  --info-ink: var(--sala-blue);

  color-scheme: dark;
  background-color: var(--sala-bg);
  /* the vignette over the ground (under the panels), the light at the top, the faint grid */
  background-image:
    radial-gradient(ellipse at 50% 45%, transparent 52%, var(--sala-shade) 100%),
    radial-gradient(120% 70% at 50% -12%, var(--sala-haze), transparent 62%),
    linear-gradient(var(--sala-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sala-grid) 1px, transparent 1px);
  background-size: auto, auto, 32px 32px, 32px 32px;
  color: var(--sala-text);
  font-family: var(--sala-font);
  font-size: var(--sala-fs-body);
  line-height: 1.45;
}
.sala-op a { color: var(--sala-cyan-ink); }
.sala-op a:hover { color: var(--sala-text); }

/* ------------------------------------------------------------ thin scrollbars */
.sala-op, .sala-op * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--sala-cyan) 30%, var(--sala-panel-2)) transparent; }
.sala-op ::-webkit-scrollbar { width: 8px; height: 8px; }
.sala-op ::-webkit-scrollbar-track { background: transparent; }
.sala-op ::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: color-mix(in srgb, var(--sala-cyan) 30%, var(--sala-panel-2)) padding-box; }
.sala-op ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--sala-cyan) 55%, var(--sala-panel-2)); }
.sala-op ::-webkit-scrollbar-corner { background: transparent; }

/* ------------------------------------------------------------ the bar of the room and the strip (franja) */
.sala-op .sala-bar { position: relative; gap: var(--sala-sp-2) var(--sala-sp-4); padding: var(--sala-sp-2) var(--sala-sp-4); border-bottom: 1px solid var(--sala-line); background: linear-gradient(180deg, var(--sala-glass-2), var(--sala-glass)); backdrop-filter: blur(8px); }
.sala-op .sala-bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sala-cyan) 70%, transparent) 30%, color-mix(in srgb, var(--sala-magenta) 45%, transparent) 70%, transparent); }
.sala-op .sala-brand { color: var(--sala-text); font: 600 13px/1.2 var(--sala-mono); letter-spacing: var(--sala-tracking); text-transform: uppercase; }
.sala-op .sala-mark { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sala-cyan) 55%, transparent)); }
.sala-op .sala-subject { color: var(--sala-text); font-size: 15px; }
.sala-op .sala-code, .sala-op .sala-updated { color: var(--sala-text-3); font: 400 var(--sala-fs-cap)/1.3 var(--sala-mono); }
.sala-op .sala-panes { border-color: var(--sala-line); background: var(--sala-glass-2); }
.sala-op .sala-pane-link { position: relative; height: var(--sala-hit); color: var(--sala-text-2); font-size: var(--sala-fs-body); }
.sala-op .sala-pane-link:hover { color: var(--sala-text); }
.sala-op .sala-pane-link[aria-current="page"] { background: color-mix(in srgb, var(--sala-cyan) 14%, transparent); color: var(--sala-cyan-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sala-cyan) 45%, transparent), 0 0 14px color-mix(in srgb, var(--sala-cyan) 22%, transparent); }
.sala-op .sala-state { color: var(--sala-text-2); font-size: var(--sala-fs-cap); }

/* the strip: two lines across the whole bar, identity first; the identity line opens the identity pane, so it may be a link */
.sala-op .so-strip { display: flex; flex-direction: column; flex: 1 1 100%; gap: var(--sala-sp-1); min-width: 0; padding-top: var(--sala-sp-2); border-top: 1px solid var(--sala-line); }
.sala-op .so-strip-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sala-sp-1) var(--sala-sp-2); min-height: 28px; padding: 2px var(--sala-sp-2); border-radius: var(--sala-r); color: var(--sala-text); font-size: var(--sala-fs-body); text-decoration: none; }
.sala-op a.so-strip-line, .sala-op button.so-strip-line { border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.sala-op a.so-strip-line:hover, .sala-op button.so-strip-line:hover { background: var(--sala-panel-3); color: var(--sala-text); }
.sala-op .so-strip-key { flex: none; min-width: 9.5em; color: var(--sala-text-3); font: 500 var(--sala-fs-cap)/1.2 var(--sala-mono); letter-spacing: var(--sala-tracking); text-transform: uppercase; }
.sala-op .so-strip-text { min-width: 0; color: var(--sala-text-2); }
.sala-op .so-strip-text b, .sala-op .so-strip-text strong { color: var(--sala-text); font-weight: 600; }
/* the way to the identity pane at the end of the identity line: words and an arrow, dotted underline, so the line reads as a link */
.sala-op .so-strip-go { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--sala-cyan-ink); font: 500 var(--sala-fs-cap)/1.2 var(--sala-mono); letter-spacing: var(--sala-tracking); text-transform: uppercase; text-decoration: underline dotted; text-underline-offset: 3px; }
.sala-op .so-strip-go .ev-ic { width: 14px; height: 14px; color: var(--sala-cyan); }
/* the status of the local service: a dot and a word in the bar */
.sala-op .so-health { display: inline-flex; align-items: center; gap: 6px; color: var(--sala-text-2); font: 400 var(--sala-fs-cap)/1.2 var(--sala-mono); white-space: nowrap; }

/* ------------------------------------------------------------ the panel chrome (the shells sala.js builds: section.sala-panel) */
.sala-op .sala-grid { gap: var(--sala-sp-3); padding: var(--sala-sp-3); }
.sala-op .sala-col { gap: var(--sala-sp-3); }
.sala-op .sala-panel { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--sala-cyan) 14%, var(--sala-line)); border-radius: var(--sala-r-lg); background: linear-gradient(180deg, var(--sala-glass), var(--sala-glass-2)); box-shadow: var(--sala-edge), var(--sala-lift); backdrop-filter: blur(8px) saturate(120%); }
/* the luminous edge: a 1 px light along the top, brightest at the left, where the title is */
.sala-op .sala-panel::before { content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sala-cyan) 85%, transparent) 16%, color-mix(in srgb, var(--sala-cyan) 25%, transparent) 62%, transparent); }
.sala-op .sala-panel-head { display: flex; align-items: center; gap: var(--sala-sp-3); min-height: 44px; padding: var(--sala-sp-2) var(--sala-sp-4); border-bottom: 1px solid var(--sala-line); }
.sala-op .sala-panel-title { display: inline-flex; align-items: center; gap: var(--sala-sp-2); margin: 0; color: var(--sala-text); font: 600 var(--sala-fs-cap)/1.2 var(--sala-mono); letter-spacing: var(--sala-tracking); text-transform: uppercase; white-space: nowrap; }
/* the icon slot of a title: an .ev-ic before the words */
.sala-op .sala-panel-title .ev-ic { width: 16px; height: 16px; color: var(--sala-cyan); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sala-cyan) 60%, transparent)); }
/* the status at the right of the head: a short line, a figure or a dot and a word */
.sala-op .sala-panel-sub { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; margin-left: auto; overflow: hidden; color: var(--sala-text-2); font: 400 var(--sala-fs-cap)/1.3 var(--sala-mono); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.sala-op .so-head-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sala-sp-2); margin-left: auto; }
.sala-op .sala-panel-body { position: relative; flex: 1; min-height: 0; overflow: auto; container-type: inline-size; }
.sala-op .so-pad { padding: var(--sala-sp-3) var(--sala-sp-4); }
.sala-op .so-stack { display: flex; flex-direction: column; gap: var(--sala-sp-3); }
/* two parts side by side inside a body (the rows and the face crops; the sector cards and the map); one over the other when narrow */
.sala-op .so-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--sala-sp-3) var(--sala-sp-4); }
.sala-op .so-split.is-start { grid-template-columns: auto minmax(0, 1fr); }
.sala-op .so-split.is-half { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.sala-op .so-aside { display: flex; flex-direction: column; align-items: center; gap: var(--sala-sp-3); }
/* a titled part inside a panel body */
.sala-op .so-section { display: flex; flex-direction: column; gap: var(--sala-sp-2); padding: var(--sala-sp-3) var(--sala-sp-4); }
.sala-op .so-section + .so-section { border-top: 1px solid var(--sala-line); }
.sala-op .so-section-title { display: flex; align-items: center; gap: var(--sala-sp-2); margin: 0; color: var(--sala-text-2); font: 500 var(--sala-fs-cap)/1.2 var(--sala-mono); letter-spacing: var(--sala-tracking); text-transform: uppercase; }
.sala-op .so-section-title .ev-ic { width: 14px; height: 14px; color: var(--sala-cyan); }
.sala-op .so-section-title .so-n { color: var(--sala-text); }
/* the footer line of a panel: what was read, and the clock of the room */
.sala-op .so-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sala-sp-1) var(--sala-sp-3); padding: var(--sala-sp-2) var(--sala-sp-4); border-top: 1px dashed var(--sala-line-2); color: var(--sala-text-3); font: 400 var(--sala-fs-cap)/1.45 var(--sala-mono); }
.sala-op .so-foot .ev-ic { width: 14px; height: 14px; color: var(--sala-text-3); }
.sala-op .so-foot-item { display: inline-flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------ words and figures */
.sala-op .so-mono { font-family: var(--sala-mono); }
.sala-op .so-muted { color: var(--sala-text-2); }
/* "sin dato": the same size as what is known, in the third ink, never hidden */
.sala-op .so-none { color: var(--sala-text-3); font-style: normal; }
.sala-op .so-sep { color: var(--sala-text-3); }
.sala-op .so-n { color: var(--sala-text); font-family: var(--sala-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.sala-op .so-when { color: var(--sala-text-2); font: 400 var(--sala-fs-cap)/1.35 var(--sala-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sala-op .so-coord { display: inline-flex; align-items: center; gap: 2px; color: var(--sala-text); font: 400 var(--sala-fs-body)/1.3 var(--sala-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sala-op .so-coord .ev-icon-btn { width: var(--sala-hit); height: var(--sala-hit); }
.sala-op .so-coord .ev-icon-btn .ev-ic { width: 15px; height: 15px; }

/* the headline: a kicker, the lead line, and the big figure at the right with its accent rule */
.sala-op .so-headline { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--sala-sp-2) var(--sala-sp-5); }
/* the right column of the headline: the big figure, and under it the network chip and the way to the graph */
.sala-op .so-headline-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sala-sp-2); }
.sala-op .so-headline-side .so-chips { justify-content: flex-end; }
.sala-op .so-kicker { display: flex; align-items: center; gap: var(--sala-sp-2); margin: 0 0 var(--sala-sp-1); color: var(--sala-cyan); font: 600 var(--sala-fs-cap)/1.2 var(--sala-mono); letter-spacing: var(--sala-tracking); text-transform: uppercase; }
.sala-op .so-kicker .ev-ic { width: 14px; height: 14px; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sala-cyan) 60%, transparent)); }
.sala-op .so-lead { margin: 0; color: var(--sala-text); font-size: var(--sala-fs-lead); font-weight: 600; line-height: 1.3; }
.sala-op .so-lead-sub { margin: var(--sala-sp-1) 0 0; color: var(--sala-text-2); font-size: var(--sala-fs-body); }
.sala-op .so-figure { --so-accent: var(--sala-cyan); position: relative; display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-bottom: var(--sala-sp-2); text-align: right; }
.sala-op .so-figure-n { color: var(--sala-text); font: 600 var(--sala-fs-figure)/1 var(--sala-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; text-shadow: 0 0 18px color-mix(in srgb, var(--so-accent) 45%, transparent); }
.sala-op .so-figure-unit { color: var(--sala-text-2); font: 500 var(--sala-fs-cap)/1.2 var(--sala-mono); letter-spacing: var(--sala-tracking); text-transform: uppercase; }
.sala-op .so-figure::after { content: ''; position: absolute; right: 0; bottom: 0; width: 48px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--so-accent)); box-shadow: 0 0 10px var(--so-accent); }
.sala-op .so-figure.is-sm .so-figure-n { font-size: var(--sala-fs-figure-sm); }
.sala-op .so-figure.is-start { align-items: flex-start; text-align: left; }
.sala-op .so-figure.is-start::after { right: auto; left: 0; background: linear-gradient(90deg, var(--so-accent), transparent); }
.sala-op .so-figure.is-doubt { --so-accent: var(--sala-amber); }
.sala-op .so-figure.is-bad { --so-accent: var(--sala-red); }
.sala-op .so-figure.is-ok { --so-accent: var(--sala-green); }
/* a line that must be read with the headline (the gap without a place): an icon and a tinted ground, in a tone */
.sala-op .so-alert { --so-accent: var(--sala-amber); display: flex; align-items: center; gap: var(--sala-sp-2); padding: 6px var(--sala-sp-3); border: 1px solid color-mix(in srgb, var(--so-accent) 40%, transparent); border-radius: var(--sala-r); background: color-mix(in srgb, var(--so-accent) 10%, var(--sala-panel)); color: var(--sala-text); font-size: var(--sala-fs-body); }
.sala-op .so-alert .ev-ic { width: 16px; height: 16px; flex: none; color: var(--so-accent); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--so-accent) 60%, transparent)); }
.sala-op .so-alert.is-bad { --so-accent: var(--sala-red); }
.sala-op .so-alert.is-info { --so-accent: var(--sala-blue); }

/* ------------------------------------------------------------ evidence rows: a left accent bar, the icon, the words, the date at the right */
.sala-op .so-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sala-op .so-ev { --so-accent: var(--gc, var(--sala-cyan)); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sala-sp-1) var(--sala-sp-3); min-height: 40px; padding: 6px var(--sala-sp-3) 6px calc(var(--sala-sp-3) + 3px); border: 1px solid color-mix(in srgb, var(--sala-line) 70%, transparent); border-radius: var(--sala-r); background: color-mix(in srgb, var(--sala-panel-2) 82%, transparent); color: var(--sala-text); font-size: var(--sala-fs-row); }
.sala-op .so-ev::before { content: ''; position: absolute; top: 6px; bottom: 6px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--so-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--so-accent) 70%, transparent); }
.sala-op .so-ev-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: color-mix(in srgb, var(--so-accent) 14%, transparent); color: var(--so-accent); }
.sala-op .so-ev-ic .ev-ic { width: 15px; height: 15px; }
.sala-op .so-ev-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sala-op .so-ev-text { min-width: 0; overflow-wrap: anywhere; }
.sala-op .so-ev-sub { color: var(--sala-text-2); font-size: var(--sala-fs-body); overflow-wrap: anywhere; }
.sala-op .so-ev-aside { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px var(--sala-sp-2); }
/* a row without an icon keeps the bar and the words */
.sala-op .so-ev.no-ic { grid-template-columns: minmax(0, 1fr) auto; }
/* a row that answers a click (it selects in the main window, or opens the source); a row that does not, does not pretend */
.sala-op .so-ev.is-link { cursor: pointer; transition: background var(--ev-dur-1), border-color var(--ev-dur-1); }
.sala-op .so-ev.is-link:hover { border-color: color-mix(in srgb, var(--so-accent) 45%, transparent); background: var(--sala-panel-3); }
/* the tones of a row: verdicts and warnings, never a network */
.sala-op .so-ev.is-bad { --so-accent: var(--sala-red); }
.sala-op .so-ev.is-doubt { --so-accent: var(--sala-amber); }
.sala-op .so-ev.is-info { --so-accent: var(--sala-blue); }
.sala-op .so-ev.is-ok { --so-accent: var(--sala-green); }
/* a signal without data: grey bar, grey words, same size, still there */
.sala-op .so-ev.is-none { --so-accent: var(--sala-text-3); border-style: dashed; background: transparent; color: var(--sala-text-3); }
.sala-op .so-ev.is-none::before { box-shadow: none; opacity: 0.6; }
.sala-op .so-ev.is-none .so-ev-sub, .sala-op .so-ev.is-none .so-when { color: var(--sala-text-3); }
/* the number of a numbered line (sectors, pending items) */
.sala-op .so-num { display: inline-grid; place-items: center; flex: none; min-width: 26px; height: 26px; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--so-accent, var(--sala-cyan)) 55%, transparent); border-radius: 7px; color: var(--sala-text); font: 600 var(--sala-fs-cap)/1 var(--sala-mono); box-shadow: 0 0 10px color-mix(in srgb, var(--so-accent, var(--sala-cyan)) 22%, transparent); }
/* the gap between two rows of the route: days without a placed trace */
.sala-op .so-gap { display: flex; align-items: center; gap: var(--sala-sp-3); margin: 2px 0; color: var(--sala-text-3); font: 400 var(--sala-fs-cap)/1.3 var(--sala-mono); letter-spacing: 0.02em; }
.sala-op .so-gap::before, .sala-op .so-gap::after { content: ''; flex: 1; height: 0; border-top: 1px dashed var(--sala-line-2); }

/* ------------------------------------------------------------ chips: the hue of the network glows; semantic tones for states */
.sala-op .so-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sala-op .so-chip { --so-hue: var(--gc, var(--sala-cyan)); display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 24px; padding: 0 9px; border: 1px solid color-mix(in srgb, var(--so-hue) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--so-hue) 14%, var(--sala-panel)); color: color-mix(in srgb, var(--so-hue) 30%, var(--sala-text)); font: 500 var(--sala-fs-cap)/1 var(--sala-font); white-space: nowrap; box-shadow: 0 0 10px color-mix(in srgb, var(--so-hue) 26%, transparent); }
.sala-op .so-chip > span { overflow: hidden; text-overflow: ellipsis; }
.sala-op .so-chip .ev-ic { width: 13px; height: 13px; flex: none; color: var(--so-hue); }
.sala-op .so-chip-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--so-hue); box-shadow: 0 0 6px var(--so-hue); }
.sala-op .so-chip-n { color: var(--sala-text); font-family: var(--sala-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.sala-op .so-chip.is-caps { font: 600 var(--sala-fs-cap)/1 var(--sala-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.sala-op .so-chip.is-ok { --so-hue: var(--sala-green); }
.sala-op .so-chip.is-doubt { --so-hue: var(--sala-amber); }
.sala-op .so-chip.is-bad { --so-hue: var(--sala-red); }
.sala-op .so-chip.is-info { --so-hue: var(--sala-blue); }
.sala-op .so-chip.is-accent { --so-hue: var(--sala-magenta); }
/* a quiet chip: no glow, grey ink (counts, rules, "no está en las listas") */
.sala-op .so-chip.is-muted { --so-hue: var(--sala-text-3); color: var(--sala-text-2); box-shadow: none; }
/* the mark of the data of third parties ("Dato sensible"): magenta, dashed, no glow */
.sala-op .so-chip.is-sensitive { --so-hue: var(--sala-magenta); border-style: dashed; background: transparent; box-shadow: none; }
/* a chip with a remove button (the chosen sector): the chip grows to the 32 px of a hit target */
.sala-op .so-chip.has-x { height: var(--sala-hit); padding-right: 0; }
.sala-op .so-chip-x { display: grid; place-items: center; width: var(--sala-hit); height: var(--sala-hit); margin-left: -2px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--sala-text-2); cursor: pointer; }
.sala-op .so-chip-x:hover { color: var(--sala-text); background: color-mix(in srgb, var(--so-hue) 18%, transparent); }
.sala-op .so-chip-x .ev-ic { width: 14px; height: 14px; color: currentColor; }

/* ------------------------------------------------------------ dots: three ages, and the semantic tones; the shape says it as well as the colour */
.sala-op .so-dot { --so-hue: var(--sala-text-3); display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--so-hue); vertical-align: middle; }
/* the last 90 days: hot, with a halo */
.sala-op .so-dot.age-recent { --so-hue: var(--sala-age-recent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--so-hue) 22%, transparent), 0 0 10px var(--so-hue); }
/* the last 12 months: lit, a softer glow */
.sala-op .so-dot.age-year { --so-hue: var(--sala-age-year); box-shadow: 0 0 7px color-mix(in srgb, var(--so-hue) 75%, transparent); }
/* older: a hollow ring, no glow */
.sala-op .so-dot.age-old { --so-hue: var(--sala-age-old); background: transparent; box-shadow: inset 0 0 0 2px var(--so-hue); }
.sala-op .so-dot.is-ok { --so-hue: var(--sala-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--so-hue) 22%, transparent); }
.sala-op .so-dot.is-doubt { --so-hue: var(--sala-amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--so-hue) 22%, transparent); }
.sala-op .so-dot.is-bad { --so-hue: var(--sala-red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--so-hue) 22%, transparent); }
.sala-op .so-dot.is-net { --so-hue: var(--gc, var(--sala-cyan)); box-shadow: 0 0 6px var(--so-hue); }
/* a trace with no point of its own (counted at the start that contradicts its place): an amber hollow ring, dashed */
.sala-op .so-dot.is-moved { --so-hue: var(--sala-amber); background: transparent; box-shadow: inset 0 0 0 2px var(--so-hue); outline: 1px dashed var(--so-hue); outline-offset: 1px; }
/* an age said in words beside its dot (a sector card) */
.sala-op .so-age { display: inline-flex; align-items: center; gap: 6px; color: var(--sala-text-2); font: 400 var(--sala-fs-cap)/1.2 var(--sala-mono); white-space: nowrap; }
/* the legend of a panel: dot and word, small, monospaced */
.sala-op .so-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sala-sp-1) var(--sala-sp-3); margin: 0; padding: 0; list-style: none; color: var(--sala-text-2); font: 400 var(--sala-fs-cap)/1.3 var(--sala-mono); }
.sala-op .so-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sala-op .so-legend-item .so-mark { width: 14px; height: 14px; min-width: 14px; font-size: 0; }

/* ------------------------------------------------------------ the strip of years (2018 to 2026): one tick per year, lit when it has a signal */
.sala-op .so-years { --so-hue: var(--gc, var(--sala-cyan)); display: inline-grid; grid-auto-flow: column; grid-auto-columns: 10px; align-items: end; gap: 3px; height: 16px; }
.sala-op .so-year { height: 6px; border-radius: 2px; background: var(--sala-line-2); }
.sala-op .so-year.has-signal { height: 14px; background: var(--so-hue); box-shadow: 0 0 6px color-mix(in srgb, var(--so-hue) 70%, transparent); }
.sala-op .so-years-axis { display: inline-flex; justify-content: space-between; gap: var(--sala-sp-2); color: var(--sala-text-3); font: 400 var(--sala-fs-cap)/1 var(--sala-mono); }
/* the strip with its first and last year under it, always at the right of its row */
.sala-op .so-years-wrap { display: inline-flex; flex-direction: column; align-items: stretch; gap: 3px; margin-left: auto; }
.sala-op .so-years-wrap .so-years-axis { display: flex; }

/* ------------------------------------------------------------ the hour grid: label column, then one column per band (--cols), square cells
   that brighten with their count (--k, 0 to 1, written by the renderer) and hold up to two marks */
.sala-op .so-hgrid { --cols: 6; --so-cell: 46px; display: inline-grid; grid-template-columns: max-content repeat(var(--cols), var(--so-cell)); gap: 4px; align-items: center; justify-items: center; }
.sala-op .so-hgrid-lab { display: flex; align-items: center; justify-content: center; padding: 0 6px; color: var(--sala-text-2); font: 500 var(--sala-fs-cap)/1 var(--sala-mono); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.sala-op .so-hgrid-lab.is-row { justify-self: start; justify-content: flex-start; padding-left: 0; }
.sala-op .so-cell { --k: 0; position: relative; display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 3px; width: var(--so-cell); height: var(--so-cell); border: 1px solid var(--sala-line); border-radius: 6px; background: var(--sala-panel-2); box-shadow: 0 0 calc(var(--k) * 18px) color-mix(in srgb, var(--sala-cyan) 40%, transparent); }
.sala-op .so-cell::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 50% 40%, var(--sala-cyan-ink), var(--sala-cyan) 55%, var(--sala-blue)); opacity: calc(var(--k) * 0.5); }
.sala-op .so-cell > * { position: relative; }
.sala-op .so-cell.is-empty { border-style: dashed; border-color: color-mix(in srgb, var(--sala-line-2) 55%, transparent); background: transparent; }
.sala-op .so-cell[tabindex], .sala-op button.so-cell { padding: 0; font: inherit; color: inherit; cursor: pointer; }
.sala-op .so-cell[tabindex]:hover, .sala-op button.so-cell:hover { border-color: color-mix(in srgb, var(--sala-cyan) 55%, transparent); }
/* a day abroad (hour on the clock of Bogotá): a small amber point at the corner */
.sala-op .so-cell.has-abroad::after { content: ''; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--sala-amber); box-shadow: 0 0 6px var(--sala-amber); }
/* the two marks: out on the street with a place (filled), indoors without a place (hollow); opaque, so their numbers keep their contrast */
.sala-op .so-mark { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 5px; font: 600 var(--sala-fs-cap)/1 var(--sala-mono); font-variant-numeric: tabular-nums; }
.sala-op .so-mark.is-street { border: 1px solid var(--sala-cyan); background: color-mix(in srgb, var(--sala-cyan) 28%, var(--sala-panel)); color: var(--sala-text); box-shadow: 0 0 8px color-mix(in srgb, var(--sala-cyan) 50%, transparent); }
.sala-op .so-mark.is-indoor { border: 1px dashed var(--sala-text-3); background: var(--sala-panel-2); color: var(--sala-text-3); }
/* the reading line under the grid: always with numerator and denominator */
.sala-op .so-reading { margin: 0; color: var(--sala-text-2); font-size: var(--sala-fs-body); line-height: 1.55; }
.sala-op .so-reading .so-n { color: var(--sala-text); }
/* the tooltip of a cell (and of any mark): dark glass, monospaced dates */
.sala-op .so-tip { position: absolute; z-index: var(--ev-z-toast); min-width: 220px; max-width: 320px; padding: var(--sala-sp-2) var(--sala-sp-3); border: 1px solid var(--sala-line-2); border-radius: var(--sala-r); background: var(--sala-glass-2); color: var(--sala-text); font-size: var(--sala-fs-body); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sala-cyan) 20%, transparent), var(--sala-lift); backdrop-filter: blur(10px); pointer-events: none; }
.sala-op .so-tip-title { margin: 0 0 6px; color: var(--sala-cyan); font: 600 var(--sala-fs-cap)/1.2 var(--sala-mono); letter-spacing: var(--sala-tracking); text-transform: uppercase; }
.sala-op .so-tip-row { display: flex; justify-content: space-between; gap: var(--sala-sp-3); padding: 2px 0; }

/* ------------------------------------------------------------ the segmented control of the app (ev-segmented), lit in the room */
.sala-op .ev-segmented { border-color: var(--sala-line); background: var(--sala-glass-2); }
.sala-op .ev-segmented button { height: var(--sala-hit); color: var(--sala-text-2); font: 500 var(--sala-fs-body)/1 var(--sala-font); }
.sala-op .ev-segmented button:hover { color: var(--sala-text); }
.sala-op .ev-segmented button[aria-pressed="true"] { background: color-mix(in srgb, var(--sala-cyan) 16%, var(--sala-panel)); color: var(--sala-cyan-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sala-cyan) 60%, transparent), 0 0 12px color-mix(in srgb, var(--sala-cyan) 28%, transparent); }

/* ------------------------------------------------------------ buttons of the app, in the room */
.sala-op .ev-btn-secondary { border-color: color-mix(in srgb, var(--sala-cyan) 35%, var(--sala-line)); background: color-mix(in srgb, var(--sala-panel-2) 85%, transparent); color: var(--sala-text); }
.sala-op .ev-btn-secondary:hover { border-color: var(--sala-cyan); background: var(--sala-panel-3); color: var(--sala-text); box-shadow: 0 0 12px color-mix(in srgb, var(--sala-cyan) 25%, transparent); }
.sala-op .ev-btn-secondary .ev-ic { color: var(--sala-cyan); }
/* a pressed button (the sector chosen, the map open): lit like the segmented control */
.sala-op .ev-btn-secondary[aria-pressed="true"] { background: var(--seg-on); color: var(--sala-cyan-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sala-cyan) 60%, transparent); }
.sala-op .ev-btn-ghost, .sala-op .ev-icon-btn { color: var(--sala-text-2); }
.sala-op .ev-btn-ghost:hover, .sala-op .ev-icon-btn:hover { background: var(--sala-panel-3); color: var(--sala-cyan-ink); }
.sala-op .ev-btn-primary { background: var(--sala-cyan); color: var(--sala-on-cyan); box-shadow: 0 0 16px color-mix(in srgb, var(--sala-cyan) 40%, transparent); }
.sala-op .ev-btn-primary:hover { background: var(--sala-cyan-ink); color: var(--sala-on-cyan); }

/* ------------------------------------------------------------ sector cards (and any inner card of a panel) */
.sala-op .so-cards { display: flex; flex-direction: column; gap: var(--sala-sp-3); margin: 0; padding: 0; list-style: none; }
.sala-op .so-card { --so-accent: var(--sala-cyan); position: relative; display: flex; flex-direction: column; gap: var(--sala-sp-2); padding: var(--sala-sp-3) var(--sala-sp-4); border: 1px solid var(--sala-line); border-radius: var(--sala-r-lg); background: linear-gradient(160deg, color-mix(in srgb, var(--sala-panel-3) 90%, transparent), color-mix(in srgb, var(--sala-panel-2) 90%, transparent)); box-shadow: var(--sala-edge); }
.sala-op .so-card.is-link { cursor: pointer; }
.sala-op .so-card.is-link:hover { border-color: var(--sala-line-2); }
.sala-op .so-card-head { display: flex; align-items: center; gap: var(--sala-sp-3); }
.sala-op .so-card-title { flex: 1; min-width: 0; margin: 0; color: var(--sala-text); font-size: 15px; font-weight: 600; line-height: 1.3; }
/* the unit that holds the fine place a card is named by ("Localidad Kennedy, Bogotá"), under its name */
.sala-op .so-card-sub { display: block; color: var(--sala-text-2); font-size: var(--sala-fs-body); font-weight: 400; }
.sala-op .so-card-last { color: var(--sala-text-2); font: 400 var(--sala-fs-cap)/1.2 var(--sala-mono); text-align: right; white-space: nowrap; }
.sala-op .so-card-last b { display: block; color: var(--sala-text); font-size: 18px; font-weight: 600; }
.sala-op .so-stats { display: flex; flex-wrap: wrap; gap: var(--sala-sp-2) var(--sala-sp-5); margin: 0; }
.sala-op .so-stats dt, .sala-op .so-stats dd { margin: 0; }
.sala-op .so-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sala-op .so-stat-n { color: var(--sala-text); font: 600 18px/1.1 var(--sala-mono); font-variant-numeric: tabular-nums; }
.sala-op .so-stat-l { color: var(--sala-text-3); font: 400 var(--sala-fs-cap)/1.2 var(--sala-mono); letter-spacing: 0.04em; text-transform: uppercase; }
/* the fixed line of a sector: where the search starts, not a proven address */
.sala-op .so-caveat { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--sala-text-2); font-size: var(--sala-fs-body); font-style: italic; }
.sala-op .so-caveat .ev-ic { width: 14px; height: 14px; flex: none; color: var(--sala-amber); }
/* a card of one day: its four figures on one quiet line, so the list of places stays short */
.sala-op .so-card.is-single .so-stats { gap: 2px var(--sala-sp-4); }
.sala-op .so-card.is-single .so-stat { flex-direction: row-reverse; align-items: baseline; gap: 6px; }
.sala-op .so-card.is-single .so-stat-n { font-size: var(--sala-fs-body); }

/* ------------------------------------------------------------ people (Círculo cercano): two columns of compact rows */
.sala-op .so-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sala-sp-3) var(--sala-sp-4); }
.sala-op .so-col-title { display: flex; align-items: center; gap: var(--sala-sp-2); margin: 0 0 var(--sala-sp-2); padding-bottom: 6px; border-bottom: 1px solid var(--sala-line); color: var(--sala-text); font: 600 var(--sala-fs-cap)/1.2 var(--sala-mono); letter-spacing: var(--sala-tracking); text-transform: uppercase; }
.sala-op .so-col-title .so-muted { font-weight: 400; letter-spacing: 0; text-transform: none; }
.sala-op .so-person { --so-accent: var(--gc, var(--sala-cyan)); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--sala-sp-3); padding: var(--sala-sp-2) var(--sala-sp-3) var(--sala-sp-2) calc(var(--sala-sp-3) + 3px); border: 1px solid transparent; border-radius: var(--sala-r); background: color-mix(in srgb, var(--sala-panel-2) 70%, transparent); }
.sala-op .so-person::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--so-accent); opacity: 0.85; }
.sala-op .so-person.is-link { cursor: pointer; }
.sala-op .so-person.is-link:hover { border-color: var(--sala-line-2); background: var(--sala-panel-3); }
.sala-op .so-person-name { margin: 0; color: var(--sala-text); font-size: var(--sala-fs-row); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.sala-op .so-person-alt { display: block; color: var(--sala-text-2); font-size: var(--sala-fs-body); font-weight: 400; }
.sala-op .so-person-last { align-self: start; color: var(--sala-text-2); font: 400 var(--sala-fs-cap)/1.3 var(--sala-mono); text-align: right; white-space: nowrap; }
.sala-op .so-person-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px var(--sala-sp-3); }
/* a person whose photos with him come only from a discarded account: dimmed, never removed */
.sala-op .so-person.is-dimmed { border: 1px dashed var(--sala-line-2); background: transparent; }
.sala-op .so-person.is-dimmed::before { opacity: 0.4; }
.sala-op .so-person.is-dimmed .so-person-name { color: var(--sala-text-2); }

/* ------------------------------------------------------------ face crops: a 96 px frame with luminous corners; confirmed is green, proposed is amber and dashed */
.sala-op .so-face { --so-accent: var(--sala-cyan); display: inline-flex; flex-direction: column; align-items: center; gap: 6px; width: 112px; margin: 0; }
.sala-op .so-face-img { position: relative; display: grid; place-items: center; width: 96px; height: 96px; overflow: hidden; border-radius: 6px; background: var(--sala-panel-2); color: var(--sala-text-3); }
.sala-op .so-face-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sala-op .so-face-img .ev-ic { width: 36px; height: 36px; }
.sala-op .so-face-img::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(var(--so-accent), var(--so-accent)) top left / 16px 2px no-repeat,
    linear-gradient(var(--so-accent), var(--so-accent)) top left / 2px 16px no-repeat,
    linear-gradient(var(--so-accent), var(--so-accent)) top right / 16px 2px no-repeat,
    linear-gradient(var(--so-accent), var(--so-accent)) top right / 2px 16px no-repeat,
    linear-gradient(var(--so-accent), var(--so-accent)) bottom left / 16px 2px no-repeat,
    linear-gradient(var(--so-accent), var(--so-accent)) bottom left / 2px 16px no-repeat,
    linear-gradient(var(--so-accent), var(--so-accent)) bottom right / 16px 2px no-repeat,
    linear-gradient(var(--so-accent), var(--so-accent)) bottom right / 2px 16px no-repeat;
  filter: drop-shadow(0 0 4px var(--so-accent)); }
.sala-op .so-face.is-confirmed { --so-accent: var(--sala-green); }
.sala-op .so-face.is-confirmed .so-face-img { box-shadow: 0 0 0 1px color-mix(in srgb, var(--sala-green) 45%, transparent); }
.sala-op .so-face.is-proposed { --so-accent: var(--sala-amber); }
.sala-op .so-face.is-proposed .so-face-img { outline: 1px dashed var(--sala-amber); outline-offset: 2px; }
.sala-op .so-face-cap { color: var(--sala-text-2); font: 400 var(--sala-fs-cap)/1.35 var(--sala-mono); text-align: center; }
/* the column of one face: its title, the crop and its two lines (what the face stands on goes under the ladder of signals) */
.sala-op .so-face-col { align-items: center; max-width: 176px; gap: 6px; }

/* ------------------------------------------------------------ the map: Leaflet inside .so-map, standard tiles turned into a dark blue map */
.sala-op .so-map { position: relative; isolation: isolate; min-height: 260px; overflow: hidden; border: 1px solid var(--sala-line); border-radius: var(--sala-r-lg); background: var(--sala-bg-2); box-shadow: var(--sala-edge); }
.sala-op .so-map > .leaflet-container, .sala-op .so-map.leaflet-container { position: absolute; inset: 0; background: var(--sala-bg-2); font: 400 var(--sala-fs-cap)/1.4 var(--sala-mono); }
.sala-op .so-map .leaflet-tile-pane { filter: invert(0.92) grayscale(1) sepia(0.6) hue-rotate(185deg) saturate(3.5) brightness(0.7) contrast(1.2); }
/* the vignette over the tiles, under the controls */
.sala-op .so-map::after { content: ''; position: absolute; inset: 0; z-index: 450; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 48px var(--sala-shade), inset 0 0 0 1px color-mix(in srgb, var(--sala-cyan) 10%, transparent); }
.sala-op .so-map .leaflet-bar { border: 1px solid var(--sala-line-2); border-radius: var(--sala-r); box-shadow: var(--sala-lift); }
.sala-op .so-map .leaflet-bar a { width: var(--sala-hit); height: var(--sala-hit); border-bottom-color: var(--sala-line); background: var(--sala-glass-2); color: var(--sala-cyan-ink); line-height: var(--sala-hit); }
.sala-op .so-map .leaflet-bar a:hover { background: var(--sala-panel-3); color: var(--sala-text); }
.sala-op .so-map .leaflet-control-attribution { background: var(--sala-glass-2); color: var(--sala-text-3); font: 400 var(--sala-fs-cap)/1.4 var(--sala-mono); }
.sala-op .so-map .leaflet-control-attribution a { color: var(--sala-text-2); }
/* a point of the map, as an L.divIcon({ className: 'so-pin age-recent', iconSize: [14, 14] }): three tones by age, like the dots */
.sala-op .so-pin { --so-hue: var(--sala-age-old); border-radius: 50%; background: var(--so-hue); box-shadow: 0 0 0 2px var(--sala-bg-2); }
.sala-op .so-pin.age-recent { --so-hue: var(--sala-age-recent); box-shadow: 0 0 0 2px var(--sala-bg-2), 0 0 0 5px color-mix(in srgb, var(--so-hue) 30%, transparent), 0 0 16px var(--so-hue); }
.sala-op .so-pin.age-year { --so-hue: var(--sala-age-year); box-shadow: 0 0 0 2px var(--sala-bg-2), 0 0 10px var(--so-hue); }
.sala-op .so-pin.age-old { background: var(--sala-bg-2); box-shadow: 0 0 0 2px var(--sala-bg-2), inset 0 0 0 2px var(--so-hue), 0 0 0 3px color-mix(in srgb, var(--so-hue) 55%, transparent); }
.sala-op .so-pin.is-dubious { --so-hue: var(--sala-amber); background: transparent; box-shadow: inset 0 0 0 2px var(--so-hue); outline: 1px dashed var(--so-hue); outline-offset: 2px; }
/* the circle of a sector, as an L.circle(..., { className: 'so-sector' }): a dashed luminous ring, no heat */
.sala-op .so-map path.so-sector { stroke: var(--sala-cyan); stroke-width: 1.5px; stroke-dasharray: 4 6; stroke-opacity: 0.8; fill: var(--sala-cyan); fill-opacity: 0.05; filter: drop-shadow(0 0 4px var(--sala-cyan)); }
.sala-op .so-map path.so-sector.is-selected { stroke-width: 2px; stroke-dasharray: none; stroke-opacity: 1; fill-opacity: 0.1; }
/* the map that could not load: the panel stays a list and says so */
.sala-op .so-map-note { display: flex; align-items: center; gap: var(--sala-sp-2); padding: var(--sala-sp-2) var(--sala-sp-3); border: 1px dashed var(--sala-line-2); border-radius: var(--sala-r); color: var(--sala-text-2); font-size: var(--sala-fs-body); }

/* ------------------------------------------------------------ selected: the cyan ring, wherever the selection of the main window lands */
.sala-op .so-ev.is-selected, .sala-op .so-card.is-selected, .sala-op .so-person.is-selected, .sala-op .so-cell.is-selected, .sala-op .so-strip-line.is-selected {
  border-color: var(--sala-cyan); box-shadow: var(--sala-ring); }
.sala-op .so-ev.is-selected, .sala-op .so-person.is-selected { background: color-mix(in srgb, var(--sala-cyan) 9%, var(--sala-panel-2)); }
.sala-op .so-pin.is-selected { box-shadow: 0 0 0 2px var(--sala-bg-2), 0 0 0 4px var(--sala-cyan), 0 0 18px var(--sala-cyan); }

/* ------------------------------------------------------------ new: a line that arrived with the last reading. Without motion it keeps a
   still mark (a brighter bar and a small dot); with motion allowed it also pulses softly three times */
.sala-op .so-ev.is-new::before, .sala-op .so-person.is-new::before { width: 4px; background: var(--sala-cyan-ink); box-shadow: 0 0 12px var(--sala-cyan); opacity: 1; }
.sala-op .so-new-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sala-cyan-ink); box-shadow: 0 0 8px var(--sala-cyan); }
@media (prefers-reduced-motion: no-preference) {
  .sala-op .so-ev.is-new, .sala-op .so-person.is-new, .sala-op .so-strip-line.is-new { animation: soArrive 1.8s var(--sala-ease) 3; }
  .sala-op .so-new-dot, .sala-op .so-dot.is-live { animation: soHalo 2.4s ease-in-out infinite; }
}
@keyframes soArrive {
  0% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--sala-cyan) 70%, transparent), 0 0 22px color-mix(in srgb, var(--sala-cyan) 35%, transparent); }
  100% { box-shadow: 0 0 0 1px transparent, 0 0 0 transparent; }
}
@keyframes soHalo {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sala-cyan) 55%, transparent), 0 0 8px var(--sala-cyan); }
  50% { box-shadow: 0 0 0 5px transparent, 0 0 12px var(--sala-cyan); }
}

/* ------------------------------------------------------------ narrow places: a narrow panel, a narrow window */
@container (max-width: 900px) {
  .sala-op .so-cols { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 760px) {
  /* rows without an icon (Recorrido, the evidence of a card): the chips go under the words instead of squeezing them */
  .sala-op .so-ev.no-ic { grid-template-columns: minmax(0, 1fr); }
  .sala-op .so-ev.no-ic .so-ev-aside { grid-column: 1 / -1; justify-content: flex-start; }
}
@container (max-width: 600px) {
  .sala-op .so-split, .sala-op .so-split.is-half { grid-template-columns: minmax(0, 1fr); }
  .sala-op .so-aside { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
}
@container (max-width: 560px) {
  .sala-op .so-headline { grid-template-columns: minmax(0, 1fr); }
  .sala-op .so-figure { align-items: flex-start; text-align: left; }
  .sala-op .so-figure::after { right: auto; left: 0; background: linear-gradient(90deg, var(--so-accent), transparent); }
  .sala-op .so-ev { grid-template-columns: auto minmax(0, 1fr); }
  .sala-op .so-ev.no-ic { grid-template-columns: minmax(0, 1fr); }
  .sala-op .so-ev-aside { grid-column: 1 / -1; justify-content: flex-start; }
  .sala-op .so-headline-side { align-items: flex-start; }
  .sala-op .so-headline-side .so-chips { justify-content: flex-start; }
}
/* under 1100 px of width (spec section 4, as sala.css does for every pane) or 820 px of height (a laptop screen, 1366 x 768 and the like,
   where two rows of panels leave each under 300 px and cut the hour grid and the first sector card): every operational pane stacks its
   panels, each with room for its glance, and the bar and the strip take fewer lines. A screen of 1101 to 1400 px wide and taller keeps
   its columns. */
@media (max-width: 1100px), (max-height: 820px) {
  /* sala.html: the root keeps the height of the window and scrolls its stacked panels */
  .sala.sala-op { height: 100vh; min-height: 0; overflow: auto; grid-template-rows: auto auto; }
  .sala-op .sala-grid { grid-template-columns: minmax(0, 1fr); }
  .sala-op .sala-col { grid-template-rows: none; }
  .sala-op .sala-panel { min-height: 420px; max-height: 90vh; }
  .sala-op .so-strip { flex-direction: row; flex-wrap: wrap; gap: var(--sala-sp-1) var(--sala-sp-5); }
  .sala-op .sala-state { gap: 6px 10px; }
  .sala-op .so-lead { font-size: 15px; }
}
/* the hour grid by the height of the screen: up to 1080 px its seven days fit the panel of a 1920 x 1080 screen whole (46 px cells cut
   the Sunday row), with the two marks of a cell still side by side; a short screen gets smaller cells, and the labels of the bands lose their padding and spacing and gain room between
   the columns, so "12-16" and "16-20" never run together (the figures keep their 12 px) */
@media (max-height: 1080px) {
  .sala-op .so-hgrid { --so-cell: 44px; }
  .sala-op .so-cell { gap: 2px; }
}
@media (max-height: 820px) {
  .sala-op .so-hgrid { --so-cell: 36px; gap: 3px 6px; }
  .sala-op .so-hgrid-lab { padding: 0; letter-spacing: 0; }
  .sala-op .so-mark { min-width: 16px; height: 16px; padding: 0 3px; }
}
@media (max-width: 1100px) {
  .sala-op .sala-grid { grid-template-columns: minmax(0, 1fr); }
  .sala-op .sala-col { grid-template-rows: none; }
  .sala-op .sala-panel { min-height: 420px; max-height: 90vh; }
  .sala-op .so-strip-key { min-width: 0; }
  .sala-op .so-figure-n { font-size: 32px; }
}