/* tokens.css — ÚNICO arquivo a editar para re-tematizar o Perfect CRM. */
:root {
    /* Marca */
    --pcrm-brand-strong: #0b73ad;
    /* brand-soft mistura com a SUPERFÍCIE (não #fff) p/ acompanhar o dark automaticamente */
    --pcrm-brand-soft: color-mix(in srgb, var(--brand-color) 12%, var(--pcrm-surface));
    --pcrm-brand-ring: color-mix(in srgb, var(--brand-color) 16%, transparent);

    /* Texto */
    --pcrm-text: #0f172a;
    --pcrm-text-strong: #334155;   /* slate-700: texto secundário forte / label (entre text e muted) */
    --pcrm-text-muted: #64748b;
    --pcrm-text-subtle: #94a3b8;
    --pcrm-text-on-brand: #ffffff;  /* texto branco SOBRE cor de marca/sólida (≠ surface) */

    /* Superfícies */
    --pcrm-surface: #ffffff;
    --pcrm-surface-hover: #f8fafc;
    --pcrm-surface-sunken: #f1f5f9;

    /* Bordas */
    --pcrm-border: #e2e8f0;
    --pcrm-border-strong: #cbd5e1;

    /* Perigo / Sucesso / Info */
    --pcrm-danger: #dc2626;
    --pcrm-danger-strong: #b91c1c;
    --pcrm-danger-soft: #fef2f2;
    --pcrm-danger-tint: #fee2e2;    /* red-100: fundo de erro um passo acima do soft */
    --pcrm-danger-border: #fecaca;  /* red-200: borda de estado de erro */
    --pcrm-success: #16a34a;
    --pcrm-success-strong: #15803d; /* green-700: hover/ação forte de sucesso */
    --pcrm-success-soft: #dcfce7;
    --pcrm-info: #2563eb;
    --pcrm-info-strong: #1d4ed8;    /* blue-700: hover/ação forte de info */
    --pcrm-info-soft: #eff6ff;
    --pcrm-warning: #b45309;        /* amber-700: texto/accent de aviso */
    --pcrm-warning-soft: #fffbeb;   /* amber-50: fundo de caixa de aviso */

    /* Card de mensagem (azul-bolha do preview de roteiro/scripts) */
    --pcrm-msg-card-bg: #eaf4ff;
    --pcrm-msg-card-border: #dbeafe;

    /* Paleta categórica de data-viz (gráficos). Canônica do DS; a adoção (wiring do
       ECharts a estes tokens) é projeto à parte — aqui só definimos a paleta. */
    --pcrm-chart-1: #0b73ad;
    --pcrm-chart-2: #16a34a;
    --pcrm-chart-3: #dc2626;
    --pcrm-chart-4: #f59e0b;
    --pcrm-chart-5: #0ea5e9;
    --pcrm-chart-6: #8b5cf6;
    --pcrm-chart-7: #db2777;
    --pcrm-chart-8: #0d9488;

    /* Raios */
    --pcrm-radius-sm: 6px;
    --pcrm-radius: 8px;
    --pcrm-radius-md: 10px;     /* degrau entre radius (8) e radius-lg (12): bulk-panels */
    --pcrm-radius-lg: 12px;
    --pcrm-radius-pill: 999px;

    /* Sombras */
    --pcrm-shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 18px rgba(15, 23, 42, .08);
    --pcrm-shadow-dropdown: 0 18px 48px rgba(15, 23, 42, .18);
    --pcrm-shadow-modal: 0 24px 60px rgba(15, 23, 42, .22);

    /* Tipografia */
    --pcrm-font: 'Poppins', system-ui, -apple-system, sans-serif;
    --pcrm-text-xs: 12px;
    --pcrm-text-base: 14px;
    --pcrm-text-lg: 16px;
    --pcrm-text-xl: 20px;
    --pcrm-text-2xl: 24px;
    --pcrm-text-3xl: 30px;

    /* Peso (canônico — ver TYPOGRAPHY-SYSTEM.md) */
    --pcrm-fw-regular:  400;
    --pcrm-fw-medium:   500;
    --pcrm-fw-semibold: 600;
    --pcrm-fw-bold:     700;

    /* Line-height */
    --pcrm-lh-tight:  1.2;
    --pcrm-lh-snug:   1.4;
    --pcrm-lh-normal: 1.5;

    /* Espaçamento (8pt grid) */
    --pcrm-space-0_5: 2px;
    --pcrm-space-1:   4px;
    --pcrm-space-1_5: 6px;
    --pcrm-space-2:   8px;
    --pcrm-space-3:   12px;
    --pcrm-space-4:   16px;
    --pcrm-space-5:   20px;
    --pcrm-space-6:   24px;
    --pcrm-space-8:   32px;
    --pcrm-space-10:  40px;
    --pcrm-space-12:  48px;
    --pcrm-space-16:  64px;
    --pcrm-space-px:  1px;    /* hairline: divisores, gaps de 1px */

    /* Alturas de controle (tabela única: sm / md-padrão / lg) — grid 8pt */
    --pcrm-control-h-sm: 32px;
    --pcrm-control-h-md: 40px;
    --pcrm-control-h-lg: 48px;

    /* z-index unificado dos menus/dropdowns teleportados pro body */
    --pcrm-z-dropdown: 120020;
    --pcrm-z-bulk: 120050;           /* barra flutuante de seleção em massa (acima dos dropdowns) */

    /* Breakpoints (Tailwind-style). REFERÊNCIA canônica: CSS não aceita var() em
       @media/@container, então as queries usam os LITERAIS abaixo — e SOMENTE eles
       (640/768/1024/1280/1536). Mobile-first (min-width); container-query no nível de
       componente, @media no nível de página. */
    --pcrm-bp-sm: 640px;
    --pcrm-bp-md: 768px;
    --pcrm-bp-lg: 1024px;
    --pcrm-bp-xl: 1280px;
    --pcrm-bp-2xl: 1536px;

    /* Seta dos <select> nativos (cor = text-muted; var() não entra em url()) */
    --pcrm-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

    /* Ícone do seletor de data (cor = text) */
    --pcrm-cal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16'/%3E%3C/svg%3E");

    /* X do botão "limpar" do input[type=search]: SÓ geometria — usado como
       máscara, a cor vem do background-color (token), então não precisa de
       variante dark e não há cor cravada no SVG. */
    --pcrm-clear-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

.dark {
    --pcrm-text: #f8fafc;
    --pcrm-text-strong: #cbd5e1;   /* slate-300: espelho do strong no dark */
    --pcrm-text-muted: #94a3b8;
    --pcrm-text-subtle: #64748b;
    --pcrm-surface: #111827;
    --pcrm-surface-hover: #1f2937;
    --pcrm-surface-sunken: #0f172a;
    --pcrm-border: #1f2937;
    --pcrm-border-strong: #334155;
    --pcrm-page-bg: #0b1120;
    --pcrm-text-on-brand: #ffffff;  /* branco sobre marca segue branco no dark */
    --pcrm-danger-soft: #2a1416;
    --pcrm-danger-tint: #3a1a1d;
    --pcrm-danger-border: #5a2a2e;
    --pcrm-success-soft: #102a18;
    --pcrm-success-strong: #4ade80; /* green-400: legível no dark */
    --pcrm-info-soft: #11203a;
    --pcrm-info-strong: #60a5fa;    /* blue-400: legível no dark */
    --pcrm-warning: #fbbf24;        /* amber-400: aviso legível no dark */
    --pcrm-warning-soft: #2a2008;
    --pcrm-msg-card-bg: #11203a;
    --pcrm-msg-card-border: #1e3a5f;

    /* Paleta de data-viz no escuro — tons claros p/ contraste */
    --pcrm-chart-1: #38a3d6;
    --pcrm-chart-2: #22c55e;
    --pcrm-chart-3: #f87171;
    --pcrm-chart-4: #fbbf24;
    --pcrm-chart-5: #38bdf8;
    --pcrm-chart-6: #a78bfa;
    --pcrm-chart-7: #f472b6;
    --pcrm-chart-8: #2dd4bf;
    --pcrm-shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 18px rgba(0, 0, 0, .35);
    --pcrm-shadow-dropdown: 0 18px 48px rgba(0, 0, 0, .42);
    --pcrm-shadow-modal: 0 24px 60px rgba(0, 0, 0, .5);

    /* Setas na cor do texto do modo escuro */
    --pcrm-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    --pcrm-cal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f8fafc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16'/%3E%3C/svg%3E");
}

/* base.css — defaults globais. Não contém valores literais: só tokens. */

/* Fonte do produto (Poppins) no CRM INTEIRO — não só dentro do shell.
   Modais/overlays injetados fora do #app/.pcrm-app-shell herdavam a
   font-sans (ui-sans-serif) do preflight do Tailwind do core; agora tudo
   herda do token. Os controles de formulário entram explícitos porque não
   herdam font-family por padrão. Ícones (icomoon, font-family !important) e
   os usos monospace pontuais (código/URL) têm seletor mais específico e
   continuam intactos. */
body,
input,
button,
select,
textarea {
    font-family: var(--pcrm-font);
}

/* ============================================================
   NORMALIZAÇÕES GLOBAIS do design system — fonte única.
============================================================ */

/* Placeholder: cor padrão (catch-all) pra todo input/textarea do CRM.
   A bagunça de #9ca3af / #94a3b8 / #64748b cravados por tela foi
   normalizada — telas usam o token text-subtle. */
input::placeholder,
textarea::placeholder {
    color: var(--pcrm-text-subtle);
    opacity: 1;
}

/* Disabled consistente em qualquer controle. */
.pcrm-app-shell input:disabled,
.pcrm-app-shell select:disabled,
.pcrm-app-shell textarea:disabled,
.pcrm-app-shell button:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.pcrm-scroll-area {
    scrollbar-width: thin;
    scrollbar-color: var(--pcrm-border-strong) transparent;
}
.pcrm-scroll-area::-webkit-scrollbar { width: 8px; height: 8px; }
.pcrm-scroll-area::-webkit-scrollbar-thumb {
    background: var(--pcrm-border-strong);
    border-radius: var(--pcrm-radius-pill);
}
.pcrm-scroll-area::-webkit-scrollbar-track { background: transparent; }

/* Botão "limpar" (X) do input[type=search]: o browser desenha o X nativo
   com cor própria (accent do SO → aquele azul degradê). Trocamos por um X
   na cor do texto do CRM, via máscara (a cor vem do token, não do SVG).
   Catch-all global como o placeholder acima — vale pra TODA busca do CRM
   (atendimento, kanban, toolbars, integrações…), inclusive em overlays
   injetados fora do #app. Some quando o campo está vazio, igual ao nativo. */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin-left: var(--pcrm-space-2);
    background-color: var(--pcrm-text-muted);
    -webkit-mask: var(--pcrm-clear-icon) center / contain no-repeat;
    mask: var(--pcrm-clear-icon) center / contain no-repeat;
    cursor: pointer;
    transition: background-color 120ms ease;
}
input[type="search"]:hover::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-cancel-button:hover {
    background-color: var(--pcrm-text);
}

/* components/activity-feed.css — A MÃE: chassis compartilhado das timelines de atividade.
 *
 * O feed de notas/arquivos/histórico aparece no detalhe do LEAD e do CONTATO. Os dois painéis
 * eram clones em estrutura E CSS (.pcrm-lead-activity-* ≡ .pcrm-contact-activity-*). Aqui mora o
 * comum, tokenizado e dark-aware: abas, conteúdo, lista, bolha de ícone, card da linha e o chrome
 * do painel (que carregava border-gray/bg-white/dark:bg-gray no markup — dark:* = NO-OP no bundle
 * purgado). Cada tela guarda só o que é exclusivo (sizing via --lead/--contact + aba "Sobre"). */

.pcrm-activity-feed {
    display: flex;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--pcrm-border-strong);
    border-radius: var(--pcrm-radius);
    background: var(--pcrm-surface);
}

.pcrm-activity-feed__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pcrm-space-2);
    border-bottom: 1px solid var(--pcrm-border-strong);
}

.dark .pcrm-activity-feed__tabs {
    border-color: var(--pcrm-border);
}

.pcrm-activity-feed__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--pcrm-space-2);
    cursor: pointer;
    padding: var(--pcrm-space-3) var(--pcrm-space-3);
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-bold);
    line-height: 1;
}

.pcrm-activity-feed__tab-icon {
    flex: 0 0 auto;
    font-size: var(--pcrm-text-lg);
    line-height: 1;
}

.pcrm-activity-feed__tab--active {
    border-bottom: 2px solid var(--brand-color);
    color: var(--brand-color);
}

.pcrm-activity-feed__content {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}

.pcrm-activity-feed__content-view {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    animation: pcrm-activity-feed-fade-in 160ms ease both;
}

@keyframes pcrm-activity-feed-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pcrm-activity-feed__content-view {
        animation: none;
    }
}

.pcrm-activity-feed__list {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
}

.pcrm-activity-feed__list--empty {
    min-height: 0;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.pcrm-activity-feed__icon {
    display: flex;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: var(--pcrm-control-h-sm);
    margin-top: var(--pcrm-space-2);
    align-items: center;
    justify-content: center;
    border-radius: var(--pcrm-radius-pill);
    font-size: var(--pcrm-text-xl);
}

.pcrm-activity-feed__body {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--pcrm-space-2);
    border-radius: var(--pcrm-radius);
    padding: var(--pcrm-space-4);
}

.pcrm-activity-feed__body--alt {
    background: var(--pcrm-surface-sunken);
}

.pcrm-activity-feed__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pcrm-space-1);
    color: var(--pcrm-text);
    font-weight: var(--pcrm-fw-medium);
}

.pcrm-activity-feed__comment {
    color: var(--pcrm-text);
    word-break: break-all;
}

@media (max-width: 1023px) {
    .pcrm-activity-feed__list--empty {
        min-height: 360px;
    }
}

/* components/activity-icon.css — A MÃE: tons de cor do badge de ícone das timelines de atividade.
 *
 * As bolhas de ícone dos feeds (nota/arquivo/sistema, no detalhe do lead E do contato, além do
 * feed legado) carregavam a cor via Tailwind (bg-X-200 text-X-900 dark:bg-X-400/20 dark:!text-X-200).
 * No bundle purgado do admin essas variantes são NO-OP → no dark a bolha perdia o fundo e o texto
 * ficava ilegível. Aqui cada tom semântico vira UM mixin de cor (light + dark-aware), aplicado ao
 * host do badge (.pcrm-activity-feed__icon / .pcrm-activity-feedback-icon). Padrão de cor idêntico
 * ao que activities-feedback.css já usava para 4 ícones: light sólido, dark = rgba(cor-400, .22) +
 * texto cor-200. Cores decorativas de categoria (sem token de marca equivalente). */

.pcrm-activity-ic--emerald { background: #a7f3d0; color: #064e3b; }
.dark .pcrm-activity-ic--emerald { background: rgba(52, 211, 153, 0.22); color: #a7f3d0; }

.pcrm-activity-ic--cyan { background: #a5f3fc; color: #164e63; }
.dark .pcrm-activity-ic--cyan { background: rgba(34, 211, 238, 0.22); color: #a5f3fc; }

.pcrm-activity-ic--blue { background: #bfdbfe; color: #1e3a8a; }
.dark .pcrm-activity-ic--blue { background: rgba(96, 165, 250, 0.22); color: #bfdbfe; }

.pcrm-activity-ic--slate { background: #e2e8f0; color: #1e293b; }
.dark .pcrm-activity-ic--slate { background: #334155; color: #f1f5f9; }

.pcrm-activity-ic--indigo { background: #c7d2fe; color: #312e81; }
.dark .pcrm-activity-ic--indigo { background: rgba(129, 140, 248, 0.22); color: #c7d2fe; }

.pcrm-activity-ic--violet { background: #ddd6fe; color: #4c1d95; }
.dark .pcrm-activity-ic--violet { background: rgba(167, 139, 250, 0.22); color: #ddd6fe; }

.pcrm-activity-ic--sky { background: #bae6fd; color: #0c4a6e; }
.dark .pcrm-activity-ic--sky { background: rgba(56, 189, 248, 0.22); color: #bae6fd; }

.pcrm-activity-ic--teal { background: #99f6e4; color: #134e4a; }
.dark .pcrm-activity-ic--teal { background: rgba(45, 212, 191, 0.22); color: #99f6e4; }

.pcrm-activity-ic--rose { background: #fecdd3; color: #881337; }
.dark .pcrm-activity-ic--rose { background: rgba(251, 113, 133, 0.22); color: #fecdd3; }

.pcrm-activity-ic--lime { background: #d9f99d; color: #365314; }
.dark .pcrm-activity-ic--lime { background: rgba(163, 230, 53, 0.22); color: #d9f99d; }

.pcrm-activity-ic--amber { background: #fde68a; color: #78350f; }
.dark .pcrm-activity-ic--amber { background: rgba(251, 191, 36, 0.22); color: #fde68a; }

.pcrm-activity-ic--orange { background: #fed7aa; color: #7c2d12; }
.dark .pcrm-activity-ic--orange { background: rgba(251, 146, 60, 0.22); color: #fed7aa; }

.pcrm-activity-ic--yellow { background: #fef08a; color: #713f12; }
.dark .pcrm-activity-ic--yellow { background: rgba(250, 204, 21, 0.22); color: #fef08a; }

/* components/alert-success.css — variante de sucesso da .pcrm-alert da mae.
 *
 * Extensao da .pcrm-alert (alert.css) num arquivo proprio (regra de nao-colisao
 * do sweep: nao editar components existentes). Mesmo padrao de --danger / --info:
 * fundo soft dark-aware via token, borda via color-mix. Substitui o bloco Tailwind
 * bespoke `border-green-200 bg-green-50 dark:border-green-900/60 dark:bg-green-950/30`
 * cujas variantes dark eram NO-OP no bundle purgado (caixa ficava verde-clara no dark).
 *
 * Uso: <div class="pcrm-alert pcrm-alert--success"><p class="pcrm-alert__text">...</p></div>
 */

.pcrm-alert--success {
    border-color: color-mix(in srgb, var(--pcrm-success) 26%, transparent);
    background: var(--pcrm-success-soft);
    color: var(--pcrm-success);
}

/* components/alert.css — caixa de alerta/aviso da mãe.
 *
 * Substitui o bloco Tailwind repetido 16x nos blades:
 *   rounded-lg border border-red-200 bg-red-50 px-4 py-4
 *   dark:border-red-900/60 dark:bg-red-950/30
 * cujas variantes dark:* (opacidade arbitrária) eram NO-OP no bundle purgado
 * → a caixa ficava vermelho-clara mesmo no dark mode. Tudo tokenizado
 * (var(--pcrm-danger*) já é light+dark via tokens.css).
 *
 * Uso: <div class="pcrm-alert pcrm-alert--danger">
 *        <p class="pcrm-alert__text">…</p>
 *      </div>
 */

.pcrm-alert {
    border-radius: var(--pcrm-radius-lg);
    border: 1px solid transparent;
    padding: var(--pcrm-space-4);
    font-size: var(--pcrm-text-base);
}

.pcrm-alert--danger {
    border-color: color-mix(in srgb, var(--pcrm-danger) 26%, transparent);
    background: var(--pcrm-danger-soft);
    color: var(--pcrm-danger);
}

.pcrm-alert--info {
    border-color: color-mix(in srgb, var(--pcrm-info) 26%, transparent);
    background: var(--pcrm-info-soft);
    color: var(--pcrm-info);
}

.pcrm-alert__text {
    margin: 0;
    text-align: center;
    font-size: var(--pcrm-text-base);
    line-height: var(--pcrm-lh-normal);
    color: inherit;
}

/* components/avatar.css — primitivo de avatar da mãe.
 *
 * Substitui o bloco Tailwind cravado e repetido nos previews
 * (`flex h-12 w-12 ... rounded-full border border-gray-200 bg-slate-100
 *   dark:border-gray-800 dark:bg-slate-900`), cujas variantes `dark:*` eram
 * no-op no bundle purgado do admin (avatar ficava claro no dark mode).
 * Tudo tokenizado (light + dark automáticos via var(--pcrm-*)).
 *
 * Uso: <div class="pcrm-avatar pcrm-avatar--md"><img class="pcrm-avatar__img" …>
 *      …ou… <span>IN</span></div>  (img quando há foto; span com iniciais senão). */

.pcrm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--pcrm-radius-full, 999px);
    border: 1px solid var(--pcrm-border);
    background: var(--pcrm-surface-sunken);
    color: var(--pcrm-text-muted);
    font-weight: var(--pcrm-fw-bold);
    line-height: 1;
}

/* iniciais como filho <span> (padrão div+span) — vence o text-slate-600/text-sm cravado
   por specificity e herda fonte/cor do avatar (o tamanho vem do modificador --sm/md/lg). */
.pcrm-avatar > span {
    font: inherit;
    color: inherit;
}

.pcrm-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* tamanhos (o font-size serve tanto o <span> filho quanto as iniciais como texto direto) */
.pcrm-avatar--xs { width: var(--pcrm-space-6); height: var(--pcrm-space-6); font-size: var(--pcrm-text-xs); }   /* 24px */
.pcrm-avatar--sm { width: var(--pcrm-space-8); height: var(--pcrm-space-8); font-size: var(--pcrm-text-xs); }   /* 32px */
.pcrm-avatar--md { width: var(--pcrm-space-12); height: var(--pcrm-space-12); font-size: var(--pcrm-text-base); } /* 48px */
.pcrm-avatar--lg { width: var(--pcrm-space-16); height: var(--pcrm-space-16); font-size: var(--pcrm-text-base); } /* 64px */

.pcrm-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--pcrm-space-1);
    padding: var(--pcrm-space-0_5) var(--pcrm-space-2);
    border-radius: var(--pcrm-radius-pill);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
    background: var(--pcrm-surface-sunken);
    color: var(--pcrm-text-muted);
}
.pcrm-badge--success {
    background: var(--pcrm-success-soft);
    color: var(--pcrm-success);
}
.pcrm-badge--danger {
    background: var(--pcrm-danger-soft);
    color: var(--pcrm-danger);
}
.pcrm-badge--neutral {
    background: var(--pcrm-surface-sunken);
    color: var(--pcrm-text-muted);
}

/* Bolinha de status (herda a cor do variant via currentColor). */
.pcrm-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--pcrm-radius-pill);
    background: currentColor;
}

/* Breadcrumb — trilha de navegação hierárquica. Token-only, dark-aware. */
.pcrm-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--pcrm-space-1);
    font-size: var(--pcrm-text-xs);
    color: var(--pcrm-text-muted);
}
.pcrm-breadcrumb__item {
    color: var(--pcrm-text-muted);
    text-decoration: none;
    font-weight: var(--pcrm-fw-medium);
    transition: color 120ms ease;
}
.pcrm-breadcrumb__item:hover { color: var(--brand-color); }
.pcrm-breadcrumb__sep {
    display: inline-flex;
    align-items: center;
    color: var(--pcrm-text-subtle);
}
.pcrm-breadcrumb__current {
    color: var(--pcrm-text);
    font-weight: var(--pcrm-fw-semibold);
}

.pcrm-bulk-panel {
    display: flex;
    align-items: center;
    gap: var(--pcrm-space-3);
    padding: var(--pcrm-space-3) var(--pcrm-space-4);
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius);
    background: var(--pcrm-surface);
    box-shadow: var(--pcrm-shadow-card);
}
.pcrm-bulk-panel__count {
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-semibold);
    color: var(--pcrm-text);
}
.pcrm-bulk-panel__divider {
    width: 1px;
    height: 20px;
    background: var(--pcrm-border);
    flex-shrink: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   Variante flutuante: barra de ação de seleção em massa, fixa no rodapé e na
   cor da marca (persons / organizations / kanban). A barra é brand-colorida
   nos dois temas (brand não troca no dark), então texto/chip/divider usam
   var(--pcrm-surface) fixo — branco-sobre-brand (como a .pcrm-btn--danger). Unifica as 3
   barras, que divergiam: kanban já era var(--pcrm-surface); persons/orgs usavam surface
   (texto escuro no dark) e agora ficam brancos no dark também.
   ─────────────────────────────────────────────────────────────────────────── */
.pcrm-bulk-panel--floating {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: var(--pcrm-z-bulk);
    max-width: calc(100vw - 24px);
    gap: var(--pcrm-space-3);
    padding: var(--pcrm-space-3) var(--pcrm-space-4);
    border: 0;
    border-radius: var(--pcrm-radius-lg);
    background: var(--brand-color);
    color: var(--pcrm-text-on-brand);
    box-shadow: 0 22px 54px color-mix(in srgb, var(--brand-color) 34%, transparent);
}

.pcrm-bulk-panel__close,
.pcrm-bulk-panel__action {
    display: inline-flex;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--pcrm-radius-lg);
    background: transparent;
    color: var(--pcrm-text-on-brand);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-bold);
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms ease;
}
.pcrm-bulk-panel__close { width: 38px; flex: 0 0 38px; }
.pcrm-bulk-panel__action { gap: var(--pcrm-space-2); padding: 0 var(--pcrm-space-3); white-space: nowrap; }
/* Ícone (glifo IcoMoon via .pcrm-ic-host) maior que o rótulo na ação. */
.pcrm-bulk-panel__action .pcrm-ic-host { font-size: var(--pcrm-text-lg); }

.pcrm-bulk-panel__close:hover,
.pcrm-bulk-panel__action:hover,
.pcrm-bulk-panel__action--active {
    background: color-mix(in srgb, #fff 13%, transparent);
    transform: translateY(-1px);
}

.pcrm-bulk-panel--floating .pcrm-bulk-panel__count {
    display: inline-flex;
    height: 34px;
    min-width: 38px;
    align-items: center;
    justify-content: center;
    border-radius: var(--pcrm-radius-lg);
    background: var(--pcrm-surface);
    color: var(--brand-color);
    font-size: var(--pcrm-text-lg);
    font-weight: var(--pcrm-fw-bold);
    padding: 0 var(--pcrm-space-3);
}

.pcrm-bulk-panel__summary {
    display: flex;
    min-width: 128px;
    flex-direction: column;
    gap: 1px;
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
    line-height: 1.2;
    text-transform: uppercase;
}
.pcrm-bulk-panel--lead .pcrm-bulk-panel__summary { min-width: 150px; }

.pcrm-bulk-panel__meta {
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
    opacity: .78;
    text-transform: none;
}

.pcrm-bulk-panel--floating .pcrm-bulk-panel__divider {
    height: 44px;
    margin: 0 var(--pcrm-space-1);
    background: color-mix(in srgb, #fff 22%, transparent);
}

@media (max-width: 768px) {
    .pcrm-bulk-panel--floating {
        width: calc(100vw - 20px);
        flex-wrap: wrap;
        justify-content: center;
        bottom: 10px;
    }
    .pcrm-bulk-panel--floating .pcrm-bulk-panel__summary { min-width: 120px; }
    .pcrm-bulk-panel--floating .pcrm-bulk-panel__action { width: 38px; padding: 0; }
    .pcrm-bulk-panel--floating .pcrm-bulk-panel__action span:last-child { display: none; }
}

/* Botão canônico — .pcrm-btn + variantes/tamanhos.
   Substitui os botões ad-hoc de cada tela (single-btn, migration-btn,
   about-danger, login-submit, etc). Tudo via tokens. */
.pcrm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pcrm-space-2);
    min-height: var(--pcrm-control-h-md);
    padding: 0 var(--pcrm-space-4);
    border: 1px solid transparent;
    border-radius: var(--pcrm-radius);
    font: var(--pcrm-fw-semibold) var(--pcrm-text-base)/1 var(--pcrm-font);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, opacity 140ms ease, transform 120ms ease;
}
.pcrm-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--pcrm-brand-ring); }
.pcrm-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Tamanhos */
.pcrm-btn--sm { min-height: var(--pcrm-control-h-sm); padding: 0 var(--pcrm-space-3); font-size: var(--pcrm-text-xs); }
.pcrm-btn--lg { min-height: var(--pcrm-control-h-lg); padding: 0 var(--pcrm-space-5); font-size: var(--pcrm-text-base); }
.pcrm-btn--icon { width: var(--pcrm-control-h-md); min-height: var(--pcrm-control-h-md); padding: 0; }
.pcrm-btn--block { width: 100%; }

/* Variantes semânticas */
.pcrm-btn--primary { background: var(--brand-color); border-color: var(--brand-color); color: var(--pcrm-text-on-brand); }
.pcrm-btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--brand-color) 86%, #fff); border-color: color-mix(in srgb, var(--brand-color) 86%, #fff); transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-color) 26%, transparent); }
.pcrm-btn--primary:active:not(:disabled) { background: color-mix(in srgb, var(--brand-color) 84%, #000); border-color: color-mix(in srgb, var(--brand-color) 84%, #000); }
.pcrm-btn--secondary { background: var(--pcrm-surface); border-color: var(--pcrm-border-strong); color: var(--pcrm-text); }
.pcrm-btn--secondary:hover:not(:disabled) { background: var(--pcrm-surface-hover); border-color: var(--pcrm-text-subtle); transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in srgb, var(--pcrm-text) 8%, transparent); }
.pcrm-btn--ghost { background: transparent; color: var(--pcrm-text-muted); }
.pcrm-btn--ghost:hover:not(:disabled) { background: var(--pcrm-surface-sunken); color: var(--pcrm-text); transform: translateY(-1px); }
.pcrm-btn--danger { background: var(--pcrm-danger); border-color: var(--pcrm-danger); color: var(--pcrm-text-on-brand); }
.pcrm-btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--pcrm-danger) 86%, #fff); border-color: color-mix(in srgb, var(--pcrm-danger) 86%, #fff); transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--pcrm-danger) 26%, transparent); }
.pcrm-btn--danger:active:not(:disabled) { background: color-mix(in srgb, var(--pcrm-danger) 84%, #000); border-color: color-mix(in srgb, var(--pcrm-danger) 84%, #000); }
/* Tonal da marca — fundo suave + texto na cor da marca (ação secundária com peso). */
.pcrm-btn--soft { background: color-mix(in srgb, var(--brand-color) 14%, var(--pcrm-surface)); border-color: transparent; color: var(--brand-color); }
.pcrm-btn--soft:hover:not(:disabled) { background: color-mix(in srgb, var(--brand-color) 24%, var(--pcrm-surface)); transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-color) 16%, transparent); }

/* Clique: afunda de volta ao repouso (cancela a elevação do hover) — feedback tátil.
   Vem depois dos :hover dos variantes p/ vencer por ordem de carga na hora do press. */
.pcrm-btn:active:not(:disabled) { transform: none; box-shadow: none; }

/* Status do negócio (toggle aberto/perdido/ganho) — borda + fundo tonal, sólido
   quando ativo. Converge attendance (mecanismo [data-status]/[data-active]) e
   lead-status-actions (classe --status-*/is-active): a mãe aceita os dois. */
.pcrm-btn--status { box-shadow: none; }
.pcrm-btn--status:not(.is-active):not([data-active="1"]):not(:disabled) { opacity: .72; }
.pcrm-btn--status:not(.is-active):not([data-active="1"]):not(:disabled):hover { box-shadow: inset 0 0 0 1px currentColor; opacity: 1; transform: translateY(-1px); }
.pcrm-btn--status.is-active, .pcrm-btn--status[data-active="1"] { color: var(--pcrm-text-on-brand); box-shadow: none; }

.pcrm-btn--status-open, .pcrm-btn--status[data-status="open"] {
    border-color: color-mix(in srgb, var(--pcrm-info) 42%, var(--pcrm-border));
    background: color-mix(in srgb, var(--pcrm-info) 8%, var(--pcrm-surface));
    color: var(--pcrm-info);
}
.pcrm-btn--status-open.is-active, .pcrm-btn--status-open[data-active="1"],
.pcrm-btn--status[data-status="open"].is-active, .pcrm-btn--status[data-status="open"][data-active="1"] {
    background: var(--pcrm-info); border-color: var(--pcrm-info); color: var(--pcrm-text-on-brand);
}
.pcrm-btn--status-lost, .pcrm-btn--status[data-status="lost"] {
    border-color: color-mix(in srgb, var(--pcrm-danger) 42%, var(--pcrm-border));
    background: color-mix(in srgb, var(--pcrm-danger) 8%, var(--pcrm-surface));
    color: var(--pcrm-danger);
}
.pcrm-btn--status-lost.is-active, .pcrm-btn--status-lost[data-active="1"],
.pcrm-btn--status[data-status="lost"].is-active, .pcrm-btn--status[data-status="lost"][data-active="1"] {
    background: var(--pcrm-danger); border-color: var(--pcrm-danger); color: var(--pcrm-text-on-brand);
}
.pcrm-btn--status-won, .pcrm-btn--status[data-status="won"] {
    border-color: color-mix(in srgb, var(--pcrm-success) 42%, var(--pcrm-border));
    background: color-mix(in srgb, var(--pcrm-success) 8%, var(--pcrm-surface));
    color: var(--pcrm-success);
}
.pcrm-btn--status-won.is-active, .pcrm-btn--status-won[data-active="1"],
.pcrm-btn--status[data-status="won"].is-active, .pcrm-btn--status[data-status="won"][data-active="1"] {
    background: var(--pcrm-success); border-color: var(--pcrm-success); color: var(--pcrm-text-on-brand);
}

/* Ação rápida do feed de atividades (Roteiro/Nota/Arquivo/Tags): tile quadrado
   com ícone + label. A cor pastel de cada ação fica no markup (utilitária). */
.pcrm-activity-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--pcrm-space-1);
    width: 84px;
    height: 74px;
    border: 1px solid transparent;
    border-radius: var(--pcrm-radius);
    font-weight: var(--pcrm-fw-medium);
    transition: all 140ms ease;
}

/* Variantes de cor por ação — pastel sólido no light, rgba(.22) + texto claro no
   dark (mesmo padrão de activity-icon.css). Antes Tailwind cru no markup
   (bg-X-200 text-X-900 hover:border-X-400): hover:border-* e purple/emerald eram
   NO-OP no bundle purgado (botão sem cor de hover e ilegível no dark). Cores
   decorativas de categoria, sem token de marca equivalente. */
.pcrm-activity-action--cyan { background: #a5f3fc; color: #164e63; }
.pcrm-activity-action--cyan:hover { border-color: #22d3ee; }
.dark .pcrm-activity-action--cyan { background: rgba(34, 211, 238, 0.22); color: #a5f3fc; }

.pcrm-activity-action--orange { background: #fed7aa; color: #9a3412; }
.pcrm-activity-action--orange:hover { border-color: #fb923c; }
.dark .pcrm-activity-action--orange { background: rgba(251, 146, 60, 0.22); color: #fed7aa; }

.pcrm-activity-action--purple { background: #e9d5ff; color: #581c87; }
.pcrm-activity-action--purple:hover { border-color: #c084fc; }
.dark .pcrm-activity-action--purple { background: rgba(192, 132, 252, 0.22); color: #e9d5ff; }

.pcrm-activity-action--emerald { background: #a7f3d0; color: #064e3b; }
.pcrm-activity-action--emerald:hover { border-color: #34d399; }
.dark .pcrm-activity-action--emerald { background: rgba(52, 211, 153, 0.22); color: #a7f3d0; }

/* ============================================================
   CARD — bloco de conteúdo (cabeçalho + corpo). Compõe com
   .pcrm-icon-badge no ícone do cabeçalho. Substitui
   .pcrm-account-panel, .pcrm-plan-panel e afins.
   Convenção BEM (__ elemento, -- modificador). Só tokens.
============================================================ */

.pcrm-card {
    background: var(--pcrm-surface);
    border: 1px solid var(--pcrm-border-strong);
    border-radius: var(--pcrm-radius);
}

/* Canto maior (cards de painel lateral). */
.pcrm-card--radius-lg { border-radius: var(--pcrm-radius-lg); }

/* Padding direto no card (quando o conteúdo não usa __header/__body). */
.pcrm-card--pad-sm { padding: var(--pcrm-space-3); }

.pcrm-card__header {
    display: flex;
    align-items: center;
    gap: var(--pcrm-space-3);
    border-bottom: 1px solid var(--pcrm-border);
    padding: var(--pcrm-space-4) var(--pcrm-space-4);
}

.pcrm-card__copy {
    display: grid;
    gap: var(--pcrm-space-1);
    min-width: 0;
}

.pcrm-card__title {
    margin: 0;
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-lg);
    font-weight: var(--pcrm-fw-semibold);
    line-height: var(--pcrm-lh-snug);
}

.pcrm-card__description {
    margin: 0;
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-medium);
    line-height: 20px;
}

.pcrm-card__body {
    display: grid;
    gap: var(--pcrm-space-4);
    padding: var(--pcrm-space-4);
}

@media (max-width: 768px) {
    .pcrm-card__header {
        align-items: flex-start;
    }
}

/* Checkbox / Radio canônico — caixa custom (.pcrm-checkbox-box).
   Input nativo escondido (.pcrm-checkbox) + caixa estilizada irmã.
   Cor de "ligado" parametrizável: --brand (padrão) ou --success. */
.pcrm-check-label { display: inline-flex; align-items: center; gap: var(--pcrm-space-2); color: var(--pcrm-text); font-size: var(--pcrm-text-base); cursor: pointer; }
.pcrm-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }

/* Checkbox / radio NATIVO (sem o box custom) — cor da marca + tamanho
   consistente, em TODO o CRM. Exclui o input escondido do componente
   custom (.pcrm-checkbox) e os escondidos de acessibilidade (.sr-only). */
input[type="checkbox"]:not(.pcrm-checkbox):not(.sr-only),
input[type="radio"]:not(.pcrm-checkbox):not(.sr-only) {
    accent-color: var(--brand-color);
    width: 16px;
    height: 16px;
    cursor: pointer;
    vertical-align: middle;
}

/* Caixa do checkbox — visual idêntico ao check do card no kanban
   (.pcrm-kanban-card-checkbox): borda 2px tintada na cor "on" clareada, raio 7px,
   preenche na cor "on" quando marcado e o tique vira on-brand. "on" = marca
   (padrão) ou success (--success). */
.pcrm-checkbox-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    border: 2px solid color-mix(in srgb, var(--pcrm-check-on) 72%, #fff);
    border-radius: 7px; /* mesmo valor exato do checkbox do kanban */
    background: transparent;
    color: var(--pcrm-text-on-brand);
    --pcrm-check-on: var(--brand-color);
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
    cursor: pointer;
}
.pcrm-checkbox-box--lg { width: 26px; height: 26px; }
.pcrm-checkbox-box--success { --pcrm-check-on: var(--pcrm-success); }
/* Marcado: via input irmão (:checked) ou via classe .is-on — esta p/ o toggle
   de cabeçalho, que mostra o estado da seleção mas não tem um <input> irmão. */
.pcrm-checkbox:checked + .pcrm-checkbox-box,
.pcrm-checkbox-box.is-on { background: var(--pcrm-check-on); border-color: var(--pcrm-check-on); }
.pcrm-checkbox:focus-visible + .pcrm-checkbox-box { box-shadow: 0 0 0 2px var(--pcrm-brand-ring); }
.pcrm-checkbox:disabled + .pcrm-checkbox-box { opacity: .6; cursor: not-allowed; }

/* Tique = traço em "L" girado, exatamente como o mark do kanban
   (.pcrm-kanban-card-checkbox-mark): 12×7, borda 3px, rotate(-45deg). Cor =
   currentColor do box (on-brand). .pcrm-checkdash = traço do estado "parcial". */
/* Tiques posicionados em absolute (inset:0 + margin:auto = centrados) p/ que
   aparecer/sumir NÃO empurre o layout do box — senão o box "pula" 1-2px ao
   marcar/desmarcar (o tique entra/sai do fluxo). */
.pcrm-checkmark {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12px;
    height: 7px;
    border-bottom: 3px solid currentColor;
    border-left: 3px solid currentColor;
    border-radius: 1px;
    opacity: 0;
    transform: rotate(-45deg) translate(1px, -1px);
    transform-origin: center;
    transition: opacity 120ms ease;
}
.pcrm-checkdash {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12px;
    height: 0;
    border-top: 3px solid currentColor;
    border-radius: 1px;
    opacity: 0;
    transition: opacity 120ms ease;
}
.pcrm-checkbox:checked + .pcrm-checkbox-box .pcrm-checkmark,
.pcrm-checkbox-box.is-on .pcrm-checkmark,
.pcrm-checkbox-box.is-on .pcrm-checkdash { opacity: 1; }

/* Radio = mesma caixa, raio pílula + ponto central */
.pcrm-radio-box { border-radius: var(--pcrm-radius-pill); }
.pcrm-radio-dot { width: 8px; height: 8px; border-radius: var(--pcrm-radius-pill); background: var(--pcrm-surface); opacity: 0; transform: scale(.4); transition: opacity 120ms ease, transform 120ms ease; }
.pcrm-checkbox:checked + .pcrm-radio-box .pcrm-radio-dot { opacity: 1; transform: scale(1); }

/* Toggle de seleção de linha do datagrid — área clicável que hospeda o
   checkbox canônico (.pcrm-checkbox + .pcrm-checkbox-box) na cor da marca.
   Mãe para as tabelas de contatos, empresas, roteiros e respostas rápidas.
   Ainda aceita o ícone legado (.pcrm-select-check-icon) p/ quem não migrou
   (e-mail, via IcoMoon + estado "parcial" no cabeçalho). */
.pcrm-select-check { display: inline-flex; height: 30px; width: 30px; cursor: pointer; align-items: center; justify-content: center; border-radius: var(--pcrm-radius); color: var(--pcrm-text-muted); }
.pcrm-select-check:hover { background: var(--pcrm-surface-sunken); color: var(--brand-color); }
/* Esconde só o input legado; o .pcrm-checkbox canônico já se esconde sozinho
   (position:absolute; opacity:0), preservando foco por teclado. */
.pcrm-select-check input:not(.pcrm-checkbox) { display: none; }
.pcrm-select-check-icon { font-size: var(--pcrm-text-2xl); line-height: 1; }
.pcrm-select-check input:checked + .pcrm-select-check-icon { color: var(--brand-color); }
/* Hover tinge a borda do box canônico na cor da marca (quando ainda vazio). */
.pcrm-select-check:hover .pcrm-checkbox:not(:checked) + .pcrm-checkbox-box { border-color: var(--brand-color); }
.pcrm-select-check:has(input:disabled) { cursor: not-allowed; opacity: .45; }
.pcrm-select-check:has(input:disabled):hover { background: transparent; color: var(--pcrm-text-muted); }

/* Chip de multiselect / tag canônico — .pcrm-chip.
   --brand = cor da marca; --color = cor por dado (via --chip-color inline). */
.pcrm-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--pcrm-space-2);
    height: 24px;
    padding: 0 var(--pcrm-space-2) 0 var(--pcrm-space-3);
    border: 1px solid transparent;
    border-radius: var(--pcrm-radius-pill);
    /* xs(12): chip/tag é label-scale (pill de 24px), não corpo — exceção intencional ao default 13→base */
    font: var(--pcrm-fw-semibold) var(--pcrm-text-xs)/1 var(--pcrm-font);
    white-space: nowrap;
}
.pcrm-chip--brand {
    background: color-mix(in srgb, var(--brand-color) 12%, var(--pcrm-surface));
    border-color: color-mix(in srgb, var(--brand-color) 35%, var(--pcrm-surface));
    color: var(--brand-color);
}
.pcrm-chip--color {
    background: color-mix(in srgb, var(--chip-color, var(--pcrm-text-muted)) 18%, var(--pcrm-surface));
    border-color: color-mix(in srgb, var(--chip-color, var(--pcrm-text-muted)) 40%, var(--pcrm-surface));
    color: color-mix(in srgb, var(--chip-color, var(--pcrm-text-muted)) 80%, var(--pcrm-text));
}
/* Estados semânticos — reutilizáveis em qualquer chip de status (ativo/inativo/erro). */
.pcrm-chip--success {
    background: color-mix(in srgb, var(--pcrm-success) 14%, var(--pcrm-surface));
    border-color: color-mix(in srgb, var(--pcrm-success) 38%, var(--pcrm-surface));
    color: color-mix(in srgb, var(--pcrm-success) 78%, var(--pcrm-text));
}
.pcrm-chip--neutral {
    background: color-mix(in srgb, var(--pcrm-text-muted) 12%, var(--pcrm-surface));
    border-color: color-mix(in srgb, var(--pcrm-text-muted) 34%, var(--pcrm-surface));
    color: var(--pcrm-text-muted);
}
.pcrm-chip--danger {
    background: color-mix(in srgb, var(--pcrm-danger) 14%, var(--pcrm-surface));
    border-color: color-mix(in srgb, var(--pcrm-danger) 38%, var(--pcrm-surface));
    color: color-mix(in srgb, var(--pcrm-danger) 78%, var(--pcrm-text));
}
.pcrm-chip--info {
    background: color-mix(in srgb, var(--pcrm-info) 14%, var(--pcrm-surface));
    border-color: color-mix(in srgb, var(--pcrm-info) 38%, var(--pcrm-surface));
    color: color-mix(in srgb, var(--pcrm-info) 78%, var(--pcrm-text));
}
.pcrm-chip--warning {
    background: color-mix(in srgb, var(--pcrm-warning) 14%, var(--pcrm-surface));
    border-color: color-mix(in srgb, var(--pcrm-warning) 40%, var(--pcrm-surface));
    color: color-mix(in srgb, var(--pcrm-warning) 82%, var(--pcrm-text));
}
.pcrm-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: var(--pcrm-radius-pill);
    background: transparent;
    color: currentColor;
    font-size: var(--pcrm-text-base);
    line-height: 1;
    cursor: pointer;
    opacity: .7;
    transition: opacity 120ms ease, background-color 120ms ease;
}
.pcrm-chip-remove:hover { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); }

/* ── Tag de dado: variações da .pcrm-chip p/ rótulos coloridos compactos.
   A cor sólida vem do :style inline da tela (background-color + texto de
   contraste); a base só dá geometria. ──────────────────────────────────── */
.pcrm-chip--sq { border-radius: var(--pcrm-radius-sm); }   /* canto quadradinho (6px) */
.pcrm-chip--xs { font-size: var(--pcrm-text-xs); }          /* 12px */
.pcrm-chip--bold { font-weight: var(--pcrm-fw-bold); }
.pcrm-chip--cap { max-width: 140px; }
.pcrm-chip--clip { overflow: hidden; }
.pcrm-chip__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Choice-card (mãe): grade de cartões de escolha mutuamente exclusivos (radio em forma de
   card). Promovido de screens/integrations.css quando passou a ser reusado pelo agendamento
   in-chat do Atendimento. Estende a mãe .pcrm-card (estados vencem o .pcrm-card com 2 classes,
   pois a mãe carrega depois). Só tokens, BEM. As classes mantêm o prefixo histórico
   `pcrm-integration-choice` para não exigir rename nas N chamadas da Central de Integrações;
   semanticamente são genéricas (qualquer tela com 2+ cartões de opção consome). */
.pcrm-integration-choice-grid {
    display: grid;
    gap: var(--pcrm-space-3);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.pcrm-integration-choice {
    display: flex;
    align-items: flex-start;
    gap: var(--pcrm-space-3);
    padding: var(--pcrm-space-3) var(--pcrm-space-4);
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
/* 2 classes p/ vencer o .pcrm-card da mãe (que carrega depois) nos estados. */
.pcrm-card.pcrm-integration-choice:hover {
    border-color: var(--brand-color);
    background: color-mix(in srgb, var(--brand-color) 5%, var(--pcrm-surface));
}
.pcrm-card.pcrm-integration-choice--active {
    border-color: var(--brand-color);
    background: var(--pcrm-brand-soft);
}
.pcrm-integration-choice__icon {
    flex-shrink: 0;
    display: inline-flex;
    margin-top: var(--pcrm-space-0_5);
    color: var(--pcrm-text-muted);
    transition: color 140ms ease;
}
.pcrm-card.pcrm-integration-choice--active .pcrm-integration-choice__icon,
.pcrm-card.pcrm-integration-choice--active .pcrm-integration-choice__title {
    color: var(--brand-color);
}
.pcrm-integration-choice__body {
    display: flex;
    flex-direction: column;
    gap: var(--pcrm-space-1);
    min-width: 0;
}
.pcrm-integration-choice__title {
    margin: 0;
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-semibold);
    line-height: var(--pcrm-lh-snug);
}
/* Texto de apoio (descrição) abaixo do título do cartão. */
.pcrm-integration-choice__desc {
    margin: 0;
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-xs);
    line-height: var(--pcrm-lh-snug);
}
/* Selo "Recomendado" ao lado do título da opção. */
.pcrm-integration-choice__badge {
    display: inline-block;
    margin-left: var(--pcrm-space-2);
    padding: 0 var(--pcrm-space-2);
    border-radius: var(--pcrm-radius-pill);
    background: var(--pcrm-brand-soft);
    color: var(--brand-color);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-semibold);
    vertical-align: middle;
}

/* Color picker — grade de swatches com radio escondido (selecionar cor de tag,
   motivo, etc.). Seleção/foco na cor da marca. Só tokens. */
.pcrm-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pcrm-space-3);
}
.pcrm-color-picker__option {
    display: inline-flex;
    position: relative;
}
.pcrm-color-picker__input {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
    opacity: 0;
}
.pcrm-color-picker__swatch {
    display: block;
    width: 24px;
    height: 24px;
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius-pill);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.pcrm-color-picker__input:checked + .pcrm-color-picker__swatch {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 2px var(--pcrm-brand-ring);
    transform: translateY(-1px);
}
.pcrm-color-picker__input:focus-visible + .pcrm-color-picker__swatch {
    outline: 2px solid var(--brand-color);
    outline-offset: 2px;
}

/* ============================================================
   Override do CORE Krayin: os inputs/selects/textarea dos forms
   do core (config de pipeline, cargos, atributos, etc.) passam a
   usar a receita canônica (44px + surface-sunken + foco da marca).

   Alvo = combos de classe ESTÁVEIS que o core sempre aplica
   (rounded + border-gray-300, ou rounded-md + border nos selects).
   Especificidade element+2classes (0,2,1) vence as utilitárias do
   Tailwind (0,1,0 / 0,2,0) inclusive no dark, e NÃO atinge .pcrm-*.
   Reversível: é um arquivo só.
============================================================ */
input.rounded.border-gray-300,
textarea.rounded.border-gray-300,
select.rounded.border-gray-300,
select.rounded-md.border {
    background: var(--pcrm-surface-sunken);
    border-color: var(--pcrm-border);
    border-radius: var(--pcrm-radius);
    color: var(--pcrm-text);
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

/* Altura única (44px) — exceto textarea, que mantém múltiplas linhas */
input.rounded.border-gray-300,
select.rounded.border-gray-300,
select.rounded-md.border {
    min-height: var(--pcrm-control-h-md);
}
textarea.rounded.border-gray-300 {
    min-height: 92px;
}

/* Foco da marca (substitui o hover/focus cinza do core) */
input.rounded.border-gray-300:focus,
input.rounded.border-gray-300:focus-within,
textarea.rounded.border-gray-300:focus,
select.rounded.border-gray-300:focus,
select.rounded-md.border:focus {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 2px var(--pcrm-brand-ring);
    background: var(--pcrm-surface);
    outline: none;
}

/* ============================================================
   CONTAGEM — primitivo MÃE da linha "N registros cadastrados" no
   topo de um painel/lista: rótulo grande + .pcrm-icon-badge--md
   tintado da marca à esquerda. Converge ~10 telas (listas, settings,
   capture, whatsapp). O ícone é a mãe .pcrm-icon-badge (não recriar).
============================================================ */

.pcrm-count {
    display: inline-flex;
    align-items: center;
    gap: var(--pcrm-space-3);
    width: max-content;
    margin: 0 0 var(--pcrm-space-3);
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-lg);
    font-weight: var(--pcrm-fw-bold);
}

/* Sem a margem inferior (ex.: quando o painel já espaça via grid). */
.pcrm-count--flush {
    margin: 0;
}

.pcrm-data-table { border-collapse: separate; border-spacing: 0 10px; width: 100%; }
.pcrm-data-table thead tr {
    background: transparent; border-bottom: 0; color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-xs); font-weight: var(--pcrm-fw-bold); text-align: left;
}
.pcrm-data-table th,
.pcrm-data-table td { height: 52px; padding: var(--pcrm-space-2) var(--pcrm-space-4); }
.pcrm-data-table tbody tr { transition: box-shadow 140ms ease, transform 140ms ease; }
.pcrm-data-table tbody td {
    background: var(--pcrm-surface);
    border-top: 1px solid var(--pcrm-border);
    border-bottom: 1px solid var(--pcrm-border);
}
.pcrm-data-table tbody td:first-child {
    border-left: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius) 0 0 var(--pcrm-radius);
}
.pcrm-data-table tbody td:last-child {
    border-right: 1px solid var(--pcrm-border);
    border-radius: 0 var(--pcrm-radius) var(--pcrm-radius) 0;
}
.pcrm-data-table tbody tr:hover td {
    background: var(--pcrm-surface-hover); border-color: var(--pcrm-border-strong);
}
.pcrm-data-table--select th:first-child,
.pcrm-data-table--select td:first-child { width: 54px; }

/* Wrapper que estabelece o container-query (o consumidor envolve a <table>). */
.pcrm-data-table-wrap { container-type: inline-size; }

/* Modo CARD no estreito: cada linha vira um cartão empilhado; cada <td> mostra o rótulo
   via data-label. Contrato: o consumidor põe data-label="Nome" em cada <td>. */
@container (max-width: 640px) {
    .pcrm-data-table { border-spacing: 0; }
    .pcrm-data-table thead { display: none; }
    .pcrm-data-table tbody tr {
        display: block;
        margin-bottom: var(--pcrm-space-3);
        border: 1px solid var(--pcrm-border);
        border-radius: var(--pcrm-radius);
        background: var(--pcrm-surface);
        padding: var(--pcrm-space-2) var(--pcrm-space-3);
    }
    .pcrm-data-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--pcrm-space-3);
        height: auto;
        padding: var(--pcrm-space-1) 0;
        border: 0;
        border-radius: 0;
    }
    .pcrm-data-table tbody td::before {
        content: attr(data-label);
        color: var(--pcrm-text-muted);
        font-size: var(--pcrm-text-xs);
        font-weight: var(--pcrm-fw-semibold);
    }
    .pcrm-data-table--select td:first-child { width: auto; }
}

/* Tabela emoldurada de "de → para" (mapeamento): cabeçalho maiúsculo, linhas zebradas,
   borda única arredondada. Primitivo reutilizável (ex.: mapeamento de webhook/importação). */
.pcrm-mapping-table__wrap {
    overflow: hidden;
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius);
}
.pcrm-mapping-table {
    width: 100%;
    border-collapse: collapse;
}
.pcrm-mapping-table th,
.pcrm-mapping-table td {
    padding: var(--pcrm-space-3);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--pcrm-border);
}
.pcrm-mapping-table tbody tr:last-child td { border-bottom: 0; }
.pcrm-mapping-table th {
    background: var(--pcrm-surface-hover);
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
    text-transform: uppercase;
}
.pcrm-mapping-table tbody tr:nth-child(even) td { background: var(--pcrm-surface-hover); }
.pcrm-mapping-table__actions-col { width: 1%; white-space: nowrap; text-align: right; }
.pcrm-mapping-table__empty { color: var(--pcrm-text-muted); text-align: center; }

/* Painel + tabela do catálogo (promovidos de screens/scripts.css para a mãe: o
   .pcrm-toolbar já pareia com .pcrm-scripts-panel formando UMA caixa, então o painel
   pertence à mãe). Consumidos por roteiros, mensagens agendadas (página + modal de
   histórico no atendimento), integrações. Só tokens. */
.pcrm-scripts-panel {
    background: var(--pcrm-surface);
    border: 1px solid var(--pcrm-border-strong);
    border-radius: 0 0 8px 8px;
    box-shadow: none;
    overflow: visible;
    padding: var(--pcrm-space-4) var(--pcrm-space-4) var(--pcrm-space-5);
}
.pcrm-scripts-table { border-collapse: separate; border-spacing: 0 10px; font-size: var(--pcrm-text-base); width: 100%; }
.pcrm-scripts-table thead tr {
    background: transparent;
    border-bottom: 0;
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
    letter-spacing: 0;
    text-align: left;
}
.pcrm-scripts-table th,
.pcrm-scripts-table td { height: 52px; padding: var(--pcrm-space-2) var(--pcrm-space-4); }
.pcrm-scripts-table tbody tr { transition: box-shadow 140ms ease, transform 140ms ease; }
.pcrm-scripts-table tbody td {
    background: var(--pcrm-surface);
    border-bottom: 1px solid var(--pcrm-border);
    border-top: 1px solid var(--pcrm-border);
}
.pcrm-scripts-table tbody td:first-child {
    border-left: 1px solid var(--pcrm-border);
    border-radius: 8px 0 0 8px;
}
.pcrm-scripts-table tbody td:last-child {
    border-radius: 0 8px 8px 0;
    border-right: 1px solid var(--pcrm-border);
}
.pcrm-scripts-table tbody tr:hover td { background: var(--pcrm-surface-hover); border-color: var(--pcrm-border); box-shadow: none; }
.pcrm-scripts-row-menu-pos { position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; z-index: var(--pcrm-z-dropdown); }

/* Célula "muted" (data/telefone) + célula com avatar (Dispositivo/Criado por) +
   wrapper/posição das ações de linha. Promovidos de screens/scripts.css porque são
   reusados pelo modal de histórico de mensagens agendadas (atendimento) — não só
   pela página de roteiros. Só tokens. */
.pcrm-scripts-muted { color: var(--pcrm-text-muted); font-size: var(--pcrm-text-base); font-weight: var(--pcrm-fw-semibold); }
.pcrm-scripts-creator { align-items: center; color: var(--pcrm-text-muted); display: inline-flex; gap: var(--pcrm-space-3); min-width: 0; }
.pcrm-scripts-creator-avatar {
    align-items: center;
    background: color-mix(in srgb, var(--brand-color) 12%, var(--pcrm-surface));
    border: 1px solid color-mix(in srgb, var(--brand-color) 20%, var(--pcrm-surface));
    border-radius: var(--pcrm-radius-pill);
    color: var(--brand-color);
    display: inline-flex;
    flex: 0 0 38px;
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
    height: 38px;
    justify-content: center;
    overflow: hidden;
    width: 38px;
}
.pcrm-scripts-creator-avatar img { height: 100%; object-fit: cover; width: 100%; }
.pcrm-scripts-creator-name { font-size: var(--pcrm-text-base); font-weight: var(--pcrm-fw-bold); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcrm-scripts-creator-text { display: flex; flex-direction: column; min-width: 0; }
.pcrm-scripts-creator-sub { font-size: var(--pcrm-text-xs); font-weight: var(--pcrm-fw-medium); color: var(--pcrm-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcrm-scripts-row-actions { position: relative; display: flex; justify-content: flex-end; }

/* Célula de contato (avatar + nome clicável) — primitivo reusável de listagem.
   Promovido de screens/contacts-persons.css; consumido por contatos + modal de
   histórico de mensagens agendadas. Só tokens. */
.pcrm-contact-person { display: flex; min-width: 0; align-items: center; gap: var(--pcrm-space-3); }
.pcrm-contact-person-avatar {
    align-items: center;
    background: color-mix(in srgb, var(--brand-color) 12%, var(--pcrm-surface));
    border: 1px solid color-mix(in srgb, var(--brand-color) 20%, var(--pcrm-surface));
    border-radius: var(--pcrm-radius-pill);
    color: var(--brand-color);
    display: inline-flex;
    flex: 0 0 38px;
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
    height: 38px;
    justify-content: center;
    overflow: hidden;
    width: 38px;
}
.pcrm-contact-person-avatar img { height: 100%; object-fit: cover; width: 100%; }
.pcrm-contact-person-name { color: var(--pcrm-text); font-size: var(--pcrm-text-base); font-weight: var(--pcrm-fw-bold); text-align: left; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcrm-contact-person-name:hover { color: var(--brand-color); }
/* Variante empilhada: nome em cima + telefone embaixo (espelha .pcrm-scripts-creator-text). */
.pcrm-contact-person-text { display: flex; flex-direction: column; min-width: 0; }
.pcrm-contact-person-sub { font-size: var(--pcrm-text-xs); font-weight: var(--pcrm-fw-medium); color: var(--pcrm-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Célula inteira clicável (leva à conversa): área toda vira alvo, nome acompanha o hover. */
.pcrm-contact-person--clickable { cursor: pointer; }
.pcrm-contact-person--clickable:hover .pcrm-contact-person-name { color: var(--brand-color); }

/* Layout de ficha (detalhe): 2 colunas no desktop, empilha quando o CONTAINER é estreito.
   Container-query (adapta ao espaço do componente, não só ao viewport). Generaliza o
   2-col bespoke de contacts/persons/view e leads/view (adoção é Sub-B). Só tokens. */
.pcrm-detail-layout { container-type: inline-size; }
.pcrm-detail-layout__cols {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: var(--pcrm-space-4);
    align-items: start;
}
@container (max-width: 768px) {
    .pcrm-detail-layout__cols { grid-template-columns: 1fr; }
}

/* Dropdown/lookup custom canônico — trigger + menu + option.
   Converge grp-dd, mselect e o lead-quick-lookup (re-skinado em N telas).
   z-index único via --pcrm-z-dropdown; sombra/raio via tokens. */

/* TRIGGER */
.pcrm-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pcrm-space-3);
    width: 100%;
    min-height: var(--pcrm-control-h-md);
    padding: 0 var(--pcrm-space-3);
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius);
    background: var(--pcrm-surface-sunken);
    color: var(--pcrm-text);
    font: var(--pcrm-fw-semibold) var(--pcrm-text-base)/1.4 var(--pcrm-font);
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.pcrm-dropdown-trigger:hover { border-color: var(--pcrm-border-strong); }
.pcrm-dropdown-trigger:focus,
.pcrm-dropdown-trigger[aria-expanded="true"] {
    background: var(--pcrm-surface);
    border-color: var(--brand-color);
    box-shadow: 0 0 0 2px var(--pcrm-brand-ring);
    outline: none;
}
.pcrm-dropdown-trigger:disabled {
    background: var(--pcrm-surface-hover);
    border-color: var(--pcrm-border);
    box-shadow: none;
    color: var(--pcrm-text-subtle);
    cursor: not-allowed;
    opacity: 0.62;
}
.pcrm-dropdown-trigger__placeholder { color: var(--pcrm-text-subtle); font-weight: var(--pcrm-fw-regular); }
.pcrm-dropdown-trigger__chevron { color: var(--pcrm-text-muted); flex: 0 0 auto; transition: transform 140ms ease; }
.pcrm-dropdown-trigger[aria-expanded="true"] .pcrm-dropdown-trigger__chevron { transform: rotate(180deg); }
.pcrm-dropdown-trigger--sm { min-height: var(--pcrm-control-h-sm); padding: 0 var(--pcrm-space-3); }
.pcrm-dropdown-trigger--lg { min-height: var(--pcrm-control-h-lg); }
.pcrm-dropdown-trigger--pill { border-radius: var(--pcrm-radius-pill); width: auto; }

/* MENU (teleportado pro body) */
.pcrm-dropdown-menu {
    z-index: var(--pcrm-z-dropdown);
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    padding: var(--pcrm-space-2);
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius-lg);
    background: var(--pcrm-surface);
    box-shadow: var(--pcrm-shadow-dropdown);
}

/* OPTION */
.pcrm-dropdown-option {
    display: flex;
    align-items: center;
    gap: var(--pcrm-space-3);
    width: 100%;
    padding: var(--pcrm-space-2) var(--pcrm-space-3);
    border: 0;
    border-radius: var(--pcrm-radius);
    background: transparent;
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-base);
    text-align: left;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}
.pcrm-dropdown-option:hover { background: var(--pcrm-surface-hover); }
.pcrm-dropdown-option.is-active,
.pcrm-dropdown-option[aria-selected="true"] {
    background: var(--pcrm-brand-soft);
    color: var(--brand-color);
    font-weight: var(--pcrm-fw-semibold);
}
.pcrm-dropdown-option__check { margin-left: auto; color: var(--brand-color); }
/* Opções de ação no fim de um menu/lista: criar-novo (cor da marca) e
   destrutiva (perigo). Dark resolvido pelos tokens. */
.pcrm-dropdown-option--add { color: var(--brand-color); }
.pcrm-dropdown-option--danger { color: var(--pcrm-danger); }
.pcrm-dropdown-option--danger:hover { background: var(--pcrm-danger-soft); }
.pcrm-dropdown-empty { padding: var(--pcrm-space-3) var(--pcrm-space-3); color: var(--pcrm-text-muted); font-size: var(--pcrm-text-base); text-align: center; }

/* Viewport rolável de resultados dentro do menu (lookups com lista longa). */
.pcrm-dropdown-results { max-height: 230px; overflow-y: auto; padding: var(--pcrm-space-2); }

/* Valor selecionado dentro do trigger: ícone-tile + texto truncado. */
.pcrm-dropdown-trigger__value { display: flex; min-width: 0; flex: 1; align-items: center; gap: var(--pcrm-space-2); }
.pcrm-dropdown-trigger__value .truncate,
.pcrm-dropdown-option .truncate { min-width: 0; flex: 1; }

/* Ícone-tile à esquerda (pasta/origem) e marcador-ponto de selecionado
   (alternativa ao __check nos pickers de grupo/origem). */
.pcrm-dropdown-option__icon {
    display: inline-flex;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: var(--pcrm-radius-pill);
    background: var(--pcrm-brand-soft);
    color: var(--brand-color);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-color) 18%, transparent);
}
.pcrm-dropdown-option__dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: var(--pcrm-radius-pill);
    background: var(--brand-color);
}
/* Variantes de status do ícone-tile (avatar colorido: aberto/ganho/perdido, ativa/inativa). */
.pcrm-dropdown-option__icon--info {
    background: var(--pcrm-info-soft);
    color: var(--pcrm-info);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pcrm-info) 38%, transparent);
}
.pcrm-dropdown-option__icon--success {
    background: var(--pcrm-success-soft);
    color: var(--pcrm-success);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pcrm-success) 38%, transparent);
}
.pcrm-dropdown-option__icon--danger {
    background: var(--pcrm-danger-soft);
    color: var(--pcrm-danger);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pcrm-danger) 38%, transparent);
}

/* Cabeçalho de seção num menu de lookup agrupado (optgroup → grupos). */
.pcrm-dropdown-group__label {
    padding: var(--pcrm-space-2) var(--pcrm-space-3) var(--pcrm-space-1);
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* Menu agrupado: divisória + respiro entre seções e opções recuadas sob o
   cabeçalho — hierarquia clara (padrão dos seletores agrupados do mercado). */
.pcrm-dropdown-menu--grouped .pcrm-dropdown-group__label:not(:first-child) {
    margin-top: var(--pcrm-space-1);
    padding-top: var(--pcrm-space-3);
    border-top: 1px solid var(--pcrm-border);
}
.pcrm-dropdown-menu--grouped .pcrm-dropdown-option {
    padding-left: var(--pcrm-space-6);
}

/* TOGGLE compacto de "selecionar todos" (header dos datagrids): checkbox
   tri-state + chevron. Aberto via [aria-expanded="true"]. O glyph fica na cor
   da marca quando o menu abre (SVG Tabler via __icon) ou quando o ícone-fonte
   é select/multiple (IcoMoon). */
.pcrm-select-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pcrm-space-0_5);
    height: 34px;
    min-width: 54px;
    padding: 0 var(--pcrm-space-1);
    border: 0;
    border-radius: var(--pcrm-radius);
    background: transparent;
    color: var(--pcrm-text-muted);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}
.pcrm-select-toggle:hover:not(:disabled),
.pcrm-select-toggle[aria-expanded="true"] { background: var(--pcrm-surface-sunken); color: var(--pcrm-text); }
.pcrm-select-toggle:disabled { cursor: not-allowed; opacity: .45; }
.pcrm-select-toggle:disabled:hover { background: transparent; color: inherit; }
.pcrm-select-toggle[aria-expanded="true"] .pcrm-select-toggle__icon,
.pcrm-select-toggle .icon-checkbox-select,
.pcrm-select-toggle .icon-checkbox-multiple { color: var(--brand-color); }

/* Sub-painel "Selecionar quantidade" dentro do menu (label + input + Aplicar). */
.pcrm-dropdown-qty { display: grid; gap: var(--pcrm-space-2); padding: var(--pcrm-space-1) var(--pcrm-space-2) var(--pcrm-space-0_5); }
/* Linha input + Aplicar: o input divide a faixa com o botão e os dois ficam na
   mesma altura da mãe (40px). O .pcrm-input é width:100% + min-width:auto (a
   largura intrínseca do <input type=number>), então sem flex:1/min-width:0 ele
   estica e empurra/quebra o botão. Aqui isso mora na mãe (era `flex gap-2` cru
   no blade — Tailwind que não compõe com o resto do design). */
.pcrm-dropdown-qty__row { display: flex; gap: var(--pcrm-space-2); }
.pcrm-dropdown-qty__row > .pcrm-input { flex: 1; min-width: 0; }
/* Label unificado: as telas marcam com classes diferentes (.pcrm-<page>-muted,
   .pcrm-label) — aqui um só estilo, igual em todas, sem herdar o uppercase do
   .pcrm-label nem variar de tela pra tela. */
.pcrm-dropdown-qty label {
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-semibold);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}
/* O card de seleção em massa (qualquer menu que contém o painel de quantidade)
   é largo e tem o separador com contraste — vale em TODAS as telas de uma vez,
   independente da co-classe de posição de cada tela (scripts/contacts/...). */
.pcrm-dropdown-menu:has(.pcrm-dropdown-qty) { min-width: 352px; font-weight: var(--pcrm-fw-regular); }
/* Full-bleed: margem lateral negativa (= -padding do menu) faz a linha ir de
   borda a borda. Cor = var(--pcrm-border), o mesmo cinza suave das bordas do
   header/footer do modal. */
.pcrm-dropdown-menu:has(.pcrm-dropdown-qty) .pcrm-dropdown__separator { margin: var(--pcrm-space-2) calc(-1 * var(--pcrm-space-2)); background: var(--pcrm-border); }

.pcrm-dropdown {
    min-width: 240px;
    padding: var(--pcrm-space-2);
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius-lg);
    background: var(--pcrm-surface);
    box-shadow: var(--pcrm-shadow-dropdown);
}

.pcrm-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--pcrm-space-3);
    width: 100%;
    padding: var(--pcrm-space-2) var(--pcrm-space-3);
    border: none;
    border-radius: var(--pcrm-radius);
    background: transparent;
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-base);
    /* Peso/caixa/altura fixos: o item NÃO pode herdar do contexto (dentro de um
       <th> herdava bold; num <div> ficava normal) — senão o mesmo botão muda de
       tela pra tela. */
    font-weight: var(--pcrm-fw-semibold);
    text-transform: none;
    line-height: var(--pcrm-lh-normal);
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease;
}
.pcrm-dropdown__item:hover { background: var(--pcrm-surface-sunken); }

/* Item ativo (ex.: filtro selecionado num menu de ações). */
.pcrm-dropdown__item--active { background: var(--pcrm-surface-sunken); }

.pcrm-dropdown__item--danger { color: var(--pcrm-danger); }
.pcrm-dropdown__item--danger:hover {
    background: var(--pcrm-danger-soft);
}

/* Item de destaque (ex.: "Editar" na cor da marca). */
.pcrm-dropdown__item--brand { color: var(--brand-color); }
.pcrm-dropdown__item--brand:hover { background: var(--pcrm-brand-soft); }

.pcrm-dropdown__separator {
    display: block; /* o markup usa <span> (inline) — sem isto a linha não renderiza */
    height: 1px;
    margin: var(--pcrm-space-1) var(--pcrm-space-2);
    background: var(--pcrm-border);
}

.pcrm-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--pcrm-space-3);
    padding: var(--pcrm-space-16) var(--pcrm-space-6);
    text-align: center;
    color: var(--pcrm-text-muted);
}
.pcrm-empty-state__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--pcrm-radius-lg);
    background: var(--pcrm-surface-sunken);
    color: var(--pcrm-text-subtle);
}
.pcrm-empty-state__title {
    font-size: var(--pcrm-text-lg);
    font-weight: var(--pcrm-fw-bold);
    color: var(--pcrm-text);
}
.pcrm-empty-state__description {
    font-size: var(--pcrm-text-base);
    max-width: 360px;
}

/* Dimensiona o SVG/ícone injetado (a base só fazia o quadrado do chip). */
.pcrm-empty-state__icon svg,
.pcrm-empty-state__icon .pcrm-ic {
    width: 24px;
    height: 24px;
}

/* Ícone com chip da marca (empties "hero"). */
.pcrm-empty-state__icon--brand {
    width: 48px;
    height: 48px;
    border-radius: var(--pcrm-radius);
    background: var(--pcrm-brand-soft);
    border: 1px solid var(--pcrm-brand-ring);
    color: var(--brand-color);
}

/* Ícone sem chip, glifo maior (empties compactos inline). */
.pcrm-empty-state__icon--bare {
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    color: var(--pcrm-text-subtle);
}
.pcrm-empty-state__icon--bare svg,
.pcrm-empty-state__icon--bare .pcrm-ic {
    width: 32px;
    height: 32px;
}

/* Título compacto (empties "pelados" inline — ícone --bare): menor e semibold. */
.pcrm-empty-state__title--compact {
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-semibold);
}

/* Título maior e mais pesado (empty "hero"). */
.pcrm-empty-state__title--lg {
    font-size: var(--pcrm-text-xl);
    font-weight: var(--pcrm-fw-bold);
    line-height: 24px;
}

/* Descrição enfatizada (maior, semibold). */
.pcrm-empty-state__description--strong {
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-semibold);
    line-height: 20px;
    max-width: 320px;
}

/* Preenche a altura do container (centraliza no espaço disponível). */
.pcrm-empty-state--fill { height: 100%; }

/* Sem padding próprio (quando o container pai já controla o espaço). */
.pcrm-empty-state--fit { padding: 0; }

/* Painel com borda inferior (rodapé de tabela, ex.: e-mail). */
.pcrm-empty-state--panel {
    display: block;
    background: var(--pcrm-surface);
    border: 1px solid var(--pcrm-border);
    border-top: 0;
    border-radius: 0 0 var(--pcrm-radius) var(--pcrm-radius);
    padding: var(--pcrm-space-6) var(--pcrm-space-4);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-semibold);
}

/* Controles de campo canônicos: telefone DDI, select nativo e textarea.
   Substitui pcrm-pi/pc/iti-input, os selects estilizados ad-hoc e o
   single-textarea. Tudo via tokens; dark automático. */

/* ===== Telefone DDI (.pcrm-phone-input) =====
   --ring = modal/formulário (default); --bare = célula editável (vista). */
.pcrm-phone-field { width: 100%; }
.pcrm-phone-field .iti { width: 100%; }
.pcrm-phone-input {
    width: 100%;
    min-height: var(--pcrm-control-h-md);
    padding: var(--pcrm-space-2) var(--pcrm-space-3);
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius);
    background: var(--pcrm-surface-sunken);
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-medium);   /* texto do campo em medium (não herda peso do contexto) */
    line-height: 1.4;
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.pcrm-phone-input::placeholder { color: var(--pcrm-text-subtle); }
.pcrm-phone-input:focus,
.pcrm-phone-input--ring:focus { border-color: var(--brand-color); box-shadow: 0 0 0 2px var(--pcrm-brand-ring); }
.pcrm-phone-input--bare { min-height: var(--pcrm-control-h-sm); padding: 0 var(--pcrm-space-2); background: transparent; border-color: transparent; }
.pcrm-phone-input--bare:hover { background: var(--pcrm-surface-hover); }
.pcrm-phone-input--bare:focus { background: var(--pcrm-surface); border-color: var(--brand-color); box-shadow: 0 0 0 2px var(--pcrm-brand-ring); }
.pcrm-phone-input--sm { min-height: var(--pcrm-control-h-sm); padding: var(--pcrm-space-2) var(--pcrm-space-3); font-size: var(--pcrm-text-xs); }
.pcrm-phone-input--lg { min-height: var(--pcrm-control-h-lg); padding: var(--pcrm-space-4) var(--pcrm-space-4); }

/* ===== Select nativo estilizado (.pcrm-select-native) =====
   Seta via token --pcrm-select-chevron (light/dark). */
.pcrm-select-native {
    display: block;
    width: 100%;
    min-height: var(--pcrm-control-h-md);
    padding: var(--pcrm-space-2) var(--pcrm-space-10) var(--pcrm-space-2) var(--pcrm-space-4);
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius);
    background-color: var(--pcrm-surface-sunken);
    background-image: var(--pcrm-select-chevron);
    background-repeat: no-repeat;
    background-position: right 14px center;
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-medium);   /* texto do campo em medium (não herda peso do contexto) */
    line-height: 1.4;
    color-scheme: light;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.dark .pcrm-select-native { color-scheme: dark; }
.pcrm-select-native:hover:not(:disabled):not(:focus) { border-color: var(--pcrm-border-strong); }
.pcrm-select-native:focus { border-color: var(--brand-color); box-shadow: 0 0 0 2px var(--pcrm-brand-ring); }
.pcrm-select-native:disabled { opacity: .6; cursor: not-allowed; }
.pcrm-select-native--sm { min-height: var(--pcrm-control-h-sm); padding: var(--pcrm-space-2) var(--pcrm-space-8) var(--pcrm-space-2) var(--pcrm-space-3); font-size: var(--pcrm-text-xs); background-position: right 10px center; }
.pcrm-select-native--lg { min-height: var(--pcrm-control-h-lg); padding: var(--pcrm-space-4) var(--pcrm-space-10) var(--pcrm-space-4) var(--pcrm-space-4); }

/* Multi-select (<select multiple>): listbox nativo, sem a seta, mesmo
   border/cor/raio da mãe. Restaura appearance pro browser desenhar a lista. */
.pcrm-select-native--multi {
    appearance: auto;
    -webkit-appearance: auto;
    padding: var(--pcrm-space-2);
    background-image: none;
    cursor: auto;
}
.pcrm-select-native--multi option { padding: var(--pcrm-space-1) var(--pcrm-space-2); border-radius: var(--pcrm-radius); }

/* Estado inválido (espelha .pcrm-input--invalid). */
.pcrm-select-native--invalid,
.pcrm-select-native[aria-invalid="true"] { border-color: var(--pcrm-danger); }
.pcrm-select-native--invalid:focus,
.pcrm-select-native[aria-invalid="true"]:focus { border-color: var(--pcrm-danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pcrm-danger) 18%, transparent); }

/* ===== Textarea (.pcrm-textarea) =====
   --overlay = legenda de mídia (texto transparente + caret na cor do texto). */
.pcrm-textarea {
    display: block;
    width: 100%;
    min-height: 70px;
    padding: var(--pcrm-space-3) var(--pcrm-space-4);
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius);
    background: var(--pcrm-surface-sunken);
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-medium);   /* texto do campo em medium (não herda peso do contexto) */
    line-height: 1.5;
    outline: none;
    resize: vertical;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.pcrm-textarea::placeholder { color: var(--pcrm-text-subtle); }
.pcrm-textarea:hover:not(:disabled):not(:focus) { border-color: var(--pcrm-border-strong); }
.pcrm-textarea:focus { border-color: var(--brand-color); box-shadow: 0 0 0 2px var(--pcrm-brand-ring); }
.pcrm-textarea--sm { min-height: 56px; }
.pcrm-textarea--lg { min-height: 120px; }
.pcrm-textarea--overlay { min-height: 96px; max-height: 220px; resize: none; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--pcrm-text); }
.pcrm-textarea--overlay::placeholder { color: var(--pcrm-text-subtle); -webkit-text-fill-color: var(--pcrm-text-subtle); }

/* Label de campo (padrão dos grandes: Tailwind/GitHub/Stripe) — sentence case,
   legível (slate-700, não muted claro), 14px semibold. Era uppercase 12px muted
   (micro-caption datada) — o uppercase agora vive só no modificador --section. */
.pcrm-label {
    display: block;
    margin-bottom: var(--pcrm-space-1_5);
    color: var(--pcrm-text-strong);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-semibold);
    line-height: var(--pcrm-lh-snug);
}

/* Variante "section": micro-label de seção/grupo — uppercase compacta, muted
   (preserva o look antigo p/ cabeçalhos de seção; sem margem pois o grid controla o ritmo). */
.pcrm-label--section {
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0;
}

.pcrm-input {
    display: block;
    width: 100%;
    min-height: var(--pcrm-control-h-md);
    padding: var(--pcrm-space-2) var(--pcrm-space-4);
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius);
    background: var(--pcrm-surface-sunken);
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-medium);   /* texto do campo em medium (auto-suficiente: não herda bold do contexto, ex.: <th>) */
    line-height: 1.4;
    color-scheme: light;             /* widgets nativos seguem o tema da PÁGINA */
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.pcrm-input::placeholder { color: var(--pcrm-text-subtle); }
.pcrm-input:hover:not(:disabled):not(:focus) { border-color: var(--pcrm-border-strong); }
.pcrm-input:focus {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 2px var(--pcrm-brand-ring);
}
.pcrm-input:disabled {
    opacity: .6;
    cursor: not-allowed;
}
.dark .pcrm-input { color-scheme: dark; }

/* Tamanhos (tabela única) */
.pcrm-input--sm { min-height: var(--pcrm-control-h-sm); padding: var(--pcrm-space-2) var(--pcrm-space-3); font-size: var(--pcrm-text-xs); }
.pcrm-input--lg { min-height: var(--pcrm-control-h-lg); padding: var(--pcrm-space-4) var(--pcrm-space-4); }

/* Leitura: campo "display" read-only que centraliza o texto interno
   verticalmente (a mãe é display:block; sem isto o <span> cola no topo). */
.pcrm-input--readonly { display: flex; align-items: center; }

/* Pílula + busca: campo de pesquisa arredondado com espaço à esquerda
   reservado para o ícone (o offset do ícone é layout, não cor/raio). */
.pcrm-input--pill { border-radius: var(--pcrm-radius-pill); }
.pcrm-input--search { padding-left: var(--pcrm-space-10); }

/* Ênfase e erro */
.pcrm-input--strong { font-weight: var(--pcrm-fw-semibold); }
.pcrm-input--invalid,
.pcrm-input[aria-invalid="true"] { border-color: var(--pcrm-danger); }
.pcrm-input--invalid:focus,
.pcrm-input[aria-invalid="true"]:focus {
    border-color: var(--pcrm-danger);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pcrm-danger) 18%, transparent);
}

/* Ícone do seletor de data na cor do texto (light/dark via token) */
.pcrm-input[type="date"]::-webkit-calendar-picker-indicator,
.pcrm-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    width: 18px; height: 18px; margin: 0; padding: 0; opacity: 1; cursor: pointer;
    background: var(--pcrm-cal-icon) center / 18px 18px no-repeat;
}

.pcrm-field-error {
    display: block;
    margin-top: var(--pcrm-space-1);
    color: var(--pcrm-danger);
    font-size: var(--pcrm-text-xs);
}

.pcrm-form-field { display: flex; flex-direction: column; }

/* Linha de campo "rótulo | valor" (label 1fr + valor 2fr, alinhados na vertical).
   Converge os field-rows de contacts/leads — era `grid grid-cols-[1fr_2fr]
   items-center gap-1`, utilitária arbitrária que não compila sem JIT. */
.pcrm-field-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: var(--pcrm-space-1);
}

/* O ramo @else do about-panel (tipos complexos do core) usa `grid grid-cols-[1fr_2fr]`
   (arbitrária, não compila). Reaplica o grid da mãe na linha pra alinhar com as demais. */
.pcrm-about-core-field [class*="grid-cols-"] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: var(--pcrm-space-1);
}

/* Contador de caracteres de textarea (ex.: nota/arquivo): legenda discreta
   alinhada à direita. A cor (limite/aviso) vem de classe à parte no markup. */
.pcrm-char-count {
    margin-top: var(--pcrm-space-1);
    text-align: right;
    font-size: var(--pcrm-text-xs);
}

/* ============================================================
   GUIDE — primitivo MÃE da caixa de orientação/dica: fundo suave
   com barra lateral na cor da marca. Para instruções passo-a-passo
   (captação, conexão de dispositivo etc.). Converge capture/whatsapp.
============================================================ */

.pcrm-guide {
    padding: var(--pcrm-space-3) var(--pcrm-space-4);
    border: 1px solid var(--pcrm-border);
    border-left: 3px solid var(--brand-color);
    border-radius: var(--pcrm-radius-lg);
    background: var(--pcrm-surface-sunken);
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-base);
    line-height: 1.6;
}
.pcrm-guide p { margin: 0 0 var(--pcrm-space-2); }
.pcrm-guide p:last-child { margin-bottom: 0; }
.pcrm-guide strong { color: var(--pcrm-text); font-weight: var(--pcrm-fw-bold); }

/* ============================================================
   ÍCONE-BADGE — primitivo MÃE do quadradinho de ícone (fundo
   brand-soft, cantos arredondados, cor da marca). Tamanhos via
   modificador. Substitui .pcrm-account-header-icon,
   .pcrm-panel-icon, .pcrm-plan-limit-icon e afins.
============================================================ */

.pcrm-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--pcrm-brand-soft);
    border: 1px solid var(--pcrm-brand-ring);
    border-radius: var(--pcrm-radius);
    color: var(--brand-color);
}

.pcrm-icon-badge--lg {
    width: 42px;
    height: 42px;
    font-size: var(--pcrm-text-2xl);
}

.pcrm-icon-badge--md {
    width: 34px;
    height: 34px;
    font-size: var(--pcrm-text-lg);
}

.pcrm-icon-badge--sm {
    width: 28px;
    height: 28px;
    font-size: var(--pcrm-text-lg);
}

/* Sem borda (ex.: ícone dentro de item de lista). */
.pcrm-icon-badge--plain {
    border-color: transparent;
}

.pcrm-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: var(--pcrm-radius);
    background: transparent;
    color: var(--pcrm-text-muted);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    flex-shrink: 0;
}
.pcrm-icon-button:hover:not(:disabled) {
    background: var(--pcrm-surface-hover);
    color: var(--pcrm-text);
}
.pcrm-icon-button:disabled {
    opacity: .4;
    cursor: not-allowed;
}
.pcrm-icon-button--sm {
    width: 30px;
    height: 30px;
}
/* Variante redonda (pill): botões de ação circulares (ex.: header do chat). */
.pcrm-icon-button--round { border-radius: var(--pcrm-radius-pill); }
.pcrm-icon-button--danger { color: var(--pcrm-danger); }
.pcrm-icon-button--danger:hover:not(:disabled) {
    background: var(--pcrm-danger-soft);
    color: var(--pcrm-danger-strong);
}
/* Variante "ação de linha": realça na cor da marca (fundo afundado) no hover e
   enquanto o trigger está aberto. Converge os ícones "…"/ação dos datagrids
   (scripts/quick-replies/attributes/pipelines/roles/users). */
.pcrm-icon-button--brand:hover:not(:disabled),
.pcrm-icon-button--brand[aria-expanded="true"] {
    background: var(--pcrm-surface-sunken);
    color: var(--brand-color);
}

/* Variante "com contador": ancora um badge de contagem no canto superior direito
   do botão (ex.: sino de mensagens agendadas). O __count é escondido via [hidden]
   pelo JS quando a contagem é zero. */
.pcrm-icon-button--badged { position: relative; }
.pcrm-icon-button__count {
    position: absolute;
    top: calc(-1 * var(--pcrm-space-1));
    right: calc(-1 * var(--pcrm-space-1));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: var(--pcrm-space-4);
    min-width: var(--pcrm-space-4);
    padding: 0 var(--pcrm-space-1);
    border-radius: var(--pcrm-radius-pill);
    background: var(--pcrm-danger);
    color: var(--pcrm-text-on-brand);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
    line-height: 1;
    pointer-events: none;
}
.pcrm-icon-button__count[hidden] { display: none; }

/* ============================================================
   UTILITÁRIOS DE ÍCONE — globais (antes inline no layout).
   .pcrm-ic   = SVG inline dimensionado em 1em (Tabler via $pcrmIcon/v-html).
   .pcrm-rot-180 = gira um chevron 180° (toggle por JS no atendimento/captação).
============================================================ */

.pcrm-ic {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

.pcrm-rot-180 {
    transform: rotate(180deg);
    transition: transform 150ms ease;
}

/* ───────────────────────────────────────────────────────────────────────────
   Edição inline (in-place edit dos atributos: select / lookup / multiselect /
   boolean / address, e o status do lead).

   Substitui as alturas arbitrárias do Tailwind (h-[34px] / h-[18px] /
   min-h-[38px]) usadas nos overrides dos controles do core. Sem build/JIT
   local (ver CLAUDE.md), essas classes nunca entram no bundle servido e a
   altura compacta pretendida jamais aplicava — as linhas renderizavam na
   altura intrínseca. Aqui a altura vem de um token, então passa a valer.
   ─────────────────────────────────────────────────────────────────────────── */

/* Linha do controle inline (display, shimmer e o badge de status): altura
   compacta padrão = --sm da tabela de controles (32px). */
.pcrm-inline-edit {
    min-height: var(--pcrm-control-h-sm);
}

/* Controle em edição (input/select): força a altura compacta --sm por cima do
   form-control do core (mesma necessidade do antigo !h-[34px], hoje 32px). */
.pcrm-inline-edit__control {
    height: var(--pcrm-control-h-sm) !important;
}

/* Caixa de chips do multiselect em edição: cresce com os itens, nunca abaixo
   da altura compacta. */
.pcrm-inline-edit__box {
    min-height: var(--pcrm-control-h-sm);
}

/* Edição inline — extensão da mãe .pcrm-inline-edit (componentes de override
   do core: lookup/multiselect/select/boolean/address). Só modificadores de
   COR/estado dark-aware; a geometria base mora em components/inline-edit.css.

   Conserta os no-op de dark do markup desses controles: classes Tailwind como
   `hover:bg-gray-100 dark:hover:bg-gray-800` eram purgadas do bundle do admin
   → fundo/borda claros (ou ausentes) no dark. Aqui tudo vem de token, logo o
   dark resolve sozinho. */

/* Container clicável: realce de hover quando o campo é editável (allowEdit). */
.pcrm-inline-edit--interactive {
    transition: background-color 120ms ease;
}
.pcrm-inline-edit--interactive:hover {
    border-radius: var(--pcrm-radius);
    background: var(--pcrm-surface-hover);
}

/* Caixa de chips do multiselect em edição: moldura de input dark-aware.
   (a altura mínima vem do .pcrm-inline-edit__box da mãe.) */
.pcrm-inline-edit__box--framed {
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius);
    background: var(--pcrm-surface-sunken);
    color: var(--pcrm-text);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.pcrm-inline-edit__box--framed:hover { border-color: var(--pcrm-border-strong); }
.pcrm-inline-edit__box--framed:focus-within {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 2px var(--pcrm-brand-ring);
}

/* Barra flutuante de ações (editar/salvar) sobre o campo — fundo = surface
   (era bg-white dark:bg-gray-900, com o dark:* no-op = barra branca no dark). */
.pcrm-inline-edit__actions {
    background: var(--pcrm-surface);
}

/* Linha estática (read-only, ex.: "Data de criação"/"Tags"): texto no tamanho
   base + recuo pra alinhar com os controles editáveis das outras linhas. */
.pcrm-inline-edit--static {
    padding-left: var(--pcrm-space-1_5);
    font-size: var(--pcrm-text-base);
}

/* Display do endereço (widget do core): mesmo recuo do .pcrm-single-display dos campos
   inline (space-2), alinhando o valor com Responsável/etc. O markup do core usava `pl-2.5`
   + `border` (Tailwind não compila no bundle purgado) → o texto saía desalinhado. */
.pcrm-address-display {
    display: flex;
    align-items: center;
    padding-left: var(--pcrm-space-2);
}


/* KPI / stat-card — cartão de métrica (ícone + label + valor + delta). Token-only, dark-aware.
   Generaliza o `.dp-kpi` do dashboard (que era bespoke demo). O ícone reusa `.pcrm-icon-badge`. */
.pcrm-kpi {
    display: grid;
    gap: var(--pcrm-space-2);
    padding: var(--pcrm-space-4);
    background: var(--pcrm-surface);
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius-lg);
    box-shadow: var(--pcrm-shadow-card);
}
.pcrm-kpi__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pcrm-space-2);
}
.pcrm-kpi__label {
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-semibold);
}
.pcrm-kpi__value {
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-3xl);
    font-weight: var(--pcrm-fw-bold);
    line-height: var(--pcrm-lh-tight);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.pcrm-kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--pcrm-space-0_5);
    width: fit-content;
    padding: var(--pcrm-space-0_5) var(--pcrm-space-2);
    border-radius: var(--pcrm-radius-pill);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
}
.pcrm-kpi__delta--up   { background: var(--pcrm-success-soft);  color: var(--pcrm-success); }
.pcrm-kpi__delta--down { background: var(--pcrm-danger-soft);   color: var(--pcrm-danger); }
.pcrm-kpi__delta--flat { background: var(--pcrm-surface-sunken); color: var(--pcrm-text-muted); }

/* components/lead-quick.css
 * Shared "quick create lead" modal styles.
 *
 * Consolidated from the duplicated (and drifted) `.pcrm-lead-quick-*` blocks
 * previously copied into screens/leads-kanban.css, screens/leads-index.css,
 * screens/contacts-persons.css and screens/contacts-organizations.css.
 *
 * This file lives in components/ so it is concatenated into the global
 * theme.css (loaded AFTER the per-screen <link>s) and therefore applies on
 * every page that renders the quick-create-lead modal.
 *
 * Where the same selector had drifted across files, the leads-kanban.css
 * variant (the most complete superset) was kept. Only tokens already defined
 * in tokens.css are used.
 */

        /* ── Casca migrada pra mãe (.pcrm-modal-overlay / .pcrm-modal / __header / __body) ──
         * Os blocos estruturais .pcrm-lead-quick-create-layer/-modal/-header/-body foram
         * removidos: todos os 7 modais da família agora carregam as classes da mãe, que
         * provê overlay, surface/borda/raio/sombra (tokenizados, inclusive dark), header e
         * padding. A largura vem dos modificadores (.pcrm-modal--xl 920 / --sm 520 / default
         * 600) e o overflow:visible (lookups escapando) é o default da mãe.
         * As classes bespoke seguem no markup só como HOOK de: (a) regras aninhadas dos
         * lookups do core (`.pcrm-lead-quick-create-modal .relative > …`) e (b) fine-tuning
         * mobile (@media abaixo). Nada de estrutura/cor cravada duplicada aqui. */

        .pcrm-lead-quick-panel {
            display: grid;
            gap: var(--pcrm-space-6);
        }

        .pcrm-quick-panel-enter-active,
        .pcrm-quick-panel-leave-active {
            transition: opacity 180ms ease, transform 180ms ease;
        }

        .pcrm-quick-panel-enter-from {
            opacity: 0;
            transform: translateX(18px);
        }

        .pcrm-quick-panel-leave-to {
            opacity: 0;
            transform: translateX(-18px);
        }

        .pcrm-lead-quick-create-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--pcrm-space-5);
        }

        .pcrm-lead-quick-field {
            display: grid;
            gap: var(--pcrm-space-3);
            min-width: 0;
        }

        .pcrm-lead-quick-money {
            display: flex;
            min-height: var(--pcrm-control-h-md);
            width: 100%;
            align-items: center;
            gap: var(--pcrm-space-3);
            border: 1px solid var(--pcrm-border);
            border-radius: var(--pcrm-radius);
            background: var(--pcrm-surface-sunken);
            padding: 0 var(--pcrm-space-4);
            transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
        }

        .pcrm-lead-quick-money:focus-within {
            border-color: var(--brand-color);
            background: var(--pcrm-surface);
            box-shadow: 0 0 0 2px var(--pcrm-brand-ring);
        }

        .pcrm-lead-quick-money-symbol {
            flex: 0 0 auto;
            color: var(--pcrm-text);
            font-size: var(--pcrm-text-base);
            font-weight: var(--pcrm-fw-bold);
            line-height: 1;
            white-space: nowrap;
        }

        .pcrm-lead-quick-money-input {
            min-width: 0;
            flex: 1 1 auto;
            border: 0;
            background: transparent;
            color: var(--pcrm-text);
            font-size: var(--pcrm-text-base);
            font-weight: var(--pcrm-fw-semibold);
            outline: none;
            padding: 0;
        }

        .pcrm-lead-quick-select-wrap {
            position: relative;
        }

        .pcrm-lead-quick-select-arrow {
            pointer-events: none;
            position: absolute;
            top: 50%;
            right: 16px;
            transform: translateY(-50%);
            color: var(--pcrm-text-muted);
            font-size: var(--pcrm-text-lg);
            line-height: 1;
        }

        .pcrm-lead-quick-lookup {
            position: relative;
        }

        /* trigger/value/placeholder/menu(visual)/results migrados pra mãe
           (.pcrm-dropdown-trigger/__value/__placeholder + .pcrm-dropdown-menu/-results).
           Sobram só os helpers do lookup: posição do menu (padding:0 ⇒ busca
           full-width; o respiro das opções vem do .pcrm-dropdown-results) e a
           busca borderless. */
        .pcrm-lookup-menu-pos {
            position: absolute;
            z-index: var(--pcrm-z-dropdown);
            top: calc(100% + 8px);
            left: 0;
            right: 0;
            min-width: 0;
            overflow: hidden;
            padding: 0;
        }

        .pcrm-lookup-search {
            min-height: var(--pcrm-control-h-md);
            width: 100%;
            border: 0;
            border-bottom: 1px solid var(--pcrm-border);
            color: var(--pcrm-text);
            font-size: var(--pcrm-text-base);
            font-weight: var(--pcrm-fw-semibold);
            outline: none;
            padding: 0 var(--pcrm-space-4);
        }

        .pcrm-lead-quick-lookup-row {
            display: flex;
            align-items: center;
            gap: var(--pcrm-space-1);
            border-radius: 8px;
            transition: background-color 120ms ease;
        }

        .pcrm-lead-quick-lookup-row:hover {
            background: var(--pcrm-surface-hover);
        }

        .pcrm-lead-quick-lookup-row .pcrm-dropdown-option {
            min-width: 0;
            flex: 1 1 auto;
        }

        .pcrm-lead-quick-lookup-row .pcrm-dropdown-option:hover {
            background: transparent;
        }

        .pcrm-lead-quick-inline-edit {
            display: flex;
            height: 34px;
            width: 34px;
            flex: 0 0 auto;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            color: var(--pcrm-text-muted);
            transition: background-color 120ms ease, color 120ms ease;
        }

        .pcrm-lead-quick-inline-edit:hover,
        .pcrm-lead-quick-inline-edit:focus-visible {
            background: var(--pcrm-brand-soft);
            color: var(--brand-color);
        }

        .pcrm-lead-quick-choice-menu .pcrm-dropdown-results {
            max-height: 230px;
        }

        .pcrm-lead-quick-choice-dot {
            height: 9px;
            width: 9px;
            flex-shrink: 0;
            border-radius: 999px;
            background: var(--pcrm-border-strong);
            box-shadow: 0 0 0 4px var(--pcrm-surface-sunken);
        }

        .pcrm-dropdown-option.is-active .pcrm-lead-quick-choice-dot {
            background: var(--brand-color);
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-color) 14%, #fff);
        }

        .pcrm-lead-quick-choice-check {
            margin-left: auto;
            height: 8px;
            width: 8px;
            flex-shrink: 0;
            border-radius: 999px;
            background: var(--brand-color);
        }

        /* add/danger/empty → mãe (.pcrm-dropdown-option--add/--danger, .pcrm-dropdown-empty). */

        .dark .pcrm-lookup-search {
            border-color: #1f2937;
            background: #0f172a;
            color: #f8fafc;
        }

        .dark .pcrm-lead-quick-lookup-row:hover {
            background: #1e293b;
        }

        .dark .pcrm-lead-quick-lookup-row .pcrm-dropdown-option:hover {
            background: transparent;
        }

        .dark .pcrm-lead-quick-inline-edit {
            color: #94a3b8;
        }

        .dark .pcrm-lead-quick-inline-edit:hover,
        .dark .pcrm-lead-quick-inline-edit:focus-visible {
            background: color-mix(in srgb, var(--brand-color) 18%, #0f172a);
            color: color-mix(in srgb, var(--brand-color) 78%, #fff);
        }

        .dark .pcrm-lead-quick-choice-dot {
            background: #475569;
            box-shadow: 0 0 0 4px #1e293b;
        }

        .dark .pcrm-dropdown-option.is-active .pcrm-lead-quick-choice-dot {
            background: color-mix(in srgb, var(--brand-color) 82%, #fff);
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-color) 22%, #0f172a);
        }

        .pcrm-lead-quick-phone {
            position: relative;
            display: flex;
            min-height: var(--pcrm-control-h-md);
            width: 100%;
            align-items: center;
            gap: var(--pcrm-space-3);
            border: 1px solid var(--pcrm-border);
            border-radius: var(--pcrm-radius);
            background: var(--pcrm-surface-sunken);
            padding: 0 var(--pcrm-space-4);
            transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
        }

        .pcrm-lead-quick-phone:focus-within {
            border-color: var(--brand-color);
            background: var(--pcrm-surface);
            box-shadow: 0 0 0 2px var(--pcrm-brand-ring);
        }

        .pcrm-lead-quick-phone-country {
            display: flex;
            flex-shrink: 0;
            align-items: center;
            gap: var(--pcrm-space-2);
            border: 0;
            background: transparent;
            color: var(--pcrm-text);
            padding: 0;
            outline: none;
        }

        .pcrm-lead-quick-phone-code {
            flex-shrink: 0;
            color: var(--pcrm-text);
            font-size: var(--pcrm-text-base);
            font-weight: var(--pcrm-fw-semibold);
            white-space: nowrap;
        }

        .pcrm-lead-quick-phone-number {
            min-width: 0;
            flex: 1;
            border: 0;
            background: transparent;
            color: var(--pcrm-text);
            font-size: var(--pcrm-text-base);
            font-weight: var(--pcrm-fw-semibold);
            outline: none;
        }

        .pcrm-lead-quick-phone-number::placeholder {
            color: var(--pcrm-text-subtle);
        }

        .pcrm-lead-quick-phone-menu {
            position: absolute;
            z-index: 120030;
            top: calc(100% + 8px);
            left: 0;
            width: min(360px, 100%);
            max-height: 240px;
            overflow-y: auto;
            border: 1px solid var(--pcrm-border);
            border-radius: var(--pcrm-radius-lg);
            background: var(--pcrm-surface);
            box-shadow: var(--pcrm-shadow-dropdown);
            padding: var(--pcrm-space-2);
        }

        .pcrm-lead-quick-phone-option {
            display: flex;
            width: 100%;
            align-items: center;
            gap: var(--pcrm-space-3);
            border: 0;
            border-radius: var(--pcrm-radius);
            background: transparent;
            color: var(--pcrm-text);
            font-size: var(--pcrm-text-base);
            font-weight: var(--pcrm-fw-semibold);
            padding: var(--pcrm-space-2);
            text-align: left;
            transition: background-color 120ms ease;
        }

        .pcrm-lead-quick-phone-option:hover {
            background: var(--pcrm-surface-hover);
        }

        .pcrm-lead-quick-phone-option-code {
            margin-left: auto;
            color: var(--pcrm-text-muted);
            font-size: var(--pcrm-text-xs);
            font-weight: var(--pcrm-fw-bold);
            white-space: nowrap;
        }

        .pcrm-lead-quick-flag {
            display: inline-block;
            height: 18px;
            width: 24px;
            flex-shrink: 0;
            border-radius: 3px;
            background-position: center;
            background-size: cover;
            box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
        }

        .pcrm-lead-quick-flag-preview {
            height: 14px;
            width: 20px;
        }

        /* Texto do preview de contato/organização — tokenizado (dark-aware). Antes a cor/fonte
           vinha do Tailwind cravado no markup (text-slate-*/dark:text-white), NO-OP no bundle
           purgado. Consumido pelos 3 previews (contato, pessoa-em-org, organização). */
        .pcrm-lead-quick-preview-name {
            color: var(--pcrm-text);
            font-size: var(--pcrm-text-base);
            font-weight: var(--pcrm-fw-bold);
            line-height: var(--pcrm-lh-snug);
        }

        .pcrm-lead-quick-preview-suffix {
            color: var(--pcrm-text-muted);
            font-weight: var(--pcrm-fw-semibold);
        }

        .pcrm-lead-quick-preview-details {
            display: flex;
            min-width: 0;
            align-items: center;
            gap: var(--pcrm-space-1);
            color: var(--pcrm-text-muted);
            font-size: var(--pcrm-text-xs);
            font-weight: var(--pcrm-fw-semibold);
            line-height: var(--pcrm-lh-snug);
        }

        .pcrm-lead-quick-preview-meta {
            color: var(--pcrm-text-muted);
            font-size: var(--pcrm-text-xs);
            font-weight: var(--pcrm-fw-semibold);
            line-height: var(--pcrm-lh-snug);
        }

        .pcrm-lead-quick-preview-phone {
            display: inline-flex;
            min-width: 0;
            align-items: center;
            gap: var(--pcrm-space-1);
        }

        .dark .pcrm-lead-quick-phone-menu {
            border-color: var(--pcrm-border);
            background: var(--pcrm-surface-sunken);
        }

        .dark .pcrm-lead-quick-phone-option-code {
            color: #94a3b8;
        }

        .pcrm-lead-quick-avatar-panel {
            position: relative;
            display: flex;
            align-items: center;
            gap: var(--pcrm-space-4);
            border: 1px solid var(--pcrm-border);
            border-radius: 8px;
            background: var(--pcrm-surface-hover);
            padding: var(--pcrm-space-4);
        }

        .pcrm-lead-quick-avatar-image {
            height: 58px;
            width: 58px;
            flex-shrink: 0;
            overflow: hidden;
            border-radius: 999px;
            border: 1px solid var(--pcrm-border);
            background: var(--pcrm-surface);
        }

        .pcrm-lead-quick-avatar-image img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

        .pcrm-lead-quick-avatar-menu {
            position: absolute;
            z-index: 120030;
            top: calc(100% + 8px);
            left: 0;
            width: min(360px, 100%);
            border: 1px solid var(--pcrm-border);
            border-radius: 10px;
            background: var(--pcrm-surface);
            box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
            padding: var(--pcrm-space-3);
        }

        .pcrm-lead-quick-avatar-grid {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: var(--pcrm-space-2);
        }

        .pcrm-lead-quick-avatar-option {
            aspect-ratio: 1;
            overflow: hidden;
            border: 2px solid transparent;
            border-radius: 999px;
            background: var(--pcrm-surface-sunken);
            padding: var(--pcrm-space-0_5);
            transition: border-color 140ms ease, transform 140ms ease;
        }

        .pcrm-lead-quick-avatar-option:hover,
        .pcrm-lead-quick-avatar-option-active {
            border-color: var(--brand-color);
            transform: translateY(-1px);
        }

        .pcrm-lead-quick-avatar-option img {
            height: 100%;
            width: 100%;
            border-radius: 999px;
            object-fit: cover;
        }

        .dark .pcrm-lead-quick-avatar-panel {
            border-color: #1f2937;
            background: #0f172a;
        }

        .dark .pcrm-lead-quick-avatar-image,
        .dark .pcrm-lead-quick-avatar-menu {
            border-color: #1f2937;
            background: #111827;
        }

        .pcrm-lead-quick-create-modal .relative > .relative.inline-block.w-full > .relative.flex {
            min-height: var(--pcrm-control-h-lg);
            border-color: var(--pcrm-border);
            border-radius: 8px;
            background: var(--pcrm-surface-hover);
            color: var(--pcrm-text);
            font-size: var(--pcrm-text-base);
            padding: 0 var(--pcrm-space-4);
        }

        .dark .pcrm-lead-quick-create-modal .relative > .relative.inline-block.w-full > .relative.flex {
            border-color: #1f2937;
            background: #0f172a;
            color: #f8fafc;
        }

        .pcrm-lead-quick-create-modal .relative > .absolute.top-full {
            z-index: 120010;
        }

        .pcrm-lead-quick-create-modal .relative > .absolute.top-full ul {
            max-height: 260px;
        }

        .pcrm-lead-quick-footer {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            min-width: 0;
            align-items: center;
            gap: var(--pcrm-space-4);
            border-top: 1px solid var(--pcrm-border);
            padding-top: var(--pcrm-space-5);
        }

        .dark .pcrm-lead-quick-footer {
            border-color: #1f2937;
        }

        .pcrm-lead-quick-preview {
            display: flex;
            min-width: 0;
            align-items: center;
            gap: var(--pcrm-space-3);
        }

        .pcrm-lead-quick-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: var(--pcrm-space-3);
        }

        .pcrm-lead-quick-warning {
            border: 1px solid #fed7aa;
            border-radius: 8px;
            background: #fff7ed;
            color: #9a3412;
            font-size: var(--pcrm-text-base);
            font-weight: var(--pcrm-fw-bold);
            line-height: 1.45;
            padding: var(--pcrm-space-3) var(--pcrm-space-3);
        }

        .dark .pcrm-lead-quick-warning {
            border-color: #9a3412;
            background: #431407;
            color: #fed7aa;
        }

        @media (max-width: 720px) {
            .pcrm-lead-quick-create-layer {
                align-items: flex-start;
                padding: var(--pcrm-space-3);
            }

            .pcrm-lead-quick-create-header {
                padding: var(--pcrm-space-5);
            }

            .pcrm-lead-quick-create-body {
                gap: var(--pcrm-space-5);
                padding: var(--pcrm-space-5) var(--pcrm-space-5) var(--pcrm-space-6);
            }

            .pcrm-lead-quick-create-grid {
                grid-template-columns: 1fr;
            }

            .pcrm-lead-quick-footer {
                grid-template-columns: 1fr;
            }

            .pcrm-lead-quick-preview {
                align-items: flex-start;
            }

            .pcrm-lead-quick-actions {
                justify-content: flex-end;
            }
        }

/* ============================================================
   FONTE ÚNICA das classes de controle "legadas" do CRM.

   Essas classes (.pcrm-lead-quick-lookup-*, .pcrm-about-input,
   .pcrm-lead-quick-money*) estavam COPIADAS inline em
   11+ blades, cada cópia
   com valor próprio — por isso cada modal aparecia num tamanho.

   Aqui ficam as definições CANÔNICAS (44px + surface-sunken + foco da
   marca), em UM lugar só. Vence as cópias que ainda vivem nos
   screens/*.css por ORDEM DE CARGA: o theme.css (que inclui este
   arquivo) é linkado DEPOIS dos <link> de tela, então ganha na cascata
   sem nenhum override forçado. Propriedades de posição/layout (z-index,
   top/bottom, min/max-width) ficam por conta de cada contexto.

   Para re-tematizar: edite só aqui.
============================================================ */

/* ---------- MONEY (valor com prefixo) ---------- */
.pcrm-lead-quick-money {
    min-height: var(--pcrm-control-h-md);
    background: var(--pcrm-surface-sunken);
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius);
}
.pcrm-lead-quick-money:focus-within {
    border-color: var(--brand-color);
    background: var(--pcrm-surface);
    box-shadow: 0 0 0 2px var(--pcrm-brand-ring);
}
.pcrm-lead-quick-money-symbol,
.pcrm-lead-quick-money-input { color: var(--pcrm-text); }

/* ---------- LOOKUP: trigger/menu/option migrados pra mãe (.pcrm-dropdown-*).
   Sobra só a busca borderless re-tematizada aqui. ---------- */
.pcrm-lookup-search { color: var(--pcrm-text); }
.pcrm-lookup-search::placeholder { color: var(--pcrm-text-subtle); }

/* ---------- BOTÕES DE ÍCONE da toolbar de origem ----------
   view-switcher (kanban/lista/config/exportar) + engrenagem de etapas:
   mesmo estilo e tamanho, de um lugar só (ícone 24px, padding 6px,
   redondo, hover/ativo na cor da marca). */
.pcrm-leads-view-switcher-link,
.pcrm-pipeline-settings-stage-settings-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--pcrm-space-2);
    border: 0;
    border-radius: var(--pcrm-radius);
    background: transparent;
    color: var(--pcrm-text-muted);
    cursor: pointer;
}
.pcrm-leads-view-switcher-link:hover,
.pcrm-leads-view-switcher-link-active,
.pcrm-pipeline-settings-stage-settings-button:hover,
.pcrm-pipeline-settings-stage-settings-button-active {
    background: var(--pcrm-surface-hover);
    color: var(--brand-color);
}
.pcrm-leads-view-switcher-link svg,
.pcrm-pipeline-settings-stage-settings-button svg {
    width: 24px;
    height: 24px;
    padding: 0;
}

/* Modal de legenda de mídia (roteiro / respostas rápidas) — textarea com realce de variáveis. */
.pcrm-media-caption-layer {
    position: fixed; inset: 0; z-index: 130000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, 0.55); padding: var(--pcrm-space-6);
}
.pcrm-media-caption-modal {
    width: min(560px, 92vw);
    background: var(--pcrm-surface);
    border-radius: 14px;
    box-shadow: var(--pcrm-shadow-modal);
    display: flex; flex-direction: column; overflow: visible;
}
.pcrm-media-caption-header,
.pcrm-media-caption-footer {
    display: flex; align-items: center; justify-content: space-between; padding: var(--pcrm-space-4) var(--pcrm-space-5);
}
.pcrm-media-caption-footer { justify-content: flex-end; gap: var(--pcrm-space-3); border-top: 1px solid var(--pcrm-border); }
.pcrm-media-caption-header h3 { font-size: var(--pcrm-text-lg); font-weight: var(--pcrm-fw-semibold); color: var(--pcrm-text); }
.pcrm-media-caption-close { background: none; border: 0; cursor: pointer; color: var(--pcrm-text-muted); font-size: var(--pcrm-text-lg); }
.pcrm-media-caption-body { padding: var(--pcrm-space-1) var(--pcrm-space-5) var(--pcrm-space-4); display: flex; flex-direction: column; gap: var(--pcrm-space-4); }
.pcrm-media-caption-preview {
    display: flex; align-items: center; justify-content: center;
    background: var(--pcrm-surface-sunken); border-radius: 10px; padding: var(--pcrm-space-4); min-height: 220px;
}
.pcrm-media-caption-preview img { max-width: 100%; max-height: 360px; border-radius: var(--pcrm-radius); object-fit: contain; }
.pcrm-media-caption-file { display: flex; flex-direction: column; align-items: center; gap: var(--pcrm-space-2); color: var(--pcrm-text-muted); }
.pcrm-media-caption-file-name { font-weight: var(--pcrm-fw-semibold); word-break: break-all; text-align: center; }
.pcrm-media-caption-composer { display: flex; flex-direction: column; gap: var(--pcrm-space-2); }
.pcrm-media-caption-field {
    position: relative; width: 100%;
    border: 1px solid var(--pcrm-border); border-radius: 10px;
    background: var(--pcrm-surface-sunken); overflow: hidden;
}
.pcrm-media-caption-input,
.pcrm-media-caption-highlight {
    box-sizing: border-box; width: 100%; margin: 0; border: 0;
    padding: var(--pcrm-space-3) var(--pcrm-space-3); font-family: inherit;
    font-size: var(--pcrm-text-base); font-weight: var(--pcrm-fw-regular); line-height: var(--pcrm-lh-snug);
    white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; background: transparent;
}
.pcrm-media-caption-highlight {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    color: var(--pcrm-text); z-index: 1;
}
.pcrm-media-caption-input {
    position: relative; z-index: 2; resize: none; outline: none;
    min-height: 96px; max-height: 220px; overflow-y: auto;
    color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--pcrm-text);
}
.pcrm-media-caption-input::placeholder { color: var(--pcrm-text-subtle); -webkit-text-fill-color: var(--pcrm-text-subtle); }
.pcrm-media-caption-tools { display: flex; align-items: center; gap: var(--pcrm-space-1); padding-top: var(--pcrm-space-1); }
.pcrm-media-caption-count { text-align: center; font-size: var(--pcrm-text-xs); color: var(--pcrm-text-subtle); }

.pcrm-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 120000;
    display: flex;
    align-items: flex-start;
    padding: var(--pcrm-space-10) var(--pcrm-space-6);
    overflow-y: auto;
    background: var(--pcrm-modal-backdrop);
}
.pcrm-modal-overlay--centered { align-items: center; padding: 0; }
/* [hidden] sempre esconde o overlay (vence o display:flex acima). */
.pcrm-modal-overlay[hidden] { display: none; }

/* Empilhamento de overlays que abrem POR CIMA de outro overlay (ex.: "Adicionar grupo/campo"
   sobre "Gerenciar campos"). Mora na mãe, no MESMO arquivo do z-index base, p/ garantir a
   ordem de cascata — fora dela o CSS de tela carrega antes e perde o desempate de fonte. */
.pcrm-modal-overlay--stack-1 { z-index: 120001; }
.pcrm-modal-overlay--stack-2 { z-index: 120002; }

.pcrm-modal {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background: var(--pcrm-surface);
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius-lg);
    box-shadow: var(--pcrm-shadow-modal);
}
.pcrm-modal--sm { max-width: 520px; }
.pcrm-modal--lg { max-width: 720px; }
/* Mobile: o modal vira bottom-sheet full-width encostado embaixo (raio só no topo). */
@media (max-width: 640px) {
    .pcrm-modal-overlay { align-items: flex-end; padding: 0; }
    .pcrm-modal,
    .pcrm-modal--sm, .pcrm-modal--lg, .pcrm-modal--xl, .pcrm-modal--2xl, .pcrm-modal--xxl {
        max-width: 100%;
        margin: 0;
        border-radius: var(--pcrm-radius-lg) var(--pcrm-radius-lg) 0 0;
        max-height: 92vh;
    }
}
.pcrm-modal--xl { max-width: 920px; }
.pcrm-modal--2xl { max-width: 1280px; }
/* Modal de configuração extra-largo (ex.: configurações de origem/pipeline). */
.pcrm-modal--xxl { max-width: 1520px; }
/* Tamanho FIXO dos modais-assistente do CRM (1000×760) — largura/altura travadas
   (não "pula" de altura entre etapas). Fonte única, consumida pelos 3 wizards:
   importar negócios, webhook de entrada e migração. Combine com .pcrm-modal--scroll
   quando o corpo rola dentro da altura fixa (webhook/migração); o de importar usa
   flex próprio + overflow:visible. Vem depois de .pcrm-modal pra vencer width/max-width. */
.pcrm-modal--wizard {
    width: min(1000px, calc(100vw - 2 * var(--pcrm-space-6)));
    height: min(760px, calc(100vh - 2 * var(--pcrm-space-6)));
    max-width: none;
}
/* Modal alto com header/footer fixos e corpo rolável (editores, composers). */
.pcrm-modal--scroll {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 80px);
}
.pcrm-modal--scroll .pcrm-modal__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Modal grande de dimensionamento FIXO (largura via .pcrm-modal--xxl = 1520px; altura 990px)
   com header/footer fixos + corpo rolável (.pcrm-modal--scroll). Fonte única consumida
   pelo histórico de integração e pelas configurações de origem/pipeline. */
.pcrm-modal--fixed {
    width: min(100%, 1520px);
    height: min(100%, 990px);
    min-height: min(100%, 990px);
    overflow: hidden;
}

.pcrm-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--pcrm-radius);
    background: transparent;
    color: var(--pcrm-text-muted);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.pcrm-modal__close:hover {
    background: var(--pcrm-surface-hover);
    color: var(--pcrm-text);
}

.pcrm-modal__header {
    display: flex;
    align-items: center;
    gap: var(--pcrm-space-3);
    padding: var(--pcrm-space-5) var(--pcrm-space-6);
    border-bottom: 1px solid var(--pcrm-border);
}
.pcrm-modal__title {
    font-size: var(--pcrm-text-lg);
    font-weight: var(--pcrm-fw-semibold);
    line-height: var(--pcrm-lh-snug);
    color: var(--pcrm-text);
}
/* Subtítulo opcional sob o título (header com título + descrição curta). */
.pcrm-modal__subtitle {
    margin-top: var(--pcrm-space-0_5);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-semibold);
    line-height: var(--pcrm-lh-normal);
    color: var(--pcrm-text-muted);
}
.pcrm-modal__body { padding: var(--pcrm-space-5) var(--pcrm-space-6); }
.pcrm-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--pcrm-space-3);
    padding: var(--pcrm-space-4) var(--pcrm-space-6);
    border-top: 1px solid var(--pcrm-border);
}
/* Footer com info à esquerda + ações à direita (ex.: "X de Y permissões" + salvar). */
.pcrm-modal__footer--between { justify-content: space-between; }

/* Formulário dentro de um modal (serve tanto o .pcrm-modal quanto o modal do
   core). Campos empilhados com label legível + linha de ações alinhada à direita. */
.pcrm-modal-form { display: grid; gap: var(--pcrm-space-5); }
.pcrm-modal-form__field { display: grid; gap: var(--pcrm-space-3); min-width: 0; }
/* Dois campos lado a lado (ex.: País+Estado, Cidade+CEP). Empilha no mobile. */
.pcrm-modal-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pcrm-space-4); }
@media (max-width: 640px) { .pcrm-modal-form__row { grid-template-columns: 1fr; } }
.pcrm-modal-form__label {
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-semibold);
    line-height: var(--pcrm-lh-snug);
}
.pcrm-modal-form__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--pcrm-space-3);
}

.pcrm-page-header {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--pcrm-border);
    border-radius: 0;
    box-shadow: none;
    display: grid;
    gap: var(--pcrm-space-3);
    padding: 0 0 var(--pcrm-space-5);
}
.pcrm-page-header__row {
    align-items: center;
    display: flex;
    gap: var(--pcrm-space-4);
    justify-content: space-between;
}
.pcrm-page-header__main { align-items: center; display: flex; gap: var(--pcrm-space-4); min-width: 0; }
.pcrm-page-header__icon {
    align-items: center;
    background: var(--pcrm-brand-soft);
    border: 1px solid var(--pcrm-brand-ring);
    border-radius: var(--pcrm-radius);
    color: var(--brand-color);
    display: inline-flex;
    flex: 0 0 42px;
    font-size: var(--pcrm-text-xl);
    height: 42px;
    justify-content: center;
    width: 42px;
}
.pcrm-page-header__copy { display: grid; gap: var(--pcrm-space-1); min-width: 0; }
.pcrm-page-header__title {
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-2xl);
    font-weight: var(--pcrm-fw-bold);
    letter-spacing: 0;
    line-height: var(--pcrm-lh-tight);
    margin: 0;
}
.pcrm-page-header__description {
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-medium);
    line-height: 18px;
    margin: 0;
}
.pcrm-page-header__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pcrm-space-3);
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .pcrm-page-header__row { flex-direction: column; align-items: flex-start; }
    .pcrm-page-header__actions { width: 100%; justify-content: flex-start; }
}
/* ============================================================
   PAGE — shell e layout de tela (container + 2 colunas).
   O CABEÇALHO é outro bloco: .pcrm-page-header (page-header.css).
   Convenção BEM (__ elemento, -- modificador). Só tokens.
============================================================ */

.pcrm-page {
    box-sizing: border-box;
    display: grid;
    gap: var(--pcrm-space-4);
    padding: var(--pcrm-space-4) var(--pcrm-space-4);   /* mobile: 16px */
}
@media (min-width: 768px) {
    .pcrm-page { padding: var(--pcrm-space-5) var(--pcrm-space-8); }   /* tablet: 20/32 */
}
@media (min-width: 1024px) {
    .pcrm-page { padding: var(--pcrm-space-5) 80px; }   /* desktop: 20/80 */
}

/* Telas com nav lateral sticky + scroll-spy precisam de fundo rolável. */
.pcrm-page--scrollspy {
    padding-bottom: 80vh;
}

.pcrm-page__body {
    display: grid;
    gap: var(--pcrm-space-4);
}

/* Layout de duas colunas: nav lateral + conteúdo. */
.pcrm-page__layout {
    display: grid;
    align-items: flex-start;
    gap: var(--pcrm-space-4);
    grid-template-columns: 190px minmax(0, 1fr);
}

.pcrm-page__main {
    display: grid;
    gap: var(--pcrm-space-4);
    min-width: 0;
}

.pcrm-page__section {
    scroll-margin-top: 92px;
}

/* Barra de ações fixa logo abaixo do navbar (topo de forms create/edit e listas).
   Converge o compound `sticky top-[60px] z-[1000] flex … rounded-lg border bg-white
   shadow-sm dark:…` (top/z arbitrários não compilam sem JIT). O hook de scroll
   `scroll-reactive-sticky` (JS) continua no elemento. */
.pcrm-sticky-bar {
    position: sticky;
    top: 60px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 62px;
    padding: var(--pcrm-space-2) var(--pcrm-space-4);
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius);
    background: var(--pcrm-surface);
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-base);
}

@media (max-width: 1120px) {
    .pcrm-page { padding-left: var(--pcrm-space-8); padding-right: var(--pcrm-space-8); }
    .pcrm-page__layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .pcrm-page { padding-left: var(--pcrm-space-4); padding-right: var(--pcrm-space-4); }
}

/* Estilos do editor de roteiro compartilhado (.pcrm-pipeline-script-*).
   Par do componente v-pipeline-script-editor. Mae unica — carregada global
   pelo ThemeController (vence os screens por ordem de carga). As copias por
   screen (scripts/leads-index/quick-replies/attendance/...) serao removidas. */

.pcrm-pipeline-script-modal {
    display: flex;
    width: min(100%, 920px);
    height: min(100%, 800px);
    max-height: min(100%, 800px);
    flex-direction: column;
    overflow: visible;
    border: 1px solid var(--pcrm-border);
    border-radius: 8px;
    background: var(--pcrm-surface);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.26);
}

.pcrm-pipeline-script-content {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: var(--pcrm-space-3);
    overflow: visible;
    padding: var(--pcrm-space-5);
}

/* Lookup de localizacao (lead-quick) dentro do editor: menu acima do modal. */
.pcrm-pipeline-script-content .pcrm-lookup-menu-pos {
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    bottom: auto;
    z-index: 120140;
}

.pcrm-pipeline-script-section-heading {
    display: grid;
    gap: var(--pcrm-space-1);
}

.pcrm-pipeline-script-section-heading p {
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-semibold);
    line-height: 18px;
}

.pcrm-pipeline-script-composer-heading {
    margin-top: auto;
}

.pcrm-pipeline-script-flow {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--pcrm-space-2);
    overflow-y: auto;
    border: 1px solid var(--pcrm-border);
    border-radius: 8px;
    background: var(--pcrm-surface-sunken);
    padding: var(--pcrm-space-3);
    scrollbar-gutter: stable;
}

.pcrm-pipeline-script-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--pcrm-space-3);
}

.pcrm-pipeline-script-action-body {
    display: grid;
    min-width: 0;
    gap: var(--pcrm-space-1);
    border-radius: 8px;
    background: var(--pcrm-msg-card-bg);
    padding: var(--pcrm-space-3) var(--pcrm-space-3);
    color: var(--pcrm-text-strong);
}

.pcrm-pipeline-script-delay-action-body {
    display: inline-flex;
    align-items: center;
    gap: var(--pcrm-space-2);
}

.pcrm-pipeline-script-delay-action-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    opacity: 0.72;
}

.pcrm-pipeline-script-delay-action-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pcrm-pipeline-script-action-title-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

.pcrm-pipeline-script-variable-token {
    color: var(--pcrm-info);
    font-weight: var(--pcrm-fw-bold);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.pcrm-pipeline-script-audio-action-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--pcrm-space-3);
    border-radius: 10px;
    background: var(--pcrm-msg-card-bg);
    padding: var(--pcrm-space-3);
    color: var(--pcrm-text-strong);
}

.pcrm-pipeline-script-audio-action-avatar {
    display: inline-flex;
    height: 48px;
    width: 48px;
    flex: 0 0 48px;
    overflow: hidden;
    border-radius: 999px;
    background: #1f2937;
}

.pcrm-pipeline-script-audio-action-avatar img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.pcrm-pipeline-script-audio-action-play {
    display: inline-flex;
    height: 32px;
    width: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    color: var(--pcrm-text-muted);
}

.pcrm-pipeline-script-audio-action-play {
    color: var(--pcrm-text-muted);
}

.pcrm-pipeline-script-audio-action-icon {
    display: block;
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.pcrm-pipeline-script-audio-action-progress {
    display: grid;
    min-width: 112px;
    flex: 1 1 auto;
    gap: var(--pcrm-space-1);
}

.pcrm-pipeline-script-audio-action-progress::before {
    display: block;
    height: 3px;
    border-radius: 999px;
    background: var(--pcrm-border-strong);
    content: '';
    grid-area: 1 / 1;
}

.pcrm-pipeline-script-audio-action-progress span {
    display: block;
    height: 3px;
    max-width: 100%;
    border-radius: 999px;
    background: var(--pcrm-text-subtle);
    content: '';
    grid-area: 1 / 1;
}

.pcrm-pipeline-script-audio-action-progress small {
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
}

.pcrm-pipeline-script-image-action-card {
    position: relative;
    display: inline-flex;
    width: min(100%, 220px);
    min-height: 180px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--pcrm-msg-card-bg);
    padding: var(--pcrm-space-4);
}

.pcrm-pipeline-script-image-action-card img {
    max-height: 140px;
    max-width: 100%;
    border-radius: 4px;
    object-fit: cover;
}

/* Com legenda: empilha (mídia em cima, legenda embaixo) em largura cheia, igual respostas rápidas */
.pcrm-pipeline-script-image-action-card.pcrm-pipeline-script-card-captioned {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    min-height: 0;
    gap: var(--pcrm-space-2);
}
.pcrm-pipeline-script-image-action-card.pcrm-pipeline-script-card-captioned img {
    max-width: min(100%, 260px);
    max-height: 180px;
    object-fit: contain;
}
.pcrm-pipeline-script-image-action-card.pcrm-pipeline-script-card-captioned .pcrm-pipeline-script-media-caption {
    width: 100%;
}
.pcrm-pipeline-script-file-action-card.pcrm-pipeline-script-card-captioned {
    flex-wrap: wrap;
    width: 100%;
    max-width: none;
}
.pcrm-pipeline-script-file-action-card.pcrm-pipeline-script-card-captioned .pcrm-pipeline-script-media-caption {
    flex-basis: 100%;
    width: 100%;
}

.pcrm-pipeline-script-file-action-card {
    display: inline-flex;
    min-width: 260px;
    max-width: 420px;
    align-items: center;
    gap: var(--pcrm-space-3);
    border-radius: 10px;
    background: var(--pcrm-msg-card-bg);
    padding: var(--pcrm-space-3);
}

.pcrm-pipeline-script-file-action-icon {
    display: inline-flex;
    height: 46px;
    width: 46px;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.pcrm-pipeline-script-file-action-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.pcrm-pipeline-script-file-action-icon-red { background: var(--pcrm-danger-tint); color: var(--pcrm-danger); }
.pcrm-pipeline-script-file-action-icon-green { background: var(--pcrm-success-soft); color: var(--pcrm-success); }
.pcrm-pipeline-script-file-action-icon-orange { background: #ffedd5; color: #ea580c; }
.pcrm-pipeline-script-file-action-icon-purple { background: #ede9fe; color: #7c3aed; }
.pcrm-pipeline-script-file-action-icon-blue { background: var(--pcrm-msg-card-border); color: var(--pcrm-info); }
.pcrm-pipeline-script-file-action-icon-slate { background: var(--pcrm-border); color: var(--pcrm-text-muted); }

.pcrm-pipeline-script-file-action-meta {
    display: grid;
    min-width: 0;
    gap: var(--pcrm-space-1);
}

.pcrm-pipeline-script-file-action-meta strong {
    overflow: hidden;
    color: var(--pcrm-text-strong);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-bold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pcrm-pipeline-script-file-action-meta small {
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
}

.pcrm-pipeline-script-action-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-bold);
}

/* Mensagem: mostra o texto inteiro (sem ...) — a área já tem scroll */
.pcrm-pipeline-script-action-title.pcrm-pipeline-script-action-title-wrap {
    overflow: visible;
    text-overflow: clip;
    white-space: pre-wrap;
    word-break: break-word;
}

.pcrm-pipeline-script-action-meta {
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
}

.pcrm-pipeline-script-action-controls {
    display: inline-flex;
    align-items: center;
    gap: var(--pcrm-space-2);
}

.pcrm-pipeline-script-action-controls button {
    display: inline-flex;
    height: 30px;
    width: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--pcrm-text-muted);
    font-weight: var(--pcrm-fw-bold);
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.pcrm-pipeline-script-action-controls button:not(.pcrm-pipeline-script-action-delete) {
    border-color: var(--pcrm-msg-card-border);
    background: #f8fbff;
    color: var(--pcrm-info);
}

.pcrm-pipeline-script-action-controls button:hover,
.pcrm-pipeline-script-action-controls button:focus-visible {
    border-color: color-mix(in srgb, var(--brand-color) 35%, #dbeafe);
    background: var(--pcrm-info-soft);
    color: var(--brand-color);
    outline: none;
    transform: translateY(-1px);
}

.pcrm-pipeline-script-action-controls button:disabled {
    cursor: not-allowed;
    border-color: var(--pcrm-border);
    background: var(--pcrm-surface-hover);
    color: var(--pcrm-border-strong);
    transform: none;
}

.pcrm-pipeline-script-action-controls .pcrm-pipeline-script-action-delete {
    color: var(--pcrm-danger);
}

.pcrm-pipeline-script-action-controls .pcrm-pipeline-script-action-delete:hover,
.pcrm-pipeline-script-action-controls .pcrm-pipeline-script-action-delete:focus-visible {
    background: var(--pcrm-danger-soft);
    color: var(--pcrm-danger-strong);
}

.pcrm-pipeline-script-flow-empty {
    display: grid;
    min-height: 100%;
    align-content: center;
    place-items: center;
    gap: var(--pcrm-space-2);
    border: 1px dashed var(--pcrm-border-strong);
    border-radius: 8px;
    color: var(--pcrm-text-subtle);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-bold);
    text-align: center;
    padding: var(--pcrm-space-4);
}

.pcrm-pipeline-script-flow-empty-icon {
    display: inline-flex;
    height: 38px;
    width: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand-color) 10%, #fff);
    color: var(--brand-color);
    font-size: var(--pcrm-text-xl);
}

.pcrm-pipeline-script-flow-empty small {
    max-width: 360px;
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-semibold);
    line-height: 18px;
}

.pcrm-pipeline-script-composer {
    flex: 0 0 auto;
    overflow: visible;
    border: 1px solid var(--pcrm-border);
    border-radius: 8px;
    background: var(--pcrm-surface);
    padding: var(--pcrm-space-3);
}

.pcrm-pipeline-script-composer-surface {
    position: relative;
    height: 78px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--pcrm-surface-sunken);
}

.pcrm-pipeline-script-textarea {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    resize: none;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: transparent;
    font-size: var(--pcrm-text-base);
    line-height: 1.5;
    outline: none;
    padding: var(--pcrm-space-3);
    caret-color: var(--pcrm-text-strong);
    -webkit-text-fill-color: transparent;
}

.pcrm-pipeline-script-textarea::placeholder {
    color: var(--pcrm-text-subtle);
    opacity: 1;
    -webkit-text-fill-color: var(--pcrm-text-subtle);
}

.pcrm-pipeline-script-textarea-highlight {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    padding: var(--pcrm-space-3);
    color: var(--pcrm-text-strong);
    font-size: var(--pcrm-text-base);
    line-height: 1.5;
    pointer-events: none;
    white-space: pre-wrap;
    word-break: break-word;
}

.pcrm-pipeline-script-delay-composer {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    z-index: 2147483647;
    width: min(248px, calc(100vw - 24px));
    border-radius: 12px;
    border: 1px solid var(--pcrm-border);
    background: var(--pcrm-surface);
    color: var(--pcrm-text);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
    transform: translateX(-50%);
}

.pcrm-pipeline-script-delay-composer::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 10px;
    height: 10px;
    border-right: 1px solid var(--pcrm-border);
    border-bottom: 1px solid var(--pcrm-border);
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
}

.pcrm-pipeline-script-delay-body {
    display: grid;
    min-width: 0;
    gap: var(--pcrm-space-3);
    padding: var(--pcrm-space-3);
}

.pcrm-pipeline-script-delay-body > * {
    min-width: 0;
    max-width: 100%;
}

.pcrm-pipeline-script-delay-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pcrm-space-2);
    border-top: 1px solid var(--pcrm-border);
    padding-top: var(--pcrm-space-3);
}

.pcrm-pipeline-script-delay-actions > button {
    width: 100%;
    justify-content: center;
}

.pcrm-pipeline-script-delay-control {
    display: flex;
    min-height: var(--pcrm-control-h-md);
    width: 100%;
    align-items: center;
    gap: var(--pcrm-space-2);
    padding: 0;
}

.pcrm-pipeline-script-delay-control .pcrm-pipeline-script-delay-input {
    min-height: var(--pcrm-control-h-md);
    min-width: 0;
    flex: 1 1 auto;
    border: 1px solid var(--pcrm-border);
    border-radius: 8px;
    background: var(--pcrm-surface-hover);
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-semibold);
    outline: none;
    padding: 0 var(--pcrm-space-4);
}

.pcrm-pipeline-script-delay-control .pcrm-pipeline-script-delay-input:focus {
    border-color: var(--brand-color);
    background: var(--pcrm-surface);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-color) 16%, transparent);
}

.pcrm-pipeline-script-delay-input::-webkit-outer-spin-button,
.pcrm-pipeline-script-delay-input::-webkit-inner-spin-button {
    margin: 0;
}

.pcrm-pipeline-script-audio-recorder {
    position: absolute;
    inset: 0;
    display: flex;
    min-height: 0;
    align-items: center;
    gap: var(--pcrm-space-4);
    border-radius: 8px;
    background: var(--pcrm-surface-sunken);
    color: var(--pcrm-text-strong);
    padding: var(--pcrm-space-3) var(--pcrm-space-6);
}

.pcrm-pipeline-script-audio-delete,
.pcrm-pipeline-script-audio-control,
.pcrm-pipeline-script-audio-send {
    display: inline-flex;
    height: 34px;
    width: 34px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.pcrm-pipeline-script-audio-delete {
    color: var(--pcrm-border-strong);
    font-size: var(--pcrm-text-xl);
}

.pcrm-pipeline-script-audio-delete:hover,
.pcrm-pipeline-script-audio-delete:focus-visible {
    background: var(--pcrm-danger-soft);
    color: #ef4444;
}

.pcrm-pipeline-script-audio-time {
    min-width: 48px;
    color: #29324f;
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-bold);
    font-variant-numeric: tabular-nums;
}

.pcrm-pipeline-script-recording-status {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: var(--pcrm-space-2);
    color: #597eff;
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-bold);
}

.pcrm-pipeline-script-recording-status i {
    display: inline-flex;
    height: 7px;
    width: 7px;
    border-radius: 999px;
    background: currentColor;
    animation: pcrm-pipeline-script-recording-pulse 1.15s ease-in-out infinite;
}

.pcrm-pipeline-script-recording-status i:nth-child(2) {
    animation-delay: 0.12s;
}

.pcrm-pipeline-script-recording-status i:nth-child(3) {
    animation-delay: 0.24s;
}

@keyframes pcrm-pipeline-script-recording-pulse {
    0%, 100% {
        opacity: 0.35;
        transform: translateY(0) scale(0.88);
    }

    50% {
        opacity: 1;
        transform: translateY(-2px) scale(1);
    }
}

.pcrm-pipeline-script-audio-control {
    color: #ff6473;
}

.pcrm-pipeline-script-audio-pause {
    border: 2px solid #ff6473;
}

.pcrm-pipeline-script-audio-pause span {
    display: block;
    width: 10px;
    height: 11px;
    border-right: 3px solid currentColor;
    border-left: 3px solid currentColor;
}

.pcrm-pipeline-script-audio-send {
    color: #5d7dff;
}

.pcrm-pipeline-script-audio-send:hover,
.pcrm-pipeline-script-audio-send:focus-visible,
.pcrm-pipeline-script-audio-control:hover,
.pcrm-pipeline-script-audio-control:focus-visible {
    background: var(--pcrm-info-soft);
    transform: translateY(-1px);
}

.pcrm-pipeline-script-audio-recorder-paused {
    gap: var(--pcrm-space-3);
}

.pcrm-pipeline-script-audio-player {
    min-width: 0;
    width: 100%;
    height: 38px;
    flex: 1 1 auto;
}

.pcrm-pipeline-script-delay-composer input {
    width: 100%;
}

.pcrm-pipeline-script-delay-unit {
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
    white-space: nowrap;
}

.pcrm-pipeline-script-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--pcrm-space-2);
    margin-top: var(--pcrm-space-3);
    border-top: 1px solid var(--pcrm-border);
    padding-top: var(--pcrm-space-3);
}

.pcrm-pipeline-script-tool {
    display: inline-flex;
    height: 34px;
    min-width: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--pcrm-text-subtle);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-bold);
    transition: background-color 160ms ease, color 160ms ease;
}

.pcrm-pipeline-script-tool-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    color: currentColor;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pcrm-pipeline-script-add-button {
    margin-left: auto;
}

.pcrm-pipeline-script-footer {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: var(--pcrm-space-2);
    margin-top: var(--pcrm-space-1);
    border-top: 1px solid var(--pcrm-surface-sunken);
    padding-top: var(--pcrm-space-4);
}

.pcrm-pipeline-script-tool:hover,
.pcrm-pipeline-script-tool:focus-visible {
    background: var(--pcrm-surface-sunken);
    color: var(--brand-color);
    outline: none;
}

.pcrm-pipeline-script-tool:disabled {
    cursor: not-allowed;
    color: var(--pcrm-border-strong);
    background: transparent;
}

.pcrm-pipeline-script-emoji-picker,
.pcrm-pipeline-script-popover,
.pcrm-pipeline-script-variable-menu {
    position: absolute;
    z-index: 120170;
    bottom: calc(100% + 8px);
    left: 0;
    overflow: hidden;
    border: 1px solid var(--pcrm-border);
    border-radius: 8px;
    background: var(--pcrm-surface);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
    padding: var(--pcrm-space-2);
}

.pcrm-pipeline-script-emoji-picker {
    display: grid;
    width: 352px;
    min-height: 420px;
    overflow: hidden;
    padding: 0;
}

.pcrm-pipeline-script-emoji-mount,
.pcrm-pipeline-script-emoji-state {
    grid-area: 1 / 1;
}

.pcrm-pipeline-script-emoji-mount {
    min-height: 420px;
}

.pcrm-pipeline-script-emoji-picker em-emoji-picker {
    width: 100%;
    height: 420px;
    --border-radius: 8px;
    --font-family: inherit;
}

.pcrm-pipeline-script-emoji-state {
    display: grid;
    min-height: 420px;
    place-items: center;
    padding: var(--pcrm-space-5);
    text-align: center;
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-bold);
}

.pcrm-pipeline-script-popover {
    display: grid;
    grid-template-columns: repeat(4, 34px);
    gap: var(--pcrm-space-1);
}

.pcrm-pipeline-script-popover button,
.pcrm-pipeline-script-variable-menu button {
    border-radius: 6px;
    color: var(--pcrm-text-strong);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-bold);
    transition: background-color 160ms ease, color 160ms ease;
}

.pcrm-pipeline-script-popover button {
    height: 34px;
}

.pcrm-pipeline-script-variable-menu {
    display: grid;
    width: 260px;
    gap: var(--pcrm-space-1);
}

.pcrm-pipeline-script-variable-menu button {
    padding: var(--pcrm-space-3);
    text-align: left;
}

.pcrm-pipeline-script-popover button:hover,
.pcrm-pipeline-script-variable-menu button:hover,
.pcrm-pipeline-script-popover button:focus-visible,
.pcrm-pipeline-script-variable-menu button:focus-visible {
    background: var(--pcrm-surface-hover);
    color: var(--brand-color);
    outline: none;
}

/* Campos do modal do editor (label + input nativo do roteiro). Vem do scripts.css. */
.pcrm-pipeline-script-modal .pcrm-pipeline-settings-field {
    display: grid;
    width: 100%;
    gap: var(--pcrm-space-2);
}

.pcrm-pipeline-script-modal .pcrm-pipeline-settings-field > span {
    color: var(--pcrm-text-strong);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-bold);
    line-height: 1.35;
    transform: translateY(2px);
}

/* Legenda de mídia (texto sob imagem/arquivo) — base vem do scripts.css. */
.pcrm-pipeline-script-media-editable { cursor: pointer; }
.pcrm-pipeline-script-media-caption {
    margin-top: var(--pcrm-space-2); font-size: var(--pcrm-text-base); font-weight: var(--pcrm-fw-semibold); line-height: 1.4; color: var(--pcrm-text-strong);
    white-space: pre-wrap; word-break: break-word;
}

/* ===== Dark mode (overrides carregados da versao canonica do leads-index) ===== */

.dark .pcrm-pipeline-script-modal,
.dark .pcrm-pipeline-script-composer,
.dark .pcrm-pipeline-script-emoji-picker,
.dark .pcrm-pipeline-script-popover,
.dark .pcrm-pipeline-script-variable-menu {
    border-color: #1f2937;
    background: #111827;
}

.dark .pcrm-pipeline-script-action-title,
.dark .pcrm-pipeline-script-popover button,
.dark .pcrm-pipeline-script-variable-menu button,
.dark .pcrm-pipeline-script-audio-recorder,
.dark .pcrm-pipeline-script-delay-composer {
    color: #e2e8f0;
}

.dark .pcrm-pipeline-script-section-heading p,
.dark .pcrm-pipeline-script-action-meta,
.dark .pcrm-pipeline-script-flow-empty,
.dark .pcrm-pipeline-script-emoji-state,
.dark .pcrm-pipeline-script-flow-empty small {
    color: #94a3b8;
}

.dark .pcrm-pipeline-script-flow-empty-icon {
    background: color-mix(in srgb, var(--brand-color) 16%, #0f172a);
}

.dark .pcrm-pipeline-script-delay-composer::after {
    border-color: #1f2937;
}

.dark .pcrm-pipeline-script-delay-control .pcrm-pipeline-script-delay-input {
    border-color: #1f2937;
    background: #0f172a;
    color: #f8fafc;
}

.dark .pcrm-pipeline-script-toolbar {
    border-color: #1f2937;
}

.dark .pcrm-pipeline-script-flow,
.dark .pcrm-pipeline-script-composer-surface,
.dark .pcrm-pipeline-script-delay-composer,
.dark .pcrm-pipeline-script-audio-recorder {
    border-color: #1f2937;
    background: #0f172a;
    color: #e2e8f0;
}

.dark .pcrm-pipeline-script-textarea {
    background: transparent;
    color: transparent;
    caret-color: #e2e8f0;
    -webkit-text-fill-color: transparent;
}

.dark .pcrm-pipeline-script-textarea-highlight {
    color: #e2e8f0;
}

.dark .pcrm-pipeline-script-action-body {
    background: color-mix(in srgb, var(--brand-color) 16%, #0f172a);
    color: #e2e8f0;
}

.dark .pcrm-pipeline-script-tool:hover,
.dark .pcrm-pipeline-script-action-controls button:hover,
.dark .pcrm-pipeline-script-popover button:hover,
.dark .pcrm-pipeline-script-variable-menu button:hover {
    background: #0f172a;
}

.dark .pcrm-pipeline-script-action-controls button:not(.pcrm-pipeline-script-action-delete) {
    border-color: #272e3e;
    background: #0f1f3a;
    color: #93c5fd;
}

.dark .pcrm-pipeline-script-action-controls button:disabled {
    border-color: #1f2937;
    background: #111827;
    color: #475569;
}

.dark .pcrm-pipeline-script-modal .pcrm-pipeline-settings-field > span {
    color: #cbd5e1;
}

.dark .pcrm-pipeline-script-media-caption { color: #cbd5e1; }

/* Localização do roteiro (Grupo/Origem/Etapa lado a lado): pertence ao editor
   compartilhado v-pipeline-script-editor — vale em QUALQUER tela que o use (catálogo,
   origins-sidebar, settings, view do lead). Antes triplicado nas screens. */
.pcrm-script-modal-location {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--pcrm-space-3);
}

/* Modo agendamento: só Data + Hora ocupam a linha — 2 colunas iguais (em vez
   de 3, que deixaria a 3ª vazia e encolheria os campos à esquerda). */
.pcrm-script-modal-location--schedule {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Modo agendamento (Data/Hora): o label usa .pcrm-modal-form__label (sem margem própria)
   dentro de .pcrm-form-field (sem gap) — recompõe o respiro label→input igual aos demais. */
.pcrm-script-modal-location .pcrm-form-field .pcrm-modal-form__label {
    margin-bottom: var(--pcrm-space-2);
}

/* Progress bar — trilho + preenchimento. Largura via --pcrm-progress (0%-100%). Token-only. */
.pcrm-progress {
    width: 100%;
    height: var(--pcrm-space-2);
    background: var(--pcrm-surface-sunken);
    border-radius: var(--pcrm-radius-pill);
    overflow: hidden;
}
.pcrm-progress__bar {
    height: 100%;
    width: var(--pcrm-progress, 0%);
    background: var(--brand-color);
    border-radius: inherit;
    transition: width 200ms ease;
}

/* ───────────────────────────────────────────────────────────────────────────
   Painel de RESUMO somente leitura (.pcrm-readonly-fields)

   Coluna esquerda de lead/contato: é um resumo, a edição mora em outro lugar.
   Desliga o clique de edição das células de valor e esconde o placeholder dos
   campos vazios (read-only não mostra nada no lugar). Cobre os DOIS
   renderizadores de campo desses painéis:
   os componentes próprios (.pcrm-single-*) e o editor inline do core
   (.pcrm-inline-empty). Consumido por: contato (Sobre a Pessoa) e lead
   (Sobre o Negócio).
   ─────────────────────────────────────────────────────────────────────────── */

/* Sem clique de edição nas células de valor. */
.pcrm-readonly-fields .font-medium { pointer-events: none; }

/* Campos próprios vazios: esconde o "Clique para preencher" (read-only não
   mostra placeholder nem nada no lugar). */
.pcrm-readonly-fields .pcrm-single-ph { font-size: 0; }

/* Editor inline do core vazio: apaga o ::after "Clique para preencher". */
.pcrm-readonly-fields .font-medium.pcrm-inline-empty::after {
    content: "";
}

/* ============================================================
   SECTION-NAV — nav lateral sticky de seções (âncoras da página).
   Substitui .pcrm-account-section-nav / .pcrm-account-nav-item.
   Convenção BEM (__ elemento, -- modificador). Só tokens.
============================================================ */

.pcrm-section-nav {
    display: grid;
    gap: var(--pcrm-space-2);
    position: sticky;
    top: 78px;
    background: var(--pcrm-surface);
    border: 1px solid var(--pcrm-border-strong);
    border-radius: var(--pcrm-radius);
    padding: var(--pcrm-space-2);
}

.pcrm-section-nav__item {
    display: flex;
    align-items: center;
    gap: var(--pcrm-space-3);
    width: 100%;
    min-height: var(--pcrm-control-h-md);
    padding: 0 var(--pcrm-space-3);
    border: 1px solid transparent;
    border-radius: var(--pcrm-radius);
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-bold);
    text-align: left;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.pcrm-section-nav__item:hover {
    background: var(--pcrm-surface-hover);
    color: var(--pcrm-text);
}

.pcrm-section-nav__item--active {
    background: var(--pcrm-brand-soft);
    border-color: var(--pcrm-brand-ring);
    color: var(--brand-color);
}

.pcrm-section-nav__item span:first-child {
    font-size: var(--pcrm-text-lg);
}

@media (max-width: 1120px) {
    .pcrm-section-nav {
        position: static;
        display: flex;
        overflow-x: auto;
    }

    .pcrm-section-nav__item {
        flex: 0 0 auto;
        width: auto;
    }
}

/* components/spinner.css — spinner de carregamento da mãe.
 *
 * Substitui o anel Tailwind repetido 7x:
 *   h-8 w-8 animate-spin rounded-full border-2 border-gray-200 border-t-blue-600
 * Problemas: border-t-blue-600 é azul cravado (não a cor da marca) e
 * border-gray-200 não tem variante dark (clara demais no dark mode).
 * Aqui: borda tokenizada (dark-aware) + topo na cor da marca + animação própria.
 *
 * Uso: <span class="pcrm-spinner"></span>  (ou --sm pra 16px)
 */

.pcrm-spinner {
    display: inline-block;
    width: var(--pcrm-space-8);
    height: var(--pcrm-space-8);
    flex-shrink: 0;
    border: 2px solid var(--pcrm-border);
    border-top-color: var(--brand-color);
    border-radius: var(--pcrm-radius-full, 999px);
    animation: pcrm-spin 0.7s linear infinite;
}

.pcrm-spinner--sm { width: var(--pcrm-space-5); height: var(--pcrm-space-5); }

@keyframes pcrm-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   STEPPER — passos numerados conectados por linhas (wizards/
   assistentes de várias etapas). Generaliza o antigo
   .pcrm-migration-stepper (screen-scoped) para a mãe.
   Bolinha numerada + (opcional) rótulo, ligadas por linhas;
   estados --active (passo atual) e --done (já concluído) na
   cor da marca. Convenção BEM (__ elemento, -- modificador).
   Só tokens var(--pcrm-*).
============================================================ */

.pcrm-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--pcrm-space-5);
}

.pcrm-stepper__step {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pcrm-space-2);
    min-width: 0;
}

.pcrm-stepper__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--pcrm-border-strong);
    border-radius: var(--pcrm-radius-pill);
    background: var(--pcrm-surface);
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-bold);
    line-height: 1;
    flex-shrink: 0;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.pcrm-stepper__label {
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-semibold);
    line-height: var(--pcrm-lh-snug);
    text-align: center;
    transition: color 140ms ease;
}

/* Separador chevron (›) entre os passos — alinhado à altura da bolinha (32px). */
.pcrm-stepper__sep {
    display: inline-flex;
    align-items: center;
    height: 32px;
    color: var(--pcrm-text-muted);
    opacity: .5;
}

/* Passo atual: bolinha na cor da marca, rótulo destacado. */
.pcrm-stepper__step--active .pcrm-stepper__dot {
    background: var(--brand-color);
    border-color: var(--brand-color);
    color: var(--pcrm-text-on-brand);
}
.pcrm-stepper__step--active .pcrm-stepper__label {
    color: var(--pcrm-text);
}

/* Passo concluído: contorno na cor da marca (preenchimento suave). */
.pcrm-stepper__step--done .pcrm-stepper__dot {
    background: var(--pcrm-brand-soft);
    border-color: var(--brand-color);
    color: var(--brand-color);
}
.pcrm-stepper__step--done .pcrm-stepper__label {
    color: var(--pcrm-text-strong);
}

/* Switch on/off (toggle) — primitivo reutilizável. Rótulo à esquerda + trilho com
   thumb deslizante e selos On/Off. Verde quando ligado, vermelho quando desligado.
   Token-only (converge o pcrm-capture-switch, hoje preso na tela de captação). */
.pcrm-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--pcrm-space-3);
    cursor: pointer;
    padding: var(--pcrm-space-1) 0;
}
.pcrm-switch__label {
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-bold);
}
.pcrm-switch__input { position: absolute; width: 0; height: 0; opacity: 0; }
.pcrm-switch__track {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 26px;
    border-radius: var(--pcrm-radius-pill);
    background: var(--pcrm-danger);
    transition: background-color 160ms ease;
}
.pcrm-switch__on,
.pcrm-switch__off {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pcrm-text-on-brand);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
    letter-spacing: .02em;
    pointer-events: none;
}
.pcrm-switch__on  { left: 10px; opacity: 0; }
.pcrm-switch__off { right: 9px; opacity: 1; }
.pcrm-switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pcrm-surface);
    box-shadow: var(--pcrm-shadow-sm, 0 1px 2px rgba(15, 23, 42, .25));
    transition: transform 160ms ease;
}
.pcrm-switch__input:checked + .pcrm-switch__track { background: var(--pcrm-success); }
.pcrm-switch__input:checked + .pcrm-switch__track .pcrm-switch__thumb { transform: translateX(38px); }
.pcrm-switch__input:checked + .pcrm-switch__track .pcrm-switch__on  { opacity: 1; }
.pcrm-switch__input:checked + .pcrm-switch__track .pcrm-switch__off { opacity: 0; }
.pcrm-switch__input:focus-visible + .pcrm-switch__track {
    box-shadow: 0 0 0 2px var(--pcrm-brand-ring);
}

/* Tabs — navegação por abas (sublinhado na marca no ativo). Token-only, dark-aware.
   Controlador vanilla em views/_pcrm-tabs.blade.php ([data-pcrm-tabs]). */
.pcrm-tabs {
    display: flex;
    flex-direction: column;
    gap: var(--pcrm-space-5);
}
.pcrm-tabs__list {
    display: flex;
    gap: var(--pcrm-space-5);
    border-bottom: 1px solid var(--pcrm-border);
}
.pcrm-tabs__tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: var(--pcrm-space-3) var(--pcrm-space-1);
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-semibold);
    line-height: var(--pcrm-lh-snug);
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}
.pcrm-tabs__tab:hover { color: var(--pcrm-text); }
.pcrm-tabs__tab--active,
.pcrm-tabs__tab[aria-selected="true"] {
    color: var(--brand-color);
    border-bottom-color: var(--brand-color);
}
.pcrm-tabs__tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--pcrm-brand-ring);
    border-radius: var(--pcrm-radius-sm);
}
.pcrm-tabs__panel[hidden] { display: none; }

/* ============================================================
   TAG-CREATE — modal "Adicionar Tag" (criar uma tag nova). Primitivo MÃE,
   compartilhado por kanban, lead-view e attendance (antes DUPLICADO em
   screens/leads-kanban.css + lead-view.css). Trigger "+ Nova Tag" + overlay +
   modal (header/title/close/body) + form (campo + seletor de cor). Só tokens
   (light + dark automáticos). Nome semântico (sem prefixo de tela).
============================================================ */

.pcrm-tag-create-trigger {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--pcrm-space-2);
    border: 1px solid var(--brand-color);
    border-radius: var(--pcrm-radius);
    background: var(--brand-color);
    color: var(--pcrm-text-on-brand);
    cursor: pointer;
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-bold);
    padding: var(--pcrm-space-2) var(--pcrm-space-3);
    transition: background-color 120ms ease, box-shadow 120ms ease;
}
.pcrm-tag-create-trigger:hover {
    background: color-mix(in srgb, var(--brand-color) 88%, #000);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--brand-color) 28%, transparent);
}
.pcrm-tag-create-trigger span { font-size: var(--pcrm-text-lg); line-height: 1; }

.pcrm-tag-create-overlay {
    position: fixed;
    inset: 0;
    z-index: 120080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pcrm-space-4);
    background: var(--pcrm-modal-backdrop);
}
.pcrm-tag-create-modal {
    width: 100%;
    max-width: 525px;
    overflow: hidden;
    border-radius: var(--pcrm-radius-lg);
    background: var(--pcrm-surface);
    box-shadow: var(--pcrm-shadow-modal);
}
.pcrm-tag-create-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pcrm-space-2);
    border-bottom: 1px solid var(--pcrm-border);
    padding: var(--pcrm-space-3) var(--pcrm-space-4);
}
.pcrm-tag-create-title { color: var(--pcrm-text); font-size: var(--pcrm-text-lg); font-weight: var(--pcrm-fw-bold); }
.pcrm-tag-create-close {
    width: 24px;
    height: 24px;
    cursor: pointer;
    border-radius: var(--pcrm-radius);
    color: var(--pcrm-text-muted);
    transition: background 120ms ease, color 120ms ease;
}
.pcrm-tag-create-close:hover { background: var(--pcrm-surface-hover); color: var(--pcrm-text); }
.pcrm-tag-create-body { border-bottom: 1px solid var(--pcrm-border); padding: var(--pcrm-space-2) var(--pcrm-space-4); }
.pcrm-tag-create-form { display: grid; gap: var(--pcrm-space-5); }
.pcrm-tag-create-field { display: grid; gap: var(--pcrm-space-3); min-width: 0; }
.pcrm-tag-create-error { color: var(--pcrm-danger); font-size: var(--pcrm-text-xs); font-weight: var(--pcrm-fw-semibold); }
.pcrm-tag-create-colors { display: flex; flex-wrap: wrap; gap: var(--pcrm-space-3); }
.pcrm-tag-create-color { display: inline-flex; position: relative; }
.pcrm-tag-create-color-input { position: absolute; inset: 0; z-index: 1; cursor: pointer; opacity: 0; }
.pcrm-tag-create-swatch { display: block; width: 24px; height: 24px; border: 1px solid var(--pcrm-border); border-radius: var(--pcrm-radius-pill); cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.pcrm-tag-create-color-input:checked + .pcrm-tag-create-swatch { border-color: var(--brand-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-color) 30%, transparent); transform: translateY(-1px); }

/* Linha "selecionar tag + Nova Tag" lado a lado: o lookup cresce, o botão criar fica
   compacto à direita (a mãe .pcrm-tag-create-trigger vem width:100% p/ uso em coluna). */
.pcrm-tag-add-row { display: flex; align-items: center; gap: var(--pcrm-space-2); }
.pcrm-tag-add-row .pcrm-lead-quick-lookup { flex: 1 1 auto; min-width: 0; }
.pcrm-tag-add-row .pcrm-tag-create-trigger { flex: 0 0 auto; width: auto; white-space: nowrap; }
.pcrm-tag-add-row + .pcrm-kanban-bulk-tag-row { margin-top: var(--pcrm-space-2); }

/* ============================================================
   TAG-PICKER — popover de adicionar/remover tags (lista buscável + fila
   add/remove). Primitivo MÃE, compartilhado por kanban (popover do card +
   ação em massa), lead-view e attendance (antes DUPLICADO em
   screens/leads-kanban.css + lead-view.css + attendance.css).

   Inclui o "shell" do popover (header/body/foot) — também usado pelo painel
   de ação em massa do kanban — por isso mantém os nomes `pcrm-kanban-bulk-*`
   (legado; renomear o shell mexeria no painel bulk). Só tokens (light + dark).
   Pareia com a mãe components/tag-create.css (modal "Nova Tag").
============================================================ */

/* Container flutuante do popover (lead-view/attendance; o kanban posiciona via
   .pcrm-kanban-tag-popover). Nome legado `lvt` mantido pra não mexer no markup. */
.pcrm-lvt-popover {
    /* Modal centralizado pela mãe .pcrm-modal-overlay--centered. A overlay só centraliza
       na vertical (align-items:center); o horizontal vem do margin:0 auto (igual .pcrm-modal).
       SEM overflow/max-height: o menu do seletor (.pcrm-lookup-menu-pos, absolute) flutua
       POR CIMA do modal — overflow cortaria. O scroll de modal alto fica na overlay-mãe. */
    width: 360px;
    max-width: calc(100vw - var(--pcrm-space-8));
    margin: 0 auto;
    background: var(--pcrm-surface);
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius-lg);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}
.dark .pcrm-lvt-popover {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

/* ── Shell do popover (header / body / footer de ações) ── */
.pcrm-kanban-bulk-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pcrm-space-3);
    border-bottom: 1px solid var(--pcrm-border);
    padding: var(--pcrm-space-4) var(--pcrm-space-4);
}
.pcrm-kanban-bulk-popover-body {
    display: grid;
    min-width: 0;
    gap: var(--pcrm-space-3);
    padding: var(--pcrm-space-4);
}
.pcrm-kanban-bulk-popover-body > * {
    min-width: 0;
    max-width: 100%;
}
.pcrm-kanban-popover-foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--pcrm-space-2);
    border-top: 1px solid var(--pcrm-border);
    padding-top: var(--pcrm-space-3);
}

/* ── Lista de resultados (scrollbox) ── */
.pcrm-kanban-tag-results {
    overflow-y: auto;
    max-height: 192px;
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius-lg);
    padding: var(--pcrm-space-1);
}

/* ── Fila add/remove + resultado de busca ── */
.pcrm-kanban-bulk-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pcrm-space-2);
    max-height: 96px;
    overflow-y: auto;
}
/* No modo bulk o seletor e a fila de chips ficam no mesmo bloco — dá um respiro
   entre eles (no single estão em blocos separados, já espaçados pela grade do body). */
.pcrm-lead-quick-lookup + .pcrm-kanban-bulk-tag-row { margin-top: var(--pcrm-space-2); }
.pcrm-kanban-bulk-tag-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pcrm-space-3);
    border-radius: var(--pcrm-radius-lg);
    padding: var(--pcrm-space-2);
    transition: background-color 120ms ease;
}
.pcrm-kanban-bulk-tag-result:hover {
    background: var(--pcrm-surface-hover);
}
.pcrm-kanban-bulk-tag-preview {
    display: inline-flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: var(--pcrm-space-2);
}
.pcrm-kanban-bulk-tag-dot {
    height: 26px;
    width: 26px;
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: var(--pcrm-radius-pill);
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.52);
}
.pcrm-kanban-bulk-tag-actions {
    display: inline-flex;
    flex: 0 0 auto;
    gap: var(--pcrm-space-2);
}
.pcrm-kanban-bulk-tag-action {
    display: inline-flex;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: var(--pcrm-radius);
    border: 1px solid var(--pcrm-border);
    background: var(--pcrm-surface);
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
    padding: 0 var(--pcrm-space-2);
    transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}
.pcrm-kanban-bulk-tag-action:hover,
.pcrm-kanban-bulk-tag-action-active {
    border-color: var(--brand-color);
    background: color-mix(in srgb, var(--brand-color) 10%, #fff);
    color: var(--brand-color);
}
.pcrm-kanban-bulk-tag-action-remove:hover,
.pcrm-kanban-bulk-tag-action-remove.pcrm-kanban-bulk-tag-action-active {
    border-color: var(--pcrm-danger);
    background: var(--pcrm-danger-soft);
    color: var(--pcrm-danger);
}

/* ── Dark ── */
.dark .pcrm-kanban-bulk-tag-result:hover {
    background: #1e293b;
}
.dark .pcrm-kanban-bulk-tag-action {
    border-color: var(--pcrm-border-strong);
    background: var(--pcrm-surface-sunken);
    color: var(--pcrm-text-strong);
}
.dark .pcrm-kanban-bulk-tag-action:hover,
.dark .pcrm-kanban-bulk-tag-action-active {
    border-color: color-mix(in srgb, var(--brand-color) 72%, #fff);
    background: color-mix(in srgb, var(--brand-color) 16%, #0f172a);
    color: color-mix(in srgb, var(--brand-color) 80%, #fff);
}
.dark .pcrm-kanban-bulk-tag-action-remove:hover,
.dark .pcrm-kanban-bulk-tag-action-remove.pcrm-kanban-bulk-tag-action-active {
    border-color: #f87171;
    background: rgba(127, 29, 29, 0.35);
    color: #fca5a5;
}

/* Toolbar: search input, filter chip, pagination */

/* Cabeçalho de toolbar acima de uma tabela: barra de superfície com cantos
   superiores arredondados (sem borda inferior), lado esquerdo (busca/chips) que
   cresce e quebra, lado direito (ações/paginação) fixo. Converge scripts/quick-replies. */
.pcrm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pcrm-space-4);
    padding: var(--pcrm-space-4);
    /* Mesma borda do .pcrm-scripts-panel logo abaixo: toolbar + painel formam UMA caixa. */
    border: 1px solid var(--pcrm-border-strong);
    border-bottom: 0;
    border-radius: var(--pcrm-radius) var(--pcrm-radius) 0 0;
    background: var(--pcrm-surface);
}
.pcrm-toolbar__left { min-width: 0; flex: 1 1 auto; flex-wrap: wrap; }
.pcrm-toolbar__right { flex: 0 0 auto; }

.pcrm-search {
    position: relative;
    display: flex;
    align-items: center;
}
.pcrm-search input {
    height: 36px;
    width: 246px;
    padding: 0 var(--pcrm-space-3) 0 var(--pcrm-space-8);
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius);
    background: var(--pcrm-surface);
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-base);
    outline: none;
    transition: border-color 120ms ease;
}
.pcrm-search input:focus {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 2px var(--pcrm-brand-ring);
}
.pcrm-search input::placeholder { color: var(--pcrm-text-subtle); }
.pcrm-search__icon {
    position: absolute;
    left: 10px;
    color: var(--pcrm-text-subtle);
    pointer-events: none;
}

.pcrm-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--pcrm-space-2);
    height: 36px;
    padding: 0 var(--pcrm-space-3);
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius);
    background: var(--pcrm-surface);
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-semibold);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.pcrm-filter-chip:hover,
.pcrm-filter-chip[aria-expanded="true"] {
    background: var(--pcrm-surface-hover);
    border-color: var(--pcrm-border-strong);
}
.pcrm-filter-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--pcrm-space-1);
    border-radius: var(--pcrm-radius-pill);
    background: var(--pcrm-border);
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
}

/* Menu dropdown de um filtro (abre do .pcrm-filter-chip): painel de superfície
   posicionado sob o chip; cada opção tem texto à esquerda e estado/contagem à
   direita. Converge mail/attributes. */
.pcrm-filter-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: var(--pcrm-z-dropdown);
    min-width: 240px;
    padding: var(--pcrm-space-2);
    overflow: hidden;
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius-lg);
    background: var(--pcrm-surface);
    box-shadow: var(--pcrm-shadow-dropdown);
}
/* Itens de filtro convergidos pro primitivo rico .pcrm-dropdown-option
   (brand-soft + check no ativo). Container .pcrm-filter-menu + __field ficam. */
.pcrm-filter-menu__field { display: grid; gap: var(--pcrm-space-2); padding: var(--pcrm-space-1); }

/* Filtros de toolbar de datagrid — search + chips no formato 44px (ícone
   inline, chip sem borda até hover). Embrulhe search/chips com .pcrm-filters
   pra herdar este formato. Converge contatos/empresas/tags/roteiros. */
.pcrm-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pcrm-space-3); width: 100%; }
.pcrm-filters .pcrm-search {
    display: flex;
    flex: 0 0 246px;
    align-items: center;
    gap: var(--pcrm-space-3);
    width: 246px;
    min-height: var(--pcrm-control-h-md);
    padding: 0 var(--pcrm-space-4);
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius);
    background: var(--pcrm-surface);
    color: var(--pcrm-text);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.pcrm-filters .pcrm-search:focus-within {
    border-color: var(--brand-color);
    background: var(--pcrm-surface);
    box-shadow: 0 0 0 2px var(--pcrm-brand-ring);
}
.pcrm-filters .pcrm-search input {
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pcrm-text);
    font-weight: var(--pcrm-fw-semibold);
    outline: none;
}
.pcrm-filters .pcrm-search input:focus { box-shadow: none; }
.pcrm-filters .pcrm-filter-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--pcrm-space-2);
    min-height: var(--pcrm-control-h-md);
    height: auto;
    padding: 0 var(--pcrm-space-3);
    border: 1px solid transparent;
    border-radius: var(--pcrm-radius);
    background: transparent;
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-bold);
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.pcrm-filters .pcrm-filter-chip:hover,
.pcrm-filters .pcrm-filter-chip[aria-expanded="true"] {
    background: var(--pcrm-surface-hover);
    border-color: var(--pcrm-border);
}
.pcrm-filters .pcrm-filter-chip__count {
    min-width: 22px;
    height: 22px;
    padding: 0 var(--pcrm-space-2);
    background: var(--pcrm-border);
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
}

.pcrm-pagination {
    display: flex;
    align-items: center;
    gap: var(--pcrm-space-3);
    justify-content: flex-end;
}
.pcrm-pagination__label,
.pcrm-pagination__range {
    color: var(--pcrm-text-muted);
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-semibold);
    white-space: nowrap;
}
.pcrm-pagination__select {
    background: var(--pcrm-surface);
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius);
    color: var(--pcrm-text-muted);
    cursor: pointer;
    font-size: var(--pcrm-text-base);
    font-weight: var(--pcrm-fw-bold);
    min-height: var(--pcrm-control-h-sm);
    padding: 0 var(--pcrm-space-3);
}
.pcrm-pagination__button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--pcrm-radius);
    color: var(--pcrm-text-muted);
    cursor: pointer;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    transition: background-color 140ms ease, color 140ms ease;
    width: 34px;
}
.pcrm-pagination__button:hover:not(:disabled) {
    background: var(--pcrm-surface-sunken);
    color: var(--pcrm-text);
}
.pcrm-pagination__button:disabled {
    cursor: not-allowed;
    opacity: .4;
}

/* Variante "section": pager com divisor inferior + padding (cabeçalho de painel). */
.pcrm-pagination--section {
    flex-wrap: wrap;
    border-bottom: 1px solid var(--pcrm-border);
    padding: var(--pcrm-space-3) var(--pcrm-space-4);
}

/* Variante compacta (sidebars densas, ex.: atendimento). */
.pcrm-pagination--sm .pcrm-pagination__label,
.pcrm-pagination--sm .pcrm-pagination__range {
    font-size: var(--pcrm-text-xs);
}
.pcrm-pagination--sm .pcrm-pagination__select {
    min-height: var(--pcrm-control-h-sm);
    padding: 0 var(--pcrm-space-2);
    font-size: var(--pcrm-text-xs);
    border-radius: 7px;
}
.pcrm-pagination--sm .pcrm-pagination__button {
    width: 32px;
    height: 32px;
    border-radius: 7px;
}

/* ============================================================
   TOOLTIP — primitivo MÃE do tooltip "frosted" do CRM (antes inline
   no layout). As telas desenham a setinha via
   .pcrm-ui-tooltip[data-placement]::after lendo --pcrm-tooltip-bg/border.
   Cor/borda/fundo via tokens (viram dark sozinhos); só a sombra é
   reforçada no dark.
============================================================ */

/* Selo "?" de ajuda (badge circular) que dispara um tooltip no hover/focus.
   Primitivo MÃE reutilizável — pareia com window.pcrmTooltip. Nome semântico
   (substitui o .pcrm-lead-import-help bespoke das telas de lead). */
.pcrm-help-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    width: 22px;
    border: 0;
    border-radius: var(--pcrm-radius-pill);
    background: var(--pcrm-surface-sunken);
    color: var(--pcrm-text-muted);
    cursor: help;
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
    line-height: 1;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.pcrm-help-badge:hover,
.pcrm-help-badge:focus-visible {
    background: color-mix(in srgb, var(--brand-color) 14%, var(--pcrm-surface-sunken));
    color: var(--brand-color);
    outline: none;
    transform: translateY(-1px);
}

.pcrm-ui-tooltip {
    --pcrm-tooltip-bg: color-mix(in srgb, var(--pcrm-surface) 96%, transparent);
    --pcrm-tooltip-border: var(--pcrm-border);
    --pcrm-tooltip-color: var(--pcrm-text);

    max-width: 320px;
    padding: var(--pcrm-space-2) var(--pcrm-space-3);
    border: 1px solid var(--pcrm-tooltip-border);
    border-radius: var(--pcrm-radius);
    background: var(--pcrm-tooltip-bg);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14), 0 4px 10px rgba(15, 23, 42, 0.08);
    color: var(--pcrm-tooltip-color);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
    line-height: 1.35;
    backdrop-filter: blur(10px);
}

.dark .pcrm-ui-tooltip {
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(148, 163, 184, 0.08);
}

/* Tooltip de ALTO CONTRASTE / invertido (micro-hint sobre ícone): escuro no light,
   claro no dark — inverte via tokens (--pcrm-text = #0f172a→#f8fafc; --pcrm-surface =
   var(--pcrm-surface)→var(--pcrm-text)), no lugar do bg-black/text-white/dark:bg-white (dark:* no-op no bundle).
   A setinha usa .pcrm-tooltip-invert__arrow (mesma cor de fundo). */
.pcrm-tooltip-invert {
    border-radius: var(--pcrm-radius);
    background: var(--pcrm-text);
    color: var(--pcrm-surface);
    padding: var(--pcrm-space-2) var(--pcrm-space-4);
    font-size: var(--pcrm-text-xs);
    line-height: 1;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.22);
    white-space: nowrap;
}
.pcrm-tooltip-invert__arrow {
    background: var(--pcrm-text);
}

/* Posicionamento do tooltip flutuante (usado pelo window.pcrmTooltip global): fixed +
   anexado ao body, centralizado sobre o alvo, com transição. Substitui os posicionamentos
   duplicados por tela (.pcrm-lead-scripts-tooltip / .pcrm-lead-stage-tooltip). */
.pcrm-tooltip--floating {
    pointer-events: none;
    position: fixed;
    z-index: 120200;
    width: max-content;
    max-width: min(260px, calc(100vw - 24px));
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}
.pcrm-tooltip--floating[data-placement="top"] {
    transform: translate(-50%, calc(-100% - 6px));
}
.pcrm-tooltip--floating[data-placement="bottom"] {
    transform: translate(-50%, 6px);
}
.pcrm-tooltip--floating.is-visible {
    opacity: 1;
    visibility: visible;
}
.pcrm-tooltip--floating.is-visible[data-placement="top"] {
    transform: translate(-50%, calc(-100% - 10px));
}
.pcrm-tooltip--floating.is-visible[data-placement="bottom"] {
    transform: translate(-50%, 10px);
}

/* Pontinha (seta-diamante) do tooltip flutuante. A posição horizontal é dirigida por
   --pcrm-tooltip-arrow-left (px a partir da borda esquerda), que o window.pcrmTooltip aponta
   pro centro do alvo: fica centralizada quando há espaço e escorrega pra direita/esquerda
   quando o tooltip desliza numa borda — a seta sempre aponta pro botão. Mesma cor/borda do
   balão (vars do .pcrm-ui-tooltip), adapta light/dark sozinha. */
.pcrm-tooltip--floating::after {
    content: "";
    position: absolute;
    left: var(--pcrm-tooltip-arrow-left, 50%);
    width: 9px;
    height: 9px;
    background: var(--pcrm-tooltip-bg);
    transform: translateX(-50%) rotate(45deg);
}
.pcrm-tooltip--floating[data-placement="bottom"]::after {
    top: -4px;
    border-top: 1px solid var(--pcrm-tooltip-border);
    border-left: 1px solid var(--pcrm-tooltip-border);
}
.pcrm-tooltip--floating[data-placement="top"]::after {
    bottom: -4px;
    border-right: 1px solid var(--pcrm-tooltip-border);
    border-bottom: 1px solid var(--pcrm-tooltip-border);
}

/* topnav.css — navbar superior (mãe). Server-side + JS vanilla; sem Vue.
   Substitui o <style> inline que vivia em layouts/index.blade.php.
   Só tokens; dark sai de graça (tokens invertem em .dark). */

/* ===== HEADER ===== */
.pcrm-header {
    position: sticky;
    top: 0;
    z-index: 10001;
    display: flex;
    width: 100%;
    height: 60px;
    min-height: 60px;
    align-items: center;
    justify-content: space-between;
    gap: var(--pcrm-space-2);
    padding: 0 var(--pcrm-space-4);
    border-bottom: 1px solid var(--pcrm-border);
    background: var(--pcrm-surface);
    transition: background-color 140ms ease, border-color 140ms ease;
}
.pcrm-header__left  { display: flex; align-items: center; gap: var(--pcrm-space-3); }
.pcrm-header__right { display: flex; align-items: center; gap: var(--pcrm-space-2); }

/* ===== FAIXA DA LOGO (largura fixa: menu nunca salta) ===== */
.pcrm-header__brand {
    display: flex;
    width: 170px;
    height: 60px;
    flex: 0 0 170px;
    align-items: center;
    justify-content: flex-start;
}
.pcrm-header__logo {
    height: 52px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* ===== NAV HORIZONTAL ===== */
.pcrm-nav { display: flex; align-items: center; gap: var(--pcrm-space-1); }

.pcrm-nav__item {
    display: flex;
    align-items: center;
    gap: var(--pcrm-space-2);
    border: 0;
    border-radius: var(--pcrm-radius-sm);
    background: transparent;
    padding: var(--pcrm-space-2) var(--pcrm-space-3);
    color: var(--pcrm-text);
    font: var(--pcrm-fw-semibold) var(--pcrm-text-base)/1.2 var(--pcrm-font);
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}
.pcrm-nav__item:not(.pcrm-nav__item--active):hover,
.pcrm-nav__item[aria-expanded="true"] {
    background: var(--pcrm-surface-hover);
    color: var(--pcrm-text);
}
.pcrm-nav__item--active,
.pcrm-nav__item--active:hover {
    background: var(--brand-color);
    color: var(--pcrm-text-on-brand);
}
.pcrm-nav__item--danger {
    color: var(--pcrm-danger);
}
.pcrm-nav__item--danger:hover { color: var(--pcrm-danger-strong); }
.pcrm-nav__icon { width: 20px; height: 20px; flex: 0 0 auto; }
.pcrm-nav__arrow {
    width: 16px;
    height: 16px;
    transform-origin: center;
    transition: transform 180ms ease;
}
.pcrm-nav__item[aria-expanded="true"] .pcrm-nav__arrow { transform: rotate(180deg); }

/* Badge de não-lidas (Atendimento) */
.pcrm-nav__badge {
    display: none;            /* JS liga via style.display quando total > 0 */
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 22px;
    min-width: 34px;
    margin-left: var(--pcrm-space-0_5);
    padding: 0 var(--pcrm-space-2);
    border-radius: var(--pcrm-radius-pill);
    background: var(--pcrm-danger);
    color: var(--pcrm-text-on-brand);
    font-size: var(--pcrm-text-xs);
    font-weight: var(--pcrm-fw-bold);
    line-height: 1;
}

/* ===== DROPDOWN (Contatos / Atendimento / Mais) ===== */
.pcrm-nav__dropdown { position: relative; display: flex; height: 60px; align-items: center; }

.pcrm-nav__panel {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 50;
    display: none;            /* CSS hover + JS click ligam .is-open */
    min-width: 180px;
    overflow: hidden;
    border: 1px solid var(--pcrm-border);
    border-top: 0;
    border-radius: 0 0 var(--pcrm-radius-lg) var(--pcrm-radius-lg);
    background: var(--pcrm-surface);
    box-shadow: var(--pcrm-shadow-dropdown);
    transform-origin: top;
    animation: pcrm-nav-panel-open 160ms ease-out;
}
.pcrm-nav__dropdown:hover .pcrm-nav__panel,
.pcrm-nav__panel.is-open { display: block; }

@keyframes pcrm-nav-panel-open {
    from { opacity: 0; transform: translateY(-6px) scaleY(0.98); }
    to   { opacity: 1; transform: translateY(0) scaleY(1); }
}

.pcrm-nav__link {
    display: flex;
    align-items: center;
    gap: var(--pcrm-space-2);
    white-space: nowrap;
    padding: var(--pcrm-space-3) var(--pcrm-space-4);
    color: var(--pcrm-text);
    font-size: var(--pcrm-text-base);
    transition: background-color 140ms ease, color 140ms ease;
}
.pcrm-nav__link:not(.pcrm-nav__link--active):hover {
    background: var(--pcrm-surface-hover);
    color: var(--pcrm-text);
}
.pcrm-nav__link--active,
.pcrm-nav__link--active:hover {
    background: var(--brand-color);
    color: var(--pcrm-text-on-brand);
    font-weight: var(--pcrm-fw-semibold);
}
.pcrm-nav__link-icon { width: 16px; height: 16px; flex: 0 0 auto; }

/* ===== HAMBURGER MOBILE ===== */
.pcrm-header__burger {
    display: none;            /* só aparece < 768px */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--pcrm-radius-sm);
    background: transparent;
    color: var(--pcrm-text);
    cursor: pointer;
}
.pcrm-header__burger:hover { background: var(--pcrm-surface-hover); }

.pcrm-nav--mobile {
    position: fixed;
    left: 0;
    right: 0;
    top: 60px;
    z-index: 10000;
    display: none;            /* JS liga .is-open */
    flex-direction: column;
    gap: var(--pcrm-space-0_5);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    padding: var(--pcrm-space-2);
    border-bottom: 1px solid var(--pcrm-border);
    background: var(--pcrm-surface);
    box-shadow: var(--pcrm-shadow-dropdown);
}
.pcrm-nav--mobile.is-open { display: flex; }

/* Lista interna do menu mobile: cancela o display:none do @media (a lista
   reusa .pcrm-nav) e empilha os itens em coluna. */
.pcrm-nav--mobile .pcrm-nav {
    display: flex;
    flex-direction: column;
    gap: var(--pcrm-space-0_5);
    width: 100%;
}

/* Dentro do menu mobile, os dropdowns viram blocos: trigger empilhado e
   painel inline (não flutuante). */
.pcrm-nav--mobile .pcrm-nav__dropdown {
    height: auto;
    flex-direction: column;
    align-items: stretch;
}
.pcrm-nav--mobile .pcrm-nav__panel {
    position: static;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    animation: none;
    padding-left: var(--pcrm-space-4);
}

@media (max-width: 767px) {
    .pcrm-nav            { display: none; }
    .pcrm-header__burger { display: inline-flex; }
}

/* ===== Dark toggle + avatar (ações da direita) ===== */
.pcrm-header__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--pcrm-radius-sm);
    background: transparent;
    padding: var(--pcrm-space-2);
    color: var(--pcrm-text);
    cursor: pointer;
    transition: background-color 140ms ease;
}
.pcrm-header__action:hover { background: var(--pcrm-surface-hover); }
.pcrm-header__avatar {
    display: flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--pcrm-radius-pill);
    background: var(--brand-color);
    color: var(--pcrm-text-on-brand);
    font-weight: var(--pcrm-fw-semibold);
    cursor: pointer;
}
.pcrm-header__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Menu de perfil (reusa o padrão de painel) */
.pcrm-header__profile { position: relative; }
.pcrm-header__profile-panel {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 50;
    display: none;
    min-width: 200px;
    margin-top: var(--pcrm-space-2);
    overflow: hidden;
    border: 1px solid var(--pcrm-border);
    border-radius: var(--pcrm-radius-lg);
    background: var(--pcrm-surface);
    box-shadow: var(--pcrm-shadow-dropdown);
}
.pcrm-header__profile-panel.is-open { display: block; }
.pcrm-header__profile-link {
    display: block;
    width: 100%;
    padding: var(--pcrm-space-2) var(--pcrm-space-5);
    border: 0;
    background: transparent;
    color: var(--pcrm-text);
    font-family: var(--pcrm-font);
    font-size: var(--pcrm-text-base);
    text-align: left;
    cursor: pointer;
}
.pcrm-header__profile-link:hover { background: var(--pcrm-surface-hover); }

@media (prefers-reduced-motion: reduce) {
    .pcrm-nav__arrow,
    .pcrm-nav__panel { transition: none; animation: none; }
}

/* Papéis de texto — ver TYPOGRAPHY-SYSTEM.md. A tela consome o papel, não números soltos. */
.pcrm-text-display  { font-size: var(--pcrm-text-3xl);  font-weight: var(--pcrm-fw-bold);     line-height: var(--pcrm-lh-tight); }
.pcrm-text-heading  { font-size: var(--pcrm-text-2xl);  font-weight: var(--pcrm-fw-bold);     line-height: var(--pcrm-lh-tight); }
.pcrm-text-title    { font-size: var(--pcrm-text-xl);   font-weight: var(--pcrm-fw-semibold); line-height: var(--pcrm-lh-snug); }
.pcrm-text-subtitle { font-size: var(--pcrm-text-lg);   font-weight: var(--pcrm-fw-semibold); line-height: var(--pcrm-lh-snug); }
.pcrm-text-body     { font-size: var(--pcrm-text-base); font-weight: var(--pcrm-fw-regular);  line-height: var(--pcrm-lh-normal); }
.pcrm-text-label    { font-size: var(--pcrm-text-xs);   font-weight: var(--pcrm-fw-semibold); line-height: var(--pcrm-lh-snug); }
.pcrm-text-caption  { font-size: var(--pcrm-text-xs);   font-weight: var(--pcrm-fw-regular);  line-height: var(--pcrm-lh-snug); }

.pcrm-text-body--strong { font-weight: var(--pcrm-fw-semibold); }
.pcrm-text-label--upper { text-transform: uppercase; letter-spacing: .04em; }

/* Cor do texto — dark-aware via tokens. Dimensão ORTOGONAL ao papel: o papel dá
   tamanho/peso/line-height, a cor dá o tom. Compõe os dois no markup:
   <span class="pcrm-text-caption pcrm-text-muted">. Substitui o Tailwind de cor
   (text-slate-*) que é NO-OP no bundle purgado do admin (quebrava o dark mode). */
.pcrm-text-default { color: var(--pcrm-text); }
.pcrm-text-strong  { color: var(--pcrm-text-strong); }
.pcrm-text-muted   { color: var(--pcrm-text-muted); }
.pcrm-text-subtle  { color: var(--pcrm-text-subtle); }
.pcrm-text-danger  { color: var(--pcrm-danger); }
.pcrm-text-brand   { color: var(--brand-color); }   /* substitui o text-[var(--brand-color)] arbitrário (não compila = no-op) */