/* ============================================================================
   ImobPilot Teams T3 — Central de Operações (frontend styles).
   Self-contained, CSP-safe (loaded via <link>, no inline styles required).
   Reuses the post-F5 design tokens (--bg/--card/--border/--text/--muted/
   --primary, --radius-*, --shadow-*) so light/dark themes apply automatically.
   Everything is scoped under .tc-* to guarantee zero bleed into the personal CRM.
   ============================================================================ */

/* ── T4-EF-AI A2.7 CONTRAST CORRECTION — legible amber foreground on LIGHT surfaces ──────────
   The canonical CRM brand token --primary is AMBER (#F59E0B in light / #FACC15 in dark). Used as
   a FILL it pairs with the dark --on-primary text (AA-fine); but used as small foreground TEXT on
   light surfaces #F59E0B reaches only ~2.0–2.2:1 (active nav tab on --primary-soft #FFF7ED; the IA
   progress/status line on --card #FFFFFF) — materially too weak for normal text. The amber --warning
   (#D97706 in light) is likewise too weak as small note text (~2.9:1 on --warning-soft #FEF3C7).
   Correction (scoped, non-global, COLOR-ONLY): two teams-private semantic FOREGROUND tokens that
   darken the amber to amber-700/800 in LIGHT (≥4.5:1 on card/amber-50/amber-soft) while inheriting
   the bright brand amber in DARK, where it is already high-contrast (~7–12:1) on the dark surfaces.
   These tokens never touch the shared --primary/--warning tokens, any fill/border/chart/decorative
   use, or the personal CRM — only the `color` of amber TEXT roles is rerouted. Because the DARK value
   default (DARK) values are LITERALLY the amber the elements already rendered — #FACC15 == the dark
   --primary these roles used before, #F59E0B == the dark --warning — so the dark theme is byte-identical
   in computed color (no dark regression). Literals (not var(--primary)) are used deliberately: a
   custom property defined as `var(--primary)` is treated as invalid-at-computed-value-time when it must
   compose, which would drop consumers to their light fallback in DARK. Only LIGHT text is darkened.
   Names are .tc-scoped (nothing else reads them). */
.tc-root, .tc-modal-overlay, .tc-drawer-overlay, .tc-asst-overlay {
  --tc-accent-text: #facc15;   /* DARK: the amber --primary already used by these roles (~8–12:1 on dark) */
  --tc-warn-text: #f59e0b;     /* DARK: the amber --warning already used by the notes (~6.8:1 on dark) */
}
html[data-theme="light"] .tc-root, body[data-theme="light"] .tc-root,
html[data-theme="light"] .tc-modal-overlay, body[data-theme="light"] .tc-modal-overlay,
html[data-theme="light"] .tc-drawer-overlay, body[data-theme="light"] .tc-drawer-overlay,
html[data-theme="light"] .tc-asst-overlay, body[data-theme="light"] .tc-asst-overlay {
  --tc-accent-text: #b45309;   /* amber-700 → 4.73:1 on #FFF7ED, 5.02:1 on #FFFFFF */
  --tc-warn-text: #92400e;     /* amber-800 → 6.37:1 on #FEF3C7, 7.09:1 on #FFFFFF */
}

/* ── Launcher (feature-flag gated; only injected when the user has ≥1 org) ── */
body.tc-has-teams {
  /* Shared contract: the Follow-up content reserve equals bottom-nav + safe
     area + the Empresa pill's minimum target and its two visual gaps. */
  --tc-launch-gap: 14px;
  --tc-launch-height: 44px;
  --tc-launch-clearance: calc(var(--mbn-h, 56px) + env(safe-area-inset-bottom, 0px) + var(--tc-launch-height) + 28px);
}
.tc-launch-mobile {
  position: fixed;
  left: var(--tc-launch-gap, 14px);
  bottom: calc(var(--mbn-h, 56px) + env(safe-area-inset-bottom, 0px) + var(--tc-launch-gap, 14px));
  z-index: 2147482000;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  min-height: var(--tc-launch-height, 44px);
  max-width: calc(100vw - 28px);
  border: 1px solid var(--primary-border, rgba(37, 99, 235, .3));
  border-radius: 999px;
  background: var(--primary, #2563eb);
  /* §8 button contrast: dark text on the amber brand fill (matches .tc-btn-primary). White text
     read only ~2.15:1 in light and ~1.53:1 on the dark-theme yellow fill; --on-primary is #0F172A
     in both themes → 8.31:1 (light) / 11.66:1 (dark). Fill/shape unchanged. */
  color: var(--on-primary, #0f172a);
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: var(--shadow-lg, 0 8px 28px rgba(15, 23, 42, .18));
  cursor: pointer;
}
.tc-launch-mobile[hidden] { display: none !important; }
@media (max-width: 900px) {
  body.tc-has-teams .tc-launch-mobile:not([hidden]) { display: inline-flex; }
}

/* Desktop sidebar entry re-uses the app's .sb-item look; only the accent differs. */
.sb-item.tc-launch-desktop .tc-launch-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary, #2563eb); display: inline-block; margin-left: 2px;
}
/* Zero eligible organizations → the desktop launcher AND its "Empresa" group label
   stay invisible and non-interactive. The launcher reuses the app's .sb-item, whose
   `display:flex` (styles.css) overrides the browser UA `[hidden]{display:none}`, so an
   explicit author guard is required — mirroring the .tc-launch-mobile[hidden] guard
   above. showLauncher() sets body.tc-has-teams only for a confirmed pilot (≥1 org) and
   toggles the button's [hidden]; the group label is created only alongside the launcher
   and is never given [hidden], so it is guarded by the body flag. */
.sb-item.tc-launch-desktop[hidden],
.sb-item.tc-launch-desktop-join[hidden],
body:not(.tc-has-teams) .sb-item.tc-launch-desktop,
body:not(.tc-has-teams) .sb-item.tc-launch-desktop-join,
body:not(.tc-has-teams) .sb-group[data-tc="grp"] { display: none !important; }

/* ── Full-screen overlay (takeover; sits above the app incl. bottom nav) ── */
.tc-root {
  position: fixed;
  inset: 0;
  z-index: 2147482500;
  display: flex;
  flex-direction: column;
  background: var(--bg, #f8fafc);
  color: var(--text, #0f172a);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: contain;
}
.tc-root[hidden] { display: none !important; }
.tc-root *, .tc-root *::before, .tc-root *::after { box-sizing: border-box; }

/* ── Header ── */
.tc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: var(--card, #fff);
}
.tc-brand { display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; }
.tc-brand-title { font-size: 15px; font-weight: 700; letter-spacing: .2px; }
.tc-brand-sub { font-size: 11.5px; color: var(--muted, #475569); }

.tc-context { position: relative; }
.tc-context-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border, #e2e8f0); background: var(--card, #fff);
  color: var(--text, #0f172a); font-size: 13px; font-weight: 600; cursor: pointer;
  max-width: 62vw;
}
.tc-context-btn .tc-ctx-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-context-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; max-width: 84vw;
  background: var(--card, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 10px); box-shadow: var(--shadow-lg, 0 8px 28px rgba(15,23,42,.12));
  padding: 6px; z-index: 5;
}
.tc-context-menu[hidden] { display: none; }
.tc-ctx-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--text, #0f172a); font-size: 13px; text-align: left; cursor: pointer;
}
.tc-ctx-item:hover, .tc-ctx-item:focus-visible { background: var(--primary-soft, rgba(37,99,235,.1)); }
.tc-ctx-item .tc-ctx-role {
  font-size: 11px; color: var(--muted, #475569); text-transform: capitalize;
  border: 1px solid var(--border, #e2e8f0); border-radius: 999px; padding: 1px 8px;
}
.tc-ctx-item[aria-current="true"] { font-weight: 700; }

.tc-role-badge {
  font-size: 11px; font-weight: 600; text-transform: capitalize;
  color: var(--tc-accent-text, #b45309); background: var(--primary-soft, rgba(37,99,235,.1));
  border: 1px solid var(--primary-border, rgba(37,99,235,.22));
  border-radius: 999px; padding: 3px 10px;
}
.tc-close {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border, #e2e8f0); background: var(--card, #fff);
  color: var(--text, #0f172a); font-size: 13px; font-weight: 600; cursor: pointer;
}
.tc-close:hover { background: var(--primary-soft, rgba(37,99,235,.08)); }

/* ── Primary nav (role-aware tabs) ── */
.tc-nav {
  display: flex; gap: 4px; padding: 8px 16px; overflow-x: auto;
  border-bottom: 1px solid var(--border, #e2e8f0); background: var(--card, #fff);
  -webkit-overflow-scrolling: touch;
  /* T4-EF-AI A2.7 F1 — keep the ACTIVE tab off the clip edge when it is revealed. The JS reveal
     (renderNav → revealActiveTab) scrolls the strip on a nav-state change; this inset also applies to
     native keyboard/focus-driven scroll so a Tab-focused clipped tab (e.g. Configurações at ≤430px)
     lands fully visible with a matching 12px gutter. Never introduces page/body horizontal overflow. */
  scroll-padding-inline: 12px;
}
.tc-tab {
  flex: 0 0 auto; padding: 9px 14px; border: 0; border-radius: var(--radius-sm, 10px);
  background: transparent; color: var(--muted, #475569); font-size: 13.5px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.tc-tab:hover { color: var(--text, #0f172a); background: var(--primary-soft, rgba(37,99,235,.08)); }
/* Active tab (canonical across ALL Central tabs — Visão Geral … Configurações): keep the warm
   --primary-soft background but darken the amber TEXT for legibility (see contrast token block).
   Light 2.02:1 → 4.73:1; dark unchanged (bright amber ~8.97:1). Not a Configurações-only rule. */
.tc-tab[aria-current="page"] { color: var(--tc-accent-text, #b45309); background: var(--primary-soft, rgba(37,99,235,.12)); }

/* ── Main scroll area ── */
.tc-main {
  flex: 1 1 auto; overflow-y: auto; padding: 20px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.tc-section-title { font-size: 14px; font-weight: 700; margin: 4px 0 12px; }
.tc-section-sub { font-size: 12.5px; color: var(--muted, #475569); margin: -6px 0 14px; }

/* ── Queue summary cards ── */
.tc-queues { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 22px; }
.tc-qcard {
  text-align: left; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 14px);
  background: var(--card, #fff); padding: 14px 16px; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow, 0 2px 8px rgba(15,23,42,.06));
}
.tc-qcard:hover { border-color: var(--primary-border, rgba(37,99,235,.35)); }
.tc-qcard[aria-current="true"] { border-color: var(--primary, #2563eb); box-shadow: 0 0 0 1px var(--primary, #2563eb) inset; }
.tc-qcard-label { font-size: 12px; font-weight: 600; color: var(--muted, #475569); letter-spacing: .3px; text-transform: uppercase; }
.tc-qcard-value { font-size: 26px; font-weight: 800; line-height: 1; }
.tc-qcard-hint { font-size: 11.5px; color: var(--muted, #475569); }

/* ── Filters ── */
.tc-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.tc-input, .tc-select {
  padding: 8px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-sm, 10px);
  background: var(--card, #fff); color: var(--text, #0f172a); font-size: 13px; min-height: 38px;
}
.tc-input { flex: 1 1 200px; min-width: 150px; }
.tc-filter-note { font-size: 11.5px; color: var(--muted, #475569); flex-basis: 100%; }

/* ── Native <select> popup theme authority (T4-EF SELECT-THEME hotfix) ───────────────
   Mirrors the canonical CRM `.adm-select` fix in styles.css. Defect: in LIGHT theme the
   NATIVE <select> option popup rendered dark/navy with a saturated-blue selection while
   the modal surface stayed light (Criar convite → Equipe). Root cause: the control sets a
   themed background/text/border via tokens above but declared NO `color-scheme`, so the
   native <option> popup inherited the user-agent's DARK scheme. Fix (native, minimal,
   token-consistent): declare `color-scheme` per theme on the control + explicit <option>
   colors (belt-and-suspenders for browsers that ignore color-scheme on the popup). The
   control's background/border/text stay owned by the `.tc-input, .tc-select` rule above —
   this only adds scheme + option/selection colors, and never force-overrides it. `data-theme` is
   always present on <html> (crm-theme-boot sets light|dark before first paint), so the
   light override is authoritative in light mode and the dark base applies in dark mode.
   Covers every Teams select (filters, assignment, role, líder, and the invite Equipe). ── */
.tc-select { color-scheme: dark; }
.tc-select option { background-color: #0d0f1a; color: #f8fafc; }
.tc-select option:checked,
.tc-select option:hover { background-color: #1a2233; color: #ffffff; }
html[data-theme="light"] .tc-select,
body[data-theme="light"] .tc-select { color-scheme: light; }
html[data-theme="light"] .tc-select option,
body[data-theme="light"] .tc-select option { background-color: #ffffff; color: #0f172a; }
html[data-theme="light"] .tc-select option:checked,
html[data-theme="light"] .tc-select option:hover,
body[data-theme="light"] .tc-select option:checked,
body[data-theme="light"] .tc-select option:hover { background-color: #eef2f7; color: #0f172a; }

/* ── Lead list: table (desktop) → cards (mobile) ── */
.tc-listwrap { border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 14px); overflow-x: auto; background: var(--card, #fff); }
.tc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tc-table th, .tc-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border, #e2e8f0); vertical-align: middle; }
.tc-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted, #475569); background: var(--bg, #f8fafc); position: sticky; top: 0; }
.tc-table tbody tr:last-child td { border-bottom: 0; }
.tc-cell-name { font-weight: 600; }
.tc-cell-sub { font-size: 11.5px; color: var(--muted, #475569); }
.tc-row-open { appearance: none; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 0; padding: 0; background: transparent; color: var(--text, #0f172a); font: inherit; text-align: left; cursor: pointer; }
.tc-row-open:hover { color: var(--tc-accent-text, #b45309); text-decoration: underline; text-underline-offset: 3px; }
.tc-row-open-lead { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

.tc-chip {
  display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--border, #e2e8f0); color: var(--muted, #475569); background: var(--bg, #f8fafc); white-space: nowrap;
}
.tc-chip-unassigned { color: #b45309; border-color: rgba(180,83,9,.28); background: rgba(180,83,9,.08); }
.tc-chip-assigned { color: #15803d; border-color: rgba(21,128,61,.28); background: rgba(21,128,61,.08); }
.tc-chip-attention { color: #b91c1c; border-color: rgba(185,28,28,.28); background: rgba(185,28,28,.08); }

/* Mobile cards (hidden on desktop) */
.tc-cards { display: none; flex-direction: column; gap: 10px; }
.tc-card {
  border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 14px); background: var(--card, #fff);
  padding: 13px 14px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; box-shadow: var(--shadow, 0 2px 8px rgba(15,23,42,.05));
}
.tc-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tc-card-name { font-weight: 700; font-size: 14px; }
.tc-card-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; color: var(--muted, #475569); }

.tc-loadmore { margin: 14px auto 0; display: block; }

/* ── Buttons ── */
.tc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px;
  padding: 9px 16px; border-radius: var(--radius-sm, 10px); border: 1px solid var(--border, #e2e8f0);
  background: var(--card, #fff); color: var(--text, #0f172a); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.tc-btn:hover { background: var(--primary-soft, rgba(37,99,235,.08)); }
.tc-btn-primary { background: var(--primary, #2563eb); border-color: var(--primary, #2563eb); color: var(--on-primary, #0f172a); }
.tc-btn-primary:hover { filter: brightness(.96); background: var(--primary, #2563eb); }
.tc-btn[disabled] { opacity: .55; cursor: not-allowed; }
.tc-btn-ghost { background: transparent; }
/* .tc-btn sets display:inline-flex, an AUTHOR rule that overrides the UA [hidden]{display:none}; an
   explicit author guard is required so a hidden .tc-btn (e.g. the two-phase redemption "Aceitar
   convite") is truly hidden until revealed. Mirrors the .tc-launch/.tc-ef-teamfield[hidden] guards. */
.tc-btn[hidden] { display: none !important; }

/* ── Empty / loading / error states ── */
.tc-empty, .tc-loading, .tc-error {
  text-align: center; padding: 40px 20px; color: var(--muted, #475569); font-size: 13.5px;
  border: 1px dashed var(--border, #e2e8f0); border-radius: var(--radius, 14px); background: var(--card, #fff);
}
.tc-error { color: #b91c1c; border-color: rgba(185,28,28,.3); border-style: solid; }
.tc-empty-title { font-weight: 700; color: var(--text, #0f172a); margin-bottom: 4px; font-size: 14px; }
.tc-spinner {
  width: 22px; height: 22px; border-radius: 50%; margin: 0 auto 10px;
  border: 2.5px solid var(--border, #e2e8f0); border-top-color: var(--primary, #2563eb);
  animation: tc-spin .8s linear infinite;
}
@keyframes tc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tc-spinner { animation-duration: 2s; } }

/* ── Lead detail (MODO GESTÃO) ── */
.tc-detail-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.tc-back { background: transparent; border: 0; color: var(--tc-accent-text, #b45309); font-weight: 600; font-size: 13px; cursor: pointer; padding: 6px 4px; }
.tc-detail-name { font-size: 20px; font-weight: 800; }
.tc-mode-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--tc-accent-text, #b45309); background: var(--primary-soft, rgba(37,99,235,.1));
  border: 1px solid var(--primary-border, rgba(37,99,235,.22)); border-radius: 999px; padding: 3px 10px; align-self: center;
}
.tc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 16px 0; }
.tc-field { border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-sm, 10px); background: var(--card, #fff); padding: 11px 13px; }
.tc-field-label { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted, #475569); margin-bottom: 3px; }
.tc-field-value { font-size: 14px; font-weight: 600; word-break: break-word; }
.tc-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 20px; }
.tc-observer-note {
  font-size: 12.5px; color: var(--muted, #475569); background: var(--bg, #f8fafc);
  border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-sm, 10px); padding: 10px 12px; margin-bottom: 18px;
}

/* Assignment history timeline */
.tc-history { display: flex; flex-direction: column; gap: 0; }
.tc-hitem { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border, #e2e8f0); }
.tc-hitem:last-child { border-bottom: 0; }
.tc-hdot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary, #2563eb); margin-top: 5px; flex: 0 0 auto; }
.tc-hbody { flex: 1; }
.tc-hmain { font-size: 13.5px; font-weight: 600; }
.tc-hsub { font-size: 12px; color: var(--muted, #475569); margin-top: 2px; }
.tc-hreason { font-size: 12.5px; margin-top: 4px; font-style: italic; }

/* ── Modal (assignment / reassignment) ── */
.tc-modal-overlay {
  position: fixed; inset: 0; z-index: 2147483000; background: rgba(15, 23, 42, .5);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.tc-modal-overlay[hidden] { display: none !important; }
.tc-modal {
  width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto;
  background: var(--card, #fff); color: var(--text, #0f172a);
  border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 14px);
  box-shadow: var(--shadow-lg, 0 8px 48px rgba(15,23,42,.2)); padding: 20px;
}
.tc-modal-title { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.tc-modal-sub { font-size: 12.5px; color: var(--muted, #475569); margin-bottom: 16px; }
.tc-modal .tc-field-label { margin-top: 12px; }
.tc-modal label { display: block; font-size: 12px; font-weight: 600; color: var(--muted, #475569); margin: 12px 0 5px; }
.tc-modal .tc-select, .tc-modal .tc-input, .tc-modal textarea.tc-input { width: 100%; }
.tc-modal textarea.tc-input { resize: vertical; min-height: 64px; font-family: inherit; }
.tc-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.tc-modal-status { font-size: 12.5px; margin-top: 12px; min-height: 18px; }
.tc-modal-status.is-error { color: #b91c1c; }
.tc-modal-status.is-progress { color: var(--tc-accent-text, #b45309); }
.tc-modal-status.is-ok { color: #15803d; }

/* ── Live status region (screen-reader + toast) ── */
.tc-live {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 2147483100;
  background: var(--text, #0f172a); color: var(--bg, #fff);
  padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-lg, 0 8px 28px rgba(0,0,0,.25)); max-width: 90vw; text-align: center;
}
.tc-live[hidden] { display: none; }

/* ── Focus visibility (a11y) ── */
.tc-root :focus-visible, .tc-modal-overlay :focus-visible, .tc-launch-mobile:focus-visible {
  outline: 3px solid var(--text, #0f172a); outline-offset: 2px; border-radius: 6px;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(37, 99, 235, .35));
}

.tc-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Responsive: table→cards under 720px, no horizontal overflow ── */
@media (max-width: 720px) {
  .tc-header { padding: 10px 14px; }
  .tc-main { padding: 16px 14px; }
  .tc-listwrap { border: 0; background: transparent; overflow: visible; }
  .tc-table { display: none; }
  .tc-cards { display: flex; }
  .tc-context-btn { max-width: 52vw; }
  .tc-detail-name { font-size: 18px; }
}

/* ============================================================================
   T4-CD — Executive dashboard + lead operations (additive; scoped .tc-*).
   Reuses the canonical Fase A/F1 tokens with the same fallback convention as
   the T3 block above. No bare body/html rules; no external imports; no inline styles.
   ============================================================================ */

/* ── Page scaffolding ── */
.tc-page-title { font-size: 18px; font-weight: 800; letter-spacing: -.2px; margin: 2px 0 4px; }
.tc-ov-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.tc-ov-title { min-width: 220px; }
.tc-ov-title .tc-section-sub { margin: 0; }
.tc-ov-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tc-freshness { font-size: 11.5px; color: var(--text-muted, var(--muted, #475569)); white-space: nowrap; }
.tc-refresh { min-height: 34px; padding: 6px 12px; font-size: 12.5px; }

/* ── Period segmented control ── */
.tc-seg { display: inline-flex; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-sm, 10px); overflow: hidden; background: var(--card, #fff); }
.tc-seg-btn {
  border: 0; background: transparent; cursor: pointer; padding: 7px 13px; min-height: 34px;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted, var(--muted, #475569));
}
.tc-seg-btn + .tc-seg-btn { border-left: 1px solid var(--border, #e2e8f0); }
.tc-seg-btn:hover { color: var(--text, #0f172a); background: var(--primary-soft, rgba(37, 99, 235, .08)); }
.tc-seg-btn.is-active { color: var(--on-primary, #0f172a); background: var(--primary, #2563eb); }

/* ── KPI strip ── */
.tc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.tc-kpi {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left;
  border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 14px);
  background: var(--card, #fff); padding: 13px 15px; box-shadow: var(--shadow-sm, var(--shadow, 0 2px 8px rgba(15, 23, 42, .05)));
}
button.tc-kpi { cursor: pointer; }
.tc-kpi-click:hover { border-color: var(--primary-border, rgba(37, 99, 235, .35)); }
.tc-kpi-label { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted, var(--muted, #475569)); }
.tc-kpi-value { font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text, #0f172a); }
.tc-kpi-hint { font-size: 11px; color: var(--text-muted, var(--muted, #475569)); }
.tc-kpi-delta {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border, #e2e8f0); color: var(--text-muted, var(--muted, #475569)); background: var(--bg, #f8fafc);
}
.tc-kpi-delta.is-up { color: var(--success, #16a34a); border-color: rgba(22, 163, 74, .28); background: var(--success-soft, rgba(22, 163, 74, .08)); }
.tc-kpi-delta.is-down { color: var(--danger, #dc2626); border-color: rgba(220, 38, 38, .28); background: var(--danger-soft, rgba(220, 38, 38, .08)); }
.tc-kpi-attn { border-left: 3px solid var(--warning, #d97706); }
.tc-kpi-attn .tc-kpi-value { color: var(--warning, #b45309); }
.tc-compare-note { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-muted, var(--muted, #475569)); margin: 0; }

/* ── Management attention area ── */
.tc-attn-host { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.tc-attn-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--border, #e2e8f0); border-left-width: 3px; border-radius: var(--radius, 14px);
  background: var(--card, #fff); padding: 12px 16px;
}
.tc-attn-card.is-warn { border-left-color: var(--warning, #d97706); }
.tc-attn-card.is-danger { border-left-color: var(--danger, #dc2626); }
.tc-attn-card.is-ok { border-left-color: var(--success, #16a34a); }
.tc-attn-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tc-attn-count { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.tc-attn-card.is-warn .tc-attn-count { color: var(--warning, #b45309); }
.tc-attn-card.is-danger .tc-attn-count { color: var(--danger, #dc2626); }
.tc-attn-title { font-size: 13.5px; font-weight: 700; }
.tc-attn-sub { font-size: 12px; color: var(--text-muted, var(--muted, #475569)); margin-top: 1px; }
.tc-attn-preview { display: flex; flex-direction: column; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 14px); background: var(--card, #fff); overflow: hidden; }
.tc-attn-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-bottom: 1px dashed var(--border, #e2e8f0); background: transparent; padding: 10px 16px;
  color: var(--text, #0f172a); font-size: 13px;
}
.tc-attn-row:last-child { border-bottom: 0; }
.tc-attn-row:hover { background: var(--primary-soft, rgba(37, 99, 235, .06)); }
.tc-attn-row .tc-cell-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Panels + dashboard grids ── */
.tc-panel {
  border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 14px);
  background: var(--card, #fff); padding: 15px 17px; box-shadow: var(--shadow-sm, var(--shadow, 0 2px 8px rgba(15, 23, 42, .04)));
  min-width: 0;
}
.tc-panel-title { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted, var(--muted, #475569)); margin: 0 0 3px; }
.tc-panel-sub { font-size: 11.5px; color: var(--text-muted, var(--muted, #475569)); margin: 0 0 12px; }
.tc-panel .tc-listwrap { border-radius: var(--radius-sm, 10px); }
.tc-ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; align-items: stretch; }
.tc-ov-grid > .tc-panel { display: flex; flex-direction: column; }

/* ── Volume bars (dependency-free DIV chart) ── */
.tc-vol-bars { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding-top: 14px; }
.tc-vol-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.tc-vol-num { font-size: 10.5px; font-weight: 700; color: var(--text-muted, var(--muted, #475569)); font-variant-numeric: tabular-nums; }
.tc-vol-bar { width: 100%; max-width: 30px; background: var(--primary, #2563eb); border-radius: 4px 4px 0 0; opacity: .85; min-height: 3px; }
.tc-vol-bar.is-zero { background: var(--border, #e2e8f0); opacity: 1; }
.tc-vol-day { font-size: 10px; color: var(--text-muted, var(--muted, #475569)); white-space: nowrap; min-height: 13px; }

/* ── Funnel / source distribution rows ── */
.tc-fun { display: flex; flex-direction: column; gap: 4px; }
.tc-fun-row {
  display: grid; grid-template-columns: minmax(96px, 132px) 1fr 44px 46px; align-items: center; gap: 10px;
  width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left;
  padding: 7px 8px; border-radius: var(--radius-sm, 10px); color: var(--text, #0f172a);
}
.tc-fun-row:hover { background: var(--primary-soft, rgba(37, 99, 235, .07)); }
.tc-fun-label { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-fun-row.is-peak .tc-fun-label { font-weight: 800; }
.tc-fun-track { display: block; height: 16px; background: var(--bg, #f8fafc); border: 1px solid var(--border, #e2e8f0); border-radius: 6px; overflow: hidden; }
.tc-fun-fill { display: block; height: 100%; background: var(--primary, #2563eb); opacity: .7; border-radius: 5px 0 0 5px; }
.tc-fun-row.is-peak .tc-fun-fill { opacity: .95; }
.tc-fun-fill.is-alt { background: var(--info, #2563eb); }
.tc-fun-count { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.tc-fun-share { font-size: 11.5px; color: var(--text-muted, var(--muted, #475569)); text-align: right; font-variant-numeric: tabular-nums; }
.tc-fun-summary { margin-top: 16px; }
.tc-fun-summary .tc-qcard { border-left: 3px solid var(--border, #e2e8f0); }

/* ── Mini metric tables ── */
/* Long unbroken names/e-mails wrap inside cards — never page-level overflow. */
.tc-card { overflow-wrap: anywhere; }
.tc-card-name { min-width: 0; }
.tc-table-mini { font-size: 12.5px; }
.tc-table-mini th, .tc-table-mini td { padding: 9px 12px; }
.tc-table-mini td { font-variant-numeric: tabular-nums; }
.tc-table-mini tbody tr { cursor: pointer; }

/* ── Leads workspace header + filters ── */
.tc-leads-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.tc-leads-head .tc-section-sub { margin: 0; }
.tc-result-count { font-size: 12px; color: var(--text-muted, var(--muted, #475569)); white-space: nowrap; padding-bottom: 3px; }
.tc-filters-wrap { margin-bottom: 14px; }
.tc-filters-toggle { display: none; position: relative; gap: 8px; }
.tc-filter-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  /* §8 button contrast: dark --on-primary text on the amber fill (white read ~2.15:1 light / ~1.53:1
     dark). --on-primary is #0F172A in both themes → 8.31:1 (light) / 11.66:1 (dark). */
  border-radius: 999px; background: var(--primary, #2563eb); color: var(--on-primary, #0f172a); font-size: 10.5px; font-weight: 700; padding: 0 5px;
}
.tc-filter-badge[hidden] { display: none !important; }
.tc-clear-filters { min-height: 34px; padding: 6px 12px; font-size: 12.5px; }
.tc-search { max-width: 320px; }

/* ── Lead detail drawer (desktop side panel / mobile bottom sheet) ── */
.tc-drawer-overlay {
  position: fixed; inset: 0; z-index: 2147482800; background: rgba(15, 23, 42, .45);
  display: flex; justify-content: flex-end; align-items: stretch;
}
.tc-drawer {
  width: min(480px, 100%); height: 100%; overflow-y: auto; overscroll-behavior: contain;
  background: var(--card, #fff); color: var(--text, #0f172a);
  border-left: 1px solid var(--border, #e2e8f0); box-shadow: var(--shadow-lg, 0 8px 48px rgba(15, 23, 42, .25));
  display: flex; flex-direction: column;
}
.tc-drawer-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--card, #fff); border-bottom: 1px solid var(--border, #e2e8f0); padding: 14px 18px;
}
.tc-drawer-name { font-size: 16px; font-weight: 800; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-drawer-close { min-height: 34px; padding: 6px 12px; font-size: 12.5px; flex: 0 0 auto; }
.tc-drawer-body { padding: 14px 18px calc(20px + env(safe-area-inset-bottom, 0px)); }
.tc-drawer-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.tc-drawer-section { font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted, var(--muted, #475569)); margin: 18px 0 8px; }
.tc-grid-drawer { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 10px 0 4px; }
.tc-hdot.is-created { background: var(--text-soft, var(--muted, #94a3b8)); }
.tc-hdot.is-reassigned { background: var(--info, #7c3aed); }
.tc-error-retry { margin-top: 12px; }

/* Focus visibility for surfaces that live outside .tc-root */
.tc-drawer-overlay :focus-visible, .tc-filters :focus-visible, .tc-filters-toggle:focus-visible {
  outline: 2px solid var(--primary, #2563eb); outline-offset: 2px; border-radius: 6px;
}

/* ── Responsive: dashboard + drawer + filter sheet ── */
@media (max-width: 1024px) {
  .tc-ov-grid { grid-template-columns: 1fr; }
  .tc-col-opt { display: none; }
}
@media (max-width: 720px) {
  .tc-ov-head { flex-direction: column; align-items: stretch; }
  .tc-ov-tools { justify-content: space-between; }
  .tc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tc-kpi-value { font-size: 22px; }
  .tc-attn-card { align-items: flex-start; }
  .tc-attn-card .tc-btn { width: 100%; }
  .tc-vol-bars { height: 120px; gap: 2px; }
  .tc-fun-row { grid-template-columns: minmax(84px, 104px) 1fr 36px 42px; gap: 8px; padding: 8px 6px; }
  .tc-panel { padding: 13px 14px; }
  /* Mini metric tables (Equipes/Corretores) have no card fallback: keep them
     visible as horizontally scrollable tables instead of the generic mobile
     table-hide above. */
  .tc-listwrap.tc-mini-scroll { border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-sm, 10px); background: var(--card, #fff); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tc-mini-scroll .tc-table { display: table; min-width: 460px; }

  /* Filters become an explicit bottom sheet behind a "Filtros" toggle. */
  .tc-filters-toggle { display: inline-flex; }
  .tc-filters { display: none; }
  .tc-filters.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147482900;
    background: var(--card, #fff); border-top: 1px solid var(--border, #e2e8f0);
    border-radius: 18px 18px 0 0; box-shadow: var(--shadow-lg, 0 -8px 28px rgba(15, 23, 42, .2));
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    max-height: 72vh; overflow-y: auto;
  }
  /* Column-direction sheet: neutralise the inline-bar flex-basis (which would
     otherwise become a 200px HEIGHT) and stretch controls full-width. */
  .tc-filters.is-open .tc-input, .tc-filters.is-open .tc-select { width: 100%; max-width: none; flex: 0 0 auto; }
  .tc-search { max-width: none; }
  .tc-leads-head { align-items: flex-start; }

  /* Drawer becomes a bottom sheet. */
  .tc-drawer-overlay { justify-content: stretch; align-items: flex-end; }
  .tc-drawer { width: 100%; height: 92%; border-left: 0; border-top: 1px solid var(--border, #e2e8f0); border-radius: 18px 18px 0 0; }
}
@media (min-width: 721px) {
  .tc-filters { display: flex; }
}
@media (prefers-reduced-motion: no-preference) {
  .tc-drawer { animation: tc-drawer-in .18s ease-out; }
  @keyframes tc-drawer-in { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
  @media (max-width: 720px) {
    .tc-drawer { animation: tc-sheet-in .2s ease-out; }
  }
}
@keyframes tc-sheet-in { from { transform: translateY(28px); opacity: .6; } to { transform: none; opacity: 1; } }

/* ============================================================================
   T4-EF — Equipe management workspace (additive; scoped .tc-* / .tc-ef-*).
   A native evolution of the Central: consumes the canonical Fase A/F1 tokens
   with the same var(--token, fallback) convention. No bare body/html rules, no
   external imports, no inline styles (dynamic geometry is set via element.style).
   Reuses .tc-btn / .tc-kpi / .tc-table / .tc-panel / .tc-chip / .tc-modal /
   .tc-drawer / .tc-attn-* verbatim; only genuinely new widgets get a class.
   ============================================================================ */

.tc-ef-head { margin-bottom: 10px; }
.tc-ef-head .tc-section-sub { margin: 0; }

/* Sub-navigation — a scrollable tab strip (one product, one nav; no nested pages). */
.tc-ef-subnav {
  display: flex; gap: 2px; overflow-x: auto; margin: 4px 0 18px; padding-bottom: 1px;
  border-bottom: 1px solid var(--border, #e2e8f0); -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.tc-ef-seg-btn {
  border: 0; background: transparent; cursor: pointer; white-space: nowrap; flex: 0 0 auto;
  padding: 9px 14px; min-height: 40px; font-size: 13px; font-weight: 600;
  color: var(--text-muted, var(--muted, #475569)); border-bottom: 2px solid transparent;
}
.tc-ef-seg-btn:hover { color: var(--text, #0f172a); }
/* Active sub-nav tab: keep the bright amber underline (brand, decorative) but darken the label TEXT
   for legibility on the light card surface (2.15:1 → 5.02:1; dark unchanged). */
.tc-ef-seg-btn.is-active { color: var(--tc-accent-text, #b45309); border-bottom-color: var(--primary, #2563eb); }
.tc-ef-seg-btn:focus-visible { outline: 2px solid var(--primary, #2563eb); outline-offset: -2px; border-radius: var(--radius-sm, 10px) var(--radius-sm, 10px) 0 0; }

/* Section container + toolbar (title + primary action). */
.tc-ef-host { display: flex; flex-direction: column; gap: 16px; }
.tc-ef-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.tc-ef-toolbar .tc-section-title { margin: 0; }
.tc-ef-toolbar .tc-section-sub { margin: 2px 0 0; }

/* Corretores filter row — compact inline controls that wrap gracefully. */
.tc-ef-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tc-ef-filters .tc-search { flex: 1 1 200px; min-width: 160px; }
.tc-ef-filters .tc-select { flex: 0 0 auto; }

/* Action button clusters (drawer + card). */
.tc-ef-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.tc-ef-actions .tc-btn { min-height: 38px; }

/* Table action cell (used by EQUIPE tables and the T4-CD leads list). Keep buttons on one line and
   spaced when a cell carries more than one action; alignment stays the table default (unchanged). */
.tc-cell-act { white-space: nowrap; }
.tc-cell-act .tc-btn + .tc-btn { margin-left: 8px; }

/* Conditional team field inside role/invite modals. */
.tc-ef-teamfield[hidden] { display: none; }

/* Acceptance-token field (one-time reveal). */
.tc-ef-token {
  width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; letter-spacing: .2px; word-break: break-all;
  background: var(--bg, #f8fafc); color: var(--text, #0f172a);
}

/* Destructive button — restrained (outline + danger text), semantic-token driven. */
.tc-btn-danger { color: var(--danger, #dc2626); border-color: var(--danger-soft, rgba(220, 38, 38, .32)); background: var(--card, #fff); }
.tc-btn-danger:hover:not([disabled]) { background: var(--danger-soft, rgba(220, 38, 38, .10)); }
.tc-btn-danger:focus-visible { outline: 2px solid var(--danger, #dc2626); outline-offset: 1px; }

/* Role badge reuse: neutral secondary pill for role in tables (kept distinct from primary mode badge). */
.tc-ef-toolbar + .tc-ef-filters { margin-top: 2px; }

@media (max-width: 720px) {
  .tc-ef-toolbar .tc-btn-primary { width: 100%; }
  .tc-ef-actions .tc-btn { flex: 1 1 auto; }
}

/* P1-3 — invite redemption ("Entrar em uma empresa"). */
.tc-join-cta { margin-top: 18px; display: flex; justify-content: center; }
.tc-join-preview { margin: 6px 0 2px; }
.tc-join-preview .tc-drawer-section { margin-top: 8px; }
.tc-trunc-note { color: var(--tc-warn-text, #92400e); }

/* ── AAA touch targets (§22): raise interactive controls to the ≥44px canonical bar on coarse-pointer
   (touch) devices WITHOUT changing desktop/mouse density. Every selector is .tc-* (teams-scoped), so
   the personal CRM is untouched. Desktop pointers keep the existing compact 34–40px geometry. ── */
@media (pointer: coarse) {
  .tc-btn,
  .tc-input, .tc-select, .tc-modal textarea.tc-input,
  .tc-tab, .tc-seg-btn, .tc-ef-seg-btn,
  .tc-ctx-item, .tc-ctx-btn, .tc-close, .tc-attn-row,
  .tc-ef-actions .tc-btn, .tc-clear-filters, .tc-refresh, .tc-drawer-close, .tc-filters-toggle,
  .tc-launch-mobile { min-height: 44px; }
}

/* ============================================================================
   T4-EF-AI A2.7 — Configurações › Inteligência Artificial (manager AI provider config).
   Additive; scoped .tc-ai-*. Reuses the canonical Fase A/F1 tokens + existing .tc-panel /
   .tc-select / .tc-input / .tc-btn / .tc-chip / .tc-grid / .tc-field / .tc-ef-* verbatim, so
   light/dark themes apply automatically. The Provedor/Modelo <select>s reuse .tc-select, so the
   canonical per-theme color-scheme authority above governs their native option popups (never a
   navy dropdown in light mode). No external imports, no bare body/html rules, no inline styles.
   ============================================================================ */

/* Constrained reading column — balanced width on desktop, never stretched form controls. */
.tc-ai-layout { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.tc-ai-intro { margin: 2px 0; }
.tc-ai-intro .tc-section-title { margin: 0 0 4px; }
.tc-ai-intro .tc-section-sub { margin: 0; }

/* Cards reuse .tc-panel; only the internal rhythm is new. */
.tc-ai-card { display: flex; flex-direction: column; gap: 12px; }
.tc-ai-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tc-ai-card-title { font-size: 13px; font-weight: 700; letter-spacing: .2px; margin: 0; }
.tc-ai-meta { margin: 0; }
.tc-ai-empty { margin: 0; }

/* Vertical form field (label above control) — mirrors the modal field rhythm on the page. */
.tc-ai-field { display: flex; flex-direction: column; gap: 6px; }
.tc-ai-field .tc-field-label { margin: 0; }
.tc-ai-field .tc-select, .tc-ai-field .tc-input { width: 100%; }

/* API-key input + LOCAL reveal toggle (never prefilled; reveal state resets on every re-render). */
.tc-ai-key { position: relative; display: block; }
.tc-ai-key .tc-ai-key-input {
  width: 100%; padding-right: 46px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .3px;
}
/* Suppress the browser's native password reveal control so it never doubles our toggle. */
.tc-ai-key-input::-ms-reveal, .tc-ai-key-input::-ms-clear { display: none; }
.tc-ai-key-reveal {
  position: absolute; top: 0; right: 0; bottom: 0; width: 40px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted, var(--muted, #475569)); border-radius: 0 var(--radius-sm, 10px) var(--radius-sm, 10px) 0;
}
.tc-ai-key-reveal:hover { color: var(--text, #0f172a); }
.tc-ai-key-reveal[aria-pressed="true"] { color: var(--tc-accent-text, #b45309); }
.tc-ai-key-reveal .tc-ai-eye { display: inline-flex; }

/* Info / warning note (provider change requires key, first-config hint). Restrained, token-driven. */
.tc-ai-note {
  font-size: 12.5px; margin: 0; padding: 9px 12px; border-radius: var(--radius-sm, 10px);
  color: var(--text-muted, var(--muted, #475569)); background: var(--bg, #f8fafc); border: 1px solid var(--border, #e2e8f0);
}
.tc-ai-note.is-warn { color: var(--tc-warn-text, #92400e); background: var(--warning-soft, rgba(217, 119, 6, .10)); border-color: var(--warning-border, rgba(217, 119, 6, .28)); }
.tc-ai-note[hidden] { display: none !important; }

/* Inline async status line (aria-live). Mirrors .tc-modal-status semantics; collapses when empty. */
.tc-ai-msg { font-size: 12.5px; min-height: 18px; margin: 0; color: var(--text-muted, var(--muted, #475569)); }
/* IA async status ("Testando conexão…", "Salvando…"): darker amber text for legibility on the white
   card (2.15:1 → 5.02:1; dark unchanged). Progress meaning is carried by the WORD + aria-live, not
   colour alone; is-ok/is-error keep the canonical success/danger tokens. */
.tc-ai-msg.is-progress { color: var(--tc-accent-text, #b45309); }
.tc-ai-msg.is-error { color: var(--danger, #dc2626); }
.tc-ai-msg.is-ok { color: var(--success, #16a34a); }
.tc-ai-msg:empty { min-height: 0; }

.tc-ai-actions { margin-top: 2px; }

/* Danger (remove) card — restrained danger accent (no scary full-red block). */
.tc-ai-danger { border-color: var(--danger-soft, rgba(220, 38, 38, .28)); }
.tc-ai-danger .tc-ai-card-title { color: var(--danger, #dc2626); }

@media (max-width: 720px) {
  .tc-ai-layout { max-width: none; }
  .tc-ai-actions .tc-btn { flex: 1 1 auto; }
}
/* AAA ≥44px touch target for the reveal toggle on coarse pointers (spans the field height). */
@media (pointer: coarse) { .tc-ai-key-reveal { width: 44px; } }

/* ============================================================================
   T4-EF-AI-B — Assistente do Gestor (grounded manager copilot). Additive, scoped
   .tc-asst-*. A docked drawer (right-side desktop / bottom sheet mobile) — NOT a
   floating chatbot. Reuses the canonical tokens (--card/--text/--muted/--border/
   --primary/--on-primary/--radius-*/--shadow-*) so light+dark apply automatically.
   Grounded numbers use --tc-accent-text (legible amber in both themes).
   ============================================================================ */

/* Header launcher (manager-only; toggled hidden by JS). The brand --primary is AMBER, which is too
   weak as small TEXT on the light amber --primary-soft (~2:1 — the A2.7 finding). So the LABEL uses the
   legible scoped --tc-accent-text (amber-700/800 in light, bright amber in dark) — never amber-on-amber. */
.tc-asst-launcher {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  height: 34px; padding: 0 13px; border-radius: 999px;
  background: var(--primary-soft, rgba(37, 99, 235, .1));
  border: 1px solid var(--primary-border, rgba(37, 99, 235, .3));
  color: var(--tc-accent-text, #b45309); font-size: 12.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.tc-asst-launcher:hover { filter: brightness(.97); }
.tc-asst-launcher[hidden] { display: none; }
.tc-asst-launcher-ico { display: inline-flex; }

/* Overlay + drawer */
.tc-asst-overlay {
  position: fixed; inset: 0; z-index: 2147482850; background: rgba(15, 23, 42, .45);
  display: flex; justify-content: flex-end; align-items: stretch;
}
.tc-asst-drawer {
  width: min(460px, 100%); height: 100%; overflow: hidden;
  background: var(--card, #fff); color: var(--text, #0f172a);
  border-left: 1px solid var(--border, #e2e8f0);
  box-shadow: var(--shadow-lg, 0 8px 48px rgba(15, 23, 42, .25));
  display: flex; flex-direction: column;
}
.tc-asst-head {
  flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  background: var(--card, #fff); border-bottom: 1px solid var(--border, #e2e8f0); padding: 14px 18px;
}
.tc-asst-title { font-size: 16px; font-weight: 800; margin: 0; color: var(--text, #0f172a); }
.tc-asst-sub { font-size: 12px; color: var(--text-muted, var(--muted, #64748b)); margin: 2px 0 0; }
.tc-asst-close { min-height: 34px; padding: 6px 12px; font-size: 12.5px; flex: 0 0 auto; }

/* Body: scrollable conversation */
.tc-asst-body {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 18px;
}

/* Empty state + suggested prompts */
.tc-asst-empty { display: flex; flex-direction: column; gap: 10px; margin: auto 0; }
.tc-asst-empty-title { font-size: 16px; font-weight: 800; color: var(--text, #0f172a); }
.tc-asst-empty-sub { font-size: 13px; line-height: 1.5; color: var(--text-muted, var(--muted, #64748b)); margin: 0; }
.tc-asst-prompts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.tc-asst-prompt {
  text-align: left; padding: 11px 13px; border-radius: var(--radius-sm, 10px);
  background: var(--bg, #f8fafc); border: 1px solid var(--border, #e2e8f0);
  color: var(--text, #0f172a); font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1.35;
}
.tc-asst-prompt:hover { border-color: var(--primary-border, rgba(37, 99, 235, .4)); background: var(--primary-soft, rgba(37, 99, 235, .07)); }

/* Exchange (question + answer) */
.tc-asst-exchange { display: flex; flex-direction: column; gap: 12px; }
.tc-asst-exchange + .tc-asst-exchange { border-top: 1px solid var(--border, #e2e8f0); padding-top: 18px; }
.tc-asst-q { align-self: flex-end; max-width: 88%; text-align: right; }
.tc-asst-q-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted, var(--muted, #94a3b8)); margin-bottom: 3px; }
.tc-asst-q-text {
  display: inline-block; text-align: left; padding: 9px 13px; border-radius: 14px 14px 4px 14px;
  background: var(--primary, #2563eb); color: var(--on-primary, #fff); font-size: 13px; line-height: 1.4;
  white-space: pre-wrap; word-break: break-word;
}

/* Answer */
.tc-asst-a { display: flex; flex-direction: column; gap: 12px; }
.tc-asst-a-title { font-size: 14.5px; font-weight: 800; margin: 0; color: var(--text, #0f172a); }
.tc-asst-summary, .tc-asst-li-text { font-size: 13px; line-height: 1.55; color: var(--text, #0f172a); margin: 0; }
/* A grounded number — server-resolved from evidence; emphasised, never client-computed. */
.tc-asst-val { font-weight: 700; color: var(--tc-accent-text, #b45309); font-variant-numeric: tabular-nums; }
.tc-asst-sec { display: flex; flex-direction: column; gap: 6px; }
.tc-asst-sec-title { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted, var(--muted, #64748b)); }
.tc-asst-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.tc-asst-li { font-size: 13px; line-height: 1.5; color: var(--text, #0f172a); }
.tc-asst-unknowns .tc-asst-li { color: var(--text-muted, var(--muted, #64748b)); }

/* Evidence — "Baseado em" chips */
.tc-asst-evidence { display: flex; flex-direction: column; gap: 7px; padding-top: 4px; }
.tc-asst-ev-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-asst-ev { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--bg, #f8fafc); border: 1px solid var(--border, #e2e8f0); }
.tc-asst-ev.is-partial { border-style: dashed; opacity: .85; }
.tc-asst-ev-label { font-size: 11.5px; font-weight: 700; color: var(--text, #0f172a); }
.tc-asst-ev-meta { font-size: 10.5px; color: var(--text-muted, var(--muted, #94a3b8)); }

/* Trusted deep-link actions */
.tc-asst-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.tc-asst-action { min-height: 34px; padding: 6px 13px; font-size: 12.5px; font-weight: 700; }

/* Pending + error */
.tc-asst-pending { display: flex; align-items: center; gap: 9px; color: var(--text-muted, var(--muted, #64748b)); font-size: 13px; }
.tc-spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.tc-asst-err { padding: 12px 14px; border-radius: var(--radius-sm, 10px); background: var(--warning-soft, #fef3c7); border: 1px solid var(--warning-border, rgba(217, 119, 6, .3)); }
.tc-asst-err-text { font-size: 13px; line-height: 1.45; color: var(--tc-warn-text, #92400e); }
.tc-asst-err-config { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tc-asst-cta { min-height: 36px; }

/* Footer: question input */
.tc-asst-footer {
  flex: 0 0 auto; border-top: 1px solid var(--border, #e2e8f0); background: var(--card, #fff);
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 5px;
}
.tc-asst-inputrow { display: flex; align-items: flex-end; gap: 8px; }
.tc-asst-input {
  flex: 1 1 auto; resize: none; min-height: 42px; max-height: 140px;
  padding: 10px 12px; border-radius: var(--radius-sm, 10px);
  background: var(--bg, #f8fafc); border: 1px solid var(--border, #e2e8f0);
  color: var(--text, #0f172a); font: inherit; font-size: 13px; line-height: 1.4;
}
.tc-asst-input:focus { outline: none; border-color: var(--primary, #2563eb); box-shadow: 0 0 0 3px var(--primary-soft, rgba(37, 99, 235, .18)); }
.tc-asst-input:disabled { opacity: .6; cursor: not-allowed; }
.tc-asst-send { flex: 0 0 auto; min-height: 42px; padding: 0 16px; font-size: 13px; font-weight: 700; }
.tc-asst-send:disabled { opacity: .55; cursor: not-allowed; }
.tc-asst-hint { font-size: 10.5px; color: var(--text-muted, var(--muted, #94a3b8)); }

/* Focus visibility for the drawer (lives outside .tc-root) */
.tc-asst-overlay :focus-visible { outline: 2px solid var(--primary, #2563eb); outline-offset: 2px; border-radius: 6px; }

/* Mobile: full-height bottom sheet, reachable above the bottom nav + safe area */
@media (max-width: 720px) {
  .tc-asst-overlay { justify-content: stretch; align-items: flex-end; }
  .tc-asst-drawer { width: 100%; height: 94%; border-left: 0; border-top: 1px solid var(--border, #e2e8f0); border-radius: 18px 18px 0 0; }
  .tc-asst-launcher-lbl { display: none; }
  .tc-asst-launcher { padding: 0 10px; }
  .tc-asst-q { max-width: 92%; }
}
/* Coarse-pointer AAA touch targets */
@media (pointer: coarse) {
  .tc-asst-launcher, .tc-asst-action, .tc-asst-close { min-height: 40px; }
  .tc-asst-prompt { padding: 13px; }
}
@media (prefers-reduced-motion: no-preference) {
  .tc-asst-drawer { animation: tc-asst-in .18s ease-out; }
  @keyframes tc-asst-in { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
  @media (max-width: 720px) {
    .tc-asst-drawer { animation: tc-asst-sheet-in .2s ease-out; }
    @keyframes tc-asst-sheet-in { from { transform: translateY(28px); opacity: .6; } to { transform: none; opacity: 1; } }
  }
}

/* ══════════════════ Gestão — management intelligence (T4-EF-AI-C) ══════════════════
 * Reuses the canonical .tc-* design tokens (var(--card/--border/--text/--muted/--primary…))
 * so light + dark themes are inherited automatically. No new global token is introduced. */
.tc-mgmt-host { display: flex; flex-direction: column; gap: 14px; }
.tc-mgmt-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tc-mgmt-intro .tc-section-sub { flex: 1 1 320px; margin: 0; }
.tc-mgmt-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.tc-mgmt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tc-mgmt-card-title { margin: 0; font-size: 15px; font-weight: 650; color: var(--text, #0f172a); }
.tc-mgmt-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tc-mgmt-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tc-mgmt-muted { color: var(--text-muted, #64748b); font-size: 13px; }
.tc-btn-danger { color: var(--danger, #b91c1c); border-color: var(--danger-soft, rgba(185,28,28,.28)); }
.tc-btn-danger:hover { background: var(--danger-soft, rgba(185,28,28,.10)); }
.tc-btn-primary.tc-btn-danger { color: var(--on-primary, #fff); background: var(--danger, #b91c1c); border-color: var(--danger, #b91c1c); }

/* Goal progress bar */
.tc-mgmt-progress { display: flex; flex-direction: column; gap: 6px; }
.tc-mgmt-progress-bar { position: relative; height: 10px; border-radius: 999px; background: var(--primary-soft, rgba(37,99,235,.12)); overflow: hidden; }
.tc-mgmt-progress-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--primary, #2563eb); transition: width .3s ease; }
.tc-mgmt-progress-fill.is-met { background: var(--success, #16a34a); }
.tc-mgmt-progress-meta { font-size: 12px; color: var(--text-muted, #64748b); }

/* Search / source excerpts */
.tc-mgmt-search-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tc-mgmt-search-row .tc-input, .tc-mgmt-search-row .tc-select { flex: 1 1 220px; }
.tc-mgmt-search-out { display: flex; flex-direction: column; gap: 10px; }
.tc-mgmt-source { border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-sm, 10px); padding: 10px 12px; background: var(--bg, #f8fafc); }
.tc-mgmt-source-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tc-mgmt-source-excerpt { margin: 0; font-size: 13px; color: var(--text, #0f172a); white-space: pre-wrap; }

/* Items / talking points / unknowns */
.tc-mgmt-item { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
.tc-mgmt-item-text { flex: 1; font-size: 14px; color: var(--text, #0f172a); }
.tc-mgmt-subhead { margin: 8px 0 2px; font-size: 13px; font-weight: 650; color: var(--text-soft, #334155); }
.tc-mgmt-tp { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.tc-mgmt-tp li { font-size: 14px; color: var(--text, #0f172a); }
.tc-mgmt-unknowns { margin: 0; padding-left: 18px; }
.tc-mgmt-unknowns li { font-size: 13px; color: var(--text-muted, #64748b); }

/* Rituals grid */
.tc-mgmt-ritual-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tc-mgmt-ritual-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px; min-height: 88px; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 14px); background: var(--card, #fff); color: var(--text, #0f172a); cursor: pointer; }
.tc-mgmt-ritual-card:hover { border-color: var(--primary-border, var(--primary, #2563eb)); background: var(--primary-soft, rgba(37,99,235,.06)); }
.tc-mgmt-ritual-label { font-weight: 650; font-size: 14px; }
.tc-mgmt-ritual-q { font-size: 12px; color: var(--text-muted, #64748b); }
.tc-mgmt-ritual-result, .tc-mgmt-dossier, .tc-mgmt-scenario-out { display: flex; flex-direction: column; gap: 12px; }

/* Textarea + wide modal */
.tc-mgmt-textarea { min-height: 180px; resize: vertical; font-family: inherit; line-height: 1.45; }
.tc-modal-wide { max-width: 640px; width: min(94vw, 640px); }

/* What-if scenario disclaimer (visible, never tooltip-only) */
.tc-mgmt-scenario-banner { border: 1px solid var(--warning-border, rgba(245,158,11,.35)); background: var(--warning-soft, rgba(245,158,11,.10)); color: var(--tc-warn-text, #92400e); border-radius: var(--radius-sm, 10px); padding: 8px 12px; font-size: 13px; }
.tc-mgmt-scenario-inputs { display: flex; flex-direction: column; gap: 8px; }
/* Same leak as the mobile intro fix: the global .tc-input flex-basis (200px) is HORIZONTAL in row
   flows, but this host is a COLUMN at every viewport — without a reset the hypothesis inputs are
   forced ~200px TALL (giant empty box). Reset to the natural (min-height) control height. */
.tc-mgmt-scenario-inputs .tc-input { flex: 0 0 auto; }
.tc-mgmt-scenario-result { display: flex; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px dashed var(--border, #e2e8f0); font-size: 15px; color: var(--text, #0f172a); }

/* Coarse-pointer AAA touch targets */
@media (pointer: coarse) {
  .tc-mgmt-ritual-card { min-height: 96px; }
  .tc-mgmt-card-actions .tc-btn, .tc-mgmt-search-row .tc-btn { min-height: 40px; }
}
/* Mobile: single-column ritual grid + full-width controls */
@media (max-width: 520px) {
  .tc-mgmt-ritual-grid { grid-template-columns: 1fr; }
  .tc-mgmt-intro { flex-direction: column; align-items: stretch; }
  /* Column flow would inherit the desktop 320px flex-basis as a VERTICAL reservation (intro text
     ~320px tall, CTA pushed far below) — reset so the intro takes only its natural content height. */
  .tc-mgmt-intro .tc-section-sub { flex: 0 0 auto; }
  .tc-mgmt-intro .tc-btn { width: 100%; }
}

/* ══════════════════ T4-EF-AI-D — Atenções / Ações propostas / Evolução da IA ══════════════════
 * Reuses the canonical .tc-* tokens/components (.tc-panel/.tc-mgmt-card/.tc-chip/.tc-btn/.tc-modal) so
 * light + dark themes are inherited automatically. Only additive helpers are introduced. */
/* "Acompanhar" / "Proposta" follow-up chip — amber, theme-aware via the same contrast-corrected token as
   the What-If banner (light amber-800, dark bright-amber literal). Never a red alarm. */
.tc-chip-warn { color: var(--tc-warn-text, #92400e); border-color: var(--warning-border, rgba(245,158,11,.35)); background: var(--warning-soft, rgba(245,158,11,.10)); }
/* HITL review modal — one labelled section per §13 review requirement (ação / porquê / evidências /
   escopo / afetados / campos a confirmar / possível efeito). */
.tc-draft-section { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid var(--border, #e2e8f0); }
.tc-draft-section:first-of-type { border-top: 0; }
.tc-draft-section .tc-field-value { font-size: 14px; color: var(--text, #0f172a); white-space: pre-wrap; }
.tc-draft-fields { display: flex; flex-direction: column; gap: 6px; }
/* This host is a COLUMN at every viewport — reset the global .tc-input horizontal flex-basis so the
   confirm fields render at their natural control height (same leak the What-If inputs fix). */
.tc-draft-fields .tc-input { flex: 0 0 auto; }

/* ══════════════════ T4-GH — Customer 360 / Distribuição de leads / Meta Lead Ads ══════════════════
 * Reuses the canonical .tc-* tokens/components (.tc-panel, .tc-mgmt-card, .tc-chip, .tc-btn, .tc-modal,
 * .tc-table, .tc-grid, .tc-field, .tc-ef-subnav) so light + dark themes are inherited automatically.
 * Only additive helpers are introduced; no bare body/html rules, no inline styles, no new global token. */
.tc-gh-host { display: flex; flex-direction: column; gap: 14px; }
.tc-gh-person { display: flex; flex-direction: column; gap: 10px; }
.tc-gh-note {
  font-size: 12.5px; color: var(--text-muted, var(--muted, #475569)); background: var(--bg, #f8fafc);
  border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-sm, 10px); padding: 10px 12px; margin: 0;
}
.tc-gh-opps { display: flex; flex-direction: column; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-sm, 10px); overflow: hidden; }
.tc-gh-opp {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-bottom: 1px dashed var(--border, #e2e8f0); background: transparent; padding: 9px 12px;
  color: var(--text, #0f172a); font: inherit;
}
.tc-gh-opps > [role="listitem"]:last-child .tc-gh-opp { border-bottom: 0; }
.tc-gh-opp:hover { background: var(--primary-soft, rgba(37, 99, 235, .06)); }
.tc-gh-opp-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tc-gh-opp-sub { font-size: 11.5px; color: var(--text-muted, var(--muted, #475569)); word-break: break-word; }
.tc-gh-candidates { display: flex; flex-direction: column; gap: 8px; }
.tc-gh-candidate {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-sm, 10px); padding: 10px 12px; background: var(--bg, #f8fafc);
}
.tc-gh-candidate-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.tc-gh-health { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tc-gh-recent { display: flex; flex-direction: column; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-sm, 10px); overflow: hidden; }
.tc-gh-recent-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-bottom: 1px dashed var(--border, #e2e8f0); font-size: 12.5px; }
.tc-gh-recent-row:last-child { border-bottom: 0; }
.tc-gh-recent-main { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tc-gh-help { font-size: 12.5px; color: var(--text-muted, var(--muted, #475569)); margin: 6px 0 0; }
.tc-gh-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; }
.tc-gh-host .tc-mgmt-card .tc-empty { padding: 26px 16px; }
/* A failed automatic distribution is never colour-coded like a successful assignment. */
.tc-hdot.is-left_unassigned { background: var(--warning, #d97706); }
.tc-gh-host .tc-cell-act .tc-btn + .tc-btn { margin-left: 6px; }
.tc-gh-block { display: block; margin-top: 3px; }
@media (max-width: 720px) {
  .tc-gh-candidate .tc-btn, .tc-gh-recent-row .tc-btn { width: 100%; }
  .tc-gh-health { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-gh-host .tc-mgmt-card-head .tc-btn-primary { width: 100%; }
}
@media (pointer: coarse) {
  .tc-gh-opp { min-height: 44px; }
  /* Every control GH adds or sits next to in the drawer/dialogs meets the 44px touch minimum. */
  .tc-gh-candidate .tc-btn, .tc-gh-recent-row .tc-btn, .tc-gh-host .tc-btn, .tc-gh-person .tc-btn,
  .tc-detail-actions .tc-btn, .tc-modal-actions .tc-btn { min-height: 44px; }
}

/* ── PORTAL-P2 — Leads › Portais (host ORG do portal-hub.js) ──────────────────────────────────────
   Os cartões/contexto/saúde (.ph-*) vêm de styles.css (mesmo produto do CRM pessoal); aqui só a
   moldura da Central. Tokens do tema; alvos de toque >= 44 px em ponteiro grosso. */
.tc-portal-hub { display: flex; flex-direction: column; gap: 14px; }
.tc-portal-section, .tc-portal-connection { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md, 12px); background: var(--card); }
.tc-portal-h3 { margin: 0 0 6px; font-size: 14px; font-weight: 800; color: var(--text); }
.tc-portal-list { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 8px; }
@media (min-width: 1000px) { .tc-portal-list { grid-template-columns: 1fr 1fr; } }
.tc-portal-empty { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.tc-portal-error { margin: 0; font-size: 13px; color: var(--danger, #dc2626); }
.tc-portal-counters { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); }
.tc-portal-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.tc-portal-link { flex: 1 1 240px; }
.tc-portal-connection label { display: block; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--muted); }
.tc-portal-confirm { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--danger, #dc2626); border-radius: var(--radius-sm, 10px); font-size: 13px; color: var(--text); }
.tc-portal-more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text); padding: 8px 0; min-height: 32px; }
.tc-portal-listing-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tc-portal-listing-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm, 10px); }
.tc-portal-listing-name { font-weight: 700; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.tc-portal-code { font-size: 11.5px; color: var(--muted); }
.tc-portal-context { margin-top: 10px; }
@media (pointer: coarse) {
  .tc-portal-hub .tc-btn, .tc-portal-hub .tc-input, .tc-portal-more summary { min-height: 44px; }
}