/*
  Cardexa Design System — SKIN "console" (redesign do Console da Administradora, HANDOFF-CONSOLE §1-§3/§5;
  DEC-BRAND do dono: o Console é MARCA CARDEXA, painel IRMÃO do Dashboard). Folha ADITIVA carregada SÓ pelo
  head Cardexa.Cortex.Console (Dashboard segue no dashboard.css; WebApp nas três folhas base). Contém, nesta
  ordem: (1) as fontes self-host do protótipo (IBM Plex + Material Symbols — os MESMOS woff2 de ../fonts do
  pacote, zero CDN); (2) o PORT do bloco :root do protótipo como tokens --cxc-* — os MESMOS VALORES do skin
  do Dashboard (--cxd-*), nenhum valor novo; (3) o RE-MAPEAMENTO da camada semântica --cx-* sob a raiz do
  skin com os valores do tema `cardexa-dash` (InPackageTenantThemeSource.Dashboard — um teste guarda a
  coerência): a maquinaria de tema-por-tenant NÃO é removida (o head segue materializando o tema resolvido
  em data-cx-theme + <style data-cx-theme-vars>), mas o VISUAL entregue é Cardexa — o seletor
  .cx-root.cxc-root (0,2,0) vence o bloco do tema (0,1,0) por especificidade; (4) os componentes cxc-* do
  protótipo (casca com sidebar única §1, drawer §2, Produto & Parâmetros §3, rastro de alçada §5);
  (5) re-tunagem ESCOPADA dos componentes cx-* sob .cxc-root — nunca uma classe compartilhada é alterada.
*/

/* ── (1) Fontes self-host (subsets latin + latin-ext do protótipo) ─────────────────────────────────────── */
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/IBMPlexSans-400-20.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/IBMPlexSans-400-21.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/IBMPlexMono-400-04.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/IBMPlexMono-400-05.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/IBMPlexMono-500-09.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/IBMPlexMono-500-10.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/IBMPlexMono-600-14.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/IBMPlexMono-600-15.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 400;
  src: url("../fonts/MaterialSymbolsOutlined-400-22.woff2") format('woff2');
}

/* Ícone por LIGADURA (ex.: <span class="msy">tune</span>) — mesmo contrato do protótipo/dashboard.css. */
.msy {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; font-size: 20px; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap;
  word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ── (2) Tokens do protótipo (HANDOFF-CONSOLE, base visual) — MESMOS VALORES do skin do Dashboard ──────── */
.cxc-root {
  /* marca (Manual da Marca, decisão 119: marca em fundo claro / azul-noite do chrome / container / neon) */
  --cxc-brand: #08655A; --cxc-brand-2: #0B1020; --cxc-brand-container: #D6FAF3; --cxc-brand-on-dark: #22E0C8;
  /* neutros */
  --cxc-n900: #11151E; --cxc-n700: #3A414D; --cxc-n500: #69707C; --cxc-n400: #AAB1BB;
  --cxc-n200: #CBD1D8; --cxc-n100: #D6DDE1; --cxc-n50: #ECEFF1; --cxc-white: #FFFFFF;
  /* status */
  --cxc-ok: #1E9E5A; --cxc-ok-text: #0E6B3C; --cxc-ok-bg: #E5F4EB;
  --cxc-err: #D14343; --cxc-err-text: #B02A2A; --cxc-err-bg: #FAE8E8;
  --cxc-warn: #C2820E; --cxc-warn-text: #8A5C06; --cxc-warn-bg: #FBF0DA;
  --cxc-info: #2C7BD6; --cxc-info-text: #1A5BAE; --cxc-info-bg: #E4EEFA;
  /* tipografia */
  --cxc-sans: 'IBM Plex Sans', Helvetica, system-ui, sans-serif;
  --cxc-mono: 'IBM Plex Mono', ui-monospace, monospace;
  /* espaçamento 8pt */
  --cxc-sm: 8px; --cxc-md: 12px; --cxc-lg: 16px; --cxc-xl: 24px; --cxc-2xl: 32px; --cxc-3xl: 48px; --cxc-4xl: 64px;
  /* raio */
  --cxc-r-sm: 8px; --cxc-r-md: 12px; --cxc-r-lg: 16px; --cxc-r-full: 999px;
  /* ALTURA DA TOPBAR, em UM lugar (ATEND-UI-DESIGN-FIX-2, defeito D-1). Ela era um 56 escrito só na regra da
     topbar, e a tela do Atendimento precisa DESCONTÁ-LA para caber na viewport sem sobrepor nada. Duas telas
     lendo o mesmo token nunca divergem; duas telas repetindo o número divergem no dia em que uma delas muda. */
  --cxc-topbar-h: 56px;
  /* sombras */
  --cxc-sh-1: 0 1px 2px rgba(11, 16, 32, .06), 0 1px 3px rgba(11, 16, 32, .04);
  --cxc-sh-2: 0 4px 12px rgba(11, 16, 32, .08), 0 2px 4px rgba(11, 16, 32, .04);
  --cxc-sh-pop: 0 12px 32px rgba(11, 16, 32, .16);
}

/* ── (3) DEC-BRAND: re-mapeamento da camada semântica sob a raiz do skin ───────────────────────────────
   Os componentes cx-* leem SÓ --cx-* — este bloco os pinta de Cardexa por cima do tema do tenant (que
   segue materializado por baixo, prova de multi-tenancy intocada). Valores = tema `cardexa-dash`. */
.cx-root.cxc-root {
  --cx-color-surface: #FFFFFF;
  --cx-color-surface-muted: #ECEFF1;
  --cx-color-surface-raised: #FFFFFF;
  --cx-color-text: #11151E;
  --cx-color-text-muted: #3A414D;
  --cx-color-text-on-action: #FFFFFF;
  --cx-color-border: #CBD1D8;
  --cx-color-focus-ring: #08655A;
  --cx-color-action: #0B1020;
  --cx-color-action-hover: #232C42;
  --cx-color-action-muted: #D6FAF3;
  --cx-color-success: #0E6B3C;
  --cx-color-success-surface: #E5F4EB;
  --cx-color-warning: #8A5C06;
  --cx-color-warning-surface: #FBF0DA;
  --cx-color-danger: #B02A2A;
  --cx-color-danger-surface: #FAE8E8;
  --cx-color-info: #1A5BAE;
  --cx-color-info-surface: #E4EEFA;
  --cx-color-scrim: rgba(11,16,32,.55);
  --cx-font-family-base: 'IBM Plex Sans', Helvetica, system-ui, sans-serif;
  --cx-radius-control: 8px;
  --cx-radius-surface: 16px;
  --cx-radius-pill: 999px;
  --cx-shadow-raised: 0 1px 2px rgba(11,16,32,.06), 0 1px 3px rgba(11,16,32,.04);
  --cx-shadow-overlay: 0 12px 32px rgba(11,16,32,.16);
  font-family: var(--cxc-sans);
  color: var(--cxc-n900);
  background: var(--cxc-n50);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── (4a) CASCA §1: grid 248px + sidebar única + topbar de contexto ────────────────────────────────────── */
.cxc-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
/* O anel de foco global é a marca-em-claro (#08655A) e sobre o azul-noite ele dá ~2,7:1 — o teclado ficava sem
   pista visível na sidebar. Em contexto ESCURO o anel vira o NEON (a regra do manual: o neon é o acento SOBRE o
   escuro), pela menor regra possível: redeclarar a variável no próprio bloco da superfície escura. */
.cxc-sidenav {
  background: var(--cxc-brand-2); color: var(--cxc-n200);
  --cx-color-focus-ring: var(--cxc-brand-on-dark);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.cxc-sidenav__brand { padding: var(--cxc-xl) var(--cxc-xl) var(--cxc-lg); }
.cxc-wordmark { font-size: 20px; font-weight: 700; color: var(--cxc-white); letter-spacing: -.01em; }
.cxc-wordmark b { color: var(--cxc-brand-on-dark); font-weight: inherit; }
.cxc-sidenav__kicker {
  font-family: var(--cxc-mono); font-size: 11px; letter-spacing: .14em;
  color: var(--cxc-brand-on-dark); margin-top: 2px;
}
/* Bloco ADMINISTRADORA (nome do tenant): fundo rgba(255,255,255,.06), raio 8 (§1). */
.cxc-sidenav__tenant { margin: 0 var(--cxc-lg) var(--cxc-lg); padding: var(--cxc-md); border-radius: var(--cxc-r-sm); background: rgba(255, 255, 255, .06); }
.cxc-sidenav__tenant-label { font-size: 11px; font-family: var(--cxc-mono); letter-spacing: .08em; color: var(--cxc-n400); }
.cxc-sidenav__tenant-name { font-size: 14px; font-weight: 600; color: var(--cxc-white); margin-top: 2px; }
/* ── SELETOR DE MÓDULOS (CONSOLE-MOD-A) ────────────────────────────────────────────────────────────────────
   Rail PERSISTENTE no topo da sidebar, entre o bloco da Administradora e as áreas do módulo ativo. Densidade
   maior que a dos itens de área (padding 8px, ícone 18px): são dois níveis, e o olho tem de distinguir "em que
   módulo estou" de "em que tela estou" sem ler. O divisor de baixo é o que separa os dois níveis. */
.cxc-modrail { padding: 0 var(--cxc-sm) var(--cxc-md); border-bottom: 1px solid rgba(255, 255, 255, .08); margin-bottom: var(--cxc-md); }
.cxc-modrail__kicker {
  font-family: var(--cxc-mono); font-size: 10px; letter-spacing: .14em; color: var(--cxc-n400);
  padding: 0 var(--cxc-md) 6px;
}
.cxc-modrail__nav { display: flex; flex-direction: column; gap: 2px; }
/* Mesma cascata do item de área (ver a nota logo abaixo): `.cx-root a:not(.cx-btn)` é (0,2,1) e pintaria o rail
   de verde escuro sobre a marca. Escopar sob `.cxc-sidenav` dá (0,3,0) e devolve os claros. */
.cx-root .cxc-sidenav .cxc-modrail__link {
  display: flex; align-items: center; gap: var(--cxc-md); padding: 8px var(--cxc-md);
  border-radius: var(--cxc-r-sm); font-size: 13px; font-weight: 500; color: var(--cxc-n400); text-decoration: none;
}
.cxc-modrail__link .msy { font-size: 18px; }
.cxc-modrail__name { flex: 1; }
.cx-root .cxc-sidenav .cxc-modrail__link:hover { background: rgba(255, 255, 255, .06); color: var(--cxc-white); }
/* O módulo ATIVO é o único elemento da sidebar com a borda da marca à esquerda: é a pista de "você está aqui"
   no nível da suíte, e não se confunde com o realce do item de área (fundo neon translúcido, sem borda). */
.cx-root .cxc-sidenav .cxc-modrail__link--active,
.cx-root .cxc-sidenav .cxc-modrail__link--active:hover {
  background: rgba(255, 255, 255, .10); color: var(--cxc-white);
  box-shadow: inset 3px 0 0 var(--cxc-brand-on-dark);
}
.cx-root .cxc-sidenav .cxc-modrail__link--active .msy { color: var(--cxc-brand-on-dark); }
/* Pastilha do módulo: a mesma geometria da do item de área, em contorno em vez de sólida — o número do módulo é
   um resumo do que está lá dentro, e a pastilha cheia fica reservada ao item que leva à tela do número. */
.cxc-modrail__badge {
  min-width: 20px; padding: 0 5px; border-radius: var(--cxc-r-full); background: transparent;
  border: 1px solid var(--cxc-brand-on-dark); color: var(--cxc-brand-on-dark); font-family: var(--cxc-mono);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; flex-shrink: 0;
}
.cxc-sidenav__nav { padding: 0 var(--cxc-sm); display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
/* Tinte de link do components.css = `.cx-root a:not(.cx-btn)` (0,2,1); subiu no micro-fix UI-3 do Portal e passou
   a VENCER o `.cx-root .cxc-sidenav__link` (0,2,0), pintando o menu de VERDE ESCURO (a cor de ação) sobre a marca.
   Escopar sob `.cxc-sidenav` dá (0,3,0) e devolve os CLAROS do protótipo (n200 normal; branco no hover/ativo), sem
   tocar a folha compartilhada. Mesmo conserto espelhado no dashboard.css (menus dos painéis irmãos = brancos). */
.cx-root .cxc-sidenav .cxc-sidenav__link {
  display: flex; align-items: center; gap: var(--cxc-md); padding: 10px var(--cxc-md);
  border-radius: var(--cxc-r-sm); font-size: 14px; font-weight: 500; color: var(--cxc-n200); text-decoration: none;
}
.cxc-sidenav__link .msy { font-size: 20px; }
.cx-root .cxc-sidenav .cxc-sidenav__link:hover { background: rgba(34, 224, 200, .10); color: var(--cxc-white); }
.cx-root .cxc-sidenav .cxc-sidenav__link--active, .cx-root .cxc-sidenav .cxc-sidenav__link--active:hover { background: rgba(34, 224, 200, .16); color: var(--cxc-white); }
.cxc-sidenav__label { flex: 1; }
/* NOTIFY-APROVADOR-1 (decisão 153): badge de contagem do item Aprovações — a pastilha da marca sobre a sidebar
   escura, que é onde o olho do aprovador cai ao abrir qualquer tela. Nunca desenhada em zero (regra do head). */
.cxc-sidenav__badge {
  min-width: 20px; padding: 0 6px; border-radius: var(--cxc-r-full); background: var(--cxc-brand-on-dark);
  color: var(--cxc-brand-2); font-family: var(--cxc-mono); font-size: 11px; font-weight: 700; line-height: 20px;
  text-align: center; flex-shrink: 0;
}
.cxc-sidenav__user {
  padding: var(--cxc-lg); border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex; align-items: center; gap: var(--cxc-md);
}
.cxc-sidenav__avatar {
  width: 36px; height: 36px; border-radius: var(--cxc-r-full); background: var(--cxc-brand);
  color: var(--cxc-white); display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px; flex-shrink: 0;
}
.cxc-sidenav__who { flex: 1; min-width: 0; }
.cxc-sidenav__name {
  font-size: 13px; font-weight: 600; color: var(--cxc-white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cxc-sidenav__role { font-size: 12px; color: var(--cxc-n400); }
.cxc-sidenav__logout { display: inline; }
.cxc-sidenav__logout button {
  background: none; border: none; color: var(--cxc-n400); display: flex; padding: 6px;
  border-radius: var(--cxc-r-sm); cursor: pointer;
}
.cxc-sidenav__logout button:hover { color: var(--cxc-white); background: rgba(255, 255, 255, .08); }
@media (max-width: 48rem) { .cxc-shell { grid-template-columns: 1fr; } .cxc-sidenav { display: none; } }

/* Topbar 56px: breadcrumb `Console › {área}` + chip de alçada (§1). A nav duplicada de hoje MORREU. */
.cxc-maincol { display: flex; flex-direction: column; min-width: 0; }
.cxc-topbar {
  height: var(--cxc-topbar-h); flex: 0 0 auto; background: var(--cxc-white); border-bottom: 1px solid var(--cxc-n100);
  display: flex; align-items: center; gap: var(--cxc-lg); padding: 0 var(--cxc-2xl);
  position: sticky; top: 0; z-index: 6;
}
.cxc-topbar__crumbs { display: flex; align-items: center; gap: var(--cxc-sm); font-size: 13px; color: var(--cxc-n500); flex: 1; min-width: 0; }
.cxc-topbar__crumbs .msy { font-size: 16px; color: var(--cxc-n400); }
.cxc-topbar__here,
.cxc-topbar__authority strong { color: var(--cxc-n900); font-weight: 600; }
/* (CONSOLE-MOD-A) Nível do MÓDULO no breadcrumb: um degrau ACIMA do cinza do "Console" e um degrau ABAIXO do
   preto da área — a hierarquia suíte › módulo › tela se lê sem contar os chevrons. */
.cxc-topbar__module { color: var(--cxc-n700); font-weight: 600; }
/* n700 e não n500: o chip fica sobre a n50 e o par n500/n50 dá 4,32:1 — texto de 12px reprova em AA. */
.cxc-topbar__authority {
  display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cxc-n700);
  background: var(--cxc-n50); border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-full);
  padding: 5px var(--cxc-md); white-space: nowrap;
}
.cxc-topbar__authority .msy { font-size: 16px; color: var(--cxc-brand); }
/* (NONAME-3, O0) Abaixo de 1024 o breadcrumb não pode invadir a pílula "Sua alçada": cada nível encolhe com
   reticências e a pílula não encolhe. Em largura de CELULAR (sem a barra lateral) o breadcrumb RECOLHE para o nível
   da tela (o último), numa linha só: a topbar mantém os 56px e nada abaixo dela muda de lugar. 1024+ fica como era. */
@media (max-width: 63.98rem) {
  .cxc-topbar__crumbs { overflow: hidden; white-space: nowrap; }
  .cxc-topbar__crumbs > * { flex-shrink: 0; }
  .cxc-topbar__crumbs > span:not(.msy) { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .cxc-topbar__authority { flex-shrink: 0; }
}
@media (max-width: 48rem) {
  .cxc-topbar { padding: 0 var(--cxc-lg); gap: var(--cxc-md); }
  .cxc-topbar__crumbs > :not(:last-child) { display: none; }
}
.cxc-main { flex: 1; padding: var(--cxc-xl) var(--cxc-2xl) var(--cxc-3xl); min-width: 0; }

/* ── (4b) DRAWER §2: scrim rgba(11,16,32,.45) que fecha por link + painel 440px à direita ──────────────── */
.cxc-drawer { position: fixed; inset: 0; z-index: 20; }
.cx-root .cxc-drawer__scrim { position: absolute; inset: 0; background: rgba(11, 16, 32, .45); display: block; }
.cxc-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100vw;
  background: var(--cxc-white); box-shadow: var(--cxc-sh-pop); display: flex; flex-direction: column;
  animation: cxc-drawer-in .18s ease;
}
@keyframes cxc-drawer-in { from { transform: translateX(24px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cxc-drawer__panel { animation: none; } }
.cxc-drawer__head,
.cxc-panel__head {
  padding: var(--cxc-lg) var(--cxc-xl); border-bottom: 1px solid var(--cxc-n100);
  display: flex; align-items: flex-start; gap: var(--cxc-md);
}
.cxc-drawer__text { flex: 1; min-width: 0; }
.cxc-drawer__title,
.cxc-panel__titlerow h2,
.cxc-panel__cardhead h2 { font-size: 18px; font-weight: 600; margin: 0; }
.cxc-drawer__desc { font-size: 13px; line-height: 19px; color: var(--cxc-n500); margin: 4px 0 0; }
.cx-root .cxc-drawer__close { color: var(--cxc-n500); display: flex; padding: 4px; border-radius: var(--cxc-r-sm); }
.cx-root .cxc-drawer__close:hover { background: var(--cxc-n50); color: var(--cxc-n900); }
.cxc-drawer__form { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.cxc-drawer__body { flex: 1; overflow-y: auto; padding: var(--cxc-lg) var(--cxc-xl); }
/* (ACABAMENTO-T9, achado T9-A2) PASSO e RESULTADO de uma simulação DENTRO do corpo do drawer (Parcelar fatura, Acordo).
   O QUE ACONTECIA: o form do "Simular" reusava o .cxc-drawer__form, que é o form do drawer INTEIRO e carrega
   min-height:0 (para o rodapé caber no painel). Dentro do corpo, que é a grade de formulário (cx-form__grid) com
   altura definida, esse min-height:0 zera o mínimo do item: quando o resultado estourava a altura do painel, a
   linha do form encolhia abaixo do conteúdo e o título "Parcelamento simulado" caía por cima do campo Parcelas.
   O CONSERTO: o form do passo tem classe própria, sem min-height:0 (o mínimo volta a ser o conteúdo), e o resultado
   é UM bloco que toma a linha inteira da grade, depois do form, com o título do drawer (não o cabeçalho de cartão
   de painel). A rolagem continua sendo a do corpo. */
.cxc-drawer__step { display: flex; flex-direction: column; min-width: 0; }
.cxc-drawer__result { grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--cxc-n100); padding-top: var(--cxc-md); }
.cxc-drawer__result-head h3 { font-size: 16px; font-weight: 600; margin: 0; }
.cxc-drawer__result-head p { font-size: 13px; line-height: 19px; color: var(--cxc-n500); margin: 2px 0 var(--cxc-sm); }
.cxc-drawer__foot {
  border-top: 1px solid var(--cxc-n100); padding: var(--cxc-md) var(--cxc-xl);
  display: flex; gap: var(--cxc-sm); justify-content: flex-end; background: var(--cxc-white);
}

/* REVELAÇÃO PROGRESSIVA do drawer "Limite extra" (OVERLIMIT-DRAWER-UX-1, decisão 118.1, reprovação B29).
   O QUE O DONO VIU: o drawer abre em "Seguir o produto" e mesmo assim deixa digitar percentual e tarifa, dois
   campos que aquele modo nem lê. Confuso, porque a tela oferece o que ela vai jogar fora.
   SEM JS, DE PROPÓSITO. Não havia mecanismo de revelação vigente na casa (nenhum gancho `data-cx-*` no
   cortex-ds.js, e o `<details>` só serve para texto que se abre, não para campo que depende de escolha), e o
   drawer é server-rendered justamente para funcionar sem script. Então: o estado INICIAL vem do servidor (o
   atributo `hidden` na caixa do campo, que é a verdade do modo GRAVADO) e a troca ao vivo sai do `:has()` sobre a
   opção marcada do select, que o navegador reavalia a cada escolha, sem uma linha de script.
   AS DUAS REGRAS SÃO NECESSÁRIAS, e cada uma cobre um sentido: a primeira REVELA o que o servidor escondeu (a
   conta segue o produto e o operador marcou "ligar"), a segunda ESCONDE o que o servidor mostrou (a conta já
   estava ligada e o operador marcou outra coisa).
   Os campos continuam DENTRO do form, e é isso que permite ligar sem recarregar a página; campo escondido continua
   sendo submetido, então quem ignora o que vier deles nos modos que não os usam é o SERVIDOR, sempre. */
.cxc-drawer__body:has(.cxc-olmode option[value="on"]:checked) > .cxc-olown[hidden] { display: grid; }
.cxc-drawer__body:has(.cxc-olmode option:checked:not([value="on"])) > .cxc-olown { display: none; }

/* ── (4c) PRODUTO & PARÂMETROS §3 ──────────────────────────────────────────────────────────────────────── */
/* Cabeçalho: título + descrição. */
.cxc-pp__head { display: flex; align-items: flex-start; gap: var(--cxc-lg); margin-bottom: var(--cxc-lg); flex-wrap: wrap; }
.cxc-pp__title { flex: 1; min-width: 280px; }
.cxc-pp__title h1 { font-size: 30px; line-height: 36px; font-weight: 700; margin: 0 0 4px; }
.cxc-pp__title p { font-size: 15px; color: var(--cxc-n500); margin: 0; }
.cxc-pp__title p strong { font-weight: 600; color: var(--cxc-n700); }

/* Grid 288px menu + painel único; sticky top 80 com a lição do sticky (viewport baixo ⇒ static; SEM overflow-y). */
.cxc-cfg { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: var(--cxc-xl); align-items: start; }
.cxc-secnav {
  background: var(--cxc-white); border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-lg);
  box-shadow: var(--cxc-sh-1); padding: var(--cxc-sm); display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 80px;
}
@media (max-height: 52rem) { .cxc-secnav { position: static; } }
@media (max-width: 64rem) { .cxc-cfg { grid-template-columns: 1fr; } .cxc-secnav { position: static; } }
/* Item: ícone 19 + label 14 + ponto 8px no fim (ou hourglass warn no lugar do ponto); ativo = brand-container
   + brand-2 + trilho esquerdo 3px brand. */
.cx-root .cxc-secnav__item {
  display: flex; align-items: center; gap: var(--cxc-md); padding: 10px var(--cxc-md);
  border-radius: var(--cxc-r-sm); border-left: 3px solid transparent; color: var(--cxc-n700);
  text-decoration: none;
}
.cx-root .cxc-secnav__item:hover { background: var(--cxc-n50); }
.cx-root .cxc-secnav__item.cxc-on, .cx-root .cxc-secnav__item.cxc-on:hover {
  background: var(--cxc-brand-container); color: var(--cxc-brand-2); border-left-color: var(--cxc-brand);
}
.cxc-secnav__item .msy { font-size: 19px; color: var(--cxc-n500); }
.cxc-secnav__item.cxc-on .msy { color: var(--cxc-brand); }
.cxc-secnav__name { flex: 1; font-size: 14px; font-weight: 500; line-height: 18px; }
.cxc-secnav__item.cxc-on .cxc-secnav__name { font-weight: 600; }
.cxc-secnav__pend,
.cxc-secnav__off { color: var(--cxc-warn) !important; }
.cxc-dot { width: 8px; height: 8px; border-radius: var(--cxc-r-full); flex-shrink: 0; }
.cxc-dot--ok { background: var(--cxc-ok); }
.cxc-dot--err { background: var(--cxc-err); }
.cxc-dot--muted { background: var(--cxc-n400); }
/* Decisão 123.3: estado NEUTRO "Não se aplica" — anel vazado, para não se confundir com o ponto cheio de
   "opcional e não configurado" (que ainda é pendência). */
.cxc-dot--na { background: transparent; box-shadow: inset 0 0 0 2px var(--cxc-n400); }
/* Legenda dos pontos no pé do menu. */
.cxc-secnav__legend { border-top: 1px solid var(--cxc-n100); margin-top: var(--cxc-sm); padding: var(--cxc-md); display: flex; flex-direction: column; gap: 6px; }
.cxc-secnav__legend div { display: flex; align-items: center; gap: var(--cxc-sm); font-size: 12px; color: var(--cxc-n500); }

/* Painel único (1 grupo por vez) — largura máxima de painel único 900px (§1). */
.cxc-panel {
  background: var(--cxc-white); border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-lg);
  box-shadow: var(--cxc-sh-1); overflow-x: auto; max-width: 900px; margin-bottom: var(--cxc-lg);
}
.cxc-tile {
  width: 38px; height: 38px; border-radius: var(--cxc-r-sm); background: var(--cxc-brand-container);
  color: var(--cxc-brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cxc-panel__meta { flex: 1; min-width: 0; }
.cxc-panel__titlerow,
.cxc-actions,
.cxc-apcard__tiprow,
.cxc-casecard__titlerow { display: flex; align-items: center; gap: var(--cxc-sm); flex-wrap: wrap; }
.cxc-panel__desc { font-size: 13px; color: var(--cxc-n500); margin: 4px 0 0; }
/* Chips de estado do painel (§12: ícone 14-15px nos chips de tipo/estado). Os pares por tom abaixo são o
   ÚNICO lugar onde o par fundo+texto de cada natureza vive: os tiles das filas (.cxc-qicon--*), a faixa de
   grupo em alerta e os ícones de vazio (.cxc-sempty__icon--*) dividem o mesmo corpo. Antes de mudar UM
   deles, separe a regra — hoje mudam juntos de propósito. */
.cxc-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: var(--cxc-r-full); background: var(--cxc-n100); color: var(--cxc-n700);
  white-space: nowrap;
}
.cxc-chip .msy { font-size: 14px; }
.cxc-chip--ok,
.cxc-sempty__icon--ok { background: var(--cxc-ok-bg); color: var(--cxc-ok-text); }
.cxc-chip--err,
.cxc-qicon--err { background: var(--cxc-err-bg); color: var(--cxc-err-text); }
.cxc-chip--warn,
.cxc-agroup__head--warn,
.cxc-qicon--warn { background: var(--cxc-warn-bg); color: var(--cxc-warn-text); }
.cxc-chip--info,
.cxc-qicon--info { background: var(--cxc-info-bg); color: var(--cxc-info-text); }

/* Faixa de pendência four-eyes (§3, 2º lugar da pendência): warn-bg com borda inferior warn. */
.cxc-pendstrip {
  background: var(--cxc-warn-bg); border-bottom: 1px solid var(--cxc-warn);
  padding: var(--cxc-lg) var(--cxc-xl); display: flex; gap: var(--cxc-md); align-items: flex-start;
}
.cxc-pendstrip > .msy { font-size: 22px; color: var(--cxc-warn-text); }
.cxc-pendstrip__text { flex: 1; min-width: 0; }
.cxc-pendstrip__title { font-size: 14px; font-weight: 600; color: var(--cxc-warn-text); margin: 0; }
.cxc-pendstrip__sub { font-size: 13px; color: var(--cxc-warn-text); margin: 2px 0 0; }
.cxc-pendstrip__actions { display: flex; gap: var(--cxc-sm); margin-top: var(--cxc-md); }
.cx-root .cxc-pendstrip__btn {
  height: 34px; padding: 0 var(--cxc-md); border: 1px solid var(--cxc-warn); border-radius: var(--cxc-r-sm);
  font-size: 13px; font-weight: 600; color: var(--cxc-warn-text); display: inline-flex; align-items: center;
  gap: 6px; text-decoration: none; background: transparent;
}
.cx-root .cxc-pendstrip__btn:hover { background: rgba(194, 130, 14, .12); color: var(--cxc-warn-text); }
.cxc-pendstrip__btn .msy { font-size: 17px; }

/* Linha mono `vigente desde … · action`. */
.cxc-panel__version {
  padding: var(--cxc-lg) var(--cxc-xl) 0; display: flex; align-items: center; gap: var(--cxc-md);
  flex-wrap: wrap; font-size: 12px; color: var(--cxc-n500); font-family: var(--cxc-mono);
}
.cxc-panel__version-dot { width: 4px; height: 4px; border-radius: var(--cxc-r-full); background: var(--cxc-n400); }

/* Form do painel: campos numéricos em mono; Motivo por último + CTA.
   FORM-ALINHAMENTO-1: a GRADE e a LINHA saíram daqui. Elas eram uma cópia Console do layout, e cópia é
   justamente o que fazia cada head desalinhar de um jeito diferente. Agora o elemento compõe
   `cx-form__grid cxc-fieldgrid` (ou `cx-form-bar cxc-fieldrow`): o alinhamento vem do Design System, e o que
   sobra aqui é só a PELE do Console (mono, alturas). A UI-ALINHA-1 tentou consertar isto zerando a margem do
   campo, mas o defeito não era a margem: era o align-items:flex-end, que alinha pela BASE da caixa, e a caixa
   cresce quando o campo tem hint ou o rótulo quebra em duas linhas. */
.cxc-panel__form { padding: var(--cxc-lg) var(--cxc-xl) var(--cxc-xl); }
.cxc-panel__foot {
  border-top: 1px solid var(--cxc-n100); margin-top: var(--cxc-xl); padding-top: var(--cxc-lg);
  display: flex; align-items: flex-end; gap: var(--cxc-lg); flex-wrap: wrap;
}
.cxc-panel__reason { flex: 1; min-width: 280px; }
.cxc-panel__reason .cx-field { margin-block-end: 0; }
/* Nota de rodapé de painel/tabela (o .cxc-mnote); a .msy dela fica no bloco (4f). */
.cxc-mnote { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cxc-n500); margin: var(--cxc-md) 0 0; }

/* Cabeçalho de card com ação (Produtos de crédito): título+descrição à esquerda, CTA à direita. */
.cxc-panel__cardhead { padding: var(--cxc-lg) var(--cxc-xl); border-bottom: 1px solid var(--cxc-n100); display: flex; align-items: flex-start; gap: var(--cxc-lg); }
.cxc-panel__cardhead-text { flex: 1; min-width: 0; }
.cxc-panel__cardhead p { font-size: 13px; color: var(--cxc-n500); margin: 2px 0 0; }
.cxc-panel__body { padding: var(--cxc-lg) var(--cxc-xl); }

/* ── (4d) AÇÃO GATED POR ALÇADA §5: rastro discreto, nunca botão morto ─────────────────────────────────── */
.cxc-gate { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cxc-n500); white-space: nowrap; }
.cxc-gate .msy { font-size: 16px; }
.cxc-gate-strip {
  padding: var(--cxc-md) var(--cxc-xl); background: var(--cxc-n50); border-top: 1px solid var(--cxc-n100);
  font-size: 12px; color: var(--cxc-n500); display: flex; align-items: center; gap: 6px;
}
.cxc-gate-strip .msy { font-size: 16px; }

/* ── (4e) ATENDIMENTO §4: busca em linhas clicáveis + prontuário 360 ───────────────────────────────────── */
.cxc-att .cxc-pp__title { margin-bottom: var(--cxc-lg); }
/* Busca: card `Buscar por` + `Termo` (ícone DENTRO do campo) + `Buscar`; nota mono do hash.
   FORM-ALINHAMENTO-1: o LAYOUT saiu daqui (o elemento compõe .cx-form-bar) e as classes .cxc-search__box,
   .cxc-search__term e .cxc-search__kind MORRERAM: a caixa com a lupa era uma reimplementação da moldura de afixo
   que o Design System já tinha, e o campo agora a reusa. Sobra o chrome de cartão da busca. */
.cxc-search {
  background: var(--cxc-white); border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-lg);
  box-shadow: var(--cxc-sh-1); padding: var(--cxc-lg); max-width: 900px; margin-bottom: var(--cxc-lg);
}
.cxc-login__input:focus { border-color: var(--cxc-brand); box-shadow: 0 0 0 3px var(--cxc-brand-container); }
/* A lupa dentro da moldura de afixo, no tom de ícone auxiliar do Console. */
.cxc-root .cx-input-affix .msy { color: var(--cxc-n400); }
/* Resultados = LINHAS CLICÁVEIS (avatar 38px + nome + mono + chevron) — a linha inteira abre o prontuário. */
.cxc-results-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--cxc-sm); max-width: 900px; font-size: 13px; font-weight: 600; color: var(--cxc-n700);
}
.cxc-results-count { font-family: var(--cxc-mono); font-size: 12px; font-weight: 400; color: var(--cxc-n500); }
.cxc-results {
  background: var(--cxc-white); border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-lg);
  box-shadow: var(--cxc-sh-1); overflow-x: auto; max-width: 900px;
}
.cx-root .cxc-result {
  display: flex; align-items: center; gap: var(--cxc-lg); padding: var(--cxc-md) var(--cxc-lg);
  border-bottom: 1px solid var(--cxc-n100); color: inherit; text-decoration: none;
}
.cx-root .cxc-result:hover { background: var(--cxc-n50); color: inherit; }
.cxc-result:last-child { border-bottom: none; }
.cxc-result > .msy { color: var(--cxc-n400); }
.cxc-result__avatar {
  width: 38px; height: 38px; border-radius: var(--cxc-r-full); background: var(--cxc-brand-container);
  color: var(--cxc-brand); display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; flex-shrink: 0;
}
.cxc-result__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cxc-result__name,
.cxc-okband__title { font-size: 14px; font-weight: 600; }
.cxc-result__meta,
.cxc-mcell__mono,
.cxc-casecard__cid { font-family: var(--cxc-mono); font-size: 12px; color: var(--cxc-n500); }
/* Vazio com orientação (§13): person_search + copy honesta sobre os tipos de busca. */
.cxc-sempty {
  background: var(--cxc-white); border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-lg);
  box-shadow: var(--cxc-sh-1); padding: var(--cxc-3xl) var(--cxc-2xl); text-align: center; max-width: 900px;
}
.cxc-sempty__icon {
  width: 56px; height: 56px; border-radius: var(--cxc-r-full); background: var(--cxc-n50); color: var(--cxc-n400);
  display: flex; align-items: center; justify-content: center; margin: 0 auto var(--cxc-lg);
}
.cxc-sempty h3 { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.cxc-sempty p { font-size: 14px; line-height: 21px; color: var(--cxc-n500); margin: 0 auto; max-width: 420px; }

/* Prontuário 360: cabeçalho de identidade + grid 216px menu + conteúdo (máx. 820px, §1). */
.cxc-p360 { max-width: 1060px; }
.cx-root .cxc-p360__back {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cxc-n500);
  margin-bottom: var(--cxc-md); text-decoration: none;
}
.cx-root .cxc-p360__back:hover { color: var(--cxc-brand); }
.cxc-p360__back .msy { font-size: 18px; }
.cxc-idcard {
  background: var(--cxc-white); border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-lg);
  box-shadow: var(--cxc-sh-1); padding: var(--cxc-lg) var(--cxc-xl); display: flex; align-items: center;
  gap: var(--cxc-xl); flex-wrap: wrap; margin-bottom: var(--cxc-lg);
}
.cxc-idcard__avatar {
  width: 52px; height: 52px; border-radius: var(--cxc-r-full); background: var(--cxc-brand-container);
  color: var(--cxc-brand); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; flex-shrink: 0;
}
/* Identidade de EMPRESA (Convênio, §9): QUADRADO `apartment` no lugar do avatar redondo de pessoa. */
.cxc-idcard__tile {
  width: 52px; height: 52px; border-radius: var(--cxc-r-sm); background: var(--cxc-brand-container);
  color: var(--cxc-brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cxc-idcard__who { min-width: 200px; flex: 1; }
.cxc-idcard__titlerow { display: flex; align-items: center; gap: var(--cxc-md); flex-wrap: wrap; }
.cxc-idcard__titlerow h1 { font-size: 24px; font-weight: 700; margin: 0; }
.cxc-idcard__meta { font-family: var(--cxc-mono); font-size: 12px; color: var(--cxc-n500); margin-top: 4px; }
.cxc-idcard__kpis { display: flex; align-items: stretch; }
.cxc-kpi { padding: 0 0 0 var(--cxc-xl); margin-left: var(--cxc-xl); border-left: 1px solid var(--cxc-n100); }
.cxc-kpi:first-child { margin-left: 0; }
/* n700: o tile .cxc-stat tem fundo n50 e o par n500/n50 dá 4,32:1 — reprova em AA para 12px. */
.cxc-kpi__label,
.cxc-stat__label { font-size: 12px; color: var(--cxc-n700); }
.cxc-kpi__value { font-size: 18px; font-weight: 700; font-family: var(--cxc-mono); margin-top: 2px; white-space: nowrap; }
.cxc-kpi__value--brand { color: var(--cxc-brand); }
.cxc-kpi__value--na { color: var(--cxc-n400); }
.cxc-p360__grid { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: var(--cxc-xl); align-items: start; }
@media (max-width: 64rem) { .cxc-p360__grid { grid-template-columns: 1fr; } }
.cxc-p360__content { min-width: 0; }
/* (NONAME-5, C7; rodada do merge, B2) O desfecho do cartão físico, no topo do conteúdo da aba Cartões, é o alvo do
   fragmento do redirecionamento. Em qualquer largura a tela leva o desfecho para o alto, com a folga da barra do topo,
   que é fixa: ele fica visível mesmo quando nasce longe da primeira dobra (celular, janela baixa, muito conteúdo acima). */
.cxc-p360__result { scroll-margin-top: calc(var(--cxc-topbar-h) + var(--cxc-md)); }
.cxc-p360 .cxc-panel { max-width: 820px; }
.cxc-p360__note { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 18px; color: var(--cxc-n500); margin: var(--cxc-md) 0 0; }
.cxc-p360__note .msy { font-size: 16px; flex-shrink: 0; }
/* MINIATURAS dos documentos do portador na aba Documentos (CONSOLE-DOCS-UX-1, adendo 142-c). Só as fotos
   CORRENTES entram na faixa; a versão substituída fica na tabela abaixo. `contain` e não `cover`: cortar a
   borda de um RG na prévia esconde justamente o que o operador quer conferir. O card cresce com a foto até
   220px de largura e a altura é fixa, para que uma faixa com duas fotos de proporções diferentes não fique
   serrilhada. */
.cxc-docthumbs { display: flex; flex-wrap: wrap; gap: var(--cxc-lg); margin: 0 0 var(--cxc-lg); }
.cxc-docthumb {
  display: block; padding: var(--cxc-sm); border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-md);
  background: var(--cxc-n50); box-shadow: var(--cxc-sh-1); text-decoration: none;
}
.cxc-docthumb:hover { border-color: var(--cxc-brand); }
.cxc-docthumb__img {
  display: block; height: 140px; width: auto; max-width: 220px; object-fit: contain;
  background: var(--cxc-white); border-radius: var(--cxc-r-sm);
}
.cxc-docthumb__cap {
  display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 6px;
  font-size: 12px; color: var(--cxc-n700);
}
.cxc-docthumb__cap .msy { flex-shrink: 0; }
/* Anexo que NÃO é imagem (PDF): a mesma caixa da miniatura, com o ícone do formato no lugar da foto (PP-1c). */
.cxc-docthumb__file {
  display: flex; align-items: center; justify-content: center; height: 140px; width: 140px;
  background: var(--cxc-white); border-radius: var(--cxc-r-sm); color: var(--cxc-n500);
}
/* Ponto de 6px dos chips de SITUAÇÃO (§12). */
.cxc-chipdot { width: 6px; height: 6px; border-radius: var(--cxc-r-full); background: var(--cxc-n400); flex-shrink: 0; }
.cxc-chip--ok .cxc-chipdot { background: var(--cxc-ok); }
.cxc-chip--err .cxc-chipdot { background: var(--cxc-err); }
.cxc-chip--warn .cxc-chipdot { background: var(--cxc-warn); }
.cxc-chip--info .cxc-chipdot { background: var(--cxc-info); }
/* Linhas rótulo/valor do cadastro (+ marca `mascarado` em mono). */
.cxc-kv { display: flex; align-items: center; gap: var(--cxc-lg); padding: var(--cxc-md) 0; border-bottom: 1px solid var(--cxc-n50); }
.cxc-kv__k { width: 200px; font-size: 13px; color: var(--cxc-n500); flex-shrink: 0; }
.cxc-kv__v { flex: 1; font-size: 14px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.cxc-kv__v--mono { font-family: var(--cxc-mono); }
.cxc-kv__masked { font-size: 11px; font-family: var(--cxc-mono); color: var(--cxc-n400); }
/* (NONAME-3, O0; rodada 2) Em largura de celular o rótulo de 200px deixava ao valor uma coluna de poucas letras (a
   trilha do cartão do estoque lia "01/07/2 026"): o rótulo passa para cima do valor. ESCOPO PRÓPRIO: só as telas do
   Estoque de cartões (raiz `.cxc-stockpg`, que só o CardStockEndpoints emite); o par chave/valor do Atendimento e das
   demais telas fica como era. 1024+ fica como era. */
@media (max-width: 48rem) {
  .cxc-stockpg .cxc-kv { flex-wrap: wrap; align-items: flex-start; row-gap: 2px; }
  .cxc-stockpg .cxc-kv__k { width: 100%; }
}
/* (NONAME-5, C6) A data e a hora da tabela de lotes nunca quebram no meio ("11/1 / às 0"): cada uma é um bloco, e a
   linha só quebra entre elas. Escopo do estoque. */
.cxc-stockpg .cxc-stock__when { white-space: nowrap; }
/* Tiles de valor (crédito, faturas). */
.cxc-statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--cxc-lg); }
.cxc-stat { border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-md); padding: var(--cxc-lg); background: var(--cxc-n50); }
.cxc-stat__value { font-size: 22px; font-weight: 700; font-family: var(--cxc-mono); margin-top: 4px; overflow-wrap: anywhere; }
.cxc-stat__value--brand { color: var(--cxc-brand); }
.cxc-stat__value--ok { color: var(--cxc-ok-text); }
.cxc-stat__value--err { color: var(--cxc-err-text); }
/* VISÃO PARCIAL §4: card de borda TRACEJADA warn — só a seção degrada; o resto do prontuário segue. */
.cxc-unavail {
  background: var(--cxc-white); border: 1px dashed var(--cxc-warn); border-radius: var(--cxc-r-lg);
  padding: var(--cxc-2xl); max-width: 820px; text-align: center;
}
.cxc-unavail__icon {
  width: 52px; height: 52px; border-radius: var(--cxc-r-full); background: var(--cxc-warn-bg);
  color: var(--cxc-warn-text); display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--cxc-md);
}
.cxc-unavail h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.cxc-unavail p { font-size: 14px; line-height: 21px; color: var(--cxc-n500); margin: 0 auto var(--cxc-lg); max-width: 440px; }
/* Faixa "sem cobrança" (§13, estado ok com orientação). */
.cxc-okband {
  display: flex; align-items: center; gap: var(--cxc-md); background: var(--cxc-ok-bg);
  border: 1px solid var(--cxc-ok); border-radius: var(--cxc-r-md); padding: var(--cxc-md) var(--cxc-lg);
  color: var(--cxc-ok-text);
}
.cxc-okband .msy { font-size: 22px; flex-shrink: 0; }
.cxc-okband__sub { font-size: 13px; margin-top: 2px; }
/* Linha de cartão: tile 44×30 + last4 mono + chip §12 + ações. */
.cxc-cardrow,
.cxc-arow {
  display: flex; align-items: center; gap: var(--cxc-lg); padding: var(--cxc-md) var(--cxc-xl);
  border-bottom: 1px solid var(--cxc-n50);
}
.cxc-cardrow__tile {
  width: 44px; height: 30px; border-radius: 5px; background: var(--cxc-n100); color: var(--cxc-n500);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cxc-cardrow__tile--active { background: var(--cxc-brand-2); color: var(--cxc-brand-on-dark); }
.cxc-cardrow__pan { font-family: var(--cxc-mono); font-size: 14px; font-weight: 500; flex: 1; min-width: 0; }
.cxc-cardrow__actions { display: flex; gap: 6px; align-items: center; }
/* (NONAME-3, rodada 2) O 360 no CELULAR do promotor na loja, com ESCOPO do prontuário (`.cxc-p360`, que o
   Atendimento não usa): (a) na aba Cartões o final do cartão encolhia até quebrar em duas linhas por baixo da pílula
   "Ativo" e as pílulas de alçada vazavam pela direita; agora o final não quebra, a pílula fica ao lado e as ações
   descem para uma linha própria, quebrando entre si. (b) No cabeçalho, os dois números (limite e disponível) não
   cabiam lado a lado e o segundo saía cortado ("indisponív"); agora cada um ocupa a linha inteira. 1024+ como era. */
@media (max-width: 48rem) {
  .cxc-p360 .cxc-cardrow { flex-wrap: wrap; row-gap: var(--cxc-sm); padding: var(--cxc-md) var(--cxc-lg); }
  .cxc-p360 .cxc-cardrow__pan { flex: 1 0 auto; white-space: nowrap; }
  .cxc-p360 .cxc-cardrow__actions { flex: 1 1 100%; flex-wrap: wrap; }
  .cxc-p360 .cxc-idcard__kpis { flex-wrap: wrap; width: 100%; row-gap: var(--cxc-md); }
  .cxc-p360 .cxc-kpi { flex: 1 1 100%; margin-left: 0; padding-left: 0; border-left: none; }
  .cxc-p360 .cxc-kpi + .cxc-kpi { border-top: 1px solid var(--cxc-n100); padding-top: var(--cxc-md); }
}
/* AÇÕES DE ATENDIMENTO §4: grupos por risco (cabeçalho n50; o de dinheiro em warn-bg), 1 linha por ação. */
.cxc-agroup {
  background: var(--cxc-white); border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-lg);
  box-shadow: var(--cxc-sh-1); overflow: hidden; margin-bottom: var(--cxc-lg); max-width: 820px;
}
.cxc-agroup__head {
  padding: var(--cxc-md) var(--cxc-xl); border-bottom: 1px solid var(--cxc-n100);
  display: flex; align-items: center; gap: var(--cxc-sm); background: var(--cxc-n50); color: var(--cxc-n700);
}
.cxc-agroup__head .msy { font-size: 19px; }
.cxc-agroup__head h2 { font-size: 15px; font-weight: 600; margin: 0; flex: 1; color: inherit; }
.cxc-agroup__risk { font-size: 11px; font-family: var(--cxc-mono); opacity: .8; }
.cxc-arow:last-child { border-bottom: none; }
.cxc-arow__text { flex: 1; min-width: 0; }
.cxc-arow__label { font-size: 14px; font-weight: 500; }
.cxc-arow__desc { font-size: 12px; color: var(--cxc-n500); margin-top: 2px; }
.cxc-arow__none { font-size: 12px; color: var(--cxc-n500); white-space: nowrap; }
/* Pílula TRACEJADA do gate §5 (lista de ações do 360): rastro no lugar do botão, nunca botão morto. */
.cxc-gatepill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cxc-n500);
  background: var(--cxc-n50); border: 1px dashed var(--cxc-n200); border-radius: var(--cxc-r-sm);
  padding: 6px var(--cxc-md); white-space: nowrap;
}
.cxc-gatepill .msy { font-size: 16px; }
/* Escolha de cartão dentro do drawer de bloqueio (alvo do POST real está na URL — escolha POR LINK). */
.cxc-pick__label { font-size: 13px; font-weight: 600; color: var(--cxc-n700); margin: 0 0 var(--cxc-sm); }
.cx-root .cxc-pick {
  display: flex; align-items: center; gap: var(--cxc-md); padding: var(--cxc-md);
  border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-sm); margin-bottom: var(--cxc-sm);
  color: inherit; text-decoration: none;
}
.cx-root .cxc-pick:hover { border-color: var(--cxc-brand); background: var(--cxc-n50); color: inherit; }
.cxc-pick .msy { color: var(--cxc-n400); }

/* ── (4f) REDE CREDENCIADA §8: toolbar (busca 280px + segmentado + contador mono) + lista rica ─────────── */
.cxc-mtoolbar { display: flex; align-items: center; gap: var(--cxc-md); margin-bottom: var(--cxc-md); flex-wrap: wrap; }
.cxc-mtoolbar__search { width: 280px; }
.cxc-mtoolbar__count { margin-left: auto; font-family: var(--cxc-mono); font-size: 12px; color: var(--cxc-n500); }
/* Segmentado (o mesmo desenho serve à toolbar e ao drawer de credenciar): ativo = branco + sh-1. */
.cxc-seg { display: flex; gap: 4px; background: var(--cxc-n100); padding: 4px; border-radius: var(--cxc-r-sm); }
.cx-root .cxc-seg__opt {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 5px var(--cxc-md);
  font-size: 13px; font-weight: 600; color: var(--cxc-n500); text-decoration: none; white-space: nowrap;
}
.cx-root .cxc-seg__opt:hover { color: var(--cxc-n900); }
.cx-root .cxc-seg__opt.cxc-on { background: var(--cxc-white); color: var(--cxc-n900); box-shadow: var(--cxc-sh-1); }
.cxc-seg__opt .msy { font-size: 17px; }
.cxc-seg--fill .cxc-seg__opt { flex: 1; justify-content: center; padding: 8px var(--cxc-sm); }
/* Barra de ABAS de uma tela de entidade (CONVENIO-UI-1): o mesmo segmentado, com quebra de linha quando a
   coluna estreita. Sem `flex-wrap` a quarta aba escapava do fundo cinza em telas pequenas. */
.cxc-seg--tabs { flex-wrap: wrap; }
/* Segmentado DENTRO do drawer (meio de repasse, §8). */
.cxc-dseg { margin-bottom: var(--cxc-lg); }
.cxc-dseg__label { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
/* Lista rica (padrão da tabela do Dashboard). SEM overflow no card (espelha .cxd-listcard): a página rola,
   nunca o card; overflow-x:auto fazia o overflow-y computar auto e clipava o menu de ações por linha. */
.cxc-mtable-card {
  background: var(--cxc-white); border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-lg);
  box-shadow: var(--cxc-sh-1);
}
.cxc-mtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.cxc-mtable thead th {
  background: var(--cxc-n50); border-bottom: 1px solid var(--cxc-n100); padding: 11px var(--cxc-lg);
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--cxc-n500); white-space: nowrap;
}
.cxc-mtable td { padding: 13px var(--cxc-lg); border-bottom: 1px solid var(--cxc-n100); vertical-align: top; }
.cxc-mtable tbody tr:last-child td { border-bottom: none; }
.cxc-mtable tbody tr:hover { background: var(--cxc-n50); }
/* Linha PENDENTE de four-eyes (§8, 3º lugar da pendência): fundo warn — o hover não a disfarça. */
.cxc-mtable tbody tr.cxc-mrow--pend, .cxc-mtable tbody tr.cxc-mrow--pend:hover { background: var(--cxc-warn-bg); }
.cxc-mcell__name { font-weight: 600; }
.cxc-mcell__name + .cxc-mcell__mono, .cxc-mcell__meio + .cxc-mcell__mono { margin-top: 2px; }
.cxc-mcell__doc { font-family: var(--cxc-mono); font-size: 12px; color: var(--cxc-n700); white-space: nowrap; }
.cxc-mcell__meio { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cxc-n700); }
.cxc-mcell__meio .msy { font-size: 17px; color: var(--cxc-n500); }
.cxc-mrow__pendline {
  display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--cxc-warn-text); margin-top: 5px;
}
.cxc-mrow__pendline .msy { font-size: 15px; }
th.cxc-mtable__actions, td.cxc-mtable__actions { text-align: right; white-space: nowrap; }
/* Grupo de AÇÕES lado a lado: a base .cxc-actions divide o corpo do .cxc-panel__titlerow (bloco 4c). */
.cxc-actions--end { justify-content: flex-end; }
/* Célula NUMÉRICA (§9: Limite do roster à direita, em mono — o cabeçalho só alinha). */
.cxc-mtable th.cxc-mcell__num { text-align: right; }
.cxc-mtable td.cxc-mcell__num { text-align: right; font-family: var(--cxc-mono); font-weight: 500; white-space: nowrap; }
/* (FIX-PZ-1 item 1) A TABELA CABE NO CARTÃO EM JANELA ESTREITA, e o cartão não ganhou barra de rolagem.
   O dono abriu a Rede Credenciada em 1024 e a coluna Ações aparecia CORTADA: a tabela media 885px dentro de um
   cartão de 712px, pintava por fora da borda branca e ainda empurrava a página para 1166px de largura rolável.

   A CAUSA, medida coluna a coluna a 1024: o mínimo da tabela é a soma dos mínimos das colunas, e a coluna Repasse
   sozinha exigia 226px de piso. O destino do repasse é uma chave Pix, quer dizer, UM token sem espaço nenhum:
   sem ponto de quebra, o min-content da célula é a palavra inteira, e nenhuma falta de espaço no contêiner a faz
   ceder. Com Repasse 226 + CNPJ 162 + Ações 186 + Loja 88 + Situação 90 + Credenciada em 133, a tabela não cabia
   em coluna alguma menor que 885px, e a do Console em 1024 tem 712px.

   O conserto tem duas metades e vale SÓ abaixo de 75rem, que é a largura em que a coluna do Console deixa de
   comportar a tabela (a coluna mede a janela menos 312px de casca, e a tabela pede 887px: a conta vira em
   ~1199px). (a) O token sem espaço ganha ponto de quebra (`overflow-wrap: anywhere`), então o min-content dele
   cai e o algoritmo da tabela volta a distribuir o espaço que EXISTE. (b) O respiro horizontal das células cai de
   16px para 10px, que devolve 72px à linha inteira. Medido a 1024: a tabela passou de 885px para 710px dentro do
   cartão de 712px, com a coluna Ações inteira na tela e a página de volta aos 1024.

   Duas coisas ficam de FORA da quebra, de propósito: o CNPJ (`.cxc-mcell__doc`) e o dinheiro
   (`.cxc-mcell__num`). São dados que a pessoa lê em grupo, e parti-los ao meio para ganhar pixel é pior do que a
   coluna larga. Foi medido: liberar a quebra do CNPJ TAMBÉM cabia, mas aí a coluna perdia o piso e o
   algoritmo da tabela entregava a folga à coluna de Ações, quebrando o documento em duas linhas até em 1440 —
   conserto que estraga a tela larga não é conserto. Acima de 75rem NADA muda: as medidas de 1280, 1440 e 1884
   são idênticas antes e depois.

   Não se pôs `overflow-x: auto` no cartão: foi assim que ele nasceu e foi removido de propósito (25/07), porque
   com um eixo em `auto` o outro deixa de ser `visible` e o cartão vira contêiner de rolagem, clipando menu de
   ação por linha. Esconder a barra também não: barra escondida é conteúdo escondido. */
@media (max-width: 75rem) {
  .cxc-mtable .cxc-mcell__mono { overflow-wrap: anywhere; }
  .cxc-mtable thead th, .cxc-mtable td { padding-inline: 10px; }
}
/* (PAGER-LIXO-1, achado T2-A2) A CHAVE PIX CONTINUA LEGÍVEL EM 1024, e a página segue sem rolagem horizontal.
   O conserto do FIX-PZ-1 logo acima fez a tabela CABER, e o preço apareceu no teste vivo de 21/09: a coluna
   Repasse encolheu a ~7 caracteres e `amigofiel@horizonte.demo` virou `chave / amigofi / el@hori / zonte.d / emo`,
   cinco linhas, exatamente na tela em que o operador confere o destino do dinheiro. A coluna Loja quebrava junto
   (`ref / OLHARCERTO`) e a página ia a 3.129px de altura para 14 lojas.

   A CAUSA é o outro lado da mesma moeda: `overflow-wrap: anywhere` derruba o min-content da célula a UM caractere,
   e o algoritmo da tabela, que reparte o espaço pela proporção dos max-content depois de satisfeitos os mínimos,
   não tem mais nenhum motivo para dar largura à coluna que mais precisa dela. Quebrar deixou de ser o último
   recurso e virou o primeiro.

   O conserto tem duas metades, e as duas valem SÓ para a Rede (`.cxc-mtable--rede`) e SÓ abaixo de 75rem:
   (a) a coluna "Credenciada em" sai de cena e a data reaparece embaixo do chip de situação, que é a célula de
   menor pressão de largura da linha (o dado não some em janela nenhuma; é a MESMA data, no mesmo HTML);
   (b) o destino do repasse e a referência da loja ganham PISO de largura, então a quebra volta a ser o que era
   para ser: o que acontece quando o texto realmente não cabe, e não o primeiro reflexo do algoritmo.

   A CONTA, sobre os mínimos que o bloco acima mediu coluna a coluna (já descontados os 12px que o respiro menor
   devolve a cada uma): Loja 106 + CNPJ 150 + Repasse 178 + Situação 92 + Ações 174 = 700px, dentro do cartão de
   712px que o Console tem em 1024. Sobram ~12px, que o algoritmo entrega à coluna de maior max-content, que é
   justamente a do repasse. Acima de 75rem NADA muda: a coluna da data volta, a de baixo do chip some, e nenhum
   piso se aplica.

   O piso é em `ch` de propósito: ele fala na unidade do problema (CARACTERES da chave) e acompanha a fonte mono
   da célula, em vez de fixar um pixel que uma troca de fonte desmentiria. 22ch cobre `amigofiel@horizonte.demo`
   em UMA linha; uma chave aleatória de 36 caracteres ou um e-mail longo seguem quebrando, agora em linhas de ~22
   caracteres em vez de 7, e sem empurrar a página. */
.cxc-mrow__regnarrow { display: none; }
@media (max-width: 75rem) {
  .cxc-mtable--rede .cxc-mcol--reg { display: none; }
  .cxc-mtable--rede .cxc-mrow__regnarrow {
    display: block; font-size: 12px; color: var(--cxc-n400); margin-top: 5px;
  }
  .cxc-mtable--rede .cxc-mcell__payout { min-width: 22ch; }
  .cxc-mtable--rede .cxc-mcell__ref { min-width: 12ch; }
}
/* (UI-ACABAMENTO-1 item 1) A TRILHA DE AUDITORIA CABE NO CARTÃO DELA, e em TODA janela.
   O dono abriu /audit e viu a tabela cortada com barra de rolagem horizontal na PÁGINA. Medido em Edge headless
   com a Administradora demo (22 eventos na trilha): a tabela pedia 1066px de mínimo dentro de um cartão de
   1040px, então ela pintava por fora da borda branca em 1884 e em 1440 também — e nas janelas em que a coluna do
   Console é menor que isso a página inteira ia junto (1347px em 1280 e 1108px em 1024).

   A CAUSA, medida coluna a coluna: o mínimo da tabela é a soma dos mínimos das colunas, e aqui TRÊS das quatro
   colunas são token de máquina SEM ESPAÇO NENHUM. "Resumo do efeito" sozinha exigia 522px de piso, porque o
   payload mascarado é uma palavra só do ponto de vista do navegador
   (`product=…;limitMinor=100000;currency=BRL;reference=MAN:DEVSEED-DEMO-CARD-1`); "Ação" pedia 270px pelo par
   verbo + `account:01a066bc-…`; e "Ator" 170px pelo login. Com Instante 104 + Ator 170 + Ação 270 + Resumo 522 a
   tabela não cabia em cartão nenhum menor que 1066px.

   O conserto é o mesmo do FIX-PZ-1 (o token sem espaço ganha ponto de quebra), com DUAS diferenças que a tela
   impôs. (a) Ele vale em TODA JANELA, e não abaixo de 75rem: o estouro aqui é contra o CARTÃO, que mede 1040px
   fixos, e não contra a coluna — esconder o conserto no @media deixaria 1884 e 1440 como estavam. (b) Ele nasce
   na CÉLULA (`td`), e não numa classe de dado: na trilha o texto de máquina está em toda coluna, e nomear cada
   uma seria a mesma lista mantida em dois lugares.

   O LOGIN DO ATOR fica de FORA da quebra, e isso é a mesma decisão do CNPJ e do dinheiro no FIX-PZ-1: é dado
   que a pessoa lê em grupo, e partir "manager@cortex.dev" em "manager / @cortex. / dev" para ganhar pixel é pior
   do que a coluna larga. Foi MEDIDO que ainda cabe: com o login inteiro o mínimo da tabela sobe de 356 para 464
   em 1280 e de 308 para 416 em 1024, contra os 968 e 712 de coluna. O que o piso do Instante segura é o
   cabeçalho ("Instante" não quebra), e por isso ele não precisa de exceção própria.

   Nada de `overflow-x: auto` no cartão (a lição de 25/07 acima segue valendo: com um eixo em `auto` o outro
   deixa de ser `visible`), nada de esconder e nada de teto em px. */
.cxc-mtable--audit td { overflow-wrap: anywhere; }
.cxc-mtable--audit td .cxc-mcell__name { overflow-wrap: normal; }
/* (360-TABELA-2, achado T1-A4 e o defeito N-1 que o primeiro conserto dele trouxe)
   AS TABELAS DE DINHEIRO DO 360 CABEM NO CARTÃO, EM TODA JANELA, SEM ROLAR O PAINEL E SEM QUEBRAR PALAVRA.

   O QUE DEU ERRADO DA PRIMEIRA VEZ, porque é a lição que este bloco carrega: o conserto anterior pôs
   `overflow-wrap: anywhere` em TODA célula destas tabelas. Isso faz a tabela "caber" pelo pior caminho possível
   — derrubando o min-content de cada célula a UM caractere. Medido ao vivo em 22/09, nas quatro larguras: o
   operador lia `Pa / ga / me / nto / no / cai / xa` (174px de altura para um rótulo de 18 caracteres),
   `Sa / qu / e / no / cai / xa` e `Dinh / eiro`. Caber destruindo o rótulo não é caber.

   A CONTA que manda, e que o conserto anterior não fez: o `.cxc-panel` tem `max-width: 900px`, então a largura
   ÚTIL do cartão é 818px em 1440 **e em 1884** (o painel não cresce com a janela) e 710px em 1024. Sete colunas
   pagam 224px só de respiro; com o conteúdo REAL ("T1 Caixa de Teste Recebedora", "Pagamento no caixa", a
   referência ISO de 22 caracteres, os chips e o botão) não existe distribuição de sete colunas que caiba em 818.
   Por isso o remédio não é apertar: é ter MENOS COLUNAS.

   A RECEITA é a que a PAGER-LIXO-1 já usou na Rede Credenciada: a coluna de menor valor sai de cena e o dado
   reaparece como SUB-LINHA da célula vizinha (`.cxc-mrow__sub`), que é a célula de menor pressão de largura da
   linha. O dado não some de janela nenhuma; é o MESMO texto, no mesmo HTML, um degrau abaixo. Pagamentos vai de
   7 para 5 colunas (a referência de idempotência desce sob o MEIO, a fatura sob o chip de SITUAÇÃO) e o Caixa da
   Recebedora idem (a Recebedora desce sob o ATO, a referência da rede sob o chip).

   E vale em TODA JANELA, sem `@media`: o estouro é contra o CARTÃO, que mede os mesmos 818px em 1884 e em 1440.
   Esconder o conserto num ponto de quebra deixaria as duas janelas em que o dono trabalha exatamente como
   estavam — foi o erro de dosagem que a medida de 1884 denunciou.

   PISOS em `ch`, e só onde o texto é de MÁQUINA: a referência (a âncora de idempotência, que pode ser uma chave
   determinística longa) e a referência da rede. `overflow-wrap: anywhere` sobrevive SÓ nelas, porque token sem
   espaço nenhum não tem outro ponto de quebra. Em rótulo de gente, NUNCA: `Dinheiro` e `Pagamento no caixa`
   quebram no espaço ou não quebram.

   A COLUNA DE AÇÕES é a última a ceder e a primeira a ser garantida: `nowrap` (herdado de
   `.cxc-mtable__actions`) e piso próprio, para que o botão de dinheiro nunca seja o que sobra de fora. E ela
   carrega SÓ botão: a frase da origem ("Pago no caixa da Recebedora …: estorno indisponível por aqui") mudou-se
   para a sub-linha da situação, porque numa célula `nowrap` ela era uma linha reta de 400px empurrando tudo.

   NADA de `overflow-x: auto` no cartão (decisão de 25/07, escrita duas vezes acima). E o `overflow-x: auto` do
   `.cxc-panel` NÃO foi removido: ele é da CS-1, vale para todo painel do Console e não é desta fatia. O que a
   ordem quer — "sem rolagem no painel" — se obtém fazendo a tabela CABER, e aí a regra fica inerte; é assim que
   ela está medida (painel com `scrollWidth == clientWidth` nas quatro larguras). */
/* O RESPIRO menor, em TODA janela e não num `@media`: estas cinco colunas são densas por natureza (duas delas
   carregam duas informações cada) e o cartão que as contém mede os mesmos 818px em 1884 e em 1440. É a metade
   (b) do remédio do FIX-PZ-1, e foi a medida que a pediu: só com as sub-linhas a tabela do Caixa ainda pedia 2px
   a mais que o cartão em 1280 e fazia o painel rolar em 1280 e 1024. Cinco colunas × 12px devolvem 60px. */
.cxc-mtable--money thead th, .cxc-mtable--money td { padding-inline: 10px; }
.cxc-mtable--money td { overflow-wrap: normal; word-break: normal; }
.cxc-mtable--money td.cxc-mcell__ref { overflow-wrap: anywhere; min-width: 14ch; }
.cxc-mtable--money td.cxc-mtable__actions { min-width: 12ch; }
/* A sub-linha que recebe a coluna aposentada: mesmo texto, um degrau abaixo, na célula de menor pressão. */
.cxc-mtable--money .cxc-mrow__sub {
  display: block; font-size: 12px; color: var(--cxc-n500); margin-top: 4px; overflow-wrap: anywhere;
}
/* A sub-linha de PROSA (o nome da Recebedora, a frase da origem) quebra no ESPAÇO, como qualquer texto. */
.cxc-mtable--money .cxc-mrow__sub--txt { overflow-wrap: normal; }
/* A metade (a) da receita da Rede: abaixo de 75rem a coluna de menor valor sai de cena e o dado reaparece na
   linha de baixo. Só o Caixa da Recebedora precisa dela — medido, é a tabela mais pesada da tela: com as cinco
   colunas ela ainda pedia 692px no cartão de 660 em 1024. O dado não some; muda de lugar. */
.cxc-mrow__narrow { display: none; }
@media (max-width: 75rem) {
  .cxc-mtable--money .cxc-mcol--dia { display: none; }
  .cxc-mtable--money .cxc-mrow__narrow {
    display: block; font-size: 12px; color: var(--cxc-n400); margin-top: 3px;
  }
}
/* (ACABAMENTO-FINAL-1, item 1; O-2 do re-teste 3 do T1) A TABELA DA NEGATIVAÇÃO CABE NO CARTÃO, EM TODA JANELA.
   Medido em Edge sobre o HTML do host de teste, com sete ordens do tamanho da demo: o cartão mede 850px de 1280 a
   1884 (o painel tem max-width 900) e 662px em 1024; a tabela de SETE colunas pedia 936px e 852px, e os botões que
   abrem o prontuário de cada ordem pintavam fora do cartão em toda janela e fora da JANELA em 1024 (o testador
   mediu 848/893 e 660/809 com os dados da demo; esta fixture é mais pesada de propósito).
   A receita é a da 360-TABELA-2: MENOS COLUNAS, com o dado descendo para a célula vizinha. Cinco colunas: o bureau
   desce para sob o chip da etapa, e a baixa desce para o fim do percurso. O respiro cai para 10px em toda janela
   (cinco colunas densas; devolve 60px). Abaixo de 75rem a coluna do percurso sai de cena e o MESMO percurso
   reaparece sob a etapa (`.cxc-mrow__narrow`, o mesmo HTML), porque em 662px nem cinco colunas deixavam o nome
   do portador em duas linhas.
   Nada de `overflow-wrap: anywhere` aqui: nenhum dado desta tabela é token de máquina sem espaço, e o que não
   pode partir (cada marco do percurso, o valor, o chip) é indivisível por construção. */
.cxc-mtable--neg thead th, .cxc-mtable--neg td { padding-inline: 10px; }
.cxc-mtable--neg .cxc-mrow__sub {
  display: block; font-size: 12px; color: var(--cxc-n500); margin-top: 4px; overflow-wrap: normal;
}
/* A nota sob o valor (queda depois do envio) é prosa: quebra no espaço, embaixo do número que não quebra. */
.cxc-mtable--neg td.cxc-mcell__num > div { white-space: normal; font-weight: 400; }
/* O percurso: prosa de 12px cuja linha só quebra ENTRE marcos; cada marco ("Bureau 13/06/2026") é um bloco só. */
.cxc-neg__percurso { font-size: 12px; color: var(--cxc-n700); }
.cxc-neg__marco { white-space: nowrap; }
/* A baixa, no fim do percurso, com o rótulo ao lado do chip (sem coluna própria, o chip sozinho não diz de quê). */
.cxc-neg__baixa {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 12px;
  color: var(--cxc-n500);
}
@media (max-width: 75rem) {
  .cxc-mtable--neg .cxc-mcol--percurso { display: none; }
  .cxc-mtable--neg .cxc-mrow__narrow { display: block; margin-top: 6px; }
}
/* A fila "O que travou" (mesma tela, mesma receita): o motivo cru do bureau é o ÚNICO token de máquina desta
   tela, e só ele pode quebrar em qualquer ponto, com piso de 14ch; o formulário da linha empilha o campo sobre o
   botão, que lado a lado numa célula `nowrap` era uma régua de ~330px. */
.cxc-mtable--neg .cxc-neg__motivo { overflow-wrap: anywhere; min-width: 14ch; }
.cxc-mtable--neg .cxc-neg__motivo code { font-family: var(--cxc-mono); font-size: 12px; color: var(--cxc-n700); }
.cxc-neg__act { display: flex; flex-direction: column; align-items: stretch; gap: 6px; white-space: normal; }
.cxc-neg__act .cx-field { margin: 0; }
.cxc-neg__act .cx-btn { white-space: nowrap; }
/* Na fila, abaixo de 75rem, a coluna do VALOR sai e o mesmo valor reaparece sob o chip (medido: com o chip
   "Baixa sem confirmação do bureau" e o botão "Recomandar a baixa", o nome ia a quatro linhas em 1024). */
.cxc-mtable--neg .cxc-mrow__sub--num { font-family: var(--cxc-mono); font-size: 13px; font-weight: 500; color: var(--cxc-n900); white-space: nowrap; }
@media (max-width: 75rem) {
  .cxc-mtable--neg .cxc-mcol--valor { display: none; }
}
/* Cor semântica das ações por linha (o skin re-tinge a.cx-btn--secondary para o texto padrão). */
.cxc-root a.cx-btn.cxc-actbtn--err { color: var(--cxc-err-text); }
.cxc-root a.cx-btn.cxc-actbtn--brand { color: var(--cxc-brand); }
.cxc-mnote .msy { font-size: 16px; }
/* Vazio da rede (storefront em brand-container) e vazio de FILTRO (texto próprio) reusam o cxc-sempty. */
.cxc-sempty__icon--brand,
.cxc-qicon--brand { background: var(--cxc-brand-container); color: var(--cxc-brand); }
.cxc-sempty__cta { margin-top: var(--cxc-lg); }
.cxc-sempty > .cx-link { display: inline-block; margin-top: var(--cxc-md); font-size: 13px; font-weight: 600; }

/* ── (4f-bis) CORPO DE ABA de uma tela de entidade (CONVENIO-UI-1, reprovação B25 item 1) ───────────────── */
/* Respiro entre a barra de abas e o conteúdo dela: card colado na aba é a mesma bagunça de card colado em card. */
.cxc-tabbody { margin-top: var(--cxc-lg); }
/* Cabeçalho da aba: título (com o contador mono) à esquerda, AÇÕES à direita, na largura CHEIA do conteúdo.
   POR QUE NÃO O .cxc-results-head. Ele é capado em 900px porque nasceu para as linhas clicáveis do Atendimento,
   e as tabelas do Convênio ocupam a largura toda: o "Gerar relatório do ciclo" parava no meio da tela, colado no
   card de cima, e o "Trocar layout de folha" ficava espremido ao lado dele. Era essa a bagunça reprovada. */
.cxc-tabhead {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cxc-md);
  flex-wrap: wrap; margin-bottom: var(--cxc-md);
  font-size: 13px; font-weight: 600; color: var(--cxc-n700);
}
/* Slot de ação da aba: N botões EM LINHA com a goteira padrão (a lição da GRADE-FAIXAS-2 aplicada ao cabeçalho),
   empurrado para a direita pelo `margin-left: auto` — nunca por cima do card seguinte. Quebra junto quando falta
   largura, em vez de estourar a linha. */
.cxc-tabhead__actions {
  display: flex; align-items: center; gap: var(--cxc-sm); flex-wrap: wrap; margin-left: auto;
}

/* ── (4g) FILA DE TRABALHO §6/§7: Aprovações (card 3 faixas) + Casos (card com trilho de origem) ────────── */
/* Filas: largura máxima 1000px (§1); contador mono; `four-eyes` inline em mono. */
.cxc-queue__list { display: flex; flex-direction: column; gap: var(--cxc-md); max-width: 1000px; }
.cxc-qcount { font-family: var(--cxc-mono); font-size: 12px; color: var(--cxc-n500); margin-bottom: var(--cxc-md); }
/* Ícone-tile compartilhado das duas filas (38px). A cor por NATUREZA (brand/info/err/warn) divide o corpo
   com os chips de estado do bloco (4c); só o cinza é exclusivo daqui. */
.cxc-qicon { width: 38px; height: 38px; border-radius: var(--cxc-r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cxc-qicon--muted { background: var(--cxc-n100); color: var(--cxc-n500); }

/* Aprovações §6: card branco de 3 faixas (identidade / DIFF em n50 / decisão). */
.cxc-apcard { background: var(--cxc-white); border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-lg); box-shadow: var(--cxc-sh-1); overflow-x: auto; }
.cxc-apcard__id { display: flex; align-items: flex-start; gap: var(--cxc-md); padding: var(--cxc-lg); }
.cxc-apcard__idtext { flex: 1; min-width: 0; }
.cxc-apcard__tipo,
.cxc-casecard__title,
.cxc-acard__name { font-size: 15px; font-weight: 600; }
.cxc-apcard__scope { font-size: 11px; font-weight: 600; font-family: var(--cxc-mono); padding: 2px 8px; border-radius: var(--cxc-r-full); background: var(--cxc-n100); color: var(--cxc-n700); }
.cxc-apcard__meta,
.cxc-casecard__meta { font-size: 13px; color: var(--cxc-n500); margin-top: 3px; overflow-wrap: anywhere; }
.cxc-apcard__meta b { color: var(--cxc-n900); font-weight: 500; }
.cxc-apcard__id > .cxc-chip { flex-shrink: 0; }
/* Faixa DIFF: fundo n50, borda superior n100. */
.cxc-apcard__diff { padding: var(--cxc-md) var(--cxc-lg) var(--cxc-lg); background: var(--cxc-n50); border-top: 1px solid var(--cxc-n100); }
.cxc-apcard__difftitle { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cxc-n500); margin-bottom: 6px; }
.cxc-apcard__diflabel { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--cxc-n500); margin-bottom: var(--cxc-sm); }
.cxc-apcard__diflabel .msy { font-size: 15px; }
.cxc-difgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--cxc-sm); }
.cxc-dif { background: var(--cxc-white); border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-sm); padding: var(--cxc-sm) var(--cxc-md); }
/* APROVACOES-LINGUAGEM-1: a chave virou o RÓTULO da tela ("Multa por atraso (%)"), não o nome do POST, e prosa
   quer a fonte de prosa. O valor segue mono: R$ e % alinham dígito a dígito no grid do de para. */
.cxc-dif__k { font-size: 12px; color: var(--cxc-n500); margin-bottom: 3px; overflow-wrap: anywhere; }
.cxc-dif__v { font-family: var(--cxc-mono); font-size: 13px; font-weight: 600; color: var(--cxc-n900); overflow-wrap: anywhere; }
.cxc-apcard__summary { font-size: 14px; color: var(--cxc-n700); background: var(--cxc-white); border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-sm); padding: var(--cxc-sm) var(--cxc-md); overflow-wrap: anywhere; }
.cxc-apcard__motivo { font-size: 13px; color: var(--cxc-n700); margin-top: var(--cxc-md); }
.cxc-apcard__motivo span { color: var(--cxc-n500); }
/* Faixa decisão: borda superior n100, botões à direita; linha de bloqueio (§5/§6) à esquerda, sem botão morto. */
.cxc-apcard__decision { display: flex; align-items: center; gap: var(--cxc-sm); padding: var(--cxc-md) var(--cxc-lg); border-top: 1px solid var(--cxc-n100); flex-wrap: wrap; }
.cxc-apcard__spacer { flex: 1; }
.cxc-apcard__blocked { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cxc-n500); flex: 1; min-width: 0; }
.cxc-apcard__blocked .msy { font-size: 18px; flex-shrink: 0; }
.cxc-apcard__decision form { display: inline; }

/* Casos §7: card raso com trilho esquerdo 3px pela ORIGEM (fora do trio = neutro n400). */
.cxc-casecard { background: var(--cxc-white); border: 1px solid var(--cxc-n100); border-left: 3px solid var(--cxc-n400); border-radius: var(--cxc-r-lg); box-shadow: var(--cxc-sh-1); padding: var(--cxc-lg); display: flex; align-items: flex-start; gap: var(--cxc-md); }
.cxc-casecard--info { border-left-color: var(--cxc-info); }
.cxc-casecard--err { border-left-color: var(--cxc-err); }
.cxc-casecard--warn { border-left-color: var(--cxc-warn); }
.cxc-casecard--muted { border-left-color: var(--cxc-n400); }
.cxc-casecard__body { flex: 1; min-width: 0; }
.cxc-casecard__owner { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cxc-info-text); margin-top: var(--cxc-sm); }
.cxc-casecard__owner .msy { font-size: 16px; }
.cxc-casecard__actions { display: flex; gap: var(--cxc-sm); flex-shrink: 0; }
.cxc-casecard__actions form { display: inline; }

/* ── (4h) INÍCIO §11 · cartões de pendência + de área (auto-FILL preserva a trilha ⇒ 1 card fica em ~1/3) ── */
.cxc-home__pend { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--cxc-lg); max-width: 1100px; margin-bottom: var(--cxc-xl); }
.cxc-home__areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--cxc-lg); max-width: 1100px; }
.cx-root .cxc-pcard, .cx-root .cxc-acard {
  display: flex; gap: var(--cxc-md); background: var(--cxc-white); border: 1px solid var(--cxc-n100);
  border-radius: var(--cxc-r-lg); box-shadow: var(--cxc-sh-1); padding: var(--cxc-lg); color: inherit; text-decoration: none;
}
.cx-root .cxc-pcard { align-items: center; gap: var(--cxc-lg); }
.cx-root .cxc-pcard:hover, .cx-root .cxc-acard:hover { border-color: var(--cxc-brand); }
/* Os tiles de ícone reusam .cxc-qicon (tile por NATUREZA das filas) — brand/warn/err já definidos. */
.cxc-pcard__body { flex: 1; min-width: 0; }
.cxc-pcard__n { font-size: 26px; font-weight: 700; font-family: var(--cxc-mono); line-height: 1; }
.cxc-pcard__label, .cxc-acard__desc { font-size: 13px; color: var(--cxc-n500); }
.cxc-pcard__label { margin-top: 2px; }
/* NOTIFY-APROVADOR-1 (decisão 153): a linha do que está por VENCER, sob o rótulo do cartão "Para você decidir".
   Cor de alerta, porque é prazo curto; o ícone do relógio entra em linha com o texto. */
.cxc-pcard__hint {
  display: flex; align-items: center; gap: 4px; margin-top: 4px;
  font-size: 12px; font-weight: 600; color: var(--cxc-warn-text);
}
.cxc-pcard__hint .msy { font-size: 15px; }
.cxc-pcard > .msy { color: var(--cxc-n400); flex-shrink: 0; }
.cxc-acard__desc { line-height: 19px; margin: 4px 0 0; text-wrap: pretty; }

/* ── (4h-bis) CONSOLE-MOD-B · HUB do Início (cartão de MÓDULO) + cabeçalho da home de módulo ──────────────
   O cartão do hub é um card de área com um segundo andar: cabeçalho que leva à home do módulo e, sob um divisor,
   os atalhos das áreas. O andar de baixo é o que preserva o never-worse (nenhuma tela ficou mais longe), e o
   divisor é o que impede que ele se leia como uma lista solta dentro do card. Cartão mais largo que o de área
   (340px) porque ele carrega duas informações empilhadas, e não uma. */
.cxc-home__mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--cxc-lg); max-width: 1100px; }
.cxc-mcard {
  background: var(--cxc-white); border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-lg);
  box-shadow: var(--cxc-sh-1); overflow: hidden;
}
.cx-root .cxc-mcard:hover { border-color: var(--cxc-brand); }
.cx-root .cxc-mcard__head {
  display: flex; align-items: flex-start; gap: var(--cxc-md); padding: var(--cxc-lg);
  color: inherit; text-decoration: none;
}
.cxc-mcard__text { flex: 1; min-width: 0; }
/* Atalhos: faixa n50 sob o divisor, para o olho ler "dentro deste módulo" e não "mais cards". */
.cxc-mcard__areas {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--cxc-sm); background: var(--cxc-n50); border-top: 1px solid var(--cxc-n100);
}
.cx-root .cxc-mcard__area {
  display: flex; align-items: center; gap: var(--cxc-sm); padding: 6px var(--cxc-md);
  border-radius: var(--cxc-r-sm); font-size: 13px; font-weight: 500; color: var(--cxc-n700); text-decoration: none;
}
.cx-root .cxc-mcard__area:hover { background: var(--cxc-white); color: var(--cxc-n900); }
.cxc-mcard__area .msy { font-size: 18px; color: var(--cxc-n500); flex-shrink: 0; }
.cxc-mcard__areaname { flex: 1; min-width: 0; }
/* As duas pastilhas do cartão: a do MÓDULO resume o que há dentro (contorno, como a do seletor), a da ÁREA leva
   à tela do número (sólida, como a do item da sidebar). Dois números com significados diferentes não podem se
   parecer, aqui pela mesma razão que não se parecem na sidebar. */
.cxc-mcard__badge, .cxc-mcard__count {
  min-width: 20px; padding: 0 5px; border-radius: var(--cxc-r-full); font-family: var(--cxc-mono);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; flex-shrink: 0;
}
.cxc-mcard__badge { background: transparent; border: 1px solid var(--cxc-brand); color: var(--cxc-brand); }
.cxc-mcard__count { background: var(--cxc-brand); color: var(--cxc-white); }
/* Cabeçalho da HOME de módulo: o tile do ícone ao lado do título, que é a identidade do módulo na tela. */
.cxc-modhead { display: flex; align-items: flex-start; gap: var(--cxc-md); }

/* ── (4i) OPERADORES §10: reusa cxc-mtable + avatar de iniciais + marca "você" ──────────────────────────── */
.cxc-opcell { display: flex; align-items: center; gap: var(--cxc-md); }
.cxc-opcell__av { width: 32px; height: 32px; border-radius: var(--cxc-r-full); background: var(--cxc-n100); color: var(--cxc-n700); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.cxc-opcell__you { font-size: 12px; color: var(--cxc-brand); font-weight: 600; }

/* ── (4j) LOGIN §11: split 1.05fr/.95fr — o layout ESTÁTICO é inline no head do login (renderiza 1×; poupa o
   orçamento da folha); aqui fica só o que exige foco/hover/media (não há inline para eles). ─────────────── */
.cxc-login { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
/* CONSERTO-REBRAND-2: o CTA veste o papel de AÇÃO da camada semântica (azul-noite do manual, decisão 119), o
   mesmo que o botão primário do Design System serve no Dashboard e no Portal. A cor de FUNDO saiu do estilo
   embutido do botão e veio para cá: atributo `style` vence seletor, então enquanto o fundo estava inline esta
   regra de hover era decoração e o botão nunca trocava de tom. Base e hover ficam juntas, na mesma fonte. */
.cx-root .cxc-login__cta { background: var(--cx-color-action); }
.cx-root .cxc-login__cta:hover { background: var(--cx-color-action-hover); }
@media (max-width: 56rem) { .cxc-login { grid-template-columns: 1fr; } .cxc-login__brand { display: none; } }

/* ── (5) Re-tunagem ESCOPADA dos componentes cx-* sob o skin (nunca a classe compartilhada) ────────────── */
/* (CONSOLE-MODHOME-FIX-1) A COLUNA DA PÁGINA CABE NA COLUNA DO MAIN, e não tem o tamanho do CONTEÚDO.
   O dono abriu o Console em 1024 e o corpo ROLAVA DE LADO no Início (`/`) e nas cinco homes de módulo
   (`/m/*`): 1332px e 1212px de largura rolável numa janela de 1024. As telas comuns (`/customers`,
   `/program-config`) mediam 1024 certinho, então não era a casca.

   A CAUSA, medida em `/m/produto`: `.cx-page` é `display:grid` (components.css) SEM
   `grid-template-columns`, quer dizer, uma coluna IMPLÍCITA de `grid-auto-columns: auto`. Uma trilha `auto`
   cresce até a contribuição de MAX-CONTENT do item, e nada a limita à largura do contêiner. Enquanto essa
   trilha está sendo medida, o espaço disponível para o filho é INDEFINIDO, e é aí que a regra do `auto-fill`
   morde: pela spec de Grid, com espaço indefinido o número de repetições sai do TAMANHO MÁXIMO DEFINIDO do
   próprio filho. As três grades da home declaram `max-width: 1100px` (`.cxc-home__pend`, `.cxc-home__areas`,
   `.cxc-home__mods`), então o `auto-fill` resolvia contra 1100 e não contra os 712px reais da coluna:
   floor((1100 + 16) / (300 + 16)) = 3 colunas de 300px + 2 vãos de 16px = 932px de contribuição. A trilha
   `auto` do `.cx-page` virava 932 dentro de um `.cx-page` de 712, e o `.cx-page__head` (que estica na mesma
   trilha) transbordava junto. No Início são 340px por cartão de módulo: 3 x 340 + 32 = 1052, que é o 1332
   que o dono viu. Por isso `.cxc-statgrid` e `.cxc-difgrid`, que usam o MESMO `auto-fill` sem `max-width`,
   nunca transbordaram: sem tamanho máximo definido, o espaço indefinido resolve em UMA repetição.

   O conserto é dizer o tamanho da trilha, que era o que faltava: `minmax(0, 1fr)` a torna DEFINIDA e igual à
   largura do `.cx-page` antes de qualquer filho ser medido. Com espaço definido, o `auto-fill` das grades
   passa a contar contra os 712px reais (2 colunas em 1024) e o `max-width: 1100px` volta a ser só o que ele
   sempre quis ser: o teto do conforto de leitura em telas largas. O `0` no mínimo é o irmão do `min-width:0`
   do `.cxc-maincol` e do `.cxc-main`: sem ele a trilha teria piso de MIN-CONTENT e um conteúdo largo (uma
   tabela) empurraria a coluna de volta. Escopado sob `.cxc-root` porque `.cx-page` é classe COMPARTILHADA e
   o defeito medido é do Console. Nada de `overflow-x:hidden`: esconder a barra esconderia o terceiro cartão,
   que é conteúdo, e não sujeira. */
.cxc-root .cx-page { grid-template-columns: minmax(0, 1fr); }
.cxc-root .cx-card { border-color: var(--cxc-n100); box-shadow: var(--cxc-sh-1); }
.cxc-root .cx-card__header { border-block-end-color: var(--cxc-n100); }
.cxc-root .cx-card__footer { border-block-start-color: var(--cxc-n100); }
.cxc-root .cx-card__title { font-size: 16px; font-weight: 600; }
.cxc-root .cx-card__subtitle { font-size: 13px; }
.cxc-root .cx-btn { border-radius: var(--cxc-r-md); }
.cxc-root .cx-btn--sm { border-radius: var(--cxc-r-sm); }
.cxc-root .cx-btn .msy { font-size: 19px; }
.cxc-root .cx-table thead th {
  background: var(--cxc-n50); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--cxc-n500); white-space: nowrap; border-block-end-color: var(--cxc-n100);
}
.cxc-root .cx-table td { border-block-end-color: var(--cxc-n100); font-size: 14px; }
.cxc-root .cx-table tbody tr:hover { background: var(--cxc-n50); }
/* (CONSTRANGE-3, item 1) A tabela LARGA DE NÚMEROS (TableOptions.WrapHeaders, hoje a Rolagem do vencido: mês, vencido e
   seis destinos em dinheiro). O cabeçalho do Console não quebra (regra acima), e oito rótulos longos em maiúsculas
   ditavam a largura: 1102 px num quadro de 1078 px a 1440. Aqui o RÓTULO quebra (o dinheiro não quebra nunca, regra
   do Design System) e o respiro lateral das células encolhe, para a tabela caber a 1440 e a 1280; o que ainda
   sobrar rola dentro do quadro (.cx-table-wrap), nunca a página. */
.cxc-root .cx-table--wrap-head thead th { white-space: normal; vertical-align: bottom; }
.cxc-root .cx-table--wrap-head th,
.cxc-root .cx-table--wrap-head td { padding-inline: 10px; }
/* FORM-ALTURA-1: a casca muda a ALTURA DO CONTROLE pelo token, nunca por regra de altura em metade dos
   controles. Painel interno, denso e de mouse: 2.5rem (40px) para todo controle do Console — campo com
   afixo, campo sem afixo, lista de opções, busca da toolbar e o botão que senta na barra de filtro. */
.cxc-root { --cx-control-height: 2.5rem; }
.cxc-root .cx-input, .cxc-root .cx-select, .cxc-root .cx-textarea { font-size: 14px; }
.cxc-root .cx-field__label { font-size: 13px; font-weight: 500; color: var(--cxc-n700); }
.cxc-root .cx-field__optional { color: var(--cxc-n400); font-weight: 400; }
.cxc-root .cx-alert { border-radius: var(--cxc-r-md); }
/* Campos do painel de parâmetros: MONO (campos numéricos em mono, §3). A ALTURA saiu daqui: era esta regra
   que falava só do .cx-input/.cx-select PUROS e deixava a caixa de afixo (R$, %) 4px mais alta ao lado.
   O padding lateral também saiu: --cxc-md e --cx-space-3 são os mesmos 12px, e a base já os aplica. */
.cxc-root .cxc-fieldgrid .cx-input { font-family: var(--cxc-mono); }
.cxc-root .cxc-fieldgrid .cx-field__hint { font-family: var(--cxc-mono); font-size: 12px; color: var(--cxc-n700); }
/* Botões renderizados como <a> (CTA por link, Cancelar do drawer): restaura a cor semântica da variante
   contra o `.cx-root a` do components.css. */
.cxc-root a.cx-btn--primary, .cxc-root a.cx-btn--danger { color: var(--cx-color-text-on-action); }
.cxc-root a.cx-btn--secondary { color: var(--cx-color-text); }

/* ── (4l) ATENDIMENTO §3 (ATEND-UI-DESIGN-1a): a CAIXA em três colunas e a conversa em balões ───────────
   O handoff `design/design_atendimento` é VINCULANTE e esta é a tradução dele para a casca do Console. Os
   tokens do protótipo (--brand, --n*, --r-*, --sh-*) são os --cxc-* que já existem acima: NENHUM valor novo
   nasceu aqui, e não há sistema de token paralelo. Sem teto de tamanho (CSS-SEM-TETO-1): o design entra
   inteiro, em vez de "economizado".

   A tela é ALTA (as três colunas rolam sozinhas), e a casca do Console rola a página.

   (ATEND-UI-DESIGN-FIX-2, defeito D-1) A ALTURA DEIXOU DE DEPENDER DO `:has()`. Ela nascia no ancestral
   (`.cxc-maincol:has(.cxc-atd) { height:100vh }`) e descia por uma corrente de `flex:1` — quer dizer, a caixa só
   tinha altura se TODOS os elos da corrente estivessem de pé, e na tela viva não estavam: em 1024 a área de
   escrita aparecia POR CIMA da linha do tempo e o rodapé da lista por cima da última conversa. Agora quem sabe a
   própria altura é a PRÓPRIA caixa (`calc(100vh - a topbar)`), que é uma medida absoluta e não uma herança: ela
   vale mesmo se o `:has()` não casar, mesmo se um head puser um wrapper no meio, mesmo se o `main` mudar de
   display. O `:has()` continua, mas só para o que ele sempre soube fazer bem: TIRAR O PADDING do `main`.

   E as bandas fixas (cabeçalho, área de escrita, cabeça e pé da lista) declaram `flex: 0 0 auto`: sem isso elas
   ENCOLHEM sob pressão (o padrão do flex é `shrink:1`) e o conteúdo delas transborda por cima do vizinho, que é
   exatamente o defeito visto. Quem absorve toda a pressão é a área ROLÁVEL de cada coluna, e ela declara
   `min-height:0` para poder mesmo encolher (sem isso o mínimo de um item de flex é o conteúdo dele). */
.cxc-maincol:has(.cxc-atd) { height: 100vh; }
.cxc-maincol:has(.cxc-atd) .cxc-main {
  padding: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
.cxc-atd {
  height: calc(100vh - var(--cxc-topbar-h)); min-height: 0; flex: 1 1 auto; overflow: hidden;
  display: flex; flex-direction: column;
}
/* A faixa de recusa/aviso do PRG e a leitura da supervisão não pertencem a nenhuma coluna: falam da tela
   inteira. A banda cede altura antes das colunas e rola sozinha, para uma supervisão alta não espremer a
   conversa (as colunas mantêm `flex:1; min-height:0`). */
.cxc-atd__top { flex: 0 1 auto; overflow-y: auto; padding: var(--cxc-md) var(--cxc-xl) 0; }
.cxc-atd__top:empty { display: none; }
.cxc-atd__top .cxc-panel { max-width: none; }

/* §3.1: três colunas num flex com overflow-x. O CENTRO tem `flex-basis:0` de propósito: com `auto` a base
   resolve para o max-content e o encolhimento cai nas laterais, que renderizam em 288/300 já em 1440. */
.cxc-atd__cols { flex: 1 1 auto; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; }
.cxc-atd__list {
  flex: 0 1 340px; min-width: 288px; background: var(--cxc-white);
  border-right: 1px solid var(--cxc-n100); display: flex; flex-direction: column; min-height: 0; height: 100%;
}
.cxc-atd__conv {
  flex: 1 1 0; min-width: 420px; background: var(--cxc-n50);
  display: flex; flex-direction: column; min-height: 0; height: 100%;
}
.cxc-atd__panel {
  flex: 0 1 360px; min-width: 300px; background: var(--cxc-white);
  border-left: 1px solid var(--cxc-n100); overflow-y: auto; padding: var(--cxc-lg); height: 100%;
}
/* Terceira coluna RECOLHÍVEL. O design pede um listener de `resize`; aqui o recolhimento automático é a
   MEDIA QUERY (a mesma régua de 1360px, sem uma linha de script) e o botão "Painel" sobrepõe a decisão nos
   dois sentidos por `?painel=1|0`, que é server-rendered como o resto do módulo. */
@media (max-width: 85rem) { .cxc-atd__panel { display: none; } }
.cxc-atd--panel-on .cxc-atd__panel { display: block; }
.cxc-atd--panel-off .cxc-atd__panel { display: none; }

/* §3.2: cabeça da coluna esquerda (abas, busca, chips e o critério de ordenação). */
.cxc-atd__listhead {
  flex: 0 0 auto; padding: var(--cxc-md) var(--cxc-md) 0; border-bottom: 1px solid var(--cxc-n100);
}
/* (ATEND-UI-DESIGN-FIX-2, defeito D-5) As abas QUEBRAVAM em duas linhas na coluna de 340px (Não atribuídas e
   Minhas em cima, Todas abertas e Encerradas embaixo), e o §3.2 desenha UMA linha. O `flex-wrap:wrap` era o que
   deixava quebrar, e o padding de 10 lateral era o que não deixava caber: com 4 abas e os contadores, a soma
   passa de 340 mesmo com o texto mais curto que a Administradora tenha. Então a linha vira `nowrap` (garantia
   categórica: nunca quebra) e ROLA na horizontal quando não couber, que é o que o brief pede no mínimo de 288.
   O padding lateral cai de 10 para 4 e a fonte de 13 para 12: MEDIDO EM TELA (screenshot 1440), era o que
   faltava para as QUATRO abas do perfil gestor caberem inteiras nos 340px (com 13/7 e depois 12.5/5 a
   "Encerradas" ainda saía cortada na borda, que lê como defeito e não como rolagem; a rolagem fica só para o
   mínimo de 288). */
.cxc-atd__tabs {
  display: flex; gap: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  /* A linha das abas invade o padding lateral do cabeçalho (16px de cada lado viravam o corte da 4ª aba):
     margem negativa devolve 20px úteis e o padding próprio de 6 preserva a respiração nas bordas. */
  margin: 0 -10px; padding: 0 6px;
}
.cx-root .cxc-atd__tab {
  flex: 0 0 auto; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3px; padding: 8px 4px; font-size: 12px; font-weight: 500;
  color: var(--cxc-n500); text-decoration: none; border-bottom: 2px solid transparent;
}
.cx-root .cxc-atd__tab:hover { color: var(--cxc-n900); }
.cx-root .cxc-atd__tab.cxc-on { color: var(--cxc-n900); font-weight: 600; border-bottom-color: var(--cxc-brand); }
.cxc-atd__tabnum {
  font-family: var(--cxc-mono); font-size: 11px; font-weight: 600; padding: 1px 5px;
  border-radius: var(--cxc-r-full); background: var(--cxc-n50); color: var(--cxc-n500);
}
.cxc-atd__tab.cxc-on .cxc-atd__tabnum { background: var(--cxc-brand-container); color: var(--cxc-brand); }
/* A BUSCA é uma barra do Design System (`cx-form-bar`), e o layout dela é dela: aqui só a margem, porque
   redeclarar `display`/`align-items` numa casca de grade é o defeito que a Rule22 guarda.

   (ATEND-UI-DESIGN-FIX-2, defeito D-4) O que havia era um botão "Buscar" GIGANTE de largura total, que o §3.2
   não tem. A causa não era o botão e sim a barra: numa coluna de 340px a grade da `cx-form-bar` colapsa para UMA
   coluna, e o slot de ação vira uma faixa inteira embaixo do campo. O conserto é tirar o slot: a lupa vai para
   DENTRO do campo (o afixo `IconName` que o pacote já tem) e o submit vira invisível (`cxc-atd__searchgo`), que
   é o que faz o Enter continuar submetendo mesmo na aba Encerradas, onde há três campos e a submissão implícita
   do HTML precisa de um botão para acontecer. A altura é a do handoff (38px) e ela entra pelo TOKEN, que é a
   única fonte de altura de controle (FORM-ALTURA-1). */
.cxc-atd__search { margin: var(--cxc-md) 0 0; --cx-control-height: 38px; }
.cxc-atd__searchgo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.cxc-atd__filters { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--cxc-sm) 0; }
.cx-root .cxc-atd__fchip {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px;
  border-radius: var(--cxc-r-sm); font-size: 12px; font-weight: 500; text-decoration: none;
  background: var(--cxc-white); color: var(--cxc-n700); border: 1px solid var(--cxc-n200);
}
.cxc-atd__fchip .msy { font-size: 15px; }
.cx-root .cxc-atd__fchip.cxc-on {
  background: var(--cxc-brand-2); color: var(--cxc-brand-on-dark); border-color: var(--cxc-brand-2);
}
.cxc-atd__sort {
  flex: 0 0 auto; font-family: var(--cxc-mono); font-size: 11px; line-height: 16px; color: var(--cxc-n500);
  padding: var(--cxc-sm) var(--cxc-sm) var(--cxc-sm);
  margin: 0;
}
.cxc-atd__rows { flex: 1 1 0; overflow-y: auto; padding: var(--cxc-sm); min-height: 0; }
/* O pé da lista fica FORA da área rolável (§3.1) e nunca encolhe: era ele que cobria a última conversa. */
.cxc-atd__listfoot {
  flex: 0 0 auto; border-top: 1px solid var(--cxc-n100); padding: var(--cxc-sm) var(--cxc-md);
  background: var(--cxc-white);
}
/* Vazio por aba (§3.2): tile 56 de marca e a frase da aba. */
.cxc-atd__empty { padding: var(--cxc-xl) var(--cxc-md); text-align: center; }
.cxc-atd__emptyicon {
  width: 56px; height: 56px; border-radius: var(--cxc-r-lg); background: var(--cxc-brand-container);
  color: var(--cxc-brand); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--cxc-md);
}
.cxc-atd__emptyicon .msy { font-size: 28px; }
.cxc-atd__emptytext { font-size: 14px; font-weight: 500; color: var(--cxc-n700); }

/* §3.3 `cxc-convrow`: a linha de conversa. É um LINK (aqui a seleção NAVEGA, porque a tela é
   server-rendered e a conversa vem do servidor), e não o botão do protótipo. */
.cx-root .cxc-convrow {
  display: flex; gap: 10px; padding: 11px var(--cxc-sm); border-left: 3px solid transparent;
  border-radius: 10px; margin-bottom: 2px; text-decoration: none; color: inherit; background: transparent;
}
.cx-root .cxc-convrow:hover { background: var(--cxc-n50); }
.cx-root .cxc-convrow--on, .cx-root .cxc-convrow--on:hover {
  background: var(--cxc-brand-container); border-left-color: var(--cxc-brand);
}
.cxc-convrow__av {
  position: relative; width: 36px; height: 36px; border-radius: var(--cxc-r-full); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600;
  background: var(--cxc-brand-2); color: var(--cxc-brand-on-dark);
}
.cxc-convrow__av--anon { background: var(--cxc-n50); color: var(--cxc-n400); }
.cxc-convrow__av--anon .msy { font-size: 20px; }
.cxc-convrow__av--closed { background: var(--cxc-n50); color: var(--cxc-n700); }
.cxc-convrow__main { flex: 1; min-width: 0; }
.cxc-convrow__top { display: flex; align-items: baseline; gap: var(--cxc-sm); }
.cxc-convrow__name {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--cxc-n900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cxc-convrow--unread .cxc-convrow__name { font-weight: 700; }
.cxc-convrow--closed .cxc-convrow__name { color: var(--cxc-n700); }
.cxc-convrow__when { font-family: var(--cxc-mono); font-size: 11px; color: var(--cxc-n500); flex-shrink: 0; }
.cxc-convrow__phone { display: block; font-family: var(--cxc-mono); font-size: 11px; color: var(--cxc-n500); }
.cxc-convrow__prev {
  display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--cxc-n500); margin-top: 2px;
}
.cxc-convrow__prev .msy { font-size: 14px; flex-shrink: 0; }
.cxc-convrow__prevtext { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cxc-convrow__unread {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--cxc-r-full); background: var(--cxc-brand);
  color: var(--cxc-white); font-family: var(--cxc-mono); font-size: 10px; font-weight: 600; line-height: 18px;
  text-align: center; flex-shrink: 0;
}
.cxc-convrow__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.cxc-convrow__who {
  font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: var(--cxc-r-full);
  background: var(--cxc-n50); color: var(--cxc-n700);
}

/* §3.3 `cxc-chanbadge`: o canal no canto do avatar. */
.cxc-chanbadge {
  position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: var(--cxc-r-full);
  background: var(--cxc-white); border: 1px solid var(--cxc-n200); color: var(--cxc-n700);
  display: flex; align-items: center; justify-content: center;
}
.cxc-chanbadge .msy { font-size: 11px; }
/* A forma EM LINHA do canal (cabeçalho da conversa): ícone mais nome em mono, sem a pastilha. */
.cxc-chanline {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--cxc-mono); font-size: 12px;
  color: var(--cxc-n500);
}
.cxc-chanline .msy { font-size: 15px; }

/* §3.3/§3.4 `cxc-window`: a janela de 24 h. Nunca em --err: janela fechada é regra do canal, não erro. */
.cxc-window { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--cxc-n500); }
.cxc-window__dot { width: 6px; height: 6px; border-radius: var(--cxc-r-full); background: var(--cxc-n400); }
.cxc-window--open .cxc-window__dot { background: var(--cxc-ok); }
.cxc-window--full {
  font-size: 12px; font-weight: 600; padding: 2px var(--cxc-sm); border-radius: var(--cxc-r-sm);
  background: var(--cxc-n50); color: var(--cxc-n700);
}
.cxc-window--full.cxc-window--open { background: var(--cxc-ok-bg); color: var(--cxc-ok-text); }
.cxc-window--full .msy { font-size: 15px; }

/* §3.4 cabeçalho da conversa. O bloco de identidade cede espaço antes do grupo de botões, que desce para a
   segunda linha em coluna estreita em vez de espremer o nome. */
.cxc-atd__head {
  flex: 0 0 auto;
  background: var(--cxc-white); border-bottom: 1px solid var(--cxc-n100); padding: var(--cxc-md) var(--cxc-lg);
  display: flex; align-items: flex-start; flex-wrap: wrap; row-gap: 10px; gap: var(--cxc-md);
}
.cxc-atd__who { flex: 1 1 200px; min-width: 200px; }
.cxc-atd__whoname, .cxc-atd__whometa { overflow-wrap: anywhere; }
.cxc-atd__whoname { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.cxc-atd__whometa { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cxc-sm); margin-top: 6px; }
.cxc-atd__phone { font-family: var(--cxc-mono); font-size: 12px; color: var(--cxc-n700); }
/* (ATEND-UI-DESIGN-FIX-2, defeito D-2) O grupo de botões ESTOURAVA a coluna: "Painel" saía cortado na borda
   direita em 1440 e 1024, e o menu `⋯` chegava a vazar por cima do cartão da coluna direita. A causa é a base
   `flex: 0 0 auto` do §3.4 SOZINHA: com `shrink:0` e sem um mínimo, a largura do grupo é a da linha inteira de
   botões, e o que não cabe na coluna é desenhado FORA dela. O §3.4 pede que em coluna estreita os botões DESÇAM
   de linha, e para descer o grupo precisa poder ficar mais estreito que a linha dele: `min-width:0` desfaz o
   mínimo automático de item de flex e `max-width:100%` prende a caixa dentro do cabeçalho. O `flex:0 0 auto`
   e o `margin-left:auto` do handoff ficam onde estão: eles é que fazem o grupo colar à direita sem espremer
   o nome. */
.cxc-atd__acts {
  flex: 0 0 auto; min-width: 0; max-width: 100%; margin-left: auto;
  display: flex; align-items: center; gap: var(--cxc-sm); flex-wrap: wrap; justify-content: flex-end;
}
.cxc-atd__acts form { margin: 0; }
/* Menu `⋯`: `<details>` puro, sem uma linha de script. O sumário é o botão de 38px. */
.cxc-atdmenu { position: relative; }
.cxc-atdmenu > summary {
  list-style: none; width: 38px; height: 38px; border: 1px solid var(--cxc-n200); border-radius: var(--cxc-r-md);
  background: var(--cxc-white); color: var(--cxc-n700); display: flex; align-items: center;
  justify-content: center; cursor: pointer;
}
.cxc-atdmenu > summary::-webkit-details-marker { display: none; }
.cxc-atdmenu[open] > summary { background: var(--cxc-n50); }
.cxc-atdmenu__pop {
  position: absolute; right: 0; top: 42px; z-index: 8; width: 248px; background: var(--cxc-white);
  border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-md); box-shadow: var(--cxc-sh-pop);
  padding: 4px 0;
}
.cx-root .cxc-atdmenu__item {
  display: flex; align-items: center; gap: var(--cxc-sm); padding: 9px var(--cxc-md); font-size: 13px;
  font-weight: 500; color: var(--cxc-n700); text-decoration: none; white-space: nowrap;
}
.cx-root .cxc-atdmenu__item:hover { background: var(--cxc-n50); color: var(--cxc-n900); }
.cxc-atdmenu__item .msy { font-size: 18px; color: var(--cxc-n500); }
/* Banner do pedido de transferência (§3.4). */
.cxc-atd__askbar {
  flex: 0 0 auto;
  background: var(--cxc-warn-bg); color: var(--cxc-warn-text); border-radius: var(--cxc-r-md);
  padding: 10px var(--cxc-md); margin: var(--cxc-md) var(--cxc-lg) 0; display: flex; align-items: center;
  gap: var(--cxc-sm); flex-wrap: wrap; font-size: 13px; font-weight: 500;
}
.cxc-atd__askbar .msy { font-size: 19px; }
.cxc-atd__askbar h2 { font-size: 13px; font-weight: 600; margin: 0; }
.cxc-atd__askrow { display: flex; align-items: center; gap: var(--cxc-sm); flex-wrap: wrap; width: 100%; }
.cxc-atd__askrow > span { flex: 1; min-width: 160px; overflow-wrap: anywhere; }

/* §3.4 linha do tempo: rolagem própria, mais antigas em cima, conteúdo de 760px centralizado. */
.cxc-atd__wire { flex: 1 1 0; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.cxc-atd__wireinner {
  max-width: 760px; margin: 0 auto; padding: var(--cxc-lg) var(--cxc-lg) var(--cxc-sm);
  display: flex; flex-direction: column; gap: var(--cxc-md);
}
.cxc-daysep { display: flex; align-items: center; gap: var(--cxc-md); }
.cxc-daysep::before, .cxc-daysep::after { content: ""; flex: 1; height: 1px; background: var(--cxc-n100); }
.cxc-daysep span {
  font-family: var(--cxc-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; color: var(--cxc-n500);
}
.cxc-bubble-in, .cxc-bubble-out {
  max-width: 78%; padding: 10px var(--cxc-lg); font-size: 14px; line-height: 21px; color: var(--cxc-n900);
  overflow-wrap: anywhere;
}
.cxc-bubble-in {
  border: 1px solid var(--cxc-n100); border-radius: 16px 16px 16px 4px; background: var(--cxc-white);
  box-shadow: var(--cxc-sh-1); margin-right: auto;
}
.cxc-bubble-out {
  margin-left: auto; border: 1px solid var(--cxc-brand-container); border-radius: 16px 16px 4px 16px;
  background: var(--cxc-brand-container);
}
.cxc-bubble-auto { background: var(--cxc-white); border: 1px dashed var(--cxc-n400); }
.cxc-bubble__tag {
  display: flex; align-items: center; gap: 5px; font-family: var(--cxc-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cxc-brand); margin-bottom: 5px;
}
.cxc-bubble__tag .msy { font-size: 13px; }
.cxc-bubble-auto .cxc-bubble__tag { color: var(--cxc-n500); }
.cxc-bubble__foot {
  display: flex; align-items: center; gap: 5px; margin-top: 5px; font-family: var(--cxc-mono);
  font-size: 11px; color: var(--cxc-n500); flex-wrap: wrap;
}
.cxc-bubble-in .cxc-bubble__foot { margin-left: 6px; }
.cxc-bubble-out .cxc-bubble__foot { justify-content: flex-end; }
.cxc-bubble__who { font-family: var(--cxc-sans); font-size: 11px; color: var(--cxc-n500); }
.cxc-bubble__ack { display: inline-flex; align-items: center; gap: 4px; }
.cxc-bubble__ack .msy { font-size: 15px; color: var(--cxc-n400); }
.cxc-bubble__ack--read .msy { color: var(--cxc-brand); }
.cxc-bubble__ack--fail .msy { color: var(--cxc-err); }
.cxc-bubble__ack--fail { color: var(--cxc-err-text); }

/* §3.4 `cxc-note`: a nota interna NUNCA parece um balão. */
.cxc-note {
  width: min(580px, 100%); margin: 0 auto; border: 1px solid var(--cxc-warn); background: var(--cxc-warn-bg);
  border-radius: var(--cxc-r-md); padding: var(--cxc-md) var(--cxc-lg);
}
.cxc-note__head {
  display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--cxc-warn-text);
}
.cxc-note__head .msy { font-size: 16px; }
.cxc-note__body {
  font-size: 14px; line-height: 21px; color: var(--cxc-n900); margin-top: 5px; overflow-wrap: anywhere;
}
.cxc-note__foot { font-family: var(--cxc-mono); font-size: 11px; color: var(--cxc-warn-text); margin-top: 6px; }

/* §3.4 `cxc-event`: linha fina, sem caixa. O evento descreve EFEITO, não rito. */
.cxc-event {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; color: var(--cxc-n500); text-align: center;
}
.cxc-event .msy { font-size: 15px; color: var(--cxc-n400); }
.cxc-event__at { font-family: var(--cxc-mono); }

/* §3.4 `cxc-media`: o cartão do anexo (o raio de 16/16/16/4 é o do balão de entrada). */
.cxc-media {
  width: min(340px, 100%); padding: var(--cxc-md); border: 1px solid var(--cxc-n100);
  border-radius: 16px 16px 16px 4px; background: var(--cxc-white); box-shadow: var(--cxc-sh-1);
  display: flex; align-items: center; gap: 10px; margin-right: auto;
}
.cxc-media--out { margin: 0 0 0 auto; border-radius: 16px 16px 4px 16px; }
.cxc-media__tile {
  width: 38px; height: 38px; border-radius: var(--cxc-r-sm); background: var(--cxc-err-bg);
  color: var(--cxc-err-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cxc-media__tile--img { background: var(--cxc-brand-container); color: var(--cxc-brand); }
.cxc-media__meta { flex: 1; min-width: 0; }
.cx-root .cxc-media__name {
  display: block; font-size: 13px; font-weight: 600; color: var(--cxc-n900); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-root .cxc-media__name:hover { color: var(--cxc-brand); }
.cxc-media__size { font-family: var(--cxc-mono); font-size: 11px; color: var(--cxc-n500); }
.cxc-media__audio { width: min(340px, 100%); margin-right: auto; }
.cxc-media__audio audio { width: 100%; display: block; }

/* §3.4 área de escrita. */
/* A área de escrita é FIXA embaixo (§3.4) e nunca encolhe: com o `shrink:1` do padrão ela era espremida e o
   conteúdo dela transbordava por cima da última bolha da linha do tempo (defeito D-1, visto em 1024). Ela também
   rola sozinha se um dia ficar mais alta que a coluna, em vez de empurrar a conversa para fora da tela. */
.cxc-comp {
  flex: 0 0 auto; max-height: 60%; overflow-y: auto;
  background: var(--cxc-white); border-top: 1px solid var(--cxc-n100);
  padding: var(--cxc-md) var(--cxc-lg) var(--cxc-lg);
}
.cxc-comp__inner { max-width: 760px; margin: 0 auto; }
/* A MOLDURA é a caixa, não o campo: o textarea do Design System vive dentro dela sem borda própria. A ALTURA
   continua tendo UMA fonte (FORM-ALTURA-1): a caixa redefine o token --cx-control-height-text no contêiner e o
   controle o lê, em vez de a folha declarar altura num seletor de controle. */
.cxc-comp__box {
  border: 1px solid var(--cxc-n200); border-radius: var(--cxc-r-md); box-shadow: var(--cxc-sh-1);
  background: var(--cxc-white); --cx-control-height-text: 76px;
}
.cxc-comp__box .cx-form__grid { display: block; padding: 0; }
.cxc-comp__box .cx-field { margin: 0; }
.cxc-comp__box--note { border-color: var(--cxc-warn); background: var(--cxc-warn-bg); }
.cxc-comp__bar {
  display: flex; align-items: center; gap: var(--cxc-sm); padding: var(--cxc-sm) 10px;
  border-bottom: 1px solid var(--cxc-n100); flex-wrap: wrap;
}
.cxc-comp__box--note .cxc-comp__bar { border-bottom-color: var(--cxc-warn); }
.cxc-comp__box--note .cxc-seg { background: rgba(255, 255, 255, .55); }
/* (ATEND-UI-DESIGN-FIX-1, achado M-2) No modo NOTA o CTA é "Salvar nota" em `--warn-text` (§3.4), e não o
   primário da MARCA: a caixa inteira é de aviso, e um botão verde no meio dela diria que aquilo vai ao portador. */
.cxc-comp__box--note .cx-btn--primary { background: var(--cxc-warn-text); }
.cxc-comp__box--note .cx-btn--primary:hover { background: var(--cxc-warn-text); filter: brightness(.94); }
.cxc-comp__notice {
  display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--cxc-warn-text); margin-left: auto;
}
.cxc-comp__notice .msy { font-size: 15px; }
.cxc-comp__box textarea {
  display: block; width: 100%; border: none; outline: none; background: transparent; resize: none;
  padding: var(--cxc-md) var(--cxc-lg); font-family: inherit; font-size: 14px; line-height: 21px;
  color: var(--cxc-n900); border-radius: 0;
}
.cxc-comp__foot {
  display: flex; align-items: center; gap: var(--cxc-sm); padding: var(--cxc-sm) 10px var(--cxc-md);
  flex-wrap: wrap;
}
.cxc-comp__hint { font-family: var(--cxc-mono); font-size: 11px; color: var(--cxc-n400); }
.cxc-comp__send { margin-left: auto; }
.cx-root .cxc-comp__tool {
  display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px;
  border: 1px solid var(--cxc-n200); border-radius: var(--cxc-r-sm); background: var(--cxc-white);
  font-size: 12px; font-weight: 600; color: var(--cxc-n700); text-decoration: none;
}
.cx-root .cxc-comp__tool:hover { border-color: var(--cxc-brand); color: var(--cxc-brand); }
.cxc-comp__tool .msy { font-size: 17px; }
/* Faixa fora da janela (§3.4) e os quatro ESTADOS TRAVADOS. */
.cxc-comp__strip {
  display: flex; align-items: center; gap: var(--cxc-md); border: 1px solid var(--cxc-n100);
  background: var(--cxc-n50); border-radius: var(--cxc-r-md); padding: 10px var(--cxc-lg);
  margin-bottom: var(--cxc-md); flex-wrap: wrap;
}
.cxc-comp__strip .msy { font-size: 19px; color: var(--cxc-n500); }
.cxc-comp__striptext { flex: 1; min-width: 220px; font-size: 13px; line-height: 19px; color: var(--cxc-n700); }
.cxc-comp__locked {
  display: flex; align-items: center; gap: var(--cxc-md); border: 1px dashed var(--cxc-n200);
  background: var(--cxc-n50); border-radius: var(--cxc-r-md); padding: var(--cxc-md) var(--cxc-lg); flex-wrap: wrap;
}
.cxc-comp__locked .msy { font-size: 20px; color: var(--cxc-n400); }
.cxc-comp__lockedtext { flex: 1; min-width: 200px; font-size: 14px; color: var(--cxc-n700); }
.cxc-comp__lockedacts {
  display: flex; align-items: center; gap: var(--cxc-sm); flex-wrap: wrap; margin-left: auto;
}
.cxc-comp__lockedacts form { margin: 0; }
/* O botão de ANEXAR do rodapé (§3.4): 34x34, e é um `<label>` do campo do formulário de arquivo, porque um
   `<form>` não aninha em outro e o rótulo atravessa essa fronteira sem uma linha de script. */
.cxc-comp__attach {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 1px solid var(--cxc-n200); border-radius: var(--cxc-r-sm); background: var(--cxc-white);
  color: var(--cxc-n700); cursor: pointer; flex-shrink: 0;
}
.cxc-comp__attach:hover { border-color: var(--cxc-brand); color: var(--cxc-brand); }
/* O envio de ARQUIVO é formulário PRÓPRIO (multipart, bilhete próprio): ele mora abaixo da caixa. */
.cxc-comp__file { margin-top: var(--cxc-sm); }
/* REALCE PROGRESSIVO (ATEND-UI-DESIGN-FIX-2, defeito D-7). O que a FIX-1 fez foi esconder SÓ o campo de arquivo,
   e o que sobrou na tela viva foi pior do que o problema: um campo "Legenda · opcional" solto e um botão PRETO de
   largura total "Enviar arquivo" competindo com o Enviar da caixa. Com o script no ar o formulário inteiro fica
   QUIETO (quem escolhe é o botão de 34x34 do rodapé) e ele só reaparece quando há um arquivo escolhido: aí entram
   a pílula com o nome, a legenda e um "Enviar arquivo" secundário. SEM script nada disso acontece e o formulário
   cru continua sendo o caminho, agora discreto (o botão é secundário de 34px, nunca primário de largura total). */
.cxc-comp__file--enh .cxc-comp__filefield,
.cxc-comp__file--enh .cxc-comp__filecap,
.cxc-comp__file--enh .cxc-comp__filesend { display: none; }
.cxc-comp__file--enh.cxc-comp__file--has .cxc-comp__filecap,
.cxc-comp__file--enh.cxc-comp__file--has .cxc-comp__filesend { display: grid; }
.cxc-comp__file--enh:not(.cxc-comp__file--has) { margin-top: 0; gap: 0; }
/* O botão do envio de arquivo lê a altura do handoff (34px) sem furar a regra de UMA fonte de altura: quem manda
   no botão da barra é `--cx-control-height`, e ele é redefinido aqui, no contêiner. */
.cxc-comp__file { --cx-control-height: 34px; }

/* §3.5 `cxc-qrpop`: o conteúdo do seletor de respostas rápidas. Aqui ele vive DENTRO do drawer do Console
   (server-rendered, PRG puro), com o desenho de linha do popover do protótipo. */
.cxc-qrpop__hint {
  font-family: var(--cxc-mono); font-size: 11px; color: var(--cxc-n400); display: inline-block;
  margin-left: var(--cxc-sm); align-self: center;
}
.cxc-qrpop__list { margin-top: var(--cxc-sm); }
.cxc-qrpop__row { padding: 10px 0; border-bottom: 1px solid var(--cxc-n100); }
.cxc-qrpop__top { display: flex; align-items: center; justify-content: space-between; gap: var(--cxc-sm); }
/* O par CHIP DE CATEGORIA + "Usar" à direita da linha. O drawer do Console escolhe por LINK (PRG puro), e o
   protótipo escolhe clicando a linha inteira; o chip fica onde o §3.5 o desenha, ao lado do que confirma. */
.cxc-qrpop__acts { display: flex; align-items: center; gap: var(--cxc-sm); flex-shrink: 0; }
.cxc-qrpop__title { font-size: 13px; font-weight: 600; }
.cxc-qrpop__key { font-family: var(--cxc-mono); font-size: 11px; font-weight: 600; color: var(--cxc-brand); }
.cxc-qrpop__cat {
  font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: var(--cxc-r-full);
  background: var(--cxc-n50); color: var(--cxc-n700);
}
.cxc-qrpop__text { font-size: 12px; color: var(--cxc-n500); margin-top: 4px; overflow-wrap: anywhere; }

/* O CENTRO sem conversa escolhida (§3.4, "vazio"). */
.cxc-atd__none {
  flex: 1 1 0; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--cxc-md); padding: var(--cxc-2xl); text-align: center; color: var(--cxc-n500);
}
.cxc-atd__none .msy { font-size: 34px; color: var(--cxc-n400); }
.cxc-atd__nonetext { font-size: 14px; }
/* O h1 da tela existe para leitor de tela: o design põe o nome da área no breadcrumb da topbar. */
.cxc-atd__srtitle {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── (4l-2) ATENDIMENTO §3.6/§3.7/§5.12 (ATEND-UI-DESIGN-1b): a COLUNA DIREITA e a SUPERVISÃO ───────────
   Continuação da seção acima, com a mesma disciplina: os tokens do protótipo são os --cxc-* que já existem,
   nenhum valor novo nasce aqui e não há teto de tamanho (CSS-SEM-TETO-1). */

/* §3.6 rótulo de seção da coluna direita ("ATALHOS DE AÇÃO", "CONVERSAS ANTERIORES"). */
.cxc-pnlabel {
  font-family: var(--cxc-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cxc-n500); margin: var(--cxc-lg) 0 var(--cxc-sm);
}
.cxc-pnlabel:first-child { margin-top: 0; }

/* §3.6 CARTÃO DE IDENTIDADE: topo escuro de marca, corpo branco. */
.cxc-idcard {
  border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-lg); box-shadow: var(--cxc-sh-1);
  background: var(--cxc-white); overflow: hidden;
}
/* (ATEND-UI-DESIGN-FIX-2, defeito D-6) O topo escuro aparecia INSET, com uma moldura clara em volta, e o §3.6
   desenha o topo SANGRANDO até as bordas do cartão com o raio superior do próprio cartão. O `overflow:hidden` do
   cartão recorta o filho pela caixa de PADDING, quer dizer, por dentro da borda de 1px, e é essa borda que
   aparecia como moldura. A margem negativa de 1px puxa o topo POR CIMA da borda nos três lados dele, e o raio
   passa a ser o raio externo do cartão (o mesmo `--cxc-r-lg`), que é o que o desenho mostra. Os chips continuam
   DENTRO do topo, sob o divisor translúcido: eles são filhos dele, e o `margin-bottom:0` garante que o padding
   de baixo do topo é o último respiro antes do corpo branco. */
.cxc-idcard__top {
  background: var(--cxc-brand-2); padding: var(--cxc-lg);
  margin: -1px -1px 0; border-radius: var(--cxc-r-lg) var(--cxc-r-lg) 0 0;
}
.cxc-idcard__id { display: flex; align-items: center; gap: 10px; }
.cxc-idcard__av {
  width: 44px; height: 44px; border-radius: var(--cxc-r-full); flex-shrink: 0;
  background: var(--cxc-brand-on-dark); color: var(--cxc-brand-2);
  display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700;
}
.cxc-idcard__who { min-width: 0; }
.cxc-idcard__name {
  font-size: 16px; font-weight: 600; color: var(--cxc-white); margin: 0; overflow-wrap: anywhere;
}
.cxc-idcard__doc { font-family: var(--cxc-mono); font-size: 12px; color: var(--cxc-n400); margin-top: 2px; }
.cxc-idcard__prod {
  font-family: var(--cxc-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cxc-brand-on-dark); margin-top: 3px; overflow-wrap: anywhere;
}
.cxc-idcard__chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin: var(--cxc-md) 0 0; min-width: 0;
  padding-top: var(--cxc-md); border-top: 1px solid rgba(255, 255, 255, .2);
}
.cxc-idcard__body { padding: var(--cxc-md) var(--cxc-lg) var(--cxc-lg); }
/* A linha do cartão principal. O número é SEMPRE mascarado (a única máscara do Console). */
.cxc-idcard__card { display: flex; align-items: center; gap: 10px; }
.cxc-idcard__card .msy { font-size: 20px; color: var(--cxc-n500); }
.cxc-idcard__pan { font-family: var(--cxc-mono); font-size: 13px; font-weight: 500; color: var(--cxc-n900); }
.cxc-idcard__cardsub { font-size: 11px; color: var(--cxc-n500); }
.cxc-idcard__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cxc-md);
  margin-top: var(--cxc-md); padding-top: var(--cxc-md); border-top: 1px solid var(--cxc-n100);
}
.cxc-idcard__k { font-size: 11px; color: var(--cxc-n500); }
.cxc-idcard__v {
  font-family: var(--cxc-mono); font-size: 15px; font-weight: 600; color: var(--cxc-n900);
  overflow-wrap: anywhere;
}
.cxc-idcard__v--brand { color: var(--cxc-brand); }
.cxc-idcard__app {
  display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cxc-n500);
  margin-top: var(--cxc-md);
}
.cxc-idcard__app .msy { font-size: 17px; }
.cx-root .cxc-idcard__more {
  display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600;
  color: var(--cxc-brand); text-decoration: none; margin-top: var(--cxc-md);
}
.cx-root .cxc-idcard__more:hover { text-decoration: underline; }
.cxc-idcard__more .msy { font-size: 17px; }

/* §3.6 ATALHOS DE AÇÃO: lista vertical. A linha SEM alçada não some (o operador precisa saber a quem
   escalar): ela vira o mesmo item, sem href e sem hover, com o cadeado e a pílula do §5. */
.cxc-actlist { display: flex; flex-direction: column; gap: 6px; }
.cx-root .cxc-actlist__item {
  display: flex; align-items: center; gap: var(--cxc-sm); padding: 10px var(--cxc-md);
  border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-sm); background: var(--cxc-white);
  font-size: 13px; font-weight: 500; color: var(--cxc-n700); text-decoration: none;
}
.cx-root .cxc-actlist__item:hover { border-color: var(--cxc-brand); color: var(--cxc-brand); }
.cxc-actlist__item .msy { font-size: 18px; color: var(--cxc-n500); flex-shrink: 0; }
.cxc-actlist__label { flex: 1; min-width: 0; }
.cxc-actlist__item--off, .cxc-actlist__item--off:hover {
  color: var(--cxc-n400); cursor: not-allowed; border-color: var(--cxc-n100); background: var(--cxc-n50);
}
.cxc-actlist__item--off .msy { color: var(--cxc-n400); }
.cxc-actlist__req {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--cxc-n500);
  white-space: nowrap;
}

/* §3.6 CONVERSAS ANTERIORES desta conta. */
.cxc-prevc {
  border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-md); box-shadow: var(--cxc-sh-1);
  background: var(--cxc-white); overflow: hidden;
}
.cx-root .cxc-prevc__row {
  display: flex; align-items: center; gap: var(--cxc-sm); padding: 10px var(--cxc-md);
  text-decoration: none; color: inherit; border-bottom: 1px solid var(--cxc-n100);
}
.cx-root .cxc-prevc__row:last-child { border-bottom: none; }
.cx-root .cxc-prevc__row:hover { background: var(--cxc-n50); }
.cxc-prevc__row .msy { font-size: 17px; color: var(--cxc-n500); flex-shrink: 0; }
.cxc-prevc__main { flex: 1; min-width: 0; }
/* (ATEND-UI-DESIGN-FIX-2, defeito D-8) O assunto tem LINHA PRÓPRIA e a data vem embaixo (§3.6). O `display`
   acompanha o markup (que já usa blocos) para o desenho não depender só de qual elemento o head escolheu. */
.cxc-prevc__subject {
  display: block; font-size: 13px; font-weight: 600; color: var(--cxc-n900); overflow-wrap: anywhere;
}
.cxc-prevc__meta {
  display: block; font-family: var(--cxc-mono); font-size: 11px; color: var(--cxc-n500); margin-top: 2px;
  overflow-wrap: anywhere;
}
.cxc-prevc__empty { padding: var(--cxc-md); font-size: 13px; color: var(--cxc-n500); }

/* §3.6 conversa NÃO IDENTIFICADA. */
.cxc-anon {
  border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-lg); box-shadow: var(--cxc-sh-1);
  background: var(--cxc-white); padding: var(--cxc-lg);
}
.cxc-anon__id { display: flex; align-items: center; gap: 10px; }
.cxc-anon__av {
  width: 44px; height: 44px; border-radius: var(--cxc-r-full); flex-shrink: 0; background: var(--cxc-n50);
  color: var(--cxc-n400); display: flex; align-items: center; justify-content: center;
}
.cxc-anon__av .msy { font-size: 24px; }
.cxc-anon__title { font-size: 16px; font-weight: 600; margin: 0; }
.cxc-anon__phone {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: var(--cxc-sm);
  font-family: var(--cxc-mono); font-size: 12px; color: var(--cxc-n700);
}
.cxc-anon__phone form { margin: 0; }
.cxc-anon__first {
  font-family: var(--cxc-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cxc-n500); margin-top: 6px;
}
.cxc-anon__text { font-size: 13px; line-height: 19px; color: var(--cxc-n500); margin-top: var(--cxc-md); }
.cxc-anon__cta { margin-top: var(--cxc-md); }
.cxc-anon__cta .cx-btn { width: 100%; }
/* Possíveis portadores: nome, CPF completo e produto, mais o "É este" que leva ao vínculo. */
.cxc-cand {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cxc-sm);
  border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-md); padding: 10px var(--cxc-md);
  margin-bottom: 6px;
}
.cxc-cand__who { min-width: 0; }
.cxc-cand__name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.cxc-cand__meta { font-family: var(--cxc-mono); font-size: 11px; color: var(--cxc-n500); overflow-wrap: anywhere; }

/* §3.7 FAIXA DE STAT TILES da supervisão. Desenho PRÓPRIO do handoff (tile de ícone, valor mono de 20),
   diferente do `cxc-stat` compartilhado do 360 e da Cobrança, que por isso fica intocado. */
/* (ATEND-UI-DESIGN-FIX-2, defeito D-3) A faixa era um PAINEL alto com título, parágrafo e muito vazio, e o §3.7
   desenha uma BANDA FINA acima das colunas: fundo branco, régua embaixo, `padding:12px 24px` e grid de 4. */
.cxc-atdband {
  flex: 0 0 auto; background: var(--cxc-white); border-bottom: 1px solid var(--cxc-n100);
  padding: var(--cxc-md) var(--cxc-xl);
}
/* O `h2` da banda existe para leitor de tela e para quem navega por títulos: o desenho não escreve "Supervisão"
   em lugar nenhum da faixa, e os quatro rótulos já dizem o que ela é. Mesma solução do `h1` da tela. */
.cxc-atdband__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.cxc-atdstats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cxc-md);
}
/* Abaixo de 1360 a terceira coluna some e a tela fica estreita: quatro tiles em fila viram quatro tiras. */
@media (max-width: 85rem) { .cxc-atdstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cx-root .cxc-atdstat {
  display: flex; align-items: center; gap: 10px; padding: 10px var(--cxc-md);
  border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-md); box-shadow: var(--cxc-sh-1);
  background: var(--cxc-white); color: inherit; text-decoration: none;
}
.cx-root a.cxc-atdstat:hover { border-color: var(--cxc-brand); }
.cxc-atdstat__icon {
  width: 34px; height: 34px; border-radius: var(--cxc-r-sm); background: var(--cxc-brand-container);
  color: var(--cxc-brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cxc-atdstat__icon .msy { font-size: 19px; }
/* O rótulo em CIMA e o valor EMBAIXO (§3.7). Eram dois `<span>` em fluxo de linha, e por isso a tela viva
   rendia "Não atribuídas0" e "1ª resposta hojesem resposta medida", grudados: a pilha é do LAYOUT, não de um
   espaço escrito no texto. A linha de baixo é o valor mais a unidade, alinhados pela base. */
.cxc-atdstat__main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cxc-atdstat__label { font-size: 12px; color: var(--cxc-n700); }
.cxc-atdstat__line { display: flex; align-items: baseline; gap: 5px; min-width: 0; flex-wrap: wrap; }
.cxc-atdstat__value {
  font-family: var(--cxc-mono); font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
  color: var(--cxc-n900); overflow-wrap: anywhere;
}
/* Valor que é FRASE, e não número ("sem resposta medida"): 20px em mono viraria um parágrafo dentro do tile. */
.cxc-atdstat__value--text { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--cxc-n700); }
.cxc-atdstat__unit { font-size: 11px; color: var(--cxc-n500); }
/* Não atribuídas maior que zero é ATENÇÃO, não erro: há fila esperando, e nada quebrou. */
.cxc-atdstat__value--warn { color: var(--cxc-warn-text); }
.cxc-atdstat__value--brand { color: var(--cxc-brand); }

/* §5.12 EQUIPE: bloco recolhível (`<details>`, o mesmo mecanismo sem script do menu do §3.4). */
.cxc-team { margin-top: var(--cxc-md); }
.cxc-team > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--cxc-n700);
}
.cxc-team > summary::-webkit-details-marker { display: none; }
.cxc-team > summary:hover { color: var(--cxc-brand); }
.cxc-team__sub { font-size: 12px; color: var(--cxc-n500); margin: var(--cxc-sm) 0; }

/* §3.4 `cxc-audio`: o tocador do áudio recebido. Ele é REALCE: sem script o `<audio controls>` nativo
   continua sendo o tocador, e é ele que o JS esconde ao assumir. */
.cxc-audio {
  width: min(340px, 100%); margin-right: auto; padding: 10px var(--cxc-md);
  border: 1px solid var(--cxc-n100); border-radius: 16px 16px 16px 4px; background: var(--cxc-white);
  box-shadow: var(--cxc-sh-1);
}
.cxc-audio audio { width: 100%; display: block; }
.cxc-audio__ui { display: none; align-items: center; gap: 10px; }
.cxc-audio--on .cxc-audio__ui { display: flex; }
.cxc-audio--on audio { display: none; }
.cxc-audio__play {
  width: 34px; height: 34px; border-radius: var(--cxc-r-full); border: none; flex-shrink: 0;
  background: var(--cxc-brand); color: var(--cxc-white); display: flex; align-items: center;
  justify-content: center; cursor: pointer;
}
.cxc-audio__play .msy { font-size: 20px; }
.cxc-audio__mid { flex: 1; min-width: 0; }
.cxc-audio__bar { height: 4px; border-radius: var(--cxc-r-full); background: var(--cxc-n100); overflow: hidden; }
.cxc-audio__fill { height: 100%; width: 0; background: var(--cxc-brand); }
.cxc-audio__time { font-family: var(--cxc-mono); font-size: 11px; color: var(--cxc-n500); margin-top: 4px; }
.cxc-audio__rate {
  height: 26px; padding: 0 8px; border: 1px solid var(--cxc-n200); border-radius: var(--cxc-r-sm);
  background: var(--cxc-white); font-family: var(--cxc-mono); font-size: 11px; font-weight: 600;
  color: var(--cxc-n700); cursor: pointer; flex-shrink: 0;
}
.cxc-audio__rate:hover { border-color: var(--cxc-brand); color: var(--cxc-brand); }

/* §3.4 caixa de escrita: contador de caracteres e prévia do anexo. Os dois são REALCE (o servidor rende o
   vazio e o JS preenche), e sem script a caixa continua exatamente como está. */
.cxc-comp__count {
  font-family: var(--cxc-mono); font-size: 11px; color: var(--cxc-n500); margin-left: auto;
}
.cxc-comp__count--over { color: var(--cxc-err-text); }
.cxc-comp__pill {
  display: none; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 6px 5px 10px;
  border: 1px solid var(--cxc-n200); border-radius: var(--cxc-r-sm); font-size: 12px;
  color: var(--cxc-n700); max-width: 100%;
}
.cxc-comp__pill--on { display: inline-flex; }
.cxc-comp__pill .msy { font-size: 16px; color: var(--cxc-n500); }
.cxc-comp__pillname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxc-comp__pillx {
  width: 20px; height: 20px; border: none; border-radius: var(--cxc-r-sm); background: transparent;
  color: var(--cxc-n500); cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cxc-comp__pillx:hover { background: var(--cxc-n50); color: var(--cxc-n900); }
.cxc-comp__pillx .msy { font-size: 15px; }

/* ── (4l-3) ATENDIMENTO §6 (ATEND-UI-DESIGN-1c): a tela de CONFIGURAÇÃO do módulo ───────────────────────
   O handoff §6 desenha DUAS seções (WhatsApp e Atendimento) em cartão de raio grande, cada uma com um
   cabeçalho de tile de ícone 36 + h2 17/600 + chip de situação à direita, e dentro delas sub-blocos
   separados por régua. Mesma disciplina dos blocos 4l e 4l-2: nenhum valor novo nasce aqui, tudo sai dos
   --cxc-* que já existem, e não há teto de CSS (CSS-SEM-TETO-1).

   UMA NOTA DE ALTURA (Rule20): nenhuma regra daqui declara altura em seletor que termine em controle de
   formulário. Onde o desenho pede um controle mais baixo que o padrão (o chip de assunto do §6.2), a
   altura vem de REDEFINIR --cx-control-height no CONTÊINER, que é o mecanismo que a própria Rule20
   documenta, e não de um height no .cx-input. */

/* A casca da página: 1080 de largura, como o §6 manda. */
.cxc-atcfg { max-width: 1080px; }
.cxc-atcfg__title h1 { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; }
.cxc-atcfg__title p { font-size: 15px; color: var(--cxc-n500); margin: 0 0 var(--cxc-xl); }

/* SEÇÃO (§6): cartão branco de raio grande. */
.cxc-atcfg__sec {
  background: var(--cxc-white); border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-lg);
  box-shadow: var(--cxc-sh-1); margin-bottom: var(--cxc-xl);
}
.cxc-atcfg__sechead {
  display: flex; align-items: center; gap: var(--cxc-md); flex-wrap: wrap;
  padding: var(--cxc-lg) var(--cxc-xl); border-bottom: 1px solid var(--cxc-n100);
}
.cxc-atcfg__sectile {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--cxc-r-sm);
  background: var(--cxc-brand-container); color: var(--cxc-brand);
  display: flex; align-items: center; justify-content: center;
}
.cxc-atcfg__sectile .msy { font-size: 20px; }
.cxc-atcfg__sechead h2 { font-size: 17px; font-weight: 600; margin: 0; }
.cxc-atcfg__body { padding: var(--cxc-lg) var(--cxc-xl); }

/* Sub-bloco do §6.2 (horário, automáticas, assuntos, respostas, quem atende), separado por régua. */
.cxc-atcfg__sub { padding: var(--cxc-lg) var(--cxc-xl); border-top: 1px solid var(--cxc-n100); }
/* O primeiro sub-bloco vem logo abaixo do cabeçalho da seção, que já traz a própria régua: sem isto as duas
   se somam e a seção nasce com uma linha dupla. */
.cxc-atcfg__sub--first { border-top: none; }
.cxc-atcfg__sub h3 { font-size: 15px; font-weight: 600; margin: 0 0 3px; }
.cxc-atcfg__subnote { font-size: 13px; line-height: 20px; color: var(--cxc-n500); margin: 0 0 var(--cxc-md); text-wrap: pretty; }
.cxc-atcfg__subnote--mono { font-family: var(--cxc-mono); }

/* CHIP DE SITUAÇÃO do cabeçalho da seção (§6.1: Conectado / Desconectado / Erro de conexão). */
.cxc-atcfg__chip {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--cxc-r-full);
  background: var(--cxc-n50); color: var(--cxc-n700);
}
.cxc-atcfg__chip .msy { font-size: 15px; }
.cxc-atcfg__chip--ok { background: var(--cxc-ok-bg); color: var(--cxc-ok-text); }
.cxc-atcfg__chip--err { background: var(--cxc-err-bg); color: var(--cxc-err-text); }

/* §6.1 DESCONECTADO: parágrafo de 520 + a chamada primária, na mesma linha enquanto couber. */
.cxc-atcfg__offrow { display: flex; align-items: center; gap: var(--cxc-xl); flex-wrap: wrap; margin-bottom: var(--cxc-lg); }
.cxc-atcfg__lead { font-size: 14px; line-height: 21px; color: var(--cxc-n700); margin: 0; max-width: 520px; text-wrap: pretty; }

/* §6.1 ERRO DE CONEXÃO: faixa vermelha com o motivo e a ação. */
.cxc-atcfg__errband {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  padding: var(--cxc-md) var(--cxc-lg); border: 1px solid var(--cxc-err); border-radius: var(--cxc-r-md);
  background: var(--cxc-err-bg); color: var(--cxc-err-text); margin-bottom: var(--cxc-lg);
}
.cxc-atcfg__errband .msy { font-size: 20px; flex-shrink: 0; }
.cxc-atcfg__errtext { flex: 1; min-width: 200px; font-size: 13px; line-height: 20px; text-wrap: pretty; }

/* §6.1 CONECTADO: a grade auto-fit de 190 com Número, Nome exibido, Qualidade e Modelo. */
.cxc-atcfg__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--cxc-lg); align-items: start;
}
.cxc-atcfg__k { font-size: 11px; font-weight: 500; color: var(--cxc-n500); }
.cxc-atcfg__v { font-size: 15px; font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
.cxc-atcfg__v--mono { font-family: var(--cxc-mono); }
.cxc-atcfg__v--plain { font-size: 13px; font-weight: 400; color: var(--cxc-n700); margin-top: 4px; }
/* Chip de QUALIDADE DA CONTA: ponto de 7px na cor base + rótulo. Desconhecida fica neutra, sem inventar cor. */
.cxc-atcfg__qual {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--cxc-r-full);
  background: var(--cxc-n50); color: var(--cxc-n700);
}
.cxc-atcfg__qual::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--cxc-r-full); background: var(--cxc-n400);
}
.cxc-atcfg__qual--ok { background: var(--cxc-ok-bg); color: var(--cxc-ok-text); }
.cxc-atcfg__qual--ok::before { background: var(--cxc-ok); }
.cxc-atcfg__qual--warn { background: var(--cxc-warn-bg); color: var(--cxc-warn-text); }
.cxc-atcfg__qual--warn::before { background: var(--cxc-warn); }
.cxc-atcfg__qual--err { background: var(--cxc-err-bg); color: var(--cxc-err-text); }
.cxc-atcfg__qual--err::before { background: var(--cxc-err); }

/* Rodapé da conexão: "Conectado em ... por ..." em mono, e as ações à direita. */
.cxc-atcfg__connfoot {
  display: flex; align-items: center; gap: var(--cxc-md); flex-wrap: wrap;
  margin-top: var(--cxc-lg); padding-top: var(--cxc-lg); border-top: 1px solid var(--cxc-n100);
}
.cxc-atcfg__connwhen { font-family: var(--cxc-mono); font-size: 12px; color: var(--cxc-n500); }
.cxc-atcfg__connacts { margin-left: auto; display: flex; gap: var(--cxc-sm); flex-wrap: wrap; }

/* Os IDENTIFICADORES da conexão (WABA, id do número, token, conferência, quem paga). O §6 não os desenha,
   mas eles são promessa desta tela desde o ATENDIMENTO-3, e sumir com eles seria perder informação de
   operação e de segurança: ficam num detalhe recolhido, abaixo da grade. */
.cxc-atcfg__more { margin-top: var(--cxc-lg); border-top: 1px solid var(--cxc-n100); padding-top: var(--cxc-md); }
.cxc-atcfg__more > summary {
  font-size: 13px; font-weight: 600; color: var(--cxc-n700); cursor: pointer;
}
.cxc-atcfg__morebody { margin-top: var(--cxc-md); }

/* §6.1 TEMPLATES: cabeçalho com a data da última sincronização e a grade de 5 colunas. */
.cxc-atcfg__tplhead {
  display: flex; align-items: center; gap: var(--cxc-md); flex-wrap: wrap;
  padding: var(--cxc-lg) var(--cxc-xl) var(--cxc-md); border-top: 1px solid var(--cxc-n100);
}
.cxc-atcfg__tplhead h3 { font-size: 15px; font-weight: 600; margin: 0; }
.cxc-atcfg__tplwhen { font-family: var(--cxc-mono); font-size: 11px; color: var(--cxc-n500); }
.cxc-atcfg__tplact { margin-left: auto; }
.cxc-atcfg__tplrow {
  display: grid; grid-template-columns: 240px 80px 110px 130px minmax(0, 1fr); gap: var(--cxc-md);
  padding: var(--cxc-md) var(--cxc-xl); border-top: 1px solid var(--cxc-n100);
  align-items: center; font-size: 13px;
}
.cxc-atcfg__tplrow--head {
  padding: 10px var(--cxc-xl); background: var(--cxc-n50); border-top: none;
  font-size: 11px; font-weight: 600; color: var(--cxc-n700); letter-spacing: .04em;
}
.cxc-atcfg__tplname { font-family: var(--cxc-mono); font-weight: 600; color: var(--cxc-brand); overflow-wrap: anywhere; }
.cxc-atcfg__tpllang { font-family: var(--cxc-mono); color: var(--cxc-n500); }
.cxc-atcfg__tplcat { color: var(--cxc-n700); }
.cxc-atcfg__tplvars { font-family: var(--cxc-mono); color: var(--cxc-n500); }
.cxc-atcfg__tplempty {
  padding: var(--cxc-xl); border-top: 1px solid var(--cxc-n100); text-align: center;
  color: var(--cxc-n500); font-size: 14px; line-height: 21px; text-wrap: pretty;
}
/* Abaixo de ~62rem as cinco colunas não cabem: viram duas, e o cabeçalho da grade some (cada célula já se
   explica). Sem isto a tabela empurra a página para a rolagem horizontal. */
@media (max-width: 62rem) {
  .cxc-atcfg__tplrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cxc-atcfg__tplrow--head { display: none; }
}

/* §6.2 HORÁRIO: a grade de 620, uma linha por dia. A terceira coluna é o INTERRUPTOR do dia, e não o
   botão "Editar"/"Abrir" do protótipo: aqui o expediente é UM par de horas para todos os dias abertos
   (é o que o servidor grava), então o que a linha decide é abrir ou fechar o dia. */
.cxc-atcfg__week {
  border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-md); overflow: hidden; max-width: 620px;
}
.cxc-atcfg__day {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) 110px; gap: var(--cxc-md);
  align-items: center; padding: 10px var(--cxc-lg); border-bottom: 1px solid var(--cxc-n100);
}
.cxc-atcfg__week > .cxc-atcfg__day:last-child { border-bottom: none; }
.cxc-atcfg__day--off { background: var(--cxc-n50); }
.cxc-atcfg__dayname { font-size: 13px; font-weight: 600; }
.cxc-atcfg__dayhours { font-family: var(--cxc-mono); font-size: 13px; color: var(--cxc-n700); }
.cxc-atcfg__day--off .cxc-atcfg__dayhours { color: var(--cxc-n400); }
/* O interruptor do dia mora numa célula estreita: o campo do DS não precisa da moldura de bloco aqui. */
.cxc-atcfg__daysw .cx-field { margin: 0; }
.cxc-atcfg__hours { margin-bottom: var(--cxc-lg); }

/* §6.2 MENSAGENS AUTOMÁTICAS: quatro cartões de 430 mínimos. */
.cxc-atcfg__autos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: var(--cxc-lg);
}
@media (max-width: 30rem) { .cxc-atcfg__autos { grid-template-columns: minmax(0, 1fr); } }
.cxc-atcfg__auto { border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-md); padding: var(--cxc-lg); }
/* DESLIGADA: o cartão esmaece, MAS o campo continua vivo e postável. Um campo desabilitado não é enviado
   pelo navegador, e o servidor leria "texto em branco", que é a ordem de VOLTAR AO TEXTO DE FÁBRICA:
   desligar uma automática apagaria o texto que a Administradora escreveu. */
.cxc-atcfg__auto--off { background: var(--cxc-n50); }
.cxc-atcfg__autohead { display: flex; align-items: flex-start; gap: var(--cxc-md); }
.cxc-atcfg__autowho { flex: 1; min-width: 0; }
.cxc-atcfg__autotitle { font-size: 14px; font-weight: 600; }
.cxc-atcfg__autowhen { font-size: 12px; line-height: 18px; color: var(--cxc-n500); margin-top: 2px; text-wrap: pretty; }
.cxc-atcfg__autosw { flex: 0 0 auto; }
.cxc-atcfg__autosw .cx-field { margin: 0; }
.cxc-atcfg__autofield { margin-top: var(--cxc-md); }
.cxc-atcfg__autofield .cx-field { margin: 0; }
.cxc-atcfg__autofoot { display: flex; align-items: center; gap: var(--cxc-sm); margin-top: 6px; }
.cxc-atcfg__count { font-family: var(--cxc-mono); font-size: 11px; color: var(--cxc-n500); }
.cxc-atcfg__count.cxc-comp__count--over { color: var(--cxc-err-text); }
.cxc-atcfg__prevlabel { margin-left: auto; font-size: 11px; color: var(--cxc-n500); }
.cxc-atcfg__prevrow { margin-top: 6px; display: flex; justify-content: flex-end; }
/* A PRÉVIA é um balão de SAÍDA (o portador recebe): raio 12 12 4 12 e o verde de marca do §6.2. */
.cxc-atcfg__prev {
  max-width: 88%; padding: 9px var(--cxc-md);
  border-radius: var(--cxc-r-md) var(--cxc-r-md) 4px var(--cxc-r-md);
  background: var(--cxc-brand-container); font-size: 13px; line-height: 20px;
  text-wrap: pretty; overflow-wrap: anywhere;
}
.cxc-atcfg__auto--off .cxc-atcfg__prev { opacity: .4; }

/* §6.2 ASSUNTOS: chips editáveis. O rótulo do chip É o campo do formulário (o servidor lê subject-N), com
   a moldura no chip e o campo transparente por dentro; o interruptor ao lado é o active-N. */
.cxc-atcfg__subjects { display: flex; flex-wrap: wrap; gap: var(--cxc-sm); max-width: 760px; }
.cxc-atcfg__subj {
  --cx-control-height: 32px;
  display: flex; align-items: center; gap: 4px; padding: 0 4px 0 var(--cxc-md);
  border: 1px solid var(--cxc-n200); border-radius: var(--cxc-r-sm); background: var(--cxc-white);
  max-width: 100%;
}
.cxc-atcfg__subj--off { background: var(--cxc-n50); }
/* Vaga em BRANCO: a borda tracejada é o "Adicionar assunto" do §6.2, que numa tela sem script não pode
   nascer de um clique. As vagas já estão na grade, prontas para receber o nome. */
.cxc-atcfg__subj--new { border-style: dashed; border-color: var(--cxc-n400); background: transparent; }
.cxc-atcfg__subj .cx-field { margin: 0; min-width: 0; }
.cxc-atcfg__subj .cx-input {
  border: none; background: transparent; box-shadow: none; padding: 0;
  font-size: 13px; font-weight: 500; width: 15ch;
}
.cxc-atcfg__subj .cx-input:focus { outline: none; box-shadow: none; }
.cxc-atcfg__subj--off .cx-input { color: var(--cxc-n400); }
/* O chip SEM alçada: só o rótulo, sem campo e sem interruptor. */
.cxc-atcfg__subjlabel { font-size: 13px; font-weight: 500; padding: 6px 8px 6px 0; }
.cxc-atcfg__subj--off .cxc-atcfg__subjlabel { color: var(--cxc-n400); }
.cxc-atcfg__subjsw { flex: 0 0 auto; }
.cxc-atcfg__subjsw .cx-field { margin: 0; }
.cxc-atcfg__subjused {
  font-size: 11px; color: var(--cxc-n500); white-space: nowrap; align-self: center;
  padding-right: var(--cxc-sm);
}

/* §6.2 RESPOSTAS RÁPIDAS: a barra de busca de 280 + a chamada, e a lista de cartões editáveis. */
.cxc-atcfg__qrbar { display: flex; align-items: center; gap: var(--cxc-sm); flex-wrap: wrap; margin-bottom: var(--cxc-md); }
.cxc-atcfg__qrsearch { width: 280px; max-width: 100%; }
.cxc-atcfg__qrsearch .cx-field { margin: 0; }
.cxc-atcfg__qrnew { margin-left: auto; }
.cxc-atcfg__qr { border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-md); padding: var(--cxc-lg); margin-bottom: var(--cxc-md); }
.cxc-atcfg__qr--new { border-style: dashed; border-color: var(--cxc-n400); }
/* A FAIXA DE LEITURA do cartão: é a linha da tabela do §6.2 (título, atalho em mono de marca, situação),
   mostrando o que está GRAVADO, com o editor logo abaixo. */
.cxc-atcfg__qrhead { display: flex; align-items: center; gap: var(--cxc-sm); flex-wrap: wrap; margin-bottom: var(--cxc-md); }
.cxc-atcfg__qrtitle { font-size: 13px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.cxc-atcfg__qr--off .cxc-atcfg__qrtitle { color: var(--cxc-n500); }
.cxc-atcfg__qrkey { font-family: var(--cxc-mono); font-size: 13px; font-weight: 600; color: var(--cxc-brand); }
.cxc-atcfg__qrcat {
  font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: var(--cxc-r-full);
  background: var(--cxc-n50); color: var(--cxc-n700);
}
.cxc-atcfg__qrstate {
  margin-left: auto; font-size: 11px; font-weight: 600; padding: 2px var(--cxc-sm);
  border-radius: var(--cxc-r-full); background: var(--cxc-ok-bg); color: var(--cxc-ok-text);
}
.cxc-atcfg__qrstate--off { background: var(--cxc-n50); color: var(--cxc-n500); }
/* Linha ESCONDIDA pela busca: some dos OLHOS e continua no formulário. Uma linha que saísse do POST seria
   uma resposta APAGADA, porque o salvar substitui a lista inteira. */
.cxc-atcfg__qr--hidden { display: none; }
.cxc-atcfg__qrempty { padding: var(--cxc-xl); text-align: center; font-size: 14px; color: var(--cxc-n500); }
/* PRÉVIA da resposta rápida, o mesmo balão de saída das automáticas. */
.cxc-atcfg__qrprev { margin-top: var(--cxc-md); }
.cxc-atcfg__qrwarn {
  display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--cxc-err-text); margin-top: 6px;
}
.cxc-atcfg__qrwarn .msy { font-size: 15px; }

/* §6.2 CHIPS DAS VARIÁVEIS: pílula tracejada que insere a chave no ponto do cursor (cxc-vartoken). */
.cxc-atcfg__vars { border: 1px solid var(--cxc-n100); border-radius: var(--cxc-r-md); padding: var(--cxc-md) var(--cxc-lg); margin-bottom: var(--cxc-lg); }
.cxc-atcfg__varsgroup { font-size: 12px; color: var(--cxc-n500); margin: var(--cxc-md) 0 6px; }
.cxc-atcfg__varschips { display: flex; gap: 6px; flex-wrap: wrap; }
.cx-root button.cxc-vartoken {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px;
  border: 1px dashed var(--cxc-n400); border-radius: var(--cxc-r-full); background: transparent;
  font-family: var(--cxc-sans); font-size: 12px; font-weight: 500; color: var(--cxc-n700); cursor: pointer;
}
.cx-root button.cxc-vartoken:hover {
  border-color: var(--cxc-brand); background: var(--cxc-brand-container); color: var(--cxc-brand);
}
.cxc-vartoken .msy { font-size: 14px; }
.cxc-vartoken__key { font-family: var(--cxc-mono); font-size: 11px; color: var(--cxc-n500); }
.cxc-vartoken:hover .cxc-vartoken__key { color: var(--cxc-brand); }

/* §6.2 QUEM ATENDE: nota de rodapé, sem formulário nenhum. */
.cxc-atcfg__who { display: flex; align-items: flex-start; gap: 10px; }
.cxc-atcfg__who .msy { font-size: 19px; color: var(--cxc-n400); flex-shrink: 0; }
.cxc-atcfg__who p { font-size: 13px; line-height: 20px; color: var(--cxc-n500); margin: 0; text-wrap: pretty; }