/* Bjaland AI Hub panel: a coloured top bar and a quiet neutral interface around it. Tokens
   below. */
:root {
  --bg: #f2f3f5;
  --surface: #ffffff;
  --surface-2: #f7f8f9;
  --border: #e1e4e8;
  --border-strong: #c9ced4;
  --text: #1a1d21;
  --text-2: #3a4148;
  --muted: #5e6670;
  --ink: #1a1d21;
  --ink-text: #ffffff;
  --accent: #1f3a5f;
  --accent-text: #ffffff;
  --danger: #b42318;
  /* E25: red as a fill under white text; --danger is red as text (lighter in dark mode) */
  --danger-solid: #b42318;
  --ok-bg: #e6f4ec;
  --ok-text: #1d6b3e;
  --warn-bg: #fdebd9;
  --warn-text: #7a3e00;
  --err-bg: #fdecec;
  --err-text: #9b2323;
  --info-bg: #eaf0fb;
  --info-text: #24467f;
  --notice-bg: #fff4d6;
  --notice-text: #6b4a00;
  /* E25: brand accent as a line / mark (tab underline, selected row, notes edge); dark mode
     lightens it so a dark brand colour stays visible on dark surfaces */
  --accent-line: var(--accent);
  /* keyboard focus ring, at least 3:1 against the surfaces (WCAG 1.4.11) */
  --focus: color-mix(in srgb, var(--accent) 60%, black);
  /* edge of fields (input, select, textarea) and the off switch track: 3:1 against the surfaces */
  --control-border: #7d8691;
  --switch-thumb: #ffffff;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 12px 32px rgba(26, 29, 33, .12);
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  color-scheme: light;
}
/* E50: dark rules apply with the system setting unless the user chose Claro, and always with Oscuro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15181c;
    --surface: #1d2126;
    --surface-2: #23282e;
    --border: #30363d;
    --border-strong: #454c55;
    --text: #e8ebee;
    --text-2: #c9ced4;
    --muted: #a0a8b1;
    --ink: #e8ebee;
    --ink-text: #15181c;
    --ok-bg: #173323;
    --ok-text: #8fdcaa;
    --warn-bg: #3a2a12;
    --warn-text: #f3c98a;
    --err-bg: #3a1c1c;
    --err-text: #f2a6a6;
    --info-bg: #1b2a40;
    --info-text: #a9c4ef;
    --notice-bg: #3a2f12;
    --notice-text: #f3d38a;
    --danger: #ff8a80;
    --accent-line: color-mix(in srgb, var(--accent) 40%, white);
    --focus: color-mix(in srgb, var(--accent) 35%, white);
    --control-border: #737b86;
    --switch-thumb: #15181c;
    --shadow: 0 12px 32px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #15181c;
    --surface: #1d2126;
    --surface-2: #23282e;
    --border: #30363d;
    --border-strong: #454c55;
    --text: #e8ebee;
    --text-2: #c9ced4;
    --muted: #a0a8b1;
    --ink: #e8ebee;
    --ink-text: #15181c;
    --ok-bg: #173323;
    --ok-text: #8fdcaa;
    --warn-bg: #3a2a12;
    --warn-text: #f3c98a;
    --err-bg: #3a1c1c;
    --err-text: #f2a6a6;
    --info-bg: #1b2a40;
    --info-text: #a9c4ef;
    --notice-bg: #3a2f12;
    --notice-text: #f3d38a;
    --danger: #ff8a80;
    --accent-line: color-mix(in srgb, var(--accent) 40%, white);
    --focus: color-mix(in srgb, var(--accent) 35%, white);
    --control-border: #737b86;
    --switch-thumb: #15181c;
    --shadow: 0 12px 32px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--font); }
h1 { font-size: 1.75rem; line-height: 1.2; letter-spacing: -.02em; font-weight: 800; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; font-weight: 800; margin: 0 0 .75rem; }
h3 { font-size: 1rem; font-weight: 800; margin: 0 0 .6rem; }
h4 { margin: 0 0 .5rem; }
p { margin: 0 0 .75rem; }
a { color: var(--text); text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
code, pre, .code { font-family: var(--mono); font-size: .88em; }
pre { white-space: pre-wrap; word-break: break-word; margin: .25rem 0; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.strong { font-weight: 700; }
.spacer { flex: 1; }
.lead { color: var(--muted); font-size: 1.02rem; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.splash { display: grid; place-items: center; height: 100vh; color: var(--muted); }
.error-text { color: var(--danger); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- shell ---------- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.brandbar {
  background: var(--bar-bg, var(--accent)); color: var(--bar-fg, var(--accent-text));
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding: 0 1.75rem; min-height: 64px;
}
.brandbar a { color: inherit; text-decoration: none; }
.brand { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--bar-fg, #fff); color: var(--bar-bg, var(--accent)); font-weight: 800; font-size: 1.1rem;
}
.brand-text { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.brand-name { opacity: .88; }
.brand-text .brand-name:first-child { font-weight: 800; opacity: 1; font-size: 1.05rem; }
.topnav { display: flex; flex-wrap: wrap; gap: .25rem; }
.toplink { padding: .5rem .8rem; border-radius: var(--radius-sm); opacity: .88; font-weight: 600; }
.toplink:hover { opacity: 1; background: var(--bar-hover, rgba(255, 255, 255, .14)); }
.toplink[aria-current="page"] { opacity: 1; background: var(--bar-active, rgba(255, 255, 255, .2)); }
.brandbar-end { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.menu-toggle { display: none; }
.account { position: relative; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; font-weight: 800;
  background: var(--bar-hover, rgba(255, 255, 255, .22)); color: inherit;
}
.account-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 220px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .4rem; display: flex; flex-direction: column;
}
.account-menu a, .account-menu button {
  text-align: left; border: 0; background: none; padding: .6rem .75rem; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; font-weight: 600; min-height: 40px;
}
.account-menu a:hover, .account-menu button:hover { background: var(--surface-2); }
.account-who { display: flex; flex-direction: column; padding: .5rem .75rem .6rem; border-bottom: 1px solid var(--border); margin-bottom: .3rem; }
.content { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 1.75rem; }

@media (max-width: 900px) {
  .brandbar { padding: 0 1rem; }
  .menu-toggle {
    display: grid; place-items: center; margin-left: auto; width: 44px; height: 44px; padding: 0;
    background: transparent; color: inherit; border: 1px solid var(--bar-hover, rgba(255, 255, 255, .3));
  }
  .topnav, .brandbar-end { display: none; }
  .brandbar.menu-open .topnav { display: flex; flex-direction: column; width: 100%; padding-bottom: .75rem; }
  .brandbar.menu-open .brandbar-end { display: flex; width: 100%; margin: 0 0 .75rem; }
  .brandbar.menu-open .account-menu { left: 0; right: auto; }
  .brand-name { display: none; }
  .brand-text .brand-name:first-child { display: inline; }
  .content { padding: 1rem; }
}

/* ---------- section frames ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.page-head > div:first-child { flex: 1 1 360px; }
.section-head {
  margin: -1.75rem -1.75rem 1.5rem; padding: .9rem 1.75rem 0; background: var(--surface);
  box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax);
  border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: .5rem;
}
.section-title { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.section-title h1 { font-size: 1.35rem; margin: 0; }
.crumb { color: var(--muted); text-decoration: none; }
.crumb::after { content: "/"; margin-left: .75rem; color: var(--border-strong); }
.tabs-nav { display: flex; flex-wrap: wrap; gap: .15rem; }
.tabs-nav .tab, .tabs-nav a.tab {
  border: 0; background: none; padding: .7rem .85rem; border-radius: 0; color: var(--text-2);
  text-decoration: none; font-weight: 600; min-height: 44px;
}
.tabs-nav .tab:hover { color: var(--text); }
.tabs-nav .tab[aria-current="page"], .tabs-nav .tab[aria-selected="true"] { color: var(--text); box-shadow: inset 0 -3px 0 var(--accent-line); }
@media (max-width: 900px) { .section-head { margin: -1rem -1rem 1rem; padding: .75rem 1rem 0; } .tabs-nav { overflow-x: auto; flex-wrap: nowrap; } }
.settings-layout { display: flex; flex-wrap: wrap; gap: 1.75rem; align-items: flex-start; }
.side-nav { flex: 0 1 220px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 1rem; }
.side-nav a { padding: .6rem .8rem; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; font-weight: 600; }
.side-nav a:hover { background: var(--surface); }
.side-nav a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: inset 3px 0 0 var(--accent-line); }
.settings-body { flex: 999 1 560px; min-width: 0; }
@media (max-width: 900px) { .side-nav { position: static; flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; } }

/* ---------- building blocks ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; }
.block { margin-bottom: 2rem; }
.empty { background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.calm { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; color: var(--text-2); }
.pad { padding: 1rem 1.25rem; }
.pill, .badge {
  display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .6rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border);
}
.pill.ok, .badge.ok { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.pill.warn { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.badge.err { background: var(--err-bg); color: var(--err-text); border-color: transparent; }
.alert { padding: .75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; cursor: pointer; }
.alert.error { background: var(--err-bg); color: var(--err-text); }
.alert.ok { background: var(--ok-bg); color: var(--ok-text); }
.alert.notice { background: var(--notice-bg); color: var(--notice-text); cursor: default; margin: .25rem 0 .5rem; }
.secret { display: block; padding: .6rem; background: var(--surface); border-radius: var(--radius-sm); word-break: break-all; user-select: all; }

/* buttons: dark ink for the main action, outlined for the rest, brand colour only in the bar */
button, .btn {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--radius-sm); padding: .55rem 1rem; min-height: 40px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
button:hover, .btn:hover { border-color: var(--text-2); }
button.primary, .btn.primary { background: var(--ink); color: var(--ink-text); border-color: var(--ink); }
button.primary:hover, .btn.primary:hover { filter: brightness(1.25); }
button.link { background: none; border: 0; padding: 0; min-height: 0; color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; font-weight: 600; }
button.link:hover { text-decoration-color: currentColor; }
button.link.danger, .danger { color: var(--danger); }
button:disabled { opacity: .5; cursor: default; filter: none; }
button.icon { min-height: 36px; padding: .2rem .55rem; border-color: var(--border); background: var(--surface); filter: grayscale(1); opacity: .75; }
button.icon:hover { opacity: 1; }
button.icon.active { filter: none; opacity: 1; border-color: var(--text-2); }
.chip { border-radius: 999px; padding: .4rem .9rem; font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--ink-text); border-color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }

input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--control-border);
  border-radius: var(--radius-sm); padding: .55rem .7rem; min-height: 40px; max-width: 100%;
}
input[type=checkbox], input[type=radio] { min-height: 0; width: 18px; height: 18px; accent-color: var(--ink); }
input[type=file] { padding: .4rem; }
textarea { width: 100%; font-family: var(--mono); font-size: .88rem; }
textarea.prose { font-family: var(--font); font-size: .95rem; }
label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; }
label > input, label > select, label > textarea { font-weight: 400; }
label.check, label.inline { flex-direction: row; align-items: center; gap: .5rem; font-weight: 500; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem 1rem; display: flex; flex-direction: column; gap: .5rem; margin: 0; }
legend { color: var(--muted); padding: 0 .35rem; font-weight: 600; }
details > summary { cursor: pointer; font-weight: 600; }
.form { display: flex; flex-direction: column; gap: 1rem; max-width: 560px; }
.form.wide, .form.wide-form, .wide-form { max-width: none; }
.form h3 { margin: .5rem 0 0; }
.form-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.toolbar .grow, .grow { flex: 1 1 220px; }
.more-filters { flex: 1 1 100%; }
.more-filters .form-row { margin-top: .6rem; }
.wide-input { flex: 1; min-width: 16rem; }
input.narrow { width: 8rem; }

/* tables */
.table-box, .table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; margin-bottom: 1rem; }
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table-box .table, .table-wrap .table { border: 0; }
.table:not(.table-box .table):not(.table-wrap .table) { border: 1px solid var(--border); border-radius: var(--radius); }
.table th, .table td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table th { font-size: .82rem; font-weight: 600; color: var(--muted); }
.table tr.inactive td { color: var(--muted); }
/* E25: inactive rows say so with the muted colour and a grey logo, not with opacity (which took
   their text under 4.5:1) */
.table tr.inactive .ch-icon { opacity: .55; filter: grayscale(1); }
.table tr.selected td:first-child { box-shadow: inset 3px 0 var(--accent-line); }
.table .actions { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; }
/* E24: a header is always a table cell (a flex `th.actions` left the header row short of the
   last column); in data tables the action cell too, its buttons flow in `.dt-actions` */
.table th.actions, .data-table .table td.actions { display: table-cell; }
.dt-actions { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; }
.table.compact th, .table.compact td { padding: .45rem .6rem; font-size: .88rem; }

/* home */
/* home alert (E21, "A · alerta única con severidad"): one bar, coloured by the worst item */
.att-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; border-radius: var(--radius); padding: 1rem 1.25rem; border: 1px solid transparent; }
.att-alert > .ico { width: 28px; height: 28px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.att-alert-text { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.att-alert-text strong { font-size: 1rem; }
.att-alert-text span { font-size: .93rem; color: var(--text-2); }
.att-alert-btn { min-height: 44px; font-weight: 700; }
.att-alert-btn .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.att-alert.error { background: var(--err-bg); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.att-alert.error > .ico { color: var(--danger); }
.att-alert.error strong { color: var(--err-text); }
.att-alert.error .att-alert-btn { background: var(--danger-solid); border-color: var(--danger-solid); color: #fff; }
.att-alert.error .att-alert-btn:hover { filter: brightness(1.12); }
.att-alert.warning { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn-text) 30%, transparent); color: var(--warn-text); }
.att-alert.warning strong { color: var(--warn-text); }
.att-alert.warning .att-alert-btn { background: var(--surface); color: var(--warn-text); border-color: color-mix(in srgb, var(--warn-text) 55%, transparent); }
.att-alert.ok { background: var(--ok-bg); color: var(--ok-text); font-weight: 600; padding: .85rem 1.25rem; gap: .75rem; }
.att-alert.ok > .ico { width: 22px; height: 22px; stroke-width: 2.4; }

/* home = status monitor (E29, option A): resources, live usage, satisfaction, third parties, totals.
   Fixed heights for cards and chart so the 5 s refresh never moves the page. */
.status-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.status-head h1 { margin: 0; }
.live-indicator { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 700; color: var(--ok-text); min-width: 16rem; }
.live-dot { width: 9px; height: 9px; border-radius: 999px; background: currentColor; flex: none; }
.live-indicator.offline { color: var(--warn-text); }
.period-switch { margin-left: auto; display: flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.period-switch button { border: 0; border-radius: 0; min-height: 44px; min-width: 52px; padding: .35rem .8rem; background: var(--surface); color: var(--text-2); font-weight: 700; }
.period-switch button + button { border-left: 1px solid var(--border); }
.period-switch button[aria-pressed="true"] { background: var(--ink); color: var(--ink-text); }
.home-attention { margin-bottom: 1rem; }
.home-attention .att-alert { padding: .6rem 1rem; }
.home-attention .att-alert-btn { min-height: 40px; }
.status-res { margin-bottom: 1rem; }
.res-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.res-card { margin: 0; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .35rem; min-width: 0; min-height: 168px; }
.res-top { display: flex; justify-content: space-between; gap: .5rem; font-size: .75rem; font-weight: 800; letter-spacing: .04em; color: var(--muted); }
.res-label { text-transform: uppercase; white-space: nowrap; }
.res-sub { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-value { font-size: 1.45rem; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-value.na { font-size: 1rem; font-weight: 700; color: var(--muted); }
.meter { display: block; height: 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--accent-line); border-radius: 999px; transition: width .4s; }
.meter > span.warn { background: var(--warn-text); }
.spark { width: 100%; height: 36px; display: block; }
.spark polyline { fill: none; stroke: var(--accent-line); stroke-width: 2; }
.res-extra { min-height: 1.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-placeholder { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; }
.status-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .75rem; margin-bottom: .75rem; }
.status-row > .card { margin: 0; min-width: 0; }
.status-row h2 { font-size: 1rem; margin: 0 0 .5rem; }
.usage-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem; }
.usage-head h2 { margin: 0; }
.usage-fig { font-size: .85rem; color: var(--muted); }
.usage-fig strong { color: var(--text); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.usage-chart { position: relative; margin-top: .5rem; }
.usage-chart svg { display: block; width: 100%; height: 150px; }
.usage-chart .grid { stroke: var(--border); stroke-width: 1; }
.usage-chart .grid.soft { stroke-dasharray: 4 4; }
.usage-chart polyline { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.usage-chart .l-msgs, .sw.msgs { stroke: var(--accent-line); background: var(--accent-line); }
.usage-chart .l-convs, .sw.convs { stroke: var(--warn-text); background: var(--warn-text); }
.usage-max { position: absolute; top: 0; left: 0; }
.usage-axis { display: flex; justify-content: space-between; gap: .5rem; }
.usage-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--text-2); margin-top: .25rem; }
.sw { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: .35rem; }
.sat-main { display: flex; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.donut { flex: none; }
.donut circle { fill: none; stroke-width: 4; }
.donut .track { stroke: var(--surface-2); }
.donut .val { stroke: var(--ok-text); }
.sat-figs { display: flex; flex-direction: column; }
.sat-figs strong { font-size: 1.6rem; line-height: 1.1; }
.sat-trend { color: var(--ok-text); font-weight: 700; }
.sat-trend.down { color: var(--danger); }
.sat-bots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.sat-bots li { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) 3rem; gap: .5rem; align-items: center; font-size: .88rem; }
.sat-bot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 24px; }
.sat-bots .meter { height: 8px; }
.sat-bots .meter > span { background: var(--ok-text); }
.sat-bots .num { text-align: right; font-variant-numeric: tabular-nums; }
.status-services .table-box { position: relative; margin: 0; max-height: 320px; overflow: auto; }
.svc-table th, .svc-table td { padding: .45rem .7rem; white-space: nowrap; }
.svc-table td.svc-bad { color: var(--danger); font-weight: 800; }
.status-totals .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.status-totals .tile { background: var(--surface-2); border-radius: var(--radius-sm); padding: .5rem .7rem; display: flex; flex-direction: column; min-width: 0; }
.status-totals .tile strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { .res-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .status-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .period-switch { margin-left: 0; width: 100%; }
  .period-switch button { flex: 1; min-width: 0; }
  .live-indicator { min-width: 0; }
}

/* Avisos page */
.back-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; margin-bottom: .25rem; }
.attention-table .dt-toolbar .chips { order: -1; }
.attention-table .chip { min-height: 44px; padding: .5rem 1rem; }
.attention-table .sample { color: var(--text-2); }
.attention-table td { vertical-align: middle; }
.attention-table td.att-act { text-align: right; white-space: nowrap; padding-top: .2rem; padding-bottom: .2rem; }
.attention-table td.att-act a { display: inline-flex; align-items: center; min-height: 44px; }
.sev-badge { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 6px; border: 1px solid transparent; white-space: nowrap; }
.sev-badge.error { background: var(--danger-solid); color: #fff; }
.sev-badge.warning { background: var(--warn-bg); color: var(--warn-text); border-color: color-mix(in srgb, var(--warn-text) 30%, transparent); }

/* icon-only row actions (E21): name in aria-label and in a tooltip on hover / keyboard focus */
.icon-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.icon-actions .clone-form { flex: 1 1 100%; }
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); text-decoration: none;
}
.icon-btn:hover { border-color: var(--text-2); }
.icon-btn.primary { background: var(--ink); color: var(--ink-text); border-color: var(--ink); }
.icon-btn.danger { color: var(--danger); }
.icon-btn .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn .tip {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 20;
  background: var(--ink); color: var(--ink-text); font-size: .78rem; font-weight: 600; line-height: 1.3;
  padding: .3rem .55rem; border-radius: 6px; white-space: nowrap; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
}
.icon-btn:hover .tip, .icon-btn:focus-visible .tip { opacity: 1; visibility: visible; }
/* the rightmost icon's tooltip opens leftwards so it is not cut by the table edge */
.icon-actions > :last-child .tip, .icon-actions > :last-child .icon-btn .tip { left: auto; right: 0; transform: none; }
/* the icons bring their own flex row: the cell stays a table cell so the row keeps its height */
.bots-table td.actions { display: table-cell; min-width: 18.5rem; vertical-align: middle; }

/* stats and modules */
.stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.stat { min-width: 180px; flex: 1 1 180px; margin: 0; }
.stat-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.stat-label { color: var(--muted); }
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.module { margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.module.off { border-style: dashed; color: var(--text-2); }
.module-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.module-head h1 { margin: 0; }
.switch { position: relative; width: 42px; height: 24px; display: inline-block; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--control-border); border-radius: 999px; transition: .15s; cursor: pointer; }
.switch span::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: var(--switch-thumb); border-radius: 50%; transition: .15s; }
.switch input:checked + span { background: var(--ok-text); }
.switch input:checked + span::before { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

/* sign-in */
.login { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }
.login-band { background: var(--bar-bg, var(--accent)); height: 8px; }
.login > .login-card { place-self: center; }
.login-card { width: min(400px, calc(100% - 2rem)); display: flex; flex-direction: column; gap: 1rem; padding: 2rem; box-shadow: var(--shadow); border: 0; }
.login-card h1 { margin: 0; font-size: 1.5rem; }
.login-card h2 { color: var(--muted); font-weight: 500; margin: -.5rem 0 .25rem; font-size: 1rem; }
.login-card button.primary { min-height: 46px; background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

/* knowledge: drop zone and viewer */
label.dropzone, .dropzone {
  flex-direction: row; font-weight: 500;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.5rem; margin-bottom: 1rem;
  background: var(--surface); border: 2px dashed var(--border-strong); border-radius: var(--radius); cursor: pointer;
}
.dropzone.over { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.dropzone .dz-text { flex: 1 1 280px; display: flex; flex-direction: column; gap: .15rem; font-weight: 500; }
.dropzone .dz-text strong { font-size: 1.05rem; }
.badge.status-docstatus\.ready { color: var(--ok-text); background: var(--ok-bg); border-color: transparent; }
.badge.status-docstatus\.error { color: var(--warn-text); background: var(--warn-bg); border-color: transparent; }
.badge.status-docstatus\.processing, .badge.status-docstatus\.pending { color: var(--info-text); background: var(--info-bg); border-color: transparent; }
tr.row-error td { background: color-mix(in srgb, var(--warn-bg) 45%, var(--surface)); }
.chunk { border-top: 1px solid var(--border); padding: .6rem 0; }
.chunk.focused { background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: var(--radius-sm); padding: .6rem; }
.viewer { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .viewer { grid-template-columns: 1fr; } }
.viewer-pane { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; min-width: 0; display: flex; flex-direction: column; gap: .6rem; }
.viewer-frame { width: 100%; height: 72vh; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.viewer-chunks { max-height: 72vh; overflow-y: auto; }
/* E137: the head («Descargar original») keeps the panel's 1rem rhythm above the panes, also when it
   wraps under the title on a phone. */
.viewer-head { margin-bottom: 1rem; }

/* bots */
.bot-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; align-items: start; }
.bot-form > .form-row { grid-column: 1 / -1; }
.binding { padding: .35rem 0; border-bottom: 1px solid var(--border); }
.binding:last-of-type { border-bottom: 0; }
.rules { margin: .25rem 0 .5rem 1.6rem; display: flex; flex-direction: column; gap: .4rem; }
.rules label { font-size: .88rem; }
.clone-form { margin-top: .5rem; width: 100%; }
.clone-form input { flex: 1; min-width: 8rem; }
.list-item { padding: .5rem 0; border-bottom: 1px dashed var(--border); }
.list-item textarea { margin-top: .35rem; }
.survey-editor { display: flex; flex-direction: column; gap: .5rem; }
.version { border-bottom: 1px solid var(--border); padding: .4rem 0; }

/* try a bot: end-user view + inspector */
.try-layout { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.enduser { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.caption { color: var(--muted); font-size: .9rem; margin: 0; }
.widget-frame { width: 100%; max-width: 560px; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; min-height: 560px; }
.widget-head { background: var(--accent); color: var(--accent-text); padding: .75rem 1rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ghost-on-brand { background: transparent; color: inherit; border-color: color-mix(in srgb, var(--accent-text) 45%, transparent); min-height: 36px; padding: .3rem .8rem; }
.ghost-on-brand:hover { border-color: var(--accent-text); }
.mode-select { min-height: 36px; padding: .3rem .5rem; }
.chat { flex: 1; display: flex; flex-direction: column; gap: .75rem; padding: 1rem; background: var(--surface-2); overflow-y: auto; max-height: 64vh; }
.chat-empty { color: var(--muted); text-align: center; margin: auto; padding: 2rem 1rem; }
.bubble { max-width: 92%; padding: .7rem .9rem; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.bubble.user { align-self: flex-end; background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.bubble.user a { color: inherit; }
.bubble.assistant { align-self: flex-start; }
.bubble.no-context { border-style: dashed; }
.bubble.inspected { box-shadow: 0 0 0 2px var(--ink); }
.bubble-text { white-space: pre-wrap; }
.bubble-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .5rem; }
.feedback { display: inline-flex; align-items: center; gap: .3rem; }
.sources { margin-top: .5rem; font-size: .88rem; }
.source { padding: .25rem 0; color: var(--text-2); }
.source.used { color: var(--text); }
.composer { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--border); background: var(--surface); }
.composer textarea { flex: 1; font-family: var(--font); font-size: 1rem; resize: none; min-height: 44px; }
.composer button { min-width: 88px; }
.inspector { flex: 1 1 480px; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.inspector .tabs-nav { padding: .25rem .75rem 0; border-bottom: 1px solid var(--border); }
.inspector-body { padding: 1.25rem; }
.why-summary { font-size: 1.02rem; }
.why-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.why-item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem 1rem; display: flex; flex-direction: column; gap: .4rem; }
.why-item.dropped { border-style: dashed; color: var(--text-2); }
.why-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; }
.why-state { margin-left: auto; font-weight: 700; color: var(--muted); }
.why-state.ok { color: var(--ok-text); }
.why-excerpt { color: var(--text-2); font-size: .92rem; }
.meter { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.meter-fill { height: 100%; background: var(--ink); border-radius: 3px; }
.why-item.dropped .meter-fill { background: var(--border-strong); }
.trace { font-size: .92rem; }
.trace-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.trace-dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem; margin: 0 0 .6rem; }
.trace-dl dt { color: var(--muted); }
.trace-dl dd { margin: 0; }

/* conversations */
.split { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.conv-list { flex: 1 1 340px; max-width: 440px; min-width: 0; max-height: calc(100vh - 240px); overflow-y: auto; position: sticky; top: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.conv-item { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--border); text-decoration: none; }
.conv-item:hover { background: var(--surface-2); }
.conv-item[aria-current="true"] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent-line); }
.conv-flags { display: flex; flex-wrap: wrap; gap: .35rem; }
.conv-flags:empty { display: none; }
.conv-detail { flex: 999 1 520px; min-width: 0; }
.detail-title { font-size: 1.2rem; }
.conv-detail .chat, .conv-page .chat { max-height: none; background: transparent; padding: 0; }
@media (max-width: 1099px) { .conv-list { max-width: none; max-height: none; position: static; } .conv-detail { display: none; } }
.prose-out { white-space: pre-wrap; line-height: 1.6; margin: .5rem 0; }
.tabs { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-bottom: .75rem; }
button.tab { border-color: transparent; background: none; }
button.tab.active { border-color: var(--border-strong); background: var(--surface-2); }
.promote { margin-top: .5rem; width: 100%; }
.filters input, .filters select { min-width: 0; }

/* quality */
.result.pass { border-left: 4px solid var(--ok-text); }
.result.fail { border-left: 4px solid var(--danger); }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: .5rem 0; }
@media (max-width: 720px) { .result-grid { grid-template-columns: 1fr; } }
pre.diff-old { background: var(--err-bg); color: var(--err-text); padding: .3rem .5rem; border-radius: 4px; }
pre.diff-new { background: var(--ok-bg); color: var(--ok-text); padding: .3rem .5rem; border-radius: 4px; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 160px; overflow-x: auto; padding-bottom: 1.4rem; }
.bar { flex: 1 0 14px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.bar-fill { background: var(--ink); border-radius: 3px 3px 0 0; min-height: 2px; }
.bar-label { position: absolute; bottom: -1.3rem; left: 50%; transform: translateX(-50%); font-size: .68rem; color: var(--muted); white-space: nowrap; }
.sim-user summary { cursor: pointer; font-weight: 600; }

/* bot editor and shared actions */
.save-bar {
  position: sticky; bottom: 0; z-index: 5; grid-column: 1 / -1; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; box-shadow: var(--shadow);
}
.confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
button.danger-solid { background: var(--danger-solid); border-color: var(--danger-solid); color: #fff; }
.bot-card .module-head { flex-wrap: nowrap; }
.bot-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-text); font-weight: 800; font-size: .9rem;
}
.bot-title { display: flex; flex-direction: column; min-width: 0; }
.bot-title a { text-decoration: none; }
.bot-card p { margin: 0; }

/* knowledge detail */
.kb-main { flex: 999 1 600px; min-width: 0; }
.kb-side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.kb-side .card { margin-bottom: 1rem; }
.warn-text { color: var(--warn-text); margin-top: .25rem; }
.upload-options { margin: -.5rem 0 1rem; }
.upload-options label { margin-top: .5rem; max-width: 460px; }
.dropzone .btn { pointer-events: none; }
.card-foot { margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--border); }
/* result of a "Test" button: an answer from the tested thing, not a page error */
.test-out { padding: .6rem .8rem; border-radius: var(--radius-sm); border: 1px solid var(--border); margin-top: .5rem; font-size: .9rem; }
.test-out.ok { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.test-out.fail { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.form.wide-form h4, form h4 { margin-top: 1.25rem; }

/* copy rows */
.copy-row { display: flex; gap: .5rem; align-items: center; }
.copy-row input { flex: 1; min-width: 0; }
/* Utility: must win over component display rules declared later (e.g. .dt-foot). */
.hidden { display: none !important; }
.tab-body { padding: .75rem 0 0; }
.tab-body ol { padding-left: 1.25rem; }
pre.code { background: var(--surface-2, rgba(127,127,127,.08)); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .75rem; overflow-x: auto; white-space: pre; }

/* E13 conversations, top bar, modules */
/* The list scrolls inside its pane (items must not shrink to fit the max height). */
.conv-list { overflow: hidden auto; overscroll-behavior: contain; }
.conv-item, .conv-more { flex-shrink: 0; }
.conv-more { margin: .75rem; }
.conv-composer { border: 1px solid var(--border); border-radius: var(--radius); margin-top: 1rem; }
.lang-switch { position: relative; }
.lang-flag {
  width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; font-size: 1.3rem; line-height: 1;
  background: var(--bar-hover, rgba(255, 255, 255, .22)); color: inherit; display: grid; place-items: center;
}
.lang-menu { min-width: 170px; }
.lang-menu button[aria-checked="true"] { background: var(--surface-2); }
.mod-form { gap: .9rem; margin-top: .6rem; }
.mod-field { display: flex; flex-direction: column; gap: .3rem; }
.mod-field label { font-weight: 600; }
.mod-field input[type="checkbox"] { width: auto; align-self: flex-start; }
.mod-field.invalid input, .mod-field.invalid select, .mod-field.invalid textarea { border-color: var(--danger, #c0392b); }
.field-error { color: var(--danger, #c0392b); }
.mod-none { margin: 0; }

/* ---------- E13 tables & home ---------- */
.data-table { margin-bottom: 1rem; }
.dt-toolbar { margin-bottom: .75rem; }
.th-sort {
  background: none; border: 0; padding: 0; min-height: 0; font: inherit; font-weight: 600; color: inherit;
  display: inline-flex; align-items: center; gap: .3rem; text-align: left;
}
.th-sort:hover { color: var(--text); }
.sort-ind { font-size: .7rem; color: var(--muted); }
th[aria-sort="ascending"] .sort-ind, th[aria-sort="descending"] .sort-ind { opacity: 1; color: var(--text); }
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: var(--surface-2); }
.table tr.clickable:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.dt-empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }
.dt-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.dt-foot select { min-height: 34px; padding: .25rem .5rem; }
.dt-foot button { min-height: 34px; padding: .25rem .8rem; }
/* bot state: a coloured edge on the first cell, the pill says it in words */
.table tr.health-active td:first-child { box-shadow: inset 4px 0 var(--ok-text); }
.table tr.health-attention td:first-child { box-shadow: inset 4px 0 var(--warn-text); }
.table tr.health-attention td { background: color-mix(in srgb, var(--warn-bg) 45%, transparent); }
.table tr.health-disabled td:first-child { box-shadow: inset 4px 0 var(--border-strong); }
.table tr.health-disabled td { color: var(--muted); }
.health-pill {
  display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .6rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--text-2);
}
.health-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.health-pill.health-active { background: var(--ok-bg); color: var(--ok-text); }
.health-pill.health-attention { background: var(--warn-bg); color: var(--warn-text); }
.health-pill.health-disabled { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.health-reasons { margin: .35rem 0 0; padding-left: 1.1rem; color: var(--warn-text); }
.section-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; justify-content: space-between; margin-bottom: .75rem; }
.section-row h2 { margin: 0; }
.bot-cell { display: flex; align-items: center; gap: .75rem; min-width: 12rem; }
.bots-table .actions .btn { min-height: 34px; padding: .3rem .8rem; }
.badges { display: inline-flex; flex-wrap: wrap; gap: .3rem; }

/* ---------- state pills and row accents (providers, local models) ---------- */
.badge.warn { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.badge.info { background: var(--info-bg); color: var(--info-text); border-color: transparent; }
.err-text { color: var(--err-text); }
.mcp-pill {
  display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .6rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--text-2);
}
.mcp-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mcp-pill.mcp-ok { background: var(--ok-bg); color: var(--ok-text); }
.mcp-pill.mcp-untested { background: var(--info-bg); color: var(--info-text); }
.mcp-pill.mcp-needs_credentials, .mcp-pill.mcp-needs_url { background: var(--warn-bg); color: var(--warn-text); }
.mcp-pill.mcp-error { background: var(--err-bg); color: var(--err-text); }
.mcp-pill.mcp-disabled { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.table tr.mcp-row-ok td:first-child { box-shadow: inset 4px 0 var(--ok-text); }
.table tr.mcp-row-untested td:first-child { box-shadow: inset 4px 0 var(--info-text); }
.table tr.mcp-row-needs_credentials td:first-child,
.table tr.mcp-row-needs_url td:first-child { box-shadow: inset 4px 0 var(--warn-text); }
.table tr.mcp-row-error td:first-child { box-shadow: inset 4px 0 var(--err-text); }
.table tr.mcp-row-error td { background: color-mix(in srgb, var(--err-bg) 45%, transparent); }
.table tr.mcp-row-disabled td:first-child { box-shadow: inset 4px 0 var(--border-strong); }
.table tr.mcp-row.selected td:first-child { box-shadow: inset 4px 0 var(--accent-line); }
.table tr.hidden-row td { text-decoration: line-through; }
.mcp-url { word-break: break-all; }
.mcp-facts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-bottom: .75rem; }
.mcp-notes { border-left: 3px solid var(--accent-line); padding: .25rem .75rem; margin: .5rem 0 .75rem; background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.mcp-notes p { margin: .25rem 0; }

.switch input:disabled + span { cursor: not-allowed; opacity: .5; }

/* E16: knowledge base state colours (list rows and pills) and the shared modal dialog. */
.table tr.kb-state-ready td:first-child { box-shadow: inset 4px 0 var(--ok-text); }
.table tr.kb-state-processing td:first-child { box-shadow: inset 4px 0 var(--info-text); }
.table tr.kb-state-errors td:first-child { box-shadow: inset 4px 0 var(--err-text); }
.table tr.kb-state-errors td { background: color-mix(in srgb, var(--err-bg) 45%, transparent); }
.table tr.kb-state-empty td:first-child { box-shadow: inset 4px 0 var(--border-strong); }
.health-pill.kb-state-ready { background: var(--ok-bg); color: var(--ok-text); }
.health-pill.kb-state-processing { background: var(--info-bg); color: var(--info-text); }
.health-pill.kb-state-errors { background: var(--err-bg); color: var(--err-text); }
.health-pill.kb-state-empty { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
body:has(.modal-backdrop) { overflow: hidden; }
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 16px 16px; overflow-y: auto; background: color-mix(in srgb, var(--ink) 45%, transparent);
}
.modal {
  width: min(560px, 100%); background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem;
}
.modal:focus { outline: none; }
.modal-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.modal-head h2 { margin: 0; font-size: 1.2rem; flex: 1; }
.modal-close { font-size: 1.1rem; text-decoration: none; color: var(--muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .modal-backdrop { background: rgba(0, 0, 0, .6); } } :root[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, .6); } /* E50 */

/* E15: provider presets and local model gallery */
.prov-add, .local-models { margin-top: 1rem; }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .5rem; margin: .5rem 0 1rem; }
.preset-card { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: left; padding: .6rem .75rem; min-height: 58px; }
.preset-card[aria-pressed="true"] { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); }
.prov-preset-form { border-left: 3px solid var(--accent-line); padding-left: .75rem; margin-bottom: 1rem; }
.prov-catalogue, .prov-listed, .prov-edit { margin-top: .75rem; }
.local-head { align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
.local-host { flex: 1 1 18rem; }
.local-action { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; justify-content: flex-end; }
.local-install.warn { border-color: var(--warn-text); color: var(--warn-text); }
.pull-progress { display: flex; flex-direction: column; gap: .15rem; min-width: 9rem; }
.pull-progress progress { width: 100%; accent-color: var(--accent); }
.table tr.fit-row-too_big td { color: var(--muted); }

/* E17: the bot's "Glosario" tab (layout A): terms table on the left, fixed detail on the right. */
.gl-layout { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.gl-terms { flex: 999 1 560px; min-width: 0; margin-bottom: 0; }
.gl-terms .data-table .table-box { margin-bottom: .5rem; }
.gl-terms .gl-count { margin: 0; }
.gl-show select { min-width: 10rem; }
.gl-table td .gl-syn { color: var(--text-2); }
.table tr.gl-row.selected td { background: color-mix(in srgb, var(--info-bg) 70%, transparent); }
.gl-detail { flex: 1 1 360px; min-width: 0; position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem; margin-bottom: 0; }
.gl-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.gl-detail-head h3 { margin: 0; font-size: 1.25rem; flex: 1 1 auto; word-break: break-word; }
.gl-block { display: flex; flex-direction: column; gap: .5rem; }
.gl-block p { margin: 0; }
.gl-label { font-size: .85rem; color: var(--text-2); }
.gl-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.gl-chip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: .2rem .65rem; font-size: .88rem; }
.gl-question { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .75rem; }
.gl-option { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .75rem; display: flex; flex-direction: column; gap: .25rem; }
.gl-option-label { font-weight: 600; }
.gl-option-kw { color: var(--text-2); }
.gl-try { display: flex; flex-direction: column; gap: .5rem; border-top: 1px solid var(--border); padding-top: .75rem; }
.gl-verdict-ask { color: var(--warn-text); }
.gl-verdict-expand { color: var(--ok-text); }
.gl-verdict-none { color: var(--muted); }
.gl-links { margin-top: 1rem; }
.gl-links h3 { margin-top: 0; }
.gl-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; padding: .4rem 0; border-bottom: 1px solid var(--border); }
.gl-link-row:last-of-type { border-bottom: 0; }
.gl-form-options .gl-opt-label { flex: 0 1 10rem; }
.gl-add-option { align-self: flex-start; }
@media (max-width: 900px) { .gl-detail { position: static; } }
@media (max-width: 640px) { .gl-form-options .gl-opt-label, .gl-form-options .wide-input { flex: 1 1 100%; min-width: 0; } }

/* E23: channels: platform tiles and state pills. E28 (layout B): compact full-width table, the
   intro behind a "?" button, the detail in a side drawer (only the drawer scrolls). */
.ch-head { align-items: center; margin-bottom: .75rem; }
.ch-title { display: flex; align-items: center; gap: .6rem; }
.ch-title h1, .ch-title h2 { margin: 0; }
.ch-help-wrap { position: relative; display: inline-flex; }
.ch-help {
  width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 999px; font-weight: 800;
  border: 1px solid var(--control-border); background: var(--surface); color: var(--text);
}
.ch-help-tip {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: min(24rem, calc(100vw - 2rem));
  background: var(--ink); color: var(--ink-text); font-size: .85rem; font-weight: 500; line-height: 1.4;
  padding: .55rem .75rem; border-radius: var(--radius-sm); box-shadow: var(--shadow);
  display: none;
}
/* display, not visibility: a hidden tooltip must not widen the page on phones */
.ch-help-tip.open { display: block; }
.ch-list .data-table .table th, .ch-list .data-table .table td { padding: .2rem .9rem; vertical-align: middle; }
.ch-list .data-table .table th { padding-top: .55rem; padding-bottom: .55rem; }
.ch-list .dt-toolbar { margin-bottom: .6rem; }
/* positioned: the visually hidden header of the action column (absolute) must stay inside the
   scroll box, or it widens the page on phones */
.ch-list .table-box { margin-bottom: .5rem; position: relative; }
.ch-list td.ch-act { text-align: right; width: 1%; white-space: nowrap; }
.ch-list td.ch-act .dt-actions { justify-content: flex-end; }
/* E106: the text-button rule must not shrink the E39-D icon link to zero width (its padding ate the 24 px box). */
.ch-config:not(.icon-btn) { min-height: 32px; padding: .2rem .75rem; font-size: .88rem; border-color: var(--control-border); }
.ch-filter select { min-width: 9rem; }
.ch-cell { display: flex; align-items: center; gap: .65rem; min-width: 12rem; min-height: 32px; }
/* name and kind on one line (E28): one text line per row keeps ten rows within a laptop screen */
.ch-name { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; }
.ch-icon {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-text); font-weight: 800; font-size: .9rem;
}
.ch-icon.large { width: 2.4rem; height: 2.4rem; font-size: 1.05rem; }
.ch-pill {
  display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .6rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.ch-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ch-pill-active { background: var(--ok-bg); color: var(--ok-text); }
.ch-pill-needs_setup { background: var(--warn-bg); color: var(--warn-text); }
.ch-pill-disabled { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.table tr.ch-row-needs_setup td:first-child { box-shadow: inset 4px 0 var(--warn-text); }
.table tr.ch-row-disabled td { color: var(--muted); }
.table tr.ch-row.selected td { background: color-mix(in srgb, var(--info-bg) 70%, transparent); }
.table tr.ch-row.selected td:first-child { box-shadow: inset 4px 0 var(--accent-line); }
/* the drawer: one form from header to footer, only the body scrolls */
.ch-form { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ch-drawer-head { flex: none; display: flex; flex-direction: column; gap: .5rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--border); }
.ch-drawer-id { display: flex; align-items: center; gap: .75rem; }
.ch-detail-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ch-detail-title h2 { margin: 0; font-size: 1.1rem; word-break: break-word; }
.ch-close {
  display: inline-grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0;
  border-color: transparent; background: none; color: var(--text-2);
}
.ch-close:hover { border-color: var(--border-strong); }
.ch-close svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ch-state { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .25rem .5rem; }
.ch-issues { margin: 0; padding-left: 1.1rem; color: var(--warn-text); font-size: .88rem; flex: 1 1 100%; }
.ch-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 1.25rem; }
.ch-sec { display: flex; flex-direction: column; gap: .75rem; }
.ch-sec + .ch-sec { border-top: 1px solid var(--border); padding-top: 1rem; }
.ch-sec-title { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ch-sec .copy-row .code { font-size: .82rem; }
.ch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; align-items: start; }
.ch-gcell { min-width: 0; }
.ch-gcell.wide { grid-column: 1 / -1; }
.ch-gcell .mod-field { margin: 0; }
/* E158: Instalación holds four options with their hints since E142 / E143; tighter rows keep it
   within 1.25 windows (1.5 on a phone): a two-line origins box, denser hints, a small add button. */
.ch-sec-setup { gap: .5rem; }
.ch-sec-setup .ch-grid { gap: .5rem 1rem; }
.ch-sec-setup .ch-gcell textarea { height: 3.4rem; min-height: 0; }
.ch-sec-setup .mod-field > .small { line-height: 1.35; }
.ch-sec-setup .kv-add { min-height: 32px; padding-top: .2rem; padding-bottom: .2rem; }
@media (max-width: 640px) { .ch-sec-setup .mod-field > .small { font-size: .78rem; } }
.ch-look { display: flex; gap: 1rem; align-items: flex-start; }
.ch-look .ch-grid { flex: 1 1 auto; min-width: 0; }
.ch-drawer-foot { flex: none; border-top: 1px solid var(--border); padding: .75rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; background: var(--surface); }
.ch-msgs:empty { display: none; }
.ch-msgs .alert { margin: 0; }
.ch-preview { flex: 0 0 200px; width: 200px; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
/* E25: the preview mirrors the widget's own colours (widget.js), which follow the visitor's
   colour scheme like the panel; the header colour and its text are set inline (chosen colour). */
.ch-preview-head { padding: .6rem .75rem; font-weight: 700; font-size: .92rem; min-height: 1.2em; }
.ch-preview-body { padding: .75rem; font-size: .85rem; background: #f6f7f9; color: #1d2433; }
.ch-preview-bubble { display: inline-block; background: #fff; border: 1px solid #e3e6eb; padding: .5rem .65rem; border-radius: 10px; }
.ch-preview .ch-preview-input { border-top: 1px solid #e3e6eb; padding: .5rem .75rem; background: #fff; color: #5b6475; }
/* E50: dark rules apply with the system setting unless the user chose Claro, and always with Oscuro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ch-preview-body { background: #0d1117; color: #e6edf3; }
  :root:not([data-theme="light"]) .ch-preview-bubble { background: #161b22; border-color: #30363d; }
  :root:not([data-theme="light"]) .ch-preview .ch-preview-input { background: #161b22; border-color: #30363d; color: #8b949e; }
}
:root[data-theme="dark"] .ch-preview-body { background: #0d1117; color: #e6edf3; }
:root[data-theme="dark"] .ch-preview-bubble { background: #161b22; border-color: #30363d; }
:root[data-theme="dark"] .ch-preview .ch-preview-input { background: #161b22; border-color: #30363d; color: #8b949e; }
.ch-secret { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem 0; border-top: 1px solid var(--border); }
.ch-secret-state { font-weight: 700; }
.ch-secret-state.ok { color: var(--ok-text); }
.ch-secret-state.missing { color: var(--warn-text); }
.ch-secret-input { flex: 1 1 100%; }
.ch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ch-new-form { display: flex; flex-direction: column; gap: .75rem; }
.ch-new-form > label, .ch-new-secrets label { display: flex; flex-direction: column; gap: .25rem; }
.ch-new-secrets { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem; margin: 0; display: grid; gap: .5rem; min-width: 0; }
.mod-field-bool { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: .5rem; }
.mod-field-bool > .small, .mod-field-bool > .field-error { flex: 1 1 100%; }
.mod-field-bool input[type="checkbox"] { order: -1; align-self: center; }
.mod-field-caption { font-weight: 600; }
.colour-input { display: inline-flex; align-items: center; gap: .5rem; }
.colour-input input[type="color"] { width: 44px; height: 36px; padding: 2px; }
.kv-editor { display: flex; flex-direction: column; gap: .35rem; }
.kv-row { display: flex; gap: .35rem; align-items: center; }
.kv-row .kv-key { flex: 0 1 9rem; min-width: 0; }
.kv-row .kv-value { flex: 1 1 auto; min-width: 0; }
.kv-add { align-self: flex-start; }
@media (max-width: 640px) {
  .ch-cell { min-width: 0; }
  .ch-grid { grid-template-columns: minmax(0, 1fr); }
  .ch-look { flex-direction: column; align-items: stretch; }
  .ch-preview { flex: none; width: 100%; }
  /* E106: Aspecto fits a phone (1.5 screens): the preview without its input line, tighter gaps */
  .ch-look { gap: .6rem; }
  .ch-preview .ch-preview-input { display: none; }
  .ch-preview-body { padding: .5rem .75rem; }
}

/* E28: side drawer (components/drawer.rs), same backdrop as the modal */
body:has(.drawer-backdrop) { overflow: hidden; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 100; background: color-mix(in srgb, var(--ink) 45%, transparent); }
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 100%); display: flex; flex-direction: column;
  background: var(--surface); color: var(--text); border-left: 1px solid var(--border); box-shadow: var(--shadow);
}
.drawer:focus { outline: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .drawer-backdrop { background: rgba(0, 0, 0, .6); } } :root[data-theme="dark"] .drawer-backdrop { background: rgba(0, 0, 0, .6); } /* E50 */

/* E30/E31: generic drawer content (one form from head to foot, only the body scrolls) and a page
   header with the title, a few facts and the main action on one line. */
.drawer-page-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.drawer-page-head h1 { margin: 0; }
.drawer-page-head > .primary { margin-left: auto; }
.drawer-form { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.drawer-head { flex: none; display: flex; align-items: center; gap: .75rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--border); }
.drawer-head h2 { margin: 0; font-size: 1.1rem; word-break: break-word; }
.drawer-head > h2, .drawer-title { flex: 1 1 auto; min-width: 0; }
.drawer-title { display: flex; flex-direction: column; }
.drawer-close {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; min-height: 40px; padding: 0;
  border-color: transparent; background: none; color: var(--text-2);
}
.drawer-close:hover { border-color: var(--border-strong); }
.drawer-close svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 1rem; }
.drawer-body > p { margin: 0; }
.drawer-body .mod-field { margin: 0; }
.drawer-field { display: flex; flex-direction: column; gap: .35rem; }
.drawer-foot { flex: none; border-top: 1px solid var(--border); padding: .75rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; background: var(--surface); }
.drawer-msgs:empty { display: none; }
.drawer-msgs .alert { margin: 0; }
.drawer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.user-drawer { width: min(480px, 100%); }
/* positioned: the visually hidden header of the action column (absolute) must stay inside the
   scroll box, or it widens the page on phones (as in .ch-list) */
.users-table .table-box { position: relative; }

/* E33: tools page (table + editor below, creation in the drawer); the hidden action / header
   cells stay inside the scroll box on phones */
.tools-table .table-box { position: relative; }
.tools-head > .primary { margin-left: auto; }
.tools-table .tool-desc { max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-url { overflow-wrap: anywhere; }
.tool-detail { margin-top: 1rem; }
.tool-detail h2 { overflow-wrap: anywhere; }
.tool-facts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-bottom: .75rem; }
.tool-description { margin: 0 0 .75rem; }
.tool-actions { margin: .75rem 0; }
.tool-test { margin-bottom: .75rem; }
.tool-test .grow, .tool-endpoint-row .grow { flex: 1 1 16rem; min-width: 0; }
.tool-test .form-row { align-items: flex-end; }
.tool-endpoint-row { align-items: flex-end; }
.tool-method { flex: none; }
.tool-drawer { width: min(560px, 100%); }

/* E31 → E99: /modules is one fitted data table (see the E99 block below); the drawer stays. */
.mod-drawer { width: min(520px, 100%); }
.mod-drawer-desc { color: var(--text-2); }

/* E18: API key manager — permission matrix, key detail, audit log (client brand via --accent). */
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.keys-table .key-name { display: block; font-weight: 600; }
.keys-table .key-desc { display: block; }
.table tr.key-row.key-disabled td:first-child { box-shadow: inset 4px 0 var(--warn-text); }
.table tr.key-row.key-expired td:first-child { box-shadow: inset 4px 0 var(--err-text); }
.key-secret { cursor: default; }
.key-secret p { margin: 0 0 .5rem; }
.key-secret .secret { margin-bottom: .5rem; font-size: .95rem; }
.key-detail { margin-top: 1rem; }
.key-detail h2 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.key-detail h3 { margin: 1.25rem 0 .5rem; font-size: 1.05rem; }
.key-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 1rem; }
.key-facts { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: .35rem 1rem; margin: 0; }
.key-facts dt { color: var(--text-2); font-weight: 600; }
.key-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.key-perms { gap: .3rem; }
.perm-chip { font-size: .8rem; padding: .1rem .5rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.key-usage .stat { min-width: 140px; flex: 1 1 140px; }
.key-audit tr.audit-err td { color: var(--err-text); }
.key-modal { width: min(880px, 100%); }
.key-form fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem; margin: 0; min-width: 0; }
.key-form legend { font-weight: 700; padding: 0 .35rem; }
.perm-box { max-height: 46vh; overflow: auto; }
.perm-matrix { font-size: .9rem; }
.perm-matrix thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.perm-matrix th[scope="row"] { font-weight: 600; white-space: nowrap; }
.perm-matrix th[scope="row"] code { margin-left: .35rem; }
.perm-col { text-align: center; }
.perm-col > span:first-child { display: block; }
.perm-toggles, .perm-row-toggles { display: inline-flex; gap: .4rem; justify-content: center; }
.perm-row-toggles { white-space: nowrap; }
.perm-cell { text-align: center; }
.perm-cell input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.perm-cell.na { color: var(--muted); }
.perm-cell.locked { background: var(--surface-2); }
.perm-cell.locked input { cursor: not-allowed; }
.key-restrict summary { cursor: pointer; font-weight: 700; }
.key-restrict-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.key-picks { display: flex; flex-direction: column; gap: .25rem; max-height: 12rem; overflow: auto; margin-top: .35rem; }
.key-limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.key-limits label, .key-form > label { display: flex; flex-direction: column; gap: .25rem; }
@media (max-width: 640px) {
  .key-facts { grid-template-columns: 1fr; }
  .perm-matrix th[scope="row"] code { display: none; }
}

/* ---------- E26: knowledge base ↔ bot links ---------- */
.back-link { align-self: flex-start; color: var(--text-2); text-decoration: none; font-weight: 600; padding: .2rem 0; }
.back-link:hover { color: var(--text); text-decoration: underline; }
.kb-head .lead { margin: 0; }
.kb-bots-cell { display: inline-flex; flex-direction: column; gap: .1rem; }
.kb-bots-names { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-summary { display: inline-block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.check-list { display: flex; flex-direction: column; gap: .35rem; max-height: 18rem; overflow: auto; padding: .25rem 0; }
.bindings-summary { margin: .25rem 0; }
.bk-rules { margin-top: 1rem; }

/* ---------- E27: knowledge base settings by section (layout A + switch rows of B) ---------- */
.kbs { margin-bottom: 1rem; }
.kbs-nav { flex-basis: 250px; }
.kbs-nav a { display: flex; flex-direction: column; gap: .1rem; min-height: 44px; }
.kbs-nav-title { display: inline-flex; align-items: center; gap: .35rem; }
.kbs-nav-hint { font-size: .8rem; font-weight: 400; color: var(--muted); }
.kbs-dirty { color: var(--warn-text); font-weight: 800; }
.kbs-panel { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 0; }
.kbs-panel h2 { margin: 0; }
.kbs-intro { margin: -.5rem 0 0; color: var(--text-2); }
.kbs-panel .alert { margin: 0; }
.kbs-field-hint { font-weight: 400; }
.kbs-plain { border: 0; padding: 0; margin: 0; min-width: 0; }
.kbs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; }
.kbs-advanced { border-top: 1px solid var(--border); padding-top: .75rem; }
.kbs-advanced-body { display: flex; flex-direction: column; gap: .9rem; margin-top: .75rem; }
.kbs-slider { display: flex; flex-direction: column; gap: .35rem; }
.kbs-slider-head label { font-weight: 600; }
/* Sliders drawn from tokens: the track is the field edge colour (3:1 against the surfaces), the
   thumb the ink colour with a surface ring, so both schemes keep the WCAG 1.4.11 contrast. */
.kbs input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; min-height: 0; padding: 0; margin: 9px 0;
  border: 0; border-radius: 999px; background: var(--control-border); cursor: pointer;
}
.kbs input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--control-border);
}
.kbs input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--ink); border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--control-border);
}
.kbs-slider-head { display: flex; justify-content: space-between; gap: 1rem; }
.kbs-slider output, .kbs-weight-value { font-weight: 800; font-variant-numeric: tabular-nums; }
.kbs-switches { border: 1px solid var(--border); border-radius: var(--radius-sm); }
.kbs-switch-row { display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem; }
.kbs-switches > .kbs-switch-row ~ .kbs-switch-row { border-top: 1px solid var(--border); }
.kbs-switch-text { flex: 1; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.kbs-switch-body { display: flex; flex-direction: column; gap: .9rem; padding: 0 1rem 1rem; }
.kbs-weights { display: flex; flex-direction: column; gap: .5rem; }
.kbs-weight-row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 2.5rem auto; gap: .75rem; align-items: center; }
.kbs-add-type { align-self: flex-start; }
.kbs-reprocess-offer { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.kbs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; border-top: 1px solid var(--border); padding-top: 1rem; }
@media (max-width: 900px) {
  /* narrow: the section menu stacks above the panel (two columns when they fit) */
  .kbs-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
}
@media (max-width: 640px) {
  .kbs-weight-row { grid-template-columns: minmax(0, 1fr) 2.5rem auto; }
  .kbs-weight-row .kbs-weight-name { grid-column: 1 / -1; }
}

/* E32: end-user memories (detail section, global page, add / edit drawer) */
.mem-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mem-head h3 { margin: 0; }
.mem-forget-hint { margin: .25rem 0 .5rem; }
.mem-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .5rem 0; min-height: 2.25rem; }
/* The hidden headers (.sr-only, absolutely positioned) of the selection and action columns must be
   clipped by the scrolling box, or they widen the page at phone width. */
.mem-table .table-box { position: relative; }
.mem-table .mem-select { width: 2.5rem; }
.mem-table .mem-content { min-width: 14rem; overflow-wrap: anywhere; }
.mem-table .mem-by { display: block; }
.mem-table .mem-when { white-space: nowrap; }
.mem-table .mem-scope, .mem-table .mem-source { white-space: nowrap; }
.mem-table td.actions .dt-actions { flex-wrap: nowrap; }
.pill.mem-instance { background: var(--info-bg); color: var(--info-text); border-color: transparent; }
.mem-global-filters { flex-wrap: wrap; }
.mem-global-filters .mem-end-user { flex: 0 1 16rem; min-width: 0; }
.mem-drawer { width: min(520px, 100%); }
.mem-drawer textarea { width: 100%; resize: vertical; font: inherit; }
.mem-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 0;
  padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.mem-meta dt { color: var(--muted); }
.mem-meta dd { margin: 0; overflow-wrap: anywhere; }
.mem-history { margin-top: 1rem; }
.mem-history summary { cursor: pointer; color: var(--text-2); }
.mem-history-list { margin: .5rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .3rem; }
.mem-history-list del { color: var(--muted); }
@media (max-width: 640px) {
  .mem-head .spacer { display: none; }
  .mem-meta { grid-template-columns: minmax(0, 1fr); }
}

/* E37-0: shared layout pieces — SubNav (secondary route links) and FormPage (form on its own route). */
.sub-nav { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1rem; border-bottom: 1px solid var(--border); }
.sub-nav-link { display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .75rem; color: var(--text-2);
  text-decoration: none; font-weight: 600; white-space: nowrap; border-radius: 6px 6px 0 0; }
.sub-nav-link:hover { color: var(--text); background: var(--surface-2); }
.sub-nav-link:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -2px; }
.sub-nav-link[aria-current="page"] { color: var(--text); box-shadow: inset 0 -3px 0 var(--accent-line); }
@media (max-width: 640px) {
  .sub-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
}
.form-page { max-width: 960px; }
.form-page .page-head { margin-bottom: 1rem; }
.form-page-form { display: flex; flex-direction: column; gap: 1rem; }
.form-page-body { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.form-page-foot { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 0;
  background: var(--bg); border-top: 1px solid var(--border); }
.form-page-foot button[aria-busy="true"] { cursor: progress; }
/* E37-A2: bot Calidad per suite, shared glossaries page, knowledge rules / add pages. */
.suite-tabs { gap: .4rem; }
.suite-tabs .suite-tab { min-height: 36px; padding: .3rem .75rem; border-color: transparent; background: none; font-weight: 600; }
.suite-tabs .suite-tab[aria-current="page"] { border-color: var(--border-strong); background: var(--surface-2); }
.suite-tabs .suite-new input { width: 12rem; max-width: 100%; }
.tests-head { margin-bottom: .5rem; }
.tests-head p { margin: .25rem 0 0; }
.tests-settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.tests-settings .card { margin: 0; }
.tests-io textarea { width: 100%; }
.cases-table td.tests-answer { max-width: 28rem; }
.gl-head { margin-bottom: .75rem; align-items: flex-start; }
.gl-head p { margin: .25rem 0 0; }
.gl-shared-summary { margin: .25rem 0 0; max-width: 32rem; }
.gl-shared-table td.gl-use, .bk-add-table td.bk-pick { width: 3rem; }
.bk-rules-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.bk-rules-grid .card { margin: 0; }
@media (max-width: 900px) {
  .tests-settings, .bk-rules-grid { grid-template-columns: 1fr; }
  .suite-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .suite-tabs .suite-tab { flex: 0 0 auto; white-space: nowrap; }
}

/* E37-C: home in one 3-column row + top-5 services, conversations one viewport high, KB upload in the toolbar. */
.status-row3 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.status-row3 > .card { padding: 1rem 1.1rem; }
.status-row3 .usage-chart svg { height: 84px; }
.status-row3 .status-totals .tiles { gap: .45rem; }
.status-row3 .status-totals .tile span { font-size: .8rem; }
.status-row3 .status-totals .tile { padding: .4rem .6rem; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 .5rem; }
.status-row3 .sat-main { gap: .75rem; }
.status-row3 .donut { width: 64px; height: 64px; }
.status-row3 .sat-bots li { font-size: .84rem; }
.sat-more { margin: .35rem 0 0; }
.status-res .res-card { min-height: 0; padding: .65rem .8rem; gap: .25rem; }
.status-res .spark { height: 26px; }
.status-services { margin-bottom: 0; padding: 1rem 1.1rem; }
.status-services .table.compact th, .status-services .table.compact td { padding: .35rem .6rem; }
.status-services .table-box { max-height: none; overflow-x: auto; }
.svc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-bottom: .5rem; }
.svc-head h2 { font-size: 1rem; margin: 0; }
.svc-all { font-weight: 600; min-height: 44px; margin: -.6rem 0; display: inline-flex; align-items: center; }
.status-head { margin-bottom: .75rem; }
.status-res { margin-bottom: .75rem; }
.svc-page-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.svc-page-table .svc-bad { color: var(--danger); font-weight: 700; }
@media (max-width: 1100px) { .status-row3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .status-row3 .status-usage { grid-column: 1 / -1; } }
@media (max-width: 640px) { .status-row3 { grid-template-columns: minmax(0, 1fr); } }

.conv-split { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.conv-split .conv-list { flex: 1 1 340px; }
.conv-detail-head .detail-title { margin: 0 0 .15rem; }
.conv-detail-head .conv-meta { margin: 0 0 .5rem; }
.conv-detail-head .sub-nav { margin-bottom: .75rem; }
.conv-pager { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .75rem; }
.conv-pager button { min-height: 44px; }
.conv-filters-toggle { display: none; }
.promote-link { font-weight: 600; }
.promote-preview { display: flex; flex-direction: column; gap: .5rem; background: var(--surface-2); margin: 0; }
.conv-promote .back-link { margin-top: 0; }
@media (min-width: 1100px) {
  /* Exactly one window: the shell is the window, the page fills what the header leaves. */
  .shell:has(.conv-page) { height: 100vh; height: 100dvh; min-height: 0; }
  .shell:has(.conv-page) main.content { display: flex; flex-direction: column; min-height: 0; padding-bottom: 1rem; }
  .conv-page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .conv-page .conv-head { margin-bottom: .75rem; }
  .conv-page .conv-toolbar { margin-bottom: .75rem; }
  .conv-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); align-items: stretch; }
  .conv-split .conv-list { max-width: none; max-height: none; height: 100%; position: static; }
  .conv-split .conv-detail { min-height: 0; display: flex; flex-direction: column; }
  .conv-detail .conv-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .conv-detail .conv-composer { flex-shrink: 0; margin-top: .75rem; }
  .conv-detail .conv-back { display: none; }
  .conv-detail .form-page { max-width: none; }
}
@media (max-width: 1099px) {
  .conv-page.has-detail .conv-head, .conv-page.has-detail .conv-toolbar, .conv-page.has-detail .conv-list { display: none; }
  .conv-page.has-detail .conv-detail { display: block; flex: 1 1 100%; }
  .conv-page:not(.has-detail) .conv-detail { display: none; }
  .conv-page .conv-head .lead { display: none; }
  .conv-filters-toggle { display: inline-flex; }
  .conv-toolbar:not(.filters-open) .conv-filter { display: none; }
  .conv-toolbar .conv-search { flex: 1 1 160px; min-width: 0; }
  .conv-detail .chat { max-height: none; }
}

.kb-upload { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-left: auto; position: relative; }
.kb-upload-btn { cursor: pointer; }
.kb-upload-btn:focus-within { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.kb-upload .upload-options summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; color: var(--text-2); font-weight: 600; }
.upload-options-pop { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 5; width: min(360px, 90vw); display: flex; flex-direction: column;
  gap: .4rem; padding: .75rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgb(0 0 0 / .15); }
.upload-options-pop label { display: flex; flex-direction: column; gap: .25rem; }
.kb-drop-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 70%, transparent); }
.kb-drop-box { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 2.5rem 3rem; text-align: center; color: var(--text);
  background: var(--surface); border: 3px dashed var(--accent-line); border-radius: var(--radius); }
.kb-drop-box strong { font-size: 1.2rem; }
@media (max-width: 640px) { .kb-upload { margin-left: 0; } }
/* E37-B2: tools and API keys on their own routes. Lists are tables only; form pages
   are two columns on wide screens with long lists (bots, permission matrix) scrolling inside
   their own box, so no page passes 1.25 viewport heights at 1280x800. */
.tools-head > .btn.primary { margin-left: auto; }
.tools-table .tool-url {
  display: inline-block; max-width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  overflow-wrap: normal; vertical-align: bottom;
}
.tools-table .tool-endpoint { white-space: nowrap; }
.tool-head h1 code { overflow-wrap: anywhere; }
.tool-detail { margin-top: 0; }
.tool-detail .tool-url { overflow-wrap: anywhere; }
.tool-test .test-out pre { max-height: 14rem; overflow: auto; }
.tool-form-page { max-width: 1100px; }
.tool-form-grid, .key-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.tool-col, .key-col { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.tool-col > label { display: flex; flex-direction: column; gap: .25rem; }
.key-form-page { max-width: 1200px; }
.key-head .key-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.key-head .key-description { margin: .25rem 0 0; }
.key-detail { margin-top: 0; }
.key-detail .key-actions { margin-top: 0; }
.key-perms { display: flex; flex-wrap: wrap; max-height: 5.5rem; overflow-y: auto; margin-top: .25rem; }
.key-detail h3 { margin: 1rem 0 .5rem; }
.key-form .key-picks { max-height: max(10rem, calc(100vh - 32rem)); }
.key-tabs { margin-bottom: .5rem; }
.key-right .toolbar { margin-bottom: .25rem; }
.key-right .perm-fieldset > p, .key-restrict > p { margin: 0 0 .5rem; }
.key-form .key-restrict-cols { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.key-form-page .perm-box { max-height: max(14rem, calc(100vh - 30rem)); }
/* the resource id (code) would push the action columns out of the box; the label is enough here */
.key-form-page .perm-matrix th[scope="row"] code { display: none; }
/* one line per row in the lists */
.tools-table .tool-cell { display: flex; align-items: baseline; gap: .4rem; white-space: nowrap; min-width: 0; }
.tools-table .tool-desc { display: inline-block; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.keys-table .table th, .keys-table .table td { padding: .45rem .8rem; vertical-align: middle; white-space: nowrap; }
.keys-table .table-box { position: relative; }
.keys-table .key-name { display: inline; }
.keys-table .key-desc { display: inline-block; max-width: 14ch; margin-left: .4rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom; }
.key-secret .secret { display: block; overflow-wrap: anywhere; }
.key-secret-done { margin-top: .25rem; }
@media (min-width: 1100px) {
  .tool-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .key-form-grid { grid-template-columns: minmax(16rem, 2fr) minmax(0, 3fr); align-items: start; }
}
@media (max-width: 640px) {
  .tools-table .tool-url { max-width: 9rem; }
  .tools-table .tool-desc { max-width: 14rem; }
  .key-form-page .perm-box { max-height: 60vh; }
}
/* /E37-B2 */

/* E37-A1: bot creation page, configuration sections, versions, searchable pickers. */
.bot-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.bot-config-grid > .card { margin-bottom: 0; }
.bot-config .card.form, .bot-config-grid .card.form, .bot-new .card.form { max-width: none; gap: .6rem; }
.bot-config .card.form h3 { margin: 0; }
.bot-config .card.form.wide { max-width: none; }
.bot-config { display: flex; flex-direction: column; gap: 1rem; }
.num-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; align-items: end; }
.num-grid label { font-size: .9rem; }
.bot-save-bar { align-items: center; }
.bot-save-bar .spacer { flex: 1; }
.agent-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem; align-items: start; }
.agent-col { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.id-picker { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.picker-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.picker-chip { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; padding: .15rem .25rem .15rem .6rem;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: .85rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-chip-x { border: 0; background: none; color: var(--text-2); min-height: 28px; min-width: 28px; padding: 0; }
.picker-chip-x:hover { color: var(--text); }
.picker-bar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.picker-search { flex: 1 1 200px; min-width: 0; }
.picker-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); }
.picker-list li { padding: .2rem .6rem; border-bottom: 1px solid var(--border); min-width: 0; }
.picker-list li:last-child { border-bottom: 0; }
.picker-list label.check { display: flex; gap: .5rem; align-items: center; min-width: 0; }
.picker-name { font-weight: 600; white-space: nowrap; }
.picker-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.picker-pager { display: flex; gap: .75rem; align-items: center; justify-content: flex-end; }
.version-head { margin-bottom: .75rem; }
.version-head h2 { margin: 0; }
.version-diff pre { max-height: 12rem; overflow: auto; margin: 0; white-space: pre-wrap; word-break: break-word; }
.version-diff td:first-child { width: 12rem; }
@media (max-width: 900px) {
  .bot-config-grid, .agent-cols { grid-template-columns: minmax(0, 1fr); }
}
/* /E37-A1 */

/* E37-B1: provider pages. Lists are one line per row; the detail, models and form pages are
   their own routes. */
.page-head .head-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.prov-head .mcp-facts { margin: .35rem 0 0; }
.prov-detail { margin-top: 0; }
.prov-cell { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .4rem; }
.prov-table td { vertical-align: middle; }
.prov-table .mcp-url {
  display: inline-block; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  word-break: normal; vertical-align: bottom;
}
a.preset-card { color: var(--text); text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); }
a.preset-card:hover { border-color: var(--text-2); }
a.preset-card:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.preset-custom { border-style: dashed; }
.prov-catalogue h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.prov-catalogue-table td, .local-table td { vertical-align: middle; }
.local-models { min-width: 0; }
.local-table td { white-space: nowrap; }
.local-table td:first-child { white-space: normal; }
.local-model-cell { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; max-width: 17rem; }
.local-table .local-action { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex-wrap: nowrap; }
.local-table .local-action button { min-height: 32px; padding: .2rem .75rem; }
.local-table td:nth-child(4) { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .prov-table .mcp-url { max-width: 10rem; }
  .preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* /E37-B1 */
/* E37-D: channel pages, one-row memory toolbar, end-user search in the table, modules
   in two columns, and data tables one screen wide on a phone. */
/* Hidden (.sr-only, absolutely positioned) headers must be clipped by the table's scroll box, or
   they widen the page on a phone. */
.data-table .table-box { position: relative; }
@media (max-width: 640px) {
  /* One line per cell, cut with an ellipsis; the text columns share the width (max-width: 0 in an
     auto-layout 100% table), numbers / actions / selection keep their natural width. */
  .data-table .table th, .data-table .table td { white-space: nowrap; max-width: 0; overflow: hidden; text-overflow: ellipsis;
    padding: .55rem .6rem; }
  .data-table .table .num, .data-table .table .actions, .data-table .table .mem-select, .data-table .table .att-act {
    width: 1%; max-width: none; overflow: visible; }
  .data-table .table td * { white-space: nowrap; }
  .data-table .dt-phone-hide { display: none; }
  .data-table .dt-foot { flex-wrap: wrap; }
}

/* channel page: icon, state, switch and delete above the tabs */
.ch-page .page-head { margin-bottom: .25rem; }
.ch-page .form-page-form, .ch-page .form-page-body, .ch-page .ch-sec { gap: .6rem; }
.ch-endpoint { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; }
.ch-endpoint > label { flex: 1 1 22rem; min-width: 0; }
.ch-nav-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; border-bottom: 1px solid var(--border); }
.ch-nav-row .sub-nav { flex: 1 1 auto; margin: 0; border-bottom: 0; min-width: 0; }
.ch-page-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding-bottom: .25rem; }
.ch-page .ch-issues { margin: 0; }
.ch-page .ch-msgs .alert { margin: 0; }
.ch-new-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 1rem; }
.ch-new-grid > label, .ch-new-page .ch-new-secrets label { display: flex; flex-direction: column; gap: .25rem; }
.ch-new-page .ch-new-secrets { max-width: 40rem; }
@media (max-width: 640px) {
  .ch-new-grid { grid-template-columns: minmax(0, 1fr); }
}

/* memories: one toolbar row inside the table, rare filters folded, content on two lines */
.mem-table .dt-toolbar { row-gap: .5rem; }
.mem-q-form { display: flex; flex: 1 1 16rem; gap: .5rem; min-width: 0; }
.mem-q-form input { flex: 1 1 auto; min-width: 0; }
.mem-table .dt-toolbar .mem-bulk { margin: 0; min-height: 0; }
.mem-more-filters { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mem-more-filters[hidden] { display: none; }
.mem-more-filters .mem-end-user { flex: 0 1 16rem; min-width: 0; }
.mem-table .table th, .mem-table .table td { padding: .45rem .7rem; }
@media (min-width: 641px) {
  /* one line per cell except the content (two) and the date / author pair */
  .mem-table td.mem-eu-col { max-width: 11rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mem-table .mem-when, .mem-table .mem-by { display: block; max-width: 13rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.mem-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.mem-table td { vertical-align: middle; }
@media (max-width: 640px) {
  .mem-clamp { display: inline; }
}

/* end users: the server search in the toolbar; claims on one line */
.eu-search { display: flex; flex: 1 1 20rem; gap: .5rem; min-width: 0; }
.eu-search input { flex: 1 1 auto; min-width: 0; }
.end-users-table td.eu-claims { max-width: 22rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* /E37-D */
/* E42: conversation thread, layout A "Densa (power users)": one card with head + stats row, a
   time column, compact bubbles, Markdown, metrics / sources / rating / trace under each answer,
   tool and notice rows, day separators, typing indicator, "Nuevos mensajes" button and the
   composer pinned at the bottom. The thread is one window high at every width (only the
   messages scroll); Markdown tables wrap and never scroll sideways (stacked rows on a phone). */
.cv-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; font-size: 13px; line-height: 1.45; }
.conv-detail:has(> .cv-thread) { display: flex; flex-direction: column; min-height: 0; }
.cv-thread .mono { font-family: var(--mono); }
.cv-ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cv-head { padding: 10px 16px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.cv-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.cv-head .conv-back { margin: 0; font-size: 12px; }
.cv-head .detail-title { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; min-width: 0; overflow-wrap: anywhere; }
.conv-detail-head.cv-head .sub-nav { margin: 0 0 0 auto; }
.conv-detail-head.cv-head .sub-nav { border-bottom: 0; gap: 2px 8px; }
.cv-head .sub-nav-link { min-height: 32px; padding: .2rem .5rem; font-size: 12.5px; }
.cv-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--muted); }
.cv-stat-bot { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); font-weight: 700; }
.cv-stat-bad { color: var(--danger); font-weight: 700; }
.cv-thread > .alert { margin: 8px 16px 0; }
.cv-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.conv-detail .cv-scroll, .cv-scroll { flex: 1; min-height: 0; overflow: hidden auto; overflow-anchor: none; overscroll-behavior: contain;
  padding: 12px 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.cv-scroll > .conv-empty, .cv-scroll > .chat-empty, .cv-scroll > .cv-loading { margin: auto; }
.cv-older { text-align: center; }
.cv-older .link { font-size: 11.5px; }
.cv-day { display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; }
.cv-day::before, .cv-day::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.cv-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: start; }
.cv-t { font-size: 11px; color: var(--muted); padding-top: 7px; text-align: right; font-variant-numeric: tabular-nums; }
.cv-thread .bubble { min-width: 0; max-width: min(720px, 100%); width: fit-content; font-size: 13px; padding: 8px 12px; border-radius: 2px 8px 8px 8px; }
.cv-thread .bubble.user { justify-self: end; max-width: min(560px, 100%); padding: 6px 10px; border-radius: 8px 8px 2px 8px; }
.cv-thread .bubble.assistant { justify-self: start; }
.cv-thread .bubble.has-error { border-color: var(--danger); }
.cv-thread .bubble .alert { margin: 6px 0 0; cursor: default; }
/* Markdown */
.bubble-text.md { white-space: normal; overflow-wrap: anywhere; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 6px; white-space: pre-line; }
.md ul, .md ol { margin: 0 0 8px; padding-left: 20px; }
.md li { margin: 2px 0; white-space: pre-line; }
.md .md-li-1 { margin-left: 16px; } .md .md-li-2 { margin-left: 32px; } .md .md-li-3 { margin-left: 48px; }
.md code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
.md blockquote { margin: 0 0 6px; padding-left: 10px; border-left: 3px solid var(--border-strong); color: var(--text-2); white-space: pre-line; }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 8px 0; }
.md .md-h { font-size: 13.5px; }
.md-cite { color: var(--accent-line); font-weight: 700; font-size: 10px; }
.md a { color: inherit; text-underline-offset: 2px; }
.md-pre { margin: 0 0 8px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.md-pre-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 10px; border-bottom: 1px solid var(--border);
  font-size: 11px; color: var(--muted); }
.md-pre-head .md-copy { font-size: 11px; min-height: 24px; color: inherit; }
.md-pre pre { margin: 0; padding: 8px 10px; font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.md-pre pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.bubble.user .md code { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .35); color: inherit; }
.bubble.user .md-pre { background: rgb(0 0 0 / .2); border-color: rgb(255 255 255 / .35); }
.bubble.user .md-pre pre, .bubble.user .md-pre-head { color: inherit; border-color: rgb(255 255 255 / .35); }
.bubble.user .md-cite { color: inherit; }
/* Tables wrap inside the bubble: never a sideways scroll (user rule, E39/E42). */
.md-table-wrap { position: relative; max-width: 100%; margin: 0 0 6px; }
.md-table { border-collapse: collapse; font-size: 12px; max-width: 100%; }
.md-table th, .md-table td { border: 1px solid var(--border); padding: 3px 8px; text-align: left; vertical-align: top;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word; min-width: 5.5em; }
.md-table th { background: var(--surface-2); font-weight: 700; }
.bubble.user .md-table th { background: rgb(0 0 0 / .2); }
.bubble.user .md-table th, .bubble.user .md-table td { border-color: rgb(255 255 255 / .35); }
/* Under each answer: metrics, sources chip, rating / trace / promote icons. */
.cv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.cv-metrics:empty { display: none; }
.cv-meta .pill { font-size: 11px; padding: 0 8px; }
.cv-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); color: var(--text-2); font-size: 11px; font-weight: 600; }
.cv-chip:hover { border-color: var(--accent-line); }
.cv-chip .cv-ic { width: 12px; height: 12px; }
.cv-chev { display: inline-flex; transition: transform .15s; }
.cv-chev.open { transform: rotate(180deg); }
.cv-actions { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 2px; }
.cv-rate { display: inline-flex; gap: 2px; }
.cv-ib { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-height: 0; padding: 0; border: 0;
  border-radius: 5px; background: none; color: var(--muted); text-decoration: none; }
.cv-ib:hover { background: var(--surface-2); color: var(--text); }
.cv-ib.active { color: var(--accent-line); background: var(--info-bg); }
.cv-fb-form { flex-basis: 100%; display: flex; gap: 6px; margin-top: 4px; }
.cv-fb-form input { flex: 1; min-width: 0; min-height: 32px; padding: 4px 8px; font-size: 12px; }
.cv-fb-form button { min-height: 32px; padding: 0 10px; font-size: 12px; }
.cv-fb-comment { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; font-size: 11.5px; color: var(--text-2); overflow-wrap: anywhere; }
.cv-srcs { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: var(--surface-2);
  font-size: 11.5px; overflow-wrap: anywhere; }
.cv-src { color: var(--text-2); }
.cv-src:not(.used) { color: var(--muted); }
.cv-cited { color: var(--ok-text); font-weight: 700; }
.cv-thread .trace { margin-top: 6px; font-size: 11.5px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; overflow-wrap: anywhere; }
/* tool calls and notices: their own rows, set apart from the bubbles */
.cv-tool { min-width: 0; max-width: 720px; border: 1px dashed var(--border-strong); border-radius: 6px; padding: 2px 10px;
  font-size: 11.5px; color: var(--text-2); background: var(--surface-2); }
.cv-tool.failed { border-color: var(--danger); }
.cv-tool-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; width: 100%; min-height: 28px; padding: 2px 0; border: 0;
  background: none; color: inherit; font-size: 11.5px; font-weight: 700; text-align: left; justify-content: flex-start; }
.cv-tool-name, .cv-tool-res, .cv-tool-toggle { font-weight: 500; }
.cv-tool-res, .cv-tool-toggle { color: var(--muted); }
.cv-tool-toggle { margin-left: auto; }
.cv-tool pre { margin: 4px 0; font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
.cv-tool .cv-tool-out { border-top: 1px dashed var(--border-strong); padding-top: 4px; }
.cv-sys { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
/* waiting for the answer */
.cv-typing { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 11.5px; color: var(--muted); }
.cv-dots { display: inline-flex; gap: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 2px 8px 8px 8px; background: var(--surface); }
.cv-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: cv-blink 1.2s infinite; }
.cv-dots span:nth-child(2) { animation-delay: .2s; }
.cv-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes cv-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cv-dots span { animation: none; } .cv-chev { transition: none; } }
.cv-newmsgs { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2; min-height: 32px; padding: 6px 14px;
  border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 12px; box-shadow: 0 6px 18px rgb(26 29 33 / .25); }
/* composer pinned under the messages */
.cv-thread .cv-composer { flex: none; margin: 0; padding: 8px 12px; border: 0; border-top: 1px solid var(--border); border-radius: 0;
  display: flex; align-items: flex-start; gap: 8px; background: var(--surface); }
.cv-compose { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cv-thread .cv-compose textarea { min-height: 36px; max-height: 160px; field-sizing: content; padding: 7px 10px; border-radius: 6px;
  font-family: var(--font); font-size: 13px; resize: none; }
.cv-hint { font-size: 10.5px; color: var(--muted); }
.cv-thread .cv-composer button[type=submit] { min-width: 0; min-height: 36px; height: 36px; padding: 0 16px; }
/* Below 1100 px the open thread is its own page: one window high as well (composer at the bottom). */
@media (max-width: 1099px) {
  .shell:has(.cv-thread) { height: 100vh; height: 100dvh; min-height: 0; }
  .shell:has(.cv-thread) main.content { display: flex; flex-direction: column; min-height: 0; padding-bottom: .5rem; }
  .conv-page.has-detail:has(.cv-thread) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .conv-page.has-detail:has(.cv-thread) .conv-split { flex: 1; min-height: 0; display: flex; flex-wrap: nowrap; align-items: stretch; }
  .conv-page.has-detail .conv-detail:has(> .cv-thread) { display: flex; min-height: 0; min-width: 0; }
}
/* Phone: the same dense layout, narrower time column, the head on two lines, stacked tables. */
@media (max-width: 640px) {
  .shell:has(.cv-thread) main.content { padding: .5rem .5rem .25rem; }
  .cv-head { padding: 8px 10px; gap: 4px; }
  .conv-detail-head.cv-head .sub-nav { margin: 0; width: 100%; }
  .cv-stats { gap: 2px 10px; font-size: 11px; }
  .cv-scroll, .conv-detail .cv-scroll { padding: 8px 8px 12px; gap: 8px; }
  .cv-row { grid-template-columns: 34px minmax(0, 1fr); gap: 6px; }
  .cv-t { font-size: 10px; }
  .cv-thread .bubble.user { max-width: 100%; }
  .cv-thread .cv-composer { padding: 6px 8px; }
  .cv-thread .cv-compose textarea { font-size: 16px; }
  .cv-hint { display: none; }
  .md-table, .md-table tbody, .md-table tr, .md-table td { display: block; width: 100%; }
  .md-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .md-table tr { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; padding: 2px 0; }
  .md-table td { min-width: 0; border: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px; padding: 2px 8px; }
  .md-table td::before { content: attr(data-label); font-weight: 700; color: var(--text-2); overflow-wrap: anywhere; }
  .bubble.user .md-table td::before { color: inherit; }
}
/* /E42 */

/* E37-final: data tables fit a 1280 px window without a sideways scroll inside their box. Cells stay
   on one line; the long text column of each table (ids, URLs, claims, descriptions) takes a share
   of the width and is cut with an ellipsis (the full text is on the row's own page or in a title). */
@media (min-width: 641px) {
  .end-users-table .table td, .tools-table .table td, .mem-table .table td { white-space: nowrap; }
  .end-users-table td:has(> a > code), .end-users-table td.eu-claims,
  .tools-table td:has(> .tool-cell), .tools-table td:has(> .tool-endpoint), .keys-table td:has(> .key-name) {
    width: 26%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .end-users-table td > *, .tools-table .tool-cell > *, .tools-table .tool-endpoint,
  .keys-table .key-name, .keys-table .key-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tools-table .tool-desc { display: block; max-width: none; }
  /* API keys: name and description on two lines, the summaries may wrap */
  .keys-table .table td { white-space: normal; }
  .keys-table .key-name, .keys-table .key-desc { display: block; max-width: none; margin-left: 0; }
  /* memories: the content (two lines) takes what the narrow columns leave */
  .mem-table th { white-space: normal; }
  .mem-table .table .mem-content { min-width: 10rem; max-width: 0; white-space: normal; }
  .mem-table td.mem-eu-col { width: 7.5rem; max-width: 7.5rem; }
  .mem-table td:has(> .mem-when) { width: 8.5rem; max-width: 8.5rem; overflow: hidden; }
  .mem-table .mem-when, .mem-table .mem-by { max-width: 100%; }
  .mem-table td:has(> .mem-scope) { max-width: 7.5rem; overflow: hidden; }
  .mem-table .mem-scope { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
}
/* the source column repeats the "Actualizada" line ("por extracción automática"): hidden until there is room */
@media (min-width: 641px) and (max-width: 1499px) {
  .mem-table .mem-source-col { display: none; }
}
/* /E37-final */
/* E39: data tables that fit the height (one window, the box scrolls, never the page), one-line
   cells with width priorities (never a sideways scroll), density, the one-line toolbar (E40) and
   the always-visible pager (E41). Opt-in: .dt-fit / .dt-oneline / .dt-has-bar. */
.shell:has(.dt-fit) { height: 100vh; height: 100dvh; min-height: 0; }
.shell:has(.dt-fit) > main.content { display: flex; flex-direction: column; min-height: 0; padding-top: 1rem; padding-bottom: .75rem; }
.shell:has(.dt-fit) .settings-layout { flex: 1 1 auto; min-height: 0; flex-wrap: nowrap; align-items: stretch; }
.shell:has(.dt-fit) .settings-layout > .side-nav { align-self: flex-start; }
.shell:has(.dt-fit) .settings-body, .shell:has(.dt-fit) .section-body, .dt-fit-host {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.data-table.dt-fit { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
.dt-fit > .table-box { flex: 0 1 auto; min-height: 0; overflow: auto; margin-bottom: .4rem; overscroll-behavior: contain; }
.dt-fit > .dt-toolbar, .dt-fit > .dt-foot { flex: none; }
.dt-fit .table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); box-shadow: inset 0 -1px var(--border); }
@media (max-width: 900px) {
  .shell:has(.dt-fit) .settings-layout { flex-direction: column; gap: .5rem; }
  .shell:has(.dt-fit) .settings-layout > .side-nav { flex: none; align-self: stretch; }
}

/* one-line cells: the text columns share the width, numbers / actions / selection keep theirs */
.dt-oneline .table { table-layout: auto; }
.dt-oneline .table th, .dt-oneline .table td { white-space: nowrap; max-width: 0; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.dt-oneline .table td * { white-space: nowrap; }
.dt-oneline .table .num, .dt-oneline .table .actions, .dt-oneline .table .dt-more-col, .dt-oneline .table .mem-select,
.dt-oneline .table .att-act, .dt-oneline .table .dt-fixed { width: 1%; max-width: none; overflow: visible; }
.dt-oneline .th-sort { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-oneline .table td.dt-wrap { white-space: normal; }
.dt-oneline .table td.dt-wrap, .dt-oneline .table td.dt-wrap * { white-space: normal; }
.dt-oneline .table td.dt-wrap > * { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.dt-oneline .dt-actions, .dt-oneline .icon-actions { flex-wrap: nowrap; }
/* compact = the dense "power users" view (E42 option A): 13 px, tight rows, muted secondary
   text, figures in tabular numerals, small icon actions */
.dt-compact .table td { padding: 3px 8px; font-size: 13px; line-height: 20px; }
.dt-compact .table th { padding: 6px 8px; font-size: 11.5px; line-height: 16px; letter-spacing: .01em; }
.dt-compact .table td.num, .dt-compact .table th.num { font-variant-numeric: tabular-nums; }
.dt-compact .table td .muted, .dt-compact .table td .small { font-size: 12px; }
.dt-compact .table .pill, .dt-compact .table .badge, .dt-compact .table .health-pill { font-size: 11.5px; padding: 0 7px; line-height: 18px; min-height: 0; }
.dt-compact .icon-btn { width: 24px; height: 24px; min-height: 24px; border-radius: 6px; }
.dt-compact .icon-btn .ico { width: 14px; height: 14px; }
.dt-compact .icon-actions, .dt-compact .dt-actions { gap: 4px; }
.dt-compact .table td button:not(.icon-btn):not(.dt-more-btn), .dt-compact .table td .btn { min-height: 24px; padding: 0 .5rem; font-size: 12.5px; }
.dt-compact .table td select, .dt-compact .table td input:not([type=checkbox]):not([type=radio]) { min-height: 24px; padding: 0 .35rem; font-size: 12.5px; }
.dt-compact .dt-more-btn { width: 24px; min-height: 24px; height: 24px; }
.dt-comfortable .table th, .dt-comfortable .table td { padding: .6rem .9rem; }
.dt-comfortable .table td.num { font-variant-numeric: tabular-nums; }

/* width priorities and the row's hidden values ("⋯") */
.data-table .dt-more-col, .data-table .dt-detail-row, .data-table .dt-d { display: none; }
.dt-more-btn { min-height: 28px; width: 28px; padding: 0; line-height: 1; border-color: var(--border); background: var(--surface); }
.dt-details { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.dt-details dt { color: var(--muted); font-size: .8rem; font-weight: 600; }
.dt-details dt::after { content: ":"; }
.dt-details dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dt-d { gap: .35rem; align-items: baseline; min-width: 0; max-width: 100%; }
.dt-detail-row > td { background: var(--surface-2); }
@media (max-width: 1279px) {
  .data-table .dt-narrow-hide { display: none; }
  .dt-has-narrow .dt-more-col { display: table-cell; }
  .dt-has-narrow .dt-detail-row:not([hidden]) { display: table-row; }
  .dt-has-narrow .dt-d-narrow { display: flex; }
}
@media (max-width: 1099px) {
  .data-table .dt-tablet-hide { display: none; }
  .dt-has-tablet .dt-more-col { display: table-cell; }
  .dt-has-tablet .dt-detail-row:not([hidden]) { display: table-row; }
  .dt-has-tablet .dt-d-tablet { display: flex; }
}
@media (max-width: 640px) {
  .dt-has-phone .dt-more-col { display: table-cell; }
  .dt-has-phone .dt-detail-row:not([hidden]) { display: table-row; }
  .dt-has-phone .dt-d-phone { display: flex; }
}

/* the one-line toolbar: title · count, "?", search, filters, "Más filtros", actions */
.dt-bar { flex-wrap: nowrap; gap: .5rem; margin-bottom: .5rem; min-width: 0; }
.dt-bar > * { flex: none; min-width: 0; }
.dt-bar > .dt-search { flex: 1 1 10rem; max-width: 22rem; min-width: 6rem; }
.dt-bar > .dt-spacer { flex: 1 1 0; }
.dt-bar input, .dt-bar select, .dt-bar button, .dt-bar .btn { min-height: 36px; padding-top: .3rem; padding-bottom: .3rem; }
.dt-bar select { max-width: 12rem; }
.dt-title { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.dt-h { margin: 0; font-size: 1.3rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
h2.dt-h { font-size: 1.1rem; }
.dt-count { color: var(--muted); font-weight: 600; font-size: .9em; }
.dt-help { width: 28px; height: 28px; min-height: 28px; }
.dt-bar-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; }
.dt-bar-actions .btn, .dt-bar-actions button { white-space: nowrap; }
.dt-more-wrap { position: relative; }
.dt-more-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 16rem; max-width: min(28rem, calc(100vw - 2rem));
  display: flex; flex-direction: column; gap: .5rem; padding: .75rem; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.dt-more-pop[hidden] { display: none; }
@media (max-width: 900px) {
  /* two lines: title and actions, then search and filters */
  .dt-bar { flex-wrap: wrap; row-gap: .5rem; }
  .dt-bar > .dt-title { order: 1; flex: 1 1 auto; }
  .dt-bar > .dt-spacer { display: none; }
  .dt-bar > .dt-bar-actions { order: 2; margin-left: auto; }
  .dt-bar > * { order: 3; }
  .dt-bar > .dt-search { flex: 1 1 8rem; max-width: none; }
  .dt-more-pop { left: auto; right: 0; }
}

/* the pager: range, rows per page, density, previous / "1 de N" / next, on one line */
.dt-foot-fit { flex-wrap: nowrap; gap: .5rem; min-width: 0; }
.dt-foot-fit select { min-height: 32px; padding: .15rem .4rem; }
.dt-foot-fit button { min-height: 32px; min-width: 32px; padding: .1rem .5rem; }
.dt-foot-fit .dt-density[aria-pressed="true"] { border-color: var(--text-2); background: var(--surface-2); }
.dt-foot-fit .dt-range, .dt-foot-fit .dt-pages { white-space: nowrap; }
@media (max-width: 640px) {
  .dt-foot-fit .dt-size-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dt-foot-fit { gap: .35rem; }
}

/* pilots: /bots one-line bot cell; /api-keys */
.bots-table.dt-oneline .bot-cell { min-width: 0; gap: .5rem; }
.bots-table.dt-oneline .bot-title { flex-direction: row; align-items: baseline; gap: .5rem; overflow: hidden; }
.bots-table.dt-oneline .bot-title > * { overflow: hidden; text-overflow: ellipsis; }
.bots-table.dt-oneline .bot-title > a { flex: none; max-width: 100%; }
.dt-compact.bots-table .bot-avatar { width: 20px; height: 20px; font-size: 9.5px; }
.bots-table.dt-oneline td.actions { min-width: 0; }
.bots-table.dt-oneline td:first-child { width: 22%; }
.keys-table.dt-oneline .key-name { font-weight: 600; }
.keys-table.dt-oneline .key-desc { margin-left: .5rem; }
@media (max-width: 640px) {
  /* a phone keeps "Probar" and "Configuración" in the row; the rest is on the bot's own pages */
  .bots-table.dt-oneline .icon-actions > :nth-child(n+3) { display: none; }
  .bots-table.dt-oneline .bot-title > .muted { display: none; }
}
/* /E39 */
/* E39-B: dense knowledge base and attention lists, knowledge base detail tables, home services
   card, retrieval trace and the conversations toolbar on one line (never a sideways scroll). */
.kb-table.dt-oneline .kb-title, .kb-docs-table.dt-oneline .kb-doc-title { display: flex; align-items: baseline; gap: .5rem; min-width: 0; overflow: hidden; }
.kb-table.dt-oneline .kb-title > *, .kb-docs-table.dt-oneline .kb-doc-title > * { overflow: hidden; text-overflow: ellipsis; }
.kb-table.dt-oneline .kb-title > a, .kb-docs-table.dt-oneline .kb-doc-title > a { flex: none; max-width: 100%; }
.kb-table.dt-oneline .kb-bots-cell { display: inline; }
.kb-table.dt-oneline td:first-child { width: 26%; }
.kb-docs-table .dt-bar .chip, .attention-table .dt-bar .chip { min-height: 32px; padding: .2rem .75rem; white-space: nowrap; }
.kb-docs-table .dt-bar .kb-upload { flex-wrap: nowrap; margin-left: auto; }
.kb-docs-table .dt-bar .upload-options { margin: 0; }
.kb-docs-table .dt-bar .upload-options summary { min-height: 36px; white-space: nowrap; }
.kb-snap-table .table-box { margin: .5rem 0 .75rem; }
.attention-table .dt-bar .chips { order: 0; flex-wrap: nowrap; }
.attention-table.dt-compact td.att-act { padding-top: 3px; padding-bottom: 3px; }
.attention-table.dt-compact td.att-act a.icon-btn { min-height: 24px; display: inline-flex; }
.attention-table.dt-compact .sev-badge { font-size: 11px; line-height: 16px; padding: 0 .45rem; }
/* row icons sit in the last column: their tooltips open leftwards, inside the table box */
.kb-table .icon-actions .tip, .kb-docs-table .icon-actions .tip, .kb-bots-table .icon-actions .tip,
.attention-table .icon-actions .tip { left: auto; right: 0; transform: none; }
@media (max-width: 900px) { .attention-table .dt-bar .chips { order: 3; } }
@media (max-width: 640px) {
  .attention-table .dt-bar .chips { flex-wrap: wrap; }
  .kb-docs-table.dt-oneline .kb-doc-title > .warn-text { display: none; }
}
.svc-card-table { margin: 0; }
.svc-card-table .table-box { overflow-x: hidden; }
/* retrieval trace: figures keep their width, the excerpt wraps under the name */
.trace-table { container-type: inline-size; margin-bottom: .6rem; }
.trace-table .table-wrap { margin-bottom: 0; }
.trace-table.dt-oneline .table td.trace-doc, .trace-table.dt-oneline .table td.trace-doc details { white-space: normal; }
.trace-table.dt-oneline td.trace-doc summary { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trace-table.dt-oneline td.trace-doc summary * { white-space: nowrap; }
.trace-table.dt-oneline td.trace-doc pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 16rem; overflow: auto; margin: .25rem 0 0; }
@container (max-width: 560px) {
  .trace-table .trace-ctx { display: none; }
  .trace-table th:nth-child(4), .trace-table td:nth-child(4) { display: none; }
}
/* conversations: title · count, "?", search, bot, chips, "Más filtros", "Nuevo chat" on one line */
.conv-bar { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.conv-page .conv-bar { margin-bottom: .6rem; }
.conv-bar > .dt-title { flex: none; }
.conv-bar > .conv-toolbar { flex: 1 1 auto; min-width: 0; margin: 0; flex-wrap: nowrap; gap: .4rem; }
.conv-bar .conv-search { flex: 1 1 10rem; min-width: 5rem; max-width: 22rem; }
.conv-bar input, .conv-bar select, .conv-bar button, .conv-bar summary { min-height: 36px; padding-top: .3rem; padding-bottom: .3rem; }
.conv-bar select { max-width: 12rem; }
.conv-bar .chips { flex-wrap: nowrap; }
.conv-bar .chip { white-space: nowrap; padding-left: .6rem; padding-right: .6rem; }
.conv-bar .more-filters { flex: none; position: relative; }
.conv-bar .more-filters > summary { display: inline-flex; align-items: center; white-space: nowrap; padding-left: .75rem; padding-right: .75rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.conv-bar .more-filters > .form-row { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; margin: 0; display: flex; flex-wrap: wrap;
  align-items: center; gap: .5rem; width: max-content; max-width: min(34rem, calc(100vw - 2rem)); padding: .75rem;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.conv-bar .conv-new { flex: none; white-space: nowrap; }
@media (max-width: 1099px) {
  .conv-bar { flex-wrap: wrap; row-gap: .5rem; }
  .conv-bar > .dt-title { order: 1; flex: 1 1 auto; }
  .conv-bar > .conv-new { order: 2; }
  .conv-bar > .conv-toolbar { order: 3; flex: 1 1 100%; flex-wrap: wrap; }
  .conv-bar .chips { flex-wrap: wrap; }
  .conv-bar .more-filters > .form-row { left: 0; right: auto; }
}
/* /E39-B */
/* E39-D: package D (users, end users, memories, channels): fitted one-line tables,
   dense rows, server searches and filters on the toolbar line, never a sideways scroll. */
/* end users: the server search takes the free width of the toolbar */
.dt-bar > form.eu-search { flex: 1 1 12rem; max-width: 30rem; }
.dt-bar > form.eu-search button { flex: none; }
/* memories (global page): search form, bot, selection and "Más filtros" on one line */
.dt-bar > form.mem-q-form { flex: 1 1 10rem; max-width: 24rem; }
.dt-bar > form.mem-q-form button { flex: none; }
.dt-bar > .mem-bulk { margin: 0; min-height: 0; flex-wrap: nowrap; white-space: nowrap; }
.dt-more-pop .mem-more-filters { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.dt-more-pop .mem-more-filters .mem-end-user { flex: none; }
.dt-more-pop .mem-more-filters select { max-width: none; }
/* memories: every row one line (content cut, its whole text in the tooltip and the drawer) */
.mem-table.dt-oneline th { white-space: nowrap; }
.mem-table.dt-oneline .table td.mem-content { white-space: nowrap; }
.mem-table.dt-oneline .table .mem-content { min-width: 0; max-width: 0; }
.mem-table.dt-compact .table th { padding: 6px 8px; }
.mem-table.dt-compact .table td { padding: 3px 8px; }
.mem-table.dt-oneline .mem-when { display: inline; max-width: none; }
.mem-table.dt-oneline .mem-by { max-width: none; }
.mem-table.dt-oneline .mem-clamp { display: inline; -webkit-line-clamp: unset; line-clamp: none; }
.mem-table.dt-oneline .table td:has(> .mem-when) { width: auto; max-width: 0; overflow: hidden; }
.mem-table.dt-oneline .mem-by { display: inline; }
.mem-table.dt-oneline .table td.mem-eu-col { width: auto; max-width: 0; }
.mem-table.dt-oneline .table td:has(> .mem-scope) { max-width: 0; }
/* channels: dense rows (the older .ch-list paddings and the 32 px cell are for the comfortable view) */
.ch-list .data-table.dt-compact .table td { padding: 3px 8px; }
.ch-list .data-table.dt-compact .table th { padding: 6px 8px; }
.ch-table.dt-oneline .ch-cell { min-width: 0; min-height: 0; gap: .5rem; }
.ch-table.dt-oneline .ch-name { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.ch-table.dt-oneline .ch-name > * { overflow: hidden; text-overflow: ellipsis; }
.ch-table.dt-compact .ch-icon { width: 20px; height: 20px; font-size: 10px; border-radius: 5px; }
.ch-table.dt-oneline td.ch-act { width: 1%; }
.ch-list.dt-fit-host { margin: 0; }
.dt-bar .ch-filter select { min-width: 0; }
/* row icons at the right end: their (hidden but laid out) tooltips open leftwards, or they widen the
   scroll box by their overhang (users 12 px, channels 21 px, memories 35 px) */
.users-table td.actions .tip, .ch-table td.actions .tip, .mem-table td.actions .tip, .mem-table .mem-conv .tip {
  left: auto; right: 0; transform: none; }
/* /E39-D */
/* E39-C: models and integrations (providers, local models, tools, API-key
   audit and permission matrix): one-line dense rows, no sideways scroll at 1920/1280/1024/390. */
.prov-table.dt-oneline .prov-cell { flex-wrap: nowrap; overflow: hidden; min-width: 0; }
.prov-table.dt-oneline .prov-cell > strong { overflow: hidden; text-overflow: ellipsis; }
.prov-catalogue.dt-fit-host, .local-models.dt-fit-host { margin-top: .5rem; }
.prov-catalogue-table.dt-oneline .badges, .local-table.dt-oneline .badges { flex-wrap: nowrap; }
.prov-catalogue-table.dt-oneline td:first-child code { margin-right: .4rem; }
details.prov-listed { margin: .25rem 0; }
.local-table.dt-oneline .local-model-cell { flex-wrap: nowrap; max-width: none; min-width: 0; overflow: hidden; }
.local-table.dt-oneline .local-action { gap: .35rem; }
.local-table.dt-oneline .local-action button:not(.icon-btn) { min-height: 24px; padding: 0 .6rem; }
.local-table.dt-oneline .pull-progress { flex-direction: row; align-items: center; gap: .4rem; min-width: 0; }
.local-table.dt-oneline .pull-progress progress { width: 5rem; }
.local-models .local-head { margin-bottom: .25rem; gap: .25rem 1rem; }
.local-models .local-other { margin: 0 0 .25rem; }
.dt-compact .table .mcp-pill { font-size: 11.5px; padding: 0 7px; line-height: 18px; gap: .3rem; }
.dt-compact .table .mcp-pill .dot { width: 6px; height: 6px; }
.tools-table.dt-oneline .tool-cell { overflow: hidden; }
.tools-table.dt-oneline .tool-desc { display: inline; max-width: none; }
/* /api-keys/<id>/audit: hand table, dense and one line */
.key-audit-dt { margin-bottom: .4rem; }
.key-audit-dt .key-audit th:nth-child(1) { width: 10rem; }
.key-audit-dt .key-audit th:nth-child(2) { width: 5rem; }
.key-audit-dt .key-audit th:nth-child(4) { width: 4rem; }
.key-audit-dt .key-audit th:nth-child(5) { width: 8rem; }
@media (max-width: 640px) {
  .key-audit-dt .key-audit .audit-ip { display: none; }
  .key-audit-dt .key-audit th:nth-child(1) { width: 7.5rem; }
}
/* permission matrix (/api-keys/new, /<id>/edit): the "todo / nada" column toggles go under the
   action name, labels may wrap, dense cells; the form gives the matrix column more room. */
.perm-box .perm-matrix { width: 100%; font-size: 13px; }
.perm-matrix th, .perm-matrix td { padding: 4px 6px; }
.perm-matrix thead th { font-size: 11.5px; line-height: 15px; vertical-align: bottom; }
.perm-matrix th[scope="row"] { white-space: normal; overflow-wrap: anywhere; font-weight: 600; }
.perm-matrix .perm-toggles { flex-direction: column; align-items: center; gap: 0; }
.perm-matrix .perm-toggles .link, .perm-matrix .perm-row-toggles .link { min-height: 0; padding: 0 2px; font-size: 11.5px; line-height: 16px; }
.perm-matrix .perm-row-toggles { gap: .25rem; width: 1%; }
.perm-matrix .perm-cell input { width: 1rem; height: 1rem; margin: 0; }
@media (min-width: 1100px) {
  .key-form-page .key-form-grid { grid-template-columns: minmax(15rem, 1fr) minmax(0, 2fr); }
}
@media (max-width: 640px) {
  /* phone: the row's "todo / nada" stack too, cells tighter */
  .perm-matrix td.perm-row-toggles { display: table-cell; }
  .perm-matrix .perm-row-toggles .link { display: block; }
  .perm-matrix th, .perm-matrix td { padding: 3px 4px; }
}
/* /E39-C */
/* E39-A: bot tabs as fitted tables (versions, tests cases / runs, glossary, knowledge). */
/* glossary: the table and the detail panel side by side fill the frame; the panel
   scrolls on its own; on a narrow window the panel goes under the table with a capped height */
.shell:has(.dt-fit) .gl-layout.gl-fit { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: .75rem; }
.gl-fit > .gl-terms { flex: 1 1 auto; min-width: 0; padding: .75rem .75rem .5rem; }
.gl-fit > .gl-detail { flex: 0 0 340px; position: static; min-height: 0; overflow-y: auto; gap: .75rem; }
.gl-fit .gl-detail .gl-shared-summary {
  margin: auto 0 0; padding-top: .5rem; border-top: 1px solid var(--border); max-width: none; }
.gl-fit .dt-bar .gl-show select { min-width: 0; max-width: 9rem; }
@media (max-width: 1279px) { .gl-fit > .gl-detail { flex-basis: 290px; } }
@media (max-width: 900px) {
  .shell:has(.dt-fit) .gl-layout.gl-fit { flex-direction: column; gap: .5rem; }
  .gl-fit > .gl-terms { flex: 1 1 auto; min-height: 12rem; }
  .gl-fit > .gl-detail { flex: 0 1 auto; max-height: 34%; }
}
/* versions: note with the author muted after it; the diff never scrolls sideways */
.versions-table.dt-oneline .version-author { margin-left: .35rem; }
.version-diff { table-layout: fixed; width: 100%; }
.version-diff th:first-child, .version-diff td:first-child { width: 12rem; }
.version-diff code, .version-diff pre { overflow-wrap: anywhere; word-break: break-word; }
.version-diff pre { overflow-x: hidden; }
@media (max-width: 640px) { .version-diff th:first-child, .version-diff td:first-child { width: 6.5rem; } }
/* knowledge rules and badges stay one line */
.bk-table.dt-oneline .rule-summary { white-space: nowrap; }
.cases-table.dt-oneline .badge { margin-left: .25rem; }
/* metrics: the survey averages (hand table) with one-line cells */
.stats-survey { margin-bottom: 0; }
.stats-survey .table-box { margin-bottom: 0; }
@media (max-width: 640px) {
  .gl-fit > .gl-terms { padding: .5rem; }
  .gl-fit .dt-bar .gl-show select { max-width: 8rem; }
}
/* /E39-A */
/* E44: row actions are icon buttons in one last column (`Column::actions`), grouped at the row's
   end; every tooltip opens leftwards so it stays inside the table box (also while hidden: a
   laid-out tooltip past the right edge widens the scroll box). */
.data-table td.actions .dt-actions, .data-table td.actions .icon-actions { justify-content: flex-end; }
.data-table td.actions .tip { left: auto; right: 0; transform: none; }
.local-table .local-action button.icon-btn { min-height: 0; padding: 0; }
.dt-compact .local-table .local-action button.icon-btn, .local-table.dt-compact .local-action button.icon-btn { min-height: 24px; }
/* /E44 */
/* E44b: the comfortable density keeps its taller rows on a phone but not the wide side padding and
   40 px icons: at 390 px it must not scroll sideways either (users 403 > 356 px before). */
@media (max-width: 640px) {
  .dt-comfortable .table th, .dt-comfortable .table td { padding-left: .4rem; padding-right: .4rem; }
  .dt-comfortable .icon-btn { width: 32px; height: 32px; min-height: 32px; }
  .dt-comfortable .icon-actions, .dt-comfortable .dt-actions { gap: 4px; }
  .dt-comfortable .dt-more-btn { width: 28px; min-height: 28px; height: 28px; }
}
/* /E44b */
/* E51: /attention severity chips colour-coded like the severity column: a dot and a tinted count
   (errors red, warnings amber, all neutral); the active chip is filled. Dots are 3:1 and texts
   4.5:1 against their background in both themes (E2E # E51). */
:root { --warn-mark: #b45309; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --warn-mark: #f0b45e; } } :root[data-theme="dark"] { --warn-mark: #f0b45e; } /* E50 */
.att-chip { gap: .4rem; }
.att-chip-dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; background: var(--muted); }
.att-chip-n { display: inline-block; min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; font-size: .8rem; line-height: 1.3rem;
  text-align: center; font-weight: 800; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.att-chip-error { border-color: color-mix(in srgb, var(--danger) 55%, var(--border-strong)); }
.att-chip-error .att-chip-dot { background: var(--danger); }
.att-chip-error .att-chip-n { background: var(--danger-solid); color: #fff; border-color: var(--danger-solid); }
.att-chip-warning { border-color: color-mix(in srgb, var(--warn-mark) 55%, var(--border-strong)); }
.att-chip-warning .att-chip-dot { background: var(--warn-mark); }
.att-chip-warning .att-chip-n { background: var(--warn-bg); color: var(--warn-text); border-color: color-mix(in srgb, var(--warn-text) 30%, transparent); }
.att-chip-all[aria-pressed="true"] .att-chip-dot { background: var(--ink-text); }
.att-chip-all[aria-pressed="true"] .att-chip-n { background: var(--ink-text); color: var(--ink); border-color: var(--ink-text); }
.att-chip-error[aria-pressed="true"] { background: var(--danger-solid); color: #fff; border-color: var(--danger-solid); }
.att-chip-error[aria-pressed="true"] .att-chip-dot { background: #fff; }
.att-chip-error[aria-pressed="true"] .att-chip-n { background: #fff; color: var(--danger-solid); border-color: #fff; }
.att-chip-warning[aria-pressed="true"] { background: var(--warn-text); color: var(--warn-bg); border-color: var(--warn-text); }
.att-chip-warning[aria-pressed="true"] .att-chip-dot { background: var(--warn-bg); }
.att-chip-warning[aria-pressed="true"] .att-chip-n { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-bg); }
/* phone: dot and count make the chips wider; tighter and free to wrap (never a sideways scroll) */
@media (max-width: 640px) {
  .attention-table .dt-bar > .chips { flex: 1 1 100%; flex-wrap: wrap; max-width: 100%; }
  .attention-table .dt-bar .att-chip { padding: .2rem .55rem; gap: .3rem; }
  .att-chip .att-chip-n { min-width: 1.2rem; padding: 0 .3rem; }
}
/* /E51 */
/* E45: AI provider logos (components/provider_logo.rs): the vendor mark on a white tile, legible in
   both themes; in the provider list, the provider page head, the catalogue cards and the model
   selectors (next to the provider list, a native option cannot hold an image). */
.prov-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px;
  border-radius: 6px; background: #fff; border: 1px solid var(--border); vertical-align: middle; }
.prov-logo img { width: 16px; height: 16px; display: block; }
.prov-logo.large { width: 32px; height: 32px; border-radius: 8px; }
.prov-logo.large img { width: 20px; height: 20px; }
h1.prov-title { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.prov-cell .prov-logo { margin-right: .1rem; }
a.preset-card:has(.prov-logo) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; align-items: center; }
a.preset-card .prov-logo { grid-row: span 2; width: 30px; height: 30px; border-radius: 8px; }
a.preset-card .prov-logo img { width: 20px; height: 20px; }
.prov-select { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.prov-select > select { flex: 1; min-width: 0; }
/* below 1280 px the /providers toolbar (title, search, local models, add all from the catalogue,
   add) may wrap: the buttons move under the title instead of pushing the page sideways */
@media (max-width: 1279px) {
  .prov-table .dt-bar { flex-wrap: wrap; row-gap: .5rem; }
  .prov-table .dt-bar > .dt-bar-actions { flex-wrap: wrap; margin-left: auto; min-width: 0; max-width: 100%; }
}
/* phone: the buttons take their own line and wrap */
@media (max-width: 640px) {
  .prov-table .dt-bar > .dt-bar-actions { flex: 1 1 100%; flex-wrap: wrap; margin-left: 0; min-width: 0; }
  .prov-table .dt-bar-actions .btn, .prov-table .dt-bar-actions button { white-space: normal; max-width: 100%; }
  /* logo + name get the room: the preset / key badges stay on the provider page */
  .prov-table .prov-cell .badge { display: none; }
}
/* /E45 */
/* E58: the app header has the same box on every page. Fitted pages (E39, `.shell:has(.dt-fit)`,
   one window high) had no vertical scrollbar while the others had one, so between bot tabs the
   header and the page changed width by the scrollbar's width; the gutter is now always reserved.
   In that 100dvh column the header must not shrink either when the body is taller. */
html { scrollbar-gutter: stable; }
.shell > .brandbar { flex-shrink: 0; }
/* /E58 */
/* E67: /conversations: the head keeps title, view tabs and «Nuevo chat»; search and filters sit in
   the left column over the list (the thread gains that height); «Más filtros» opens in the
   column's flow, never over the thread (E72: it covered the thread's «Conversación» / «Análisis»). */
.conv-bar { flex-wrap: nowrap; }
.conv-bar > .conv-tabs { flex: 0 1 auto; min-width: 0; margin: 0; border-bottom: 0; gap: .1rem; }
.conv-bar > .conv-new { margin-left: auto; }
.conv-tab { gap: .35rem; min-height: 36px; padding: .25rem .65rem; }
.conv-tab[aria-selected="true"] { color: var(--text); box-shadow: inset 0 -3px 0 var(--accent-line); }
.conv-tab-count { font-size: .85em; font-variant-numeric: tabular-nums; }
.conv-tab-count:empty { display: none; }
.conv-side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.conv-side > .conv-toolbar { margin: 0; flex-wrap: wrap; gap: .4rem; }
.conv-side .conv-search { flex: 1 1 10rem; min-width: 0; max-width: none; }
.conv-side .conv-bot { flex: 1 1 9rem; min-width: 0; max-width: none; }
.conv-side input, .conv-side select, .conv-side button, .conv-side summary { min-height: 36px; padding-top: .3rem; padding-bottom: .3rem; }
.conv-side .more-filters { flex: 0 1 auto; min-width: 0; }
.conv-side .more-filters[open] { flex: 1 1 100%; }
.conv-side .more-filters > summary { display: inline-flex; align-items: center; white-space: nowrap; padding-left: .75rem; padding-right: .75rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.conv-side .more-filters > .form-row { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .4rem 0 0;
  padding: .6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.conv-side .more-filters > .form-row > * { flex: 1 1 9rem; min-width: 0; }
.conv-side .more-filters > .form-row input, .conv-side .more-filters > .form-row select { width: 100%; max-width: none; }
.conv-side > .conv-list { flex: 1 1 auto; max-width: none; }
@media (min-width: 1100px) {
  .conv-page .conv-toolbar { margin-bottom: 0; }
  .conv-split > .conv-side { min-height: 0; }
  .conv-split .conv-side > .conv-list { height: auto; min-height: 0; }
}
@media (max-width: 1099px) {
  .conv-bar { flex-wrap: wrap; }
  .conv-bar > .conv-tabs { order: 3; flex: 1 1 100%; }
  .conv-page.has-detail .conv-side { display: none; }
  .conv-side .conv-search { flex: 1 1 160px; }
}
/* /E67 */
/* E56: a bot's conversations inside its frame: the frame's body is the window's rest. */
.shell:has(.conv-page) .section-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
@media (min-width: 1100px) {
  .shell:has(.conv-page-bot) .section-head { flex: none; }
}
/* /E56 */
/* E52: action bar of settings pages (components/action_bar.rs): Guardar and Eliminar in one row
   right under the tabs, same place and look on every bot page; FormPage in a bot frame too. */
.action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin: 0 0 .6rem; padding: 0 0 .5rem;
  border-bottom: 1px solid var(--border); }
.action-bar .spacer { flex: 1 1 auto; }
.action-bar button, .action-bar .confirm button:not(.link) { min-height: 32px; padding: .3rem .9rem; font-size: 13px; }
.action-bar .confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: 13px; }
.action-bar button[aria-disabled="true"] { opacity: .5; cursor: default; filter: none; }
.action-bar button[aria-busy="true"] { cursor: progress; }
.action-state:empty { display: none; }
.action-dirty { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-2); font-size: 13px; font-weight: 600; }
.action-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn-text); }
/* the configuration form is one column: the bar spans it, Eliminar at its right end */
form.bot-config { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; }
form.bot-config > .action-bar { margin: 0; }
.form-page-foot.form-page-top { position: static; background: none; border-top: 0; padding: 0 0 .5rem; margin: 0; }
.form-page-form:has(> .form-page-top) { gap: .6rem; }
/* /E52 */
/* E66: dense forms (components/form_dense.rs), like the E39 dense tables: 13 px, ~28 px controls,
   label left / control right on a desktop, stacked on a phone, no max width; help behind «?». */
.form-dense { --fd-label: 11rem; font-size: 13px; }
.form-dense .card.form, .form-dense.card.form { gap: .4rem; padding: .7rem .9rem; max-width: none; margin-bottom: 0; }
.form-dense .bot-config-grid { gap: .75rem; }
.form-dense h3 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .1rem; font-size: 13.5px; font-weight: 700; }
.form-dense input:not([type=checkbox]):not([type=radio]), .form-dense select { min-height: 28px; height: 28px; padding: 2px 8px; font-size: 13px; }
.form-dense textarea, .form-dense textarea.prose { min-height: 28px; padding: 4px 8px; font-size: 13px; line-height: 1.4; }
.form-dense button:not(.link):not(.ch-help):not(.danger-solid) { min-height: 28px; padding: .15rem .7rem; font-size: 13px; }
.form-dense .action-bar button { min-height: 30px; }
.form-dense label:not(.check):not(.inline) { display: grid; grid-template-columns: var(--fd-label) minmax(0, 1fr) auto;
  align-items: center; column-gap: .75rem; row-gap: .2rem; font-weight: 600; }
.form-dense label:not(.check):not(.inline):has(> textarea) { align-items: start; }
.form-dense label > small { grid-column: 2 / -1; }
.form-dense label > input[type=number] { width: 7.5rem; justify-self: start; }
.form-dense label .prov-select { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.form-dense label .prov-select select { flex: 1 1 auto; min-width: 0; }
.form-dense label.check { gap: .4rem; font-weight: 500; }
.form-dense .card.form > label.check, .form-dense .card.form > .bindings-summary, .form-dense .card.form > small.muted {
  margin: 0 0 0 calc(var(--fd-label) + .75rem); }
.form-dense .bindings-summary { margin: 0; }
.form-dense .num-grid { display: contents; }
.form-dense .num-grid label { font-size: inherit; }
.form-dense fieldset { padding: .35rem .7rem .5rem; gap: .35rem; }
.form-dense legend { display: inline-flex; align-items: center; gap: .35rem; font-size: 13px; }
.form-dense .form-row { gap: .4rem; }
.form-dense .list-item { gap: .3rem; }
.fd-help { width: 22px; height: 22px; min-height: 22px; font-size: 12px; }
.form-dense label .fd-tip { left: auto; right: 0; }
.fd-advanced { border-top: 1px dashed var(--border); padding-top: .3rem; }
.fd-advanced > summary { font-size: 13px; color: var(--text-2); padding: .15rem 0; }
.fd-advanced-body { display: flex; flex-direction: column; gap: .4rem; padding-top: .4rem; }
.form-dense .agent-cols { gap: .75rem; }
.form-dense .agent-col { gap: .5rem; }
.form-dense .picker-list li { padding: .1rem .5rem; }
@media (max-width: 640px) {
  .form-dense label:not(.check):not(.inline) { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; }
  .form-dense label .fd-help-wrap { align-self: flex-start; }
  .form-dense label > input[type=number] { width: auto; }
  .form-dense .card.form > label.check, .form-dense .card.form > .bindings-summary, .form-dense .card.form > small.muted { margin-left: 0; }
}
/* /E66 */

/* E55: bot metrics, compact panel (option A). Same look as the home page (cards, meters, donut,
   period switch). Every block has a fixed size whatever the data, and the previous figures stay
   dimmed while a new period loads, so the page never changes height. */
.bs-page { display: flex; flex-direction: column; gap: .6rem; }
.bs-page .card { margin: 0; min-width: 0; padding: .8rem 1rem; }
.bs-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.bs-head h2 { margin: 0; font-size: 1.15rem; }
.bs-range { color: var(--muted); font-size: .85rem; font-weight: 600; min-width: 13rem; }
.bs-range.busy { color: var(--info-text); }
.bs-reload { width: 44px; height: 44px; min-height: 44px; }
.bs-periods { margin-left: auto; }
.bs-loading .bs-kpis, .bs-loading .bs-row { opacity: .45; transition: opacity .15s; }
.bs-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
.bs-kpi { padding: .7rem .85rem; display: flex; flex-direction: column; gap: .15rem; min-height: 112px; height: 112px; }
.bs-lbl { font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-val { font-size: 1.45rem; line-height: 1.2; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-delta, .bs-sub { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.2em; }
.bs-sub { color: var(--muted); }
.bs-delta.good { color: var(--ok-text); font-weight: 700; }
.bs-delta.bad { color: var(--danger); font-weight: 700; }
.bs-delta.flat { color: var(--muted); font-weight: 700; }
.bs-kpi .meter { margin-top: auto; }
.bs-page .meter > span.ok { background: var(--ok-text); }
.bs-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .6rem; }
.bs-row.even { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.bs-ch { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; margin-bottom: .35rem; min-height: 1.6rem; }
.bs-ch h2 { margin: 0; font-size: 1rem; }
.bs-fig { font-size: .85rem; color: var(--muted); }
.bs-fig strong { color: var(--text); font-size: 1.05rem; }
.bs-chart { position: relative; margin-top: .25rem; border-radius: var(--radius-sm); }
.bs-chart svg { display: block; width: 100%; height: 150px; }
.bs-grid { stroke: var(--border); stroke-width: 1; }
.bs-grid.soft { stroke-dasharray: 4 4; }
.bs-line { fill: none; stroke: var(--accent-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bs-area { fill: color-mix(in srgb, var(--accent-line) 12%, transparent); stroke: none; }
.bs-hit { fill: transparent; cursor: crosshair; }
.bs-ymax { position: absolute; top: -2px; left: 0; font-size: .75rem; color: var(--muted); background: var(--surface); padding-right: .35rem; }
.bs-xh { position: absolute; top: 0; height: 150px; width: 1px; background: var(--border-strong); pointer-events: none; }
.bs-dot { position: absolute; width: 10px; height: 10px; border-radius: 999px; background: var(--accent-line); box-shadow: 0 0 0 2px var(--surface); transform: translate(-50%, -50%); pointer-events: none; }
.bs-tip { position: absolute; top: 8px; transform: translateX(-50%); background: var(--ink); color: var(--ink-text); font-size: .78rem; font-weight: 600; padding: .3rem .55rem; border-radius: 6px; white-space: nowrap; pointer-events: none; }
/* The empty-data hint is decorative; keep the chart's hover targets reachable beneath it. */
.bs-note { position: absolute; left: 50%; top: 75px; transform: translate(-50%, -50%); max-width: 90%; text-align: center; background: var(--info-bg); color: var(--info-text); font-size: .82rem; font-weight: 700; padding: .35rem .8rem; border-radius: 999px; pointer-events: none; }
.bs-axis { display: flex; justify-content: space-between; gap: .5rem; font-size: .75rem; color: var(--muted); margin-top: .2rem; }
.bs-sat { display: flex; align-items: center; gap: .9rem; margin-bottom: .3rem; }
.bs-sat-figs { display: flex; flex-direction: column; min-width: 0; }
.bs-sat-figs strong { font-size: 1.5rem; line-height: 1.1; }
.bs-q { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px .6rem; align-items: center; font-size: .86rem; padding: .2rem 0; border-top: 1px solid var(--border); }
.bs-q > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-q .meter { grid-column: 1 / -1; }
.bs-q b { font-variant-numeric: tabular-nums; }
.bs-tbl-box { height: calc(2rem + 5 * 2rem); overflow: hidden; }
.bs-tbl { width: 100%; table-layout: fixed; font-size: .86rem; }
.bs-tbl th, .bs-tbl td { padding: .25rem .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 2rem; }
.bs-tbl th:nth-child(2), .bs-tbl td:nth-child(2) { width: 7rem; }
.bs-tbl th:nth-child(3), .bs-tbl td:nth-child(3) { width: 7.5rem; }
.bs-tbl td.num { font-variant-numeric: tabular-nums; }
.bs-qq a { color: inherit; }
.bs-none { color: var(--muted); text-align: center; white-space: normal !important; }
.bs-link { margin: -10px 0 -10px auto; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--info-text); text-decoration: none; }
.bs-readout { font-size: .8rem; color: var(--muted); min-height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-cols { display: flex; align-items: flex-end; gap: 2px; height: 72px; border-bottom: 1px solid var(--border); border-radius: 2px; }
.bs-col { flex: 1 1 0; max-width: 24px; min-width: 1px; background: var(--accent-line); border-radius: 4px 4px 0 0; min-height: 2px; }
.bs-col.dim { opacity: .4; }
.bs-col.on { opacity: 1; }
.bs-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin-top: .5rem; }
.bs-tile { background: var(--surface-2); border-radius: var(--radius-sm); padding: .25rem .6rem; display: flex; flex-direction: column; min-width: 0; }
.bs-tile span { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-tile strong { font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .bs-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .bs-row, .bs-row.even { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .bs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-periods { margin-left: 0; width: 100%; }
  .bs-periods button { flex: 1; min-width: 0; }
  .bs-range { min-width: 0; flex: 1; }
  /* the channel column gives way to the question on a phone */
  .bs-tbl th:nth-child(2), .bs-tbl td:nth-child(2) { display: none; }
  .bs-tbl th:nth-child(3), .bs-tbl td:nth-child(3) { width: 6.5rem; }
}
/* /E55 */
/* E54: Calidad, interface B: packs and the bot's suites on the left, the selected one on the
   right (chart per bot version with the CI threshold, bot data used, cases, last run failures). */
.tp-layout { display: grid; grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr); gap: 1rem; align-items: start; font-size: 13px; }
.tp-left { position: sticky; top: .5rem; display: flex; flex-direction: column; gap: .35rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem; }
.tp-h { display: flex; align-items: center; gap: .35rem; margin: .25rem .25rem 0; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); }
.tp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tp-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name badge" "meta badge";
  gap: 0 .5rem; align-items: center; padding: .35rem .5rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.tp-item:hover { background: var(--surface-2); }
.tp-item[aria-current="page"] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent-line); }
.tp-name { grid-area: name; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-meta { grid-area: meta; font-size: 12px; }
.tp-item .badge { grid-area: badge; font-size: 11.5px; }
.tp-left .suite-new { margin-top: .25rem; flex-wrap: nowrap; }
.tp-left .suite-new input { min-width: 0; flex: 1 1 auto; min-height: 30px; padding: 2px 8px; }
.tp-left .suite-new button { min-height: 30px; padding: 0 .7rem; }
.tp-right { min-width: 0; display: flex; flex-direction: column; gap: .6rem; }
.tp-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem 1rem; }
.tp-head h2 { margin: 0; font-size: 1.1rem; }
.tp-chart { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .4rem .6rem; }
.tp-chart figcaption { margin-bottom: .2rem; }
.tp-th-key::before { content: ""; display: inline-block; width: 14px; border-top: 2px dashed var(--text-2); vertical-align: middle; margin-right: .3rem; }
.tp-svg { display: block; width: 100%; height: auto; max-height: 140px; overflow: visible; }
.tp-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tp-threshold { stroke: var(--text-2); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.tp-line { fill: none; stroke: var(--accent-line); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tp-pt circle { fill: var(--accent-line); stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tp-pt circle.tp-hit { fill: transparent; stroke: none; }
.tp-pt.below circle:not(.tp-hit) { fill: var(--surface); stroke: var(--danger); }
.tp-axis { font-size: 10px; fill: var(--muted); }
.tp-chart-empty { margin: .25rem 0; }
.tp-summary { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.tp-cases { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.tp-case { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .4rem; padding: .4rem .6rem; border-bottom: 1px solid var(--border); }
.tp-case:last-child { border-bottom: 0; }
.tp-status { font-weight: 800; text-align: center; color: var(--text-2); }
.tp-fail .tp-status { color: var(--danger); }
.tp-pass .tp-status { color: var(--ok-text); }
.tp-skip { color: var(--muted); }
.tp-case-body { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; }
.tp-q { font-weight: 600; text-align: left; overflow-wrap: anywhere; }
button.tp-q { flex: 1 1 18rem; justify-content: flex-start; text-decoration: none; color: var(--text); }
.tp-checks { display: flex; flex-wrap: wrap; gap: .25rem; width: 100%; }
.tp-check { display: inline-flex; gap: .2rem; padding: .05rem .45rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); font-size: 12px; overflow-wrap: anywhere; }
.tp-check.ok { color: var(--ok-text); }
.tp-check.err { color: var(--err-text); background: var(--err-bg); border-color: transparent; }
.tp-detail { width: 100%; display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .25rem .75rem; margin: .3rem 0 0; }
.tp-detail dt { color: var(--text-2); font-weight: 600; }
.tp-detail dd { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem; overflow-wrap: anywhere; }
.tp-answer { white-space: pre-wrap; }
.tp-diff { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.tp-diff pre { margin: .15rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 10rem; overflow: auto; font-size: 12px; }
.tp-diff-config { grid-column: 1 / -1; margin: 0; padding-left: 1rem; }
.tp-empty { margin: .25rem 0; }
@media (max-width: 900px) {
  .tp-layout { grid-template-columns: minmax(0, 1fr); }
  .tp-left { position: static; }
  .tp-detail, .tp-diff { grid-template-columns: minmax(0, 1fr); }
}
/* /E54 */
/* E54b: a suite's last result fits one window (1280×800) whatever the number of cases: the two
   panes take the frame's height (the left list scrolls on its own), the right one is the chart
   strip (fixed height) and the fitted cases table; a case's detail opens in the side drawer
   (components/drawer.rs). */
.shell:has(.dt-fit) .tp-layout { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.shell:has(.dt-fit) .tp-left { position: static; align-self: start; max-height: 100%; min-height: 0; overflow-y: auto; }
.shell:has(.dt-fit) .tp-right { min-height: 0; }
.tp-right > * { flex: none; }
.tp-right > .data-table.dt-fit { flex: 1 1 auto; }
.tp-chart { display: flex; align-items: center; gap: .75rem; height: 64px; padding: .25rem .6rem; }
.tp-chart figcaption { flex: 0 0 11rem; margin: 0; line-height: 1.3; }
.tp-chart .tp-th-key { display: block; }
.tp-chart .tp-svg { flex: 1 1 auto; min-width: 0; width: auto; height: 100%; max-height: none; }
.tp-chart .tp-chart-empty { flex: 1 1 auto; }
.tp-cases-table .tp-dot-cell { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.tp-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.tp-st-pass .tp-dot { background: var(--ok-text); }
.tp-st-fail .tp-dot { background: var(--danger); }
.tp-chips, .tp-verdict { display: flex; gap: .25rem; min-width: 0; overflow: hidden; white-space: nowrap; align-items: center; }
.tp-chips .tp-check { flex: none; overflow-wrap: normal; }
.tp-verdict .badge { flex: none; }
.tp-verdict-why { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tp-summary { white-space: nowrap; }
.tp-case-drawer .drawer-head .badge { flex: none; }
.tp-case-drawer .tp-detail { margin: 0; }
.tp-case-drawer .tp-detail-q { font-weight: 600; }
.tp-case-drawer .tp-diff-toggle { align-self: flex-start; }
@media (max-width: 1100px) { .tp-chart figcaption { flex-basis: 8rem; } .tp-summary-at { display: none; } }
@media (max-width: 900px) {
  .shell:has(.dt-fit) .tp-layout { grid-template-rows: auto minmax(24rem, 1fr); }
  .shell:has(.dt-fit) .tp-left { align-self: stretch; max-height: 10rem; }
}
@media (max-width: 640px) {
  .tp-dot-label, .tp-verdict-why, .tp-chart figcaption { display: none; }
  .tp-case-drawer .tp-detail { grid-template-columns: minmax(0, 1fr); }
}
/* /E54b */

/* E50: cabecera B (user chip + account menu with language and theme) and «Mi cuenta» (/account). */
.user-chip {
  display: flex; align-items: center; gap: .6rem; height: 44px; padding: 0 .65rem 0 .3rem; border-radius: 999px; border: 0;
  background: var(--bar-hover, rgba(255, 255, 255, .14)); box-shadow: inset 0 0 0 1px var(--bar-active, rgba(255, 255, 255, .2));
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.user-chip:hover, .user-chip[aria-expanded="true"] { background: var(--bar-active, rgba(255, 255, 255, .2)); }
.uc-avatar, .um-avatar, .acct-avatar {
  border-radius: 50%; display: grid; place-items: center; font-weight: 800; flex: none;
}
.uc-avatar { width: 34px; height: 34px; font-size: .8rem; background: var(--bar-fg, #fff); color: var(--bar-bg, var(--accent)); }
.uc-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.uc-name { font-weight: 800; font-size: .87rem; white-space: nowrap; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.uc-sub { font-size: .76rem; white-space: nowrap; }
.uc-caret, .um-ic, .acct-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.uc-caret { width: 14px; height: 14px; }
.user-chip[aria-expanded="true"] .uc-caret { transform: rotate(180deg); }
@media (max-width: 1100px) { .uc-text { display: none; } .user-chip { padding-right: .5rem; } }
.user-menu { width: 310px; max-width: calc(100vw - 2rem); padding: .4rem; }
.account-who { flex-direction: row; align-items: center; gap: .65rem; }
.um-avatar { width: 40px; height: 40px; font-size: .95rem; background: var(--accent); color: var(--accent-text); }
.um-who-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.um-who-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-role { align-self: flex-start; }
.um-sep { height: 1px; background: var(--border); margin: .25rem 0; }
.account-menu .um-item, .account-sheet .um-item { display: flex; align-items: center; gap: .6rem; width: 100%; }
.account-sheet .um-item { text-align: left; border: 0; background: none; padding: .6rem .5rem; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; font-weight: 700; min-height: 44px; font: inherit; font-weight: 700; }
.um-logout, .account-menu .um-logout { color: var(--danger); }
.um-group { display: flex; flex-direction: column; gap: .35rem; padding: .35rem .75rem .5rem; }
.um-label { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.um-seg { display: grid; gap: 2px; padding: 2px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface-2); }
.um-seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.um-seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.account-menu .um-seg button, .account-sheet .um-seg button {
  border: 0; background: none; min-height: 32px; padding: 0 .3rem; border-radius: 7px; font: inherit; font-weight: 700; font-size: .82rem;
  color: var(--text-2); text-align: center; cursor: pointer;
}
.account-menu .um-seg button.on, .account-sheet .um-seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 0 0 1px var(--border); }
.account-sheet { display: none; }
@media (max-width: 900px) {
  .brandbar.menu-open .brandbar-end { display: none; }
  .brandbar.menu-open .account-sheet {
    display: flex; flex-direction: column; gap: .4rem; width: calc(100% + 2rem); margin: 0 -1rem; padding: 1rem;
    background: var(--surface); color: var(--text); border-radius: 16px 16px 0 0;
  }
  .account-sheet .um-seg button { min-height: 40px; }
  .account-sheet .um-group { padding: .3rem 0; }
}
.account-page { display: flex; flex-direction: column; gap: 1.25rem; }
.acct-band {
  margin: -1.75rem -1.75rem 0; padding: 1.1rem 1.75rem; background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.acct-avatar { width: 60px; height: 60px; font-size: 1.3rem; background: var(--accent); color: var(--accent-text); }
.acct-who { flex: 1 1 16rem; min-width: 0; }
.acct-name-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.acct-name-row h1 { font-size: 1.4rem; margin: 0; }
.acct-meta { font-size: .88rem; overflow-wrap: anywhere; }
.acct-layout { display: flex; gap: 1.5rem; align-items: flex-start; }
.acct-tabs { flex: 0 0 240px; display: flex; flex-direction: column; gap: 2px; }
.acct-tab { display: flex; gap: .65rem; align-items: flex-start; padding: .65rem .75rem; border-radius: 9px; color: var(--text-2); text-decoration: none; }
.acct-tab b { display: block; font-weight: 800; font-size: .88rem; }
.acct-tab small { display: block; font-size: .78rem; color: var(--muted); }
.acct-tab .acct-ic { margin-top: 2px; }
.acct-tab:hover { background: var(--surface); }
.acct-tab[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: inset 3px 0 0 var(--accent-line), 0 0 0 1px var(--border); }
.acct-main { flex: 1; min-width: 0; max-width: 760px; display: flex; flex-direction: column; gap: 1rem; }
/* Sections: card, short title + one-line description, dense rows (E66 .form-dense), own action. */
.acct-section { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.acct-section-head { padding: .85rem 1.1rem .7rem; border-bottom: 1px solid var(--border); }
.acct-section-head h2 { margin: 0; font-size: 15px; font-weight: 800; }
.acct-section-head p { margin: .1rem 0 0; font-size: 13px; }
.acct-section.form-dense { --fd-label: 10.5rem; }
.acct-rows { display: flex; flex-direction: column; gap: .55rem; padding: .9rem 1.1rem; }
.acct-section.form-dense .acct-rows label:not(.check):not(.inline) { grid-template-columns: var(--fd-label) minmax(0, 22rem) auto; }
.acct-section.form-dense input:not([type=checkbox]):not([type=radio]) { min-height: 32px; height: 32px; }
.acct-section-foot { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; padding: .6rem 1.1rem;
  background: var(--surface-2); border-top: 1px solid var(--border); }
.acct-section.form-dense .acct-section-foot button { min-height: 32px; padding: .2rem .9rem; }
.acct-field-error { color: var(--danger); font-weight: 600; font-size: 12px; }
.acct-field-error:empty { display: none; }
.acct-rows input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
/* Read-only values: same row as a field, no box to type in. */
.acct-ro-row, .acct-pref-row { display: grid; grid-template-columns: var(--fd-label) minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; }
.acct-ro-label { font-weight: 600; }
.acct-ro-value { display: inline-flex; align-items: center; gap: .45rem; min-height: 32px; padding: 0 .6rem; min-width: 0; max-width: 22rem;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); }
.acct-ro-value .acct-ic { width: 14px; height: 14px; color: var(--muted); }
.acct-ro-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-ro-row .fd-help-wrap { justify-self: start; }
/* Password with show / hide and a strength meter. */
.acct-pw { position: relative; display: flex; min-width: 0; }
.acct-pw input { flex: 1; min-width: 0; padding-right: 2.4rem !important; }
.acct-section.form-dense .acct-pw-toggle { position: absolute; right: 2px; top: 2px; bottom: 2px; min-height: 0; width: 2rem; padding: 0;
  display: grid; place-items: center; border: 0; background: none; color: var(--text-2); border-radius: 6px; }
.acct-pw-toggle:hover { color: var(--text); background: var(--surface-2); }
.acct-pw-meter { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: 12px; }
.acct-meter { display: inline-grid; grid-template-columns: repeat(4, 1.6rem); gap: 3px; flex: none; }
.acct-meter i { height: 4px; border-radius: 2px; background: var(--border); }
.acct-pw-meter[data-level="1"] .acct-meter i:nth-child(-n+1) { background: var(--danger); }
.acct-pw-meter[data-level="2"] .acct-meter i:nth-child(-n+2) { background: var(--warn-mark, #b45309); }
.acct-pw-meter[data-level="3"] .acct-meter i:nth-child(-n+3), .acct-pw-meter[data-level="4"] .acct-meter i { background: var(--ok-text); }
/* Preferences: segmented controls. */
.acct-pref-ctl { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-width: 0; }
.acct-seg { display: inline-grid; gap: 2px; padding: 2px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface-2); }
.acct-seg-2 { grid-template-columns: repeat(2, minmax(6.5rem, 1fr)); }
.acct-seg-3 { grid-template-columns: repeat(3, minmax(6.5rem, 1fr)); }
.acct-seg .acct-opt { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 30px; padding: 0 .7rem;
  border-radius: 7px; font-weight: 700; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.acct-seg .acct-opt:hover { color: var(--text); }
.acct-seg .acct-opt.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 0 0 1px var(--border); }
.acct-seg .acct-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }
.acct-seg .acct-ic { width: 15px; height: 15px; }
.acct-sample { font-variant-numeric: tabular-nums; color: var(--text-2); }
.acct-role .acct-roles, .acct-role .acct-perm-title, .acct-role .acct-perm-box { margin-left: 1.1rem; margin-right: 1.1rem; }
.acct-role .acct-roles { margin-top: .9rem; }
.acct-role .acct-perm-box { margin-bottom: .9rem; }
.acct-role-foot { justify-content: flex-start; }
.acct-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.acct-role-card { border: 1px solid var(--border); border-radius: 10px; padding: .6rem .7rem; display: flex; flex-direction: column; gap: .15rem; font-size: .85rem; }
.acct-role-card.on { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); }
.acct-perm-title { margin: .25rem 0 0; }
/* Positioned, so the absolute `.sr-only` labels of its cells scroll and clip with it
   instead of stretching the page below the box. */
.acct-perm-box { max-height: 22rem; overflow: auto; position: relative; }
.acct-perm-table { font-size: 13px; }
.acct-perm-table th, .acct-perm-table td { padding: .3rem .6rem; }
.acct-perm.yes { color: var(--ok-text); }
.acct-perm.no, .acct-perm.na { color: var(--muted); }
@media (max-width: 900px) {
  .acct-band { margin: -1rem -1rem 0; padding: 1rem; }
  .acct-layout { flex-direction: column; gap: .75rem; }
  .acct-tabs { flex: none; width: 100%; flex-direction: row; overflow-x: auto; gap: .4rem; }
  .acct-tab { flex: none; border: 1px solid var(--border); background: var(--surface); padding: .5rem .75rem; min-height: 44px; align-items: center; }
  .acct-tab small, .acct-tab .acct-ic { display: none; }
  .acct-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct-ro-row, .acct-pref-row { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; }
  .acct-ro-value { max-width: none; }
  .acct-seg { display: grid; width: 100%; }
  .acct-seg-2, .acct-seg-3 { grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); }
  .acct-section-foot { flex-wrap: wrap; }
}
/* /E50 */

/* E68: Ajustes side menu one window high under the top bar, its own discreet scroll with a fade
   at the edge that has more (background-attachment: local covers the fade at the very top and
   bottom), folding groups; on a phone a dropdown under a button naming the current page. */
:root { --header-h: 64px; }
.side-nav-wrap { flex: 0 1 220px; position: sticky; top: 1rem; align-self: flex-start; min-width: 0; }
.side-nav-wrap .side-nav {
  position: static; flex: none; gap: 0; max-height: calc(100dvh - var(--header-h) - 2rem); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; padding-right: 2px;
  background:
    linear-gradient(var(--bg) 30%, transparent) center top / 100% 28px no-repeat local,
    linear-gradient(transparent, var(--bg) 70%) center bottom / 100% 28px no-repeat local,
    linear-gradient(color-mix(in srgb, var(--text) 14%, transparent), transparent) center top / 100% 12px no-repeat scroll,
    linear-gradient(transparent, color-mix(in srgb, var(--text) 14%, transparent)) center bottom / 100% 12px no-repeat scroll;
  background-color: var(--bg);
}
.side-nav-wrap .side-nav::-webkit-scrollbar { width: 6px; }
.side-nav-wrap .side-nav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.side-nav-group { display: flex; flex-direction: column; gap: 2px; padding-bottom: .4rem; }
.side-nav-items { display: flex; flex-direction: column; gap: 2px; }
.side-nav-items[hidden] { display: none; }
.side-nav-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; border: 0; background: none;
  padding: .45rem .8rem .25rem; min-height: 32px; font: inherit; font-size: .72rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); cursor: pointer; text-align: left; border-radius: var(--radius-sm);
}
.side-nav-head:hover { color: var(--text); }
.side-nav-caret { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: transform .15s; }
.side-nav-group.folded .side-nav-caret { transform: rotate(-90deg); }
.side-nav-toggle { display: none; }
@media (max-width: 900px) {
  .side-nav-wrap { position: relative; top: 0; flex: 1 1 100%; z-index: 15; }
  .side-nav-toggle {
    display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 44px; padding: .5rem .8rem; text-align: left;
    background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit;
  }
  .side-nav-toggle strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-nav-wrap.open .side-nav-toggle .side-nav-caret { transform: rotate(180deg); }
  .side-nav-wrap .side-nav {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); flex-direction: column; flex-wrap: nowrap;
    max-height: min(70dvh, calc(100dvh - var(--header-h) - 5rem)); padding: .4rem; border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); background-color: var(--surface);
    background-image: none;
  }
  .side-nav-wrap.open .side-nav { display: flex; }
  .side-nav-wrap .side-nav a { min-height: 44px; display: flex; align-items: center; }
  .side-nav-wrap .side-nav a[aria-current="page"] { background: var(--surface-2); }
}
/* /E68 */
/* E61: the tool's page is its editor (/tools/<id>): head (name, method + URL, state), the action
   bar, then compact sections: Petición left, Cabeceras / Respuesta / Bots / Probar right on wide
   screens; one column on a phone. Fits 1280×800 within 1.25 viewports. */
.tool-page { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.tool-page .tool-head { margin-bottom: 0; align-items: flex-start; }
.tool-head-main { min-width: 0; }
.tool-head-main h1 { margin: 0; }
.tool-page .tool-facts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .3rem; min-width: 0; }
.tool-page .tool-endpoint { display: inline-flex; align-items: baseline; gap: .3rem; min-width: 0; max-width: 100%; }
.tool-page .tool-facts .tool-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tool-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; align-items: start; }
.tool-main, .tool-side { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.tool-sec { margin: 0; padding: .6rem .9rem; display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.tool-sec h2 { margin: 0; font-size: 1rem; }
.tool-sec > label, .tool-row2 > label, .tool-endpoint-row > label { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.tool-sec .check { flex-direction: row; }
.tool-row2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.tool-endpoint-row { display: flex; gap: .5rem; align-items: flex-end; min-width: 0; }
.tool-endpoint-row .tool-method { flex: none; width: 7rem; }
.tool-endpoint-row .grow { flex: 1; }
.tool-sec textarea { resize: vertical; }
.tool-header-list, .tool-bot-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .2rem; }
.tool-header-list li { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.tool-bot-list { max-height: 6rem; overflow-y: auto; }
.tool-bot-list li.inactive a { color: var(--muted); }
.tool-test-row { display: flex; align-items: flex-end; gap: .6rem; }
.tool-test-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.tool-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; align-items: start; }
@media (min-width: 900px) { .tool-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tool-sec .test-out { margin: 0; padding: .4rem .6rem; }
.tool-test-out { max-height: 6rem; overflow: auto; margin: .25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tool-sec p { margin: 0; }
/* compact controls, like the dense tables: the whole editor fits a laptop screen */
.tool-sec { font-size: 13.5px; }
.tool-sec input:not([type=checkbox]), .tool-sec select { min-height: 32px; padding: .25rem .55rem; font-size: 13px; }
.tool-sec textarea { min-height: 32px; padding: .3rem .55rem; font-size: 12.5px; line-height: 1.4; }
.tool-sec button:not(.link) { min-height: 32px; padding: .2rem .8rem; font-size: 13px; }
.tool-sec label { gap: .2rem; }
@media (min-width: 900px) { .tool-row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
@media (min-width: 1100px) { .tool-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
@media (max-width: 640px) {
  .tool-page .tool-head { flex-direction: column; }
  .tool-endpoint-row { flex-direction: column; align-items: stretch; }
  .tool-endpoint-row .tool-method { width: auto; }
}
/* /E61 */
/* E102: /tools/<id> and /tools/new as dense forms (E66): cards with a short title and a one-line
   description, label left / control right, configuration left and Probar / Respuesta / Bots right
   from 1100 px, stacked on a phone. */
.tool-page.form-dense { --fd-label: 7.5rem; gap: .6rem; }
.tool-page > .alert { margin: 0; }
.te-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; align-items: start; min-width: 0; }
@media (min-width: 1100px) { .te-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.te-col { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.tool-page .te-sec { padding: 0; gap: 0; overflow: hidden; }
.te-sec-head { display: flex; align-items: baseline; gap: .6rem; min-width: 0; padding: .4rem .9rem .35rem; border-bottom: 1px solid var(--border); }
.te-sec-head h2 { flex: none; margin: 0; font-size: 13.5px; font-weight: 800; line-height: 1.3; }
.te-sec-head .te-count { font-weight: 600; }
.te-sec-head .te-lead { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 12px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.te-sec-body { display: flex; flex-direction: column; gap: .4rem; padding: .5rem .9rem .6rem; min-width: 0; }
.te-row { display: grid; grid-template-columns: var(--fd-label) minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; font-weight: 600; min-width: 0; }
.te-row > .te-ctl { min-width: 0; font-weight: 400; }
.tool-page .te-endpoint-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
/* Method as a segmented control joined to the URL field. */
.te-endpoint { display: flex; min-width: 0; }
.te-seg { display: inline-flex; flex: none; border: 1px solid var(--border-strong); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--surface-2); overflow: hidden; }
.form-dense .te-seg .te-seg-opt { min-height: 28px; padding: 0 .38rem; border: 0; border-right: 1px solid var(--border); border-radius: 0;
  background: transparent; color: var(--text-2); font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.form-dense .te-seg .te-seg-opt:last-child { border-right: 0; }
.form-dense .te-seg .te-seg-opt.on { background: var(--ink); color: var(--ink-text); }
.te-seg .te-seg-opt:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.te-endpoint .te-url { flex: 1 1 auto; min-width: 8rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.te-url-preview { margin-top: .25rem; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.te-ph { padding: 0 .15rem; border-radius: 4px; background: var(--info-bg); color: var(--info-text); font-weight: 700; }
.te-ph.te-ph-unknown { background: var(--warn-bg); color: var(--warn-text); text-decoration: underline wavy; }
/* Parameters as rows. */
.te-params { display: flex; flex-direction: column; gap: .3rem; container-type: inline-size; min-width: 0; }
.te-param-head, .te-param-row { display: grid; grid-template-columns: minmax(5.5rem, 1fr) 7rem 2.6rem minmax(0, 1.6fr) minmax(4.5rem, .9fr) 1.8rem;
  gap: .35rem; align-items: center; min-width: 0; }
.te-param-head { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.te-param-row > * { min-width: 0; }
.te-param-row .te-ptype, .te-arg-enum { width: 100%; }
.te-param-row .sw-row { justify-content: center; }
.form-dense .te-del { min-height: 26px; height: 26px; width: 26px; padding: 0; display: grid; place-items: center; font-size: 15px; }
@container (max-width: 520px) {
  .te-param-head { display: none; }
  .te-param-row { grid-template-columns: minmax(0, 1fr) 7rem 2.6rem 1.8rem; padding: .35rem 0; border-top: 1px dashed var(--border); }
  .te-param-row > input[name=param_desc] { grid-column: 1 / 3; }
  .te-param-row > input[name=param_default], .te-param-row > input[name=param_values] { grid-column: 3 / -1; }
}
.te-adv { border-top: 1px dashed var(--border); padding-top: .35rem; display: flex; flex-direction: column; gap: .35rem; }
.te-params-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1rem; }
.te-adv .te-adv-toggle { font-size: 12.5px; color: var(--text-2); }
.te-adv .te-adv-toggle::before { content: "▸ "; }
.te-adv .te-adv-toggle[aria-expanded="true"]::before { content: "▾ "; }
.form-dense textarea.te-schema { font-size: 12px; min-height: 9rem; resize: vertical; }
.te-schema[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.te-err { margin: 0; color: var(--danger); font-weight: 600; font-size: 12px; }
.te-add { align-self: flex-start; }
/* Body template chips. */
.te-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.form-dense .te-chip { min-height: 24px; padding: 0 .55rem; border-radius: 999px; font: 600 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface-2); color: var(--text-2); }
.te-note { margin: 0 0 0 calc(var(--fd-label) + .75rem); }
.te-note.ok { color: var(--ok-text); }
.te-note.warn { color: var(--warn-text); }
/* Headers: write-only key / value rows. */
.te-headers { display: flex; flex-direction: column; gap: .3rem; }
.te-hdr-row { display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(0, 1.5fr) auto; gap: .5rem; align-items: center; min-width: 0; }
.te-hdr-row > * { min-width: 0; }
.te-hdr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.te-hdr-saved { justify-self: start; }
.te-hdr-value { display: flex; align-items: center; min-width: 0; }
.te-hdr-value input { flex: 1; min-width: 0; }
.te-bearer { flex: none; padding: 0 .45rem; font-size: 12px; line-height: 26px; border: 1px solid var(--border-strong); border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--surface-2); color: var(--text-2); }
.te-bearer + input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.te-hdr-btns { display: inline-flex; gap: .6rem; white-space: nowrap; }
.te-hdr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
/* Probar. */
.te-args { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .35rem .9rem; }
.form-dense .te-args label.te-arg, .form-dense .te-args .te-row { grid-template-columns: minmax(2.5rem, max-content) minmax(0, 1fr); }
.te-args .te-row .te-label { padding: 0; }
.te-test-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.tool-page .te-test .test-out { margin: 0; padding: .4rem .6rem; }
.te-test-meta { display: flex; align-items: center; gap: .5rem; font-size: 12px; color: var(--text-2); }
.tool-page .te-test .tool-test-out { max-height: 3.5rem; overflow: auto; margin: .3rem 0 0; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Respuesta: the last answer as a clickable JSON tree. */
.te-jtree, .te-jlist { list-style: none; margin: 0; padding: 0; }
.te-jtree { max-height: 5.5rem; overflow: auto; padding: .3rem .4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
  font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.te-jlist { padding-left: 1rem; border-left: 1px dotted var(--border-strong); margin-left: .35rem; }
.form-dense .te-jnode { min-height: 0; padding: .05rem .3rem; border: 0; border-radius: 4px; background: none; color: var(--text); font: inherit;
  text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.te-jnode:hover:not(:disabled) { background: var(--surface); }
.form-dense .te-jnode.on { background: var(--ink); color: var(--ink-text); }
.te-jkey { font-weight: 700; }
.te-jval { color: var(--text-2); }
.te-jnode.on .te-jval { color: inherit; }
.te-gets { display: flex; flex-direction: column; gap: .15rem; }
.te-gets-label { font-weight: 700; color: var(--text-2); }
.te-gets-out { margin: 0; max-height: 5rem; overflow: auto; padding: .3rem .5rem; border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.te-gets-out.bad { color: var(--warn-text); }
/* Bots que la usan: chips. */
.te-bot-chips { display: flex; flex-wrap: wrap; gap: .35rem; max-height: 6rem; overflow-y: auto; }
.te-bot-chip { display: inline-flex; align-items: center; padding: .1rem .6rem; border: 1px solid var(--border-strong); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--text); text-decoration: none; background: var(--surface); }
.te-bot-chip:hover { background: var(--surface-2); }
.te-bot-chip.inactive { color: var(--muted); border-style: dashed; }
@media (max-width: 640px) {
  .te-row { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; }
  .te-row .fd-help-wrap { align-self: flex-start; }
  .te-endpoint { flex-direction: column; gap: .3rem; }
  .te-seg { border-right: 1px solid var(--border-strong); border-radius: var(--radius-sm); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .te-endpoint .te-url { border-radius: var(--radius-sm); }
  .te-hdr-row { grid-template-columns: minmax(0, 1fr) auto; }
  .te-hdr-row > .te-hdr-value, .te-hdr-row > .te-hdr-saved { grid-column: 1 / -1; grid-row: 2; }
  .te-note { margin-left: 0; }
  .te-sec-head { display: block; }
  .te-sec-head .te-lead { white-space: normal; }
}
/* /E102 */
/* E82: the way back to where a page was opened from: «← Volver a …» and breadcrumbs. */
.origin-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin: 0 0 .5rem; min-width: 0; }
.origin-back { font-weight: 600; text-decoration: none; white-space: nowrap; }
.origin-crumbs { display: flex; flex-wrap: wrap; gap: .15rem; margin: 0; padding: 0; list-style: none; font-size: .85rem; color: var(--muted); min-width: 0; }
.origin-crumbs li { min-width: 0; overflow-wrap: anywhere; }
.origin-crumbs li + li::before { content: "›"; margin: 0 .35rem; color: var(--border-strong); }
.origin-crumbs a { color: var(--muted); text-decoration: none; }
.origin-crumbs a:hover { color: var(--text); text-decoration: underline; }
.origin-crumbs [aria-current] { color: var(--text); }
/* /E82 */
/* E86: a channel's own icon: in the icon slots, the editor (crop with preview) and conversation rows. */
.ch-icon.ch-icon-custom { padding: 0; overflow: hidden; background: var(--surface); }
.ch-icon.ch-icon-custom img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-icon-editor { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.ch-icon-editor h3 { margin: 0; }
.ch-icon-editor > p { margin: 0; }
.ch-icon-now { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ch-icon-file input[type=file] { display: block; margin-top: .25rem; max-width: 100%; }
/* E106: the icon editor in one row: the file input sits invisibly over its «Elegir imagen…» button */
.ch-icon-editor { gap: .35rem; margin-bottom: .6rem; padding-bottom: .6rem; }
.ch-icon-editor h3 { display: flex; align-items: center; gap: .4rem; }
.ch-icon-file.btn { position: relative; display: inline-flex; align-items: center; overflow: hidden; cursor: pointer; }
.ch-icon-file.btn input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ch-icon-file.btn:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
/* /E106 */
.ch-icon-crop { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.ch-icon-crop.hidden { display: none; }
.ch-icon-canvas { width: 160px; height: 160px; border-radius: var(--radius); border: 1px solid var(--border);
  background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 16px 16px; }
.ch-icon-controls { display: flex; flex-direction: column; gap: .4rem; min-width: 12rem; flex: 1 1 14rem; }
.ch-icon-slider { display: flex; flex-direction: column; gap: .1rem; font-size: .85rem; }
.ch-icon-samples { display: flex; align-items: flex-end; gap: .75rem; }
.ch-icon-samples img { border-radius: 6px; border: 1px solid var(--border); background: var(--surface); }
.ch-icon-samples img.round { border-radius: 50%; }
.ch-icon-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.conv-meta-line { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.conv-ch-icon { width: 16px; height: 16px; border-radius: 4px; flex: none; }
/* /E86 */
/* E90: «?» bubbles are fixed to the window and placed by components/form_dense.rs
   (`place_help_tips`): below their button, above it without room, moved in from the edges; they
   wrap and are never wider than 28rem or the window less 2rem, so no sideways scroll. */
.ch-help-tip, .form-dense label .fd-tip { position: fixed; top: 0; left: 0; right: auto; bottom: auto; transform: none;
  width: max-content; max-width: min(28rem, calc(100vw - 2rem)); z-index: 1000;
  white-space: normal; overflow-wrap: break-word; text-align: left; }
.ch-help-tip.open:not([data-placed]) { visibility: hidden; }
/* /E90 */

/* E46: new-provider assistant (pages/provider_wizard.rs) and the provider checklist
   (components/provider_check.rs, also on the edit page) */
.wiz-head { align-items: center; gap: .75rem; margin-bottom: .75rem; }
.wiz-head h1 { margin: 0; }
.wiz-chosen { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; }
.wiz-steps { display: flex; align-items: center; gap: .5rem; list-style: none; margin: 0 0 .75rem; padding: .5rem .9rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.wiz-step { display: flex; align-items: center; flex: 1 1 0; gap: .5rem; min-width: 0; }
.wiz-step:not(:nth-child(4))::after { content: ""; flex: 1; height: 2px; min-width: 1rem; background: var(--border); }
.wiz-step.done:not(:nth-child(4))::after { background: var(--ok-text); }
.wiz-step button { display: inline-flex; align-items: center; gap: .45rem; border: 0; background: none; padding: .2rem 0; min-height: 36px;
  font-weight: 700; color: var(--muted); white-space: nowrap; }
.wiz-step button:disabled { opacity: 1; cursor: default; }
.wiz-n { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--control-border); display: inline-flex;
  align-items: center; justify-content: center; font-size: .78rem; flex: none; }
.wiz-step.cur button { color: var(--text); }
.wiz-step.cur .wiz-n { background: var(--ink); color: var(--ink-text); border-color: var(--ink); }
.wiz-step.done button { color: var(--text-2); cursor: pointer; }
.wiz-step.done .wiz-n { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.wiz-phone-step { display: none; }
.wiz-notice { margin-bottom: .5rem; }
.wiz-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column;
  min-height: 0; overflow: hidden; }
.wiz-body { padding: 1rem 1.1rem; overflow: auto; max-height: calc(100vh - 19rem); min-height: 14rem; }
.wiz-body h2 { margin-bottom: .2rem; }
.wiz-lead { margin: 0 0 .75rem; }
.wiz-groups { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; }
.wiz-group-title { font-size: .72rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .3rem; }
.wiz-grid { margin: 0; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .4rem; }
.wiz-group:last-child .wiz-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.wiz-grid .preset-card { flex-direction: row; align-items: center; gap: .55rem; min-height: 48px; padding: .4rem .6rem; position: relative; }
.wiz-grid .preset-card.on { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); background: var(--surface-2); }
.preset-card-text { display: flex; flex-direction: column; min-width: 0; }
.preset-card-text strong { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiz-configured { position: absolute; top: -.45rem; right: .4rem; font-size: .68rem; padding: 0 .4rem; }
.wiz-another { margin: .75rem 0 0; }
.wiz-creds { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem; align-items: start; }
.wiz-fields { max-width: none; gap: .75rem; }
.wiz-fields.prov-preset-form { border-left: 0; padding-left: 0; margin: 0; }
.wiz-fields label { display: flex; flex-direction: column; gap: .25rem; }
.wiz-fields input[aria-invalid="true"] { border-color: var(--err-text); }
.wiz-advanced summary { cursor: pointer; font-weight: 600; font-size: .88rem; }
.wiz-advanced label { margin-top: .4rem; }
.wiz-help { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem 1rem;
  display: flex; flex-direction: column; gap: .4rem; }
.wiz-help p { margin: 0; }
.wiz-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .6rem; margin: 0; color: var(--muted); }
.wiz-facts dd { margin: 0; overflow-wrap: anywhere; }
.wiz-test { max-width: 680px; display: flex; flex-direction: column; gap: .75rem; }
.wiz-fail { cursor: default; margin: 0; }
.wiz-fail p { margin: .35rem 0 0; }
.wiz-card .alert.info, .prov-edit .alert.info { background: var(--info-bg); color: var(--info-text); cursor: default; }
.wiz-models-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .75rem; margin-bottom: .5rem; }
.wiz-models-head h2 { margin: 0; }
.wiz-models { max-height: calc(100vh - 25rem); min-height: 8rem; overflow: auto; margin-bottom: .5rem; }
.wiz-models .table th, .wiz-models .table td { padding: .35rem .6rem; }
.wiz-models .table th { position: sticky; top: 0; background: var(--surface); }
.wiz-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-top: 1px solid var(--border);
  background: var(--surface-2); }
.wiz-foot-note { flex: 1 1 12rem; }
.wiz-foot .ghost, .prov-edit-bar .ghost { border-color: transparent; background: none; }
/* the checklist */
.prov-check { display: flex; flex-direction: column; gap: .35rem; }
.prov-check-head { display: flex; align-items: center; gap: .5rem; }
.prov-check-head strong { flex: 1; }
.prov-check-badge { display: inline-flex; align-items: center; padding: 0 .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.prov-check-badge.is-run { background: var(--info-bg); color: var(--info-text); border-color: transparent; }
.prov-check-badge.is-ok { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.prov-check-badge.is-bad { background: var(--err-bg); color: var(--err-text); border-color: transparent; }
.prov-check-list { list-style: none; margin: 0; padding: 0; }
.prov-check-row { display: flex; align-items: flex-start; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--border); }
.prov-check-row:last-child { border-bottom: 0; }
.prov-check-text { display: flex; flex-direction: column; min-width: 0; }
.prov-check-text .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prov-check-row.is-bad .prov-check-text .muted { white-space: normal; overflow-wrap: anywhere; color: var(--err-text); }
.prov-check-dot { width: 22px; height: 22px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--border-strong); }
.prov-check-dot svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.is-ok > .prov-check-dot { border: 0; background: var(--ok-bg); color: var(--ok-text); }
.is-bad > .prov-check-dot { border: 0; background: var(--err-bg); color: var(--err-text); }
.is-run > .prov-check-dot { border: 0; background: var(--info-bg); color: var(--info-text); }
.prov-check-spin { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: prov-spin .8s linear infinite; }
@keyframes prov-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .prov-check-spin { animation: none; } }
@media (max-width: 900px) {
  .wiz-groups, .wiz-creds { grid-template-columns: minmax(0, 1fr); }
  .wiz-models .tablet-hide { display: none; }
}
/* phone: one step per screen, the buttons at the bottom of the window */
@media (max-width: 640px) {
  .wiz-steps { padding: .4rem .6rem; gap: .3rem; }
  .wiz-step { flex: 0 0 auto; }
  .wiz-step::after { display: none; }
  .wiz-step .wiz-label { display: none; }
  .wiz-step.cur .wiz-label { display: inline; }
  .wiz-phone-step { display: block; margin-left: auto; font-size: .78rem; color: var(--muted); white-space: nowrap; }
  .wiz-body { max-height: none; padding: .8rem; }
  .wiz-card { overflow: visible; }
  .wiz-foot { position: sticky; bottom: 0; z-index: 5; padding: .6rem .8rem; }
  .wiz-foot-note { display: none; }
  .wiz-foot > * { flex: 1 1 auto; }
  .wiz-grid, .wiz-group:last-child .wiz-grid { grid-template-columns: minmax(0, 1fr); }
  .wiz-models .phone-hide { display: none; }
  .wiz-models { max-height: none; }
  /* the provider head stays one row: «Añadir otra cuenta» is in «+ Añadir proveedor» on a phone */
  .prov-head .prov-add-account { display: none; }
}
/* /E46 */

/* E59: provider edit page (pages/provider_edit.rs) under the provider head: a bar fixed at the top,
   compact sections in a grid that fits 1280×800 */
.prov-edit { margin-top: .5rem; }
.prov-edit-bar { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .5rem .75rem; margin-bottom: .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.prov-edit-bar .spacer { flex: 1; }
.prov-edit-bar [aria-disabled="true"] { opacity: .55; cursor: default; filter: none; }
.prov-edit-bar .action-dirty { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--notice-text); font-weight: 600; }
.prov-edit-bar .action-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.prov-edit-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .75rem; align-items: start; }
.prov-edit-col { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.prov-sec { margin: 0; padding: .8rem 1rem; }
.prov-sec h2 { font-size: .98rem; margin: 0 0 .5rem; }
.prov-sec p { margin: .35rem 0 0; }
.prov-sec .prov-check-row { padding: .2rem 0; }
/* E59: one line per step on the edit page (title, then its detail) */
.prov-sec .prov-check-text { flex-direction: row; align-items: baseline; gap: .5rem; }
.prov-sec .prov-check-text strong { flex: none; }
.prov-sec .prov-check-text .muted { min-width: 0; }
.prov-sec .prov-check-dot { width: 20px; height: 20px; }
.prov-edit-bar .prov-edit-cancel { font-size: inherit; }
.prov-edit-fields { max-width: none; gap: .55rem; }
.prov-edit-fields label { display: flex; flex-direction: column; gap: .2rem; }
.prov-edit-fields .form-row label { flex: 1 1 12rem; }
.prov-edit-fields .form-row { align-items: flex-start; }
.prov-key-state { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.prov-key-new { display: flex; flex-direction: column; gap: .2rem; margin-top: .5rem; }
.prov-price-table th, .prov-price-table td { padding: .25rem .35rem; }
.prov-price-table input { width: 100%; min-width: 0; }
.prov-price-table td.num input { max-width: 6.5rem; text-align: right; }
.prov-price-add { margin-top: .4rem; }
.prov-model-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; max-height: 4.6rem; overflow: hidden; }
.prov-model-chip { font-size: .76rem; padding: .05rem .45rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.prov-model-actions { margin-top: .5rem; }
@media (max-width: 900px) {
  .prov-edit-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .prov-edit-bar > * { flex: 1 1 auto; }
  .prov-edit-bar .spacer { display: none; }
  .prov-edit-bar .action-state:empty { display: none; }
}
/* /E59 */

/* E87: API key page in the current style: head facts + actions, compact cards, usage chart; the
   call log is a fitted DataTable (one-line cells, no sideways scroll). */
.key-head-main { min-width: 0; }
.key-facts-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; margin-top: .2rem; }
.key-prefix { font-size: 13px; padding: .1rem .45rem; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.key-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.key-card { display: flex; flex-direction: column; gap: .45rem; padding: .75rem .9rem; margin: 0; font-size: 13px; min-width: 0; }
.key-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.key-card-head h2 { margin: 0; font-size: 14px; }
.key-perms { display: flex; flex-direction: column; gap: .3rem; max-height: 13.5rem; overflow-y: auto; }
.key-perm-row, .key-fact { display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); align-items: center; gap: .6rem; }
.key-perm-res, .key-fact-label { color: var(--text-2); font-weight: 600; }
.key-fact-value { min-width: 0; overflow-wrap: anywhere; }
.key-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.key-chip { display: inline-flex; align-items: center; padding: .05rem .5rem; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.key-chip-act { background: var(--info-bg); color: var(--info-text); border-color: transparent; }
.key-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.key-usage .key-stat { min-width: 0; }
.key-stat { padding: .35rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); min-width: 0; }
.key-stat .stat-value { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.key-stat .stat-label { font-size: 11.5px; color: var(--text-2); }
.key-stat.err .stat-value { color: var(--danger); }
.key-chart { margin: .2rem 0 0; }
.key-chart svg { display: block; width: 100%; height: 56px; }
.key-bar { fill: color-mix(in srgb, var(--accent-line) 70%, transparent); }
.key-bar-err { fill: var(--danger); }
.key-chart figcaption { margin-top: .15rem; }
.key-audit-dt .dt-filter { flex: 0 1 auto; min-width: 0; max-width: 8.5rem; }
@media (max-width: 1200px) { .key-audit-dt .dt-bar { flex-wrap: wrap; row-gap: .35rem; } }
.key-audit-dt .audit-at { width: 10.5rem; }
.key-audit-dt .audit-method { width: 5.5rem; }
.key-audit-dt .audit-status { width: 5rem; }
.key-audit-dt .audit-latency { width: 6rem; }
.key-audit-dt .audit-ip { width: 9rem; }
/* E108: the one-line rule (`max-width: 0`) let the long route take the width and cut the time and
   the method; both keep their content width, only the route is truncated (its tooltip has it whole). */
.key-audit-dt .table th.audit-at, .key-audit-dt .table td.audit-at,
.key-audit-dt .table th.audit-method, .key-audit-dt .table td.audit-method { width: 1%; max-width: none; overflow: visible; text-overflow: clip; }
.key-audit-dt .table td.audit-path code { display: block; overflow: hidden; text-overflow: ellipsis; }
/* /E108 */
@media (max-width: 900px) {
  .key-cards { grid-template-columns: minmax(0, 1fr); }
  .key-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .key-perm-row, .key-fact { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
}
/* /E87 */
/* E57: roles and access control. */
.acl-tabs { margin-bottom: .5rem; }
.acl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-bottom: .75rem; }
.acl-head h1 { margin: 0; font-size: 1.3rem; }
.acl-roles td .pill { font-size: .75rem; }
.acl-role-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .75rem; }
@media (max-width: 640px) { .acl-role-fields { grid-template-columns: minmax(0, 1fr); } }
.acl-delete { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.acl-role-checks { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.acl-user-page section { margin-bottom: 1rem; }
.acl-user-page h3 { margin: 0 0 .35rem; }
.perm-cell.inherited input { opacity: .55; }
.acl-effective-list { columns: 2 18rem; margin: 0; padding-left: 1.1rem; font-size: .88rem; }
.acl-effective-list li { break-inside: avoid; }
.acl-detail { overflow-wrap: anywhere; }
.perm-matrix-wrap .perm-box { max-height: none; overflow: visible; }
.perm-matrix-wrap .perm-matrix { table-layout: fixed; width: 100%; }
.perm-matrix-wrap .perm-matrix th[scope="row"] { white-space: normal; overflow-wrap: anywhere; }
.perm-row-toggles { white-space: nowrap; text-align: right; }
@media (max-width: 640px) { .perm-row-toggles { display: none; } }
/* /E57 */
/* E83: combined provider + model selector (components/model_picker.rs, ModelSelect): a button
   with the account's logo, name and model; a popover with a search box and the models grouped by
   account. A stored model the account no longer offers keeps its place, marked «no disponible». */
.msel { position: relative; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.msel-label { font-weight: 600; }
.msel-btn {
  display: flex; align-items: center; gap: .45rem; width: 100%; min-height: 40px; padding: .35rem .6rem; text-align: left;
  background: var(--surface); color: var(--text); border: 1px solid var(--control-border); border-radius: var(--radius-sm);
  font: inherit; font-weight: 400; cursor: pointer; min-width: 0;
}
.msel-btn:disabled { opacity: .6; cursor: default; }
.msel-value { display: flex; align-items: center; gap: .45rem; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.msel-prov { color: var(--text-2); flex: none; }
.msel-model { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.msel-caret { flex: none; color: var(--muted); }
.msel-pop {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; width: max(100%, min(26rem, calc(100vw - 2rem)));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: .4rem; display: flex; flex-direction: column; gap: .35rem;
}
.msel-search { width: 100%; }
.msel-list { list-style: none; margin: 0; padding: 0; max-height: 18rem; overflow-y: auto; }
.msel-group { display: flex; align-items: center; gap: .4rem; padding: .45rem .4rem .2rem; font-size: .85rem; color: var(--text-2);
  position: sticky; top: 0; background: var(--surface); }
.msel-opt { display: flex; align-items: center; gap: .4rem; padding: .3rem .5rem .3rem 1.6rem; border-radius: 6px; cursor: pointer; }
.msel-opt.msel-none { padding-left: .5rem; color: var(--text-2); }
.msel-opt.active { background: var(--surface-2); outline: 1px solid var(--border); }
.msel-opt[aria-selected="true"] { font-weight: 700; }
.msel-opt[aria-selected="true"]::after { content: "✓"; margin-left: auto; color: var(--ok-text, var(--text)); }
.msel-opt code { overflow-wrap: anywhere; }
.msel-note, .msel-empty { padding: .3rem .5rem .3rem 1.6rem; }
.msel-empty { padding-left: .5rem; }
/* dense forms (E66): label left of the selector like the other fields, 28 px button */
.form-dense .msel { display: grid; grid-template-columns: var(--fd-label) minmax(0, 1fr); align-items: center; column-gap: .75rem; }
.form-dense .msel-btn { min-height: 28px; height: 28px; padding: 2px 8px; font-size: 13px; }
.form-dense .msel-pop { left: calc(var(--fd-label) + .75rem); width: min(26rem, calc(100% - var(--fd-label) - .75rem)); min-width: 16rem; }
@media (max-width: 640px) {
  .form-dense .msel { grid-template-columns: minmax(0, 1fr); row-gap: .2rem; }
  .form-dense .msel-pop { left: 0; width: 100%; }
}
/* In a fitted (one-window) settings page the narrow-screen menu toggle (E68) must not grow: as a
   flex item of the column it took the free height and pushed the table and its pager out. */
@media (max-width: 900px) {
  .shell:has(.dt-fit) .settings-layout > .side-nav-wrap { flex: none; }
}
/* /E83 */

/* E85: errors drill-down. Error counts and service names of the services table as links; the
   errors page (type chips, one-line table paged on the server). */
.svc-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.svc-name { color: inherit; }
a.svc-err-link { color: inherit; font-weight: 700; }
a.svc-err-link.svc-bad { color: var(--danger); }
.bs-err-link { color: var(--danger); }
.e85-head { margin-bottom: .25rem; }
.e85-sub { margin: 0 0 .75rem; }
.e85-card { margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.e85-loading .e85-table { opacity: .5; }
.e85-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.e85-chip { min-height: 44px; }
.e85-chip-n { font-variant-numeric: tabular-nums; }
.e85-table .table { table-layout: auto; width: 100%; }
.e85-table .table-box { overflow: hidden; }
.e85-table .table th, .e85-table .table td { white-space: nowrap; padding: .4rem .6rem; }
/* The message takes what is left and is cut with an ellipsis (full text in its tooltip). */
.e85-table .table td.e85-msg, .e85-table .table th.e85-msg-h { max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .e85-table .table th, .e85-table .table td { padding: .35rem .4rem; }
  .e85-badge { font-size: .72rem; padding: .1rem .35rem; }
}
.e85-table .table td.e85-bot { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
/* The short columns keep their content width, also on a phone (where data tables cut every cell). */
.e85-table .table th, .e85-table .table td.e85-at, .e85-table .table td.e85-conv, .e85-table .table td.e85-type,
.e85-table .table td.num { max-width: none; width: 1%; }
.e85-badge { display: inline-block; font-size: .78rem; font-weight: 700; padding: .1rem .5rem; border-radius: 6px; background: var(--err-bg); color: var(--err-text); }
.e85-table td a { display: inline-flex; align-items: center; min-height: 32px; }
/* /E85 */

/* E46b: phone fit of the provider pages (and every fitted settings page): in the fitted shell the
   settings layout is a column, where the side menu's `flex: 1 1 100%` (meant for the width) grew
   vertically into a blank block of ~350 px above the page; the menu keeps its own height. */
@media (max-width: 900px) {
  .shell:has(.dt-fit) .settings-layout > .side-nav-wrap { flex: none; align-self: stretch; }
}
/* /E46b */

/* E75: searchable select of the whole panel (components/combobox.rs). Button like a field;
   panel with a search box and the options (description, badge, icon, groups); dense in dense
   forms and tables; a bottom sheet on a phone. ModelSelect (`.msel*`, E83) is built on it. */
.cbx { position: relative; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.cbx-label { font-weight: 600; }
/* the label and button keep their own height: some forms give labels a flex basis (`.form-row label`) */
div.cbx > label.cbx-label, div.cbx > button.cbx-btn { flex: none; }
.cbx-btn {
  display: flex; align-items: center; gap: .45rem; width: 100%; min-height: 40px; padding: .35rem .6rem; text-align: left;
  background: var(--surface); color: var(--text); border: 1px solid var(--control-border); border-radius: var(--radius-sm);
  font: inherit; font-weight: 400; cursor: pointer; min-width: 0;
}
.cbx-btn:disabled { opacity: .6; cursor: default; }
.cbx-value { display: flex; align-items: center; gap: .45rem; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.cbx-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cbx-caret { flex: none; color: var(--muted); }
.cbx-pop {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; width: max(100%, min(22rem, calc(100vw - 2rem)));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: .4rem; display: flex; flex-direction: column; gap: .35rem;
}
.cbx-backdrop { display: none; }
.cbx-search { width: 100%; }
.cbx-list { list-style: none; margin: 0; padding: 0; max-height: 18rem; overflow-y: auto; }
.cbx-group { display: flex; align-items: center; gap: .4rem; padding: .45rem .4rem .2rem; font-size: .85rem; color: var(--text-2);
  position: sticky; top: 0; background: var(--surface); }
.cbx-opt { display: flex; align-items: center; gap: .45rem; padding: .35rem .5rem; border-radius: 6px; cursor: pointer; }
.cbx-group ~ .cbx-opt { padding-left: 1.4rem; }
.cbx-opt.active { background: var(--surface-2); outline: 1px solid var(--border); }
.cbx-opt[aria-selected="true"] .cbx-opt-label { font-weight: 700; }
.cbx-opt[aria-selected="true"]:not(:has(.cbx-check))::after { content: "✓"; margin-left: auto; color: var(--ok-text, var(--text)); }
.cbx-opt-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cbx-opt-label { overflow-wrap: anywhere; }
.cbx-opt-desc { line-height: 1.3; }
.cbx-check { flex: none; }
.cbx-note, .cbx-empty { padding: .35rem .5rem; list-style: none; }
.cbx-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.cbx-chip { display: inline-flex; align-items: center; gap: .2rem; padding: 0 0 0 .55rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: .85rem; }
.cbx-chip-x { min-height: 26px; min-width: 26px; padding: 0; border: 0; background: none; color: var(--text-2); border-radius: 999px; }
/* table cells and toolbars: one compact line */
.data-table .cbx-btn, .dt-bar .cbx-btn, .form-dense .cbx-btn { min-height: 28px; height: 28px; padding: 2px 8px; font-size: 13px; }
.data-table td .cbx, .dt-bar .cbx { flex-direction: row; }
.form-dense .cbx { display: grid; grid-template-columns: var(--fd-label) minmax(0, 1fr); align-items: center; column-gap: .75rem; }
.form-dense .cbx:not(:has(> .cbx-label)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) {
  .form-dense .cbx { grid-template-columns: minmax(0, 1fr); row-gap: .2rem; }
  /* bottom sheet */
  .cbx.open > .cbx-backdrop { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, .35); }
  .cbx-pop { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-height: 75dvh;
    border-radius: var(--radius) var(--radius) 0 0; padding: .6rem .6rem calc(.6rem + env(safe-area-inset-bottom)); }
  .cbx-list { max-height: calc(75dvh - 4.5rem); }
  .cbx-opt { min-height: 44px; }
}
/* /E75 */
/* E92: a combobox in a table floats over it (inline fixed position from combobox.rs) with its list
   bounded by the room it has; E94: the pager's rows-per-page is one compact inline control. */
.cbx-pop.floating { z-index: 70; max-width: calc(100vw - 16px); }
.cbx-pop.floating .cbx-list { max-height: max(6rem, min(18rem, calc(var(--cbx-room, 18rem) - 3.6rem))); }
.dt-foot .dt-size-label { display: inline-flex; align-items: center; }
.dt-foot .cbx.dt-size { flex-direction: row; width: auto; }
.dt-foot .cbx.dt-size .cbx-btn { width: auto; min-width: 4.2rem; min-height: 34px; height: 34px; padding: 2px 8px; font-size: 13px; }
.dt-foot-fit .cbx.dt-size .cbx-btn { min-height: 32px; height: 32px; }
/* /E92 */
/* E79: sliders (components/slider.rs) in the dense form style: label | track with the range's
   ends marked under it | the exact value as a number | «?». Stacked on a phone. */
.slider-row { display: grid; grid-template-columns: var(--fd-label, 11rem) minmax(0, 1fr) 5.5rem auto; align-items: center;
  column-gap: .75rem; font-size: 13px; min-width: 0; }
.slider-label { font-weight: 600; }
.slider-ctl { position: relative; min-width: 0; padding-bottom: 10px; }
/* 28 px hit area like the other dense controls; the filled part in the text colour (≥ 3:1 on the
   surface in light and dark). */
.slider-ctl input[type=range] { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%;
  height: 28px; min-height: 28px; margin: 0; padding: 12px 0; border: 0; border-radius: 2px; cursor: pointer;
  background-color: var(--text-2); background-clip: content-box; }
.form-dense .slider-ctl input[type=range] { height: 28px; min-height: 28px; padding: 12px 0; }
.slider-ctl input[type=range]::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.slider-ctl input[type=range]::-moz-range-track { height: 4px; background: transparent; }
.slider-ctl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px;
  border-radius: 50%; background: var(--text); border: 2px solid var(--surface); }
.slider-ctl input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--text);
  border: 2px solid var(--surface); }
.slider-ctl input[type=range]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.slider-marks { position: absolute; left: 0; right: 0; bottom: -1px; display: flex; justify-content: space-between;
  font-size: 11px; line-height: 1; color: var(--text-2); pointer-events: none; }
.slider-value { width: 100%; min-height: 28px; height: 28px; padding: 2px 6px; font-size: 13px; text-align: right; }
.slider-row .fd-help-wrap { grid-column: 4; }
@media (max-width: 640px) {
  .slider-row { grid-template-columns: minmax(0, 1fr) 5rem auto; row-gap: .2rem; }
  .slider-label { grid-column: 1 / -1; }
  .slider-row .fd-help-wrap { grid-column: 3; grid-row: 2; }
}
/* /E79 */
/* E80: accessible switches (components/switch.rs): a real checkbox with role="switch" laid over
   the track (so it is clickable and focusable), the track shows the state, the label beside it. */
.sw-row { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; cursor: pointer; min-height: 28px; }
.sw { position: relative; width: 36px; height: 20px; flex: none; }
.sw-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.sw-track { position: absolute; inset: 0; border-radius: 999px; background: var(--control-border); transition: background .15s; }
.sw-track::before { content: ""; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; border-radius: 50%;
  background: var(--switch-thumb, #fff); transition: transform .15s; }
.sw-input:checked + .sw-track { background: var(--ok-text); }
.sw-input:checked + .sw-track::before { transform: translateX(16px); }
.sw-input:focus-visible + .sw-track { outline: 3px solid var(--focus); outline-offset: 2px; }
.sw-input:disabled, .sw-off { cursor: default; }
.sw-off .sw-track, .sw-off .sw-text { opacity: .55; }
.form-dense .card.form > .sw-row { margin-left: calc(var(--fd-label) + .75rem); }
@media (max-width: 640px) { .form-dense .card.form > .sw-row { margin-left: 0; } }
/* /E80 */
/* E49: the page of a switched-off module. */
.module-off { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: baseline; }
/* E49: the users table's actions (permissions, enable, delete) stay on one line: dense rows. */
.users-table td.actions .dt-actions { flex-wrap: nowrap; }
.users-table.dt-compact td.actions a.icon-btn { min-height: 24px; display: inline-flex; }
/* E49: a combobox in a compact row (the users' role) is as tall as its icons: rows stay ≤ 32 px. */
.data-table.dt-compact td .cbx-btn { height: 24px; min-height: 24px; padding: 0 8px; }
/* /E49 */

/* E84e: the permission matrix of /api-keys/new and /<id>/edit fits a phone (no sideways scroll
   at 390 px): equal action columns with wrapping labels instead of the widest label's width. */
@media (max-width: 640px) {
  .key-form-page .perm-matrix { table-layout: fixed; width: 100%; }
  .key-form-page .perm-matrix thead th:first-child { width: 26%; }
  .key-form-page .perm-matrix thead th:last-child { width: 2.4rem; }
  .key-form-page .perm-matrix th, .key-form-page .perm-matrix td { padding: 3px 2px; }
  .key-form-page .perm-matrix .perm-col > span:first-child { display: block; overflow-wrap: anywhere; hyphens: auto; font-size: 10.5px; }
  .key-form-page .perm-matrix .perm-toggles .link,
  .key-form-page .perm-matrix .perm-row-toggles .link { font-size: 10.5px; padding: 0; }
  .key-form-page .perm-matrix th[scope="row"] { font-size: 12px; }
}
/* /E84e */

/* E109: /conversations view tabs colour-coded like E51's /attention chips (its --warn-mark token
   and .att-chip-dot): neutral «Todas», red «Valoradas como incorrectas», amber «Sin respuesta». A
   dot (3:1) and a tinted count (4.5:1); the active tab keeps the underline and tints its label. */
.conv-tab .conv-tab-dot { width: .55rem; height: .55rem; }
.conv-sev-error .conv-tab-dot { background: var(--danger); }
.conv-sev-warning .conv-tab-dot { background: var(--warn-mark); }
.conv-sev-error .conv-tab-count { color: var(--danger); font-weight: 700; }
.conv-sev-warning .conv-tab-count { color: var(--warn-text); font-weight: 700; }
.conv-tab.conv-sev-error[aria-selected="true"] { color: var(--danger); }
.conv-tab.conv-sev-warning[aria-selected="true"] { color: var(--warn-text); }
/* /E109 */

/* E110: «Nuevo chat» steps (pages/new_chat.rs), on the E46 assistant's .wiz-* styles */
.nc-page { display: flex; flex-direction: column; min-height: 0; }
.nc-steps .wiz-step:nth-child(3)::after { display: none; }
.nc-bot-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.nc-bot-head h2 { margin: 0; flex: 1 1 auto; }
.nc-search { flex: 0 1 18rem; min-width: 0; min-height: 32px; }
.nc-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.wiz-grid .preset-card.nc-bot { flex-direction: column; align-items: stretch; gap: .2rem; padding: .5rem .65rem; min-height: 0; }
.nc-bot-top { display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-width: 0; }
.nc-bot-top strong { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nc-bot-top .health-pill { flex: none; font-size: .7rem; }
.nc-bot .health-reasons { display: none; }
.nc-bot-model { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono, ui-monospace, monospace); }
.nc-bot-fig { color: var(--text-2); }
.preset-card.nc-bot-off { opacity: .6; cursor: not-allowed; border-style: dashed; }
.nc-empty { margin: .75rem 0 0; }
.nc-options { max-width: 52rem; display: flex; flex-direction: column; gap: .45rem; }
.nc-options textarea.mono { font-family: var(--mono, ui-monospace, monospace); }
.nc-options [aria-invalid="true"] { border-color: var(--err-text); }
.nc-claims-err { margin-left: var(--fd-label); }
.nc-channel { color: var(--muted); }
.nc-summary { max-width: 46rem; font-size: .9rem; color: var(--text); margin-bottom: .75rem; }
.nc-summary dt { color: var(--muted); }
.nc-summary dd { white-space: pre-wrap; }
@media (max-width: 720px) {
  .nc-search { flex: 1 1 100%; }
  .nc-grid { grid-template-columns: minmax(0, 1fr); }
  .nc-claims-err { margin-left: 0; }
}
/* /E110 */
/* E123: a switched-off module: warning banner, and its page below greyed out and unusable */
.mg-banner { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; background: var(--warn-bg); color: var(--warn-text); border: 1px solid color-mix(in srgb, var(--warn-text) 35%, transparent); cursor: default; }
.mg-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mg-text { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: .2rem; overflow-wrap: anywhere; }
.mg-text strong { color: var(--warn-text); }
.mg-text span { font-size: .93rem; }
.mg-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.mg-banner .btn { min-height: 40px; display: inline-flex; align-items: center; text-decoration: none; font-weight: 600; }
.mg-banner .mg-enable { background: var(--surface); color: var(--warn-text); border: 1px solid color-mix(in srgb, var(--warn-text) 55%, transparent); }
.mg-banner .mg-enable:hover { background: var(--surface-2); }
.mg-banner .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mg-ask { font-size: .93rem; font-weight: 600; }
.mg-preview { position: relative; cursor: not-allowed; border-radius: var(--radius-sm); }
.mg-preview:focus-visible { outline: 2px dashed var(--focus); outline-offset: 4px; }
/* Specific enough to beat `fieldset` and `.form-dense fieldset`: the preview adds no box of its own. */
.mg-preview > fieldset.mg-preview-body { display: block; border: 0; border-radius: 0; margin: 0; padding: 0; min-width: 0; opacity: .5; filter: grayscale(.9); user-select: none; pointer-events: none; }
.mg-preview::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--muted) 10%, transparent) 14px 15px); }
/* The tooltip follows the scroll (sticky, no height) so it shows wherever the page is hovered. */
.mg-tip { position: sticky; top: 4.5rem; z-index: 6; display: block; height: 0; overflow: visible; text-align: center; pointer-events: none; visibility: hidden; }
.mg-tip > span { display: inline-block; margin-top: .25rem; padding: .35rem .7rem; border-radius: var(--radius-sm); background: var(--ink); color: var(--ink-text); font-size: .85rem; font-weight: 600; box-shadow: var(--shadow); }
.mg-preview:hover .mg-tip, .mg-preview:focus-visible .mg-tip, .mg-preview:focus-within .mg-tip { visibility: visible; }
@media (max-width: 640px) {
  /* Phone: one compact block (title and hint run on, one action), the page below stays close. */
  .mg-banner { align-items: flex-start; gap: .4rem .6rem; padding: .55rem .75rem; }
  .mg-ico { width: 18px; height: 18px; margin-top: .1rem; }
  .mg-text { display: block; flex-basis: calc(100% - 2rem); }
  .mg-actions { width: 100%; }
  .mg-banner .btn { min-height: 36px; flex: 0 1 auto; justify-content: center; }
  .mg-banner:has(.mg-enable-here) .mg-enable { display: none; }
}
/* /E123 */

/* E118: the agent's items and the survey's questions as a fitted table, edited in a drawer.
   The section card fills the frame (dt-fit-host chain from the form); on the Agent tab the table
   and the tools column share the card, the column scrolls on its own. */
.bot-sec-fit { min-height: 0; padding: .75rem .75rem .5rem; }
.agent-cols.agent-fit { display: flex; flex-direction: row; align-items: stretch; gap: .75rem; min-height: 0; }
.agent-fit > .agent-items { flex: 3 1 0; min-width: 0; }
.agent-fit > .agent-side { flex: 2 1 0; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: .25rem; }
.agent-table .dt-bar .agent-kind-filter { min-width: 0; max-width: 10rem; }
.agent-table td code, .survey-table td code { font-size: .85em; }
.item-fields { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: .75rem; }
.item-fields label { display: flex; flex-direction: column; gap: .3rem; }
.item-fields textarea { width: 100%; }
.drawer.agent-drawer, .drawer.survey-drawer { width: min(540px, 100%); }
@media (max-width: 900px) {
  .agent-cols.agent-fit { flex-direction: column; }
  .agent-fit > .agent-items { flex: 1 1 auto; min-height: 16rem; }
  .agent-fit > .agent-side { flex: 0 1 auto; max-height: 40%; }
}
/* /E118 */
/* Glossary as a full-width fitted table + side drawer (E28). */
.gl-terms.gl-full { flex: 1 1 auto; min-width: 0; padding: .75rem .75rem .5rem; }
.gl-full > .gl-shared-summary { flex: none; margin: .25rem 0 0; max-width: none; }
.drawer .gl-detail { position: static; flex: 1 1 auto; gap: .75rem; }
.drawer .gl-form-option { flex-wrap: nowrap; }
.drawer.gl-drawer { width: min(560px, 100%); }
@media (max-width: 640px) { .gl-terms.gl-full { padding: .5rem; } }
/* /E121 */
/* E112: «Asociar bots a <base>» (kb_bots_add.rs): candidates table, then the chosen bots with
   their rules collapsed; dense rows, nothing wider than the window. */
.kbba-table td.bk-pick { width: 3rem; }
.kbba-picked { margin-top: .6rem; min-width: 0; }
.kbba-picked > h2 { margin: 0 0 .3rem; font-size: 13px; color: var(--text-2); font-weight: 600; }
.kbba-picked ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.kbba-item { border: 1px solid var(--border); border-radius: 6px; padding: .3rem .5rem; min-width: 0; }
.kbba-item-head { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.kbba-item-head .kbba-name, .kbba-item-head .kbba-summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kbba-item-head .kbba-summary { flex: 1; }
.kbba-item .kbba-rules { margin-top: .2rem; }
.kbba-item .kbba-rules input { width: 100%; box-sizing: border-box; }
/* /E112 */



/* E91: a user's access on one screen (pages/acl.rs UserAccessPage). Dense (E66): head, role
   chips, the effective-permissions matrix (a dot per cell) and a sticky «Guardar». Role colours
   keep 3:1 against both the light and the dark surface (non-text contrast). */
.ua-page { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.ua-page .rc0 { --rc: #3b7dd8; } .ua-page .rc1 { --rc: #13917f; } .ua-page .rc2 { --rc: #8b5cf6; }
.ua-page .rc3 { --rc: #d0661a; } .ua-page .rc4 { --rc: #d0457a; } .ua-page .rc5 { --rc: #4e8f2a; }
.ua-top { display: flex; align-items: center; gap: .3rem 1rem; flex-wrap: wrap; }
.ua-back { flex: none; }
.ua-head { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.ua-initial { flex: none; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-text); font-weight: 800; font-size: .95rem; }
.ua-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ua-name { font-size: 1.05rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua-state { flex: none; }
.ua-body { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.ua-h { font-size: .95rem; margin: 0; }
.ua-roles { display: flex; align-items: center; gap: .5rem .75rem; flex-wrap: wrap; }
.ua-chips { display: flex; flex-wrap: wrap; gap: .35rem; min-width: 0; }
.ua-chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 30px; padding: 2px 10px; border-radius: 999px;
  background: var(--surface); color: var(--text-2); border: 1px solid var(--control-border); font-size: 13px; font-weight: 600; cursor: pointer; }
.ua-chip .ua-swatch { width: 10px; height: 10px; border-radius: 999px; border: 2px solid var(--rc); background: transparent; }
.ua-chip[aria-pressed="true"] { color: var(--text); border-color: var(--rc); background: color-mix(in srgb, var(--rc) 16%, var(--surface)); }
.ua-chip[aria-pressed="true"] .ua-swatch { background: var(--rc); }
.ua-chip[aria-disabled="true"] { cursor: not-allowed; }
.ua-chip-mark { color: var(--muted); font-weight: 700; }
.ua-chip.changed { outline: 2px dashed var(--rc); outline-offset: 1px; }
.ua-note { margin: 0; padding: .35rem .6rem; border-radius: var(--radius-sm); font-size: .85rem; background: var(--info-bg); color: var(--info-text); }
.ua-last-admin { background: var(--notice-bg); color: var(--notice-text); }
.ua-perms { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.ua-bar { display: flex; align-items: center; gap: .4rem .75rem; flex-wrap: wrap; min-width: 0; }
.ua-search { width: 14rem; max-width: 100%; min-height: 30px; padding: 2px 8px; font-size: 13px; }
.ua-legend { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.ua-legend .ua-dot { width: 18px; height: 18px; cursor: default; }
.ua-legend .ua-dot + * { margin-right: .3rem; }
.ua-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow-y: auto; min-width: 0;
  max-height: calc(100dvh - 22rem); }
.ua-matrix { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.ua-matrix th, .ua-matrix td { padding: 0 4px; height: 22px; border-bottom: 1px solid var(--border); text-align: center; }
.ua-matrix thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--text-2); font-weight: 700; font-size: 12px; z-index: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua-matrix th.ua-res { text-align: left; width: 34%; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua-matrix tbody tr:last-child > * { border-bottom: 0; }
.ua-matrix tbody tr:hover { background: var(--surface-2); }
.ua-dot { display: inline-grid; place-items: center; width: 26px; height: 21px; padding: 0; min-height: 0; border: 0; background: none;
  border-radius: 6px; cursor: pointer; vertical-align: middle; }
.ua-dot:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ua-dot-mark { display: block; width: 12px; height: 12px; border-radius: 999px; }
.ua-dot[data-state="none"] .ua-dot-mark { width: 9px; height: 9px; border: 1.5px solid var(--control-border); }
.ua-dot[data-state="none"]:hover .ua-dot-mark { border-color: var(--text); }
.ua-dot[data-state="role"] { cursor: default; }
.ua-dot[data-state="role"] .ua-dot-mark { background: var(--rc); }
/* an extra permission: a diamond in the text colour (tells apart without colour) */
.ua-dot[data-state="extra"] .ua-dot-mark { width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); background: var(--text); }
.ua-dot.changed { box-shadow: inset 0 0 0 1.5px var(--accent-line); }
.ua-dot[aria-disabled="true"] { cursor: default; }
.ua-empty { margin: .5rem; }
.ua-more { min-height: 1.3rem; }
.ua-foot { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .45rem .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ua-foot .alert { margin: 0; padding: .2rem .6rem; font-size: .85rem; }
.ua-foot button { min-height: 32px; padding: .2rem .9rem; }
@media (max-width: 640px) {
  .ua-box { max-height: none; overflow: visible; }
  .ua-matrix th.ua-res { width: 30%; }
  .ua-matrix thead th { font-size: 10px; padding: 0 1px; }
  .ua-matrix th, .ua-matrix td { padding: 0 1px; }
  .ua-dot { width: 100%; max-width: 26px; height: 30px; }
  .ua-legend { display: none; }
  .ua-search { width: 100%; }
}
/* E91: one window on a desktop, like the fitted tables (`.shell:has(.dt-fit)`): the shell is one
   window high and the matrix box takes the room left (scrolling inside itself if ever needed). */
@media (min-width: 641px) {
  .shell:has(.ua-page) { height: 100vh; height: 100dvh; min-height: 0; }
  .shell:has(.ua-page) > main.content { display: flex; flex-direction: column; min-height: 0; padding-top: 1rem; padding-bottom: .75rem; }
  .shell:has(.ua-page) .settings-layout { flex: 1 1 auto; min-height: 0; flex-wrap: nowrap; align-items: stretch; }
  .shell:has(.ua-page) .settings-layout > .side-nav { align-self: flex-start; }
  .shell:has(.ua-page) .settings-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .ua-page, .ua-body, .ua-perms { flex: 1 1 auto; min-height: 0; }
  .ua-box { flex: 0 1 auto; max-height: none; }
}
/* /E91 */


/* E120: knowledge rules form (pages/bot_knowledge.rs BotKbRulesPage): two dense cards side by
   side (condition, chunk filter) with rule rows «prefix.field · operator · value · remove», the
   CEL text collapsed, «Probar» inline; order and test data below. Stacked under 900 px. */
.bk-rules-form { display: flex; flex-direction: column; gap: .5rem; }
/* The «no rule» switch is a plain row (not a dense label-left field), with «todas / alguna» beside it. */
.bk-switch-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; min-height: 28px; }
.bk-rules-form .bk-sec label.sw-row { display: inline-flex; flex-direction: row; grid-template-columns: none; align-items: center;
  font-weight: 500; margin: 0; }
/* Order and the collapsed test data on one line; the data take the full width when open. */
.bk-rules-form .bk-sec.bk-sec-more { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 1.5rem; }
.bk-rules-form .bk-sec-more > .fd-advanced { border-top: 0; padding-top: 0; }
.bk-rules-form .bk-sec-more > .fd-advanced[open] { flex-basis: 100%; }
.bk-sec { display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: .5rem .8rem; }
.bk-sec-title { font-size: 14px; margin: 0; display: flex; align-items: center; gap: .35rem; }
.bk-rows { display: flex; flex-direction: column; gap: .35rem; }
.bk-row { display: grid; grid-template-columns: auto minmax(5rem, 1fr) minmax(7.5rem, 9rem) minmax(5rem, 1fr) auto;
  align-items: center; gap: .35rem; }
.bk-row input { min-width: 0; width: 100%; }
.bk-prefix { color: var(--text-2); font-size: 12px; }
.bk-row-add { align-self: flex-start; }
.bk-join { width: 12rem; max-width: 100%; }
.bk-test-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; min-height: 1.8rem; }
.bk-test-row .bk-row-add { margin-right: auto; }
.bk-test-result .badge { white-space: normal; }
.bk-raw-text { width: 100%; }
.form-dense .bk-sec .fd-advanced-body label { grid-template-columns: 8rem minmax(0, 1fr); }
.bk-order-row { display: flex; align-items: center; gap: .5rem; }
.bk-order-row .cbx.bk-order { display: grid; grid-template-columns: var(--fd-label, 12rem) 10rem; align-items: center; column-gap: .75rem; }
.bk-order-row .cbx-label { font-weight: 600; }
@media (max-width: 640px) { .bk-order-row .cbx.bk-order { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .bk-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .bk-row .bk-op, .bk-row .bk-value { grid-column: 2 / -1; }
}
/* /E120 */

/* E99: /modules as one dense data table: name + one-line muted description, category, switch or
   lock, dependency chips, settings icon. Compact filter chips keep the toolbar on one line. */
.mod-table .dt-bar .chips { flex-wrap: nowrap; gap: .25rem; }
.mod-table .mod-fchip { padding: .15rem .55rem; font-size: .8rem; min-height: 28px; white-space: nowrap; }
.mod-table .dt-search { flex: 0 1 12rem; min-width: 7rem; }
.mod-table .mod-cell { display: flex; align-items: baseline; gap: .5rem; min-width: 0; overflow: hidden; }
.mod-table .mod-name { flex: none; white-space: nowrap; font-size: .9rem; }
.mod-table .mod-desc { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .84rem; }
.mod-table td.mod-state { overflow: visible; }
.mod-table .mod-switch { min-height: 24px; }
.mod-locked { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .8rem; cursor: help; }
.mod-locked .ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.mod-chips { display: flex; gap: .25rem; min-width: 0; overflow: hidden; }
.mod-chip { flex: none; padding: 0 .45rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: .75rem; line-height: 1.35rem; white-space: nowrap; }
.mod-chip.off { color: var(--muted); text-decoration: line-through; }
.mod-table.dt-oneline .table .mod-cat { width: 7.5rem; min-width: 7.5rem; max-width: 7.5rem; }
.mod-table.dt-oneline .table .mod-state { width: 6.5rem; min-width: 6.5rem; max-width: 6.5rem; }
.mod-table .mod-cat-filter { flex: 0 0 auto; min-width: 11rem; }
@media (max-width: 1279px) {
  .mod-table .dt-bar { flex-wrap: wrap; row-gap: .4rem; }
  .mod-table .dt-bar .chips { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .mod-table .mod-desc { display: none; }
  .mod-table .mod-locked-text { display: none; }
}
/* /E99 */

/* E100: /providers name column first: a share of the width, the badges give way before the
   name (whole badges wrap onto clipped lines; the empty ::before keeps even the first badge
   wrappable), the kind column keeps a real width (a width hint loses to max-width: 0). */
.prov-table.dt-oneline .table th.prov-name-col { width: 40%; }
.prov-table.dt-oneline .table .prov-kind { width: 7rem; min-width: 7rem; max-width: 7rem; }
.prov-table .prov-cell { display: flex; flex-wrap: nowrap; align-items: center; gap: .4rem; min-width: 0; overflow: hidden; }
.prov-table .prov-cell > .prov-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prov-table .prov-badges { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center;
  height: 1.45rem; overflow: hidden; }
.prov-table .prov-badges::before { content: ""; flex: none; width: 0; height: 1.45rem; }
.prov-table .prov-badges > .badge { flex: none; margin-left: .25rem; white-space: nowrap; }
.prov-table .prov-cell > .prov-logo { flex: none; }
@media (max-width: 640px) {
  .prov-table.dt-oneline .table th.prov-name-col { width: auto; }
}
/* /E100 */

/* E101: /providers/catalog, a gallery table like the local models one: logo, name, «Configurado ·
   N», one-line muted description; group, models, prices; «Añadir». */
.pc-table.dt-oneline .table th.pc-name-col { width: 46%; }
.pc-table .pc-cell { display: flex; align-items: center; gap: .45rem; min-width: 0; overflow: hidden; }
.pc-table .pc-cell > .prov-logo, .pc-table .pc-cell > .pc-name, .pc-table .pc-configured { flex: none; }
.pc-table .pc-desc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.pc-table .dt-bar .chips { gap: .25rem; }
.pc-table .pc-chip { padding: .15rem .6rem; font-size: .8rem; min-height: 28px; white-space: nowrap; }
.pc-table .pc-add { padding: .15rem .7rem; min-height: 28px; white-space: nowrap; }
.pc-table .dt-bar { flex-wrap: wrap; row-gap: .4rem; }
.pc-table .dt-bar .chips { flex-wrap: wrap; min-width: 0; }
/* `.dt-bar > * { flex: none }` kept the chips at their full width, so they never wrapped. */
.pc-table .dt-bar > .chips { flex: 0 1 auto; max-width: 100%; }
@media (max-width: 640px) {
  .pc-table .pc-desc { display: none; }
  .pc-table .pc-configured { display: none; }
  .pc-table.dt-oneline .table th.pc-name-col { width: auto; }
}
/* /E101 */

/* E131: the promote form. */
.pr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; align-items: start; }
.pr-grid > .card { margin: 0; min-width: 0; padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
.pr-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.pr-head h3 { margin: 0; font-size: 1rem; }
.pr-list { list-style: none; margin: 0; padding: 0; max-height: 26rem; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .3rem; }
.pr-item { width: 100%; display: flex; align-items: center; gap: .6rem; text-align: left; padding: .4rem .6rem; min-height: 0; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pr-item.on { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent-line) 10%, transparent); }
.pr-n { flex: none; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 999px; background: var(--surface-2); font-size: .78rem; font-weight: 700; }
.pr-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pr-q, .pr-a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .86rem; }
.pr-q { font-weight: 600; }
.pr-nc { flex: none; }
.pr-preview { max-height: 14rem; overflow-y: auto; margin: 0; }
.pr-case label > span { display: inline-flex; align-items: center; gap: .3rem; }
@media (max-width: 900px) { .pr-grid { grid-template-columns: minmax(0, 1fr); } .pr-list { max-height: 14rem; } }
/* /E131 */

/* E117 / E123: compact memory banner inside the General tab's identity card (it must still fit
   1280×800): smaller padding and text, the action on the same line. */
.mg-banner.bot-memory-off { padding: .35rem .6rem; gap: .4rem .5rem; margin: .2rem 0 .25rem; }
.mg-banner.bot-memory-off .mg-text strong { font-size: .85rem; }
.mg-banner.bot-memory-off .mg-text span { font-size: .82rem; }
.mg-banner.bot-memory-off .btn { min-height: 32px; padding: .2rem .7rem; }
/* /E117 / E123 */

/* E118: the survey / agent tables' short columns keep a real width (a width hint loses
   to the one-line cells' max-width: 0, as in E100), and their icon buttons keep the icon (the
   dense form's button padding squeezed the 18 px SVG to nothing). */
.survey-table.dt-oneline .table .sv-n { width: 2.5rem; min-width: 2.5rem; max-width: 2.5rem; }
.survey-table.dt-oneline .table .sv-key { width: 8rem; min-width: 8rem; max-width: 8rem; }
.survey-table.dt-oneline .table .sv-kind { width: 8.5rem; min-width: 8.5rem; max-width: 8.5rem; }
.survey-table.dt-oneline .table .sv-req { width: 6.5rem; min-width: 6.5rem; max-width: 6.5rem; }
.agent-table.dt-oneline .table .ag-kind { width: 6rem; min-width: 6rem; max-width: 6rem; }
.agent-table.dt-oneline .table .ag-key { width: 9rem; min-width: 9rem; max-width: 9rem; }
.agent-table.dt-oneline .table .ag-detail { width: 8.5rem; min-width: 8.5rem; max-width: 8.5rem; }
.form-dense .data-table button.icon-btn:not(.link) { padding: 0; font-size: inherit; }
@media (max-width: 640px) {
  .survey-table.dt-oneline .table .sv-key { width: 5rem; min-width: 5rem; max-width: 5rem; }
  .agent-table.dt-oneline .table .ag-key { width: 6rem; min-width: 6rem; max-width: 6rem; }
}
/* /E118 */
/* E126: resizable columns. The handle sits on the header's right edge; a saved width comes as
   `--dt-w` (ignored at phone width, where the columns share the screen). A sized column's cells
   are one line cut to its width (`max-width: 0` lets the width win over the content). The width is
   also the header's `min-width`: a crowded table shrinks plain `width` columns to their padding
   (a 140 px column stayed 20 px on /bots at 1366), and the user's choice must hold; the box then
   scrolls sideways instead. The handle lies over the header's own right padding (no extra
   padding: a few px per column was enough to crowd wide tables). */
.data-table:not(.dt-fit) .table th.dt-rz { position: relative; }
.data-table .table th.dt-sized { width: var(--dt-w); min-width: var(--dt-w); }
.data-table .table th.dt-sized, .data-table .table td.dt-sized { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-table .table td.dt-sized * { white-space: nowrap; }
.dt-resize { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: col-resize; touch-action: none; z-index: 3; user-select: none; }
.dt-resize::after { content: ""; position: absolute; top: 20%; bottom: 20%; right: 3px; width: 2px; border-radius: 1px; background: var(--border); opacity: 0; transition: opacity .12s; }
.data-table .table th:hover .dt-resize::after { opacity: 1; }
.dt-resize:hover::after, .dt-resize:active::after, .dt-resize:focus-visible::after { opacity: 1; background: var(--accent); top: 0; bottom: 0; }
.dt-resize:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dt-widths { display: flex; justify-content: flex-end; margin: -.5rem 0 .75rem; }
@media (min-width: 641px) {
  /* A saved header also wins over a table's more-specific min-width: 0 content hint. */
  .data-table .table th.dt-rz.dt-sized { min-width: var(--dt-w); }
  /* Auto layout distributes spare space even to pixel-width columns (207 px became 325 px
     on an empty /bots table). Give that space to unsized text columns instead; fixed actions
     and selection columns keep their natural width. No saved widths means no layout change. */
  .data-table .table:has(th.dt-sized) th.dt-rz:not(.dt-sized) { width: 100%; }
  /* A body cell's old percentage hint must not override its sized header. */
  .data-table .table td.dt-sized { width: auto; }
  /* With no flexible text column left, keep the requested total instead of stretching it. */
  .data-table .table:has(th.dt-sized):not(:has(th.dt-rz:not(.dt-sized))) { width: max-content; }
}
/* Hidden columns cannot absorb spare space at these existing responsive breakpoints. */
@media (min-width: 641px) and (max-width: 1279px) {
  .data-table .table:has(th.dt-sized):not(:has(th.dt-rz:not(.dt-sized, .dt-narrow-hide))) { width: max-content; }
}
@media (min-width: 641px) and (max-width: 1099px) {
  .data-table .table:has(th.dt-sized):not(:has(th.dt-rz:not(.dt-sized, .dt-narrow-hide, .dt-tablet-hide))) { width: max-content; }
}
/* Memories keep the source column hidden beyond the shared narrow breakpoint. */
@media (min-width: 1280px) and (max-width: 1499px) {
  .mem-table .table:has(th.dt-sized):not(:has(th.dt-rz:not(.dt-sized, .mem-source-col))) { width: max-content; }
}
@media (max-width: 640px) {
  .data-table .table th.dt-sized { width: auto; min-width: 0; }
  .dt-resize, .dt-reset-widths, .dt-widths { display: none; }
}
/* /E126 */


/* E90 (dismiss): a «?» bubble never blocks the controls under it (an open bubble once sat
   over a bot's test pack links and the analyzer model selector); it only holds text, so clicks
   go through it to the page. It closes on Escape and on a press outside its «?». */
.ch-help-tip, .form-dense label .fd-tip { pointer-events: none; }
/* /E90 (dismiss) */

/* E136: a table row's delete confirmation covers its own row, centred: the row keeps its height
   (a fitted table keeps its page size) and the action icons stay put. Confirmed, the row fades
   out (`FADE_MS` in components/ui.rs) and then goes; reduced motion removes it at once. */
tr.row-confirming { position: relative; transition: opacity .24s ease; }
tr.row-leaving { opacity: 0; pointer-events: none; }
.row-confirm {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: safe center;
  gap: .5rem; padding: 0 .6rem; overflow: hidden; white-space: nowrap; text-align: left;
  background: var(--surface); color: var(--text); font-size: .875rem; line-height: 1.25;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--danger) 55%, transparent);
}
.row-confirm-q { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.row-confirm-undo { flex: none; color: var(--text-2); }
.row-confirm-err { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--danger); font-weight: 600; }
.row-confirm button { flex: none; min-height: 0; height: auto; max-height: 100%; padding: .2rem .7rem; font-size: .85rem; line-height: 1.25; }
.row-confirm button.link { padding: .2rem .35rem; }
@media (max-width: 900px) { .row-confirm-undo { display: none; } }
@media (max-width: 640px) { .row-confirm { gap: .35rem; padding: 0 .35rem; } .row-confirm button { padding: .2rem .45rem; } }
@media (prefers-reduced-motion: reduce) { tr.row-confirming { transition: none; } }
/* /E136 */

/* E144: conditional instruction blocks (bot › General). */
.bot-iblocks { margin-top: .5rem; display: flex; flex-direction: column; gap: .4rem; }
/* E158: heading and «Añadir bloque» on one line, inside the Personalidad card */
.ib-title { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; }
.ib-title h4 { margin: 0; }
.ib-title .ib-add { margin-left: auto; }
.ib-empty { margin: 0; }
.ib-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.ib-block { border: 1px solid var(--border, #d0d5dd); border-radius: 6px; padding: .6rem .75rem; display: flex; flex-direction: column; gap: .4rem; }
.ib-block.ib-off { opacity: .65; }
.ib-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ib-head .ib-name { flex: 1 1 12rem; min-width: 0; font-weight: 600; }
.ib-condition, .ib-text, .ib-claims { width: 100%; }
.ib-preview { margin-top: .75rem; }
.ib-preview > summary { cursor: pointer; }
.ib-result { margin: .5rem 0; padding-left: 1.1rem; }
.ib-out-yes { color: var(--ok-text, #1d6b3e); }
.ib-out-err { color: var(--danger, #b42318); }
.ib-out-no, .ib-out-off { color: var(--muted, #667085); }
.ib-section { white-space: pre-wrap; overflow-wrap: anywhere; }
/* /E144 */

/* ---------- E150: first-load placeholder (components/loading.rs, DataTable `loading`) ---------- */
.ld { display: flex; flex-direction: column; gap: .7rem; padding: 1rem 0; min-height: 8rem; }
.ld.card { padding: 1.25rem; }
.ld-line, .dt-skel-row .ld-line {
  display: block; height: .85rem; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--border) 50%, var(--surface-2) 100%);
  background-size: 200% 100%; animation: ld-shimmer 1.4s ease-in-out infinite;
}
.ld .ld-line:nth-child(3n+2) { width: 92%; }
.ld .ld-line:nth-child(3n) { width: 64%; }
.ld .ld-line:nth-child(3n+1) { width: 80%; }
.ld.ld-spinner { align-items: center; justify-content: center; }
.ld-spin {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent-line);
  animation: ld-spin .8s linear infinite;
}
.dt-skel-row td { padding-top: .7rem; padding-bottom: .7rem; }
.dt-skel-row td:nth-child(2n) .ld-line { width: 70%; }
.dt-skel-row:hover { background: none; cursor: default; }
/* while the skeleton shows, nothing else of the body (group headers, empty messages) nor the count */
.dt-busy tbody tr:not(.dt-skel-row) { display: none; }
.data-table:has(.dt-busy) .dt-count { visibility: hidden; }
@keyframes ld-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes ld-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ld-line, .ld-spin { animation: none; } }