.quick-suggestions-popup {
            position: absolute;
            bottom: 100%;
            left: 20px;
            right: 20px;
            background: var(--bg-header);
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 -5px 25px rgba(0,0,0,0.3);
            z-index: 1000;
            max-height: 250px;
            overflow-y: auto;
            margin-bottom: 10px;
        }
        .quick-suggestion-item {
            padding: 12px 15px;
            cursor: pointer;
            border-bottom: 1px solid var(--border);
            transition: background 0.2s;
            color: var(--text-main);
            text-align: left;
        }
        .quick-suggestion-item:last-child { border-bottom: none; }
        .quick-suggestion-item:hover, .quick-suggestion-item.active {
            background: var(--accent);
            color: white;
        }
        .quick-suggestion-item b { color: var(--accent); margin-right: 10px; }
        .quick-suggestion-item:hover b, .quick-suggestion-item.active b { color: white; }

        /* Restrição de Operadores */
        body.is-operator .owner-only { display: none !important; }

        /* Bloqueio de Inadimplência */
        #frozen-overlay {
            position: fixed; top:0; left:0; width:100%; height:100%;
            background: rgba(0,0,0,0.95); z-index: 99999;
            display: none; flex-direction: column; align-items: center; justify-content: center;
            text-align: center; color: white; padding: 20px;
        }

        @keyframes crmCardPop {
            0% { transform: scale(0.97); opacity: 0.7; }
            100% { transform: scale(1); opacity: 1; }
        }.crm-badge-price {
            padding: 3px 7px;
            border-radius: 5px;
            font-size: 10px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .badge-paid { background: rgba(0,168,132,0.15); color: #00ffcc; }
        .badge-pending { background: rgba(244,67,54,0.15); color: #ff5252; }
        .crm-board-panel,
        .crm-detail-panel {
            min-height: 0;
            background: var(--bg-sidebar, #181818);
            border: 1px solid var(--border, #2e2e2e);
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        .crm-detail-panel {
            padding: 12px;
            box-sizing: border-box;
            overflow-y: auto;
        }
        .crm-metric-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 7px;
            margin-bottom: 12px;
        }
        .crm-metric-card {
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 11px;
            padding: 10px;
            background: rgba(255,255,255,0.03);
        }
        .crm-metric-card span {
            display: block;
            font-size: 10px;
            color: var(--text-secondary);
            margin-bottom: 5px;
        }
        .crm-metric-card strong {
            display: block;
            color: var(--text-main);
            font-size: 18px;
            line-height: 1;
            margin-bottom: 4px;
        }
        .crm-metric-card small {
            color: var(--text-secondary);
            font-size: 10px;
        }
        .crm-overview-strip {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .crm-overview-chip {
            min-width: 0;
            padding: 9px 12px;
            border-radius: 11px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.05);
        }
        .crm-overview-chip b {
            display: block;
            color: var(--text-main);
            font-size: 13px;
            margin-bottom: 3px;
        }
        .crm-overview-chip span {
            color: var(--text-secondary);
            font-size: 10px;
            line-height: 1.35;
        }
        /* Cores por token, e nao fixas (26/08/2026): com #2a2a2a/#383838/#aaaaaa
           estes botoes ficavam como quadradinhos ESCUROS dentro do tema claro —
           visto na ficha do lead, nas acoes de cada follow-up. */
        .crm-btn-icon {
            background: var(--bg-header);
            border: 1px solid var(--border);
            color: var(--text-secondary);
            border-radius: 4px;
            width: 20px;
            height: 20px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 9.5px;
            transition: all 0.15s ease;
        }
        .crm-btn-icon:hover {
            border-color: var(--accent);
            color: var(--accent);
            background: rgba(0, 168, 132, 0.10);
        }

        /* O "x" de fechar do SweetAlert2 vem #ccc de fabrica: sobre o dialogo
           claro isso da 1,61:1 (o minimo e 4,5:1) e o botao praticamente some.
           Medido na ficha do lead. */
        .swal2-close {
            color: var(--text-secondary) !important;
        }
        .swal2-close:hover,
        .swal2-close:focus {
            color: var(--accent) !important;
        }
        .crm-swal-popup {
            border-radius: 24px !important;
            border: 1px solid var(--border) !important;
            box-shadow: 0 24px 70px rgba(0,0,0,0.24) !important;
        }
        .crm-swal-title {
            font-size: 20px !important;
            font-weight: 800 !important;
            letter-spacing: -0.02em;
        }
        .crm-swal-html {
            text-align: left;
            /* Sem teto de altura o conteúdo empurrava o diálogo inteiro para além
               da janela e o botão "Salvar Alterações" ficava FORA DA TELA — medido
               na ficha do lead: 1213px de diálogo numa janela de 849px. Agora quem
               rola é o conteúdo; título e botões continuam à vista. Os ~200px
               descontados são o título, as ações e os respiros do SweetAlert2. */
            max-height: calc(100vh - 200px);
            overflow-y: auto;
        }
        .crm-swal-html .swal2-input,
        .crm-swal-html .swal2-textarea,
        .crm-swal-html .swal2-select {
            width: 100% !important;
            margin: 6px 0 16px !important;
            border-radius: 14px !important;
            box-sizing: border-box !important;
            box-shadow: none !important;
            font-size: 13px !important;
            transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
        }
        .crm-swal-html .swal2-input:focus,
        .crm-swal-html .swal2-textarea:focus,
        .crm-swal-html .swal2-select:focus {
            border-color: rgba(0,168,132,0.5) !important;
            box-shadow: 0 0 0 3px rgba(0,168,132,0.16) !important;
        }
        .crm-swal-html .swal2-textarea {
            min-height: 120px !important;
            resize: vertical !important;
        }
        html.dark-theme .crm-swal-html .swal2-input,
        html.dark-theme .crm-swal-html .swal2-textarea,
        html.dark-theme .crm-swal-html .swal2-select {
            background: rgba(255,255,255,0.04) !important;
            color: #f5f7fb !important;
            border: 1px solid rgba(255,255,255,0.08) !important;
        }

        html.dark-theme .swal2-popup .swal2-select,
        html.dark-theme .swal2-popup select,
        html.dark-theme .swal2-dark-custom .swal2-select,
        html.dark-theme .swal2-dark-custom select {
            background-color: #202c33 !important;
            color: #f5f7fb !important;
            border: 1px solid rgba(255,255,255,0.16) !important;
            color-scheme: dark;
        }

        html.dark-theme .swal2-popup .swal2-select option,
        html.dark-theme .swal2-popup select option,
        html.dark-theme .swal2-dark-custom .swal2-select option,
        html.dark-theme .swal2-dark-custom select option {
            background-color: #202c33 !important;
            color: #f5f7fb !important;
        }

        html.dark-theme .swal2-popup .swal2-select option:checked,
        html.dark-theme .swal2-popup select option:checked,
        html.dark-theme .swal2-dark-custom .swal2-select option:checked,
        html.dark-theme .swal2-dark-custom select option:checked {
            background-color: #00a884 !important;
            color: #ffffff !important;
        }

        html.dark-theme .crm-swal-html .swal2-input::placeholder,
        html.dark-theme .crm-swal-html .swal2-textarea::placeholder {
            color: rgba(255,255,255,0.45) !important;
        }
        html.light-theme .crm-swal-html .swal2-input,
        html.light-theme .crm-swal-html .swal2-textarea,
        html.light-theme .crm-swal-html .swal2-select {
            background: #f7fafc !important;
            color: #111827 !important;
            border: 1px solid #d7dee7 !important;
        }
        html.light-theme .crm-swal-html .swal2-input::placeholder,
        html.light-theme .crm-swal-html .swal2-textarea::placeholder {
            color: #7b8794 !important;
        }
        .crm-ghost-btn {
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.04);
            color: var(--text-main);
            border-radius: 999px;
            padding: 4px 9px;
            font-size: 10px;
            cursor: pointer;
            transition: background 0.15s;
        }
        .crm-ghost-btn:hover { background: rgba(255,255,255,0.08); }
        .crm-load-more {
            width: 100%;
            border: 1px dashed rgba(0,168,132,0.35);
            background: rgba(0,168,132,0.06);
            color: var(--text-main);
            border-radius: 12px;
            padding: 11px 12px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.16s ease;
        }
        .crm-load-more:hover {
            background: rgba(0,168,132,0.12);
            border-color: rgba(0,168,132,0.55);
            transform: translateY(-1px);
        }
        .crm-context-menu {
            position: fixed;
            min-width: 220px;
            background: var(--bg-header);
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 16px 42px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.04);
            z-index: 99999;
            padding: 6px;
            animation: crmDropdownIn 0.12s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .crm-stage-dropdown-item {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 9px 12px;
            border: none;
            background: transparent;
            color: var(--text-main);
            font-size: 12px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.12s ease;
            text-align: left;
        }
        .crm-stage-dropdown-item:hover {
            background: rgba(255,255,255,0.06);
        }
        .crm-stage-dropdown-item i {
            width: 16px;
            text-align: center;
            font-size: 12px;
            color: var(--text-secondary);
            flex-shrink: 0;
        }
        .crm-stage-dropdown-item--danger,
        .crm-stage-dropdown-item--danger i {
            color: #ff6b6b;
        }
        .crm-stage-dropdown-item--danger:hover {
            background: rgba(239,68,68,0.1);
        }
        .crm-stage-dropdown-sep {
            height: 1px;
            background: rgba(255,255,255,0.06);
            margin: 4px 8px;
        }
        html.light-theme .crm-context-menu {
            background: #ffffff;
            border-color: #d7dee7;
            box-shadow: 0 16px 42px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.04);
        }
        @keyframes crmStageDropPulse {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,168,132,0); }
            35% { transform: scale(1.015); box-shadow: 0 0 0 8px rgba(0,168,132,0.14); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,168,132,0); }
        }html.light-theme .crm-sidebar,
        html.light-theme .crm-board-panel,
        html.light-theme .crm-detail-panel {
            background:
                radial-gradient(circle at top right, rgba(0,168,132,0.08), transparent 35%),
                linear-gradient(180deg, #ffffff, #f8fafc);
            border-color: #d7dee7;
            box-shadow: 0 18px 40px rgba(15,23,42,0.08);
        }
        html.light-theme .crm-metric-card,
        html.light-theme .crm-overview-chip,
        html.light-theme .crm-detail-block,
        html.light-theme .crm-followup-item,
        html.light-theme .crm-empty-panel {
            background: rgba(255,255,255,0.86);
            border-color: #dbe3eb;
        }
        html.light-theme .crm-chip {
            background: #f7fafc;
            border-color: #dbe3eb;
            color: #4d5c66;   /* herdava --text-secondary e dava 4,43:1 sobre o chip */
        }
        /* O verde da marca com texto branco dá 3,03:1 — abaixo do mínimo para
           texto deste tamanho. Escurecido só no tema claro, e só nos diálogos do
           CRM, para o botão principal continuar legível sem trocar a cor da marca
           no painel inteiro. */
        html.light-theme .crm-swal-popup .swal2-confirm {
            /* `!important` porque o SweetAlert2 escreve a cor do botão numa
               variável INLINE no próprio elemento (`--swal2-confirm-button-
               background-color`), e inline vence regra de folha. Medido. */
            background-color: #047857 !important;
        }
        html.light-theme .crm-card-kpi {
            background: rgba(0,168,132,0.06);
            border-color: rgba(0,168,132,0.18);
            color: #059669;
        }
        html.light-theme .crm-card-kpi span {
            color: rgba(5,150,105,0.65);
        }
        html.light-theme .crm-card-footer {
            border-top-color: #e5ebf1;
        }
        html.light-theme .crm-ghost-btn {
            background: #f7fafc;
            border-color: #d7dee7;
            color: #111b21;
        }
        html.light-theme .crm-ghost-btn:hover {
            background: #eef3f7;
        }
        html.light-theme .crm-load-more {
            background: #eefaf6;
            border-color: rgba(0,168,132,0.28);
        }
        .crm-empty-panel {
            height: 100%;
            min-height: 180px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: var(--text-secondary);
            border: 1px dashed rgba(255,255,255,0.08);
            border-radius: 14px;
            background: rgba(255,255,255,0.02);
            padding: 20px;
            box-sizing: border-box;
        }
        .crm-detail-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }
        .crm-detail-block {
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 12px;
            padding: 11px;
            background: rgba(255,255,255,0.022);
            margin-bottom: 10px;
        }
        .crm-detail-block h4 {
            margin: 0 0 8px;
            color: var(--text-main);
            font-size: 12px;
        }
        .crm-detail-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
        .crm-detail-item span {
            display: block;
            font-size: 9px;
            color: var(--text-secondary);
            margin-bottom: 3px;
        }
        .crm-detail-item strong {
            display: block;
            color: var(--text-main);
            font-size: 11px;
            line-height: 1.4;
        }
        .crm-followup-list {
            display: flex;
            flex-direction: column;
            gap: 7px;
        }
        .crm-followup-item {
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 10px;
            padding: 9px;
            background: rgba(255,255,255,0.025);
        }
        .crm-followup-item b,
        .crm-followup-item span,
        .crm-followup-item small {
            display: block;
        }
        .crm-followup-item b {
            color: var(--text-main);
            font-size: 11px;
            margin-bottom: 4px;
        }
        .crm-followup-item span {
            color: var(--text-secondary);
            font-size: 10px;
            line-height: 1.4;
            margin-bottom: 5px;
        }
        .crm-followup-item small {
            color: var(--text-secondary);
            font-size: 9px;
        }
        /* O selo de status ("Pendente", "Enviado") é um <span> dentro do
           .crm-followup-item — e a regra de TIPO acima força display:block em TODO
           span de dentro. Resultado medido em 23/08/2026: selo de 32px de largura
           com a palavra quebrada no meio ("Pende / nte"). Fora isso, `.crm-chip` só
           tinha estilo no tema claro; no escuro era span nu. Mesma armadilha do
           `button {}` global: seletor de tipo vence classe solta. */
        .crm-chip {
            padding: 3px 9px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.10);
            background: rgba(255,255,255,0.05);
            color: var(--text-secondary);
            font-size: 10px;
            line-height: 1.6;
            white-space: nowrap;
        }
        .crm-followup-item .crm-chip {
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            margin-bottom: 0;
        }
        .crm-chip--today {
            border-color: rgba(0,168,132,0.45);
            background: rgba(0,168,132,0.12);
            color: #34d399;
        }
        .crm-chip--overdue {
            border-color: rgba(239,68,68,0.45);
            background: rgba(239,68,68,0.12);
            color: #f87171;
        }
        /* ===== CRM polish: scrollbars, sidebar, stats, animações ===== */
        .crm-kanban-board::-webkit-scrollbar,
        .crm-card-list::-webkit-scrollbar,
        .crm-contacts-list::-webkit-scrollbar,
        .crm-detail-panel::-webkit-scrollbar {
            width: 6px;
            height: 8px;
        }
        .crm-kanban-board::-webkit-scrollbar-track,
        .crm-card-list::-webkit-scrollbar-track,
        .crm-contacts-list::-webkit-scrollbar-track,
        .crm-detail-panel::-webkit-scrollbar-track {
            background: transparent;
        }
        .crm-kanban-board::-webkit-scrollbar-thumb,
        .crm-card-list::-webkit-scrollbar-thumb,
        .crm-contacts-list::-webkit-scrollbar-thumb,
        .crm-detail-panel::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.14);
            border-radius: 999px;
        }
        .crm-kanban-board::-webkit-scrollbar-thumb:hover,
        .crm-card-list::-webkit-scrollbar-thumb:hover,
        .crm-contacts-list::-webkit-scrollbar-thumb:hover,
        .crm-detail-panel::-webkit-scrollbar-thumb:hover {
            background: rgba(0,168,132,0.45);
        }
        html.light-theme .crm-kanban-board::-webkit-scrollbar-thumb,
        html.light-theme .crm-card-list::-webkit-scrollbar-thumb,
        html.light-theme .crm-contacts-list::-webkit-scrollbar-thumb,
        html.light-theme .crm-detail-panel::-webkit-scrollbar-thumb {
            background: rgba(17,27,33,0.18);
        }
        #crm-view-container {
            animation: crmViewIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        }
        @keyframes crmViewIn {
            0% { opacity: 0; transform: translateY(8px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        @media (prefers-reduced-motion: reduce) {
            #crm-view-container,
            .crm-card,
            .crm-card.crm-card-pop,
            .kanban-column {
                animation: none !important;
                transition: none !important;
            }
        }html.light-theme .crm-cta-btn {
            background: rgba(0,168,132,0.1);
            color: #047857;
        }
        html.light-theme .crm-card-next {
            background: rgba(0,168,132,0.05);
            border-color: rgba(0,168,132,0.16);
        }
        /* O verde e o azul da marca são claros demais sobre branco: escurecidos só
           no tema claro, no mesmo tom que `.crm-card-kpi` já usava aqui (#059669). */
        html.light-theme .crm-score-pill,
        html.light-theme .cd-text-btn {
            color: #047857;          /* #00a884 dava 3,03:1; #059669 ainda dava 3,77:1 */
        }

        /* ══════════════════════════════════════════════════════════════════════
           CRM v2 (02/09/2026) — "tá muito bagunçado, deixa as caixas de contato
           parecidas com as das conversas e ajeita as colunas".
           DONO ÚNICO: este bloco. O design-system.css tinha uma cópia com
           !important de coluna, card, chips e botão que vencia tudo daqui — saiu.
           Escala fechada: tipo 13.5/12.5/11.5/10.5, raio 14 (painel/coluna),
           12 (linha/card), 8 (botão/pílula), 999 (chip); espaço em múltiplo de 4;
           transição .16s ease. Só token de tema; o que é medido está anotado.
           ══════════════════════════════════════════════════════════════════════ */
        #crm-view-container {
            --crm-muted: var(--text-secondary);
            --crm-surface: var(--bg-card);
            --crm-panel: var(--bg-sidebar);
            --crm-column: color-mix(in srgb, var(--bg-sidebar) 62%, var(--bg-main));
            --crm-line: var(--border);
            --crm-hot: #fca5a5;   --crm-hot-bg: rgba(239, 68, 68, .14);
            --crm-warm: #fcd34d;  --crm-warm-bg: rgba(245, 158, 11, .14);
            --crm-cold: #93c5fd;  --crm-cold-bg: rgba(59, 130, 246, .14);
            --crm-score: #2ecfa6; --crm-score-bg: rgba(0, 168, 132, .14);
            --crm-r-panel: 14px; --crm-r-item: 12px; --crm-r-btn: 8px;
            --crm-t: .16s ease;
        }
        /* Tema claro: os mesmos hex já medidos na tela de Produção (b9). O
           --text-secondary (#667781) passa sobre branco (4,65:1) e REPROVA sobre
           qualquer superfície cinza (4,14:1 no #f0f2f5) — por isso o muted local. */
        html.light-theme #crm-view-container {
            --crm-muted: #4e5f68;
            --crm-column: #f3f5f8;
            --crm-hot: #9b1c1f;   --crm-hot-bg: rgba(239, 68, 68, .10);
            --crm-warm: #8a4d05;  --crm-warm-bg: rgba(245, 158, 11, .14);
            --crm-cold: #1e40af;  --crm-cold-bg: rgba(59, 130, 246, .10);
            --crm-score: #025c46; --crm-score-bg: rgba(0, 168, 132, .12);
        }

        /* ── Casca ─────────────────────────────────────────────────────────── */
        .crm-workspace { padding: 12px; box-sizing: border-box; background: var(--bg-main); }
        .crm-shell { display: grid; grid-template-columns: 344px minmax(0, 1fr); gap: 12px; height: 100%; min-height: 0; }
        .crm-contacts-panel,
        .crm-board-panel {
            min-height: 0; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
            background: var(--crm-panel); border: 1px solid var(--crm-line); border-radius: var(--crm-r-panel);
        }
        .crm-contacts-panel { gap: 10px; padding: 12px; }
        .crm-board-panel { padding: 12px; }
        html.light-theme .crm-contacts-panel,
        html.light-theme .crm-board-panel { background: #ffffff; border-color: #dbe3eb; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }

        /* ── Ferramentas da coluna da esquerda ────────────────────────────── */
        .crm-sidebar-tools { display: flex; flex-direction: column; gap: 8px; }
        .crm-search-wrap { position: relative; }
        .crm-search-wrap i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--crm-muted); font-size: 12px; pointer-events: none; }
        .crm-search-input {
            width: 100%; height: 36px; box-sizing: border-box; padding: 0 12px 0 34px; font-family: inherit; font-size: 12.5px;
            border: 1px solid var(--crm-line); border-radius: 10px; background: var(--bg-input); color: var(--text-main); outline: none;
            transition: border-color var(--crm-t), box-shadow var(--crm-t);
        }
        .crm-search-input::placeholder { color: var(--crm-muted); }
        .crm-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
        .crm-limit-wrap {
            display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; box-sizing: border-box; padding: 0 10px;
            border: 1px solid var(--crm-line); border-radius: 10px; background: var(--bg-input);
        }
        .crm-limit-wrap i { color: var(--crm-muted); font-size: 11px; margin: 0 !important; }
        .crm-limit-select { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-main); padding: 0; }
        .crm-limit-select option { background: var(--bg-input); color: var(--text-main); }
        .crm-sidebar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
        .crm-sidebar-action-wide { grid-column: 1 / -1; }
        .crm-action-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 10px; box-sizing: border-box;
            border: 1px solid var(--crm-line); border-radius: var(--crm-r-btn); background: var(--bg-input); color: var(--text-main);
            font-family: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
            transition: background var(--crm-t), border-color var(--crm-t), transform var(--crm-t);
        }
        .crm-action-btn i { font-size: 11px; color: var(--accent); }
        .crm-action-btn:hover { border-color: var(--accent-border); background: var(--accent-subtle); transform: translateY(-1px); }
        /* Verde da marca (#00a884) com texto branco dá 3,03:1 NOS DOIS temas — medido
           aqui em 02/09/2026 nos 41 "Conversar" e no "Novo Lead". #00806a dá 4,89:1. */
        .crm-action-btn--primary { background: #00806a; border-color: #00806a; color: #ffffff; }
        .crm-action-btn--primary i { color: #ffffff; }
        .crm-action-btn--primary:hover { background: #006d5a; border-color: #006d5a; color: #ffffff; }
        html.light-theme .crm-action-btn:not(.crm-action-btn--primary) { background: #ffffff; }

        .crm-section-label {
            display: flex; align-items: center; gap: 8px; margin: 2px 2px 0; font-size: 10.5px; font-weight: 800;
            letter-spacing: .08em; text-transform: uppercase; color: var(--crm-muted);
        }
        .crm-filter-list { display: flex; flex-wrap: wrap; gap: 6px; }
        .crm-filter-pill {
            height: 26px; padding: 0 11px; box-sizing: border-box; border-radius: 999px; cursor: pointer; font-family: inherit;
            font-size: 11.5px; font-weight: 600; border: 1px solid var(--crm-line); background: var(--bg-input); color: var(--crm-muted);
            transition: background var(--crm-t), border-color var(--crm-t), color var(--crm-t);
        }
        .crm-filter-pill:hover { border-color: var(--accent-border); color: var(--text-main); }
        .crm-filter-pill.active { border-color: var(--accent-border); background: var(--accent-subtle); color: var(--accent); }
        html.light-theme .crm-filter-pill.active { color: #025c46; }

        /* ── Lista de contatos: a mesma caixa da lista de conversas ──────────
           Avatar redondo de 44px, nome + hora na 1ª linha, subtítulo + etapa na 2ª,
           e o TRIÂNGULO DA REDE no canto inferior direito (`.chat-item-corner-network`,
           a mesma classe e a mesma cor da lista de conversas — uma fonte só). */
        .crm-contacts-list { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; padding: 2px 2px 8px 0; }
        .crm-contacts-item {
            position: relative; display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; min-height: 64px;
            padding: 10px 10px 10px 12px; border: 1px solid var(--crm-line); border-radius: var(--crm-r-item); background: var(--crm-surface);
            color: var(--text-main); cursor: grab; overflow: hidden; text-align: left;
            transition: background var(--crm-t), border-color var(--crm-t), transform var(--crm-t), box-shadow var(--crm-t);
        }
        .crm-contacts-item:hover { border-color: var(--accent-border); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
        .crm-contacts-item.selected { border-color: var(--accent); background: var(--accent-subtle); }
        .crm-contacts-item.crm-dragging { opacity: .55; }
        .crm-contacts-item .chat-item-corner-network { width: 30px; height: 30px; padding: 0 3px 3px 0; }
        .crm-contacts-item .chat-item-corner-network i { font-size: 11px; }
        html.light-theme .crm-contacts-item { background: #ffffff; border-color: #dbe3eb; }
        html.light-theme .crm-contacts-item:hover { box-shadow: 0 6px 16px rgba(15, 23, 42, .08); }
        html.light-theme .crm-contacts-item.selected { background: rgba(0, 168, 132, .08); border-color: rgba(0, 168, 132, .55); }
        .crm-contact-avatar {
            position: relative; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
            display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--text-main);
            background: linear-gradient(135deg, rgba(0, 168, 132, .28), rgba(56, 189, 248, .22)); border: 1px solid var(--crm-line);
        }
        .crm-contact-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
        .crm-contact-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-right: 22px; /* folga do triângulo */ }
        .crm-contact-top,
        .crm-contact-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
        .crm-contact-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .crm-contact-time { flex-shrink: 0; font-size: 10.5px; color: var(--crm-muted); font-variant-numeric: tabular-nums; }
        .crm-contact-sub { flex: 1; min-width: 0; font-size: 11.5px; line-height: 1.3; color: var(--crm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .crm-contact-stage {
            flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; max-width: 46%; font-size: 10.5px; font-weight: 600; color: var(--crm-muted);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .crm-contact-stage-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
        .crm-contacts-item.selected .crm-contact-time,
        .crm-contacts-item.selected .crm-contact-stage { color: var(--text-main); }

        /* Caixa de seleção: some até o hover (ou até estar marcada / em modo lote),
           no canto do avatar — sem empurrar o conteúdo quando aparece. */
        .crm-select-check {
            position: absolute; left: 8px; top: 8px; z-index: 3; width: 20px; height: 20px; border-radius: 6px;
            border: 1px solid var(--crm-line); background: var(--crm-surface); color: var(--text-main);
            display: inline-flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; opacity: 0; transform: scale(.85);
            box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
            transition: opacity var(--crm-t), transform var(--crm-t), background var(--crm-t), border-color var(--crm-t);
        }
        .crm-contacts-item:hover .crm-select-check,
        .crm-card:hover .crm-select-check,
        .crm-select-check.active,
        body.crm-bulk-mode .crm-select-check { opacity: 1; transform: scale(1); }
        .crm-select-check.active { background: #2563eb; border-color: #2563eb; color: #ffffff; }
        .crm-card.crm-multi-selected,
        .crm-contacts-item.crm-multi-selected { border-color: rgba(37, 99, 235, .7); box-shadow: 0 0 0 2px rgba(37, 99, 235, .18); }
        .crm-bulk-toolbar {
            display: none; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 4px; font-size: 11.5px;
            border: 1px solid rgba(37, 99, 235, .3); border-radius: var(--crm-r-item); background: rgba(37, 99, 235, .10); color: var(--text-main);
        }
        .crm-bulk-toolbar.active { display: flex; }
        .crm-bulk-toolbar strong { margin-right: auto; font-size: 12px; }

        /* ── Faixa de números do funil ─────────────────────────────────────── */
        .crm-stats-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-shrink: 0; padding: 0 0 10px; }
        .crm-stat-chip {
            display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; box-sizing: border-box; border-radius: 999px; cursor: pointer; user-select: none;
            border: 1px solid var(--crm-line); background: var(--bg-input); color: var(--crm-muted); font-size: 11.5px; font-weight: 600;
            transition: border-color var(--crm-t), background var(--crm-t), color var(--crm-t);
        }
        .crm-stat-chip strong { font-size: 12px; font-weight: 800; color: var(--text-main); font-variant-numeric: tabular-nums; }
        .crm-stat-chip:hover { border-color: var(--accent-border); color: var(--text-main); }
        .crm-stat-chip--alert { border-color: rgba(239, 68, 68, .35); background: var(--crm-hot-bg); color: var(--crm-hot); }
        .crm-stat-chip--alert strong { color: var(--crm-hot); }
        .crm-stat-chip--hot { border-color: rgba(245, 158, 11, .35); background: var(--crm-warm-bg); color: var(--crm-warm); }
        .crm-stat-chip--hot strong { color: var(--crm-warm); }
        .crm-stat-chip--ok { border-color: var(--accent-border); background: var(--crm-score-bg); color: var(--crm-score); }
        .crm-stat-chip--ok strong { color: var(--crm-score); }
        html.light-theme .crm-stat-chip { background: #ffffff; }

        /* ── Kanban ────────────────────────────────────────────────────────── */
        .crm-kanban-board {
            flex: 1; display: flex; gap: 12px; align-items: stretch; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 8px;
            overscroll-behavior: contain; scroll-behavior: smooth;
        }
        .kanban-column {
            position: relative; display: flex; flex-direction: column; flex: 0 0 300px; min-width: 300px; max-width: 340px; max-height: 100%; overflow: hidden;
            background: var(--crm-column); border: 1px solid var(--crm-line); border-radius: var(--crm-r-panel);
            transition: border-color var(--crm-t), box-shadow var(--crm-t);
        }
        .kanban-column::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--stage-accent, var(--accent)); pointer-events: none; }
        .kanban-column.crm-drag-over { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
        .kanban-column.crm-drop-success { animation: crmStageDropPulse .5s ease; }
        .kanban-column.crm-stage-reorder-target { border-color: var(--accent); }
        .kanban-column.crm-stage-reordering { opacity: .75; }
        html.light-theme .kanban-column { background: #f3f5f8; border-color: #dbe3eb; }

        .crm-column-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; padding: 14px 12px 10px 14px; }
        .crm-column-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
        .crm-stage-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-accent, var(--accent)) 22%, transparent); }
        .crm-column-title-text { min-width: 0; }
        .crm-column-name { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; color: var(--text-main); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .crm-column-step { font-size: 10.5px; color: var(--crm-muted); margin-top: 2px; }
        .crm-column-header-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
        .crm-column-counter {
            display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 8px; box-sizing: border-box; margin-right: 4px;
            border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--text-main); font-variant-numeric: tabular-nums;
            background: color-mix(in srgb, var(--stage-accent, var(--accent)) 22%, transparent);
        }
        .crm-stage-menu-button,
        .crm-stage-drag-handle {
            width: 26px; height: 26px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--crm-muted);
            display: inline-flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; opacity: .55;
            transition: opacity var(--crm-t), background var(--crm-t), border-color var(--crm-t), color var(--crm-t);
        }
        .crm-stage-drag-handle { cursor: grab; }
        .crm-stage-drag-handle:active { cursor: grabbing; }
        .crm-column-header:hover .crm-stage-menu-button,
        .crm-column-header:hover .crm-stage-drag-handle,
        .crm-stage-menu-button:focus-visible,
        .crm-stage-drag-handle:focus-visible { opacity: 1; }
        .crm-stage-menu-button:hover,
        .crm-stage-drag-handle:hover { background: var(--accent-subtle); border-color: var(--accent-border); color: var(--text-main); }

        .crm-card-list {
            flex: 1; min-height: 80px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; padding: 2px 10px 12px;
            transition: background var(--crm-t), box-shadow var(--crm-t);
        }
        .crm-card-list.crm-drop-ready { background: var(--accent-subtle); box-shadow: inset 0 0 0 1px var(--accent-border); border-radius: 0 0 var(--crm-r-panel) var(--crm-r-panel); }
        .crm-column-empty {
            margin: 4px 0; padding: 22px 14px; border-radius: var(--crm-r-item); border: 1px dashed var(--crm-line); color: var(--crm-muted);
            font-size: 11.5px; line-height: 1.5; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px;
        }
        .crm-column-empty i { font-size: 18px; opacity: .55; }

        /* ── Card do lead ───────────────────────────────────────────────────── */
        .crm-card {
            position: relative; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; overflow: hidden; cursor: grab; box-sizing: border-box;
            padding: 12px 12px 10px 14px; border: 1px solid var(--crm-line); border-radius: var(--crm-r-item); background: var(--crm-surface); color: var(--text-main);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
            transition: border-color var(--crm-t), transform var(--crm-t), box-shadow var(--crm-t), background var(--crm-t);
        }
        .crm-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--stage-accent, var(--accent)); }
        .crm-card:hover { border-color: var(--accent-border); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
        .crm-card:active { cursor: grabbing; }
        .crm-card.crm-dragging { opacity: .7; border-color: var(--accent); }
        .crm-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-subtle); }
        .crm-card.crm-card-pop { animation: crmCardPop .35s ease; }
        html.light-theme .crm-card { background: #ffffff; border-color: #dbe3eb; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
        html.light-theme .crm-card:hover { box-shadow: 0 8px 20px rgba(15, 23, 42, .10); }
        .crm-card .crm-select-check { left: auto; right: 8px; top: 8px; }

        .crm-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
        .crm-avatar-badge {
            position: relative; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
            font-size: 11.5px; font-weight: 700; color: var(--text-main); background: linear-gradient(135deg, rgba(0, 168, 132, .28), rgba(56, 189, 248, .22)); border: 1px solid var(--crm-line);
        }
        .crm-avatar-badge img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; border-radius: inherit; }
        /* selo da rede no canto do avatar — mesma cor do triângulo da lista */
        .crm-avatar-net {
            position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
            color: #ffffff; font-size: 9px; border: 2px solid var(--crm-surface); box-sizing: border-box; background: #607d8b;
        }
        html.light-theme .crm-avatar-net { border-color: #ffffff; }
        .crm-avatar-net.is-whatsapp { background: #25d366; }
        .crm-avatar-net.is-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
        .crm-avatar-net.is-messenger { background: #0084ff; }
        .crm-avatar-net.is-bootcamp { background: #f59e0b; }
        .crm-card-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
        .crm-card-title-compact { font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .crm-card-sub { font-size: 11px; line-height: 1.3; color: var(--crm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .crm-score-pill {
            flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 7px; box-sizing: border-box; margin-right: 26px; /* folga da caixa de seleção */
            border-radius: 999px; border: 1px solid var(--accent-border); background: var(--crm-score-bg); color: var(--crm-score); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
        }
        .crm-card-snippet-compact {
            font-size: 12px; line-height: 1.45; color: var(--crm-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 0;
        }
        .crm-card-footer-compact { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--crm-line); }
        .crm-card-time { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--crm-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
        .crm-card-time i { font-size: 10px; }
        .crm-temp-chip {
            display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; box-sizing: border-box; border-radius: 999px; font-size: 10.5px; font-weight: 700;
            border: 1px solid transparent; white-space: nowrap;
        }
        .crm-temp-chip i { font-size: 9.5px; }
        .crm-temp-chip.is-quente { color: var(--crm-hot); background: var(--crm-hot-bg); border-color: rgba(239, 68, 68, .28); }
        .crm-temp-chip.is-morno { color: var(--crm-warm); background: var(--crm-warm-bg); border-color: rgba(245, 158, 11, .28); }
        .crm-temp-chip.is-frio { color: var(--crm-cold); background: var(--crm-cold-bg); border-color: rgba(59, 130, 246, .28); }
        .crm-card-actions-compact { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
        .crm-btn-chat {
            display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; box-sizing: border-box; border: 0; border-radius: var(--crm-r-btn); cursor: pointer;
            background: #00806a; color: #ffffff; font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1; transition: background var(--crm-t), transform var(--crm-t);
        }
        .crm-btn-chat i { font-size: 11px; }
        .crm-btn-chat:hover { background: #006d5a; transform: translateY(-1px); }

        /* ── Rolagem ───────────────────────────────────────────────────────── */
        .crm-kanban-board::-webkit-scrollbar, .crm-card-list::-webkit-scrollbar, .crm-contacts-list::-webkit-scrollbar { width: 6px; height: 8px; }
        .crm-kanban-board::-webkit-scrollbar-track, .crm-card-list::-webkit-scrollbar-track, .crm-contacts-list::-webkit-scrollbar-track { background: transparent; }
        .crm-kanban-board::-webkit-scrollbar-thumb, .crm-card-list::-webkit-scrollbar-thumb, .crm-contacts-list::-webkit-scrollbar-thumb { background: rgba(127, 127, 127, .35); border-radius: 999px; }
        .crm-kanban-board::-webkit-scrollbar-thumb:hover, .crm-card-list::-webkit-scrollbar-thumb:hover, .crm-contacts-list::-webkit-scrollbar-thumb:hover { background: var(--accent); }

        @media (max-width: 1440px) {
            .crm-shell { grid-template-columns: 324px minmax(0, 1fr); }
        }
        @media (max-width: 1180px) {
            .crm-shell { grid-template-columns: 300px minmax(0, 1fr); }
            .kanban-column { flex-basis: 280px; min-width: 280px; }
        }

        /* Ficha do Lead UI Improvements */
        .crm-ficha-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
            gap: 16px;
            text-align: left;
            color: var(--text-main);
        }
        .crm-ficha-right-col {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .crm-ficha-label {
            font-size: 11px;
            color: var(--text-secondary);
            display: block;
            margin-bottom: 4px;
            font-weight: 500;
        }
        /* Selo do canal + rótulo na mesma linha. Era `style=` inline no markup: a
           regra da casa é classe, porque inline vence qualquer regra de tema. */
        /* `.crm-detail-item span { display: block }` — SELETOR DE TIPO — vence uma
           classe solta (0,1,1 contra 0,1,0) e empilhava o selo do canal em cima do
           rótulo. É a MESMA armadilha do `.crm-followup-item span` que já quebrou
           "Pendente" ao meio em 23/08. Por isso o seletor aqui é qualificado. */
        .crm-detail-item .crm-ficha-canal,
        .crm-ficha-canal {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        /* Temperatura do lead no chip do resumo. Estas classes foram usadas no
           markup como se já existissem — não existiam, e por isso o chip saía sem
           cor nenhuma. Mesmas cores do ícone de temperatura do card do funil. */
        .crm-chip--hot {
            background: rgba(239, 68, 68, 0.14);
            border-color: rgba(239, 68, 68, 0.35);
            color: #ef4444;
        }
        .crm-chip--warm {
            background: rgba(245, 158, 11, 0.14);
            border-color: rgba(245, 158, 11, 0.35);
            color: #f59e0b;
        }
        .crm-chip--cold {
            background: rgba(59, 130, 246, 0.14);
            border-color: rgba(59, 130, 246, 0.35);
            color: #3b82f6;
        }
        /* No claro as três precisam escurecer: sobre fundo claro o tom original
           fica abaixo do mínimo de 4,5:1. */
        html.light-theme .crm-chip--hot { color: #b91c1c; }
        html.light-theme .crm-chip--warm { color: #b45309; }
        html.light-theme .crm-chip--cold { color: #1d4ed8; }
        /* O ícone dentro do chip precisa de respiro do texto e de herdar a cor. */
        .crm-chip i {
            margin-right: 4px;
            color: inherit;
        }
        .crm-ficha-field-row {
            display: flex;
            gap: 12px;
            margin-bottom: 16px;
        }
        .crm-ficha-field-col {
            flex: 1;
        }
        .crm-ficha-field {
            width: 100%;
            margin-bottom: 16px;
            background: var(--bg-sidebar);
            color: var(--text-main);
            border: 1px solid var(--border);
            border-radius: 8px;
            box-sizing: border-box;
            height: 36px;
            padding: 0 12px;
            font-size: 13px;
            outline: none;
            transition: border-color 0.2s;
        }
        /* `appearance: none` sozinho APAGA a seta do dropdown e o select fica
           indistinguível de um campo de texto — o usuário não descobre que aquilo
           abre. A seta é reposta com o mesmo desenho que `.itg-select`
           (b6-api-webhooks.css) já usa no painel: dois gradientes em
           `currentColor`, que acompanham o tema sozinhos. (26/08/2026) */
        select.crm-ficha-field {
            appearance: none;
            -webkit-appearance: none;
            cursor: pointer;
            padding-right: 32px;
        }
        /* A seta é desenhada NO CONTÊINER, não no campo — e isso é de propósito.
           `html.dark-theme .crm-swal-html .swal2-input, …` (mais acima neste mesmo
           arquivo) declara `background-image: initial !important` para todo campo
           dentro de diálogo do CRM, com 3 classes de especificidade: um
           `background-image` no select perde essa disputa mesmo com `!important`
           (medido). Pelo contêiner não há disputa nenhuma. A seta herda
           `currentColor`, então acompanha os dois temas sozinha. */
        .crm-ficha-field-col:has(> select.crm-ficha-field) {
            position: relative;
        }
        .crm-ficha-field-col:has(> select.crm-ficha-field)::after {
            content: '';
            position: absolute;
            right: 13px;
            /* 27px = centro vertical do campo. O campo tem 36px e `margin: 6px 0
               16px`, então seu centro fica a 30px do fundo do contêiner; a seta
               tem 6px, logo 30 − 3. Medido na tela, não estimado. */
            bottom: 27px;
            width: 9px;
            height: 6px;
            background: currentColor;
            clip-path: polygon(0 0, 100% 0, 50% 100%);
            opacity: 0.55;
            pointer-events: none;
        }
        textarea.crm-ficha-field {
            height: 120px;
            padding: 8px 12px;
            resize: vertical;
        }
        .crm-ficha-field:focus {
            border-color: var(--accent);
        }
        .crm-ficha-field[readonly] {
            opacity: 0.7;
            cursor: not-allowed;
        }
        .crm-ficha-snippet {
            color: var(--text-secondary);
            font-size: 12px;
            line-height: 1.65;
        }
        .crm-ficha-followup-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        .crm-ficha-followup-header h4 {
            margin: 0;
        }
        .crm-help-text {
            cursor: help;
        }
        .crm-error-text {
            color: var(--text-secondary);
            font-weight: bold;
        }
        .crm-copy-btn {
            margin-left: 4px;
            width: 16px;
            height: 16px;
            font-size: 9px;
            opacity: 0.6;
            vertical-align: middle;
        }
        .crm-copy-btn:hover {
            opacity: 1;
        }

        /* A 1440 px este bloco ESPREMIA a coluna de contatos para 250 px (medido em
           02/09/2026: era ele, escondido num @media, que cortava nome e etapa nas
           linhas — o `.crm-shell` de cima dizia 344 e a tela mostrava 250). Hoje a
           largura por faixa mora no bloco CRM v2; aqui fica só o painel de detalhe. */
        @media (max-width: 1440px) {
            .crm-detail-panel {
                display: none;
            }
        }
        @media (max-width: 980px) {
            .crm-workspace { padding: 10px; }
            .crm-shell { grid-template-columns: 1fr; gap: 10px; }
            .crm-contacts-panel { order: 1; max-height: 42vh; }
            .crm-board-panel { order: 2; min-height: 70vh; }
            .kanban-column { min-width: 240px; }
            .crm-card .crm-select-check { opacity: 1; transform: scale(1); }
        }
    
        /* Coluna do esqueleto do quadro comercial: mesma largura e mesmo respiro
           da `.kanban-column` de verdade, para o quadro não "pular" quando os
           dados chegam. Só forma — cor e brilho vêm do componente `.sk` do
           núcleo. (26/08/2026) */
        .crm-sk-coluna {
            min-width: 280px;
            max-width: none;
            flex: 1 1 0px;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: var(--bg-sidebar);
        }
        .crm-sk-coluna-topo {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }