/* ============================================================
   Zengu Seguros · demo comercial DeltaSiete
   Mundo: "Carta de Riesgo" — cartografía topográfica (IGAC)
   Operate surface · code-led build
   ============================================================ */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
}

:root {
  /* --- Map sheet ground (cool grey-green, not cream) --- */
  --paper: #e7eae2;
  --paper-raised: #f3f5ef;
  --paper-sunken: #dde1d7;
  --paper-inset: #cfd5c9;

  /* --- Ink shell (deep pine) --- */
  --ink: #0f342b;
  --ink-700: #16463a;
  --ink-600: #1f5a49;
  --ink-500: #2f7561;
  --ink-300: #8fb3a4;

  /* --- Text --- */
  --text: #15231e;
  --text-2: #4b5c53;
  --text-3: #5b6a61;
  --on-ink: #eaf0ea;
  --on-ink-2: #a9c4ba;

  /* --- Rules & grid --- */
  --rule: #c3cbbd;
  --rule-strong: #a7b1a2;
  --grid: rgba(22, 70, 58, 0.045);
  --grid-strong: rgba(22, 70, 58, 0.09);

  /* --- Hypsometric (elevation) data scale: low → high --- */
  --h1: #21604a;
  --h2: #5f8a3e;
  --h3: #b09638;
  --h4: #c4702b;
  --h5: #a63d2c;

  /* --- State (on top of palette, meaning only) --- */
  --ok: #2b7a58;
  --warn: #b07d15;
  --warn-bg: #f2e6c2;
  --crit: #b23a2b;
  --crit-bg: #f0d9d3;
  --focus: #1d6f8c;

  /* --- Space scale (4px base) --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px;

  /* --- Type --- */
  --ui: "Archivo", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --fs-display: clamp(2.1rem, 1.3rem + 2.4vw, 3.4rem);
  --fs-h1: 1.5rem;
  --fs-h2: 1.1875rem;
  --fs-h3: 1rem;
  --fs-body: 0.9375rem;
  --fs-sm: 0.8125rem;
  --fs-xs: 0.6875rem;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 16px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--ui);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text);
  background: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ink-600); color: #fff; }

/* Browser surfaces themed from the palette */
* { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-300); background-clip: padding-box; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.num { font-family: var(--mono); font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: -0.02em; }

h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 650; }
h3 { font-size: var(--fs-h3); font-weight: 650; }
p { margin: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
}

/* ============================================================
   App shell
   ============================================================ */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }

.rail {
  background: var(--ink);
  color: var(--on-ink);
  padding: var(--s5) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  position: sticky; top: 0; height: 100vh;
  background-image: radial-gradient(140% 90% at 0% 0%, rgba(143,179,164,0.14), transparent 60%);
}

.brand { display: flex; align-items: center; gap: var(--s3); }
.brand-mark {
  width: 34px; height: 34px; flex: none;
  border-radius: 9px;
  background: var(--h3);
  display: grid; place-items: center;
  color: var(--ink);
}
.brand-name { font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; line-height: 1.1; }
.brand-sub { font-family: var(--mono); font-size: var(--fs-xs); color: var(--on-ink-2); letter-spacing: 0.08em; text-transform: uppercase; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label {
  font-family: var(--mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--on-ink-2); opacity: 0.7; padding: 0 var(--s3) var(--s2);
}
.nav-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s3);
  border-radius: 9px;
  color: var(--on-ink-2);
  text-decoration: none;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
  cursor: pointer;
}
.nav-item svg { flex: none; opacity: 0.9; }
.nav-item:hover { background: rgba(255,255,255,0.06); color: var(--on-ink); }
.nav-item[aria-current="page"] {
  background: var(--ink-600);
  color: #fff;
  border-color: rgba(255,255,255,0.14);
}
.nav-item .badge {
  margin-left: auto;
  font-family: var(--mono); font-size: var(--fs-xs);
  background: var(--h3); color: var(--ink);
  padding: 1px 7px; border-radius: 999px; font-weight: 600;
}
.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s3); }
.rail-user {
  display: flex; align-items: center; gap: var(--s3);
  padding-top: var(--s4); border-top: 1px solid rgba(255,255,255,0.12);
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--ink-500); color: #fff;
  display: grid; place-items: center; font-weight: 600; font-size: var(--fs-sm);
}
.rail-user .who { line-height: 1.25; }
.rail-user .who b { display: block; font-weight: 600; font-size: var(--fs-sm); color: var(--on-ink); }
.rail-user .who span { font-size: var(--fs-xs); color: var(--on-ink-2); }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s6);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--rule);
}
.topbar h1 { font-size: 1.25rem; }
.topbar .sub { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

.view { padding: var(--s6); display: flex; flex-direction: column; gap: var(--s5); max-width: 1440px; }

/* ============================================================
   Primitives
   ============================================================ */
.panel {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.panel-head {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: var(--s4) var(--s5) 0;
}
.panel-head h2 { font-size: var(--fs-h3); font-weight: 650; }
.panel-head .hint { font-size: var(--fs-sm); color: var(--text-2); margin-left: auto; }
.panel-body { padding: var(--s5); }
.panel-body.tight { padding: var(--s4); }

.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--ui); font-size: var(--fs-sm); font-weight: 600;
  padding: 8px 14px; border-radius: 9px;
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised); color: var(--text);
  cursor: pointer; text-decoration: none;
  transition: transform 140ms ease-out, background-color 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out;
}
.btn:hover { background: #fff; border-color: var(--ink-300); }
.btn:active { transform: scale(0.975); }
.btn svg { flex: none; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: var(--ink-700); border-color: var(--ink-700); }
.btn-danger { background: var(--crit); border-color: var(--crit); color: #fff; }
.btn-danger:hover { background: #9c2f22; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--paper-sunken); color: var(--text); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 5px 10px; font-size: var(--fs-xs); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-family: var(--mono); font-weight: 500;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--rule-strong); background: var(--paper);
  color: var(--text-2); letter-spacing: 0.02em;
  white-space: nowrap;
}
.chip.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 10%, var(--paper)); }
.chip.warn { color: #8a5f00; border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-bg); }
.chip.crit { color: #96291c; border-color: color-mix(in srgb, var(--crit) 45%, transparent); background: var(--crit-bg); }
.chip.solid { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* Controls */
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: var(--fs-xs); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }
select, input[type="text"], input[type="search"] {
  font-family: var(--ui); font-size: var(--fs-sm); color: var(--text);
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 8px; padding: 7px 10px;
  transition: border-color 140ms ease-out, box-shadow 140ms ease-out;
}
select { appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234b5c53' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
select:hover, input:hover { border-color: var(--ink-300); }
select:focus, input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); }
input { caret-color: var(--ink-600); }
select, input { color-scheme: light; }
::placeholder { color: var(--text-2); opacity: 1; }

.seg { display: inline-flex; background: var(--paper-sunken); border: 1px solid var(--rule); border-radius: 9px; padding: 2px; gap: 2px; }
.seg button {
  font-family: var(--ui); font-size: var(--fs-sm); font-weight: 500;
  border: none; background: transparent; color: var(--text-2);
  padding: 6px 12px; border-radius: 7px; cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--paper-raised); color: var(--text); font-weight: 600; border: 1px solid var(--rule); padding: 5px 11px; }

.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: var(--fs-sm); color: var(--text-2); user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track { width: 34px; height: 20px; border-radius: 999px; background: var(--paper-inset); position: relative; transition: background-color 180ms ease-out; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 200ms var(--ease-out); }
.switch input:checked + .track { background: var(--ink-600); }
.switch input:checked + .track::after { transform: translateX(14px); }
.switch input:focus-visible + .track { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 640px; }
.table th, .table td { text-align: left; padding: 10px var(--s4); border-bottom: 1px solid var(--rule); }
.table thead th {
  font-family: var(--mono); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-3); font-weight: 500;
  border-bottom: 1px solid var(--rule-strong); white-space: nowrap;
}
.table tbody tr { transition: background-color 140ms ease-out; }
.table tbody tr:hover { background: var(--paper-sunken); }
.table td.n, .table th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable:hover { color: var(--text); }
.table th .arrow { display: inline-block; width: 0; height: 0; margin-left: 5px; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: 0.35; }
.table th[aria-sort="ascending"] .arrow { border-bottom: 6px solid currentColor; opacity: 1; }
.table th[aria-sort="descending"] .arrow { border-top: 6px solid currentColor; opacity: 1; }
.row-crit { background: color-mix(in srgb, var(--crit) 7%, transparent); }
.row-crit:hover { background: color-mix(in srgb, var(--crit) 11%, transparent) !important; }

/* Grids */
.grid { display: grid; gap: var(--s5); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-7-5 { grid-template-columns: 1.5fr 1fr; }
.cols-5-7 { grid-template-columns: 1fr 1.5fr; }

/* ============================================================
   Signature: conversion field
   ============================================================ */
.field-card { display: flex; flex-direction: column; }
.field-grid { grid-template-columns: 340px 1fr; gap: var(--s5); align-items: center; margin-top: var(--s2); }
.funnel { width: 100%; height: auto; display: block; }
.funnel .band { transition: opacity 200ms ease-out; }
.funnel .band:hover { opacity: 0.92; }
.funnel .contour { fill: none; stroke: rgba(255,255,255,0.28); stroke-width: 1; }
.funnel .graticule { stroke: var(--grid-strong); stroke-width: 1; }
.datum { fill: none; stroke: var(--crit); stroke-width: 1.25; stroke-dasharray: 5 4; }
.datum-label { font-family: var(--mono); font-size: 9.5px; fill: var(--crit); letter-spacing: 0.04em; }

.field-head { display: flex; align-items: flex-end; gap: var(--s5); flex-wrap: wrap; }
.metric-lead .value { font-family: var(--mono); font-size: var(--fs-display); font-weight: 600; line-height: 0.95; }
.metric-lead .label { font-size: var(--fs-sm); color: var(--text-2); margin-top: 6px; }
.delta { font-family: var(--mono); font-size: var(--fs-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--crit); }

/* Alert panel */
.alert-card { border-color: color-mix(in srgb, var(--crit) 32%, var(--rule)); background: color-mix(in srgb, var(--crit) 5%, var(--paper-raised)); }
.alert-count { font-family: var(--mono); font-size: 2.6rem; font-weight: 600; line-height: 1; color: var(--crit); }
.age-bars { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
.age-row { display: grid; grid-template-columns: 62px 1fr 40px; align-items: center; gap: var(--s3); font-size: var(--fs-sm); }
.age-row .track { height: 8px; border-radius: 4px; background: var(--paper-inset); overflow: hidden; }
.age-row .track i { display: block; height: 100%; border-radius: 4px; transition: width 500ms var(--ease-out); }
.age-row .n { text-align: right; font-family: var(--mono); font-size: var(--fs-sm); }

/* Stat tiles (used sparingly, not the page scaffold) */
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .k { font-size: var(--fs-xs); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.stat .v { font-family: var(--mono); font-size: 1.5rem; font-weight: 600; }
.stat .d { font-size: var(--fs-xs); color: var(--text-2); }

/* Chart helpers */
.legend { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: var(--fs-xs); color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.axis-label { font-family: var(--mono); font-size: 10.5px; fill: var(--text-3); }
.ridge-label { font-family: var(--ui); font-size: 12px; fill: var(--text); }

/* ============================================================
   Agente IA
   ============================================================ */
.agent-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--s5); align-items: start; }
.chat { display: flex; flex-direction: column; height: 620px; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--rule); }
.chat-head .who b { display: block; font-size: var(--fs-sm); font-weight: 650; }
.chat-head .who span { font-size: var(--fs-xs); color: var(--text-2); }
.chat-stream { flex: 1; overflow-y: auto; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.chat-stream > * { flex: 0 0 auto; }
.msg { max-width: 82%; padding: 10px 13px; border-radius: 12px; font-size: var(--fs-sm); line-height: 1.45; }
.msg.bot { align-self: flex-start; background: var(--paper-raised); border: 1px solid var(--rule); border-bottom-left-radius: 4px; }
.msg.user { align-self: flex-end; background: var(--ink); color: var(--on-ink); border-bottom-right-radius: 4px; }
.msg .meta { font-family: var(--mono); font-size: 10px; color: var(--text-3); margin-top: 5px; display: block; }
.msg.user .meta { color: var(--on-ink-2); }
.typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: blink 1.2s infinite; }
.typing i:nth-child(2){ animation-delay: .15s } .typing i:nth-child(3){ animation-delay: .3s }
@keyframes blink { 0%,60%,100%{opacity:.3} 30%{opacity:1} }

.tool-call {
  align-self: flex-start; max-width: 92%;
  border: 1px solid var(--rule-strong); border-radius: 10px;
  background: var(--paper); overflow: hidden; width: 100%;
}
.tool-call summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s3);
  padding: 9px 12px; font-size: var(--fs-sm);
}
.tool-call summary::-webkit-details-marker { display: none; }
.tool-call .fn { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-600); font-weight: 500; }
.tool-call .st { margin-left: auto; }
.tool-call pre {
  margin: 0; padding: 12px; border-top: 1px solid var(--rule);
  background: var(--ink); color: #cfe3da; font-family: var(--mono);
  font-size: 11.5px; line-height: 1.6; overflow-x: auto;
}
.tool-call pre .k { color: #8fb3a4; }
.tool-call pre .s { color: #d8b26a; }
.chat-input { display: flex; gap: var(--s3); padding: var(--s4) var(--s5); border-top: 1px solid var(--rule); background: var(--paper-raised); }
.chat-input input { flex: 1; }

.case-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5) var(--s3); border-bottom: 1px solid var(--rule); }
.case-id { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-3); }
.steps { display: flex; flex-direction: column; gap: 0; padding: var(--s4) var(--s5); }
.step { display: grid; grid-template-columns: 26px 1fr; gap: var(--s3); position: relative; padding-bottom: var(--s4); }
.step:last-child { padding-bottom: 0; }
.step:not(:last-child)::before { content: ""; position: absolute; left: 12.5px; top: 22px; bottom: 4px; width: 1px; background: var(--rule); }
.step .mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--text-3); font-family: var(--mono); font-size: 11px; z-index: 1; }
.step.done .mark { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.step.active .mark { background: var(--h3); border-color: var(--h3); color: var(--ink); font-weight: 700; }
.step .body b { font-size: var(--fs-sm); font-weight: 600; }
.step .body span { display: block; font-size: var(--fs-xs); color: var(--text-2); margin-top: 1px; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4); padding: var(--s4) var(--s5); border-top: 1px dashed var(--rule); }
.kv .pair .k { font-size: var(--fs-xs); color: var(--text-3); }
.kv .pair .v { font-size: var(--fs-sm); font-weight: 500; }
.sarlaft-flag { padding: var(--s4) var(--s5); border-top: 1px solid var(--rule); }

/* ============================================================
   Comparativo
   ============================================================ */
.cmp-wrap { overflow-x: auto; }
.cmp { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 820px; font-size: var(--fs-sm); }
.cmp th, .cmp td { padding: 11px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.cmp thead th { position: sticky; top: 0; background: var(--paper-raised); z-index: 2; border-bottom: 1px solid var(--rule-strong); }
.cmp .criterio { font-weight: 500; color: var(--text-2); width: 30%; }
.cmp thead .ins { font-weight: 650; font-size: var(--fs-body); }
.cmp thead th small { display: block; font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-3); font-weight: 400; margin-top: 2px; }
.cmp .group td { background: var(--paper-sunken); font-family: var(--mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }
.cmp col.reco, .cmp td.reco, .cmp th.reco { background: color-mix(in srgb, var(--h3) 12%, var(--paper-raised)); }
.cmp thead th.reco { box-shadow: inset 0 3px 0 var(--h3); }
.cmp td.n { text-align: right; font-family: var(--mono); }
.cmp .best { color: var(--ok); font-weight: 600; }
.cmp .no { color: var(--text-3); }
.cmp tr:hover td:not(.group) { background: color-mix(in srgb, var(--ink-600) 5%, var(--paper-raised)); }
.cmp tr:hover td.reco { background: color-mix(in srgb, var(--h3) 18%, var(--paper-raised)); }
.reco-tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; background: var(--h3); color: var(--ink); padding: 2px 7px; border-radius: 999px; font-weight: 600; }
.coverage-profile { display: block; margin-top: var(--s2); }

/* ============================================================
   Outbound
   ============================================================ */
.lead-cell { display: flex; align-items: center; gap: var(--s3); }
.lead-cell .who b { display: block; font-weight: 600; }
.lead-cell .who span { font-size: var(--fs-xs); color: var(--text-2); }
.seq { display: inline-flex; align-items: center; gap: 4px; }
.seq i { width: 18px; height: 4px; border-radius: 2px; background: var(--paper-inset); }
.seq i.on { background: var(--ink-600); }
.seq i.now { background: var(--h3); }

/* ============================================================
   Overlays: toast + popover
   ============================================================ */
.toast-stack { position: fixed; right: var(--s6); bottom: var(--s6); z-index: 60; display: flex; flex-direction: column; gap: var(--s3); align-items: flex-end; }
.toast {
  display: flex; align-items: flex-start; gap: var(--s3);
  background: var(--ink); color: var(--on-ink);
  padding: var(--s4); border-radius: var(--r-md);
  box-shadow: 0 10px 24px -8px rgba(15,52,43,0.5), 0 2px 6px rgba(15,52,43,0.25);
  font-size: var(--fs-sm); max-width: 360px;
  transform-origin: bottom right;
  animation: toast-in 260ms var(--ease-out);
}
.toast.leaving { animation: toast-out 180ms var(--ease-out) forwards; }
.toast .t-title { font-weight: 650; }
.toast .t-body { color: var(--on-ink-2); margin-top: 2px; }
.toast svg { flex: none; margin-top: 1px; color: var(--h3); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(0.97); } }

.empty { text-align: center; padding: var(--s9) var(--s5); color: var(--text-2); display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.empty svg { color: var(--ink-300); }

/* Entrance choreography (one authored moment) */
.rise { opacity: 0; transform: translateY(10px); animation: rise 480ms var(--ease-out) forwards; }
.rise:nth-child(1){animation-delay:40ms} .rise:nth-child(2){animation-delay:110ms}
.rise:nth-child(3){animation-delay:180ms} .rise:nth-child(4){animation-delay:250ms}
@keyframes rise { to { opacity: 1; transform: none; } }

.view-enter { animation: view-in 340ms var(--ease-out); }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .rise { opacity: 1; transform: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .agent-layout, .cols-7-5, .cols-5-7, .cols-3, .cols-2, .field-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--s3); padding: var(--s3) var(--s4); }
  .rail .nav { flex-direction: row; flex-wrap: wrap; }
  .nav-label, .rail-user .who { display: none; }
  .rail-foot { margin: 0; margin-left: auto; }
  .rail-user { border: none; padding: 0; }
  .topbar { flex-wrap: wrap; padding: var(--s4); gap: var(--s3); }
  .topbar > div:first-child { flex: 1 1 100%; }
  .topbar .sub { max-width: none; }
  .topbar-actions { margin-left: 0; width: 100%; }
  .view { padding: var(--s4); }
  .chat { height: 520px; }
}

/* Print: the comparativo leaves as a clean sheet */
@media print {
  .rail, .topbar, .no-print { display: none !important; }
  body { background: #fff; background-image: none; }
  .app { display: block; }
  .panel { border-color: #999; }
  .cmp { min-width: 0; }
}