/* Console visual do Backoffice — desktop, não o design system mobile-first
   dos apps de fazenda (@ruralos/ui). Direção validada em Artifact com o
   dono 01/09/2026: sidebar verde contida + canvas neutro + tipografia com
   hierarquia real, em vez do hero verde repetido herdado do app do
   fazendeiro. Serve só o backoffice — nunca importar isto fora dele. */

:root {
  --cx-canvas: #F5F6F3;
  --cx-canvas-sunken: #EBEEE8;
  --cx-surface: #FFFFFF;
  --cx-ink: #16211B;
  --cx-ink-muted: #5C6B60;
  --cx-ink-faint: #8A968D;
  --cx-border: #DEE4DA;
  --cx-border-strong: #C7D0C2;
  --cx-accent: #155E3A;
  --cx-accent-ink: #0E4128;
  --cx-accent-soft: #E7F0EA;
  --cx-sidebar: #12281C;
  --cx-sidebar-ink: #E9EFE9;
  --cx-sidebar-ink-muted: #93A896;
  --cx-sidebar-active: #1D4A32;
  --cx-success: #1E7F4C;
  --cx-success-soft: #E4F3EA;
  --cx-warning: #9A5B0A;
  --cx-warning-soft: #FBEEDC;
  --cx-critical: #B3261E;
  --cx-critical-soft: #FBEAE8;
  --cx-info: #2E5AAC;
  --cx-info-soft: #E9EEF9;
  --cx-violet: #6B4FA0;
  --cx-violet-soft: #EFE9F7;
  --cx-neutral-pill: #6B7A70;
  --cx-neutral-pill-soft: #EEF1EC;
  --cx-font-ui: 'Public Sans', system-ui, -apple-system, sans-serif;
  --cx-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --cx-shadow-card: 0 1px 2px rgba(20, 30, 24, 0.04), 0 1px 8px rgba(20, 30, 24, 0.04);
}

.cx-body { margin: 0; background: var(--cx-canvas); color: var(--cx-ink); font-family: var(--cx-font-ui); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.cx-body h1, .cx-body h2, .cx-body h3, .cx-body h4 { margin: 0; font-family: var(--cx-font-ui); }
.cx-tabular { font-variant-numeric: tabular-nums; font-family: var(--cx-font-mono); }

/* shell */
.cx-shell { display: flex; min-height: 100vh; width: 100%; }
.cx-sidebar { width: 232px; flex: none; background: var(--cx-sidebar); color: var(--cx-sidebar-ink); display: flex; flex-direction: column; padding: 20px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.cx-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 20px; }
.cx-brand-mark { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--cx-accent-soft); flex: none; }
.cx-brand-mark img { width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; }
.cx-brand-name { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.cx-brand-sub { font-size: 11px; color: var(--cx-sidebar-ink-muted); margin-top: 1px; }
.cx-navgroup { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
.cx-navlabel { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--cx-sidebar-ink-muted); padding: 14px 12px 6px; }
.cx-navlabel-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.cx-navlabel-btn::after { content: "›"; font-size: 15px; line-height: 1; transition: transform 0.15s; margin-left: 6px; transform: rotate(90deg); }
.cx-navsec.fechado .cx-navlabel-btn::after { transform: none; }
.cx-navsec-itens { display: flex; flex-direction: column; gap: 1px; }
.cx-navsec.fechado .cx-navsec-itens { display: none; }
.cc-secoes { display: flex; gap: 4px; margin-bottom: 12px; }
.cc-secao { padding: 5px 12px; border-radius: 6px; font-size: 13px; font-weight: 700; color: var(--cx-ink-muted); text-decoration: none; }
.cc-secao[aria-current="page"] { background: var(--cx-accent-soft); color: var(--cx-ink); }
.cx-navitem { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--cx-sidebar-ink); text-decoration: none; min-width: 0; }
.cx-navitem svg { flex: none; opacity: 0.8; }
.cx-navitem:hover { background: rgba(255,255,255,0.06); }
.cx-navitem.active { background: var(--cx-sidebar-active); font-weight: 600; }
.cx-navitem.active svg { opacity: 1; }
.cx-sidebar { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.cx-sidebar[data-rolando] { scrollbar-color: rgba(255,255,255,0.28) transparent; }
.cx-sidebar::-webkit-scrollbar { width: 6px; }
.cx-sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.cx-sidebar[data-rolando]::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.28); }
.cx-sidebar-foot { margin-top: auto; padding: 12px 10px 4px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 8px; min-width: 0; }
.cx-sidebar-foot > div { min-width: 0; }
.cx-sidebar-foot-name, .cx-sidebar-foot-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cx-avatar { width: 26px; height: 26px; border-radius: 999px; background: var(--cx-accent-soft); color: var(--cx-accent-ink); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; }
.cx-avatar.sm { width: 22px; height: 22px; font-size: 10px; }
.cx-avatar.violet { background: var(--cx-violet-soft); color: var(--cx-violet); }
.cx-avatar.info { background: var(--cx-info-soft); color: var(--cx-info); }
.cx-sidebar-foot-name { font-size: 12.5px; font-weight: 600; }
.cx-sidebar-foot-role { font-size: 11px; color: var(--cx-sidebar-ink-muted); }

.cx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cx-topbar { border-bottom: 1px solid var(--cx-border); background: var(--cx-surface); position: sticky; top: 0; z-index: 5; }
.cx-topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; max-width: 1640px; width: 100%; margin: 0 auto; }
.cx-topbar-env { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cx-warning); background: var(--cx-warning-soft); padding: 3px 9px; border-radius: 999px; }
.cx-content { padding: 26px 32px 72px; max-width: 1640px; width: 100%; margin: 0 auto; }

/* page header */
.cx-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; flex-wrap: wrap; }
.cx-pagehead h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.cx-pagehead p { margin: 4px 0 0; color: var(--cx-ink-muted); font-size: 13.5px; max-width: 62ch; }
.cx-pagehead-actions { display: flex; gap: 8px; align-items: center; }

/* abas — link puro (GET com ?aba=), sem JS: cada aba é URL própria, volta
   no botão de voltar do navegador, funciona sem cliente-side routing. */
.cx-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--cx-border); margin-bottom: 20px; overflow-x: auto; }
.cx-tab { padding: 9px 4px; margin-right: 22px; font-size: 13.5px; font-weight: 600; color: var(--cx-ink-faint); text-decoration: none; white-space: nowrap; border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.cx-tab:hover { color: var(--cx-ink); }
.cx-tab.ativa { color: var(--cx-accent-ink); border-bottom-color: var(--cx-accent); font-weight: 700; }

/* kpi row */
.cx-kpirow { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 22px; }
.cx-kpi { background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; min-height: 84px; }
.cx-kpi-top { display: flex; align-items: center; justify-content: space-between; }
.cx-kpi-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cx-ink-faint); }
.cx-kpi-value { font-family: var(--cx-font-mono); font-size: 25px; font-weight: 500; margin-top: 4px; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 8px; line-height: 1.15; }
.cx-kpi-value.accent { color: var(--cx-accent-ink); }
.cx-kpi-value.text { font-family: var(--cx-font-ui); font-size: 16px; font-weight: 700; }
.cx-kpi-delta { font-size: 11.5px; font-weight: 600; }
.cx-kpi-delta.up { color: var(--cx-success); }
.cx-kpi-delta.down { color: var(--cx-critical); }

/* cards */
.cx-card { background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: 12px; box-shadow: var(--cx-shadow-card); margin-bottom: 16px; }
.cx-card-head { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--cx-border); gap: 12px; flex-wrap: wrap; }
.cx-card-head h3 { font-size: 13.5px; font-weight: 700; }
.cx-card-head .cx-hint { font-size: 12px; color: var(--cx-ink-faint); }
.cx-card-body { padding: 16px 18px; }
.cx-card-body.cx-pad-0 { padding: 0; }
.cx-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 16px; }
.cx-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }

.cx-note { display: flex; gap: 10px; padding: 12px 16px; border-radius: 10px; font-size: 12.5px; border: 1px solid; margin-bottom: 16px; align-items: flex-start; }
.cx-note.warn { background: var(--cx-warning-soft); border-color: #EBD2A6; color: #7A480C; }
.cx-note.info { background: var(--cx-info-soft); border-color: #C7D5EF; color: #234580; }
.cx-note.critical { background: var(--cx-critical-soft); border-color: #F1B3AE; color: #7A241D; }
.cx-note b { font-weight: 700; }

/* table */
.cx-tablewrap { overflow-x: auto; }
.cx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cx-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cx-ink-faint); padding: 9px 18px; border-bottom: 1px solid var(--cx-border); white-space: nowrap; }
.cx-table th.cx-num { text-align: right; }
.cx-table td { padding: 11px 18px; border-bottom: 1px solid var(--cx-border); vertical-align: middle; }
.cx-table tr:last-child td { border-bottom: none; }
.cx-table tr:hover td { background: var(--cx-canvas-sunken); }
.cx-table td.cx-num { font-family: var(--cx-font-mono); text-align: right; }
.cx-cell-sub { color: var(--cx-ink-faint); font-size: 11.5px; margin-top: 1px; }
.cx-row-icon { display: inline-flex; align-items: center; gap: 8px; }
.cx-icon-btn { border: 1px solid var(--cx-border-strong); background: var(--cx-surface); border-radius: 7px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--cx-ink-muted); }
.cx-icon-btn:hover { background: var(--cx-canvas-sunken); color: var(--cx-ink); }

/* pills */
.cx-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.cx-pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.cx-pill.success { background: var(--cx-success-soft); color: var(--cx-success); }
.cx-pill.warning { background: var(--cx-warning-soft); color: var(--cx-warning); }
.cx-pill.critical { background: var(--cx-critical-soft); color: var(--cx-critical); }
.cx-pill.info { background: var(--cx-info-soft); color: var(--cx-info); }
.cx-pill.violet { background: var(--cx-violet-soft); color: var(--cx-violet); }
.cx-pill.neutral { background: var(--cx-neutral-pill-soft); color: var(--cx-neutral-pill); }
.cx-pill.teal { background: #E2F1EE; color: #17635A; }
.cx-tag { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: var(--cx-canvas-sunken); color: var(--cx-ink-muted); }

/* buttons / inputs */
.cx-btn { font-family: var(--cx-font-ui); font-size: 13px; font-weight: 600; border-radius: 8px; padding: 8px 14px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cx-btn-primary { background: var(--cx-accent); color: #fff; }
.cx-btn-primary:hover { background: var(--cx-accent-ink); }
.cx-btn-ghost { background: var(--cx-surface); border-color: var(--cx-border-strong); color: var(--cx-ink); }
.cx-btn-ghost:hover { background: var(--cx-canvas-sunken); }
.cx-btn-danger { background: var(--cx-critical-soft); color: var(--cx-critical); border-color: #F1B3AE; }
.cx-btn-sm { font-size: 12px; padding: 5px 10px; }
.cx-field label { display: block; font-size: 12px; font-weight: 600; color: var(--cx-ink-muted); margin-bottom: 5px; }
.cx-input, .cx-select, .cx-textarea { width: 100%; font-family: var(--cx-font-ui); font-size: 13.5px; border: 1px solid var(--cx-border-strong); border-radius: 8px; padding: 8px 11px; background: var(--cx-surface); color: var(--cx-ink); }
.cx-input.cx-sm, .cx-select.cx-sm { padding: 5px 8px; font-size: 12px; }
.cx-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.cx-field-group { margin-bottom: 12px; }

/* health bar */
.cx-healthbar-wrap { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.cx-healthbar { width: 64px; height: 6px; border-radius: 999px; background: var(--cx-canvas-sunken); overflow: hidden; }
.cx-healthbar-fill { height: 100%; border-radius: 999px; background: var(--cx-success); }

/* bar chart */
.cx-barchart { display: flex; flex-direction: column; gap: 11px; }
.cx-barchart-row { display: grid; grid-template-columns: 140px 1fr 110px; align-items: center; gap: 12px; font-size: 12.5px; }
.cx-barchart-row .cx-bc-label { color: var(--cx-ink-muted); font-weight: 600; }
.cx-barchart-track { height: 16px; border-radius: 4px; background: var(--cx-canvas-sunken); overflow: hidden; }
.cx-barchart-fill { height: 100%; border-radius: 4px; min-width: 2px; }
.cx-barchart-row .cx-bc-value { text-align: right; font-family: var(--cx-font-mono); }

.cx-empty { text-align: center; padding: 36px 18px; color: var(--cx-ink-faint); font-size: 13px; }
.cx-tag { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: var(--cx-canvas-sunken); color: var(--cx-ink-muted); }

/* kanban */
.cx-kanban-count { background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: 999px; padding: 1px 7px; font-family: var(--cx-font-mono); font-size: 11px; }

/* funnel */
.cx-funnel-row { display: grid; grid-template-columns: 120px 1fr 50px; align-items: center; gap: 12px; padding: 7px 0; }
.cx-funnel-track { height: 24px; border-radius: 6px; background: var(--cx-canvas-sunken); position: relative; overflow: hidden; }
.cx-funnel-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding-left: 10px; color: #fff; font-family: var(--cx-font-mono); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.cx-funnel-label { font-size: 12.5px; font-weight: 600; color: var(--cx-ink-muted); }
.cx-funnel-count { text-align: right; font-family: var(--cx-font-mono); font-size: 13px; }

/* CRM · funil visual, Para hoje e kanban compacto (#956) */
.cx-funil-topo { display: flex; gap: 10px; margin-bottom: 10px; align-items: stretch; }
.cx-funil, .cx-hoje, .cx-mov { background: var(--cx-surface); border: 1px solid #eae7df; border-radius: 12px; }
.cx-funil { flex: 1; min-width: 0; overflow: hidden; padding: 12px 18px; display: flex; flex-direction: column; gap: 10px; }
.cx-funil h3, .cx-hoje h3 { font-size: 17px; font-weight: 700; color: #133c2a; }
.cx-funil-head, .cx-hoje-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cx-funil-head .cx-hint, .cx-hoje-head .cx-hint { font-size: 12px; color: #4a574e; }
.cx-funil-total { margin-left: auto; font-size: 12.5px; color: #4a574e; }
.cx-funil-total strong { color: #133c2a; font-size: 14px; }
.cx-funil-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 150px; column-gap: 3px; flex: 1; }
.cx-funil-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cx-funil-forma { height: 108px; position: relative; }
.cx-funil-trap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.cx-funil-trap span { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; }
.cx-funil-pilula { position: absolute; right: -27px; top: 50%; transform: translateY(-50%); z-index: 2; height: 24px; padding: 0 8px; border-radius: 12px; background: #fff; border: 1px solid #d9d2c4; font-size: 12px; font-weight: 800; color: #133c2a; display: flex; align-items: center; white-space: nowrap; box-shadow: 0 1px 3px rgba(19, 60, 42, 0.12); }
.cx-funil-info { display: flex; flex-direction: column; gap: 1px; padding: 0 6px; font-size: 12px; color: #4a574e; }
.cx-funil-info b { font-size: 13.5px; color: #1f2a24; }
.cx-funil-info strong { color: #1f2a24; }
.cx-funil-parte { margin-left: 14px; padding-left: 14px; border-left: 1px dashed #d9d2c4; display: flex; flex-direction: column; justify-content: center; gap: 3px; font-size: 12px; color: #4a574e; }
.cx-funil-parte-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #7a3426; }
.cx-funil-parte-n { font-size: 26px; font-weight: 800; color: #7a3426; line-height: 1.05; }
.cx-funil-parte b { font-size: 13.5px; color: var(--cx-ink); }
.cx-funil-parte a { font-size: 12.5px; font-weight: 700; color: var(--cx-accent-ink); text-decoration: none; margin-top: 2px; }
.cx-hoje { flex: 0 0 380px; width: 380px; min-width: 0; overflow: hidden; padding: 12px 14px 6px; display: flex; flex-direction: column; }
.cx-hoje-head { padding-bottom: 6px; }
.cx-hoje-item { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid #f1ede5; }
.cx-hoje-vazio { padding: 18px 0; font-size: 13px; color: #4a574e; }
.cx-hoje-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: #7d877f; }
.cx-hoje-dot.atrasado, .cx-hoje-dot.falhou { background: #b42318; }
.cx-hoje-dot.respondeu { background: #1b6440; }
.cx-hoje-dot.espera { background: #c28a17; }
.cx-hoje-txt { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.cx-hoje-txt b { font-size: 13px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-hoje-txt span { font-size: 12px; line-height: 16px; color: #4a574e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-hoje-acao { flex: none; height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid #cfd8cf; color: #14512f; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; text-decoration: none; }
.cx-kb-filtros { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cx-kb-rot { font-size: 12px; font-weight: 700; color: #4a574e; }
.cx-chips { display: flex; background: #fff; border: 1px solid #e2dccf; border-radius: 8px; padding: 2px; gap: 2px; }
.cx-chip { height: 26px; padding: 0 8px; border-radius: 6px; color: #2d3b33; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; text-decoration: none; }
.cx-chip small { font-size: 11.5px; font-weight: 700; opacity: 0.8; }
.cx-chip.on { background: #133c2a; color: #fff; }
.cx-kb-faixa { width: 8px; height: 8px; border-radius: 50%; background: #c4bba9; }
.cx-kb-faixa.quente { background: #b8461b; }
.cx-kb-faixa.morno { background: #e5b93a; }
.cx-kb-faixa.frio { background: #8fb3cf; }
.cx-kb-busca { display: flex; gap: 6px; align-items: center; margin: 0; }
.cx-kb-busca input[name="q"] { width: 165px; flex: none; }
.cx-kb-busca select { width: 120px; flex: none; }
.cx-kb-teste { margin-left: auto; white-space: nowrap; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #2d3b33; text-decoration: none; }
.cx-kb-trilho { width: 30px; height: 18px; border-radius: 9px; background: #c9c3b4; position: relative; display: block; }
.cx-kb-trilho span { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.cx-kb-teste.on .cx-kb-trilho { background: #1b6440; }
.cx-kb-teste.on .cx-kb-trilho span { left: 14px; }
.cx-kb { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.cx-kb-col { flex: 1; min-width: 0; background: #efe9df; border: 1px solid #e6dfd2; border-radius: 10px; padding: 0 6px 6px; display: flex; flex-direction: column; gap: 6px; }
.cx-kb-col.perdido { background: #f6ebe7; border-color: #ead6ce; }
.cx-kb-col.recolhida { flex: 0 0 44px; min-height: 150px; align-items: center; padding: 10px 0; gap: 10px; text-decoration: none; color: #7a3426; }
.cx-kb-col.recolhida b { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 13px; }
.cx-kb-head { height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 4px; font-size: 13.5px; }
.cx-kb-dot { width: 9px; height: 9px; border-radius: 3px; background: #7d877f; }
.cx-kb-dot.aguardando_cartao { background: #b5532a; }
.cx-kb-dot.contatado { background: #3c6f96; }
.cx-kb-dot.qualificado { background: #c28a17; }
.cx-kb-dot.convertido { background: #1b6440; }
.cx-kb-dot.perdido { background: #a24a36; }
.cx-kb-tempo, .cx-kb-recolher { margin-left: auto; font-size: 11.5px; color: #4a574e; white-space: nowrap; text-decoration: none; }
.cx-kb-vazio { padding: 8px 10px; border: 1px dashed #d6cebf; border-radius: 8px; font-size: 12px; color: #4a574e; text-align: center; }
.cx-kb-card { background: #fff; border: 1px solid #e3ddd1; border-radius: 8px; padding: 7px 8px 7px 10px; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 1px 1px rgba(19, 60, 42, 0.05); position: relative; min-width: 0; }
.cx-kb-card:has(details[open]) { z-index: 30; }
.cx-kb-l1, .cx-kb-l2, .cx-kb-l4, .cx-kb-msg { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cx-kb-l1 { gap: 7px; height: 20px; }
.cx-kb-score { min-width: 26px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; background: #d7e5ef; color: #244c6b; }
.cx-kb-score.quente { background: #b8461b; color: #fff; }
.cx-kb-score.morno { background: #e5b93a; color: #3d2d00; }
.cx-kb-score.teste { background: #ece7dd; color: #4a574e; }
.cx-kb-nome { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--cx-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-kb-teste-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; padding: 0 5px; line-height: 16px; border-radius: 4px; background: #ece7dd; color: #4a574e; }
.cx-kb-conv { color: var(--cx-accent); display: flex; flex: none; }
.cx-kb-l2 { font-size: 12px; color: #4a574e; height: 15px; white-space: nowrap; }
.cx-kb-lugar { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cx-kb-origem { flex: none; font-size: 10.5px; font-weight: 700; padding: 0 5px; border-radius: 4px; background: #ece7dd; color: #4a574e; }
.cx-kb-origem.meta { background: #e3e8f6; color: #2d3f86; }
.cx-kb-origem.site { background: #efe2c9; color: #6a4f12; }
.cx-kb-dias { margin-left: auto; flex: none; font-weight: 600; }
.cx-kb-dias.alerta { color: #b42318; }
.cx-kb-msg { height: 16px; font-size: 12.5px; color: #1f2a24; }
.cx-kb-msg svg { flex: none; }
.cx-kb-msg span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-kb-msg.out { color: #4a574e; }
.cx-kb-msg.none { color: #5f6b63; }
.cx-kb-msg.perdido { color: #7a3426; }
.cx-kb-msg.falhou { color: #b3341f; }
.cx-kb-modelo { font-size: 10.5px; color: #5f6b63; margin-top: -1px; }
.cx-tick { display: inline-flex; align-items: center; flex: none; color: #56625a; }
.cx-tick svg + svg { margin-left: -8px; }
.cx-tick.lida { color: #2386c4; }
.cx-tick.falhou { color: #b3341f; }
.cx-ficha-msg .cx-tick { vertical-align: middle; margin-left: 4px; }
.cx-ficha-msg .cx-ficha-modelo-nome { font-size: 10.5px; color: var(--cx-ink-muted); }
.cx-ficha-msg.falhou > div { background: #fbeceb; border-color: #e8b9b2; color: #b3341f; }
.cx-kb-l4 { height: 18px; }
.cx-kb-tarefa { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #2d3b33; }
.cx-kb-tarefa svg { flex: none; color: #1b6440; }
.cx-kb-tarefa span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-kb-tarefa.atrasada { color: #b42318; font-weight: 700; }
.cx-kb-tarefa.atrasada svg { color: #b42318; }
.cx-kb-tarefa.nenhuma { color: #5f6b63; }
.cx-kb-tarefa.nenhuma svg { color: #7d877f; }
.cx-kb-dono { width: 18px; height: 18px; flex: none; border-radius: 50%; background: #133c2a; color: #fff; font-size: 8.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cx-kb-dono.sem { background: transparent; border: 1px dashed #7d877f; }
.cx-kb-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.cx-kb-aviso { font-size: 11.5px; color: var(--cx-ink-muted); } .cx-kb-aviso a { color: #b42318; font-weight: 600; text-decoration: none; }
.cx-kb-menu { position: relative; flex: none; }
.cx-kb-menu summary { list-style: none; cursor: pointer; width: 24px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: #3a463f; font-weight: 800; }
.cx-kb-menu summary::-webkit-details-marker { display: none; }
.cx-kb-menu[open] summary, .cx-kb-menu summary:hover { background: #efebe3; }
.cx-kb-menu > div { position: absolute; top: 24px; right: 0; width: 212px; background: #fff; border: 1px solid #ddd6c9; border-radius: 10px; box-shadow: 0 12px 28px rgba(19, 60, 42, 0.18); padding: 4px; display: flex; flex-direction: column; }
.cx-kb-menu a, .cx-kb-menu button { height: 30px; padding: 0 10px; border-radius: 6px; border: 0; background: transparent; display: flex; align-items: center; font: inherit; font-size: 13px; font-weight: 600; color: #1f2a24; text-decoration: none; cursor: pointer; text-align: left; width: 100%; }
.cx-kb-menu a:hover, .cx-kb-menu button:hover { background: #f4f1ea; }
.cx-kb-menu a.perder { color: #a3321c; font-weight: 700; border-top: 1px solid #efebe3; border-radius: 0 0 6px 6px; margin-top: 4px; }
.cx-kb-menu form { margin: 0; }
.cx-kb-menu form.perder { border-top: 1px solid #efebe3; margin-top: 4px; padding-top: 4px; display: flex; gap: 4px; }
.cx-kb-menu form.perder select { flex: 1; min-width: 0; }
.cx-kb-menu form.perder button { width: auto; color: #a3321c; font-weight: 700; }
.cx-kb-menu-rot { padding: 6px 10px 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: #5f6b63; }
.cx-mov { padding: 10px 14px; margin-bottom: 14px; }
.cx-mov-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: 13px; color: #133c2a; }
.cx-mov-head .cx-hint { font-size: 12px; color: #4a574e; }
.cx-mov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.cx-mov-item { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: 8px; background: #faf7f1; border: 1px solid #efebe3; min-width: 0; text-decoration: none; color: inherit; }
.cx-mov-l1 { display: flex; gap: 6px; font-size: 12.5px; }
.cx-mov-l1 b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-mov-l1 small { margin-left: auto; font-size: 11.5px; color: #5f6b63; white-space: nowrap; }
.cx-mov-l2 { font-size: 12px; color: #2d3b33; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.cx-mov-l2 em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 9px; border: 1px solid #dcd5c7; background: #fff; }
.cx-recolhivel { margin-bottom: 12px; }
.cx-recolhivel > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--cx-ink-muted); padding: 8px 2px; }
@media (max-width: 1100px) { .cx-funil-topo, .cx-kb { flex-direction: column; } .cx-hoje { flex-basis: auto; } .cx-kb-col.recolhida { flex-basis: auto; flex-direction: row; width: 100%; padding: 8px; } .cx-kb-col.recolhida b { writing-mode: horizontal-tb; transform: none; } }

@media (max-width: 900px) {
  .cx-grid2, .cx-grid3, .cx-field-row { grid-template-columns: 1fr; }
}

/* O console mantém a navegação acessível em tela estreita sem ocupar metade
   da largura. Tabelas continuam rolando dentro dos próprios cartões. */
@media (max-width: 720px) {
  .cx-main { width: 100%; }
  .cx-topbar-inner { padding: 8px 14px; gap: 8px; }
  .cx-topbar-env { white-space: nowrap; font-size: 9px; }
  .cx-content { padding: 18px 14px 48px; min-width: 0; }
  .cx-kpirow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
  .cx-card { min-width: 0; }
  .cx-tablewrap { max-width: 100%; }
}

/* auth (login) */
.cx-auth-shell { min-height: 100vh; display: flex; background: var(--cx-canvas); }
.cx-auth-brand { flex: 1 1 46%; background: var(--cx-accent-soft); color: var(--cx-ink); display: flex; flex-direction: column; justify-content: space-between; padding: 44px; position: relative; overflow: hidden; border-right: 1px solid var(--cx-border); }
.cx-auth-brand::before { content: ""; position: absolute; inset: -20% -20% auto auto; width: 60%; height: 60%; background: radial-gradient(circle, rgba(21,94,58,0.14) 0%, transparent 70%); }
.cx-auth-brand-top { display: flex; align-items: center; gap: 10px; position: relative; }
.cx-auth-brand-mark { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; background: var(--cx-surface); flex: none; box-shadow: var(--cx-shadow-card); }
.cx-auth-brand-mark img { width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; }
.cx-auth-brand-name { font-weight: 700; font-size: 15px; color: var(--cx-ink); }
.cx-auth-brand-sub { font-size: 11px; color: var(--cx-ink-faint); }
.cx-auth-brand-mid { position: relative; max-width: 30ch; }
.cx-auth-brand-mid h2 { margin: 0; font-size: 27px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--cx-accent-ink); }
.cx-auth-brand-mid p { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--cx-ink-muted); }
.cx-auth-brand-foot { position: relative; display: flex; flex-direction: column; gap: 10px; }
.cx-auth-brand-item { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--cx-ink-muted); }
.cx-auth-brand-item svg { flex: none; color: var(--cx-accent); }
.cx-auth-pane { flex: 1 1 54%; display: flex; align-items: center; justify-content: center; background: var(--cx-canvas); padding: 32px; }
.cx-auth-card { width: 100%; max-width: 360px; }
.cx-auth-card h1 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.015em; }
.cx-auth-card > p { margin: 8px 0 24px; font-size: 13.5px; color: var(--cx-ink-muted); line-height: 1.5; }
.cx-auth-mobile-brand { display: none; }
@media (max-width: 860px) {
  .cx-auth-brand { display: none; }
  .cx-auth-mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
}

/* Indicador de tempo real do Financeiro (#761, F2) — discreto, acima da região viva. */
.cx-vivo { margin: 0 0 12px; font-size: 11.5px; color: var(--cx-ink-faint); display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.cx-vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cx-ink-faint); }
.cx-vivo[data-estado="ao_vivo"] { color: var(--cx-ink-muted); }
.cx-vivo[data-estado="ao_vivo"]::before { background: #2E9E5B; }
.cx-vivo[data-estado="sem_conexao"]::before { background: #C98A1A; }

/* ---------------------------------------------------------------------------
   Financeiro — direção do canvas aprovado pelo dono (#761, "Backoffice Campo
   Simples"): canvas off-white quente, verde floresta, sage e âmbar; títulos em
   Figtree em tudo (pesos 400–800), como no canvas. Escopo: só `body.cx-fin` (Layout
   `tema="financeiro"`); o resto do backoffice não muda. Tema sempre claro.
   --------------------------------------------------------------------------- */
.cx-body.cx-fin {
  color-scheme: light;
  --cx-canvas: #F7F0E9;
  --cx-canvas-sunken: #F3EEE4;
  --cx-border: #EAE7DF;
  --cx-border-strong: #D9D3C5;
  --cx-ink: #1F2A24;
  --cx-ink-muted: #6B7A70;
  --cx-ink-faint: #8B968D;
  --cx-accent: #1B6440;
  --cx-accent-ink: #133C2A;
  --cx-accent-soft: #EAF3EC;
  --cx-shadow-card: none;
  --cx-font-ui: Figtree, Helvetica, Arial, sans-serif;
  --cx-ambar: #C9A227;
  --cx-floresta: #15563A;
}
.cx-fin .cx-content { padding-top: 16px; }
.cx-fin [data-financeiro-vivo] { display: flex; flex-direction: column; gap: 16px; }
.cx-fin .cx-card { border-radius: 14px; margin-bottom: 0; }
.cx-fin .cx-card-head { border-bottom: 0; padding: 20px 24px 6px; align-items: baseline; }
.cx-fin .cx-card-head h3 { font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--cx-ink-muted); }
.cx-fin .cx-card-head .cx-hint { font-size: 12.5px; color: #7C8A80; }
.cx-fin .cx-card-body { padding: 14px 24px 22px; }
.cx-fin .cx-card-body.cx-pad-0 { padding: 6px 0 8px; }
.cx-fin .cx-table th { font-size: 11.5px; font-weight: 600; color: var(--cx-ink-faint); text-transform: none; letter-spacing: 0; }
.cx-fin .cx-kpirow { margin-bottom: 0; }
.cx-fin .cx-tabular, .cx-fin .cx-table td.cx-num, .cx-fin .cx-kpi-value, .cx-fin .cx-barchart-row .cx-bc-value { font-family: var(--cx-font-ui); font-variant-numeric: tabular-nums; }
.cx-fin .cx-kpi { border-radius: 12px; }
.cx-fin .cx-vivo { margin: 0 0 -4px; justify-content: flex-end; }

.cx-fin-hero { position: relative; overflow: hidden; background: var(--cx-floresta); border-radius: 18px; padding: 30px 34px 26px; color: #fff; }
.cx-fin-hero::before, .cx-fin-hero::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.09); pointer-events: none; }
.cx-fin-hero::before { top: -120px; right: -60px; width: 300px; height: 300px; }
.cx-fin-hero::after { top: -60px; right: 40px; width: 180px; height: 180px; border-color: rgba(255,255,255,0.07); }
.cx-fin-hero-texto { position: relative; display: flex; flex-direction: column; gap: 8px; max-width: 780px; }
.cx-fin-hero-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cx-fin-crumb { color: rgba(255,255,255,0.62); font-size: 11.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.cx-fin-voltar { border: 1px solid rgba(255,255,255,0.22); background: rgba(0,0,0,0.18); color: #fff; border-radius: 20px; padding: 5px 13px; font-size: 12px; font-weight: 600; text-decoration: none; }
.cx-fin-voltar:hover { background: rgba(0,0,0,0.3); color: #fff; }
.cx-fin-hero h1 { margin: 0; color: #fff; font-size: 38px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.05; }
.cx-fin-hero-sub { margin: 2px 0 0; color: rgba(255,255,255,0.74); font-size: 15px; line-height: 1.4; }
.cx-fin-hero-acao { position: absolute; top: 24px; right: 30px; }
.cx-fin-hero-acao .cx-btn { background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.25); color: #fff; }
.cx-fin-hero-acao .cx-btn:hover { background: rgba(0,0,0,0.32); }
.cx-fin-metricas { position: relative; margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 12px; }
.cx-fin-metrica { background: rgba(0,0,0,0.16); border: 1px solid rgba(255,255,255,0.1); border-radius: 13px; padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cx-fin-metrica-valor { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cx-fin-metrica-valor.critico { color: #FFB9AE; }
.cx-fin-metrica-rotulo { color: rgba(255,255,255,0.7); font-size: 12.5px; font-weight: 500; }
.cx-fin-metrica-hint { color: rgba(255,255,255,0.5); font-size: 11.5px; }
.cx-fin-metrica-hint.critico { color: #FFB9AE; }

.cx-fin-abas { display: flex; gap: 6px; flex-wrap: wrap; }
.cx-fin-aba { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--cx-border); background: #fff; color: var(--cx-accent-ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.cx-fin-aba:hover { border-color: var(--cx-accent); }
.cx-fin-aba.ativa { background: var(--cx-accent); border-color: var(--cx-accent); color: #fff; }
.cx-fin-aba.em-breve { background: transparent; border-style: dashed; color: #8B7A5A; cursor: default; }
.cx-fin-aba.em-breve:hover { border-color: var(--cx-border); }
.cx-fin-aba small { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.8; }

.cx-fin-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 14px; }
.cx-fin-cartao { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--cx-border); border-radius: 14px; padding: 22px 22px 20px; color: inherit; text-decoration: none; }
a.cx-fin-cartao:hover { border-color: var(--cx-accent); background: #FDFEFD; }
.cx-fin-cartao.em-breve { background: rgba(255,255,255,0.55); border-style: dashed; }
.cx-fin-cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cx-fin-cartao h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--cx-accent-ink); letter-spacing: -0.01em; }
.cx-fin-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; border-radius: 20px; padding: 3px 10px; background: var(--cx-accent-soft); color: var(--cx-accent); white-space: nowrap; }
.cx-fin-tag.em-breve { background: #F2EFE8; color: #8B7A5A; }
.cx-fin-cartao p { margin: 0; font-size: 13.5px; color: var(--cx-ink-muted); line-height: 1.5; min-height: 40px; }
.cx-fin-stats { display: flex; flex-wrap: wrap; gap: 10px 14px; border-top: 1px solid #F1ECE4; padding-top: 14px; }
.cx-fin-stat { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cx-fin-stat b { font-size: 17px; font-weight: 700; color: var(--cx-accent); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-fin-stat span { font-size: 11.5px; color: var(--cx-ink-faint); }
.cx-fin-secao { margin: 10px 2px 0; }
.cx-fin-secao h2 { margin: 0; font-size: 22px; font-weight: 700; color: var(--cx-accent-ink); letter-spacing: -0.01em; }
.cx-fin-secao p { margin: 4px 0 0; font-size: 13.5px; color: var(--cx-ink-muted); max-width: 70ch; }
@media (max-width: 720px) {
  .cx-fin-hero { padding: 22px 18px 18px; }
  .cx-fin-hero h1 { font-size: 30px; }
  .cx-fin-hero-acao { position: static; margin-top: 14px; }
  .cx-fin .cx-content { padding-top: 12px; }
}

/* Tesouraria (#761 F3): gráfico de 8 semanas, tabelas e cartão de caixa — canvas aprovado. */
.cx-fin-grafico-legenda { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--cx-ink-muted); }
.cx-fin-grafico-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.cx-fin-grafico-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.cx-fin-grafico-legenda i.entrada, .cx-fin-grafico-semana .barra.entrada { background: var(--cx-accent); }
.cx-fin-grafico-legenda i.saida, .cx-fin-grafico-semana .barra.saida { background: var(--cx-ambar); }
.cx-fin-grafico-legenda i.saldo { width: 14px; height: 2px; border-radius: 0; background: var(--cx-accent-ink); }
.cx-fin-grafico-corpo { margin-top: 18px; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; }
.cx-fin-grafico-eixo { display: flex; flex-direction: column; justify-content: space-between; height: 236px; text-align: right; }
.cx-fin-grafico-eixo span { font-size: 11px; color: #A7B0A8; line-height: 1; font-variant-numeric: tabular-nums; }
.cx-fin-grafico-area { position: relative; height: 236px; border-left: 1px solid #EEE9E1; border-bottom: 1px solid #EEE9E1; }
.cx-fin-grafico-grade { position: absolute; left: 0; right: 0; height: 1px; background: #F3EFE8; }
.cx-fin-grafico-area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cx-fin-grafico-barras { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.cx-fin-grafico-semana.projetado .barra { opacity: .45; background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,.55) 4px 8px); }
.cx-table tr.cx-projetado td { font-style: italic; color: var(--cx-ink-muted); background: var(--cx-surface-2, transparent); }
.cx-fin-grafico-semana { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 100%; padding: 0 6px; }
.cx-fin-grafico-semana .barra { width: 14px; min-height: 1px; border-radius: 4px 4px 0 0; }
.cx-fin-grafico-ponto { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--cx-accent-ink); border: 2px solid #fff; box-sizing: content-box; }
.cx-fin-grafico-ponto.negativo { background: var(--cx-critical); }
.cx-fin-grafico-rotulos { display: flex; }
.cx-fin-grafico-rotulo { flex: 1; text-align: center; padding-top: 8px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-fin-grafico-rotulo b { font-size: 12px; font-weight: 600; color: #4A574E; }
.cx-fin-grafico-rotulo span { font-size: 11px; color: #A7B0A8; font-variant-numeric: tabular-nums; }
.cx-fin-grafico-rotulo span.negativo { color: var(--cx-critical); font-weight: 700; }
.cx-fin-aviso-saldo { margin: 14px 0 0; font-size: 13px; color: var(--cx-ink-muted); }
.cx-fin-aviso-saldo.negativo { color: var(--cx-critical); font-weight: 600; }
.cx-fin-detalhe { margin-top: 14px; border-top: 1px solid #F1ECE4; padding-top: 10px; }
.cx-fin-detalhe summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--cx-accent); }
.cx-fin-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 16px; align-items: start; }
.cx-fin-duas .cx-card { min-width: 0; }
.cx-fin-tabela td.cx-valor { text-align: right; white-space: nowrap; font-weight: 600; }
.cx-fin-tabela td.cx-status, .cx-fin-tabela th.cx-status { text-align: right; }
.cx-fin-tabela .cx-mais td { color: var(--cx-ink-faint); font-size: 12.5px; }
.cx-fin-caixa-total td { font-weight: 700; border-top: 2px solid var(--cx-border); }
.cx-fin-form { display: grid; gap: 8px; align-items: end; }
.cx-fin-form.saldo { grid-template-columns: 1.4fr 1fr 1fr 1.4fr auto; }
.cx-fin-form.conta { grid-template-columns: 2fr 1.2fr auto; }
.cx-fin-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--cx-ink-faint); }
.cx-fin-subtitulo { margin: 18px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--cx-ink-muted); }
@media (max-width: 900px) {
  .cx-fin-form.saldo, .cx-fin-form.conta { grid-template-columns: 1fr; }
  .cx-fin-duas { grid-template-columns: 1fr; }
  .cx-fin-grafico-corpo { grid-template-columns: 46px minmax(0, 1fr); }
  .cx-fin-grafico-semana .barra { width: 8px; }
}

/* Desempenho do CRM (#956) */
.cx-desemp-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.cx-desemp-grid-funil { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.cx-desemp-grid-motivos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.cx-desemp-pad { padding: 16px; }
.cx-desemp-funil { padding: 8px 16px 12px; }
.cx-desemp-funil-row { display: grid; grid-template-columns: 100px minmax(0, 1fr) 90px 130px; column-gap: 12px; align-items: center; min-height: 44px; font-size: 13px; }
.cx-desemp-funil-head { min-height: 28px; font-size: 11.5px; font-weight: 700; color: var(--cx-ink-muted); }
.cx-desemp-funil-trilha { display: flex; justify-content: center; }
.cx-desemp-funil-barra { height: 34px; border-radius: 6px; background: var(--cx-accent); color: #fff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.cx-desemp-funil-rodape { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--cx-border); padding-top: 10px; margin-top: 6px; font-size: 12.5px; }
.cx-desemp-ponto { width: 9px; height: 9px; border-radius: 3px; background: var(--cx-critical); }
.cx-desemp-filtro { display: flex; align-items: center; gap: 8px; padding: 12px 16px 0; font-size: 12.5px; }
.cx-desemp-filtro .cx-select { width: auto; min-width: 180px; }
@media (max-width: 1000px) { .cx-desemp-grid-funil, .cx-desemp-grid-motivos { grid-template-columns: minmax(0, 1fr); } }
.cx-desemp-grid-motivos .cx-table th, .cx-desemp-grid-motivos .cx-table td { padding-left: 8px; padding-right: 8px; }
.cx-desemp-grid-motivos .cx-table th { letter-spacing: 0; text-transform: none; font-size: 11.5px; }
/* Ficha do lead em 2 colunas (#956, artboard C): compositor + linha do tempo à esquerda, cartões compactos à direita. Sem JS: abas por rádio, estágio por <details>. */
.cx-ficha { display: flex; gap: 12px; align-items: flex-start; }
.cx-ficha-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cx-ficha-lateral { flex: 0 0 360px; width: 360px; display: flex; flex-direction: column; gap: 6px; }
.cx-ficha-head, .cx-ficha-comp, .cx-ficha-tempo, .cx-ficha-card { background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: 12px; }
.cx-ficha-head { padding: 12px 16px; }
.cx-ficha-linha1 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cx-ficha-linha1 h1 { font-size: 20px; font-weight: 700; color: var(--cx-accent-ink); line-height: 1.2; }
.cx-ficha-voltar { font-size: 12px; font-weight: 600; color: var(--cx-accent-ink); text-decoration: none; }
.cx-ficha-tel { font-size: 13px; color: var(--cx-ink-muted); }
.cx-ficha-espaco { flex: 1; }
.cx-ficha-sub, .cx-ficha-incerto { margin: 6px 0 0; font-size: 12.5px; color: var(--cx-ink-muted); }
.cx-ficha-incerto { color: var(--cx-critical); font-weight: 600; }
.cx-ficha-estagios { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cx-ficha-estagios form { margin: 0; }
.cx-ficha-estagios .atual, .cx-ficha-estagios button, .cx-ficha-estagios a { font: inherit; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--cx-border-strong); background: transparent; color: var(--cx-ink-muted); cursor: pointer; text-decoration: none; }
.cx-ficha-estagios .atual { background: var(--cx-accent-soft); color: var(--cx-accent); border-color: transparent; cursor: default; }
.cx-ficha-estagios button:hover, .cx-ficha-estagios a:hover { background: var(--cx-canvas-sunken); }
.cx-ficha-estagios .perder { color: var(--cx-critical); }
.cx-ficha-estagio { position: relative; }
.cx-ficha-estagio summary { list-style: none; cursor: pointer; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--cx-accent-soft); color: var(--cx-accent-ink); }
.cx-ficha-estagio summary::-webkit-details-marker { display: none; }
.cx-ficha-menu { position: absolute; z-index: 5; top: 28px; left: 0; min-width: 190px; background: var(--cx-surface); border: 1px solid var(--cx-border-strong); border-radius: 8px; box-shadow: var(--cx-shadow-card); padding: 4px; display: flex; flex-direction: column; }
.cx-ficha-menu form { margin: 0; }
.cx-ficha-menu button, .cx-ficha-menu a { display: block; width: 100%; box-sizing: border-box; text-align: left; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--cx-ink); cursor: pointer; text-decoration: none; }
.cx-ficha-menu button:hover, .cx-ficha-menu a:hover { background: var(--cx-canvas-sunken); }
.cx-ficha-menu .perder { color: var(--cx-critical); }
.cx-ficha-comp { padding: 0 0 8px; }
.cx-ficha-radio { position: absolute; opacity: 0; pointer-events: none; }
.cx-ficha-abas { display: flex; align-items: center; height: 36px; padding: 0 8px; border-bottom: 1px solid var(--cx-border); }
.cx-ficha-abas label { padding: 0 12px; line-height: 35px; font-size: 13px; font-weight: 700; color: var(--cx-ink-muted); cursor: pointer; border-bottom: 2px solid transparent; }
.cx-ficha-abas span { margin-left: auto; font-size: 11.5px; color: var(--cx-ink-faint); }
.cx-ficha-painel { display: none; padding: 10px 12px 0; flex-direction: column; gap: 8px; }
.cx-ficha-painel .cx-note { margin: 0; }
.cx-ficha-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cx-ficha-acoes .cx-input { width: auto; flex: 1; min-width: 120px; }
.cx-ficha-acoes button[type="submit"]:last-child { margin-left: auto; }
#aba-nota:checked ~ .p-nota, #aba-tarefa:checked ~ .p-tarefa, #aba-passo:checked ~ .p-passo { display: flex; }
#aba-nota:checked ~ .cx-ficha-abas label[for="aba-nota"], #aba-tarefa:checked ~ .cx-ficha-abas label[for="aba-tarefa"], #aba-passo:checked ~ .cx-ficha-abas label[for="aba-passo"] { color: var(--cx-accent-ink); border-bottom-color: var(--cx-accent); }
.cx-ficha-tempo { padding: 4px 16px 12px; }
.cx-ficha-dia { display: flex; align-items: center; gap: 10px; padding: 10px 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; color: var(--cx-ink-muted); }
.cx-ficha-dia i { flex: 1; height: 1px; background: var(--cx-border); }
.cx-ficha-ativ { display: flex; gap: 10px; padding: 4px 0 8px; }
.cx-ficha-icone { flex: 0 0 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; background: var(--cx-canvas-sunken); color: var(--cx-ink-muted); }
.cx-ficha-icone.estagio { background: var(--cx-info-soft); color: var(--cx-info); }
.cx-ficha-icone.tarefa { background: var(--cx-warning-soft); color: var(--cx-warning); }
.cx-ficha-icone.nota { background: var(--cx-accent-soft); color: var(--cx-accent); }
.cx-ficha-ativ > div { flex: 1; min-width: 0; }
.cx-ficha-ativ-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.cx-ficha-meta { color: var(--cx-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-ficha-ativ-head time { margin-left: auto; font-size: 12px; color: var(--cx-ink-muted); }
.cx-ficha-auto { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 9px; border: 1px solid var(--cx-border-strong); background: var(--cx-canvas); }
.cx-ficha-balao { margin-top: 3px; display: inline-block; max-width: 620px; padding: 6px 10px; border-radius: 4px 12px 12px 12px; background: var(--cx-canvas); border: 1px solid var(--cx-border); font-size: 13.5px; white-space: pre-wrap; }
.cx-ficha-msg { display: flex; flex-direction: column; max-width: 78%; margin: 2px 0 8px; font-size: 13.5px; }
.cx-ficha-msg > div { padding: 6px 10px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--cx-border); background: var(--cx-surface); }
.cx-ficha-msg.saida { margin-left: auto; align-items: flex-end; }
.cx-ficha-msg.saida > div { background: var(--cx-accent-soft); border-color: #CFE2D6; }
.cx-ficha-msg .cx-ficha-modelo { font-style: italic; color: var(--cx-ink-muted); }
.cx-ficha-msg small { font-size: 11px; color: var(--cx-ink-muted); margin-top: 2px; }
.cx-ficha-card { padding: 10px 14px; }
.cx-ficha-card h3 { font-size: 13px; font-weight: 800; color: var(--cx-accent-ink); margin-bottom: 6px; display: flex; align-items: baseline; gap: 8px; }
.cx-ficha-card h3 small { font-size: 11.5px; font-weight: 400; color: var(--cx-ink-muted); }
.cx-ficha-scorehead { display: flex; align-items: center; gap: 10px; }
.cx-ficha-scorehead strong { font-size: 30px; line-height: 1; font-weight: 800; color: var(--cx-accent-ink); }
.cx-ficha-scorehead small { display: block; font-size: 11.5px; color: var(--cx-ink-muted); }
.cx-ficha-stack { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--cx-canvas-sunken); gap: 2px; margin: 8px 0 4px; }
.cx-ficha-sgrupo-head { display: flex; align-items: center; gap: 6px; height: 22px; font-size: 12.5px; font-weight: 800; color: var(--cx-accent-ink); }
.cx-ficha-sgrupo-head i { width: 8px; height: 8px; border-radius: 2px; }
.cx-ficha-sgrupo-head span { margin-left: auto; }
.cx-ficha-fator { display: flex; align-items: center; gap: 8px; padding: 2px 0; border-top: 1px solid var(--cx-canvas-sunken); font-size: 12.5px; }
.cx-ficha-fator > div { flex: 1; min-width: 0; }
.cx-ficha-fator b { display: block; font-weight: 600; line-height: 15px; }
.cx-ficha-fator small { display: block; font-size: 11.5px; line-height: 14px; color: var(--cx-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-ficha-barra { width: 44px; height: 4px; border-radius: 2px; background: var(--cx-canvas-sunken); overflow: hidden; }
.cx-ficha-barra i { display: block; height: 4px; }
.cx-ficha-fator > .cx-tabular { width: 38px; text-align: right; font-weight: 700; font-size: 12px; }
.cx-ficha-fazenda { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; align-items: end; }
.cx-ficha-fazenda label span { display: block; font-size: 11px; font-weight: 600; color: var(--cx-ink-muted); }
.cx-ficha-fazenda .cx-input, .cx-ficha-fazenda .cx-select { padding: 5px 8px; font-size: 13px; }
.cx-ficha-linha { display: flex; gap: 10px; min-height: 22px; font-size: 12.5px; align-items: baseline; }
.cx-ficha-linha span { flex: 0 0 104px; color: var(--cx-ink-muted); }
.cx-ficha-linha b { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.cx-ficha-det { margin-top: 6px; font-size: 12.5px; }
.cx-ficha-det summary { cursor: pointer; font-weight: 700; color: var(--cx-accent-ink); }
.cx-ficha-det p { margin: 4px 0 0; }
.cx-ficha-interesses { border: 1px solid var(--cx-border); border-radius: 10px; margin: 0 0 12px; padding: 8px; display: grid; gap: 4px; font-size: 13px; }
.cx-ficha-interesses legend { font-size: 12px; font-weight: 600; color: var(--cx-ink-muted); padding: 0 4px; }
.cx-ficha-tarefa { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.cx-ficha-tarefa > div { flex: 1; min-width: 0; font-size: 13px; }
.cx-ficha-tarefa small { display: block; font-size: 12px; color: var(--cx-ink-muted); }
.cx-ficha-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.cx-ficha-tags a { font-size: 12px; }
.cx-ficha-dono { display: flex; gap: 8px; margin: 0; }
@media (max-width: 1100px) { .cx-ficha { flex-direction: column; } .cx-ficha-lateral { flex-basis: auto; width: 100%; } }

/* SDR "Ana" (VND-SDR-010) */
.cx-sdr-banner { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 12px; border-radius: 10px; border: 1px solid var(--cx-border-strong); background: var(--cx-neutral-pill-soft); margin-bottom: 4px; }
.cx-sdr-banner.on { background: var(--cx-success-soft); border-color: #BCDDC6; }
.cx-sdr-banner.crit { background: var(--cx-critical-soft); border-color: #F1B3AE; }
.cx-sdr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .cx-sdr-grid { grid-template-columns: 1fr; } }
.cx-sdr-meter.fino { height: 6px; }
.cx-sdr-meter { height: 10px; border-radius: 5px; background: var(--cx-canvas-sunken); overflow: hidden; margin: 6px 0; }
.cx-sdr-meter span { display: block; height: 100%; background: var(--cx-success); border-radius: inherit; }
.cx-sdr-meter .crit { background: var(--cx-critical); }
.cx-sdr-dias { display: flex; gap: 8px; align-items: flex-end; height: 170px; padding: 14px 16px; }
.cx-sdr-dia { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; font-size: 11.5px; }
.cx-sdr-dia i { display: block; width: 100%; max-width: 28px; min-height: 2px; background: var(--cx-success); border-radius: 5px 5px 2px 2px; }
.cx-sdr-dia small { color: var(--cx-ink-faint); }

/* Vendas › Jornada */
.cx-jor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .cx-jor-grid { grid-template-columns: minmax(0, 1fr); } }

/* Menu lateral v2 (#1659): selo, subitens, busca ⌘K, modo só ícones e gaveta no celular. Desenho: "Menu lateral v2.dc.html" (Claude Design). */
:root { --cx-selo: #C9A227; --cx-selo-ink: #1B1606; }
.cx-navitem-rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-selo { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--cx-selo); color: var(--cx-selo-ink); font-size: 10.5px; font-weight: 700; flex: none; }
.cx-selo-grupo { margin-left: auto; letter-spacing: 0; text-transform: none; display: none; }
.cx-navsec.fechado .cx-selo-grupo { display: inline-flex; }
.cx-navitem.pai-ativo { background: rgba(255,255,255,0.05); font-weight: 600; }
.cx-navramo-topo { display: flex; align-items: center; }
.cx-navramo-topo .cx-navitem { flex: 1; }
.cx-navramo-btn { flex: none; width: 26px; height: 26px; margin-left: 2px; border: 0; border-radius: 6px; background: none; color: var(--cx-sidebar-ink-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cx-navramo-btn:hover { background: rgba(255,255,255,0.06); color: var(--cx-sidebar-ink); }
.cx-navramo-btn svg { transition: transform 0.15s; transform: rotate(-90deg); }
.cx-navramo.aberto .cx-navramo-btn svg { transform: none; }
.cx-subitens { display: none; flex-direction: column; gap: 1px; margin: 2px 0 4px 21px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,0.12); }
.cx-navramo.aberto .cx-subitens { display: flex; }
.cx-subitem { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; font-size: 12.5px; color: var(--cx-sidebar-ink-muted); text-decoration: none; }
.cx-subitem:hover { background: rgba(255,255,255,0.06); color: var(--cx-sidebar-ink); }
.cx-subitem.active { color: var(--cx-sidebar-ink); background: var(--cx-sidebar-active); font-weight: 600; }
.cx-brand { position: relative; }
.cx-brand-texto { flex: 1; min-width: 0; }
.cx-menu-recolher { flex: none; width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--cx-sidebar-ink-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cx-menu-recolher:hover { background: rgba(255,255,255,0.08); color: var(--cx-sidebar-ink); }
.cx-busca-abrir { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 6px; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.12); border-radius: 9px; background: rgba(255,255,255,0.04); color: var(--cx-sidebar-ink-muted); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.cx-busca-abrir:hover { border-color: rgba(255,255,255,0.22); color: var(--cx-sidebar-ink); }
.cx-busca-abrir kbd { margin-left: auto; font: inherit; font-size: 10.5px; padding: 1px 6px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.18); }
.cx-busca { width: min(560px, calc(100vw - 32px)); margin: 12vh auto auto; padding: 0; border: 1px solid var(--cx-border); border-radius: 14px; background: var(--cx-surface); color: var(--cx-ink); box-shadow: 0 24px 60px rgba(18,40,28,0.28); }
.cx-busca::backdrop { background: rgba(18,40,28,0.42); }
.cx-busca-campo { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--cx-border); padding: 16px 18px; font: inherit; font-size: 15px; background: transparent; color: inherit; outline: none; }
.cx-busca-lista { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
.cx-busca-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.cx-busca-item.sel, .cx-busca-item:hover { background: var(--cx-accent-soft); }
.cx-busca-nome { font-weight: 600; font-size: 13.5px; }
.cx-busca-grupo { font-size: 11.5px; color: var(--cx-ink-muted); white-space: nowrap; }
.cx-busca-vazio { padding: 14px 12px; color: var(--cx-ink-muted); font-size: 13px; }
.cx-busca-rodape { padding: 8px 16px; border-top: 1px solid var(--cx-border); font-size: 11px; color: var(--cx-ink-muted); }
.cx-menu-abrir, .cx-menu-fundo { display: none; }
.cx-menu-abrir { width: 34px; height: 34px; border: 1px solid var(--cx-border); border-radius: 8px; background: var(--cx-surface); color: var(--cx-ink); align-items: center; justify-content: center; cursor: pointer; }

/* Modo só ícones (desktop): barra estreita, nome no hover, selo vira ponto. */
@media (min-width: 721px) {
  .cx-menu-icones .cx-sidebar { width: 68px; padding: 16px 10px; overflow-x: visible; }
  .cx-menu-icones .cx-brand { flex-direction: column; padding: 4px 0 14px; gap: 8px; }
  .cx-menu-icones .cx-menu-recolher svg { transform: rotate(180deg); }
  .cx-menu-icones .cx-brand-texto, .cx-menu-icones .cx-navitem-rotulo, .cx-menu-icones .cx-busca-abrir kbd, .cx-menu-icones .cx-navlabel, .cx-menu-icones .cx-navramo-btn, .cx-menu-icones .cx-subitens, .cx-menu-icones .cx-sidebar-foot-texto { display: none; }
  .cx-menu-icones .cx-navsec { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 6px; padding-top: 6px; }
  .cx-menu-icones .cx-navsec.fechado .cx-navsec-itens { display: flex; }
  .cx-menu-icones .cx-navitem, .cx-menu-icones .cx-busca-abrir { justify-content: center; padding: 9px 0; position: relative; }
  .cx-menu-icones .cx-navitem .cx-selo { position: absolute; top: 4px; right: 6px; min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; }
  .cx-menu-icones .cx-navramo .cx-subitens { display: none; }
  .cx-menu-icones .cx-sidebar-foot { justify-content: center; padding: 12px 0 4px; }
}

/* Celular: o menu vira gaveta (☰ no topo, fundo escurecido). */
@media (max-width: 720px) {
  .cx-menu-abrir { display: inline-flex; }
  .cx-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); height: 100%; z-index: 40; transform: translateX(-102%); transition: transform 0.2s ease; box-shadow: 0 0 40px rgba(0,0,0,0.3); }
  .cx-gaveta-aberta .cx-sidebar { transform: none; }
  .cx-gaveta-aberta .cx-menu-fundo { display: block; position: fixed; inset: 0; background: rgba(11,26,18,0.5); z-index: 39; }
  .cx-gaveta-aberta { overflow: hidden; }
  .cx-menu-recolher { display: none; }
}

/* Ajustes do desenho "Menu lateral v2": item ativo em creme, marca em cartão, busca com ícone e destaque, dica no modo só ícones. */
:root { --cx-menu-ativo: #F4EEE4; }
.cx-navitem.active, .cx-subitem.active { background: var(--cx-menu-ativo); color: var(--cx-sidebar); }
.cx-navitem.active svg { opacity: 1; }
.cx-brand { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 9px 10px; margin-bottom: 12px; }
.cx-menu-icones .cx-brand { background: none; border: 0; }
.cx-busca-conta { padding: 10px 18px 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cx-ink-muted); }
.cx-busca-item { align-items: center; justify-content: flex-start; border: 1px solid transparent; }
.cx-busca-item.sel { border-color: rgba(21,94,58,0.18); }
.cx-busca-icone { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--cx-accent-soft); color: var(--cx-accent); display: flex; align-items: center; justify-content: center; }
.cx-busca-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cx-busca-nome mark { background: #F3E3A8; color: inherit; border-radius: 2px; }
.cx-busca-abre { display: none; font-size: 11px; font-weight: 700; color: var(--cx-accent); border: 1px solid rgba(21,94,58,0.25); border-radius: 6px; padding: 2px 7px; }
.cx-busca-item.sel .cx-busca-abre { display: inline-block; }
.cx-busca-rodape { display: flex; justify-content: space-between; gap: 12px; }
.cx-dica { position: fixed; z-index: 50; transform: translateY(-50%); background: #0B1A12; color: #fff; padding: 6px 10px; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); pointer-events: none; display: flex; flex-direction: column; gap: 1px; }
.cx-dica b { font-size: 12.5px; }
.cx-dica span { font-size: 11px; color: #A9BBAD; }

/* Produto & Tecnologia (#1195): regras, termos e driftwatch. */
.pt-regras { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.pt-regras.pt-sel { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); }
.pt-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pt-filtros .cx-input { flex: 1; min-width: 200px; }
.pt-filtros .cx-select { width: auto; max-width: 220px; }
.pt-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.pt-chips .cx-chip { border: 1px solid var(--cx-border-strong); background: var(--cx-surface); height: 30px; }
.pt-chips .cx-chip.on { border-color: #133c2a; }
.pt-conta { margin: 6px 0; }
.pt-regra { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 4px; border-top: 1px solid var(--cx-border); color: inherit; text-decoration: none; }
.pt-regra:hover, .pt-regra.ativa { background: var(--cx-surface-2, #f6f3ec); }
.pt-regra-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-id { font-family: var(--cx-font-mono); font-size: 12.5px; font-weight: 600; color: var(--cx-accent-ink); }
.pt-linha { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.pt-rotulo { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cx-ink-faint); margin: 16px 0 4px; }
.pt-codigo { font-family: var(--cx-font-mono); font-size: 12px; word-break: break-word; }
.pt-detalhe h2 { font-size: 19px; margin: 6px 0; }
.pt-voltar { display: none; margin-bottom: 10px; }
.pt-promessa { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; border: 1px solid var(--cx-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; color: inherit; text-decoration: none; }
.pt-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 16px; }
.pt-versao { font-size: 22px; font-weight: 700; margin: 6px 0 2px; }
@media (max-width: 900px) {
  .pt-regras.pt-sel { grid-template-columns: minmax(0, 1fr); }
  .pt-regras.pt-sel .pt-lista { display: none; }
  .pt-voltar { display: inline-block; }
  .pt-regra { grid-template-columns: 70px minmax(0, 1fr); }
  .pt-regra .cx-pill { grid-column: 2; justify-self: start; }
}

/* Lista de clientes orientada a ação (#1844): texto a partir de 15px, secundário em ink-muted (≥4,5:1) e foco sempre visível. */
.cl-lista { font-size: 15px; }
.cl-lista .cx-tab { font-size: 15px; padding-left: 14px; margin-right: 8px; }
.cl-lista .cx-tabs { padding: 0 14px; margin-bottom: 0; }
.cl-lista .cx-pill { font-size: 15px; white-space: normal; margin: 0 6px 4px 0; }
.cl-lista .cx-pill.cl-fase { white-space: nowrap; }
.cl-lista .cx-pill.success { color: var(--cx-accent-ink); }
.cl-lista .cx-pill.neutral { color: var(--cx-ink-muted); }
.cl-lista a { color: var(--cx-accent-ink); font-weight: 700; }
.cl-lista a:focus-visible { outline: 3px solid var(--cx-accent); outline-offset: 2px; border-radius: 6px; }
.cl-sub { display: block; color: var(--cx-ink-muted); font-size: 15px; }
.cl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--cx-border); background: var(--cx-canvas); }
.cl-chip { display: inline-flex; gap: 8px; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--cx-border-strong); border-radius: 18px; background: var(--cx-surface); text-decoration: none; }
.cl-lista a.cl-chip[aria-current="true"] { background: var(--cx-accent-soft); border: 2px solid var(--cx-accent); }
.cl-nota { margin: 0; padding: 10px 18px; color: var(--cx-ink-muted); }
.cl-vazio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 18px; text-align: center; color: var(--cx-ink-muted); }
.cl-grade { display: grid; grid-template-columns: minmax(0, 1.2fr) 180px 160px 130px 120px minmax(0, 1.8fr) 110px; gap: 14px; align-items: start; min-width: 1080px; padding: 12px 18px; }
.cl-cab { font-weight: 700; color: var(--cx-ink); border-bottom: 1px solid var(--cx-border); }
.cl-linhas { list-style: none; margin: 0; padding: 0; }
.cl-retorno { color: var(--cx-warning); font-weight: 600; }
.cl-linha { position: relative; color: var(--cx-ink); border-bottom: 1px solid var(--cx-border); }
.cl-linha:hover { background: var(--cx-canvas-sunken); }
/* A linha inteira é o link do nome (área esticada); links de ação e "Abrir ficha" ficam por cima. */
.cl-lista a.cl-nome { color: var(--cx-ink); text-decoration: none; display: block; }
.cl-nome::after { content: ""; position: absolute; inset: 0; }
.cl-lista a.cl-nome:focus-visible { outline: none; }
.cl-lista a.cl-nome:focus-visible::after { outline: 3px solid var(--cx-accent); outline-offset: -3px; border-radius: 6px; }
.cl-linha a:not(.cl-nome) { position: relative; z-index: 1; }
.cl-motivo { display: block; }
.cl-abrir { color: var(--cx-accent-ink); font-weight: 700; text-align: right; }
.cl-barra { display: block; width: 100px; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--cx-canvas-sunken); overflow: hidden; }
.cl-barra > span { display: block; height: 100%; border-radius: 3px; }
/* Início (BI da empresa): vive sob `body.cx-fin` (Layout tema="financeiro"), só com os tokens `--cx-*`. Detalhes sem JS: "i" = <details>, período/recorte = links. */
.cx-ini { display: flex; flex-direction: column; gap: 16px; }
.cx-ini-geral { display: flex; flex-direction: column; gap: 16px; }
.cx-ini-geral .cx-ini-saude { order: 1; }
.cx-ini-geral .cx-ini-cartoes { order: 2; }
.cx-ini-geral .cx-ini-fila { order: 3; }
.cx-ini-hero { padding-bottom: 0; }
.cx-ini-hero h1 { font-size: 30px; }
.cx-ini-hero-topo { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cx-ini-hero-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; font-size: 12px; color: rgba(255,255,255,0.7); }
.cx-ini-seg { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); }
.cx-ini-seg a { height: 32px; padding: 0 12px; border-radius: 8px; display: flex; align-items: center; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.cx-ini-seg a.on { background: #fff; color: var(--cx-accent-ink); }
.cx-ini-seg.claro { background: var(--cx-canvas-sunken); border-color: transparent; }
.cx-ini-seg.claro a { height: 30px; color: var(--cx-ink-muted); font-size: 12.5px; }
.cx-ini-seg.claro a.on { background: #fff; color: var(--cx-accent-ink); }
.cx-ini-abas { position: relative; display: flex; gap: 2px; margin-top: 18px; overflow-x: auto; scrollbar-width: none; }
.cx-ini-abas a { height: 40px; padding: 0 16px; border-radius: 11px 11px 0 0; display: flex; align-items: center; color: rgba(255,255,255,0.75); font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.cx-ini-abas a:hover { color: #fff; }
.cx-ini-abas a.on { background: var(--cx-canvas); color: var(--cx-accent-ink); }
.cx-ini-saude { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding: 0 6px; font-size: 12.5px; color: var(--cx-ink-muted); }
.cx-ini-saude h2 { font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--cx-ink-faint); }
.cx-ini-saude .f { display: flex; align-items: center; gap: 7px; }
.cx-ini-saude b { color: var(--cx-ink); }
.cx-ini-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cx-success); }
.cx-ini-dot.warn { background: var(--cx-warning); }
.cx-ini-dot.crit { background: var(--cx-critical); }
.cx-ini-cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cx-ini-cartao { position: relative; background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cx-ini-cartao.larga { grid-column: span 2; }
.cx-ini-cartao.total { grid-column: 1 / -1; }
.cx-ini-cartao.em-breve { border-style: dashed; background: rgba(255,255,255,0.55); }
.cx-ini-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cx-ini-rotulo { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--cx-ink-muted); }
.cx-ini-sub { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cx-ink-faint); }
.cx-ini-bloco { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cx-ini-valor { font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--cx-accent-ink); font-variant-numeric: tabular-nums; }
.cx-ini-valor.menor { font-size: 25px; }
.cx-ini-valor.indisp { font-size: 20px; font-weight: 700; color: var(--cx-ink-faint); letter-spacing: 0; }
.cx-ini-nota { font-size: 12.5px; color: var(--cx-ink-muted); text-wrap: pretty; }
.cx-ini-delta b { font-size: 13.5px; }
.cx-ini-delta b.up { color: var(--cx-success); }
.cx-ini-delta b.down { color: var(--cx-critical); }
.cx-ini-rodape { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--cx-border); font-size: 13px; font-weight: 700; }
.cx-ini-rodape-tabela { padding: 10px 18px 14px; margin: 0; }
.cx-ini-duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: start; }
.cx-ini-barra { height: 8px; border-radius: 4px; background: var(--cx-canvas-sunken); overflow: hidden; }
.cx-ini-barra i { display: block; height: 100%; background: var(--cx-warning); border-radius: 4px; }
.cx-ini-pilha { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; }
.cx-ini-pilha i { display: block; }
.cx-ini-legenda { display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: 12.5px; color: var(--cx-ink-muted); }
.cx-ini-legenda span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cx-ini-legenda i { width: 9px; height: 9px; border-radius: 3px; }
.cx-ini-legenda b { color: var(--cx-accent-ink); }
.cx-ini-vazio { display: flex; flex-direction: column; gap: 4px; color: var(--cx-ink-muted); text-align: center; padding: 28px 18px; }
.cx-ini-vazio strong { color: var(--cx-ink); }
.cx-ini-kpi { position: relative; gap: 7px; }
.cx-ini-kpi .cx-pill { align-self: flex-start; margin-top: auto; }
.cx-ini-fila { background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: 14px; padding: 20px 22px 8px; }
.cx-ini-fila-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 10px; }
.cx-ini-item { display: grid; grid-template-columns: 26px auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--cx-border); }
.cx-ini-item .n { width: 24px; height: 24px; border-radius: 7px; background: var(--cx-canvas-sunken); color: var(--cx-ink-muted); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cx-ini-item .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-ini-item .txt b { font-size: 14.5px; font-weight: 600; }
.cx-ini-item .txt span { font-size: 13px; color: var(--cx-ink-muted); }
.cx-ini-info { position: relative; display: inline-block; }
.cx-ini-info summary { list-style: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--cx-border-strong); background: var(--cx-surface); color: var(--cx-ink-muted); font-size: 11px; font-weight: 800; letter-spacing: 0; text-transform: none; line-height: 16px; text-align: center; cursor: pointer; }
.cx-ini-info summary::-webkit-details-marker { display: none; }
.cx-ini-info[open] summary { background: var(--cx-accent-soft); color: var(--cx-accent-ink); }
.cx-ini-pop { position: absolute; z-index: 30; top: 26px; left: 0; width: 320px; max-width: 80vw; background: var(--cx-surface); border: 1px solid var(--cx-border-strong); border-radius: 13px; box-shadow: 0 18px 44px rgba(19,60,42,0.2); padding: 14px 16px 15px; display: flex; flex-direction: column; gap: 8px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.cx-ini-pop small { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--cx-ink-faint); }
.cx-ini-pop strong { font-size: 15px; color: var(--cx-accent-ink); }
.cx-ini-pop p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--cx-ink-muted); }
.cx-ini-pop p.formula { font-weight: 600; color: var(--cx-accent-ink); background: var(--cx-canvas-sunken); border-radius: 8px; padding: 8px 10px; }
.cx-ini-pop dl { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 5px 10px; margin: 0; font-size: 12.5px; }
.cx-ini-pop dt { color: var(--cx-ink-faint); }
.cx-ini-pop dd { margin: 0; font-weight: 600; color: var(--cx-ink); }
@media (max-width: 900px) {
  .cx-ini-cartoes { grid-template-columns: minmax(0, 1fr); }
  .cx-ini-cartao.larga { grid-column: auto; }
  .cx-ini-duas { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cx-ini-hero-meta { align-items: flex-start; }
}
/* Celular: "Precisa de você hoje" sobe para o topo, depois a saúde dos dados e os cartões. */
@media (max-width: 720px) {
  .cx-ini-geral .cx-ini-fila { order: 0; padding: 14px 14px 2px; }
  .cx-ini-item { grid-template-columns: minmax(0, 1fr) auto; min-height: 64px; }
  .cx-ini-item .n, .cx-ini-item .cx-pill { display: none; }
  .cx-ini-item .cx-btn { min-height: 44px; }
}

/* Resumo da ficha (#1844): Jornada · Saúde de uso · Dinheiro. Texto secundário em --cx-ink-muted (>= 4,5:1). */
.cx-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cx-resumo-card { background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: 12px; padding: 14px 16px; }
.cx-resumo-card h2 { margin: 0; font-size: 12px; font-weight: 700; color: var(--cx-ink-muted); text-transform: none; }
.cx-resumo-valor { margin-top: 4px; font-size: 24px; font-weight: 700; line-height: 1.15; color: var(--cx-ink); }
.cx-resumo-valor small { font-size: 13px; font-weight: 600; color: var(--cx-ink-muted); }
.cx-resumo-card p { margin: 4px 0 10px; font-size: 12.5px; color: var(--cx-ink-muted); }
.cx-resumo-linha { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--cx-border); font-size: 12.5px; color: var(--cx-ink-muted); }
.cx-resumo-linha b { color: var(--cx-ink); text-align: right; }
.cx-resumo-linha b.ok { color: var(--cx-success); }
.cx-resumo-linha b.critico { color: var(--cx-critical); }
.cx-resumo-linha b.atencao { color: var(--cx-warning); }
@media (max-width: 900px) { .cx-resumo { grid-template-columns: 1fr; } }
.cx-trilha { background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.cx-trilha h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--cx-ink); text-transform: none; }
.cx-trilha h2 small { font-size: 12px; font-weight: 600; color: var(--cx-ink-muted); }
.cx-trilha-sub { margin: 2px 0 12px; font-size: 13.5px; color: var(--cx-ink-muted); }
.cx-trilha-marcos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cx-trilha-marco { border: 1px solid var(--cx-border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cx-trilha-marco h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--cx-ink); }
.cx-trilha-marco p { margin: 0; font-size: 13.5px; color: var(--cx-ink-muted); }
.cx-trilha-marco small { font-size: 12.5px; color: var(--cx-ink-muted); }
.cx-trilha-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--cx-border); font-size: 12.5px; font-weight: 700; color: var(--cx-ink-muted); background: var(--cx-surface); }
.cx-trilha-marco.feito .cx-trilha-num { background: var(--cx-success); border-color: var(--cx-success); color: #fff; }
.cx-trilha-marco.no_prazo .cx-trilha-num { border-color: #1a56c4; color: #1a56c4; }
.cx-trilha-marco.vencido .cx-trilha-num { border-color: var(--cx-critical); color: var(--cx-critical); }
.cx-trilha-selo { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; }
.cx-trilha-selo.feito { background: #e7f6ec; color: var(--cx-success); }
.cx-trilha-selo.no_prazo { background: #e8f0fe; color: #1a56c4; }
.cx-trilha-selo.vencido { background: transparent; color: var(--cx-critical); border-color: var(--cx-critical); }
.cx-trilha-selo.aguardando { background: #f0f0f0; color: var(--cx-ink-muted); }
@media (max-width: 900px) { .cx-trilha-marcos { grid-template-columns: 1fr; } }

/* Caixa de chamados (#1727): lista com selo de prazo. A linha inteira é o link do assunto (::after estica); checkbox e prazo ficam por cima. */
.cx-selo-critico { background: var(--cx-critical); color: #fff; }
.cx-ch-exp { display: flex; align-items: center; gap: 5px; margin: 4px 0 0; font-size: 12.5px; color: var(--cx-ink-faint); }
.cx-ch-n { font-weight: 600; font-size: 11.5px; background: var(--cx-canvas-sunken); border-radius: 999px; padding: 1px 7px; margin-left: 3px; }
.cx-ch-contadores { margin-left: auto; font-size: 12.5px; color: var(--cx-ink-muted); white-space: nowrap; }
.cx-ch-atras { color: var(--cx-critical); } .cx-ch-hoje { color: var(--cx-warning); }
.cx-ch-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; position: relative; }
.cx-ch-total { margin-left: auto; font-size: 12px; color: var(--cx-ink-faint); }
.cx-ch-filtros summary { list-style: none; } .cx-ch-filtros summary::-webkit-details-marker { display: none; }
.cx-ch-filtros-form { position: absolute; z-index: 6; margin-top: 6px; display: flex; gap: 10px; align-items: end; padding: 12px; background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: 10px; box-shadow: var(--cx-shadow-card); font-size: 12px; }
.cx-ch-filtros-form label { display: flex; flex-direction: column; gap: 4px; color: var(--cx-ink-muted); }
.cx-ch-limpar { font-size: 12px; color: var(--cx-ink-muted); }
.cx-ch-erro { margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; background: var(--cx-critical-soft); color: var(--cx-critical); font-size: 13px; }
.cx-ch-row { position: relative; display: grid; grid-template-columns: 22px 32px minmax(0, 1fr) 150px 150px 250px; gap: 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--cx-border); }
.cx-ch-row:first-child { border-top: 0; }
.cx-ch-row:hover { background: var(--cx-canvas); }
.cx-ch-row:has(:focus-visible) { outline: 2px solid var(--cx-accent); outline-offset: -2px; }
.cx-ch-row:has(.cx-ch-sel:checked) { background: var(--cx-accent-soft); }
.cx-ch-lote { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; font-size: 13px; }
.cx-ch-lote-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex: 1; }
.cx-ch-lote-acoes .cx-select { width: auto; min-width: 180px; max-width: 240px; display: inline-block; margin: 0; }
.cx-ch-lote-acoes .cx-btn { margin-right: 12px; }
#cx-ch-lista:not(:has(.cx-ch-sel:checked)) .cx-ch-lote-acoes, #cx-ch-lista:not(:has(.cx-ch-sel:checked)) .cx-ch-limpar-sel { opacity: 0.45; pointer-events: none; }
.cx-ch-limpar-sel { margin-left: auto; background: none; border: 0; cursor: pointer; }
.cx-ch-aviso { margin: 8px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--cx-accent-soft); color: var(--cx-accent-ink); font-size: 13px; }
.cx-ch-atalhos { margin: 8px 0 0; font-size: 12px; color: var(--cx-ink-faint); }
.cx-ch-sel { position: relative; z-index: 1; margin: 0; }
.cx-ch-canal { width: 32px; height: 32px; border-radius: 8px; background: var(--cx-canvas-sunken); color: var(--cx-ink-muted); display: flex; align-items: center; justify-content: center; }
.cx-ch-main { min-width: 0; }
.cx-ch-l1 { display: flex; gap: 8px; align-items: center; min-width: 0; }
.cx-ch-assunto { font-weight: 700; color: var(--cx-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-ch-assunto::after { content: ""; position: absolute; inset: 0; }
.cx-ch-assunto:focus-visible { outline: none; }
.cx-ch-prio { flex: none; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: var(--cx-warning-soft); color: var(--cx-warning); }
.cx-ch-prio.urgente { background: var(--cx-critical-soft); color: var(--cx-critical); }
.cx-ch-l2 { display: flex; gap: 12px; align-items: center; font-size: 12.5px; color: var(--cx-ink-muted); }
.cx-ch-l2-txt { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-ch-proto { flex: none; font-family: var(--cx-font-mono); font-size: 12px; color: var(--cx-ink-muted); }
.cx-ch-pend { margin-left: 8px; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 6px; border: 1px solid #D9A441; color: var(--cx-warning); }
.cx-ch-resp { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.cx-ch-vazio { width: 24px; height: 24px; border-radius: 999px; border: 1.5px dashed var(--cx-border-strong); flex: none; }
.cx-ch-prazo { position: relative; z-index: 1; font-size: 13px; font-weight: 600; color: var(--cx-ink-muted); }
.cx-ch-prazo.atrasado { color: var(--cx-critical); } .cx-ch-prazo.hoje { color: var(--cx-warning); }
.cx-ch-prazo summary { cursor: pointer; white-space: nowrap; list-style: none; padding: 3px 0; } .cx-ch-prazo summary::-webkit-details-marker { display: none; }
.cx-ch-pop { position: absolute; right: 0; top: 100%; z-index: 7; width: 300px; padding: 12px 14px; background: var(--cx-surface); color: var(--cx-ink); border: 1px solid var(--cx-border); border-radius: 10px; box-shadow: 0 6px 24px rgba(20, 30, 24, 0.14); font-weight: 400; font-size: 12.5px; }
.cx-ch-pop p { margin: 2px 0 10px; color: var(--cx-ink-muted); } .cx-ch-pop-fim { margin: 0; padding-top: 8px; border-top: 1px solid var(--cx-border); }

/* chamado aberto (#1727, fatia 2a) */
.cx-co-voltar { font-size: 13px; color: var(--cx-ink-muted); text-decoration: none; }
.cx-co-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1200px) { .cx-co-grid { grid-template-columns: minmax(0, 1fr) 300px; } }
.cx-co-topo { padding: 16px 20px; }
.cx-co-titulo { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.cx-co-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--cx-ink-muted); }
.cx-co-orig { margin-left: auto; font-size: 12.5px; }
.cx-co-prazos { padding-top: 10px; border-top: 1px solid var(--cx-border); color: var(--cx-ink); position: relative; }
.cx-co-ajuda { position: relative; } .cx-co-ajuda summary { list-style: none; cursor: pointer; width: 20px; height: 20px; border-radius: 999px; border: 1px solid var(--cx-border-strong); text-align: center; font-size: 12px; line-height: 18px; }
.cx-co-ajuda summary::-webkit-details-marker { display: none; } .cx-co-ajuda .cx-ch-pop { left: 0; right: auto; }
.cx-co-tempo { padding: 8px 20px 14px; }
.cx-co-msg, .cx-co-nota { display: flex; gap: 12px; margin-top: 16px; }
.cx-co-corpo { margin: 2px 0 0; white-space: pre-wrap; }
.cx-co-meta { font-size: 12.5px; color: var(--cx-ink-faint); }
.cx-co-marca { font-size: 12.5px; color: var(--cx-ink-muted); } .cx-co-marca.ia { color: var(--cx-violet); }
.cx-co-nota { padding: 10px 14px; border-radius: 10px; background: var(--cx-warning-soft); border: 1px solid #E8D3A0; }
.cx-co-cadeado { width: 24px; height: 24px; border-radius: 999px; background: var(--cx-warning); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.cx-co-nota-rot { color: var(--cx-warning); }
.cx-co-ev { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--cx-ink-muted); }
.cx-co-ev .cx-co-meta { margin-left: auto; }
.cx-co-pt { width: 6px; height: 6px; border-radius: 999px; background: var(--cx-ink-faint); flex: none; }
.cx-co-grupo { margin-top: 10px; font-size: 13px; color: var(--cx-ink-muted); } .cx-co-grupo summary { cursor: pointer; }
.cx-co-faixa { margin: 20px 0 0; padding-top: 12px; border-top: 1px solid var(--cx-border); font-size: 12.5px; color: var(--cx-ink-faint); }
.cx-co-lado .cx-card { padding: 14px 16px; margin-bottom: 12px; }
.cx-co-h2 { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.cx-co-ant { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0 0 10px; font-size: 13px; }
.cx-co-barra { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 14px; margin: 8px 0 12px; }
.cx-co-acao { display: flex; margin: 0; } .cx-co-acao label { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--cx-ink-faint); }
.cx-co-resolver { margin-left: auto; }
.cx-co-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(20, 20, 20, .45); padding: 16px; }
.cx-co-modal-caixa { width: min(560px, 100%); max-height: 100%; overflow: auto; display: grid; gap: 12px; padding: 24px; border-radius: 14px; background: var(--cx-surface); box-shadow: 0 12px 40px rgba(0, 0, 0, .18); }
.cx-co-modal-caixa > h2, .cx-co-modal-caixa > h3 { margin: 0 0 4px; font-size: 17px; }
.cx-co-modal-caixa label:has(input[name=desfecho]) { display: grid; grid-template-columns: 20px 1fr; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--cx-border); border-radius: 10px; cursor: pointer; }
.cx-co-modal-caixa label:has(input[name=desfecho]:checked) { border-color: var(--cx-accent); background: var(--cx-accent-soft); }
.cx-co-modal-caixa label:has(input[name=desfecho]:disabled) { cursor: not-allowed; }
.cx-co-desf { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; } .cx-co-desf.off { opacity: .5; cursor: not-allowed; }
.cx-co-desf-ok { opacity: .5; pointer-events: none; } .cx-co-desf-dica { margin: 0; }
.cx-co-modal-caixa:has(input[name=desfecho]:checked) .cx-co-desf-ok { opacity: 1; pointer-events: auto; }
.cx-co-modal-caixa:has(input[name=desfecho]:checked) .cx-co-desf-dica { display: none; }
.cx-co-comp { margin-top: 16px; padding: 12px 20px 16px; } .cx-co-comp textarea { width: 100%; margin-top: 6px; }
.cx-co-comp.nota { background: var(--cx-warning-soft); border-color: #E8D3A0; }
.cx-co-comp-pe { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.cx-co-macro { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .cx-co-macro label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.cx-co-ia { margin: 0 0 8px; font-size: 13px; color: var(--cx-ink-muted); }
.cx-co-aba-off { opacity: .5; cursor: not-allowed; } .cx-co-aviso { margin: 0 0 8px; font-size: 13px; color: var(--cx-ink-muted); }
.cx-qe { padding: 14px 20px 16px; margin-bottom: 16px; }
.cx-qe-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 10px; }
.cx-qe-cand { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px 14px; border: 1px solid var(--cx-border); border-radius: 10px; }
.cx-qe-dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 13px; } .cx-qe-dl dt { color: var(--cx-ink-faint); } .cx-qe-dl dd { margin: 0; overflow-wrap: anywhere; }
.cx-qe-busca { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cx-border); } .cx-qe-form { display: flex; gap: 8px; margin: 0; }
.cx-qe-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cx-border); }

/* Funis de Marketing (desenho "Marketing - Funis v2"): resumo, diagnóstico, percurso e canais */
.fn-secao { display: flex; flex-direction: column; gap: 14px; }
.fn-filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.fn-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.fn-resumo { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: 14px; padding: 12px 20px; }
.fn-resumo > div { display: flex; flex-direction: column; min-width: 90px; }
.fn-resumo span { font-size: 12px; color: var(--cx-ink-muted); font-weight: 600; }
.fn-resumo b { font-size: 22px; font-weight: 700; }
.fn-resumo small { font-size: 11.5px; color: var(--cx-ink-muted); }
.fn-resumo p { margin: 0 0 0 auto; font-size: 13px; color: var(--cx-ink-muted); }
.fn-diag { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: center; background: #133c2a; color: #f7f0e9; border-radius: 16px; padding: 24px 28px; }
.fn-diag-calmo { display: block; background: var(--cx-surface); color: var(--cx-ink); border: 1px solid var(--cx-border); }
.fn-diag h3 { font-size: 26px; line-height: 1.2; font-weight: 800; margin: 8px 0; }
.fn-diag p { margin: 0 0 16px; opacity: 0.85; font-size: 14px; }
.fn-diag-tag { display: inline-block; background: #d9a82a; color: #3b2a00; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 12px; }
.fn-diag-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.fn-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; }
.fn-btn-ouro { background: #d9a82a; border-color: #d9a82a; color: #3b2a00; }
.fn-diag-pontos { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.fn-diag-pontos > div { display: flex; flex-wrap: wrap; gap: 6px; }
.fn-diag-pontos i { display: inline-block; width: 18px; height: 18px; border-radius: 5px; }
.fn-diag-pontos small i { width: 10px; height: 10px; margin: 0 4px 0 10px; vertical-align: -1px; }
.fn-diag-pontos i.ok { background: #f7f0e9; }
.fn-diag-pontos i.nao { background: #e8826f; }
.fn-card .cx-card-head h3 { font-size: 16px; }
.fn-anuncio { margin-bottom: 8px; font-size: 13px; }
.fn-anuncio summary { cursor: pointer; font-weight: 600; color: var(--cx-accent); }
.fn-anuncio p { margin: 8px 0 0; color: var(--cx-ink-muted); }
.fn-cab, .fn-linha { display: grid; grid-template-columns: 170px minmax(0, 1fr) 190px 130px; gap: 16px; align-items: center; }
.fn-cab { font-size: 11.5px; font-weight: 700; color: var(--cx-ink-muted); text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 6px; border-bottom: 1px solid var(--cx-border); }
.fn-linha { padding: 10px 0; font-size: 13px; }
.fn-barra { position: relative; height: 34px; border-radius: 8px; background: var(--cx-accent-soft); overflow: hidden; }
.fn-barra i { display: block; height: 100%; background: var(--cx-accent); border-radius: 8px; }
.fn-barra span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #fff; font-weight: 700; font-size: 13px; mix-blend-mode: normal; text-shadow: 0 0 3px rgba(0, 0, 0, 0.45); }
.fn-custo { text-align: right; display: flex; flex-direction: column; font-weight: 600; }
.fn-custo small, .fn-canais small { display: block; font-size: 11px; color: var(--cx-ink-muted); font-weight: 400; }
.fn-queda { margin-left: 186px; width: max-content; background: var(--cx-critical); color: #fff; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 12px; }
.fn-linha.perda .fn-barra { background: var(--cx-critical-soft); }
.fn-canais tr.fn-sel td { background: var(--cx-accent-soft); }
.fn-aviso { margin: 0; padding: 10px 16px; font-size: 12.5px; color: var(--cx-warning); background: var(--cx-warning-soft); }
@media (max-width: 900px) {
  .fn-diag { grid-template-columns: 1fr; padding: 20px; }
  .fn-diag h3 { font-size: 21px; }
  .fn-cab { display: none; }
  .fn-linha { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .fn-linha .fn-barra { grid-column: 1 / -1; order: 3; }
  .fn-linha .fn-custo { grid-column: 1 / -1; order: 4; flex-direction: row; justify-content: flex-start; gap: 8px; align-items: baseline; text-align: left; }
  .fn-canais thead { display: none; }
  .fn-canais tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--cx-border); }
  .fn-canais td { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; border: 0; }
  .fn-canais td:first-child { padding-bottom: 6px; }
  .fn-canais td[data-label]::before { content: attr(data-label); font-size: 12px; color: var(--cx-ink-muted); font-weight: 600; }
  .fn-queda { margin-left: 0; }
  .fn-resumo p { margin-left: 0; }
}
.fn-det > summary { cursor: pointer; list-style: none; }
.fn-det > summary::-webkit-details-marker { display: none; }
.fn-det > summary::after { content: "▾"; margin-left: auto; color: var(--cx-ink-muted); }
.fn-det:not([open]) > summary::after { content: "▸"; }
.fn-det > summary.cx-card-head { display: flex; align-items: center; gap: 12px; }
.fn-pad { padding: 4px 20px 16px; }
.fn-grafico-t { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; color: var(--cx-ink-muted); }
.fn-legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--cx-ink-muted); margin-top: 6px; }
.fn-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.fn-aviso-cinza { color: var(--cx-ink-muted); background: var(--cx-canvas); }
.fn-perda-t { color: var(--cx-critical); display: block; }
.fn-mini { display: flex; gap: 6px; align-items: flex-end; height: 64px; min-width: 150px; }
.fn-mini-col { position: relative; width: 22px; height: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-start; align-items: stretch; }
.fn-mini-col > i { display: block; background: var(--cx-accent); border-radius: 3px 3px 0 0; }
.fn-mini-col > i.perda { background: var(--cx-critical); border-radius: 3px 3px 0 0; order: 2; opacity: 0.85; }
.fn-mini-col > span { position: absolute; bottom: -16px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--cx-ink-muted); }
.fn-canais td small { display: block; font-size: 11px; color: var(--cx-ink-muted); font-weight: 400; }
.fn-mini { margin-bottom: 18px; }
.fn-barra span.fora { color: var(--cx-ink); text-shadow: none; }
.fn-rolagem { overflow-x: auto; }
.fn-id, .fn-canais td > b + small { display: block; }
.fn-ver { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
@media (max-width: 900px) { .fn-rolagem svg { min-width: 760px; } }
.fn-dica-rolagem { display: none; margin: 4px 0 0; font-size: 11.5px; color: var(--cx-ink-muted); }
@media (max-width: 900px) { .fn-dica-rolagem { display: block; } }