/* RADAR operator console — the Al Rescate console shell.
 *
 * Same design language as the DNS console (AI-STD-003 §2.4 and §3): the token
 * set, the card/toprow layout, the filter chips, the context menu and the pager
 * are ported from `ionos-dns-mcp/console/common.css` so an operator moving
 * between the two consoles reads the same page.
 *
 * ALL colour lives in custom properties on :root. The complete LIGHT palette is
 * defined on bare :root; the dark blocks redefine only what changes, once under
 * prefers-color-scheme (guarded so an explicit light choice wins) and once under
 * [data-theme="dark"] (so an explicit dark choice wins over a light OS). No
 * colour has its only definition inside a media query or a theme block. */
:root {
  --blue:#0b5fa5;
  --blue-ink:#ffffff;
  --accent:#0b5fa5;   /* blue as INK, not as ground */
  --bg:#f4f6f8;
  --surface:#ffffff;
  --surface-2:#f8fafb;
  --line:#d7dde3;
  --line-soft:#eef1f4;
  --ink:#1b2733;
  --gray:#5a6572;
  --ok:#1a7f37;
  --ok-bg:#e7f5ec;
  --warn:#9a6700;
  --warn-bg:#fff4e5;
  --bad:#b42318;
  --bad-bg:#fdecea;
  --info-bg:#eef5fb;
  --neutral-bg:#eef1f4;
  --legacy:#5b3fa0;
  --legacy-bg:#f3eefb;
  --hover:#f0f5fa;
  --focus:#0b5fa5;
  --shadow:rgba(27,39,51,.06);
  --on-blue-soft:rgba(255,255,255,.12);
  --on-blue-mid:rgba(255,255,255,.22);
  --on-blue-strong:rgba(255,255,255,.45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue:#123c62;
    --accent:#7bb8ea;
    --bg:#12171d;
    --surface:#1a2028;
    --surface-2:#212832;
    --line:#333d49;
    --line-soft:#262e38;
    --ink:#e7ecf1;
    --gray:#9aa6b3;
    --ok:#5cc98a;      /* #1a7f37 fails contrast on a dark ground */
    --ok-bg:#12321f;
    --warn:#e0b155;
    --warn-bg:#332813;
    --bad:#ff8a7a;
    --bad-bg:#3a1a17;
    --info-bg:#16283a;
    --neutral-bg:#262e38;
    --legacy:#b9a4e8;
    --legacy-bg:#2a2340;
    --hover:#232c37;
    --focus:#7bb8ea;
    --shadow:rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  --blue:#123c62;
  --accent:#7bb8ea;
  --bg:#12171d;
  --surface:#1a2028;
  --surface-2:#212832;
  --line:#333d49;
  --line-soft:#262e38;
  --ink:#e7ecf1;
  --gray:#9aa6b3;
  --ok:#5cc98a;
  --ok-bg:#12321f;
  --warn:#e0b155;
  --warn-bg:#332813;
  --bad:#ff8a7a;
  --bad-bg:#3a1a17;
  --info-bg:#16283a;
  --neutral-bg:#262e38;
  --legacy:#b9a4e8;
  --legacy-bg:#2a2340;
  --hover:#232c37;
  --focus:#7bb8ea;
  --shadow:rgba(0,0,0,.4);
}

* { box-sizing:border-box; }
/* `display:flex` on a class beats [hidden]'s default display:none, so an element
   marked hidden still takes its space — an empty box where a menu isn't. */
[hidden] { display:none !important; }
body { margin:0; font-family:-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); }
a { color:var(--accent); }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }

/* --- header + nav --- */
header { background:var(--blue); color:var(--blue-ink); padding:0 24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; min-height:56px; }
.header-left { display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:10px 0; }
header h1 { margin:0; font-size:18px; font-weight:600; white-space:nowrap; color:var(--blue-ink); }
nav.navbar { display:flex; gap:4px; }
nav.navbar a { color:var(--blue-ink); text-decoration:none; font-size:13.5px; padding:6px 12px; border-radius:6px; opacity:.85; }
nav.navbar a:hover { opacity:1; background:var(--on-blue-soft); }
nav.navbar a.active { opacity:1; background:var(--on-blue-mid); font-weight:600; }
.header-right { display:flex; align-items:center; gap:12px; padding:10px 0; }
.toggle { display:flex; border:1px solid var(--on-blue-strong); border-radius:6px; overflow:hidden; }
.toggle a, .toggle button { background:transparent; color:var(--blue-ink); border:none; font-size:12px; font-weight:600; padding:4px 9px; cursor:pointer; opacity:.75; text-decoration:none; line-height:18px; }
.toggle a.active, .toggle button.active { background:var(--on-blue-mid); opacity:1; }
.who { font-size:13px; opacity:.9; white-space:nowrap; color:var(--blue-ink); }
.who a { color:var(--blue-ink); text-decoration:underline; margin-left:10px; }
@media (max-width:720px) {
  header { flex-direction:column; align-items:flex-start; }
  .header-left { width:100%; }
  nav.navbar { width:100%; flex-wrap:wrap; }
}

/* --- layout --- */
main { max-width:1180px; margin:24px auto; padding:0 16px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:20px 24px; margin-bottom:20px; }
.card h2 { font-size:15px; margin:0 0 14px; }
.card.narrow { max-width:420px; display:flex; flex-direction:column; gap:10px; }
.card.narrow label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--gray); }
.card input, .card textarea { width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); font-size:13.5px; }
.toprow { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.toprow h2 { margin:0; }
h1 { font-size:18px; }
h1 small { color:var(--gray); font-weight:400; font-size:13px; }
.muted { color:var(--gray); font-size:13px; }
.error { color:var(--bad); background:var(--bad-bg); border:1px solid var(--bad); border-radius:6px; padding:8px 10px; margin:10px 0; font-size:13px; }

/* --- tables --- */
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th { text-align:left; color:var(--gray); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
th a.sort { color:inherit; text-decoration:none; display:block; }
th a.sort:hover { color:var(--ink); }
td { padding:7px 8px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
tbody tr[data-href] { cursor:pointer; }
tbody tr[data-href]:hover { background:var(--hover); }
.tablewrap { overflow-x:auto; }
.tablewrap table { min-width:62rem; }
.tablewrap thead th { position:sticky; top:0; background:var(--surface); box-shadow:inset 0 -1px 0 var(--line); z-index:1; }
td .empty { color:var(--line); }
td.score { font-weight:600; color:var(--accent); }

/* --- pills --- */
.pill { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; font-weight:600; background:var(--neutral-bg); color:var(--gray); }
.pill.accepted, .pill.confirmed { background:var(--ok-bg); color:var(--ok); }
.pill.dismissed { background:var(--bad-bg); color:var(--bad); }
.pill.watch { background:var(--legacy-bg); color:var(--legacy); }
.pill.candidate { background:var(--info-bg); color:var(--accent); }

/* --- filters, chips, context menu, pagination --- */
.filters { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px; }
.filters input[type=text], .filters input:not([type]) { flex:1 1 240px; min-width:180px; padding:7px 10px; border:1px solid var(--line); border-radius:6px; font-size:13.5px; background:var(--surface); color:var(--ink); }
.filters select { padding:6px 8px; border:1px solid var(--line); border-radius:6px; font-size:13px; background:var(--surface); color:var(--ink); }
.filters .check { display:flex; align-items:center; gap:5px; font-size:13px; color:var(--gray); white-space:nowrap; }
.filters .check input { flex:none; min-width:0; width:auto; }
.btn { font-size:12px; color:var(--gray); border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:6px 12px; cursor:pointer; text-decoration:none; }
.btn:hover { background:var(--hover); color:var(--ink); }
.btn.primary { background:var(--blue); border-color:var(--blue); color:var(--blue-ink); }
.btn.primary:hover { background:var(--blue); color:var(--blue-ink); opacity:.9; }
.chips { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; }
.chip { display:inline-flex; align-items:center; gap:6px; background:var(--info-bg); color:var(--ink); border:1px solid var(--line); border-radius:14px; padding:3px 8px 3px 10px; font-size:12.5px; max-width:340px; }
.chip.neg { background:var(--bad-bg); border-color:var(--bad); }
.chip .op { font-weight:700; color:var(--gray); }
.chip .val { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px; }
.chip a.x { background:none; border:none; color:var(--gray); cursor:pointer; font-size:14px; line-height:1; padding:0 2px; text-decoration:none; }
.chip a.x:hover { color:var(--bad); }
.hint { font-size:12px; color:var(--gray); margin:0 0 12px; }
.ctx { position:absolute; z-index:50; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 4px 16px var(--shadow); padding:4px; min-width:230px; }
.ctx .head { font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--gray); padding:6px 10px 4px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:320px; }
.ctx button { display:block; width:100%; text-align:left; background:none; border:none; color:var(--ink); font-size:13px; padding:7px 10px; border-radius:5px; cursor:pointer; }
.ctx button:hover, .ctx button:focus { background:var(--hover); outline:none; }
.pager { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--gray); margin-top:12px; }
.pager .range { font-variant-numeric:tabular-nums; }

/* --- queue tabs ---
   A queue is a different kind of work, not a saved filter, so it reads as
   navigation rather than as another control in the filter bar. */
nav.queues { margin:0 0 14px; display:flex; gap:4px; flex-wrap:wrap; }
nav.queues .queue { padding:6px 14px; border:1px solid var(--line); border-bottom:none;
  border-radius:6px 6px 0 0; background:var(--surface-2); color:var(--gray);
  text-decoration:none; font-size:13px; }
nav.queues .queue:hover { background:var(--hover); color:var(--ink); }
nav.queues .queue.active { background:var(--surface); color:var(--ink); font-weight:600; border-color:var(--line); }

/* --- triage record ---
   One decision at a time: the card is the whole view, so there is nothing to
   browse and the next action is obvious. */
.triage-head { display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.triage-head h1 { margin:0; }
.triage-head h1 a.crumb { color:inherit; text-decoration:none; }
.triage-head h1 a.crumb:hover { text-decoration:underline; }
.triage-head .remaining { color:var(--gray); font-size:13px; font-variant-numeric:tabular-nums; }
.record-nav { margin-left:auto; display:flex; align-items:center; gap:10px; }
.record-nav .step { font-size:12px; color:var(--gray); text-decoration:none; border:1px solid var(--line);
  border-radius:6px; padding:6px 12px; background:var(--surface); white-space:nowrap; }
.record-nav .step:hover { background:var(--hover); color:var(--ink); }
.record-nav .step.off { color:var(--line); border-color:var(--line-soft); background:var(--surface-2); }
.record-nav .position { color:var(--gray); font-size:12.5px; font-variant-numeric:tabular-nums; }
.record-nav .position.off { font-style:italic; }

.triage-card { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:20px 24px; }
.triage-card h2 { margin:0 3.5rem .8rem 0; font-size:15px; line-height:1.45; }
.triage-score { position:absolute; top:18px; right:24px; font-size:26px; font-weight:700;
  color:var(--accent); font-variant-numeric:tabular-nums; }
.triage-attrs { display:grid; grid-template-columns:max-content 1fr; gap:4px 16px; margin:0 0 4px; font-size:13.5px; }
.triage-attrs dt { color:var(--gray); }
.triage-attrs dd { margin:0; }
.triage-body { color:var(--gray); font-size:13px; line-height:1.55; margin:12px 0 0; }
.triage-form { display:flex; flex-direction:column; margin-top:20px; }
.triage-note { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px;
  background:var(--surface); color:var(--ink); font-size:13.5px; margin-bottom:20px; }
.triage-note:focus { outline:2px solid var(--focus); outline-offset:0; border-color:var(--focus); }
.triage-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.triage-actions button { font-size:13px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); border-radius:6px; padding:7px 16px; cursor:pointer; }
.triage-actions button:hover { background:var(--hover); }
.triage-actions .ok { background:var(--ok); border-color:var(--ok); color:#fff; }
.triage-actions .ok:hover { background:var(--ok); opacity:.9; }
.triage-actions .skips { margin-left:auto; display:flex; gap:16px; }
.triage-actions .skips a { font-size:12.5px; color:var(--gray); }
.triage-done { color:var(--ok); font-weight:600; }
.triage-readonly { color:var(--gray); font-style:italic; margin-top:16px; font-size:13px; }

/* --- detail table (one record's attributes) --- */
table.detail { width:auto; }
table.detail th { width:220px; color:var(--gray); font-weight:600; border-bottom:1px solid var(--line-soft); }
table.detail td { border-bottom:1px solid var(--line-soft); }
p.ok { color:var(--ok); font-weight:600; }

/* A tender title is a paragraph, not a label. Left to wrap it makes a row four
   lines tall and the table stops being scannable — the point of a list is to
   compare rows, and you cannot compare what you have to scroll past. The full
   text is one click away, and in the title attribute meanwhile. */
td[data-field="title"] { max-width:22rem; }
td[data-field="title"] { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
td[data-field="title"] a { display:block; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
td[data-field="organismo"] { max-width:16rem; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
/* Dates and codes are single tokens; breaking them mid-value is never useful. */
td[data-field="plazo"], td[data-field="cpv"], td[data-field="review_status"],
td.num { white-space:nowrap; }

/* --- control plane --- */
.banner { display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; border:1px solid var(--line); border-radius:8px; padding:12px 16px;
  margin:12px 0; font-size:13px; background:var(--surface-2); }
.banner.warn { border-color:var(--warn); background:var(--warn-bg); color:var(--warn); }
.banner form { margin:0; }
.chip form.inline { display:inline; margin:0; }
.chip .x { background:none; border:none; color:var(--gray); cursor:pointer;
  font-size:14px; line-height:1; padding:0 2px; }
.chip .x:hover { color:var(--bad); }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  background:var(--neutral-bg); padding:1px 5px; border-radius:4px; }
/* A key is shown exactly once; make that hard to scroll past. */
.key-issued { border-color: var(--warn); background: var(--warn-bg); }
.key-issued .warn-line { color: var(--warn); margin: 0 0 10px; font-size: 13px; }
pre.secret { margin: 0; padding: 12px 14px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-x: auto; user-select: all; }
tr.revoked td { opacity: .55; }
form.inline { display: inline; margin: 0; }