/* Panel «Gobierno de Agentes» — hoja autosuficiente con los mismos tokens que styles.css */
:root {
  --bg: #f3f4f6; --surface: #ffffff; --text: #1b2130; --muted: #667085; --border: #dfe2e8;
  --primary: #1b2a4a; --header: #1b2a4a; --primary-ink: #fff;
  --ok: #276749; --ok-bg: #e7f0ea; --review: #8a5a2b; --review-bg: #f3e9de; --time: #4a5578; --time-bg: #eceef3;
  --warn: #9c6b1f; --warn-bg: #f2e6d0; --crit: #9f2d2d; --crit-bg: #f7e2e2;
  --auto: #2f6f6e; --auto-bg: #e7f1f0; --hogar: #6b4c7a; --hogar-bg: #f0eaf3; --salud: #8c3a52; --salud-bg: #f6e9ed;
  --ag-multicanal: #1b2a4a; --ag-clasificacion: #2f7a72; --ag-extraccion: #b3812f; --ag-reglas: #6f5488; --ag-ia: #55608a; --ag-local: #667085;
  --grid: #e3e6ec; --radius: 5px; --radius-sm: 5px; --radius-pill: 5px; --shadow: 0 1px 2px rgba(16,24,40,.06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #10141c; --surface: #181d29; --text: #e7e9ee; --muted: #97a1b8; --border: #2a3244;
  --primary: #5b7bb5;
  --ok: #6fbf96; --ok-bg: #16302a; --review: #d0a374; --review-bg: #3a2c1a; --time: #9aa4c9; --time-bg: #232a44;
  --warn: #d9ad5f; --warn-bg: #3a2c14; --crit: #e0807f; --crit-bg: #3b1717;
  --auto: #7ec4c2; --auto-bg: #163330; --hogar: #b79bc9; --hogar-bg: #2e2138; --salud: #d38ca3; --salud-bg: #3a2029;
  --ag-multicanal: #5b7bb5; --ag-clasificacion: #6fc0b8; --ag-extraccion: #d9ad5f; --ag-reglas: #b79bc9; --ag-ia: #9aa4c9; --ag-local: #97a1b8;
  --grid: #263048; --shadow: 0 1px 2px rgba(0,0,0,.35); color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #10141c; --surface: #181d29; --text: #e7e9ee; --muted: #97a1b8; --border: #2a3244;
  --primary: #5b7bb5;
  --ok: #6fbf96; --ok-bg: #16302a; --review: #d0a374; --review-bg: #3a2c1a; --time: #9aa4c9; --time-bg: #232a44;
  --warn: #d9ad5f; --warn-bg: #3a2c14; --crit: #e0807f; --crit-bg: #3b1717;
  --auto: #7ec4c2; --auto-bg: #163330; --hogar: #b79bc9; --hogar-bg: #2e2138; --salud: #d38ca3; --salud-bg: #3a2029;
  --ag-multicanal: #5b7bb5; --ag-clasificacion: #6fc0b8; --ag-extraccion: #d9ad5f; --ag-reglas: #b79bc9; --ag-ia: #9aa4c9; --ag-local: #97a1b8;
  --grid: #263048; --shadow: 0 1px 2px rgba(0,0,0,.35); color-scheme: dark; }

* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.45; font-size: 14px; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: 1.6rem; letter-spacing: -.01em; line-height: 1.1; }
h2 { font-size: 1rem; }
h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
a { color: var(--primary); }
svg.i, svg.lucide-svg { width: 1em; height: 1em; flex: none; vertical-align: -.15em; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: .8rem; }

/* .topbar, .brand, .brand-ico y .btn-white están en header.css (compartido con index.html) */
.btn { font: inherit; font-weight: 600; padding: .5rem .9rem; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); display: inline-flex; align-items: center; gap: .45rem; transition: background .15s, transform .06s; }
.btn:hover { background: var(--bg); } .btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); } .btn-primary:hover { background: #142238; }
.btn-sm { padding: .32rem .6rem; font-size: .8rem; }
.pill { font-size: .72rem; font-weight: 700; padding: .18rem .55rem; border-radius: var(--radius-pill); white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; }
.pill-ok { background: var(--ok-bg); color: var(--ok); } .pill-review { background: var(--review-bg); color: var(--review); }
.pill-warn { background: var(--warn-bg); color: var(--warn); } .pill-crit { background: var(--crit-bg); color: var(--crit); }
.pill-time { background: var(--time-bg); color: var(--time); } .pill-muted { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.pill-auto { background: var(--auto-bg); color: var(--auto); } .pill-hogar { background: var(--hogar-bg); color: var(--hogar); } .pill-salud { background: var(--salud-bg); color: var(--salud); }
.ag { --c: var(--primary); display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.ag .dot { width: .6rem; height: .6rem; border-radius: 3px; background: var(--c); flex: none; }
.ag-ico { --c: var(--primary); width: 1.9rem; height: 1.9rem; border-radius: 5px; display: inline-grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); flex: none; }
.ag-ico svg { width: 1.1rem; height: 1.1rem; }

.view { display: none; padding: 1.25rem; gap: 1.25rem; grid-template-columns: 1fr; max-width: 1400px; margin: 0 auto; }
.view.is-active { display: grid; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow); min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.card-head h2 { display: flex; align-items: center; gap: .5rem; }
.two { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.25rem; } .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 960px) { .two, .three { grid-template-columns: 1fr; } }

/* Panel dividido y redimensionable (Reasoning & Replay: trazas | razonamiento) */
.resizable-row { display: flex; align-items: stretch; min-width: 0; gap: .6rem; }
.resizable-row > .resizable-pane:first-child { flex: 0 0 var(--pane-w, 55%); min-width: 280px; }
.resizable-row > .resizable-pane:last-child { flex: 1 1 auto; min-width: 280px; }
.resize-handle { flex: none; width: 22px; cursor: col-resize; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.resize-handle::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--border); border-radius: 2px; }
.resize-handle svg { position: relative; z-index: 1; width: 1.15rem; height: 1.15rem; padding: .15rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.resize-handle:hover, .resize-handle:focus-visible { color: var(--primary); }
.resize-handle:hover::after, .resize-handle:focus-visible::after { background: var(--primary); }
.resize-handle:hover svg, .resize-handle:focus-visible svg { border-color: var(--primary); }
.resize-handle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Ambos paneles a la misma altura; el contenido interno hace scroll, no la tarjeta */
.resizable-row .resizable-pane { display: flex; }
.resizable-row .resizable-pane > .card { display: flex; flex-direction: column; width: 100%; height: min(744px, 82vh); overflow: hidden; }
.resizable-row .resizable-pane > .card > *:not(.pane-scroll) { flex: none; }
.pane-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@media (max-width: 960px) {
  .resizable-row { flex-direction: column; }
  .resize-handle { display: none; }
  .resizable-row > .resizable-pane:first-child { flex-basis: auto; }
}

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.kpi { border-top: 4px solid var(--border); display: grid; gap: .2rem; padding: .9rem 1.1rem; }
.kpi .l { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: flex; align-items: center; gap: .4rem; }
.kpi .v { font-size: 2rem; font-weight: 800; line-height: 1.05; }
.kpi .s { font-size: .8rem; color: var(--muted); }
.kpi-ok { border-top-color: var(--ok); } .kpi-ok .v { color: var(--ok); }
.kpi-review { border-top-color: var(--review); } .kpi-review .v { color: var(--review); }
.kpi-time { border-top-color: var(--time); } .kpi-time .v { color: var(--time); }
.kpi-warn { border-top-color: var(--warn); } .kpi-warn .v { color: var(--warn); }
.kpi-crit { border-top-color: var(--crit); } .kpi-crit .v { color: var(--crit); }
.kpi-primary { border-top-color: var(--primary); } .kpi-primary .v { color: var(--primary); }
.kpi[data-kpi-fin] { cursor: pointer; transition: transform .1s, box-shadow .15s; }
.kpi[data-kpi-fin]:hover { box-shadow: 0 6px 16px rgba(16, 24, 40, .1); transform: translateY(-1px); }
.kpi[data-kpi-fin]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.meter { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--c, var(--primary)) 18%, transparent); overflow: hidden; margin-top: .3rem; }
.meter > i { display: block; height: 100%; background: var(--c, var(--primary)); border-radius: 999px; }

/* Agentes */
.agents { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.agent { --c: var(--primary); display: grid; gap: .55rem; }
.agent .top { display: flex; align-items: center; gap: .6rem; }
.agent .top strong { font-size: .98rem; }
.agent dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .7rem; margin: 0; font-size: .8rem; }
.agent dt { color: var(--muted); } .agent dd { margin: 0; }
.switch { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; margin-left: auto; cursor: pointer; }
.switch i { width: 30px; height: 17px; border-radius: 999px; background: var(--ok); position: relative; display: inline-block; }
.switch i::after { content: ''; position: absolute; top: 2px; left: 15px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }
.switch.off i { background: var(--muted); } .switch.off i::after { left: 2px; }

/* Tablas */
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .84rem; }
th, td { text-align: left; padding: .5rem .55rem; border-bottom: 1px solid var(--border); vertical-align: top; white-space: nowrap; }
th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
td.wrap { white-space: normal; min-width: 220px; }
tbody tr.clickable { cursor: pointer; } tbody tr.clickable:hover, tbody tr.is-sel { background: var(--bg); }
tr.is-sel td:first-child { box-shadow: inset 3px 0 0 var(--primary); }

/* Alertas */
.alerts { display: grid; gap: .55rem; }
.alert { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: start; padding: .65rem .8rem; border-radius: 5px; border: 1px solid var(--border); background: var(--bg); }
.alert .ico { width: 1.7rem; height: 1.7rem; border-radius: 5px; display: grid; place-items: center; }
.alert.crit .ico { background: var(--crit-bg); color: var(--crit); } .alert.warn .ico { background: var(--warn-bg); color: var(--warn); } .alert.info .ico { background: var(--time-bg); color: var(--time); } .alert.ok .ico { background: var(--ok-bg); color: var(--ok); }
.alert b { display: block; font-size: .86rem; } .alert small { color: var(--muted); }

/* Gráficos */
.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--muted); font-size: 11px; font-family: inherit; }
.chart .grid line { stroke: var(--grid); stroke-width: 1; }
.chart .axis { stroke: var(--border); }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .78rem; color: var(--muted); margin-top: .5rem; }
.legend span { display: inline-flex; align-items: center; gap: .35rem; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.tip { position: fixed; pointer-events: none; background: var(--text); color: var(--bg); font-size: .75rem; padding: .35rem .55rem; border-radius: 5px; z-index: 20; display: none; white-space: nowrap; }

/* Waterfall de spans */
.spans { display: grid; gap: .45rem; }
.span { display: grid; grid-template-columns: 150px 1fr 110px; gap: .7rem; align-items: center; font-size: .8rem; }
.span .bar { --c: var(--primary); height: 18px; position: relative; background: color-mix(in srgb, var(--c) 10%, transparent); border-radius: 5px; }
.span .bar i { position: absolute; top: 0; height: 100%; background: var(--c); border-radius: 5px; opacity: .85; }
.span .bar em { position: absolute; top: 0; height: 100%; display: flex; align-items: center; font-style: normal; font-size: .7rem; padding-left: .35rem; color: var(--text); }
.span .r { text-align: right; color: var(--muted); }
.detail { display: grid; gap: 1rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .8rem; margin: 0; font-size: .82rem; }
.kv dt { color: var(--muted); font-weight: 600; } .kv dd { margin: 0; overflow-wrap: anywhere; }
.box { background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: .7rem .8rem; font-size: .82rem; }

/* Reasoning */
.steps { display: grid; gap: .8rem; }
.step { --c: var(--primary); border-left: 3px solid var(--c); padding: .2rem 0 .2rem .9rem; display: grid; gap: .4rem; }
.step .h { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.step ul { margin: 0; padding-left: 1.1rem; font-size: .82rem; display: grid; gap: .15rem; }
.step .io { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } @media (max-width: 760px) { .step .io { grid-template-columns: 1fr; } }
/* Razonamiento registrado: cadena, mensaje con citas, pasos tipados y gráfico por agente */
#steps { container-type: inline-size; }
.rz-cadena { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.1rem; }
@container (min-width: 34rem) { .rz-cadena { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 33.99rem) { .rz-nodo:nth-child(2n)::after { display: none; } }
.rz-nodo:not(:last-child)::after { content: '→'; position: absolute; right: -.95rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; }
.rz-nodo { position: relative; min-width: 0; display: grid; gap: .1rem; align-content: start; background: var(--bg); border: 1px solid var(--border); border-top: 3px solid var(--c); border-radius: 5px; padding: .45rem .55rem; font-size: .74rem; }
.rz-nodo b { font-size: .8rem; display: flex; align-items: flex-start; gap: .3rem; line-height: 1.2; } .rz-nodo b .i { flex: none; margin-top: .1rem; } .rz-nodo .mono { color: var(--muted); font-size: .7rem; }
.rz-nodo.ok { background: var(--ok-bg); border-color: var(--ok); border-top-color: var(--c); } .rz-nodo.rv { background: var(--review-bg); border-color: var(--review); border-top-color: var(--c); }
.rz-nodo .rz-dec { font-weight: 700; font-size: .74rem; } .rz-nodo.ok .rz-dec { color: var(--ok); } .rz-nodo.rv .rz-dec { color: var(--review); }
.rz-nodo .rz-sal { font-size: .72rem; font-weight: 600; color: var(--c); }
.rz-ley { display: flex; flex-wrap: wrap; gap: .25rem .8rem; margin: .1rem 0 0; } .rz-ley > span { display: inline-flex; align-items: center; gap: .3rem; }
.rz-ley .rz-i { width: 1.15rem; height: 1.15rem; font-size: .7rem; }
.rz-msg { background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: .5rem .75rem; font-size: .8rem; }
.rz-msg summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.rz-msg p { margin: .5rem 0 .1rem; line-height: 1.65; }
.rz-ley-ag { display: flex; flex-wrap: wrap; gap: .2rem .9rem; flex-basis: 100%; padding-left: 1.35rem; font-weight: 400; color: var(--muted); font-size: .74rem; }
.rz-ley-ag span { white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem; } .rz-ley-ag i { width: .7rem; height: .7rem; border-radius: 2px; background: color-mix(in srgb, var(--c) 28%, transparent); border-bottom: 2px solid var(--c); }
.rz-m { background: color-mix(in srgb, var(--c) 18%, transparent); color: inherit; border-bottom: 2px solid var(--c); padding: 0 .1rem; border-radius: 2px; cursor: help; }
.rz-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .82rem; }
.rz-p { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .45rem; align-items: start; }
.rz-i { width: 1.5rem; height: 1.5rem; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; color: var(--k, var(--muted)); background: color-mix(in srgb, var(--k, var(--muted)) 14%, transparent); flex: none; }
.rz-cita { --k: var(--time); } .rz-inferencia { --k: var(--warn); } .rz-regla { --k: var(--ok); } .rz-alerta { --k: var(--crit); } .rz-descarte { --k: var(--muted); }
.rz-privacidad { --k: var(--hogar); } .rz-incidencia { --k: var(--warn); } .rz-decision { --k: var(--primary); } .rz-dato { --k: var(--muted); }
.rz-p.rz-alerta > span:last-child { color: var(--crit); font-weight: 600; } .rz-p.rz-decision > span:last-child { font-weight: 600; }
.rz-q { background: var(--warn-bg); border-radius: 3px; padding: 0 .2rem; quotes: none; }
.rz-cod { font-family: ui-monospace, Menlo, monospace; font-size: .76rem; font-weight: 700; padding: 0 .25rem; border-radius: 3px; background: var(--ok-bg); color: var(--ok); }
.rz-cod.ko { background: var(--crit-bg); color: var(--crit); }
.rz-fl { color: var(--muted); font-weight: 700; }
.rz-vis { display: grid; gap: .35rem; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: .6rem .7rem; }
.rz-tit { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.rz-chips { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.rz-barra { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 2.6rem; gap: .5rem; align-items: center; font-size: .78rem; }
.rz-track { position: relative; height: .6rem; background: var(--bg); border-radius: 3px; }
.rz-track i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; }
.rz-track b { position: absolute; top: -.2rem; bottom: -.2rem; width: 2px; background: var(--text); opacity: .55; cursor: help; }
.rz-cr { margin: .2rem 0 0; padding-left: 1.1rem; display: grid; gap: .1rem; }
.rz-stack { display: flex; height: .7rem; border-radius: 3px; overflow: hidden; gap: 2px; }
.rz-stack i { display: block; min-width: 4px; font-size: 0; }
.rz-stack-ley { display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin: 0; } .rz-stack-ley span { display: inline-flex; align-items: center; gap: .3rem; }
.rz-stack-ley i { width: .65rem; height: .65rem; border-radius: 2px; display: inline-block; }
.rz-stack i.pill-ok, .rz-stack-ley i.pill-ok { background: var(--ok); } .rz-stack i.pill-time, .rz-stack-ley i.pill-time { background: var(--time); }
.rz-stack i.pill-warn, .rz-stack-ley i.pill-warn { background: var(--warn); } .rz-stack i.pill-review, .rz-stack-ley i.pill-review { background: var(--review); }
.rz-stack i.pill-muted, .rz-stack-ley i.pill-muted { background: var(--border); }
.rz-tok .t-in, .rz-stack-ley .t-in { background: var(--ag-reglas); } .rz-tok .t-out, .rz-stack-ley .t-out { background: color-mix(in srgb, var(--ag-reglas) 55%, var(--surface)); }
.rz-tok .t-raz, .rz-stack-ley .t-raz { background: var(--warn); }
.rz-sobre { color: var(--crit); font-weight: 700; }
.rz-campos { display: grid; gap: .2rem; }
.rz-campo { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr) 6.2rem; gap: .4rem; align-items: center; font-size: .76rem; padding: .25rem .4rem; border-radius: 4px; background: var(--bg); }
.rz-campo .k { color: var(--muted); } .rz-campo .v { overflow-wrap: anywhere; } .rz-campo.o-nulo .v { color: var(--muted); }
.rz-campo .pill { font-size: .64rem; padding: .08rem .35rem; justify-self: end; }
.rz-regla { cursor: help; }
.rz-inc { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: .4rem; background: var(--crit-bg); border-left: 3px solid var(--crit); padding: .45rem .55rem; font-size: .8rem; }
.rz-inc > .i { color: var(--crit); margin-top: .15rem; }
.rz-arbol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .15rem; }
.policy { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; padding: .1rem .45rem; border-radius: 5px; border: 1px solid var(--border); }
.policy.pass { color: var(--ok); } .policy.fail { color: var(--crit); background: var(--crit-bg); border-color: transparent; } .policy.na { color: var(--muted); }
.diff { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; } @media (max-width: 760px) { .diff { grid-template-columns: 1fr; } }
.diff .box h4 { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .4rem; }
.delta { font-weight: 700; } .delta.down { color: var(--ok); } .delta.up { color: var(--review); } .delta.same { color: var(--muted); }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
select, input[type="text"] { font: inherit; padding: .4rem .55rem; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); }
label.f { display: grid; gap: .2rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip { font: inherit; font-size: .78rem; font-weight: 600; padding: .25rem .65rem; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; }
.chip.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Niveles de autonomía */
.levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; } @media (max-width: 760px) { .levels { grid-template-columns: 1fr 1fr; } }
.level { border: 1px solid var(--border); border-radius: 5px; padding: .6rem .7rem; font-size: .8rem; display: grid; gap: .2rem; }
.level b { font-size: .95rem; display: flex; align-items: center; gap: .4rem; }
/* Niveles de autonomía: de rojo (L0 manual) a verde (L3 autónomo) */
.level { --lc: var(--muted); /* border-left: 4px solid var(--lc); */ }
.l0 { --lc: var(--crit); } .l1 { --lc: var(--review); } .l2 { --lc: var(--warn); } .l3 { --lc: var(--ok); }
.lvl { --lc: var(--muted); display: inline-grid; place-items: center; min-width: 2rem; height: 1.5rem; border-radius: 5px; font-weight: 800; font-size: .78rem; color: var(--lc); background: color-mix(in srgb, var(--lc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--lc) 40%, transparent); }

/* Histórico */
.timeline { display: grid; gap: 0; }
.day { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: .9rem 0 .4rem; border-bottom: 1px solid var(--border); }
.ev { display: grid; grid-template-columns: 58px 1.9rem 1fr auto; gap: .7rem; align-items: start; padding: .55rem 0; border-bottom: 1px solid var(--border); font-size: .84rem; }
.ev .t { color: var(--muted); font-variant-numeric: tabular-nums; padding-top: .15rem; }
.ev .ico { width: 1.7rem; height: 1.7rem; border-radius: 5px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.ev small { color: var(--muted); display: block; }
.foot { text-align: center; color: var(--muted); font-size: .78rem; padding: 0 1rem 2rem; }
.foot:empty { display: none; }
.topbar label.f { display: inline-flex; flex-direction: row; align-items: center; gap: .5rem; color: rgba(255,255,255,.85); }
@media (max-width: 600px) { .span { grid-template-columns: 1fr; gap: .2rem; } .span .r { text-align: left; } .alert { grid-template-columns: auto 1fr; } .kpi .v { font-size: 1.6rem; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ─── v2: panel de detalle fijo, listas colapsables, modales, guardrails, kill switch, leyendas interactivas ─── */
.detalle-fijo { position: sticky; top: calc(var(--top-h, 63px) + .5rem); z-index: 3; max-height: min(52vh, 520px); overflow: auto; box-shadow: 0 12px 28px rgba(10, 20, 50, .18); }
.detalle-fijo .card-head { position: sticky; top: 0; background: var(--surface); z-index: 1; margin: 0 0 .6rem; padding-bottom: .4rem; }
@media (max-width: 960px) { .detalle-fijo { position: static; max-height: none; box-shadow: var(--shadow); } }
.lista-colapsable > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-weight: 700; }
.lista-colapsable > summary::-webkit-details-marker { display: none; }
.lista-colapsable > summary::before { content: ''; width: .5rem; height: .5rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; margin-left: .2rem; }
.lista-colapsable[open] > summary::before { transform: rotate(45deg); }
.lista-colapsable > summary h2 { display: inline-flex; align-items: center; gap: .5rem; }
.agent { cursor: pointer; transition: opacity .15s, filter .15s; }
.agent:hover { border-color: var(--primary); }
.agent.is-off { filter: grayscale(1); opacity: .55; }
.agent.is-off:hover { opacity: .8; }
.switch { user-select: none; }
.gr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; font-weight: 700; color: var(--time); border-bottom: 1px dotted currentColor; cursor: help; white-space: nowrap; }
.tip { max-width: 360px; white-space: normal; line-height: 1.35; }
.legend button { font: inherit; font-size: .78rem; color: var(--muted); background: none; border: 0; padding: .1rem .2rem; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; border-radius: 5px; }
.legend button:hover { background: var(--bg); color: var(--text); }
.legend button.off { opacity: .4; text-decoration: line-through; }
.legend button:focus-visible { outline: 2px solid var(--primary); }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; }
.bars i { display: block; width: 6px; min-height: 2px; background: var(--c, var(--primary)); border-radius: 2px 2px 0 0; opacity: .85; }
.sev { font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: var(--radius-pill); }
.sev-humano { background: var(--review-bg); color: var(--review); } .sev-degradar { background: var(--warn-bg); color: var(--warn); } .sev-marcar { background: var(--time-bg); color: var(--time); }
/* Modales */
.modal { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; padding: 0; width: min(1040px, 94vw); max-height: 90vh; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.modal::backdrop { background: rgba(10, 15, 30, .55); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--header); color: #fff; z-index: 1; }
.modal-head h2 { color: #fff; }
.modal-head .mono, .modal-head .muted { color: rgba(255,255,255,.85); }
.modal-head .btn { background: #fff; color: var(--header); border-color: #fff; }
.modal-head .btn:hover { background: #e2e6ee; }
.modal-head h2 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.modal-body { padding: 1rem 1.25rem 1.5rem; max-height: calc(90vh - 5rem); overflow-y: auto; display: grid; gap: 1rem; }
.modal-body > * { min-width: 0; }
.modal-body h3 { margin-bottom: .4rem; }
.explica { display: grid; gap: .5rem; }
.explica li { display: grid; grid-template-columns: 1.9rem 1fr; gap: .6rem; align-items: start; font-size: .84rem; }
.explica ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mini-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.mini-tl li { display: grid; grid-template-columns: 96px 1.7rem 1fr; gap: .6rem; align-items: start; font-size: .82rem; }
.mini-tl .t { color: var(--muted); font-variant-numeric: tabular-nums; }
.mini-tl .ico { width: 1.7rem; height: 1.7rem; border-radius: 5px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.mini-tl small { color: var(--muted); display: block; }
.kpi-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.kpi-mini .box b { display: block; font-size: 1.2rem; }
/* Ficha de agente: «Comportamiento según el modelo» muestra ~5-6 filas y hace scroll para el resto */
.tabla-compacta { max-height: 15rem; overflow-y: auto; }
.tabla-compacta thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
/* Ficha de agente: identidad y permisos */
.identidad th { width: 1%; padding-top: .62rem; }
.identidad td { white-space: normal; font-size: .85rem; }
.permisos { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.permisos li { display: flex; gap: .4rem; align-items: baseline; }
.permisos li.si svg { color: var(--ok); } .permisos li.no svg { color: var(--crit); }

/* Marco normativo: etiquetas junto al título de cada bloque (tooltip con el artículo) */
.normas { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin-left: .35rem; vertical-align: middle; }
.norma { font-size: .66rem; font-weight: 600; letter-spacing: 0; text-transform: none; padding: .12rem .45rem; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--bg); color: var(--muted); display: inline-flex; align-items: center; gap: .25rem; cursor: help; white-space: nowrap; }
.norma:hover { border-color: var(--primary); color: var(--primary); }

/* ─── Fichas modales de caps, guardrails y auditoría de autonomía; formularios de alta ─── */
/* «Agente de» se acorta a «Ag. de» (clase .short, la pone ajustarAgentes) cuando el nombre ocuparía dos líneas */
.agn .pre::before { content: 'Agente de '; }
.agn.short .pre::before { content: 'Ag. de '; }
.sub-head { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.modal.wide { width: min(1120px, 94vw); }
/* Todas las ventanas modales con las mismas dimensiones (también las de index.html): cabecera fija y cuerpo con scroll.
   Navegar a otro elemento o cambiar de pestaña no mueve ni redimensiona la ventana. */
.modal, .modal.wide { width: min(1120px, 94vw); height: min(780px, 88vh); max-height: 88vh; }
.modal[open] { display: flex; flex-direction: column; }
.modal > .modal-head { flex: none; }
.modal > .modal-body { flex: 1 1 auto; min-height: 0; max-height: none; align-content: start; }
.modal select, .modal input[type="text"], .modal input[type="number"] { width: 100%; }
input[type="number"] { font: inherit; padding: .4rem .55rem; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); }
input:focus-visible, select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
input[type="range"] { width: 100%; accent-color: var(--primary); }
tr.is-new td { animation: nuevo-fila 2.6s ease-out; }
@keyframes nuevo-fila { 0%, 60% { background: color-mix(in srgb, var(--primary) 16%, transparent); } 100% { background: transparent; } }

/* Ficha de un cap */
.cap-hero { display: grid; grid-template-columns: 250px 1fr; gap: 1.25rem; align-items: start; }
.cap-gauge { display: grid; gap: .3rem; justify-items: center; text-align: center; }
.gauge { width: 100%; max-width: 250px; height: auto; display: block; }
.gauge text { font-family: inherit; }
@media (max-width: 760px) { .cap-hero { grid-template-columns: 1fr; } }
.stackbar { display: flex; height: 16px; border-radius: 5px; overflow: hidden; gap: 2px; background: var(--bg); margin-bottom: .6rem; }
.stackbar i { display: block; min-width: 3px; }
.rel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.rel-list li { display: grid; grid-template-columns: minmax(150px, 1.4fr) 1fr 3rem auto auto auto; gap: .55rem; align-items: center; font-size: .82rem; }
.rel-list li .meter { margin: 0; }
.rel-list.simple li { display: block; }
.corr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.corr { display: grid; grid-template-columns: 1.9rem 1fr auto; gap: .7rem; align-items: start; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); }
.corr b { display: block; font-size: .86rem; } .corr small { display: block; color: var(--muted); margin-top: .1rem; font-size: .8rem; }
.corr-actions { justify-content: flex-end; max-width: 330px; }
@media (max-width: 760px) { .corr { grid-template-columns: 1.9rem 1fr; } .corr-actions { grid-column: 1 / -1; justify-content: flex-start; max-width: none; } .rel-list li { grid-template-columns: 1fr auto; } .rel-list li .meter { display: none; } }

/* Formularios de alta (nuevo cap / nuevo guardrail) */
.form-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 860px) { .form-grid { grid-template-columns: 1fr; } }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.form label.f { text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 700; color: var(--text); }
.form label.f[hidden] { display: none; }
.input-unit { display: flex; align-items: center; gap: .4rem; font-weight: 400; }
.input-unit b { color: var(--muted); min-width: 1.4rem; font-weight: 600; }
.inline-check { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: .5rem; font-size: .84rem; font-weight: 600; cursor: pointer; }
.form-err { grid-column: 1 / -1; color: var(--crit); background: var(--crit-bg); border-radius: 5px; padding: .45rem .7rem; font-size: .82rem; font-weight: 600; }
.preview { position: sticky; top: 0; display: grid; gap: .6rem; }
.preview h3 { margin: 0; }

/* Auditoría de un cambio de nivel */
.cambio-hero { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: stretch; }
.lvl-box { display: grid; gap: .3rem; justify-items: start; align-content: start; }
.lvl-box .lvl { font-size: 1.05rem; height: 2rem; min-width: 2.8rem; }
.cambio-arrow { display: grid; place-items: center; font-size: 1.6rem; color: var(--muted); font-weight: 800; }
@media (max-width: 760px) { .cambio-hero { grid-template-columns: 1fr; } .cambio-arrow { transform: rotate(90deg); } }
.crit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .84rem; }
.crit-list li { display: flex; align-items: center; gap: .55rem; padding: .4rem .6rem; border-radius: 5px; border: 1px solid var(--border); }
.crit-list li.ok { background: var(--ok-bg); } .crit-list li.ok span { color: var(--ok); }
.crit-list li.ko { background: var(--crit-bg); } .crit-list li.ko span { color: var(--crit); }

.sup-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.sup-grid .tabla-compacta { max-height: 16rem; }
.crit-list li.na { color: var(--muted); } .crit-list li.na span { color: var(--muted); }

/* Cabecera oscura de las modales: elementos que usan colores oscuros (iconos de agente, puntos, niveles, códigos) */
.modal-head .ag-ico { background: #fff; }
.modal-head .ag .dot { box-shadow: 0 0 0 2px #fff; }
.modal-head .lvl { background: #fff; }
.modal-head .gr { color: #fff; }

/* ─── Fichas de KPI del Resumen: gráficos animados ─── */
:root { --lc-0: var(--crit); --lc-1: var(--review); --lc-2: var(--warn); --lc-3: var(--ok); }
.chart-click { cursor: pointer; border-radius: 5px; transition: background .15s; }
.chart-click:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.chart-click:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ─── FinOps bajo los KPI: gasto por agente (A) y desglose por tipo de token (B) ─── */
#fin-graf { grid-template-columns: 1fr 1fr; }
@media (max-width: 960px) { #fin-graf { grid-template-columns: 1fr; } }
.fa-fila, .fp-fila { display: grid; grid-template-columns: 150px minmax(0, 1fr) 96px; gap: .3rem .8rem; align-items: center; padding: .55rem .5rem; border-top: 1px solid var(--border); }
.fa-fila:first-child, .fp-fila:first-child { border-top: 0; }
.fa-fila { cursor: pointer; border-radius: 5px; transition: background .15s; }
.fa-fila:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.fa-fila:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.fa-fila.sobre { background: var(--crit-bg); }
.fa-ag { display: flex; flex-direction: column; gap: .1rem; font-size: .84rem; font-weight: 600; min-width: 0; }
.fa-ag .small { font-weight: 400; }
.fa-crit { color: var(--crit); font-weight: 600; }
.fa-tot { display: flex; flex-direction: column; align-items: flex-end; font-size: .88rem; }
.fp-bar { display: flex; gap: 2px; height: 22px; }
.fp-bar i { display: flex; align-items: center; justify-content: center; min-width: 2px; height: 100%; border-radius: 3px; color: #fff; font-style: normal; font-size: .72rem; font-weight: 600; white-space: nowrap; overflow: hidden; transition: width .4s ease; }
.fp-tot { text-align: right; font-size: .88rem; }
.fp-por { grid-column: 2 / 4; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: -.15rem; }
.fp-reco { cursor: pointer; border: 0; font: inherit; font-size: .72rem; }
@media (max-width: 560px) { .fa-fila, .fp-fila { grid-template-columns: 1fr 80px; } .fa-fila svg, .fp-bar { grid-column: 1 / -1; grid-row: 2; } .fp-por { grid-column: 1 / -1; } }
.donut-wrap { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; align-items: center; }
.donut { width: 150px; height: 150px; }
.donut text { font-family: inherit; }
.donut-leg { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .82rem; }
.donut-leg li { display: grid; grid-template-columns: .7rem 1fr auto 2.6rem; gap: .5rem; align-items: center; }
.donut-leg i { width: .7rem; height: .7rem; border-radius: 3px; display: block; }
.donut-leg .small { text-align: right; }
@media (max-width: 560px) { .donut-wrap { grid-template-columns: 1fr; justify-items: center; } }
.lvl-list li { grid-template-columns: minmax(150px, 1.4fr) auto 1fr 1fr; }
.lvl-list .meter { --c: var(--lc-3); }

/* Animaciones (solo con .anim; se desactivan con «reducir movimiento») */
.anim .bar-v { transform-box: fill-box; transform-origin: bottom; animation: crece-v .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 40ms); }
.anim .bar-h { transform-box: fill-box; transform-origin: left; animation: crece-h .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.anim .line-a { stroke-dasharray: 1; animation: dibuja 1.5s ease-out both; }
.anim .area-a { animation: aparece 1.4s ease-out both; }
.anim .dot-a { transform-box: fill-box; transform-origin: center; animation: pop .45s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i, 0) * 55ms + 500ms); }
.anim .donut-seg { animation: anillo 1.1s cubic-bezier(.3, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 120ms); }
.anim .gauge path:last-of-type { animation: aparece .8s ease-out both; }
.anim .meter > i { animation: crece-h 1s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; }
.pulse { position: relative; }
.pulse::after { content: ''; position: absolute; inset: 0; border-radius: 7px; border: 2px solid var(--crit); animation: latido 1.8s ease-out infinite; }
.anim .span .bar i { transform-origin: left; animation: crece-h .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
.anim .spark { animation: revela 1.2s ease-out both; }
@keyframes crece-v { from { transform: scaleY(0); } }
@keyframes crece-h { from { transform: scaleX(0); } }
@keyframes dibuja { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes revela { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes aparece { from { opacity: 0; } }
@keyframes pop { from { transform: scale(0); opacity: 0; } }
@keyframes anillo { from { stroke-dasharray: 0 999; } }
@keyframes latido { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pulse::after { animation: none; display: none; } }

/* ───────────── Termómetro de cumplimiento ───────────── */
.cmp-hero-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.4rem; align-items: center; }
.cmp-global { --c: var(--ok); width: 132px; height: 132px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: conic-gradient(var(--c) calc(var(--p, 0) * 1%), var(--bg) 0); position: relative; }
.cmp-global { background: color-mix(in srgb, var(--c) 10%, var(--surface)); border: 6px solid var(--c); }
.cmp-global .v { font-size: 2.4rem; font-weight: 800; color: var(--c); line-height: 1; }
.cmp-global .v small { font-size: 1.1rem; }
.cmp-global .l { font-size: .68rem; color: var(--muted); max-width: 90px; margin: .2rem auto 0; line-height: 1.2; }
.cmp-hero-txt h2 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: 1.15rem; margin-bottom: .35rem; }
.cmp-hero-txt p { max-width: 75ch; }
.cmp-aviso { margin-top: .9rem; padding-top: .7rem; border-top: 1px dashed var(--border); display: flex; gap: .4rem; align-items: flex-start; }
.cmp-termos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.termo { font: inherit; color: inherit; text-align: left; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: .9rem; align-items: center; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.termo:hover { border-color: var(--primary); }
.termo.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.termo:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.termo-svg { width: 48px; height: 180px; }
@media (prefers-reduced-motion: no-preference) { .termo-fill { animation: termo-sube .9s ease-out; transform-origin: bottom; transform-box: fill-box; } }
@keyframes termo-sube { from { transform: scaleY(0); } }
.termo-txt { display: grid; gap: .25rem; }
.termo-pct { font-size: 1.9rem; font-weight: 800; line-height: 1; }
.termo-cuenta { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; margin-top: .3rem; }
.cmp-tabla td.wrap { min-width: 180px; }
.cmp-tabla td:nth-child(2) { white-space: normal; min-width: 140px; }
.ciclo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; counter-reset: paso; }
.ciclo-paso { position: relative; display: grid; gap: .35rem; align-content: start; padding: .8rem .85rem; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); }
.ciclo-n { position: absolute; top: .55rem; right: .65rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--header); color: #fff; display: grid; place-items: center; font-size: .72rem; font-weight: 700; }
.ciclo-ico { width: 2rem; height: 2rem; border-radius: 5px; display: grid; place-items: center; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.ciclo-ico svg { width: 1.1rem; height: 1.1rem; }
.ciclo-cuando { font-size: .74rem; color: var(--muted); display: inline-flex; gap: .3rem; align-items: center; }
.eslabones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .35rem; font-size: .76rem; }
.eslabones li { display: flex; align-items: center; gap: .4rem; padding: .3rem .45rem; border-radius: 5px; border: 1px solid var(--border); border-left: 3px solid var(--ok); }
.eslabones li .muted { margin-left: auto; font-size: .7rem; }
.eslabones li.ko { border-left-color: var(--crit); background: var(--crit-bg); }
.eslabones li svg { color: var(--ok); } .eslabones li.ko svg { color: var(--crit); }
.seud { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.seud-col { display: grid; gap: .45rem; align-content: start; padding: .8rem; border: 1px solid var(--border); border-radius: 5px; }
.seud-col b { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.cmp-texto { font-size: .86rem; line-height: 1.85; padding: .7rem .8rem; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; }
.pii-ley { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .8rem; padding: 0; margin: .5rem 0 0; font-size: .76rem; }
.pii-ley li { display: inline-flex; align-items: center; gap: .35rem; }
#modal-cmp .modal-body { display: grid; gap: 1rem; }
@media (max-width: 1100px) { .cmp-termos, .ciclo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cmp-hero-main { grid-template-columns: 1fr; } .cmp-termos, .ciclo, .seud { grid-template-columns: 1fr; } }

/* ───────────── Knowledge bases ───────────── */
.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.kb { display: grid; gap: .55rem; align-content: start; cursor: pointer; border-top: 3px solid var(--ok); transition: border-color .12s, box-shadow .12s; }
.kb.kb-ambar { border-top-color: var(--warn); } .kb.kb-rojo { border-top-color: var(--crit); }
.kb:hover { box-shadow: 0 4px 14px rgba(10, 20, 50, .1); }
.kb:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.kb-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.kb-tit { display: grid; min-width: 0; }
.kb-tit b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-desc { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kb-meta { display: flex; flex-wrap: wrap; gap: .3rem .8rem; color: var(--muted); }
.kb-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.kb-spark { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.spark { width: 120px; height: 28px; flex: none; }
.kb-spark-grande .spark { width: 100%; height: 90px; }
.kb-motivos { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; font-size: .76rem; color: var(--warn); }
.kb-rojo .kb-motivos { color: var(--crit); }
.kb-motivos li { display: flex; gap: .3rem; align-items: flex-start; }
.kb-pie { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; padding-top: .45rem; border-top: 1px dashed var(--border); }
.kb-secs { margin-bottom: .9rem; }
.kb-sec { min-height: 220px; }
.kb-nota { margin-bottom: .8rem; display: flex; gap: .4rem; align-items: flex-start; border-color: var(--warn); }
.kv-tabla th { width: 36%; text-transform: none; letter-spacing: 0; font-size: .8rem; color: var(--muted); font-weight: 600; white-space: normal; }
.kv-tabla td { white-space: normal; }
.kb-top-lista { margin: .3rem 0 0; padding-left: 1.2rem; display: grid; gap: .3rem; font-size: .84rem; }
ul.kb-top-lista { list-style: none; padding-left: 0; }
.kb-acciones { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--border); display: grid; gap: .5rem; }
.kb-acc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: .8rem; }
tbody tr.is-sel td { background: var(--bg); }
.rub-form { display: grid; gap: 1rem; }
.rub-form .f input { width: 100%; }
.rub-fila { display: grid; gap: .4rem; margin-bottom: .4rem; align-items: center; }
.rub-crit { grid-template-columns: minmax(140px, 1fr) 80px minmax(200px, 2fr) auto; }
.rub-preg { grid-template-columns: minmax(200px, 2fr) 150px minmax(160px, 1.4fr) minmax(120px, 1fr) auto; }
.rub-fila input, .rub-fila select, .rub-form .f input { font: inherit; font-size: .84rem; padding: .4rem .55rem; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text); min-width: 0; }
.rub-fila input:focus, .rub-fila select:focus, .rub-form .f input:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
@media (max-width: 760px) { .rub-crit, .rub-preg { grid-template-columns: 1fr; } }

/* ───────────── Agentes: pestañas en cadena + ficha completa ───────────── */
.ag-tabs { display: flex; align-items: stretch; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; }
.ag-tab { --c: var(--primary); font: inherit; color: inherit; text-align: left; flex: 1 1 0; min-width: 160px; display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .85rem; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid transparent; border-radius: var(--radius); cursor: pointer; box-shadow: var(--shadow); transition: border-color .12s, box-shadow .12s; }
.ag-tab:hover { border-color: var(--c); }
.ag-tab.is-active { border-color: var(--c); border-top-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 6px 16px rgba(10, 20, 50, .1); }
.ag-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ag-tab-txt { display: grid; gap: .3rem; min-width: 0; flex: 1; }
.ag-tab-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-tab-txt .small { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.ag-pasa { flex: none; display: grid; justify-items: center; align-content: center; gap: .1rem; color: var(--muted); width: 58px; text-align: center; }
.ag-pasa svg { width: 1.1rem; height: 1.1rem; }
.ag-pasa small { font-size: .66rem; line-height: 1.15; }
.ag-ficha { display: grid; gap: 1.25rem; }
.ag-cab { --c: var(--primary); border-top: 4px solid var(--c); display: grid; gap: 1rem; }
.ag-cab-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: start; }
.ag-cab-top h2 { font-size: 1.2rem; }
.ag-ico-xl { width: 3rem; height: 3rem; }
.ag-ico-xl svg { width: 1.5rem; height: 1.5rem; }
.ag-cab .kpi-mini .box { display: grid; gap: .15rem; }
.ag-cab .kpi-mini .box b { font-size: 1.05rem; }
.ag-serie { display: flex; justify-content: space-between; align-items: center; gap: .8rem; }
.ag-serie .spark { width: 55%; height: 40px; }
.ag-kbs { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .84rem; }
.ag-kbs li { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .4rem .55rem; border: 1px solid var(--border); border-radius: 5px; cursor: pointer; }
.ag-kbs li:hover { border-color: var(--primary); }
.ag-contrato > summary { list-style: none; cursor: pointer; }
.ag-contrato > summary::-webkit-details-marker { display: none; }
.ag-contrato > summary h3 { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.ag-contrato > summary h3::before { content: '▸'; color: var(--muted); transition: transform .15s; }
.ag-contrato[open] > summary h3::before { transform: rotate(90deg); }
.ag-ficha h3 { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .5rem; }
@media (max-width: 760px) { .ag-pasa { display: none; } .ag-cab-top { grid-template-columns: auto 1fr; } .ag-cab-top .switch { grid-column: 1 / -1; } }

/* Modales de Knowledge bases, rúbrica y cumplimiento: tamaño fijo; cambiar de pestaña no mueve ni redimensiona la ventana */
#modal-kb, #modal-rub, #modal-cmp { width: min(1120px, 94vw); height: min(780px, 88vh); max-height: 88vh; }
#modal-kb[open], #modal-rub[open], #modal-cmp[open] { display: flex; flex-direction: column; }
#modal-kb .modal-head, #modal-rub .modal-head, #modal-cmp .modal-head { flex: none; }
#modal-rub .modal-body, #modal-cmp .modal-body { flex: 1 1 auto; min-height: 0; max-height: none; }
#modal-kb .modal-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow: hidden; display: flex; flex-direction: column; gap: 0; padding-bottom: 0; }
#modal-kb .kb-secs { flex: none; margin-bottom: .8rem; }
#modal-kb .kb-sec { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: .3rem; }
#modal-kb .kb-acciones { flex: none; margin-top: .6rem; padding: .7rem 0 1rem; background: var(--surface); }
#modal-kb .kb-acc-lista { max-height: 4.5rem; overflow-y: auto; }

/* ───────────── Inicio (landing) ───────────── */
.inicio-hero { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; flex-wrap: wrap; border-top: 4px solid var(--header); }
.inicio-hero h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.25rem; margin-bottom: .3rem; }
.inicio-hero p { color: var(--muted); }
.inicio-hero > div:first-child { flex: 1 1 auto; min-width: 0; }
.inicio-grupos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 1rem; }
.inicio-grupo h3 { font-size: .9rem; color: var(--text); margin-bottom: .15rem; }
.inicio-grupo-preg { color: var(--muted); font-size: .82rem; margin-bottom: .55rem; }
.inicio-fichas { display: grid; gap: .8rem; }
.inicio-ficha { --c: var(--ok); display: grid; gap: .45rem; align-content: start; cursor: pointer; border-left: 4px solid var(--c); transition: box-shadow .12s, border-color .12s, transform .12s; }
.inicio-ficha:hover { box-shadow: 0 6px 18px rgba(10, 20, 50, .12); transform: translateY(-1px); }
.inicio-ficha:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.inicio-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.inicio-top b { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sem { width: .7rem; height: .7rem; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.inicio-ficha > p { color: var(--muted); }
.inicio-cifras { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; font-size: .86rem; }
.inicio-cifras li:first-child { font-weight: 700; font-size: .95rem; }
.inicio-pie { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; padding-top: .4rem; border-top: 1px dashed var(--border); }
.inicio-pie .normas { margin-left: 0; }
.inicio-abrir { font-size: .8rem; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; }
@media (max-width: 1100px) { .inicio-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .inicio-grupos { grid-template-columns: 1fr; } }

/* ───────────── Resumen: cumplimiento, conocimiento y alertas enlazadas ───────────── */
.kpi-goto, .alert-link { cursor: pointer; }
.kpi-goto:hover { box-shadow: 0 4px 14px rgba(10, 20, 50, .1); }
.alert-link:hover { border-color: var(--primary); }
.alert-meta { text-align: right; white-space: nowrap; }
.res-termos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.2rem; }
.res-termo { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: .5rem; align-items: center; }
.res-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .84rem; }
.res-lista li { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.res-kb { cursor: pointer; padding: .3rem .4rem; border-radius: 5px; }
.res-kb:hover { background: var(--bg); }
.res-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: .8rem; }
.res-datos .box { display: grid; gap: .1rem; }
.res-datos .box b { font-size: 1.1rem; display: inline-flex; align-items: center; gap: .3rem; }
@media (max-width: 760px) { .res-termos, .res-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Resumen: la lista de alertas (todas las fuentes) no debe estirar la fila; scroll propio a la altura del gráfico */
#alerts { max-height: 400px; overflow-y: auto; padding-right: .25rem; }
/* Inicio: botón del Resumen e interruptor «Modo presentador» */
.inicio-acc { display: grid; gap: .55rem; justify-items: end; }
.inicio-pres { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.inicio-pres .switch { margin-left: 0; font-size: .8rem; font-weight: 600; cursor: pointer; }

/* Tarjetas de agente del Resumen: icono y nombre con protagonismo; detalles al pie en letra pequeña */
.agent { display: flex; flex-direction: column; gap: .6rem; }
.ag-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; }
.ag-ico-lg { width: 3rem; height: 3rem; border-radius: 8px; }
.ag-ico-lg svg { width: 1.6rem; height: 1.6rem; }
.ag-titulo { display: grid; min-width: 0; line-height: 1.15; }
.ag-eyebrow { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ag-nombre { font-size: 1.15rem; font-weight: 800; color: var(--text); }
.ag-head .switch { margin-left: 0; align-self: start; }
.ag-desc { font-size: .8rem; color: var(--muted); line-height: 1.35; margin: 0; }
.ag-det { margin-top: auto !important; padding-top: .6rem; border-top: 1px dashed var(--border); font-size: .72rem !important; gap: .15rem .6rem !important; }
.ag-det dt { color: var(--muted); }

/* Inicio: fichas con el icono y el nombre de la sección en grande (como las tarjetas de agente); detalles al pie en pequeño */
.inicio-ficha { display: flex; flex-direction: column; gap: .55rem; border-left: 4px solid var(--primary); }
.inicio-top { grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; }
.inicio-top .ag-nombre { font-size: 1.15rem; line-height: 1.2; }
.inicio-top .sem { align-self: start; margin-top: .3rem; box-shadow: 0 0 0 3px color-mix(in srgb, var(--s) 22%, transparent); }
.inicio-preg { font-size: .84rem; color: var(--muted); margin: 0; line-height: 1.35; }
.inicio-det { margin-top: auto; padding-top: .55rem; border-top: 1px dashed var(--border); display: grid; gap: .45rem; }
.inicio-det .inicio-cifras { font-size: .76rem; color: var(--muted); }
.inicio-det .inicio-cifras li:first-child { font-size: .84rem; color: var(--text); }
.inicio-det .inicio-pie { padding-top: 0; border-top: 0; }
.inicio-det .norma { font-size: .62rem; }
.inicio-fichas { grid-auto-rows: 1fr; }

.inicio-top .inicio-estado { align-self: start; font-size: .68rem; }
.inicio-grupos { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Knowledge bases: icono y nombre en grande arriba (título, explicación y estado); detalles al pie tras una línea de puntos */
.kb { border-top: 1px solid var(--border); border-left: 4px solid var(--primary); gap: .6rem; display: flex; flex-direction: column; }
.kb.kb-ambar, .kb.kb-rojo { border-top-color: var(--border); }
.kb-top { gap: .8rem; align-items: start; }
.kb-tit { gap: .15rem; }
.kb-tit .ag-nombre { font-size: 1.1rem; line-height: 1.2; white-space: normal; overflow: visible; }
.kb-desc { font-size: .82rem; -webkit-line-clamp: 3; }
.kb-det { margin-top: auto; padding-top: .7rem; border-top: 1px dashed var(--border); display: grid; gap: .5rem; font-size: .76rem; }
.kb-det .kb-meta, .kb-det .small, .kb-det .kb-motivos { font-size: .74rem; }
.kb-det .kb-pie { border-top: 0; padding-top: 0; }

/* Flechas de navegación entre elementos de una lista en las ventanas emergentes */
.mh-nav { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; margin-right: .5rem; flex: none; }
.mh-pos { color: rgba(255, 255, 255, .85); font-size: .8rem; white-space: nowrap; }
.mh-nav .btn { padding: .3rem .45rem; }
.mh-nav .btn:disabled { opacity: .45; cursor: default; }

/* Inicio: una cifra grande por ficha; sin la franja lateral (el estado lo da el punto o la etiqueta) */
.inicio-ficha { gap: .5rem; border-left: 1px solid var(--border); }
.inicio-top .ag-ico { width: 2.1rem; height: 2.1rem; border-radius: 6px; }
.inicio-top .ag-ico svg { width: 1.15rem; height: 1.15rem; }
.inicio-top .ag-nombre { font-size: 1rem; line-height: 1.2; white-space: normal; }
.inicio-ok { width: .6rem; height: .6rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); justify-self: end; }
.inicio-cifra { display: grid; gap: .1rem; }
.inicio-cifra b { font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.inicio-cifra span { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.inicio-ficha .inicio-pie { margin-top: auto; padding-top: .5rem; }
.inicio-ficha .norma { font-size: .62rem; }

/* ───────────── Medidas correctivas ───────────── */
.med-hero { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; }
.med-hero h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.2rem; margin-bottom: .3rem; }
.med-termo { --c: var(--ok); width: 84px; height: 84px; border-radius: 50%; border: 5px solid var(--c); background: color-mix(in srgb, var(--c) 10%, var(--surface)); display: grid; place-content: center; text-align: center; cursor: pointer; flex: none; transition: border-color .3s; }
.med-termo .v { font-size: 1.45rem; font-weight: 800; color: var(--c); line-height: 1; }
.med-termo .v small { font-size: .8rem; }
.med-termo .l { font-size: .62rem; color: var(--muted); }
.med-lista { display: grid; gap: .9rem; }
.med { border-left: 4px solid var(--primary); display: grid; gap: .45rem; cursor: pointer; }
.med.med-ok { opacity: .7; border-left-color: var(--ok); }
.med-cab { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.med-num { margin-left: auto; }
.med-tit { font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.med-alts { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: .6rem; margin-top: .55rem; padding-top: .7rem; border-top: 1px dashed var(--border); cursor: default; }
.med-alt { display: grid; gap: .25rem; align-content: start; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); font-size: .82rem; }
.med-alt.rec { border: 2px solid var(--primary); }
.med-alt.elegida { background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.med-alt b { font-size: .86rem; }
.med-alt .pill { justify-self: start; }
.med-imp { font-weight: 700; color: var(--ok); }
.med-sim { color: var(--time); }
.med-alt .row { margin-top: .3rem; gap: .35rem; }
.med-reabrir { justify-self: start; border: 0; background: none; color: var(--muted); cursor: pointer; font: inherit; font-size: .76rem; display: inline-flex; gap: .3rem; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.seg-btn { font: inherit; font-size: .78rem; font-weight: 600; padding: .3rem .65rem; background: var(--surface); color: var(--muted); border: 0; cursor: pointer; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn[aria-pressed="true"] { background: var(--primary); color: #fff; }
@media (max-width: 900px) { .med-alts { grid-template-columns: 1fr; } }

/* Agentes · índice de calidad (círculo) y barra por indicador */
.ag-q-ring { display: flex; align-items: center; gap: .8rem; margin: .2rem 0 .7rem; }
.ag-q-ring > div { display: flex; flex-direction: column; gap: .15rem; }
.ag-q-ring svg { flex: none; }
.ag-q-ring svg circle:last-of-type { transition: stroke-dasharray .6s ease; }
.ag-q-bar { height: 4px; border-radius: 2px; background: var(--border); margin-top: .3rem; max-width: 220px; overflow: hidden; }
.ag-q-bar i { display: block; height: 100%; background: var(--c); border-radius: 2px; }
.ag-q-tabla td { white-space: normal; }
.ag-q-tabla td.wrap { min-width: 0; }
.ag-q-tabla td:first-child { min-width: 9rem; }

/* FinOps · Alertas de coste: la alerta (qué pasó) enlaza con sus caps (la regla) y con la acción sugerida (qué hacer) */
.alerta-coste-det { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; margin-top: .4rem; }
.alerta-coste-det b.inl { display: inline; font-size: inherit; }
.cap-chip { font: inherit; font-size: .72rem; font-weight: 600; border: 0; cursor: pointer; }
.cap-chip:hover { filter: brightness(.95); text-decoration: underline; }
.alerta-coste.is-new { animation: nuevo-fila 2.6s ease-out; }

/* ─── Intervención humana (HITL) ─── */
.anim-vista { display: grid; gap: 1rem; }
.anim-vista > .card-head { margin-bottom: 0; }
.anim-vista h3 { margin-bottom: .4rem; }
.hitl-mec { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.hitl-mec .box { display: grid; gap: .35rem; align-content: start; }
.hitl-mec .box b { display: flex; align-items: center; gap: .4rem; font-size: .88rem; }

/* Knowledge bases: sin la franja lateral y más compactas (como las fichas de Inicio) */
.kb { border-left: 1px solid var(--border); gap: .45rem; padding: .9rem 1rem; }
.kb-top { gap: .6rem; align-items: center; }
.kb-top .ag-ico { width: 2.1rem; height: 2.1rem; border-radius: 6px; }
.kb-top .ag-ico svg { width: 1.15rem; height: 1.15rem; }
.kb-tit .ag-nombre { font-size: 1rem; }
.kb-desc { font-size: .8rem; -webkit-line-clamp: 2; }
.kb-det { padding-top: .5rem; gap: .35rem; }

/* Knowledge bases: icono arriba a la izquierda y estado arriba a la derecha; el bloque de detalles alineado entre tarjetas de la misma fila */
.kb-top { align-items: start; }
.kb-top > .pill { justify-self: end; }
.kb-grid { grid-auto-rows: auto; }
.kb { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: .45rem; }
.kb-det { display: contents; }
.kb-det .kb-meta { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--border); align-self: start; }
.kb-det .kb-pie { align-self: end; }