:root {
  /* ====================================================================
     Omniloy corporate identity — the blue palette (MAR-1475, Figma guide).
     The exact values omniweb ships on omniloy.com, so moving from the
     public site into the console does not break the brand.

     TWO blues, with an explicit split — this is the rule the whole file
     follows, so read it before adding a colour:
       --mark   #0783F0  the BRAND blue. Shapes only: active bars, focus
                         rings, dots, chart fills, hairline rules. It is
                         3.81:1 on white — enough for non-text elements,
                         NOT enough for text, nor to carry white text.
       --accent #0568C4  the WORKING blue (primary-600, same corporate
                         ramp). Everything that IS or CARRIES text: links,
                         the primary button, active labels. 5.55:1.
     -------------------------------------------------------------------- */

  /* Type — Lato signs the brand (it is the face of omniloy.com) and is used
     with restraint: logo mark, view titles, login. Schibsted Grotesk keeps
     carrying the dense UI, where its x-height reads better at 13px.
     JetBrains Mono for data/tokens/code. Tabular figures are the signature. */
  --font-brand: "Lato", "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ui: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Cool corporate base (the site sits on #F8FAFC over white). */
  --bg: #f2f6fb;
  --card: #ffffff;
  --line: #dde5f0;
  --line-strong: #c3d0e2;
  --ink: #071144;         /* corp-navy: the brand's ink */
  --muted: #44617f;       /* 6.44:1 on white */
  --muted-2: #5f7089;     /* 5.04:1 — darkened from the warm grey, which missed AA */

  /* Brand blue + working blue (see the split above). */
  --mark: #0783f0;        /* corp-blue */
  --accent: #0568c4;      /* primary-600 */
  --accent-ink: #ffffff;
  --accent-soft: #eaf4ff; /* primary-50 */
  --accent-line: #b6ddff; /* corp-sky */
  --navy: #071144;        /* corp-navy */
  --navy-press: #060f3c;  /* corp-press: the site's :active */
  --sky: #b6ddff;         /* corp-sky: hover fills — always with navy ink on top */

  /* Corporate lime. Same job as on the site: "not yet" badges only, never
     an action. Reserved here; no component uses it yet. */
  --lime: #c7d84a;
  --lime-ink: #44520f;

  /* Semantic, cooled to sit with the navy. All ≥4.5:1 on --card, on --bg,
     and on their own soft tint. */
  --success: #0b7a45;
  --success-soft: #e3f3ea;
  --warning: #a6560a;
  --warning-soft: #fbf0e0;
  --danger: #b3261e;
  --danger-soft: #fcebea;

  /* Back-compat aliases (legacy class names still reference these). */
  --blue: var(--accent);
  --blue-soft: var(--accent-soft);
  --green: var(--success);
  --green-soft: var(--success-soft);
  --amber: var(--warning);
  --amber-soft: var(--warning-soft);
  --red: var(--danger);
  --paper: var(--bg);
  --surface-2: var(--bg);
  --alert: var(--danger);
  --mono: var(--font-mono);
  --input-bg: var(--card);

  /* Radii. Consistent 8px; 6px for chips/badges/icon backings. */
  --r: 8px;
  --r-sm: 6px;

  /* Elevation: hairlines do the work; ONE soft shadow for overlays only.
     --glow is THE signature: the #0288FF halo the site leaves when it pins
     the nav on scroll. Here it marks focus and active state, nothing else. */
  --shadow: none;
  --shadow-overlay: 0 10px 30px rgba(7, 17, 68, .13), 0 1px 3px rgba(7, 17, 68, .08);
  --glow: 0 3px 19.7px -5px rgba(2, 136, 255, .45);
  --glow-ring: 0 0 0 3px rgba(2, 136, 255, .26);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 13px/1.45 var(--font-ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Mono for all technical/data strings: code, tokens, SIDs, ws-urls, prompt editor. */
.mono, code, pre, .wc-snippet, .prompt-editor, .text-input.mono { font-family: var(--font-mono); }
/* Tabular figures wherever numbers are compared in columns/metrics. */
.kpi .value, .donut .pct, table, .users-table, .report-table, .stat b, .wa-meta { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
body { display: flex; min-height: 100vh; }
.sep, .muted { color: var(--muted); font-weight: 400; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 14px; }
/* Brand mark: the Omniloy logo itself, bare — the same two-colour mark the
   site puts in its nav. Deliberately NO filled plate behind it: the mark
   already carries corp-blue in its own geometry, so a blue square would
   swallow half of it. */
.logo {
  width: 28px; height: 28px; flex: 0 0 auto;
  display: grid; place-items: center;
}
.logo svg { width: 100%; height: 100%; display: block; }
.avatar {
  width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: 0 0 auto;
}

/* ===== THE SIGNATURE · the corporate glow ================================
   omniloy.com pins its nav on scroll with
   `shadow-[0_3px_19.7px_-5px_rgba(2,136,255,0.45)]`. That halo is the one
   thing the site does that nobody else does, so it is what we carry over —
   and we spend it in a single place: saying where focus is and what is
   active. Focus used to be a 1px `box-shadow: inset`, easy to lose in a
   dense table; it is now a 2px ring with a halo, identical across the whole
   console, so the keyboard stops being a second-class citizen. */
:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Inline line-icon sizing (Lucide/Feather-style; stroke=currentColor). */
.ico { display: inline-flex; width: 18px; height: 18px; flex: 0 0 auto; }
.ico svg { width: 100%; height: 100%; display: block; }

/* ===== LEFT SIDEBAR NAV ===== */
.sidebar {
  width: 230px; flex: 0 0 230px; height: 100vh; position: sticky; top: 0;
  background: var(--card); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; z-index: 40;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 9px; padding: 16px 16px 14px;
  border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.sidebar-brand .brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sidebar-brand .brand-text strong { font-family: var(--font-brand); font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.sidebar-brand .brand-text small { font-size: 10.5px; color: var(--muted); }
.sidebar-burst { display: none; }

.tabs { flex: 1 1 auto; overflow-y: auto; padding: 12px 10px 14px; display: flex; flex-direction: column; gap: 16px; }
.nav-section { display: flex; flex-direction: column; gap: 1px; }
.nav-label {
  font-size: 11px; font-weight: 600; color: var(--muted-2); text-transform: uppercase;
  letter-spacing: .06em; padding: 0 10px 6px;
}
.tab {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--ink); padding: 0 10px;
  height: 34px; border-radius: var(--r); cursor: pointer; font-size: 13px; position: relative;
}
.tab .ico, .tab .nav-ico { color: var(--muted-2); flex: 0 0 auto; }
.tab .nav-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab:hover { background: var(--accent-soft); color: var(--ink); }
.tab.active {
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
  /* Square-edged bar in the brand blue — the same gesture that marks the
     active conversation in the inbox, so "active" is said the same way
     across the console. It is shape, not text, so the vivid blue belongs. */
  box-shadow: inset 3px 0 0 0 var(--mark);
}
.tab.active .ico, .tab.active .nav-ico { color: var(--accent); }
.tab:disabled { opacity: .45; cursor: not-allowed; }

/* One orchestrated, restrained load: the active view fades in, its cards lift. */
@media (prefers-reduced-motion: no-preference) {
  .view.active { animation: viewIn .24s cubic-bezier(.22,.61,.36,1); }
  .view.active .kpi-row .kpi,
  .view.active .grid-2 > *,
  .view.active .grid-3 > *,
  .view.active > .card { animation: cardIn .36s cubic-bezier(.22,.61,.36,1) backwards; }
  .view.active .kpi-row .kpi:nth-child(2),
  .view.active .grid-2 > *:nth-child(2),
  .view.active .grid-3 > *:nth-child(2) { animation-delay: 45ms; }
  .view.active .kpi-row .kpi:nth-child(3),
  .view.active .grid-3 > *:nth-child(3) { animation-delay: 90ms; }
  .view.active .kpi-row .kpi:nth-child(4) { animation-delay: 130ms; }
}
@keyframes viewIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.sidebar-principal {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-top: 1px solid var(--line);
}
.sidebar-principal .principal-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sidebar-principal .principal-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.sidebar-principal .role-badge { margin: 0; align-self: flex-start; }
.sidebar-principal #logout-btn { margin: 0; padding: 5px 10px; font-size: 12px; flex: 0 0 auto; }
.sidebar-principal #account-open-btn { margin: 0; flex: 0 0 auto; }

/* Required-field hint + marker shared by the create-user + Mi cuenta forms. */
.field-hint { display: block; font-size: 11.5px; margin-top: 4px; line-height: 1.35; }
.req-mark { color: var(--accent); font-weight: 600; }

/* Mobile top bar + scrim (hidden on desktop) */
.mobile-topbar { display: none; }
.sidebar-scrim { display: none; }

main {
  /* 5 · min-width:0 + overflow-x:hidden so no card/snippet can create a
     page-level horizontal scrollbar at any width. */
  flex: 1 1 auto; min-width: 0; padding: 24px 28px 40px; overflow-x: hidden;
}
main > .view { max-width: 1180px; }
/* The WhatsApp inbox is a live workspace — let it use the FULL width (no 1180
   cap) so the thread pane fills the available space dynamically. */
#view-whatsapp { max-width: none; }
.view { display: none; }
.view.active { display: block; }
.view-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.view-head h2 { font-family: var(--font-brand); font-size: 19px; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -.02em; line-height: 1.3; }
.view-head h2 span { font-weight: 600; }
.view-head > .muted { font-size: 12px; }

/* Segmented / pill toggle groups (date range, learning queue, report kind). */
.range, .lq-btn { display: flex; gap: 6px; }
.range-btn, .lq-btn, .rep-btn {
  border: 1px solid var(--line); background: var(--card); padding: 0 12px; height: 30px;
  border-radius: var(--r); cursor: pointer; color: var(--muted); font-size: 12px;
  display: inline-flex; align-items: center;
}
.range-btn:hover, .lq-btn:hover, .rep-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.range-btn.active, .lq-btn.active, .rep-btn.active {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); font-weight: 600;
}

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px; box-shadow: var(--shadow); min-width: 0;
}
.card h3 { margin: 0 0 12px; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.kpi .label { color: var(--muted); font-size: 12px; }
.kpi .value { font-size: 24px; font-weight: 600; margin: 6px 0 4px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpi .delta { font-size: 12px; }
.delta.up { color: var(--success); }
.delta.down { color: var(--danger); }
.value.good { color: var(--success); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 980px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .kpi-row { grid-template-columns: 1fr 1fr; } }
.center { text-align: center; }

.bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 10px; }
.bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bars .bar .fill { width: 60%; background: var(--mark); border-radius: 4px 4px 0 0; min-height: 3px; }
.bars .bar.peak .fill { background: var(--ink); }
.bars .bar .lbl { color: var(--muted); font-size: 11px; }

.langs .lang { display: grid; grid-template-columns: 36px 1fr 44px; gap: 10px; align-items: center; margin: 10px 0; }
.langs .track { background: var(--line); height: 6px; border-radius: 999px; overflow: hidden; }
.langs .track > span { display: block; height: 100%; background: var(--mark); }
.langs .lang.va .track > span { background: var(--ink); }
.langs .pct { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

.list .row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.list .row:last-child { border-bottom: 0; }
.tag-review { color: var(--danger); font-size: 12px; font-weight: 600; }
/* "revisar" is an action button; "en cola" marks a triaged gap. */
button.tag-review { background: none; border: 1px solid var(--danger); border-radius: var(--r-sm);
  padding: 3px 10px; cursor: pointer; }
button.tag-review:hover { background: var(--danger); color: #fff; }
button.tag-review:disabled { opacity: .6; cursor: default; }
.tag-queued { color: var(--success); font-size: 12px; font-weight: 600; }
.count { color: var(--muted); font-variant-numeric: tabular-nums; }

.donut { position: relative; width: 144px; height: 144px; margin: 4px auto 0; border-radius: 50%;
  display: grid; place-items: center; }
.donut .inner { position: absolute; inset: 18px; background: var(--card); border-radius: 50%; display: grid; place-items: center; }
.donut .pct { font-size: 22px; font-weight: 600; color: var(--success); }
.donut .cap { font-size: 11px; color: var(--muted); }

.learning-grid { display: grid; grid-template-columns: 1fr 260px; gap: 16px; }
.queue { display: flex; flex-direction: column; gap: 12px; }
.fb-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow); }
.fb-card .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.fb-card .cat { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-sm); border: 1px solid transparent; }
.badge.nueva { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.badge.validada { background: var(--warning-soft); color: var(--warning); }
.badge.resuelta { background: var(--success-soft); color: var(--success); }
.fb-card .q { font-weight: 600; margin-bottom: 4px; }
.fb-card .a, .fb-card .note { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.fb-card .neg { color: var(--danger); }
.auto-box { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; margin: 8px 0; }
.auto-box textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px; resize: vertical; font: inherit; background: #fff; }
.actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.toggle input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }

/* Buttons: primary = solid accent; default = white + hairline; ghost = text. */
.btn {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  padding: 0 12px; height: 32px; border-radius: var(--r); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center;
  gap: 6px; justify-content: center; line-height: 1;
  transition: background .12s, border-color .12s, box-shadow .16s;
}
.btn:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.btn:active { background: var(--sky); }
/* The site's exact gesture: blue → navy on hover, corp-press on press.
   The resting fill is primary-600 rather than corp-blue because corp-blue
   under white text only reaches 3.81:1; this way it lands at 5.55:1 without
   leaving the corporate ramp. The glow shows up on hover only. */
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  font-weight: 600;
}
.btn.primary:hover { background: var(--navy); border-color: var(--navy); box-shadow: var(--glow); }
.btn.primary:active { background: var(--navy-press); border-color: var(--navy-press); box-shadow: none; }
.btn.blue { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--bg); color: var(--ink); }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
/* Destructive controls keep their own press state. Without this, keyboard
   activation (Enter/Space, so no :hover) falls through to the generic
   `.btn:active` blue and the destructive warning drops out right before the
   action fires. Solid --danger, so pressing reads as more dangerous, not less. */
.btn.danger:active { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .ico { width: 16px; height: 16px; }

/* User drawer "danger zone": permanent delete, set apart from the save actions. */
.drawer-danger {
  margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.drawer-danger .drawer-label { color: var(--danger); }

.learning-stats .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow); }
.learning-stats .stat .n { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.learning-stats .stat .k { color: var(--muted); font-size: 12px; }
.empty { color: var(--muted); padding: 20px 0; font-size: 13px; }

/* Shared inputs */
.text-input, input[type="text"], input[type="email"], input[type="search"], input[type="number"], textarea, select {
  font: inherit;
}
.text-input { border: 1px solid var(--line); background: var(--card); padding: 0 11px; height: 32px; border-radius: var(--r); font-size: 13px; }
.text-input:focus, input:focus, textarea:focus, select:focus,
.text-input:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none; border-color: var(--mark); box-shadow: var(--glow-ring);
}
.note.good { color: var(--success); }

/* Document management */
.dropzone { background: var(--card); border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 16px; text-align: center; color: var(--muted); margin-bottom: 16px; font-size: 13px; }
.dropzone textarea { width: 100%; min-height: 60px; border: 1px solid var(--line); border-radius: var(--r); padding: 8px; font: inherit; margin: 8px 6px 0; resize: vertical; }
.dropzone .text-input { margin: 0 6px; }
.doc-table { display: flex; flex-direction: column; }
.doc-row { display: grid; grid-template-columns: 2fr 0.7fr 1fr 0.7fr 2fr; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.doc-row span:last-child { display: flex; gap: 6px; flex-wrap: wrap; }
.doc-row.head { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.doc-row:last-child { border-bottom: 0; }

/* Remediation plan + memory */
.remediation { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.rem-action { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; margin: 8px 0; }
.rem-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }

/* Document / chunk explorer */
.explorer { margin-top: 16px; }
.explorer .view-head { margin-bottom: 12px; }
.explorer-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; align-items: start; }
.node-tree { border: 1px solid var(--line); border-radius: var(--r); padding: 10px; max-height: 480px; overflow: auto; background: var(--bg); }
.node-tree ul.tree-level { list-style: none; margin: 0; padding-left: 14px; }
.node-tree > ul.tree-level { padding-left: 0; }
.node-item { margin: 2px 0; }
.node-link { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; font: inherit; text-align: left; padding: 4px 6px; border-radius: var(--r-sm); color: var(--ink); width: 100%; }
.node-link:hover { background: var(--accent-soft); }
.node-link.edited .node-title { font-weight: 600; }
.node-title { font-size: 13px; }
.node-summary { color: var(--muted); font-size: 12px; padding: 0 6px 4px 6px; }
.tag-edit { color: var(--accent); font-size: 11px; font-weight: 600; }
.node-detail { display: flex; flex-direction: column; gap: 12px; }
.node-content { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; min-height: 120px; }
.node-content-title { margin: 0 0 8px; font-size: 14px; }
.node-verbatim { white-space: pre-wrap; word-break: break-word; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; font-size: 13px; max-height: 320px; overflow: auto; }
.node-edit { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
.node-edit label { display: block; font-size: 12px; margin-bottom: 6px; }
.node-edit textarea { width: 100%; min-height: 70px; border: 1px solid var(--line); border-radius: var(--r); padding: 8px; font: inherit; resize: vertical; }

/* Versioned agent-prompt editor */
.prompt-editor { width: 100%; min-height: 320px; border: 1px solid var(--line); border-radius: var(--r); padding: 14px; font: 13px/1.6 var(--font-mono); resize: vertical; background: #fff; margin: 8px 0; }
.prompt-preview { white-space: pre-wrap; word-break: break-word; font-weight: 400; font-size: 12px; max-height: 140px; overflow: auto; color: var(--muted); }
.edit-sep { border: 0; border-top: 1px solid var(--line); margin: 14px 0 10px; }
.node-edit label em { font-style: italic; color: var(--muted); font-weight: 400; }

/* Analytics report */
.report { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; overflow: auto; max-height: 320px; font-size: 12px; }

/* Formatted report document (markdown → HTML) + PDF export */
.report-doc { font-size: 14px; line-height: 1.5; color: var(--ink); }
.report-doc h1 { font-size: 20px; margin: 0 0 4px; }
.report-doc h2 { font-size: 15px; margin: 16px 0 6px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.report-doc p { margin: 4px 0; }
.report-doc ul { margin: 4px 0 8px; padding-left: 18px; }
.report-doc li.lvl1 { margin-left: 14px; }
.report-doc li.lvl2 { margin-left: 28px; }
.report-table { border-collapse: collapse; margin: 6px 0 12px; width: 100%; font-size: 13px; }
.report-table th, .report-table td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; }
.report-table th { background: var(--bg); }

/* Analytics rebuild — distinguished incident stats */
.an-stat { display: flex; flex-direction: column; }
.an-stat-num {
  font-family: var(--font-mono); font-size: 30px; font-weight: 600; line-height: 1.1;
  color: var(--ink); font-variant-numeric: tabular-nums; margin: 2px 0 6px;
}
.an-stat-help { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* Report generators — explicit "Generar informe" tiles (not passive tabs) */
.an-reports-card { margin-top: 16px; }
.an-reports-intro { margin: 0 0 14px; font-size: 12.5px; }
.an-report-picker {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.an-report-tile {
  /* `height:auto` is load-bearing: these tiles also carry the legacy `.rep-btn`
     class (the click handler keys on it) which forces `height:30px` — without
     this override the tiles collapse and their content overflows onto the card
     below. */
  display: flex; flex-direction: column; align-items: stretch; gap: 7px;
  height: auto; text-align: left; padding: 15px 16px 14px; cursor: pointer;
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
/* A hairline indigo rule along the top edge — reads as "actionable surface",
   grows from invisible to full on hover/active (intentional, not decorative). */
.an-report-tile::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--mark); transform: scaleX(0); transform-origin: left;
  transition: transform .18s cubic-bezier(.22,.61,.36,1);
}
.an-report-tile:hover { border-color: var(--accent-line); box-shadow: var(--shadow); transform: translateY(-1px); }
.an-report-tile:hover::before { transform: scaleX(1); }
.an-report-tile:focus-visible { outline: none; border-color: var(--mark); box-shadow: var(--glow-ring); }
.an-report-tile.active { border-color: var(--accent); background: var(--accent-soft); }
.an-report-tile.active::before { transform: scaleX(1); }
.an-report-tile-title { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.an-report-tile-desc { font-size: 12px; color: var(--muted); line-height: 1.45; flex: 1; }
.an-report-tile-cta {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 12px; font-weight: 600; color: var(--accent);
}
.an-report-tile-arrow { transition: transform .14s ease; }
.an-report-tile:hover .an-report-tile-arrow { transform: translateX(3px); }

/* Generated report — full-width responsive preview */
.an-report-card { margin-top: 16px; }
.an-report-card .report-doc { max-width: none; width: 100%; max-height: none; overflow: visible; }
.an-report-metrics {
  display: grid; gap: 12px; margin: 4px 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.an-metric {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px; display: flex; flex-direction: column; gap: 4px;
  /* Staggered reveal when a report is generated — one orchestrated entrance
     rather than scattered motion. Honours reduced-motion below. */
  animation: anMetricIn .34s cubic-bezier(.22,.61,.36,1) both;
}
.an-metric:nth-child(2) { animation-delay: .04s; }
.an-metric:nth-child(3) { animation-delay: .08s; }
.an-metric:nth-child(4) { animation-delay: .12s; }
.an-metric:nth-child(5) { animation-delay: .16s; }
.an-metric:nth-child(6) { animation-delay: .20s; }
@keyframes anMetricIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .an-metric { animation: none; } .an-report-tile::before { transition: none; } }
.an-metric-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.an-metric-value { font-family: var(--font-mono); font-size: 24px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.an-explain { display: block; font-size: 11px; color: var(--muted); line-height: 1.45; margin-top: 2px; max-width: 34ch; }

@media print {
  body.printing-report .sidebar,
  body.printing-report .mobile-topbar,
  body.printing-report .view-head .range,
  body.printing-report #an-report-pdf,
  body.printing-report .view:not(#view-analytics),
  body.printing-report #view-analytics > *:not(#an-report-card),
  body.printing-report #an-report-card > .view-head { display: none !important; }
  body.printing-report #an-report-card { border: 0; box-shadow: none; }
  body.printing-report .report-doc { max-height: none; overflow: visible; border: 0; padding: 0; }
}

/* =======================================================================
   P5 · WhatsApp inbox — fixed two-pane layout (only inner lists scroll).
   Message tints: customer / AI / human. WCAG-AA contrast + visible focus.
   ======================================================================= */
:root {
  /* Three voices in the thread, three tints. The human takes the corporate
     blue (a diluted corp-sky): whoever writes on the company's behalf wears
     its colour. Every tint/ink pair clears AA (≥8:1). */
  --wa-cust: #eef2f7;  --wa-cust-ink: #1f2b40;
  --wa-ai: #e3f3ea;    --wa-ai-ink: #0b4f2f;
  --wa-human: #dcedfd; --wa-human-ink: #073a7a;
  --wa-brand: #1a6e46; --wa-brand-soft: #e3f3ea; --wa-brand-line: #c3e2d1;
  --wa-danger: #a81f16; --wa-danger-soft: #fdeceb; --wa-danger-line: #f5c9c5;
  --wa-amber: #9a4a08;  --wa-amber-soft: #fdf1e3;  --wa-amber-line: #f2d0a5;
  --wa-canvas: #f8fbff;
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wa-inbox-card { display: flex; flex-direction: column; gap: 10px; }
.wa-inbox {
  /* Fluid: a comfortable list rail + the thread filling the rest, and a height
     that grows with the viewport instead of a fixed 600px box. */
  display: grid; grid-template-columns: clamp(300px, 24vw, 380px) 1fr; gap: 14px;
  height: calc(100vh - 250px); min-height: 460px;
}
.wa-pane {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}

/* --- conversation list pane --- */
.wa-list-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.wa-list-head h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.wa-list-refresh { margin-left: auto; padding: 0 8px; height: 28px; }
.wa-list-refresh .ico { width: 16px; height: 16px; }
.wa-search { padding: 10px 12px 4px; position: relative; }
.wa-search .ico { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--muted-2); width: 16px; height: 16px; pointer-events: none; }
.wa-search input {
  width: 100%; padding: 8px 10px 8px 32px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--bg); font-size: 13px;
}
.wa-conv-list { list-style: none; margin: 0; padding: 6px 8px 8px; overflow: auto; min-height: 0; flex: 1; }
.wa-conv {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 10px;
  padding: 9px 10px; border-radius: var(--r); cursor: pointer;
}
.wa-conv:hover { background: var(--bg); }
/* 7 · Crisp active state: a clean indigo left bar + a barely-there tint, sharp
   corners on the bar — no soft lavender "halo"/blob (was: accent-soft fill +
   full rounded outline, which bled as a purple glow). */
.wa-conv.active {
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
  box-shadow: inset 3px 0 0 0 var(--mark);
}
.wa-conv:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wa-conv-ph {
  width: 36px; height: 36px; border-radius: 50%; background: #dfe8f4;
  display: grid; place-items: center; color: var(--muted); font-weight: 700; font-size: 12px;
}
.wa-conv-main { min-width: 0; }
.wa-conv-user { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The phone number shown as a muted secondary line beneath a contact's NAME
   (only rendered when a Twilio ProfileName is known). Hairline-quiet so the name
   leads. */
.wa-conv-sub {
  font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; margin-top: 1px;
}
.wa-conv-last {
  font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.wa-conv-meta { text-align: right; color: var(--muted); font-size: 11px; }
/* Pagination control. Sits BELOW the scrolling list (not inside it) so it stays
   reachable without scrolling to the bottom of a long inbox. `hidden` wins over
   the flex display it would otherwise inherit. */
.wa-list-more {
  margin: 4px 12px 8px; padding: 7px 10px; font-size: 12px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg);
}
.wa-list-more[hidden] { display: none; }
.wa-list-status { padding: 0 14px 10px; font-size: 11px; }

/* --- chat pane (fixed-height container; only .wa-messages scrolls) --- */
.wa-chat-pane { position: relative; }
.wa-empty { display: grid; place-items: center; height: 100%; padding: 20px; text-align: center; }
.wa-thread { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.wa-chat-head {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.wa-chat-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: #dfe8f4;
  display: grid; place-items: center; color: var(--muted); font-weight: 700; font-size: 13px;
}
.wa-chat-who { min-width: 0; position: relative; }
/* Title + pencil edit button share one row; the title can ellipsize, the button
   stays put. The number/sub line + popover sit beneath. */
.wa-chat-who { display: grid; grid-template-columns: minmax(0, auto) auto 1fr;
  align-items: center; column-gap: 6px; row-gap: 0; }
.wa-chat-number { font-weight: 600; font-size: 14px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wa-chat-sub { font-size: 12px; grid-column: 1 / -1; }
/* Pencil affordance: a quiet hairline icon button that warms to the accent on
   hover/focus. NO emoji — the inline SVG icon system renders the glyph. */
.wa-name-edit {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  padding: 0; border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--muted); cursor: pointer;
}
.wa-name-edit:hover { color: var(--accent); background: var(--accent-soft); }
.wa-name-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wa-name-edit svg { display: block; }
/* Inline name-editor popover anchored under the title. Matches the modal-card
   surface (warm paper, hairline, soft shadow). */
.wa-name-editor {
  grid-column: 1 / -1; margin-top: 6px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card, #fff);
  box-shadow: 0 6px 20px rgba(20, 20, 40, 0.08);
}
.wa-name-editor #whatsapp-name-input {
  flex: 1 1 200px; min-width: 160px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; color: inherit; background: var(--input-bg, #fff);
}
.wa-name-editor #whatsapp-name-input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.wa-name-editor-actions { display: inline-flex; gap: 6px; }
.wa-name-editor-error { flex: 1 1 100%; color: var(--danger); font-size: 12px; }
.wa-statebar { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.wa-takeover { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.wa-chip {
  display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-sm);
  padding: 4px 10px; font-size: 12px; font-weight: 600; border: 1px solid var(--line);
}
.wa-chip-active { background: var(--wa-brand-soft); border-color: var(--wa-brand-line); color: var(--wa-brand); }
.wa-chip-paused { background: var(--wa-amber-soft); border-color: var(--wa-amber-line); color: var(--wa-amber); }

/* P9.4 · read-only active-mode chip in the chat header. Styled as an OUTLINE label
   with a small mode-coloured dot — deliberately different from the SOLID takeover
   chip (.wa-chip-active) so "the mode" and "IA activa / en pausa" never read as the
   same green pill. */
.wa-mode-chip { background: transparent; border-color: var(--line); color: var(--ink); font-weight: 500; }
.wa-mode-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted-2); flex: 0 0 auto;
}
.wa-mode-chip-ai::before { background: var(--wa-brand); }
.wa-mode-chip-copilot { border-color: var(--accent-line); color: var(--accent); }
.wa-mode-chip-copilot::before { background: var(--mark); }
.wa-mode-chip-off { color: var(--muted); }
.wa-mode-chip-off::before { background: var(--muted-2); }

/* P9.6 · copilot suggestion tray (reply chips + tool cards). Sits above the
   composer; the composer stays usable while it is open. */
.wa-suggest-tray {
  border-top: 1px solid var(--line); background: var(--bg);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
  /* flex-shrink:0 so the flex:1 messages list yields space to the tray instead of
     squeezing it to its header (which clipped the chips behind the composer on a
     long thread — #250 review follow-up). max-height + overflow-y keeps it bounded
     and scrollable when there are many suggestions. */
  flex-shrink: 0; max-height: 38%; overflow-y: auto;
}
.wa-suggest-head { display: flex; align-items: center; justify-content: space-between; }
.wa-suggest-title { font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: .01em; }
.wa-suggest-close { color: var(--muted); }
.wa-suggest-body { display: flex; flex-direction: column; gap: 8px; }
.wa-suggest-chip {
  display: flex; gap: 8px; align-items: flex-start;
  border: 1px solid var(--accent-line); border-radius: var(--r-sm);
  background: #fff; padding: 6px 8px;
}
/* E19 (#282) · multi-line auto-grow textarea: grows to fit then scrolls (max-height
   mirrors the 220px cap applied by waAutoGrow in app.js). */
.wa-suggest-reply-text {
  flex: 1 1 auto; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 6px 8px; font-size: 13px; font-family: inherit;
  resize: none; overflow-y: auto; max-height: 220px; line-height: 1.4;
}
.wa-suggest-card {
  border: 1px solid var(--accent-line); border-radius: var(--r-sm);
  background: #fff; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px;
}
.wa-suggest-card-head { display: flex; align-items: center; gap: 8px; }
.wa-suggest-tool-name { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 12px; font-weight: 600; color: var(--ink); }
.wa-suggest-params { border-collapse: collapse; width: 100%; font-size: 12px; }
.wa-suggest-params td { border-bottom: 1px solid var(--line); padding: 3px 6px; vertical-align: top; }
.wa-suggest-pk { color: var(--muted); font-family: var(--mono, "JetBrains Mono", monospace); white-space: nowrap; }
.wa-suggest-pv { color: var(--ink); word-break: break-word; }
.wa-suggest-why { font-size: 12px; }
.wa-suggest-card-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* #323 · a webhook body is capped at 64 KiB, so clamp the rendered result and let
   it scroll instead of letting one JSON blob fill the whole tray. */
.wa-suggest-result { font-size: 12px; word-break: break-word; max-height: 120px; overflow-y: auto; }
.wa-suggest-result-error { color: var(--danger); }

/* P9.4 · 3-way AI-mode radio group in Ajustes. */
.wa-mode { border: 0; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 8px; }
.wa-mode > legend { font-size: 12px; font-weight: 600; padding: 0; margin-bottom: 2px; }
.wa-mode-opt {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.wa-mode-opt:hover { border-color: var(--accent-line); }
.wa-mode-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.wa-mode-opt input { margin-top: 3px; accent-color: var(--accent); }
.wa-mode-body { display: flex; flex-direction: column; gap: 2px; }
.wa-mode-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.wa-mode-desc { font-size: 12px; }

/* E19 (#281) · two-card AI-mode layout, each card nesting its own sub-settings. */
.wa-mode-cards { gap: 10px; }
.wa-mode-card {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px;
  transition: border-color .12s ease, background .12s ease;
}
.wa-mode-card:has(.wa-mode-opt input:checked) {
  border-color: var(--accent); background: var(--accent-soft);
}
.wa-mode-card .wa-mode-opt { border: 0; background: transparent; }
.wa-mode-sub {
  display: flex; flex-direction: column; gap: 6px;
  margin: 2px 0 6px 30px; padding-top: 4px;
}
/* Dim the sub-settings of the mode that is NOT selected so it reads as inactive. */
.wa-mode-card:not(:has(.wa-mode-opt input:checked)) .wa-mode-sub { opacity: .55; }

.wa-messages {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 16px 8px;
  display: flex; flex-direction: column; gap: 10px; background: var(--wa-canvas);
}
.wa-messages:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wa-day {
  align-self: center; background: #e6edf7; color: var(--muted); font-size: 11px;
  padding: 3px 10px; border-radius: var(--r-sm); margin: 4px 0;
}
.wa-msg {
  max-width: 74%; padding: 9px 12px; border-radius: var(--r); border: 1px solid transparent;
  position: relative;
}
.wa-msg-lbl { font-size: 11px; font-weight: 700; opacity: .8; margin-bottom: 2px; }
.wa-msg-body { white-space: pre-wrap; word-break: break-word; }
.wa-msg-time { font-size: 11px; color: var(--muted); margin-top: 4px; text-align: right; }
.wa-msg.wa-cust { align-self: flex-start; background: var(--wa-cust); color: var(--wa-cust-ink); border-bottom-left-radius: 4px; }
.wa-msg.wa-ai { align-self: flex-end; background: var(--wa-ai); color: var(--wa-ai-ink); border-bottom-right-radius: 4px; }
.wa-msg.wa-human { align-self: flex-end; background: var(--wa-human); color: var(--wa-human-ink); border-bottom-right-radius: 4px; }
.wa-msg img.wa-media {
  width: 200px; max-width: 100%; border-radius: var(--r); display: block; margin: 4px 0;
  border: 1px solid rgba(0, 0, 0, .08); background: #fff;
}
.wa-msg audio.wa-media { display: block; margin: 4px 0; max-width: 100%; }

/* P9.3 · AI action timeline step — RIGHT-aligned on the AI side (align-self:
   flex-end), hairline + muted so it never reads as a customer message. Inline
   line icon, JetBrains Mono label, NO emoji. Institutional-Modernist tokens. */
.wa-action {
  align-self: flex-end; max-width: 74%;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px; margin: 1px 0;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--muted);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.3;
}
.wa-action .wa-action-ico { display: inline-flex; color: var(--accent); opacity: .85; }
.wa-action .wa-action-ico svg { width: 14px; height: 14px; }
.wa-action-lbl { color: var(--ink); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-action-time { color: var(--muted); font-size: 10px; margin-left: 2px; }
.wa-action.wa-action-error { border-color: var(--accent-line); }
.wa-action.wa-action-error .wa-action-ico { color: var(--danger); }

/* P9.3 · decoupled enter/exit animation primitive (anim.js). ~165ms, ease-out
   in / ease-in out, fade + small translate + slight scale. prefers-reduced-motion
   collapses to instant (no transition). Reusable beyond the inbox (P9.6 tray). */
.wa-anim-enter { opacity: 0; transform: translateY(4px) scale(.98); }
.wa-anim-enter-active {
  opacity: 1; transform: translateY(0) scale(1);
  transition: opacity 165ms ease-out, transform 165ms ease-out;
}
.wa-anim-exit { opacity: 1; transform: translateY(0) scale(1); }
.wa-anim-exit-active {
  opacity: 0; transform: translateY(4px) scale(.98);
  transition: opacity 165ms ease-in, transform 165ms ease-in;
}
@media (prefers-reduced-motion: reduce) {
  .wa-anim-enter, .wa-anim-enter-active,
  .wa-anim-exit, .wa-anim-exit-active {
    transition: none !important; transform: none !important; opacity: 1 !important;
  }
}

/* Media loading: a sized skeleton so the bubble keeps its space while the (often
   slow) /whatsapp/media proxy resolves. A pending img/audio is collapsed until
   its load/metadata fires, then swapped in for the skeleton. */
.wa-media-wrap { position: relative; margin: 4px 0; width: 200px; max-width: 100%; }
.wa-media-pending { display: none; }
.wa-media-skel {
  width: 100%; height: 140px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--bg); overflow: hidden;
  position: relative;
}
/* A restrained left-to-right sheen at low opacity (warm paper tones, no bright
   gradient). Reduced-motion users get the static muted placeholder. */
@media (prefers-reduced-motion: no-preference) {
  .wa-media-skel::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(
      100deg,
      transparent 30%,
      rgba(255, 255, 255, .45) 50%,
      transparent 70%
    );
    transform: translateX(-100%);
    animation: waShimmer 1.4s ease-in-out infinite;
  }
}
@keyframes waShimmer { to { transform: translateX(100%); } }
/* Tidy inline card for failed/expired/502 media — no broken-image glyph. */
.wa-media-fail {
  margin: 4px 0; padding: 9px 12px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--bg);
  color: var(--muted); font-size: 12px;
}

/* Image thumbnail = a button that opens the lightbox. Reset to a bare box so the
   thumbnail looks exactly as before; the global :focus-visible ring marks it for
   the keyboard, cursor + a small magnifier chip say "this enlarges". Disabled
   (and chip-less) while the image is still loading. */
.wa-media-zoom {
  position: relative; display: block; width: 100%; padding: 0; margin: 0;
  border: 0; border-radius: var(--r); background: transparent; color: inherit;
  font: inherit; cursor: zoom-in;
}
.wa-media-zoom:disabled { cursor: default; }
.wa-msg .wa-media-zoom img.wa-media { margin: 0; transition: filter .12s; }
.wa-media-zoom:hover img.wa-media { filter: brightness(.94); }
.wa-media-zoom-badge {
  position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: var(--r-sm);
  background: rgba(7, 17, 68, .64); color: #fff; pointer-events: none;
}
.wa-media-zoom-badge svg { width: 14px; height: 14px; display: block; }
.wa-media-zoom:disabled .wa-media-zoom-badge { display: none; }

/* The lightbox: ONE fixed overlay on the corp navy, near-opaque so the image is
   the only thing to look at. The stage fits the image to the viewport; with
   .wa-lightbox-natural it shows natural pixels and scrolls. `margin: auto` (not
   justify/align centre) centres a small image WITHOUT making the top-left of a
   big one unreachable by scrolling. */
.wa-lightbox {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column;
  background: rgba(6, 15, 60, .96);
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
           env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}
.wa-lightbox:focus { outline: none; } /* focus lands on the dialog only as a fallback */
.wa-lightbox-bar {
  flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 14px; color: #fff;
}
.wa-lightbox-caption {
  flex: 1 1 12ch; min-width: 0; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-lightbox-bar .btn { height: 36px; text-decoration: none; }
.wa-lightbox-zoom[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.wa-lightbox-hint { font-size: 12px; color: #d6e3f5; }
.wa-lightbox-stage {
  flex: 1 1 auto; min-height: 0; display: flex;
  overflow: auto; overscroll-behavior: contain; padding: 0 16px 16px;
}
.wa-lightbox-stage:focus-visible { outline-offset: -2px; }
.wa-lightbox-img {
  flex: 0 0 auto; margin: auto; display: block;
  max-width: 100%; max-height: 100%;
  background: #fff; border-radius: var(--r-sm); box-shadow: var(--shadow-overlay);
  cursor: zoom-in;
}
.wa-lightbox-natural .wa-lightbox-img { max-width: none; max-height: none; cursor: zoom-out; }
.wa-lightbox-fail { margin: auto; color: #fff; font-size: 13px; }
body.wa-lightbox-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .wa-lightbox:not([hidden]) { animation: waLightboxIn .16s ease-out; }
}
@keyframes waLightboxIn { from { opacity: 0; } to { opacity: 1; } }
/* Phones: icon-only controls (the label stays as the accessible name) with
   40px targets, so the bar stays one row and the image keeps the screen. */
@media (max-width: 560px) {
  .wa-lightbox-bar { padding: 8px 10px; gap: 6px; }
  .wa-lightbox-bar .btn { width: 40px; height: 40px; padding: 0; }
  .wa-lightbox-lbl {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .wa-lightbox-stage { padding: 0 8px 8px; }
}

.wa-error-slot {
  flex: 0 0 auto; margin: 0 16px 8px; background: var(--wa-danger-soft);
  border: 1px solid var(--wa-danger-line); color: var(--wa-danger); border-radius: var(--r);
  padding: 8px 12px; font-size: 12px; display: flex; gap: 10px; align-items: center;
}
.wa-error-slot .wa-retry {
  color: var(--wa-danger); font-weight: 700; text-decoration: underline; cursor: pointer;
  background: none; border: 0; padding: 0; font-size: 12px;
}
.wa-error-slot .wa-retry:focus-visible { outline: 2px solid var(--wa-danger); outline-offset: 2px; }

.wa-composer {
  flex: 0 0 auto; border-top: 1px solid var(--line); padding: 10px 12px;
  display: flex; align-items: flex-start; gap: 10px; background: #fff;
}
.wa-attach { display: flex; gap: 6px; padding-top: 4px; }
.wa-iconbtn {
  width: 34px; height: 34px; border-radius: var(--r); border: 1px solid var(--line);
  background: #fff; display: grid; place-items: center; color: var(--muted); cursor: pointer;
}
.wa-iconbtn .ico { width: 18px; height: 18px; }
.wa-iconbtn:hover { background: var(--bg); color: var(--ink); }
.wa-iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wa-iconbtn.armed { background: var(--wa-brand-soft); color: var(--wa-brand); border-color: var(--wa-brand-line); }
.wa-composer-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wa-composer-row { display: flex; align-items: flex-end; gap: 8px; }
.wa-agent-name { max-width: 140px; }
/* Multi-line composer: auto-grows via JS up to max-height, then scrolls. */
#whatsapp-reply-body {
  flex: 1; min-width: 120px;
  padding: 7px 11px; min-height: 34px; max-height: 140px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg);
  font: inherit; line-height: 1.4; resize: none; overflow-y: auto;
}
.wa-composer-row .btn.primary { flex: 0 0 auto; }
.wa-attach-chip {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 4px 8px; font-size: 12px;
}
.wa-attach-remove { border: 0; background: none; cursor: pointer; color: var(--muted); display: inline-flex; }
.wa-reply-status, .wa-takeover-status { font-size: 11px; }
.wa-reply-disabled { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); }

.wa-legend { display: flex; gap: 14px; align-items: center; font-size: 11px; }
.wa-legend-key { display: inline-flex; align-items: center; gap: 6px; }
.wa-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.wa-sw-cust { background: var(--wa-cust); }
.wa-sw-ai { background: var(--wa-ai); }
.wa-sw-human { background: var(--wa-human); }

/* Notification inbox + unread badge */
.wa-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; font-size: 11px;
  font-weight: 700; padding: 1px 6px; border-radius: var(--r-sm); background: var(--danger); color: #fff;
  margin-left: 6px; vertical-align: middle; }
.wa-notif-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wa-notif { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; }
.wa-notif-head { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.wa-notif-summary { font-size: 13px; margin-top: 3px; }
.wa-notif-reason { font-size: 12px; margin-top: 2px; }
.wa-notif-meta { font-size: 11px; margin-top: 3px; }
.wa-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-sm);
  background: var(--bg); border: 1px solid var(--line); }
.wa-tag-handoff { background: var(--warning-soft); color: var(--warning); }
.wa-conv-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 7px; border-radius: var(--r-sm); margin-top: 3px; }
.wa-conv-tag.wait { background: var(--wa-amber-soft); color: var(--wa-amber); }
.wa-conv-tag.ai { background: var(--wa-brand-soft); color: var(--wa-brand); }

/* === P8 · collaborative inbox: presence, assignment, toasts ============ */

/* "Mis conversaciones" filter sits on its own row under the head, so the head's
   title + refresh never clip in the narrow list rail. */
.wa-list-subhead { padding: 6px 12px 0; display: flex; }
.wa-mine-toggle { height: 28px; padding: 0 12px; font-size: 12px; }
.wa-mine-toggle[aria-pressed="true"] {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 600;
}
.wa-mine-toggle:disabled { opacity: .5; cursor: not-allowed; }
/* Refresh is right-aligned in the title row. */
.wa-list-head .wa-list-refresh { margin-left: auto; }

/* Notification sound: the speaker toggle sits after refresh; pressed = silenced,
   drawn muted so the state reads at a glance, not only from the icon. */
.wa-sound-toggle { padding: 0 8px; height: 28px; }
.wa-sound-toggle .ico { width: 16px; height: 16px; pointer-events: none; }
.wa-sound-toggle[aria-pressed="true"] { color: var(--muted-2); background: var(--bg); }
.wa-sound-toggle[aria-pressed="true"] .wa-sound-on,
.wa-sound-toggle:not([aria-pressed="true"]) .wa-sound-off { display: none; }
/* "Activar sonido": a chip in the subhead row (the title row is too narrow). */
.wa-list-subhead { gap: 8px; align-items: center; flex-wrap: wrap; }
.wa-sound-unlock {
  margin-left: auto; height: 28px; padding: 0 12px; font-size: 12px; border-radius: 999px;
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 600;
}
.wa-sound-unlock .ico { width: 14px; height: 14px; pointer-events: none; }

/* The "Conversaciones" nav item, seen from another screen: a count of the
   conversations that rang meanwhile, and a quiet crossed-out speaker while the
   browser still blocks the sound. Both sit at the row's right edge. */
.tab .nav-badge,
.tab .nav-sound-blocked { margin-left: auto; flex: 0 0 auto; }
.tab .nav-sound-blocked + .nav-badge { margin-left: 6px; }
.tab .nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.tab .nav-sound-blocked { display: inline-flex; color: var(--muted-2); }
.tab .nav-sound-blocked .ico { width: 14px; height: 14px; color: inherit; }
.tab .nav-badge[hidden],
.tab .nav-sound-blocked[hidden] { display: none; }
.hamburger { position: relative; }
.nav-badge-dot {
  position: absolute; top: 5px; right: 5px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--card);
}
.nav-badge-dot[hidden] { display: none; }
/* A toast raised while the browser blocks the sound says so, one quiet line. */
.wa-toast-note { font-size: 11.5px; color: var(--muted-2); margin: 4px 0 0; }

/* Online roster bar under the list head. */
.wa-presence-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-bottom: 1px solid var(--line);
}
.wa-presence-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--wa-brand);
  box-shadow: 0 0 0 3px var(--wa-brand-soft); flex: 0 0 auto;
}
.wa-presence-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.wa-presence-avatars { display: inline-flex; align-items: center; margin-left: 2px; }
.wa-presence-avatars .wa-pchip { margin-left: -6px; }
.wa-presence-avatars .wa-pchip:first-child { margin-left: 0; }

/* Colored-initials avatar chip with hover → full-name tooltip (reused
   everywhere: roster, row claimed-by, viewer indicators). */
.wa-pchip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; font-size: 10px; font-weight: 700;
  border: 1.5px solid var(--card); box-sizing: border-box; cursor: default;
  user-select: none;
}
.wa-pchip[data-name]::after {
  content: attr(data-name);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(2px);
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; line-height: 1;
  padding: 5px 8px; border-radius: var(--r-sm); white-space: nowrap; pointer-events: none;
  opacity: 0; z-index: 20;
}
.wa-pchip[data-name]:hover::after, .wa-pchip[data-name]:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .wa-pchip[data-name]::after { transition: opacity .12s ease, transform .12s ease; }
  .wa-pchip[data-name]:hover::after, .wa-pchip[data-name]:focus-visible::after { transform: translateX(-50%) translateY(0); }
}

/* Per-row collaboration badges (claimed-by avatar + 'viendo ahora'). */
.wa-conv-collab { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.wa-conv-collab .wa-pchip { width: 18px; height: 18px; font-size: 9px; }
.wa-viewing-tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
  padding: 1px 6px; border-radius: var(--r-sm);
}
.wa-viewing-tag .wa-eye { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.wa-conv.is-mine { box-shadow: inset 2px 0 0 var(--accent); }

/* Thread-header: claim/release/resolve controls + owner chip. */
.wa-assign { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; }
.wa-assign .btn { height: 30px; }
.wa-assign-owner { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.wa-assign-status { font-size: 11px; }
.wa-statebar { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Thread-header: who is viewing this conversation. */
.wa-viewing { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; }
.wa-viewing .wa-viewing-text { font-size: 11px; color: var(--accent); font-weight: 600; }
.wa-viewing .wa-pchip { width: 18px; height: 18px; font-size: 9px; }

/* Escalation toasts: stacked bottom-right, hairline, dismissible. */
.wa-toasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 1200;
  display: flex; flex-direction: column; gap: 8px; max-width: 340px;
}
.wa-toast {
  display: flex; align-items: flex-start; gap: 10px; background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r); padding: 11px 12px; box-shadow: 0 6px 22px rgba(27, 25, 22, .12);
}
.wa-toast.handoff { border-left-color: var(--accent); }
.wa-toast.ai_off { border-left-color: var(--wa-amber); }
.wa-toast.ai_send_failed { border-left-color: var(--wa-danger); }
.wa-toast-body { flex: 1; min-width: 0; }
.wa-toast-title { font-size: 13px; font-weight: 700; margin: 0 0 2px; }
.wa-toast-text { font-size: 12px; color: var(--muted); margin: 0; }
.wa-toast-open {
  background: none; border: none; color: var(--accent); font: inherit; font-size: 12px;
  font-weight: 600; padding: 4px 0 0; cursor: pointer; text-decoration: underline;
}
.wa-toast-close {
  background: none; border: none; color: var(--muted-2); cursor: pointer; padding: 2px;
  line-height: 1; font-size: 16px; flex: 0 0 auto;
}
.wa-toast-close:hover { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .wa-toast { animation: waToastIn .22s cubic-bezier(.22,.61,.36,1); }
  @keyframes waToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* P8.5 · auto-assign pool list */
.wa-aa-pool { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.wa-aa-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm);
}
.wa-aa-row:hover { background: var(--bg); }
.wa-aa-label { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; flex: 1; min-width: 0; }
.wa-aa-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-aa-online {
  margin-left: auto; font-size: 11px; font-weight: 600; color: var(--wa-brand);
  background: var(--wa-brand-soft); padding: 2px 8px; border-radius: var(--r-sm);
}
.wa-aa-offline { margin-left: auto; font-size: 11px; color: var(--muted-2); }

/* Custom tool registry */
.wa-tool-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wa-tool { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; }
.wa-tool-head { display: flex; align-items: center; gap: 8px; }
.wa-tool-state { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-sm); }
.wa-tool-state.on { background: var(--success-soft); color: var(--success); }
.wa-tool-state.off { background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.wa-tool-form { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px;
  display: flex; flex-direction: column; gap: 10px; }
.wa-tool-form .field { display: flex; flex-direction: column; gap: 4px; }
.wa-tool-form .field > span { font-size: 12px; font-weight: 600; }
.wa-tool-test { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }

[hidden] { display: none !important; }

/* === Login overlay + principal header ============================= */
.login-overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(16, 20, 24, 0.4); z-index: 1000;
}
.login-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px 30px; width: min(400px, 92vw);
  box-shadow: var(--shadow-overlay); text-align: center;
}
.login-card .brand { justify-content: center; margin-bottom: 8px; }
.login-card h2 { font-family: var(--font-brand); margin: 8px 0 6px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.login-card .btn.primary { margin-top: 14px; min-width: 12rem; }
.login-error { color: var(--danger); margin-top: 12px; }

.role-badge {
  display: inline-block; padding: 2px 8px; margin: 0 0.5rem; border-radius: var(--r-sm);
  font-size: 11px; font-weight: 600; background: var(--accent-soft); color: var(--accent);
}
.role-badge[data-role="superadmin"] { background: var(--danger-soft); color: var(--danger); }
.role-badge[data-role="agent"] { background: var(--success-soft); color: var(--success); }
.role-badge[data-role="auditor"] { background: var(--bg); color: var(--muted); }
#logout-btn { margin-right: 0.5rem; }

/* ============================================================ */
/* P2 · Usuarios                                                */
/* ============================================================ */
.users-head { gap: 12px; }
.users-head h2 { font-family: var(--font-brand); color: var(--ink); font-size: 19px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.badge-soft { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-sm); }
.users-layout { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
.users-table-card { padding: 0; overflow: hidden; }
.users-table-caption { padding: 12px 16px; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); }
.users-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.users-table thead th { text-align: left; padding: 9px 16px; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); }
.users-table tbody td { padding: 0 16px; height: 44px; border-top: 1px solid var(--line); vertical-align: middle; }
.users-table tbody tr:first-child td { border-top: 0; }
.users-table tbody tr:hover { background: var(--bg); }
.user-cell { display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; padding: 0; color: var(--ink); }
.avatar.sm { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); }
.user-id { display: flex; flex-direction: column; line-height: 1.3; }
.user-id .muted { font-size: 11px; }
.user-features { color: var(--ink); }
.role-pill { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-sm); background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.role-pill.role-superadmin { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.role-pill.role-admin { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.role-pill.role-agent { background: var(--success-soft); color: var(--success); border-color: transparent; }
.role-pill.role-auditor { background: var(--bg); color: var(--muted); }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.status-dot.on { background: var(--success); }
.status-dot.off { background: var(--line-strong); }

/* drawer + modal */
.user-drawer { position: sticky; top: 16px; padding: 16px; }
.drawer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.drawer-head strong { flex: 1; font-size: 14px; }
.btn.icon { width: 28px; height: 28px; padding: 0; border: 1px solid transparent; background: transparent; color: var(--muted); }
.btn.icon:hover { background: var(--bg); color: var(--ink); }
.btn.icon .ico { width: 18px; height: 18px; }
.drawer-section { padding: 12px 0; border-top: 1px solid var(--line); }
.drawer-label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.role-segmented { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 3px; gap: 3px; }
.role-segmented .seg { border: 0; background: none; padding: 5px 12px; border-radius: var(--r-sm); font: inherit; font-size: 12px; cursor: pointer; color: var(--muted); }
.role-segmented .seg.active { background: var(--accent); color: #fff; }
.feature-switch { display: flex; align-items: center; gap: 10px; padding: 9px 0; cursor: pointer; }
.feature-switch.locked { opacity: .5; cursor: not-allowed; }
.feature-meta { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.feature-meta .muted { font-size: 11px; }
.feature-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.feature-switch .switch-track { width: 36px; height: 20px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background .15s; flex: 0 0 auto; }
.feature-switch .switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.18); }
/* The switch is pure shape with no text on it, so it takes the brand blue. */
.feature-switch input:checked + .switch-track { background: var(--mark); }
.feature-switch input:checked + .switch-track::after { transform: translateX(16px); }
/* 3b · Instant-toggle label + self-clearing "Guardado" inline confirmation. */
.feature-switch .switch-label { font-size: 13px; color: var(--ink); }
.wa-save-hint { font-size: 12px; transition: color .15s; }
.wa-save-hint.wa-saved-ok { color: var(--success); }
.wa-save-hint.wa-saved-err { color: var(--danger); }
/* 3d · Compose-modal variable fields. */
.wa-compose-vars { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 8px; }
.wa-compose-vars .field { display: flex; flex-direction: column; gap: 4px; }
.wa-compose-vars .field > span { font-size: 12px; font-weight: 600; }
.wa-compose-novars { margin: 4px 0 8px; font-size: 12px; }
/* E20 · prefix select + number, side by side; the select stays narrow so the
   number field keeps the space it needs. */
.wa-compose-number { display: flex; gap: 8px; align-items: center; }
.wa-compose-number .sel { flex: 0 0 auto; max-width: 190px; }
.wa-compose-number input { flex: 1 1 auto; min-width: 0; }
/* E20 · merge picker: a scrollable candidate list + the irreversible-action note. */
.wa-merge-list { max-height: 260px; overflow-y: auto; margin: 4px 0 10px; }
.wa-merge-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--r); padding: 8px 10px; cursor: pointer; color: inherit; font: inherit; }
.wa-merge-row:hover { background: var(--bg); }
.wa-merge-row.active { border-color: var(--accent); background: var(--accent-soft); }
.wa-merge-name { font-weight: 600; }
.wa-merge-num { font-size: 12px; }
.wa-merge-empty { padding: 8px 10px; font-size: 13px; }
.wa-merge-confirm { border: 1px solid var(--danger); border-radius: var(--r); padding: 10px 12px; margin-bottom: 10px; font-size: 13px; }
/* 3d · Live message preview — the exact outbound bubble the operator will send. */
.wa-compose-preview { margin: 2px 0 14px; }
.wa-compose-preview-lbl { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.wa-compose-preview-thread { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
.wa-compose-preview-thread .wa-msg { max-width: 100%; }
.wa-ph { background: var(--accent-soft); color: var(--accent); border: 1px dashed var(--accent-line); border-radius: 4px; padding: 0 4px; font-weight: 600; }
.drawer-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.status-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; flex: 1; }
.modal-overlay { position: fixed; inset: 0; background: rgba(16, 20, 24, .4); display: grid; place-items: center; z-index: 50; }
.modal-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; width: 440px; max-width: 92vw; max-height: 88vh; overflow: auto; box-shadow: var(--shadow-overlay); }
/* 3d · Compose-modal top-level fields stack vertically (number + template). */
.modal-card > .field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.modal-card > .field > span { font-size: 12px; font-weight: 600; }
.modal-card > .field > input, .modal-card > .field > .sel { width: 100%; }
@media (max-width: 860px) { .users-layout { grid-template-columns: 1fr; } .user-drawer { position: static; } }

/* E19 (#283) · clickable tool-call chip + tool-debug modal. */
.wa-action-clickable { cursor: pointer; }
.wa-action-clickable:hover { text-decoration: underline; }
.wa-action-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.wa-modal-overlay { position: fixed; inset: 0; background: rgba(16, 20, 24, .45); display: grid; place-items: center; z-index: 60; }
.wa-modal-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; width: 560px; max-width: 92vw; max-height: 88vh; overflow: auto; box-shadow: var(--shadow-overlay); }
.wa-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wa-modal-close { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); }
.wa-modal-section-title { font-size: 12px; font-weight: 600; margin: 10px 0 4px; }
.wa-modal-pre { background: var(--navy-press); color: #e3ecfa; border-radius: var(--r-sm); padding: 10px 12px; font-size: 12px; white-space: pre-wrap; word-break: break-word; overflow-x: auto; margin: 0; }

/* E19 (#284) · WhatsApp-style delivery ticks on outbound bubbles. */
.wa-msg-tick { font-size: 11px; letter-spacing: -1px; color: var(--muted); margin-left: 2px; }
.wa-msg-tick.wa-tick-read { color: #34b7f1; }   /* blue (read) */
.wa-msg-tick.wa-tick-failed { color: var(--danger); letter-spacing: 0; }

/* === P3 · Canales hub === */
.channels-intro { margin: -4px 0 16px; font-size: 13px; }
.channel-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.channel-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.channel-card.locked { opacity: 1; }
.ch-head { display: flex; align-items: flex-start; justify-content: space-between; }
.ch-icon { width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; }
.ch-icon .ico { width: 22px; height: 22px; }
.ch-icon-wa { background: var(--success-soft); color: var(--success); }
.ch-icon-wc { background: var(--accent-soft); color: var(--accent); }
.ch-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.channel-card.locked .ch-dot { background: var(--muted-2); }
.ch-index { width: 22px; height: 22px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); color: var(--muted); display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.ch-title { font-size: 15px; font-weight: 600; color: var(--ink); margin: 4px 0 0; text-transform: none; letter-spacing: 0; }
.ch-desc { font-size: 13px; line-height: 1.5; margin: 0; }
.ch-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-sm); align-self: flex-start; }
.ch-status.ch-on { color: var(--success); background: var(--success-soft); }
.ch-status.ch-locked { color: var(--muted); background: var(--bg); border: 1px solid var(--line); }
.ch-status .ico { width: 14px; height: 14px; }
.ch-sep { border: 0; border-top: 1px solid var(--line); margin: 6px 0; width: 100%; }
.ch-meta { font-size: 12px; color: var(--muted); margin: 0; }
.ch-cta { align-self: flex-start; }
@media (max-width: 860px) { .channel-cards { grid-template-columns: 1fr; } }

/* === P3.3 · Componente web — test + integration page === */
/* 5 · min-width:0 on grid children so a long snippet token can't force a track
   wider than the viewport (the cause of the right overflow / page h-scroll). */
.wc-grid { grid-template-columns: 1fr; align-items: start; }
.wc-grid > * { min-width: 0; max-width: 100%; }
.wc-embed {
  height: clamp(520px, 72vh, 720px); width: 100%; max-width: 100%;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shadow); background: var(--bg);
}
.wc-embed sonia-chat { display: block; height: 100%; width: 100%; }
.wc-snippet-wrap { position: relative; max-width: 100%; }
.wc-snippet {
  background: var(--navy-press); color: #e3ecfa; padding: 16px; border-radius: var(--r);
  font-size: 12.5px; line-height: 1.6; overflow-x: auto; white-space: pre;
  margin: 0; max-width: 100%;
}
.wc-snippet-wrap .btn { position: absolute; top: 10px; right: 10px; z-index: 1; }
.wc-attrs { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
.wc-attrs th, .wc-attrs td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.wc-attrs th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.wc-cors { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.card h4 { margin: 16px 0 8px; font-size: 13px; color: var(--ink); font-weight: 600; }

/* P6 · WhatsApp templates + CSV bulk send */
.wa-tpl-tabs, .wa-tabs { display: flex; gap: 2px; margin: 12px 0 16px; border-bottom: 1px solid var(--line); }
.wa-tpl-tabs .tab, .wa-tabs .tab { padding: 0 14px; height: 36px; font-weight: 500; font-size: 13px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; border-radius: 0; }
.wa-tpl-tabs .tab:hover, .wa-tabs .tab:hover { background: transparent; color: var(--ink); }
.wa-tpl-tabs .tab.active, .wa-tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.wa-tpl-panel, .wa-panel { display: flex; flex-direction: column; gap: 16px; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; border-radius: var(--r-sm); padding: 2px 8px; }
.chip.ok { background: var(--success-soft); color: var(--success); }
.chip.warn { background: var(--warning-soft); color: var(--warning); }
.chip.err { background: var(--danger-soft); color: var(--danger); }
.chip.pend { background: var(--bg); color: var(--muted); }
.mono { font-family: var(--font-mono); font-size: 12.5px; }
.sel { width: 100%; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 11px; font-size: 13px; background: var(--card); }
.progress { height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; margin: 8px 0; }
.progress > i { display: block; height: 100%; background: var(--mark); transition: width .3s; }
.wa-bulk-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.wa-bulk-table th, .wa-bulk-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.wa-bulk-table th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
#view-wa-templates .fb-card .row { display: flex; gap: 8px; align-items: center; }
#view-wa-templates label { display: block; margin: 10px 0; font-size: 13px; color: var(--ink); }
#view-wa-templates input[type="text"], #view-wa-templates textarea, #view-wa-templates select { width: 100%; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; font: inherit; margin-top: 4px; }

/* 6 · Plantillas WhatsApp — redesigned list cards + create form */
.wa-tpl-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.wa-tpl-list-head h3 { margin: 0; }
.wa-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.wa-tpl-card {
  border: 1px solid var(--line); border-radius: var(--r); padding: 14px;
  background: var(--card); display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.wa-tpl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wa-tpl-name { font-size: 14px; font-weight: 600; color: var(--ink); word-break: break-word; }
.wa-tpl-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wa-tpl-tag {
  font-size: 11px; font-weight: 600; color: var(--muted); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px 8px;
}
.wa-tpl-vars { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.wa-tpl-vars code { font-size: 11.5px; background: var(--accent-soft); color: var(--accent); border-radius: var(--r-sm); padding: 1px 6px; }
.wa-tpl-body {
  font-size: 13px; line-height: 1.5; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px;
  white-space: pre-wrap; word-break: break-word; max-height: 120px; overflow: auto;
}
.wa-tpl-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
/* Create form: clean two-column grid; body + footer span full width.
   Scoped under #view-wa-templates to beat the generic `label { margin:10px 0 }`. */
#view-wa-templates .wa-tpl-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; margin: 8px 0 0; }
#view-wa-templates .wa-tpl-form-grid .field { display: flex; flex-direction: column; gap: 4px; margin: 0; }
#view-wa-templates .wa-tpl-form-grid .field > span { font-size: 12px; font-weight: 600; color: var(--ink); }
#view-wa-templates .wa-tpl-form-grid .field > span code { font-weight: 500; }
#view-wa-templates .wa-tpl-form-grid input, #view-wa-templates .wa-tpl-form-grid textarea, #view-wa-templates .wa-tpl-form-grid select { margin-top: 0; }
#view-wa-templates .wa-tpl-body-field { grid-column: 1 / -1; }
#view-wa-templates .wa-tpl-form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 720px) { #view-wa-templates .wa-tpl-form-grid { grid-template-columns: 1fr; } }

/* ===== Responsive sidebar: off-canvas drawer under 900px ===== */
@media (max-width: 900px) {
  .mobile-topbar {
    display: flex; align-items: center; gap: 12px; position: sticky; top: 0;
    width: 100%; padding: 10px 16px; background: var(--card);
    border-bottom: 1px solid var(--line); z-index: 30;
  }
  .mobile-topbar .hamburger {
    border: 1px solid var(--line); background: var(--card); border-radius: var(--r);
    width: 36px; height: 36px; cursor: pointer; color: var(--ink);
    display: grid; place-items: center;
  }
  .mobile-topbar .hamburger .ico { width: 20px; height: 20px; }
  body { flex-direction: column; }
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%);
    transition: transform .22s ease; box-shadow: var(--shadow-overlay);
  }
  .sidebar.sidebar--open { transform: translateX(0); }
  .sidebar-burst {
    display: grid; place-items: center; margin-left: auto; width: 30px; height: 30px;
    border: 0; background: none; color: var(--muted); cursor: pointer;
  }
  .sidebar-burst .ico { width: 18px; height: 18px; }
  .sidebar-scrim {
    display: block; position: fixed; inset: 0; background: rgba(16, 20, 24, .4); z-index: 35;
  }
  .sidebar-scrim[hidden] { display: none; }
  main { padding: 18px 16px 32px; }
}

/* --- Claves de API ------------------------------------------------------ */
.api-keys-intro { max-width: 70ch; margin: 0 0 14px; }
.api-key-scope { align-items: flex-start; padding: 7px 0; }
.api-key-scope .feature-meta code { font-size: 12px; }
/* The secret is shown ONCE, so it gets room to be read and selected rather
   than truncated — a half-copied credential is a support ticket. */
.api-key-reveal {
  margin: 10px 0 4px; padding: 12px 14px; border-radius: 8px;
  background: var(--surface-2, #f6f8f9); border: 1px solid var(--line, #d3dadf);
  word-break: break-all; user-select: all;
}
.api-key-reveal code { font-size: 13px; line-height: 1.5; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.api-keys-help { padding: 16px 18px; margin: 0 0 16px; max-width: 860px; }
.api-keys-help h3 { margin: 0 0 10px; font-size: 15px; }
.api-keys-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 12px; align-items: baseline; }
.api-keys-facts dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #66727f); }
.api-keys-facts dd { margin: 0; }
/* The snippet is meant to be selected and pasted, so it wraps rather than
   truncating — a half-copied command is worse than no example. */
.api-keys-snippet {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 8px;
  background: var(--surface-2, #f6f8f9); border: 1px solid var(--line, #d3dadf);
  overflow-x: auto; white-space: pre-wrap; word-break: break-all;
}
.api-keys-snippet code { font-size: 12px; line-height: 1.6; }
.api-keys-links { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.api-keys-links li { font-size: 13px; }
.api-key-try-label { margin: 12px 0 6px; }