/* Vigilar (#/vigilar, docs/plan-seguimiento-hashtags.md F2): the list of watches, the detail of one and the form Nueva vigilancia.
   Only the design tokens of tokens-ev.css, so the three themes paint it; every box can shrink (min-width: 0) and nothing scrolls the
   page sideways: the items table scrolls inside its own wrapper. */
.vg-page { min-width: 0; }
.vg-head-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.vg-grid { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: 16px; align-items: start; min-width: 0; }
@media (max-width: 1080px) { .vg-grid { grid-template-columns: minmax(0, 1fr); } }
.vg-list, .vg-card, .vg-pick { min-width: 0; }
.vg-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.vg-main > .ev-card, .vg-pick.ev-empty { width: 100%; max-width: none; box-sizing: border-box; }
.vg-h2 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px 8px; color: var(--ev-text); font: 600 14px/1.3 var(--ev-font-ui); }
.vg-card .vg-h2 { padding: 0; }
.vg-count { padding: 1px 7px; border-radius: var(--ev-r-pill); background: var(--ev-surface-2); color: var(--ev-text-2); font: 500 11px/16px var(--ev-font-mono); }
.vg-pad { margin: 0; padding: 8px 14px 14px; }
.vg-pad-x { margin: 0 0 8px; padding: 0 16px; }
.vg-empty { padding: 18px 14px; }
.vg-dim { color: var(--ev-text-3); }
.vg-mono { font-family: var(--ev-font-mono); font-size: 11px; }
.vg-sub { margin: 2px 0 0; font-size: 12px; line-height: 1.4; }
.vg-min { min-width: 0; }

/* the list */
.vg-rows { list-style: none; margin: 0; padding: 0 6px 6px; }
.vg-row { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; margin: 0 0 2px; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--ev-r-md); background: none;
  color: var(--ev-text); text-align: left; font: inherit; cursor: pointer; transition: background var(--ev-dur-1), border-color var(--ev-dur-1); }
.vg-row:hover { background: var(--ev-surface-2); }
.vg-row.is-current { border-color: var(--ev-border-strong); background: var(--ev-brand-soft); }
.vg-row.is-archived { opacity: 0.72; }
.vg-row:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: 1px; }
.vg-row-main { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.vg-row-label { overflow: hidden; color: var(--ev-text); font: 600 13px/1.3 var(--ev-font-ui); white-space: nowrap; text-overflow: ellipsis; }
.vg-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 11.5px; }
.vg-row-when { font-size: 11px; }
.vg-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.vg-spark { display: block; width: 96px; height: 24px; overflow: visible; }
.vg-spark polyline { fill: none; stroke: var(--ev-brand); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.vg-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ev-bad); color: var(--ev-surface); font: 600 10.5px/18px var(--ev-font-mono); text-align: center; }

/* chips */
.vg-chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--ev-r-pill); background: var(--ev-surface-2); color: var(--ev-text-2); font: 500 11px/18px var(--ev-font-ui); white-space: nowrap; }
.vg-chip.is-activa, .vg-chip.is-ok { background: var(--ev-ok-soft); color: var(--ev-ok); }
.vg-chip.is-leyendo { background: var(--ev-info-soft); color: var(--ev-info); }
.vg-chip.is-pausada, .vg-chip.is-warn { background: var(--ev-doubt-soft); color: var(--ev-doubt); }
.vg-chip.is-archivada, .vg-chip.is-off { background: var(--ev-surface-2); color: var(--ev-text-3); }
.vg-chip.is-account { border: 1px dashed var(--ev-border-strong); background: none; color: var(--ev-text-2); }

/* a card of the detail or the form */
.vg-card { padding: 14px 16px 16px; }
.vg-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; margin: 0 0 12px; }
.vg-card-head > :first-child { flex: 1 1 260px; min-width: 0; }
.vg-detail-title { flex-wrap: wrap; overflow-wrap: anywhere; }
.vg-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vg-props { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 16px; margin: 0 0 8px; }
.vg-props > div { min-width: 0; }
.vg-props dt { color: var(--ev-text-3); font: 600 10.5px/1.4 var(--ev-font-ui); letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; }
.vg-props dd { margin: 2px 0 0; color: var(--ev-text); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.vg-case-link { margin-right: 8px; }
.vg-h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 16px 0 8px; color: var(--ev-text); font: 600 13px/1.3 var(--ev-font-ui); }
.vg-h3-sub { font-weight: 400; font-size: 11.5px; }

/* the sources and their series */
.vg-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vg-source { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 6px 14px; padding: 8px 10px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-md); }
@media (max-width: 1280px) { .vg-source { grid-template-columns: minmax(0, 1fr); } }
.vg-source-txt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 12px; }
.vg-src-name { color: var(--ev-text); font-weight: 600; font-size: 12.5px; }
.vg-src-when { font-size: 11px; }
.vg-series { display: block; width: 100%; height: 36px; min-width: 0; }
.vg-bar { fill: var(--ev-brand); }
.vg-bar.is-zero { fill: var(--ev-border); }
.vg-series rect:hover { fill: var(--ev-text); }

/* the inbox */
.vg-filters { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 8px; }
.vg-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; min-width: 0; }
.vg-filter .ev-select { max-width: 220px; }
.vg-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vg-event { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; padding: 9px 10px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-md); }
.vg-event.is-new { border-left: 3px solid var(--ev-brand); }
.vg-event-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 280px; min-width: 0; }
.vg-event-kind { color: var(--ev-text); font: 600 12.5px/1.35 var(--ev-font-ui); }
.vg-event-what { color: var(--ev-text-2); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.vg-event-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.vg-sev { flex: none; padding: 1px 8px; border-radius: var(--ev-r-pill); font: 600 11px/18px var(--ev-font-ui); }
.vg-sev.is-info { background: var(--ev-info-soft); color: var(--ev-info); }
.vg-sev.is-atencion { background: var(--ev-doubt-soft); color: var(--ev-doubt); }
.vg-sev.is-urgente { background: var(--ev-bad-soft); color: var(--ev-bad); }

/* the items read */
.vg-items-wrap { max-width: 100%; overflow-x: auto; }
.vg-items { width: 100%; table-layout: fixed; }
.vg-items th, .vg-items td { vertical-align: top; }
.vg-c-net { width: 13%; } .vg-c-date { width: 14%; } .vg-c-author { width: 16%; } .vg-c-text { width: 41%; } .vg-c-link { width: 8%; } .vg-c-ev { width: 8%; }
.vg-clip { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vg-clamp { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; font-size: 12px; line-height: 1.4; }
/* 2026-10-28: the matched term in the snippet, the meta line under it (where the term is, the counts, the language, the copies) and the
   date of an item the source gave no date for (the time it was first seen) */
.vg-hit { padding: 0 1px; border-radius: 2px; background: var(--ev-doubt-soft); color: var(--ev-text); }
.vg-hit:empty { display: none; }
.vg-item-meta { display: block; margin-top: 2px; overflow-wrap: anywhere; font-size: 11px; line-height: 1.35; }
.vg-item-meta:empty { display: none; }
.vg-c-date.is-seen { font-style: italic; }

/* the form */
.vg-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
@media (max-width: 1280px) { .vg-fields { grid-template-columns: minmax(0, 1fr); } }
.vg-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }
.vg-field.vg-half { grid-column: auto; }
.vg-field .ev-input { width: 100%; min-width: 0; box-sizing: border-box; }
.vg-area { resize: vertical; min-height: 52px; }
.vg-label { color: var(--ev-text); font: 600 12.5px/1.3 var(--ev-font-ui); padding: 0; }
.vg-hint { color: var(--ev-text-3); font-size: 11.5px; line-height: 1.4; }
.vg-set legend { margin-bottom: 4px; }
.vg-src-pick, .vg-case-pick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.vg-case-pick { max-height: 180px; overflow: auto; }
.vg-src-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 4px 0; min-width: 0; }
.vg-check { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; color: var(--ev-text); cursor: pointer; }
.vg-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--ev-brand); }
.vg-case-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vg-cad { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.vg-num { width: 84px; }
.vg-inline { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.vg-error { margin: 12px 0 0; padding: 8px 10px; border-left: 3px solid var(--ev-bad); border-radius: 6px; background: var(--ev-bad-soft); color: var(--ev-text); font-size: 12.5px; }
.vg-form-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dk-log-row.is-watch { border-left: 2px solid var(--ev-doubt); }

/* 2026-10-27 (F3): Vigilancias que citan este caso, in the Ficha of the subject; a tag of the comments that opens Nueva vigilancia */
.vg-ficha-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vg-ficha-row { padding: 8px 10px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-md, 8px); background: var(--ev-surface-2, transparent); min-width: 0; }
.vg-ficha-head { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; }
.vg-ficha-head .ev-ic { flex: none; width: 14px; height: 14px; color: var(--ev-text-3); }
.vg-ficha-head a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-ficha-event { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; font-size: 12px; line-height: 1.4; min-width: 0; }
.vg-ficha-txt { min-width: 0; overflow-wrap: anywhere; }
.cmt-chip-btn { display: inline-flex; align-items: center; gap: 4px; background: transparent; cursor: pointer; font: inherit; font-size: var(--ev-fs-xs); }
.cmt-chip-btn:hover, .cmt-chip-btn:focus-visible { border-color: var(--ev-accent, currentColor); }
.cmt-chip-btn .ev-ic { width: 11px; height: 11px; color: var(--ev-text-3); }
/* F4 (2026-10-27): the networks of the reader's tag job under its source, the note of a source without dates, and the diff of a page change */
.vg-subnets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; flex-basis: 100%; margin: 4px 0 0 22px; }
.vg-src-note { flex-basis: 100%; }
.vg-diff { margin: 6px 0 0; }
.vg-diff-sum { padding: 0; border: 0; background: none; color: var(--ev-brand); font: 600 12px/1.4 var(--ev-font-ui); cursor: pointer; }
.vg-diff-sum:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: 1px; border-radius: 4px; }
.vg-hunk { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 0; padding: 6px 8px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-md); background: var(--ev-surface-2); }
.vg-diff-line { display: block; padding: 1px 6px; border-radius: 4px; color: var(--ev-text); font-size: 12px; line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; }
.vg-diff-line.is-del { background: var(--ev-bad-soft); text-decoration: line-through; text-decoration-color: var(--ev-bad); }
.vg-diff-line.is-add { background: var(--ev-ok-soft); }
.vg-diff-mark { display: inline-block; width: 12px; color: var(--ev-text-3); font-family: var(--ev-font-mono); text-decoration: none; }
/* F5 (2026-10-27): the analysis of the detail (the tone, the tags that come along, the places with their map) and the Vigilancias panel of
   Sala and of the Muro de mando */
.vg-analysis { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; min-width: 0; }
.vg-an-block { min-width: 0; padding: 10px 12px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-md); }
.vg-an-block .vg-hint { margin: 0 0 6px; }
.vg-h4 { margin: 0 0 4px; color: var(--ev-text); font: 600 12.5px/1.3 var(--ev-font-ui); }
.vg-an-line { margin: 0 0 4px; color: var(--ev-text-2); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.vg-an-warn { padding: 4px 8px; border-left: 3px solid var(--ev-doubt); border-radius: 4px; background: var(--ev-doubt-soft); color: var(--ev-text); }
.vg-an-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.vg-hours { width: 72px; }
.vg-an-wrap { max-width: 100%; max-height: 260px; overflow: auto; }
.vg-an-table { width: 100%; table-layout: fixed; font-size: 12px; }
.vg-an-table th, .vg-an-table td { vertical-align: top; }
/* the headers of these short tables wrap instead of running into each other */
.vg-an-table th { white-space: normal; overflow-wrap: normal; word-break: normal; line-height: 1.3; }
.vg-num-c { width: 17%; text-align: right; font-variant-numeric: tabular-nums; }
.vg-an-block.is-wide { grid-column: 1 / -1; }
.vg-places { display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; }
.vg-map { display: block; width: 100%; max-height: 300px; min-width: 0; }
.vg-map-dept { fill: var(--ev-surface-2); stroke: var(--ev-border-strong); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.vg-map-pin { fill: var(--ev-brand); fill-opacity: 0.75; stroke: var(--ev-surface); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vg-map-pin.is-old { fill: var(--ev-text-3); fill-opacity: 0.6; }
/* 2026-10-28: a pin and a row of the places pick that place (a filter of Lo leído); the one picked is marked on both */
.vg-map-pin { cursor: pointer; }
.vg-map-pin:hover { fill-opacity: 0.95; }
.vg-map-pin:focus { outline: none; }
.vg-map-pin:focus-visible { stroke: var(--ev-focus); stroke-width: 3; }
.vg-map-pin.is-sel { fill: var(--ev-doubt); fill-opacity: 0.95; stroke: var(--ev-text); stroke-width: 2; }
.vg-place-row { cursor: pointer; }
.vg-place-row:hover td { background: var(--ev-surface-2); }
.vg-place-row:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: -2px; }
.vg-place-row.is-sel td { background: var(--ev-brand-soft); }
.vg-place-row.is-sel td:first-child { box-shadow: inset 3px 0 0 var(--ev-brand); }
.vg-place-pick { margin: 8px 0 0; }
.vg-place-sel { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--ev-border-strong); border-radius: var(--ev-r-md); background: var(--ev-surface); }
.vg-h5 { margin: 0 0 4px; color: var(--ev-text); font: 600 12.5px/1.3 var(--ev-font-ui); }
.vg-h5:focus { outline: none; }
.vg-h5:focus-visible, .vg-h3:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: 2px; border-radius: 4px; }
.vg-heads { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; font-size: 12px; line-height: 1.4; }
.vg-head .is-seen { font-style: italic; }
.vg-head-text { flex: 1 1 260px; min-width: 0; color: var(--ev-text); overflow-wrap: anywhere; }
/* the filters of Lo leído in use, each with its own Quitar; the items and the chips of an event */
.vg-active { gap: 6px; max-width: 100%; padding-right: 4px; }
.vg-active .vg-clip { max-width: 260px; }
.vg-ev-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.vg-ev-chip { border: 1px solid var(--ev-border-strong); cursor: pointer; }
.vg-ev-chip:hover { background: var(--ev-surface); color: var(--ev-text); }
.vg-ev-chip.is-on { border-color: var(--ev-brand); background: var(--ev-brand-soft); color: var(--ev-text); }
.vg-ev-chip:focus-visible { outline: 2px solid var(--ev-focus); outline-offset: 1px; }
.vg-ev-toggle { align-self: flex-start; margin-top: 4px; }
.vg-ev-items { flex: 1 1 100%; min-width: 0; }
.vg-ev-items .vg-hint { margin: 0 0 6px; }
.vg-wall { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; padding: 6px 10px; border: 1px solid var(--ev-border); border-radius: var(--ev-r-md);
  background: var(--ev-surface); color: var(--ev-text); font-size: 12px; }
.vg-wall-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.vg-wall-title .ev-ic { width: 14px; height: 14px; color: var(--ev-text-3); }
.vg-wall-counts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.vg-wall-urgent { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; }
.vg-wall-line { overflow: hidden; color: var(--ev-text-2); white-space: nowrap; text-overflow: ellipsis; }
.vg-wall .ev-btn { margin-left: auto; }
.ws-sala-bar .vg-wall { flex-basis: 100%; }
/* on the wall the panel shares the band's row with the subject, the meta and the exit: a small basis, so the row never wraps at 1366 px */
.sala-muro-vig { flex: 1 1 300px; min-width: 260px; max-width: 480px; }
.sala-muro-band .vg-wall { padding: 8px 12px; font-size: 14px; }
.sala-muro-band .vg-wall .vg-sev { font-size: 13px; line-height: 22px; }
/* F5: Ajustes › Puestos › Lecturas de la vigilancia con identidades, one switch per network */
.ad-subswitches { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 14px; min-width: 0; }
.ad-subswitch { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ev-text); cursor: pointer; }