/*==============================================================================
  CRM — quadro, painel gerencial e ficha da oportunidade

  Tudo aqui sai dos tokens `--w-*`. Nenhuma cor solta: as etapas trazem a
  própria cor do banco e ela entra por variável inline (`--crm-etapa-cor`), que
  é dado do usuário, não decisão de tema.
==============================================================================*/

/*------------------------------------------------------------------
  Cabeçalho comum às telas do módulo
------------------------------------------------------------------*/

.crm-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--w-space-4);
    margin-bottom: var(--w-space-5);
}

.crm-topo h1 {
    margin: 0;
    font-size: var(--w-text-2xl);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-primary);
}

.crm-topo p {
    margin: 4px 0 0;
    color: var(--w-text-secondary);
    font-size: var(--w-text-sm);
}

.crm-topo__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-space-2);
}

/* Abas entre as telas do módulo: o quadro e a lista são a mesma carteira
   vista de dois jeitos, e trocar de uma para a outra é gesto frequente. */
.crm-abas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-space-1);
    border-bottom: 1px solid var(--w-border);
    margin-bottom: var(--w-space-5);
}

.crm-abas a {
    padding: 10px 14px;
    border-bottom: 2px solid transparent;
    color: var(--w-text-secondary);
    font-size: var(--w-text-sm);
    font-weight: var(--w-weight-medium);
    text-decoration: none;
    white-space: nowrap;
}

.crm-abas a:hover {
    color: var(--w-text-primary);
}

.crm-abas a.is-active {
    color: var(--w-text-brand);
    border-bottom-color: var(--w-accent);
}

/*------------------------------------------------------------------
  Filtro de período da Visão Geral
------------------------------------------------------------------*/

.crm-periodo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--w-space-3);
    padding: var(--w-space-4);
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    margin-bottom: var(--w-space-5);
}

.crm-periodo label {
    display: block;
    font-size: var(--w-text-xs);
    font-weight: var(--w-weight-medium);
    color: var(--w-text-secondary);
    margin-bottom: 4px;
}

.crm-periodo select,
.crm-periodo input {
    min-width: 150px;
    height: 38px;
    padding: 0 10px;
    background: var(--w-surface);
    color: var(--w-text-primary);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    font-size: var(--w-text-sm);
}

.crm-periodo select:focus,
.crm-periodo input:focus {
    outline: none;
    border-color: var(--w-border-focus);
    box-shadow: var(--w-shadow-focus);
}

/* As datas só aparecem no recorte personalizado — dois campos permanentes
   ocupariam metade da barra sem serem usados quase nunca. */
.crm-periodo__datas[hidden] {
    display: none;
}

/*------------------------------------------------------------------
  Gráficos
------------------------------------------------------------------*/

/* Os três gráficos da Visão Geral, lado a lado.
   Três colunas fixas, e não `auto-fit`: com largura mínima o primeiro gráfico
   caía sozinho numa linha e os outros dois dividiam a de baixo — a leitura
   deixava de ser "o mesmo período, três recortes". Empilham só no celular. */
.crm-graficos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--w-space-4);
    margin-bottom: var(--w-space-5);
}

.crm-grafico {
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    padding: var(--w-space-4);
    min-width: 0;
}

.crm-grafico h2 {
    margin: 0 0 2px;
    font-size: var(--w-text-md);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-primary);
}

.crm-grafico p {
    margin: 0 0 var(--w-space-3);
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
}

/* Altura fixa na moldura, e não no canvas: o Chart.js redimensiona o canvas
   sozinho e um `height` no elemento é sobrescrito a cada redesenho. */
.crm-grafico__tela {
    position: relative;
    height: 280px;
}

.crm-grafico__vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 280px;
    color: var(--w-text-tertiary);
    font-size: var(--w-text-sm);
    text-align: center;
    padding: 0 var(--w-space-4);
}

/*------------------------------------------------------------------
  Listas de apoio da Visão Geral
------------------------------------------------------------------*/

.crm-listas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--w-space-4);
}

.crm-lista__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-space-3);
    padding: 10px 0;
    border-bottom: 1px solid var(--w-border-subtle);
    font-size: var(--w-text-sm);
    color: var(--w-text-primary);
    text-decoration: none;
}

.crm-lista__item:last-child {
    border-bottom: 0;
}

.crm-lista__item:hover {
    color: var(--w-text-brand);
}

.crm-lista__meta {
    color: var(--w-text-tertiary);
    font-size: var(--w-text-xs);
}

.crm-lista__valor {
    font-weight: var(--w-weight-semibold);
    white-space: nowrap;
}

.crm-lista__valor--atraso {
    color: var(--w-danger);
}

/*------------------------------------------------------------------
  Quadro (kanban)
------------------------------------------------------------------*/

.crm-quadro {
    display: flex;
    gap: var(--w-space-3);
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: var(--w-space-4);
    scrollbar-color: var(--w-scrollbar-thumb) var(--w-scrollbar-track);
}

.crm-coluna {
    flex: 0 0 300px;
    max-width: 300px;
    background: var(--w-surface-sunken);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    display: flex;
    flex-direction: column;
    /* O quadro rola dentro da coluna, não a página inteira: com dez cartões em
       uma coluna e um em outra, a página inteira ganharia a altura da maior. */
    max-height: calc(100vh - 260px);
}

/* O cabeçalho é a alça de arrasto da coluna e carrega a cor da etapa.

   O módulo de origem pintava o cabeçalho inteiro com a cor e escrevia por cima
   em branco fixo — o que fica ilegível numa etapa clara e não sobrevive ao tema
   escuro. Aqui a cor entra como tinta sobre a superfície do sistema e como
   friso no topo: mesma leitura à distância, texto sempre legível nos dois
   temas. */
.crm-coluna__topo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--w-border);
    border-top: 3px solid var(--crm-etapa-cor, var(--w-accent));
    border-radius: var(--w-radius-lg) var(--w-radius-lg) 0 0;
    background: color-mix(in srgb, var(--crm-etapa-cor, var(--w-accent)) 12%, var(--w-surface));
    cursor: grab;
    /* Sem isto o arrasto seleciona o nome da etapa em vez de pegar a coluna. */
    user-select: none;
    touch-action: manipulation;
}

.crm-coluna__topo:active {
    cursor: grabbing;
}

.crm-coluna__cor {
    width: 10px;
    height: 10px;
    border-radius: var(--w-radius-full);
    background: var(--crm-etapa-cor, var(--w-accent));
    flex: 0 0 auto;
}

.crm-coluna__nome {
    font-size: var(--w-text-sm);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-primary);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-coluna__contagem {
    font-size: var(--w-text-2xs);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-secondary);
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-full);
    padding: 2px 8px;
}

.crm-coluna__valor {
    padding: 6px 12px;
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
    border-bottom: 1px solid var(--w-border-subtle);
}

.crm-coluna__lista {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    /* Mesmo vazia a coluna precisa de área para receber um cartão solto. */
    min-height: 90px;
}

.crm-coluna__vazio {
    color: var(--w-text-tertiary);
    font-size: var(--w-text-xs);
    text-align: center;
    padding: var(--w-space-4) 0;
}

.crm-cartao {
    display: block;
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-left: 3px solid var(--crm-etapa-cor, var(--w-accent));
    border-radius: var(--w-radius-md);
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    cursor: grab;
    transition: box-shadow var(--w-duration-fast) var(--w-ease-out),
        transform var(--w-duration-fast) var(--w-ease-out);
}

.crm-cartao:hover {
    box-shadow: var(--w-shadow-md);
    transform: translateY(-1px);
}

.crm-cartao__titulo {
    font-size: var(--w-text-sm);
    font-weight: var(--w-weight-medium);
    color: var(--w-text-primary);
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}

/* Uma linha por informação, com o rótulo apagado à esquerda: no quadro a
   pessoa varre dez cartões de relance, e sem rótulo os dois nomes (cliente e
   responsável) viram duas linhas iguais que ela precisa parar para distinguir. */
.crm-cartao__linha {
    font-size: var(--w-text-xs);
    color: var(--w-text-secondary);
    margin-bottom: 2px;
    display: flex;
    gap: 4px;
    min-width: 0;
}

.crm-cartao__linha > span,
.crm-cartao__linha {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-cartao__rotulo {
    color: var(--w-text-tertiary);
    flex: 0 0 auto;
}

.crm-cartao__linha--servico {
    color: var(--w-text-tertiary);
    font-style: italic;
}

.crm-cartao__marcas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.crm-cartao__parado {
    font-size: var(--w-text-2xs);
    color: var(--w-text-tertiary);
}

/* Prazo: a cor responde "vence quando" antes da leitura. */
.crm-prazo {
    display: inline-flex;
    align-items: center;
    font-size: var(--w-text-2xs);
    font-weight: var(--w-weight-medium);
    padding: 2px 8px;
    border-radius: var(--w-radius-full);
    background: var(--w-token-slate-bg);
    color: var(--w-token-slate);
}

.crm-prazo--vencido {
    background: var(--w-token-rose-bg);
    color: var(--w-token-rose);
}

.crm-prazo--hoje {
    background: var(--w-token-orange-bg);
    color: var(--w-token-orange);
}

.crm-prazo--perto {
    background: var(--w-token-amber-bg);
    color: var(--w-token-amber);
}

.crm-prazo--longe {
    background: var(--w-token-blue-bg);
    color: var(--w-token-blue);
}

.crm-prazo--sem {
    background: var(--w-token-neutral-bg);
    color: var(--w-token-neutral);
}

.crm-quadro__dica {
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
    margin-bottom: var(--w-space-2);
}

.crm-cartao__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.crm-cartao__valor {
    font-size: var(--w-text-sm);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-primary);
}

.crm-selo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--w-text-2xs);
    font-weight: var(--w-weight-medium);
    padding: 2px 8px;
    border-radius: var(--w-radius-full);
    background: var(--w-token-neutral-bg);
    color: var(--w-token-neutral);
}

.crm-selo--urgente {
    background: var(--w-token-rose-bg);
    color: var(--w-token-rose);
}

.crm-selo--alta {
    background: var(--w-token-orange-bg);
    color: var(--w-token-orange);
}

.crm-selo--media {
    background: var(--w-token-blue-bg);
    color: var(--w-token-blue);
}

.crm-selo--baixa {
    background: var(--w-token-slate-bg);
    color: var(--w-token-slate);
}

.crm-selo--ganha {
    background: var(--w-token-emerald-bg);
    color: var(--w-token-emerald);
}

.crm-selo--perdida {
    background: var(--w-token-rose-bg);
    color: var(--w-token-rose);
}

.crm-selo--atraso {
    background: var(--w-danger-bg);
    color: var(--w-danger-fg);
}

/* Estados do arrasto. O fantasma some e o lugar de destino fica visível: sem
   isso não dá para saber onde o cartão vai cair. */
.crm-cartao--arrastando {
    opacity: .35;
}

.crm-cartao--fantasma {
    background: var(--w-surface-selected);
    border-style: dashed;
}

.crm-coluna--alvo .crm-coluna__lista {
    background: var(--w-surface-hover);
    border-radius: var(--w-radius-md);
}

/* Colunas em movimento. O fantasma marca onde a coluna vai encaixar; a que
   está no dedo ganha uma leve inclinação para não se confundir com ele. */
.crm-coluna--fantasma {
    opacity: .4;
    border-style: dashed;
}

.crm-coluna--arrastando {
    box-shadow: var(--w-shadow-lg);
    transform: rotate(1deg);
}

/*------------------------------------------------------------------
  Painel lateral com a ficha da oportunidade
------------------------------------------------------------------*/

.crm-painel {
    position: fixed;
    inset: 0;
    z-index: var(--w-z-drawer);
    display: none;
}

.crm-painel.is-aberto {
    display: block;
}

/* Véu, não superfície.
   Aqui estava `--w-surface-overlay`, que é branco opaco — um token de painel
   elevado (menu, popover), não de fundo. Em tela cheia ele apagava a página
   inteira, e a ficha à direita perdia a referência de onde tinha saído.
   O mesmo véu translúcido da busca global: o quadro continua visível atrás,
   recuado, e o olho vai para a ficha. */
.crm-painel__fundo {
    position: absolute;
    inset: 0;
    background: rgba(15, 18, 30, .45);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--w-duration-normal, .2s) var(--w-ease-out, ease);
}

.crm-painel.is-aberto .crm-painel__fundo {
    opacity: 1;
}

.crm-painel__caixa {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(560px, 100%);
    background: var(--w-canvas);
    border-left: 1px solid var(--w-border);
    /* Sombra própria, mais funda que a do design system: é ela que descola a
       ficha do quadro desfocado atrás. */
    box-shadow: -24px 0 60px -20px rgb(0 0 0 / .45);
    display: flex;
    flex-direction: column;
    /* Entra deslizando da direita — dá a origem do movimento e evita o corte
       seco que fazia a ficha "aparecer" do nada. */
    transform: translateX(100%);
    transition: transform var(--w-duration-normal, .22s) var(--w-ease-out, cubic-bezier(.22, 1, .36, 1));
}

.crm-painel.is-aberto .crm-painel__caixa {
    transform: translateX(0);
}

/* Quem pediu menos movimento não recebe deslizamento nenhum. */
@media (prefers-reduced-motion: reduce) {
    .crm-painel__fundo,
    .crm-painel__caixa {
        transition: none;
    }

    .crm-painel__caixa {
        transform: translateX(0);
    }
}

.crm-painel__topo {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-space-3);
    padding: var(--w-space-4);
    border-bottom: 1px solid var(--w-border);
    background: var(--w-surface);
}

.crm-painel__topo h2 {
    margin: 0;
    font-size: var(--w-text-lg);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-primary);
}

/* Alvo de 36px: o "×" de 24px era um ponto difícil de acertar no toque. */
.crm-painel__fechar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    background: none;
    border: 0;
    border-radius: var(--w-radius-md, 10px);
    font-size: 22px;
    line-height: 1;
    color: var(--w-text-tertiary);
    cursor: pointer;
    transition: background var(--w-duration-fast, .12s) var(--w-ease-out, ease),
                color var(--w-duration-fast, .12s) var(--w-ease-out, ease);
}

.crm-painel__fechar:hover,
.crm-painel__fechar:focus-visible {
    background: var(--w-surface-hover, rgb(0 0 0 / .06));
    color: var(--w-text-primary);
}

.crm-painel__corpo {
    padding: var(--w-space-4);
    overflow-y: auto;
    flex: 1 1 auto;
}

/* O destino das âncoras de paginação.

   `scroll-margin-top` reserva a altura da barra fixa do topo mais uma folga:
   sem isso o navegador para a rolagem com o título da seção escondido atrás da
   barra, e a pessoa acha que caiu no lugar errado. */
#lista-negocios,
#lista-tarefas {
    scroll-margin-top: calc(var(--w-topbar-height) + var(--w-space-4));
}

/* A paginação das duas listas da visão geral.

   Empurrada para a base do cartão por `margin-top: auto` dentro de um cartão em
   coluna: sem isso, a lista com menos linhas termina antes e as duas paginações
   ficam em alturas diferentes na mesma linha da tela. */
.crm-lista__paginacao {
    margin-top: auto;
    padding-top: var(--w-space-3);
    border-top: 1px solid var(--w-border-subtle);
}

.crm-lista__paginacao .pagination {
    margin-bottom: 0;
    justify-content: center;
}

/* Os dois cartões viram coluna para o `margin-top: auto` acima ter contra o que
   se apoiar. A regra é escopada à faixa das listas — os demais cartões de
   gráfico continuam como estavam. */
.crm-listas > .crm-grafico {
    display: flex;
    flex-direction: column;
}

/*------------------------------------------------------------------
  A ficha como página própria

  A moldura existe só aqui: no painel lateral do quadro a ficha entra direto no
  corpo do painel, que já tem o próprio respiro. Repetir este espaçamento lá
  daria margem em cima de margem.
------------------------------------------------------------------*/

.crm-ficha-pagina {
    /* O afastamento dos botões de voltar. Generoso de propósito: "Excluir" mora
       logo abaixo, e um clique errado a um pixel do conteúdo é um clique que
       acontece. */
    margin-top: var(--w-space-10);

    /* A ficha não se estica pela tela inteira num monitor largo: linha de texto
       com 1600px de largura é ilegível, e os cartões de dados já se organizam
       em três colunas bem antes disso. */
    max-width: 1100px;
}

/*------------------------------------------------------------------
  Ficha da oportunidade (usada no painel e na página própria)

  Um desenho só para os dois lugares. Toda grade daqui usa `auto-fit`, então a
  ficha cai em uma coluna no painel de 560px e abre em duas ou três na página,
  sem nenhuma variante de classe e sem ponto de quebra escrito à mão.

  As classes antigas — `crm-ficha__linha`, `crm-ficha__rotulo`,
  `crm-ficha__valor`, `crm-ficha__secao` — saíram junto com a marcação que as
  usava. Deixá-las aqui seria CSS morto esperando alguém copiar por engano.
------------------------------------------------------------------*/

.crm-ficha {
    display: flex;
    flex-direction: column;
    gap: var(--w-space-5);
}

/*--- Capa -------------------------------------------------------*/

.crm-ficha__capa {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--w-space-4);
    padding: var(--w-space-4);
    border-radius: var(--w-radius-lg);
    border: 1px solid var(--w-border-subtle);

    /* A faixa de cor à esquerda diz o estado antes de qualquer leitura. O fundo
       fica neutro de propósito: pintar o cartão inteiro faria o título
       competir com a própria moldura. */
    border-left: 4px solid var(--w-accent);
    background: var(--w-surface-sunken);
}

.crm-ficha__capa--ganha { border-left-color: var(--w-success); }
.crm-ficha__capa--perdida { border-left-color: var(--w-danger); }

.crm-ficha__capa-texto {
    min-width: 0;
    flex: 1 1 260px;
}

.crm-ficha__selos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--w-space-2);
}

.crm-ficha__titulo {
    margin: 0;
    font-size: var(--w-text-lg);
    font-weight: var(--w-weight-semibold);
    line-height: 1.3;
    color: var(--w-text-primary);
    overflow-wrap: anywhere;
}

.crm-ficha__trilha {
    margin: 4px 0 0;
    font-size: var(--w-text-sm);
    color: var(--w-text-secondary);
    overflow-wrap: anywhere;
}

.crm-ficha__dinheiro {
    flex: none;
    text-align: right;
}

.crm-ficha__dinheiro span {
    display: block;
    font-size: var(--w-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--w-text-tertiary);
}

.crm-ficha__dinheiro strong {
    display: block;
    font-size: var(--w-text-xl);
    font-weight: var(--w-weight-bold);
    color: var(--w-text-primary);

    /* Números de largura fixa: sem isso o valor "treme" a cada atualização,
       porque o 1 é mais estreito que o 8. */
    font-variant-numeric: tabular-nums;
}

/*--- Ações ------------------------------------------------------*/

.crm-ficha__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-space-2);
}

/*--- Blocos -----------------------------------------------------*/

.crm-ficha__bloco {
    padding: var(--w-space-4);
    border: 1px solid var(--w-border-subtle);
    border-radius: var(--w-radius-lg);
    background: var(--w-surface);
}

.crm-ficha__bloco-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--w-space-2);
    margin-bottom: var(--w-space-3);
}

.crm-ficha__bloco-titulo {
    margin: 0 0 var(--w-space-3);
    font-size: var(--w-text-sm);
    font-weight: var(--w-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--w-text-tertiary);
}

.crm-ficha__bloco-cabeca .crm-ficha__bloco-titulo {
    margin-bottom: 0;
}

.crm-ficha__contagem {
    font-size: var(--w-text-xs);
    color: var(--w-text-secondary);
    font-variant-numeric: tabular-nums;
}

.crm-ficha__vazio {
    padding: var(--w-space-3) 0;
    font-size: var(--w-text-sm);
    color: var(--w-text-tertiary);
}

/*--- Dados ------------------------------------------------------*/

.crm-dados {
    display: grid;
    gap: var(--w-space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    margin: 0;
}

.crm-dado {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: var(--w-radius-md);
    background: var(--w-surface-sunken);
    min-width: 0;
}

.crm-dado--largo {
    grid-column: 1 / -1;
}

.crm-dado dt {
    font-size: var(--w-text-2xs);
    font-weight: var(--w-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--w-text-tertiary);
}

.crm-dado dd {
    margin: 0;
    font-size: var(--w-text-sm);
    font-weight: var(--w-weight-medium);
    color: var(--w-text-primary);
    overflow-wrap: anywhere;
}

.crm-dado__vazio {
    color: var(--w-text-tertiary);
    font-weight: var(--w-weight-normal);
}

.crm-ficha__observacao {
    margin-top: var(--w-space-3);
    padding: 12px 14px;
    border-radius: var(--w-radius-md);
    background: var(--w-surface-sunken);
}

.crm-ficha__observacao h4 {
    margin: 0 0 6px;
    font-size: var(--w-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--w-text-tertiary);
}

.crm-ficha__observacao p {
    margin: 0;
    font-size: var(--w-text-sm);
    color: var(--w-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/*--- Progresso das tarefas --------------------------------------*/

.crm-progresso {
    height: 6px;
    margin-bottom: var(--w-space-3);
    border-radius: 999px;
    background: var(--w-border-subtle);
    overflow: hidden;
}

.crm-progresso span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--w-success);
    transition: width 280ms ease;
}

/*--- Tarefas ----------------------------------------------------*/

.crm-tarefas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.crm-tarefa {
    display: flex;
    align-items: center;
    gap: var(--w-space-2);
    padding: 4px 10px 4px 4px;
    border-radius: var(--w-radius-md);
    border: 1px solid transparent;
    background: var(--w-surface-sunken);
    font-size: var(--w-text-sm);
    color: var(--w-text-primary);
    transition: border-color 160ms, background 160ms;
}

.crm-tarefa:hover {
    border-color: var(--w-border);
}

.crm-tarefa--atrasada {
    border-color: var(--w-danger-bg);
}

/* A área de clique é a linha inteira.

   Antes só o quadradinho nativo de 13px recebia o toque — no celular se erra
   mais do que se acerta. Agora o rótulo envolve a caixa e o texto, então
   qualquer ponto da tarefa marca e desmarca. */
.crm-tarefa__marca {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 8px 6px;
    cursor: pointer;
}

/* A caixa nativa sai da tela mas continua sendo o controle de verdade: é ela
   que o teclado alcança, que o leitor de tela anuncia e que o JavaScript lê. */
.crm-tarefa__marca input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.crm-tarefa__caixa {
    display: grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 2px solid var(--w-border);
    background: var(--w-surface);
    color: transparent;
    transition: background 160ms, border-color 160ms, color 160ms;
}

.crm-tarefa__caixa svg {
    width: 13px;
    height: 13px;
}

.crm-tarefa__marca input:checked + .crm-tarefa__caixa {
    background: var(--w-success);
    border-color: var(--w-success);
    color: #fff;
}

/* O anel de foco tem de aparecer na caixa desenhada: a nativa está fora da
   tela, e sem isto quem navega por teclado não veria onde está. */
.crm-tarefa__marca input:focus-visible + .crm-tarefa__caixa {
    outline: 2px solid var(--w-accent);
    outline-offset: 2px;
}

.crm-tarefa__texto {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.crm-tarefa__texto strong {
    display: block;
    font-weight: var(--w-weight-medium);
}

.crm-tarefa__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 2px;
    font-size: var(--w-text-2xs);
    color: var(--w-text-tertiary);
}

.crm-tarefa__tipo {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--w-border-subtle);
    color: var(--w-text-secondary);
}

.crm-tarefa__prazo--atraso {
    color: var(--w-danger);
    font-weight: var(--w-weight-semibold);
}

.crm-tarefa--feita .crm-tarefa__texto strong {
    text-decoration: line-through;
    color: var(--w-text-tertiary);
}

/*--- Formulários de nova tarefa e nova anotação ------------------*/

.crm-nova {
    margin-top: var(--w-space-4);
    padding-top: var(--w-space-4);
    border-top: 1px dashed var(--w-border-subtle);
}

.crm-nova__grade {
    display: grid;
    gap: var(--w-space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
    margin-bottom: var(--w-space-3);
}

/* O título da tarefa é o campo que mais recebe texto: ele ocupa a linha
   inteira, e tipo e prazo dividem a de baixo. */
.crm-nova__principal {
    grid-column: 1 / -1;
}

.crm-nova .lz-campo {
    margin-bottom: 0;
}

/*--- Anotações --------------------------------------------------*/

.crm-linha-tempo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--w-space-2);
}

.crm-nota {
    display: flex;
    gap: 10px;
    padding: 12px;
    border-radius: var(--w-radius-md);
    border: 1px solid var(--w-border-subtle);
    background: var(--w-surface-sunken);
}

.crm-nota__inicial {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--w-accent);
    color: var(--w-accent-contrast);
    font-size: var(--w-text-xs);
    font-weight: var(--w-weight-bold);
}

.crm-nota__corpo {
    min-width: 0;
    flex: 1 1 auto;
}

.crm-nota__corpo p {
    margin: 0;
    font-size: var(--w-text-sm);
    color: var(--w-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.crm-nota__assinatura {
    display: block;
    margin-top: 6px;
    font-size: var(--w-text-2xs);
    color: var(--w-text-tertiary);
}

/*------------------------------------------------------------------
  Etapas do funil, na tela de cadastro
------------------------------------------------------------------*/

.crm-etapa-linha {
    display: flex;
    align-items: center;
    gap: var(--w-space-2);
    padding: 8px;
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.crm-etapa-linha input[type="text"] {
    flex: 1 1 160px;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    background: var(--w-surface);
    color: var(--w-text-primary);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-sm);
}

.crm-etapa-linha input[type="color"] {
    width: 40px;
    height: 36px;
    padding: 2px;
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-sm);
}

.crm-etapa-linha label {
    font-size: var(--w-text-xs);
    color: var(--w-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.crm-etapa-linha__pegar {
    cursor: grab;
    color: var(--w-text-tertiary);
}

/*------------------------------------------------------------------
  Celular e tablet

  O quadro não vira lista: a leitura por colunas é o valor da tela. O que muda
  é a navegação — cada coluna ocupa quase a largura toda e o dedo passa de uma
  para a outra com encaixe, em vez de arrastar uma barra de rolagem fina.
------------------------------------------------------------------*/

@media (max-width: 1024px) and (min-width: 768px) {
    .crm-graficos {
        gap: var(--w-space-3);
    }

    .crm-grafico {
        padding: var(--w-space-3);
    }

    .crm-graficos .crm-grafico__tela,
    .crm-graficos .crm-grafico__vazio {
        height: 210px;
    }
}

@media (max-width: 1024px) {
    .crm-coluna {
        max-height: none;
    }

    .crm-coluna__lista {
        overflow-y: visible;
    }
}

@media (max-width: 767.98px) {
    .crm-quadro {
        scroll-snap-type: x mandatory;
        gap: var(--w-space-2);
    }

    .crm-coluna {
        flex: 0 0 86vw;
        max-width: 86vw;
        scroll-snap-align: start;
    }

    .crm-topo__acoes {
        width: 100%;
    }

    .crm-topo__acoes > * {
        flex: 1 1 auto;
        justify-content: center;
    }

    .crm-periodo select,
    .crm-periodo input {
        width: 100%;
        min-width: 0;
    }

    .crm-periodo > div {
        flex: 1 1 100%;
    }

    /* Celular: um gráfico por vez, empilhados. */
    .crm-graficos {
        grid-template-columns: minmax(0, 1fr);
    }

    .crm-grafico__tela,
    .crm-grafico__vazio {
        height: 240px;
    }

    .crm-painel__caixa {
        width: 100%;
        top: auto;
        height: 92vh;
        border-left: 0;
        border-top-left-radius: var(--w-radius-xl);
        border-top-right-radius: var(--w-radius-xl);
    }
}

/* Título da ficha, dentro do painel ou da página. */
.crm-painel__titulo {
    font-size: var(--w-text-lg);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-primary);
    overflow-wrap: anywhere;
}

/*------------------------------------------------------------------
  Formulário de oportunidade

  O formulário é o momento de maior atrito do módulo: quem está no quadro só
  quer registrar o negócio e voltar. Por isso os campos curtos andam aos pares,
  o rodapé fica preso ao pé da modal e só o corpo rola — o botão de salvar nunca
  sai de vista, que era o defeito da versão em coluna única.
------------------------------------------------------------------*/

.crm-modal .modal-content {
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.crm-modal .crm-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 92vh;
}

.crm-form__subtitulo {
    margin: 2px 0 0;
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
}

.crm-form__corpo {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--w-space-4);
}

.crm-form__bloco {
    border: 0;
    padding: 0;
    margin: 0;
}

.crm-form__bloco legend {
    float: none;
    width: auto;
    font-size: var(--w-text-2xs);
    font-weight: var(--w-weight-semibold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--w-text-tertiary);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--w-border-subtle);
}

.crm-form__grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.crm-form__campo--cheio {
    grid-column: 1 / -1;
}

.crm-form textarea {
    width: 100%;
    padding: .55rem .75rem;
    border-radius: var(--w-radius-md);
    border: 1px solid var(--w-border);
    background: var(--w-surface);
    color: var(--w-text-primary);
    font-size: var(--w-text-sm);
    font-family: inherit;
    resize: vertical;
}

.crm-form textarea:focus {
    outline: none;
    border-color: var(--w-border-focus);
    box-shadow: var(--w-shadow-focus);
}

.crm-form__obrigatorio {
    color: var(--w-danger);
    font-weight: var(--w-weight-bold);
}

.crm-form__ajuda {
    margin: 0;
    font-size: var(--w-text-2xs);
    color: var(--w-text-tertiary);
}

.crm-form__erro {
    margin: 0;
    font-size: var(--w-text-2xs);
    color: var(--w-danger-fg);
}

/* O erro aparece no campo, não num alerta no topo: com oito campos, um aviso
   genérico obriga a pessoa a procurar qual deles reclamou. */
.lz-campo.is-invalido input,
.lz-campo.is-invalido select {
    border-color: var(--w-danger);
}

/* Símbolo da moeda colado ao campo, para o número não parecer avulso. */
.crm-form__moeda {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    background: var(--w-surface);
    padding-left: .75rem;
}

.crm-form__moeda:focus-within {
    border-color: var(--w-border-focus);
    box-shadow: var(--w-shadow-focus);
}

.crm-form__moeda > span {
    font-size: var(--w-text-sm);
    color: var(--w-text-tertiary);
}

/* O campo de valor é UM campo, não um dentro do outro.
 *
 * `.lz-campo input` (listagem.css) desenha borda, fundo e raio em todo input do
 * bloco, e a regra tinha a mesma especificidade da que zerava aqui — dava
 * empate, e a ordem dos arquivos decidia. Na tela o resultado era uma caixa
 * desenhada dentro da caixa da moeda. Nomear o ancestral resolve o empate sem
 * `!important`. */
.lz-campo .crm-form__moeda input,
.crm-form__moeda input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding-left: 0;
}

.lz-campo .crm-form__moeda input:focus,
.crm-form__moeda input:focus {
    outline: none;
    border: 0;
    box-shadow: none;
}

.crm-form__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-space-3);
    flex-wrap: wrap;
}

.crm-form__legenda {
    margin: 0;
    font-size: var(--w-text-2xs);
    color: var(--w-text-tertiary);
}

.crm-form__acoes {
    display: flex;
    gap: 8px;
}

.crm-form__acoes .lz-btn:disabled {
    opacity: .6;
    cursor: progress;
}

/* Busca por digitação: a lista sai por cima do restante do formulário para não
   empurrar os campos de baixo a cada tecla. */
.crm-busca {
    position: relative;
}

.crm-busca__lista {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    margin: 4px 0 0;
    padding: 4px;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    box-shadow: var(--w-shadow-lg);
}

.crm-busca__lista li {
    padding: 8px 10px;
    border-radius: var(--w-radius-sm);
    font-size: var(--w-text-sm);
    color: var(--w-text-primary);
    cursor: pointer;
}

.crm-busca__lista li:hover,
.crm-busca__lista li:focus {
    background: var(--w-surface-hover);
    outline: none;
}

/* "+" no cabeçalho da coluna. */
.crm-coluna__novo {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-sm);
    background: var(--w-surface);
    color: var(--w-text-secondary);
    font-size: var(--w-text-base);
    line-height: 1;
    cursor: pointer;
}

.crm-coluna__novo:hover {
    border-color: var(--w-accent);
    color: var(--w-accent);
}

@media (max-width: 767.98px) {
    /* Na tela pequena a modal ocupa tudo: caixinha centrada com rolagem dupla
       obriga a rolar duas vezes para chegar ao botão de salvar. */
    .crm-modal .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }

    .crm-modal .modal-content,
    .crm-modal .crm-form {
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }

    .crm-form__grade {
        grid-template-columns: 1fr;
    }

    /* Alvo de toque confortável: 44px é o piso recomendado para o dedo. */
    .crm-form input,
    .crm-form select,
    .crm-form textarea {
        min-height: 44px;
        font-size: var(--w-text-base);
    }

    .crm-form__rodape {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .crm-form__acoes {
        width: 100%;
    }

    .crm-form__acoes .lz-btn {
        flex: 1 1 auto;
    }
}

/*------------------------------------------------------------------
  WhatsApp: conexão, fila de envio e automações

  Nenhuma cor nova. Os estados da fila reusam os tokens semânticos do
  sistema — sucesso, atenção, perigo — porque "enviada" e "falhou" aqui
  significam a mesma coisa que em qualquer outra tela do produto, e um
  verde próprio faria o usuário aprender duas linguagens.
------------------------------------------------------------------*/

.crm-wa-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--w-space-4);
    margin-bottom: var(--w-space-5);
}

.crm-wa-cartao {
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    padding: var(--w-space-4);
    min-width: 0;
}

.crm-wa-cartao h2 {
    margin: 0 0 var(--w-space-2);
    font-size: var(--w-text-md);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-primary);
}

.crm-wa-cartao p {
    margin: 0 0 var(--w-space-3);
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
}

/* Estado da conexão: um ponto, um rótulo e nada mais. A pessoa que abre
   esta tela quer saber se pode enviar, não ler um relatório. */
.crm-wa-estado {
    display: flex;
    align-items: center;
    gap: var(--w-space-2);
    font-size: var(--w-text-sm);
    font-weight: var(--w-weight-medium);
    color: var(--w-text-primary);
}

.crm-wa-ponto {
    width: 10px;
    height: 10px;
    border-radius: var(--w-radius-full);
    background: var(--w-text-tertiary);
    flex: 0 0 auto;
}

.crm-wa-ponto--ok {
    background: var(--w-success);
}

.crm-wa-ponto--atencao {
    background: var(--w-warning);
}

.crm-wa-ponto--erro {
    background: var(--w-danger);
}

.crm-wa-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--w-space-3);
    padding: var(--w-space-4) 0;
}

/* O papel do QR é claro nos dois temas — e isso NÃO é esquecimento do tema
   escuro. O código é lido por uma câmera, que precisa de escuro sobre claro;
   o PNG vem com fundo transparente, e sobre superfície escura ele simplesmente
   não é reconhecido. Por isso a cor entra por variável própria, declarada
   aqui, em vez de um token de superfície que muda com o tema. */
.crm-wa-qr img {
    --crm-qr-papel: #ffffff;
    width: 220px;
    max-width: 100%;
    height: auto;
    background: var(--crm-qr-papel);
    padding: var(--w-space-3);
    border-radius: var(--w-radius-md);
}

.crm-wa-passos {
    margin: 0;
    padding-left: 18px;
    font-size: var(--w-text-xs);
    color: var(--w-text-secondary);
    line-height: 1.7;
}

/* Aviso do modo de operação (fila síncrona, envio em simulação). Não é
   erro: é o estado real do servidor, dito antes de alguém descobrir pelo
   comportamento. */
.crm-wa-aviso {
    display: flex;
    gap: var(--w-space-3);
    align-items: flex-start;
    background: var(--w-warning-bg);
    color: var(--w-warning-fg);
    border: 1px solid var(--w-warning);
    border-radius: var(--w-radius-md);
    padding: var(--w-space-3) var(--w-space-4);
    font-size: var(--w-text-sm);
    margin-bottom: var(--w-space-4);
}

.crm-wa-aviso--info {
    background: var(--w-info-bg);
    color: var(--w-info-fg);
    border-color: var(--w-info);
}

.crm-wa-placar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--w-space-3);
    margin-bottom: var(--w-space-4);
}

.crm-wa-placar a {
    display: block;
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    padding: var(--w-space-3) var(--w-space-4);
    text-decoration: none;
    color: var(--w-text-primary);
}

.crm-wa-placar a.is-active {
    border-color: var(--w-accent);
    background: var(--w-accent-subtle);
}

.crm-wa-placar strong {
    display: block;
    font-size: var(--w-text-2xl);
    font-weight: var(--w-weight-semibold);
    line-height: 1.2;
}

.crm-wa-placar span {
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
}

.crm-wa-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--w-space-3);
    padding: var(--w-space-3) 0;
    border-bottom: 1px solid var(--w-border-subtle);
}

.crm-wa-item:last-child {
    border-bottom: 0;
}

.crm-wa-item__corpo {
    flex: 1 1 320px;
    min-width: 0;
}

.crm-wa-item__alvo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--w-space-2);
    font-size: var(--w-text-sm);
    color: var(--w-text-primary);
}

.crm-wa-item__texto {
    margin-top: 4px;
    font-size: var(--w-text-sm);
    color: var(--w-text-secondary);
    overflow-wrap: anywhere;
}

.crm-wa-item__erro {
    margin-top: 4px;
    font-size: var(--w-text-xs);
    color: var(--w-danger);
}

.crm-wa-item__quando {
    flex: 0 0 auto;
    text-align: right;
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
    white-space: nowrap;
}

.crm-wa-item__acoes {
    flex: 0 0 auto;
    display: flex;
    gap: var(--w-space-2);
}

.crm-selo--enviada {
    background: var(--w-success-bg);
    color: var(--w-success-fg);
}

.crm-selo--fila {
    background: var(--w-info-bg);
    color: var(--w-info-fg);
}

.crm-selo--falhou {
    background: var(--w-danger-bg);
    color: var(--w-danger-fg);
}

.crm-selo--simulada {
    background: var(--w-warning-bg);
    color: var(--w-warning-fg);
}

.crm-wa-vazio {
    padding: var(--w-space-8) var(--w-space-4);
    text-align: center;
    color: var(--w-text-tertiary);
    font-size: var(--w-text-sm);
}

/* Regras de automação: cada uma é um bloco, e a frase de resumo vem antes
   do formulário — quem abre esta tela quer conferir o que já existe. */
.crm-auto-regra {
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    padding: var(--w-space-4);
    margin-bottom: var(--w-space-4);
}

.crm-auto-regra--desligada {
    opacity: 0.7;
}

.crm-auto-frase {
    font-size: var(--w-text-sm);
    color: var(--w-text-secondary);
    margin: 0 0 var(--w-space-3);
}

.crm-auto-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--w-space-3);
}

/* No celular a fila vira uma pilha: as ações passam para baixo do texto em
   vez de espremerem a mensagem a duas palavras por linha. */
@media (max-width: 640px) {
    .crm-wa-item__quando {
        text-align: left;
    }

    .crm-wa-item__acoes {
        width: 100%;
        justify-content: flex-start;
    }
}


/*------------------------------------------------------------------
  Painel do WhatsApp: faixa de resumo e sub-abas

  Tudo o que precisa ficar à vista numa faixa só. Empilhar barras — uma de
  resumo, outra de aviso, outra de navegação — empurra a lista para baixo da
  dobra em qualquer notebook, e no celular sobra cabeçalho e falta conteúdo.
------------------------------------------------------------------*/

.crm-wa-fixo {
    margin-bottom: var(--w-space-5);
}

.crm-wa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-space-2);
    margin-bottom: var(--w-space-3);
}

.crm-wa-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-full);
    background: var(--w-surface);
    font-size: var(--w-text-xs);
    color: var(--w-text-secondary);
    white-space: nowrap;
}

.crm-wa-chip strong {
    color: var(--w-text-primary);
    font-weight: var(--w-weight-semibold);
}

.crm-wa-subabas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-space-1);
    border-bottom: 1px solid var(--w-border);
}

.crm-wa-subabas a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 2px solid transparent;
    color: var(--w-text-secondary);
    font-size: var(--w-text-sm);
    font-weight: var(--w-weight-medium);
    text-decoration: none;
    white-space: nowrap;
}

.crm-wa-subabas a:hover {
    color: var(--w-text-primary);
}

.crm-wa-subabas a.is-active {
    color: var(--w-text-brand);
    border-bottom-color: var(--w-accent);
}

/* O estado da conexão em tamanho grande na aba própria: é a única pergunta
   que quem abre aquela aba veio fazer. */
.crm-wa-estado--grande {
    font-size: var(--w-text-lg);
    padding: var(--w-space-3) 0;
}

.crm-wa-estado--grande .crm-wa-ponto {
    width: 14px;
    height: 14px;
}

/*------------------------------------------------------------------
  Número da conta
------------------------------------------------------------------*/

.crm-wa-numero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-space-4);
    padding: var(--w-space-3) 0;
}

.crm-wa-numero__id {
    display: flex;
    align-items: center;
    gap: var(--w-space-3);
    min-width: 0;
}

.crm-wa-numero__rotulo {
    font-size: var(--w-text-sm);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-primary);
}

.crm-wa-numero__tel {
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
}

.crm-wa-numero__dados {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-space-5);
}

.crm-wa-numero__dados span {
    display: block;
    font-size: var(--w-text-2xs);
    color: var(--w-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.crm-wa-numero__dados strong {
    font-size: var(--w-text-md);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-primary);
}

.crm-wa-barra {
    height: 6px;
    border-radius: var(--w-radius-full);
    background: var(--w-surface-sunken);
    overflow: hidden;
}

.crm-wa-barra span {
    display: block;
    height: 100%;
    background: var(--w-accent);
}

/* O consumo perto do teto muda de cor antes de estourar: descobrir o limite
   no momento em que a mensagem é recusada é tarde demais. */
.crm-wa-barra span.is-atencao {
    background: var(--w-warning);
}

.crm-wa-barra span.is-critico {
    background: var(--w-danger);
}

/*------------------------------------------------------------------
  Janela do código QR
------------------------------------------------------------------*/

.crm-wa-qr-corpo {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: var(--w-space-5);
    align-items: start;
}

.crm-wa-qr__espera {
    font-size: var(--w-text-sm);
    color: var(--w-text-tertiary);
    text-align: center;
}

.crm-wa-forma-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--w-space-3);
    margin-bottom: var(--w-space-4);
}

@media (max-width: 640px) {
    .crm-wa-qr-corpo {
        grid-template-columns: minmax(0, 1fr);
    }

    .crm-wa-numero__dados {
        gap: var(--w-space-4);
    }
}

/*------------------------------------------------------------------
  Aparelhos de WhatsApp

  A lista é a ordem do rodízio: o padrão em cima, os demais na sequência
  em que entram quando o de cima não pode enviar. Por isso cada linha
  mostra as três coisas que decidem essa vez — conexão, quanto já saiu
  hoje e qual é o teto —, e não só o nome do aparelho.
------------------------------------------------------------------*/

.crm-wa-aparelhos {
    display: flex;
    flex-direction: column;
}

.crm-wa-aparelho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-space-4);
    padding: var(--w-space-4) 0;
    border-bottom: 1px solid var(--w-border-subtle);
}

.crm-wa-aparelho:last-child {
    border-bottom: 0;
}

.crm-wa-aparelho__id {
    display: flex;
    align-items: center;
    gap: var(--w-space-3);
    min-width: 0;
}

.crm-wa-aparelho__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--w-space-1);
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
}

.crm-wa-aparelho__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--w-space-2);
}

/* O formulário é que vira item do flex, não o botão dentro dele: sem esta
   regra ele encolhe abaixo da largura do próprio texto, e o rótulo transborda
   por cima do botão vizinho. */
.crm-wa-aparelho__acoes form {
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
}

.crm-wa-aparelho__acoes .lz-btn {
    flex: 0 0 auto;
}

/* O padrão precisa se distinguir à primeira vista: é a resposta para "por
   qual número isso vai sair?", e procurar essa informação numa lista de
   seis linhas iguais é como o rodízio deixa de ser compreensível. */
.crm-wa-selo {
    display: inline-block;
    margin-left: var(--w-space-2);
    padding: 0 var(--w-space-2);
    border-radius: var(--w-radius-full);
    background: var(--w-accent-subtle);
    color: var(--w-text-brand);
    font-size: var(--w-text-2xs);
    font-weight: var(--w-weight-normal);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 720px) {
    /* No celular a linha vira bloco: espremer nome, contagem e quatro botões
       na mesma faixa deixa cada alvo menor do que um dedo. Os botões passam a
       dividir a largura, com altura de toque — 34px de listagem é confortável
       com o mouse e não com o polegar. */
    .crm-wa-aparelho {
        flex-direction: column;
        align-items: stretch;
    }

    /* Os botões quebram para a linha de baixo na largura natural, sem
       esticar: esticado, o último de uma linha vira uma faixa do tamanho da
       tela — e a faixa maior da lista acabava sendo justamente "Excluir". */
    .crm-wa-aparelho__acoes .lz-btn {
        min-height: 44px;
    }
}

/*------------------------------------------------------------------
  Scripts de WhatsApp

  A lista mostra o texto junto do nome de propósito: "Primeiro contato"
  não diz o que a pessoa vai receber, e abrir cada script para lembrar
  qual é qual é o que faz a biblioteca deixar de ser usada.
------------------------------------------------------------------*/

.crm-script {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--w-space-4);
    padding: var(--w-space-4) 0;
    border-bottom: 1px solid var(--w-border-subtle);
}

.crm-script:last-child {
    border-bottom: 0;
}

.crm-script__corpo {
    flex: 1 1 320px;
    min-width: 0;
}

.crm-script__titulo {
    font-size: var(--w-text-sm);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-primary);
}

.crm-script__texto {
    margin: var(--w-space-1) 0 0;
    font-size: var(--w-text-xs);
    color: var(--w-text-secondary);
    white-space: pre-wrap;
}

.crm-script__anexos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-space-2);
    margin-top: var(--w-space-3);
}

.crm-script__anexo {
    display: inline-flex;
    align-items: center;
    gap: var(--w-space-2);
    padding: var(--w-space-1) var(--w-space-3);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-full);
    background: var(--w-surface-sunken);
    font-size: var(--w-text-2xs);
    color: var(--w-text-secondary);
}

.crm-script__anexo small {
    color: var(--w-text-tertiary);
}

/* Anexo cujo arquivo sumiu do disco: dizer isso na lista evita descobrir
   pelo envio que falhou meia hora depois. */
.crm-script__anexo.is-ausente {
    border-color: var(--w-danger);
    color: var(--w-danger-fg);
}

.crm-script__tirar {
    border: 0;
    background: none;
    padding: 0;
    color: var(--w-text-tertiary);
    cursor: pointer;
}

.crm-script__tirar:hover {
    color: var(--w-danger);
}

.crm-script__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--w-space-2);
}

/* Mesmo motivo da lista de aparelhos: o formulário é que vira item do
   flex, e sem largura própria ele encolhe abaixo do texto do botão. */
.crm-script__acoes form,
.crm-script__anexo form {
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
}

.crm-script__envio {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--w-space-3);
    margin-top: var(--w-space-3);
    padding-top: var(--w-space-3);
    border-top: 1px dashed var(--w-border);
}

.crm-script__vars {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--w-space-2);
    margin-bottom: var(--w-space-4);
    font-size: var(--w-text-2xs);
    color: var(--w-text-tertiary);
}

/* O botão mostra o RÓTULO, não o código: quem escreve a mensagem pensa
   no conteúdo, e decorar a sintaxe é trabalho que a tela pode poupar. */
.crm-script__var {
    padding: var(--w-space-1) var(--w-space-3);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-full);
    background: var(--w-surface);
    color: var(--w-text-secondary);
    font-size: var(--w-text-2xs);
    cursor: pointer;
}

.crm-script__var:hover {
    border-color: var(--w-accent);
    color: var(--w-accent);
}

.crm-script__previa {
    margin-bottom: var(--w-space-4);
}

.crm-script__previa-titulo {
    font-size: var(--w-text-2xs);
    color: var(--w-text-tertiary);
    margin-bottom: var(--w-space-2);
}

.crm-script__bolha {
    padding: var(--w-space-3) var(--w-space-4);
    border-radius: var(--w-radius-lg);
    background: var(--w-surface-sunken);
    color: var(--w-text-primary);
    font-size: var(--w-text-sm);
    white-space: pre-wrap;
}

.crm-script__ligado {
    display: flex;
    align-items: center;
    gap: var(--w-space-2);
    font-size: var(--w-text-sm);
    color: var(--w-text-secondary);
    margin-bottom: var(--w-space-4);
}

.crm-script__salvar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-space-2);
}

@media (max-width: 720px) {
    .crm-script {
        flex-direction: column;
        align-items: stretch;
    }

    .crm-script__acoes .lz-btn {
        min-height: 44px;
    }
}

/*==================================================================
  Painel do WhatsApp — blocos compartilhados pelas abas

  As abas eram uma sequência de títulos e parágrafos: parecia aviso de
  sistema, não central de operação. O que muda aqui é a hierarquia —
  primeiro o ESTADO (grande, colorido, com o número ao lado), depois a
  ação, e só então a explicação. Invertido, a pessoa lê três frases para
  descobrir no fim que já podia enviar.

  São blocos, e não estilos por aba, porque as cinco abas mostram as
  mesmas quatro coisas: um estado, um medidor de uso, um estado vazio que
  ensina o próximo passo, e um selo de situação.
==================================================================*/

/*--- Herói: o cartão que domina a aba Conexão --------------------*/

.crm-wa-heroi {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--w-space-5);
    align-items: center;
    padding: var(--w-space-6);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-xl);
    background: var(--w-surface);
    margin-bottom: var(--w-space-5);
}

/* A cor da borda esquerda repete o estado sem depender só do texto:
   é o que dá a resposta antes da leitura. */
.crm-wa-heroi {
    border-left: 4px solid var(--w-border-strong);
}

.crm-wa-heroi.is-ok {
    border-left-color: var(--w-success);
}

.crm-wa-heroi.is-atencao {
    border-left-color: var(--w-warning);
}

.crm-wa-heroi.is-erro {
    border-left-color: var(--w-danger);
}

.crm-wa-heroi__estado {
    display: flex;
    align-items: center;
    gap: var(--w-space-3);
    font-size: var(--w-text-2xl);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-primary);
    line-height: var(--w-leading-tight);
}

.crm-wa-heroi__estado .crm-wa-ponto {
    width: 14px;
    height: 14px;
}

.crm-wa-heroi__tel {
    margin-top: var(--w-space-2);
    font-size: var(--w-text-md);
    color: var(--w-text-secondary);
    font-variant-numeric: tabular-nums;
}

.crm-wa-heroi__nome {
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: var(--w-space-2);
}

.crm-wa-heroi__acoes {
    display: flex;
    flex-direction: column;
    gap: var(--w-space-2);
    align-items: stretch;
}

/*--- Medidor de uso do dia --------------------------------------*/

/* O número sozinho ("38 enviadas") não diz se está perto do teto. A
   barra responde isso de relance, e muda de cor ANTES de estourar:
   descobrir o limite no momento em que a mensagem é recusada é tarde. */
.crm-wa-medidor {
    margin-top: var(--w-space-3);
}

.crm-wa-medidor__topo {
    display: flex;
    justify-content: space-between;
    gap: var(--w-space-3);
    font-size: var(--w-text-2xs);
    color: var(--w-text-tertiary);
    margin-bottom: var(--w-space-1);
}

.crm-wa-medidor__topo strong {
    color: var(--w-text-primary);
    font-variant-numeric: tabular-nums;
}

.crm-wa-medidor__trilho {
    height: 6px;
    border-radius: var(--w-radius-full);
    background: var(--w-surface-sunken);
    overflow: hidden;
}

.crm-wa-medidor__trilho span {
    display: block;
    height: 100%;
    background: var(--w-accent);
    transition: width var(--w-duration-normal) var(--w-ease-out);
}

.crm-wa-medidor__trilho span.is-atencao {
    background: var(--w-warning);
}

.crm-wa-medidor__trilho span.is-critico {
    background: var(--w-danger);
}

/*--- Estado vazio que ensina o próximo passo ---------------------*/

/* Uma linha de texto dizendo "nada aqui" deixa a pessoa parada. O estado
   vazio tem de dizer o que fazer e trazer o botão que faz. */
.crm-wa-nada {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--w-space-3);
    padding: var(--w-space-8) var(--w-space-4);
    text-align: center;
}

.crm-wa-nada__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--w-radius-full);
    background: var(--w-surface-sunken);
    color: var(--w-text-tertiary);
    font-size: var(--w-text-xl);
}

.crm-wa-nada__titulo {
    font-size: var(--w-text-md);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-primary);
}

.crm-wa-nada__texto {
    max-width: 44ch;
    font-size: var(--w-text-sm);
    color: var(--w-text-tertiary);
}

/*--- Selo de situação -------------------------------------------*/

/* Cor sozinha não basta: daltonismo, impressão, tela ruim. O selo sempre
   carrega o texto, e a cor é reforço. */
.crm-wa-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: var(--w-space-1);
    padding: 2px var(--w-space-2);
    border-radius: var(--w-radius-full);
    font-size: var(--w-text-2xs);
    font-weight: var(--w-weight-medium);
    background: var(--w-token-neutral-bg);
    color: var(--w-token-neutral);
    white-space: nowrap;
}

.crm-wa-etiqueta--ok {
    background: var(--w-success-bg);
    color: var(--w-success-fg);
}

.crm-wa-etiqueta--atencao {
    background: var(--w-warning-bg);
    color: var(--w-warning-fg);
}

.crm-wa-etiqueta--erro {
    background: var(--w-danger-bg);
    color: var(--w-danger-fg);
}

.crm-wa-etiqueta--info {
    background: var(--w-info-bg);
    color: var(--w-info-fg);
}

/*--- Faixa de ajuda em passos -----------------------------------*/

.crm-wa-guia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--w-space-4);
}

.crm-wa-guia__passo {
    display: flex;
    gap: var(--w-space-3);
    align-items: flex-start;
}

.crm-wa-guia__n {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: var(--w-radius-full);
    background: var(--w-accent-subtle);
    color: var(--w-text-brand);
    font-size: var(--w-text-2xs);
    font-weight: var(--w-weight-semibold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.crm-wa-guia__texto {
    font-size: var(--w-text-xs);
    color: var(--w-text-secondary);
    line-height: var(--w-leading-relaxed);
}

@media (max-width: 720px) {
    .crm-wa-heroi {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--w-space-4);
    }

    .crm-wa-heroi__estado {
        font-size: var(--w-text-xl);
    }

    .crm-wa-heroi__acoes .lz-btn {
        min-height: 44px;
    }
}

/* O placar da fila responde "está andando ou travou?" antes da leitura: a
   barra colorida no topo de cada contagem é reconhecida de relance, e o
   número embaixo confirma. Sem ela, cinco caixas iguais com números
   diferentes exigem ler as cinco. */
.crm-wa-placar a {
    border-top-width: 3px;
}

/* A especificidade acompanha `.crm-wa-placar a`, que declara `border` no
   atalho: escrita só com a classe modificadora, a cor perdia para ele —
   e a barra ficava transparente sem nenhum erro que explicasse. */
.crm-wa-placar a.crm-wa-placar--info {
    border-top-color: var(--w-info);
}

.crm-wa-placar a.crm-wa-placar--ok {
    border-top-color: var(--w-success);
}

.crm-wa-placar a.crm-wa-placar--erro {
    border-top-color: var(--w-danger);
}

.crm-wa-placar a span i {
    margin-right: var(--w-space-1);
    opacity: .7;
}

/*--- Lista de "não contatar" ------------------------------------*/

.crm-wa-busca {
    max-width: 320px;
    margin-bottom: var(--w-space-4);
}

.crm-wa-bloqueado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-space-3);
    padding: var(--w-space-3) 0;
    border-bottom: 1px solid var(--w-border-subtle);
}

.crm-wa-bloqueado:last-of-type {
    border-bottom: 0;
}

.crm-wa-bloqueado__tel {
    font-size: var(--w-text-sm);
    font-weight: var(--w-weight-medium);
    color: var(--w-text-primary);
    font-variant-numeric: tabular-nums;
}

.crm-wa-bloqueado__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--w-space-2);
    margin-top: var(--w-space-1);
    font-size: var(--w-text-2xs);
    color: var(--w-text-tertiary);
}

/* O que a pessoa escreveu, entre aspas: é o que permite conferir depois
   que o bloqueio veio de um pedido real, e não de um clique errado. */
.crm-wa-bloqueado__frase {
    margin-top: var(--w-space-1);
    font-size: var(--w-text-xs);
    color: var(--w-text-secondary);
    font-style: italic;
}

/*--- Automações: uma linha diz o que a regra faz ------------------*/

/* A tela antes mostrava nome e uma frase corrida. A pergunta de quem abre
   não é "quais regras existem", é "isto está funcionando?" — e "ligada" é
   exatamente o que uma regra com gatilho errado também parece. Por isso a
   linha carrega gatilho, ação, estado e contagem. */
.crm-auto {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--w-space-4);
    padding: var(--w-space-4) 0;
    border-bottom: 1px solid var(--w-border-subtle);
}

.crm-auto:last-of-type {
    border-bottom: 0;
}

/* Regra desligada continua legível, só recua: apagá-la de vez faria a
   pessoa procurar o que ela mesma desativou. */
.crm-auto.is-desligada .crm-auto__corpo {
    opacity: .62;
}

.crm-auto__corpo {
    flex: 1 1 340px;
    min-width: 0;
}

.crm-auto__nome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--w-space-2);
    font-size: var(--w-text-sm);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-primary);
}

.crm-auto__fluxo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--w-space-2);
    margin-top: var(--w-space-2);
}

.crm-auto__parte {
    display: inline-flex;
    align-items: center;
    gap: var(--w-space-1);
    padding: 2px var(--w-space-2);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-sm);
    background: var(--w-surface-sunken);
    font-size: var(--w-text-2xs);
    color: var(--w-text-secondary);
}

.crm-auto__seta {
    color: var(--w-text-tertiary);
    font-size: var(--w-text-2xs);
}

.crm-auto__numeros {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-space-4);
    margin-top: var(--w-space-2);
    font-size: var(--w-text-2xs);
    color: var(--w-text-tertiary);
}

.crm-auto__numeros i {
    margin-right: var(--w-space-1);
}

.crm-auto__texto {
    margin-top: var(--w-space-2);
    font-size: var(--w-text-xs);
    color: var(--w-text-secondary);
    white-space: pre-wrap;
}

.crm-auto__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--w-space-2);
}

.crm-auto__acoes form {
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
}

@media (max-width: 720px) {
    .crm-auto {
        flex-direction: column;
        align-items: stretch;
    }

    .crm-auto__acoes .lz-btn {
        min-height: 44px;
    }
}

.crm-wa-aparelho__uso {
    flex: 0 1 200px;
    min-width: 160px;
}

@media (max-width: 720px) {
    /* Os marcadores são alvo de toque: 27px de altura é confortável com o
       mouse e escorrega no polegar. */
    .crm-script__var {
        min-height: 36px;
        padding: var(--w-space-2) var(--w-space-3);
    }
}

/* Excluir é botão de ÍCONE nas listas. Sólido e escrito, ele virava o
   elemento mais chamativo de cada linha — e a ação mais visível de uma
   lista não pode ser a de apagar. O rótulo continua acessível pelo
   `aria-label` e pelo `title`. */
.crm-auto__acoes .lz-acao,
.crm-wa-aparelho__acoes .lz-acao,
.crm-script__acoes .lz-acao {
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    /* No celular o alvo cresce, como o das demais ações da linha. */
    .crm-auto__acoes .lz-acao,
    .crm-wa-aparelho__acoes .lz-acao,
    .crm-script__acoes .lz-acao {
        width: 44px;
        height: 44px;
    }
}

/*------------------------------------------------------------------
  Busca avançada, recolhida (mesmo tratamento do painel principal)

  O filtro ocupava uma faixa inteira no topo de toda visita, para uma
  operação que a maioria não faz. Recolhido, a tela começa pelos
  números. `<details>` em vez de script: abre e fecha sem JavaScript,
  funciona com teclado e sobrevive a um erro de JS.
------------------------------------------------------------------*/

.crm-busca {
    margin-bottom: var(--w-space-4);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    background: var(--w-surface);
    overflow: hidden;
}

.crm-busca__gatilho {
    display: flex;
    align-items: center;
    gap: var(--w-space-3);
    padding: var(--w-space-3) var(--w-space-4);
    cursor: pointer;
    font-size: var(--w-text-sm);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-primary);
    list-style: none;
    user-select: none;
}

.crm-busca__gatilho::-webkit-details-marker { display: none; }
.crm-busca__gatilho::marker { content: ''; }

.crm-busca__gatilho:hover { background: var(--w-surface-hover); }

/* O recorte em uso continua visível com o filtro fechado: sem isso, a
   pessoa vê números recortados sem saber por quê. */
.crm-busca__gatilho small {
    margin-left: auto;
    font-weight: var(--w-weight-normal);
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
}

.crm-busca__seta {
    flex: none;
    color: var(--w-text-tertiary);
    transition: transform var(--w-duration-fast) var(--w-ease-out);
}

.crm-busca[open] .crm-busca__seta { transform: rotate(180deg); }
.crm-busca[open] .crm-busca__gatilho { border-bottom: 1px solid var(--w-border); }

.crm-busca .crm-periodo {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

@media (max-width: 575.98px) {
    .crm-busca__gatilho small { display: none; }
}

/*------------------------------------------------------------------
  Sete indicadores por linha

  Aqui são sete, não seis: deixar o sétimo sozinho na linha de baixo
  desperdiça a faixa inteira. O vão entra na conta por variável — herdar
  um `gap` diferente do número escrito na fórmula é o que faz caber um
  cartão a menos do que se pretendia.
------------------------------------------------------------------*/

.az-stats-fila--sete .az-stats--linha {
    --fila-vao: var(--w-space-4, 16px);
    grid-template-columns: repeat(auto-fit, minmax(max(132px, (100% - 6 * var(--fila-vao)) / 7 - 1px), 1fr));
}

/* Cabeçalho sem título: sobra só a ação, que vai para a direita. */
.crm-topo--enxuto {
    justify-content: flex-end;
    margin-bottom: var(--w-space-3);
}

@media (max-width: 575.98px) {
    .crm-topo--enxuto { justify-content: stretch; }
}


/*------------------------------------------------------------------
  Inbox do WhatsApp: conversas | conversa | ficha

  Três colunas no computador porque as três perguntas de quem atende são
  simultâneas: quem está esperando, o que foi dito, e quem é essa pessoa.
  Abaixo de 1200 px vai UMA de cada vez, comandada por `data-painel` —
  espremer três colunas num celular entrega três conteúdos ilegíveis em
  vez de um legível.

  A altura é fixa na tela, e não no conteúdo: uma caixa de entrada que
  cresce para baixo empurra o campo de escrita para fora da vista, e
  responder passa a exigir rolar a página inteira antes.
------------------------------------------------------------------*/

.crm-inbox {
    display: grid;
    /* As duas primeiras colunas têm largura fixa e a conversa fica com o que
       sobra: é onde a pessoa passa o tempo, e é a única que ganha com espaço.
       Dividir em três partes iguais espremia o balão a ponto de uma frase curta
       quebrar em duas linhas. */
    grid-template-columns: 260px 300px minmax(0, 1fr);
    gap: var(--w-space-3);
    height: calc(100vh - 300px);
    min-height: 460px;
    overflow: hidden;
}

.crm-inbox__coluna {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    overflow: hidden;
}

.crm-inbox__erro[hidden] {
    display: none;
}

/*--- Coluna 1: a lista ---*/

.crm-inbox__busca {
    display: flex;
    align-items: center;
    gap: var(--w-space-2);
    padding: var(--w-space-3);
    border-bottom: 1px solid var(--w-border-subtle);
}

.crm-inbox__busca i {
    color: var(--w-text-tertiary);
    font-size: var(--w-text-sm);
}

.crm-inbox__busca input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    background: var(--w-surface-sunken);
    color: var(--w-text-primary);
    padding: 6px 10px;
    font-size: var(--w-text-sm);
}

.crm-inbox__busca input:focus {
    outline: none;
    border-color: var(--w-border-focus);
    box-shadow: var(--w-shadow-focus);
}

.crm-inbox__filtros {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-space-1);
    padding: var(--w-space-2) var(--w-space-3);
    border-bottom: 1px solid var(--w-border-subtle);
}

.crm-inbox__filtros a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--w-radius-full);
    color: var(--w-text-secondary);
    font-size: var(--w-text-xs);
    text-decoration: none;
    white-space: nowrap;
}

.crm-inbox__filtros a:hover {
    background: var(--w-surface-hover);
    color: var(--w-text-primary);
}

.crm-inbox__filtros a.is-active {
    background: var(--w-accent-subtle);
    color: var(--w-text-brand);
    font-weight: var(--w-weight-semibold);
}

/* O contador de não lidas. Redondo e destacado porque é o único número da
   tela que pede uma ação agora. */
.crm-inbox__contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--w-radius-full);
    background: var(--w-accent);
    color: var(--w-accent-contrast);
    font-size: var(--w-text-2xs);
    font-weight: var(--w-weight-bold);
}

.crm-inbox__lista {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.crm-inbox__item {
    display: flex;
    gap: var(--w-space-3);
    align-items: flex-start;
    padding: var(--w-space-3);
    border-bottom: 1px solid var(--w-border-subtle);
    color: inherit;
    text-decoration: none;
}

.crm-inbox__item:hover {
    background: var(--w-surface-hover);
}

.crm-inbox__item.is-ativa {
    background: var(--w-surface-selected);
}

.crm-inbox__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--w-radius-full);
    background: var(--w-accent-subtle);
    color: var(--w-text-brand);
    font-weight: var(--w-weight-semibold);
}

.crm-inbox__item-corpo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.crm-inbox__item-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--w-space-2);
}

.crm-inbox__item-topo strong {
    font-size: var(--w-text-sm);
    color: var(--w-text-primary);
}

.crm-inbox__quando {
    font-size: var(--w-text-2xs);
    color: var(--w-text-tertiary);
    white-space: nowrap;
}

.crm-inbox__previa {
    font-size: var(--w-text-xs);
    color: var(--w-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-inbox__item-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/*--- Coluna 2: a conversa ---*/

.crm-inbox__topo,
.crm-inbox__ficha-topo {
    display: flex;
    align-items: center;
    gap: var(--w-space-3);
    padding: var(--w-space-3);
    border-bottom: 1px solid var(--w-border-subtle);
    background: var(--w-surface-raised);
}

.crm-inbox__topo-id {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.crm-inbox__topo-id strong {
    font-size: var(--w-text-sm);
    color: var(--w-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-inbox__topo-id span {
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
}

.crm-inbox__navegar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    background: var(--w-surface);
    color: var(--w-text-secondary);
}

.crm-inbox__navegar:hover {
    background: var(--w-surface-hover);
    color: var(--w-text-primary);
}

.crm-inbox__linha {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--w-space-2);
    padding: var(--w-space-4);
    background: var(--w-canvas);
}

/* Quem falou se reconhece pelo LADO, antes de qualquer cor: é assim em todo
   mensageiro, e a memória do gesto vale mais do que um rótulo. */
.crm-inbox__balao {
    max-width: min(78%, 560px);
    padding: var(--w-space-2) var(--w-space-3);
    border-radius: var(--w-radius-lg);
    border: 1px solid var(--w-border-subtle);
    background: var(--w-surface);
    font-size: var(--w-text-sm);
    color: var(--w-text-primary);
}

.crm-inbox__balao.is-entrou {
    align-self: flex-start;
    border-bottom-left-radius: var(--w-radius-xs);
}

.crm-inbox__balao.is-saiu {
    align-self: flex-end;
    background: var(--w-accent-subtle);
    border-color: var(--w-accent-subtle);
    border-bottom-right-radius: var(--w-radius-xs);
}

.crm-inbox__texto {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.crm-inbox__hora {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 2px;
    font-size: var(--w-text-2xs);
    color: var(--w-text-tertiary);
}

.crm-inbox__recibo.is-falhou {
    color: var(--w-danger);
}

.crm-inbox__recibo.is-enviada {
    color: var(--w-success);
}

.crm-inbox__foto {
    display: block;
    max-width: 100%;
    border-radius: var(--w-radius-md);
    margin-bottom: 4px;
}

/* O player precisa de largura PRÓPRIA.
   Com `width: 100%` ele dependia do balão — que, por sua vez, se ajusta ao
   conteúdo. Um dependia do outro, e o navegador resolvia o impasse pelo menor
   tamanho possível: o áudio chegava como um círculo cinza de um centímetro,
   sem barra de progresso e sem tempo, impossível de operar. */
.crm-inbox__audio {
    display: block;
    width: 17rem;
    min-width: 15rem;
    /* Em tela estreita o balão manda, para o player não vazar da conversa. */
    max-width: 100%;
    height: 2.5rem;
    margin-bottom: 4px;
}

@media (max-width: 480px) {
    .crm-inbox__audio {
        width: 100%;
        min-width: 0;
    }
}

.crm-inbox__anexo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--w-radius-md);
    background: var(--w-surface-sunken);
    color: var(--w-text-primary);
    font-size: var(--w-text-xs);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.crm-inbox__anexo.is-sumido {
    color: var(--w-text-tertiary);
}

/*--- O campo de escrita ---*/

.crm-inbox__escrever,
.crm-inbox__gravacao {
    display: flex;
    align-items: flex-end;
    gap: var(--w-space-2);
    padding: var(--w-space-3);
    border-top: 1px solid var(--w-border-subtle);
    background: var(--w-surface-raised);
}

.crm-inbox__gravacao[hidden] {
    display: none;
}

.crm-inbox__escrever textarea {
    flex: 1;
    min-width: 0;
    resize: none;
    /* Altura mínima igual à dos botões ao lado, e `box-sizing` explícito: sem
       ele o padding se soma à altura de uma linha e o texto passa por baixo da
       borda — foi o que cortava o campo. */
    box-sizing: border-box;
    min-height: 38px;
    max-height: 140px;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    background: var(--w-surface);
    color: var(--w-text-primary);
    padding: 8px 12px;
    font-size: var(--w-text-sm);
    line-height: 1.4;
}

.crm-inbox__escrever textarea:focus {
    outline: none;
    border-color: var(--w-border-focus);
    box-shadow: var(--w-shadow-focus);
}

.crm-inbox__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    background: var(--w-surface);
    color: var(--w-text-secondary);
}

.crm-inbox__botao:hover {
    background: var(--w-surface-hover);
    color: var(--w-text-primary);
}

.crm-inbox__botao[hidden] {
    display: none;
}

.crm-inbox__botao--enviar {
    background: var(--w-accent);
    border-color: var(--w-accent);
    color: var(--w-accent-contrast);
}

.crm-inbox__botao--enviar:hover {
    background: var(--w-accent-hover);
    color: var(--w-accent-contrast);
}

.crm-inbox__botao:disabled {
    opacity: 0.6;
}

/* No celular o sistema dá 88 px de altura mínima a toda `textarea` de
   formulário — o que é certo para um campo de observações e errado aqui: o
   campo de conversa nasceria com três linhas vazias e comeria a metade de baixo
   da linha do tempo. A fonte de 16 px continua valendo (é ela que impede o iOS
   de ampliar a página ao focar o campo); só a altura volta ao tamanho de um
   alvo de toque, e o campo cresce com o texto como no computador. */
@media (max-width: 40rem) {
    .w-main .crm-inbox__escrever textarea {
        min-height: 44px;
    }

    /* No celular os quatro botões e o campo não cabem na mesma linha: sobravam
       180 px para escrever, e o próprio texto de exemplo já quebrava. O campo
       fica com uma linha inteira e os botões descem para a seguinte. */
    .crm-inbox__escrever {
        flex-wrap: wrap;
    }

    .crm-inbox__escrever textarea {
        flex: 1 1 100%;
    }

    .crm-inbox__botao--enviar {
        margin-left: auto;
    }
}

.crm-inbox__gravacao {
    align-items: center;
    font-size: var(--w-text-sm);
    color: var(--w-text-secondary);
}

/* O ponto que pisca é o que diz "está gravando agora". Sem ele, a barra
   parece um tocador parado e a pessoa fala sem que nada seja captado. */
.crm-inbox__gravacao-ponto {
    width: 10px;
    height: 10px;
    border-radius: var(--w-radius-full);
    background: var(--w-danger);
    animation: crm-inbox-pulsa 1.2s var(--w-ease-in-out) infinite;
}

.crm-inbox__gravacao-previa {
    flex: 1;
    min-width: 0;
    height: 34px;
}

.crm-inbox__gravacao-previa[hidden] {
    display: none;
}

@keyframes crm-inbox-pulsa {
    50% { opacity: 0.25; }
}

/*--- Coluna 3: a ficha ---*/

.crm-inbox__campos {
    margin: 0;
    padding: var(--w-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--w-space-4);
    overflow-y: auto;
}

.crm-inbox__campos dt {
    font-size: var(--w-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--w-text-tertiary);
    font-weight: var(--w-weight-medium);
}

.crm-inbox__campos dd {
    margin: 4px 0 0;
    font-size: var(--w-text-sm);
    color: var(--w-text-primary);
    overflow-wrap: anywhere;
}

.crm-inbox__negocio {
    margin: 0 var(--w-space-4) var(--w-space-4);
    padding: var(--w-space-3);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    background: var(--w-surface-sunken);
    font-size: var(--w-text-sm);
}

.crm-inbox__acoes {
    display: flex;
    flex-direction: column;
    gap: var(--w-space-2);
    padding: 0 var(--w-space-4) var(--w-space-4);
    margin-top: auto;
}

.crm-inbox__acoes .lz-btn {
    width: 100%;
    justify-content: center;
}

.crm-inbox__vazio {
    margin: auto;
}

/* No computador as colunas nunca se revezam, então a volta não tem para onde
   ir: um botão "voltar" ao lado de uma lista que está na tela é ruído. */
@media (min-width: 1200px) {
    .crm-inbox__navegar {
        display: none;
    }
}

/*------------------------------------------------------------------
  Uma coluna de cada vez.

  O corte é em 1200 px porque abaixo disso a terceira coluna já não cabe
  sem espremer a conversa — e a conversa é o motivo da tela.
------------------------------------------------------------------*/
@media (max-width: 1199.98px) {
    .crm-inbox {
        grid-template-columns: minmax(0, 1fr);
        height: calc(100vh - 240px);
    }

    .crm-inbox__coluna {
        display: none;
    }

    .crm-inbox[data-painel='lista'] .crm-inbox__conversas,
    .crm-inbox[data-painel='conversa'] .crm-inbox__conversa,
    .crm-inbox[data-painel='contato'] .crm-inbox__contato {
        display: flex;
    }

    .crm-inbox__balao {
        max-width: 88%;
    }
}

/*------------------------------------------------------------------
  Inbox: o que veio depois — trazer contato, ficha e recorte de período
------------------------------------------------------------------*/

.crm-inbox__topo-lista {
    border-bottom: 1px solid var(--w-border-subtle);
}

/* Fechado por padrão: quem abre o inbox vem responder mensagem, não
   importar carteira. O painel só ocupa espaço quando é pedido. */
.crm-inbox__trazer {
    padding: 0 var(--w-space-3) var(--w-space-3);
}

.crm-inbox__trazer summary {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    padding: 6px 10px;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    background: var(--w-surface);
    color: var(--w-text-secondary);
    font-size: var(--w-text-xs);
}

.crm-inbox__trazer summary::-webkit-details-marker {
    display: none;
}

.crm-inbox__trazer label {
    display: block;
    margin: var(--w-space-2) 0 4px;
    font-size: var(--w-text-2xs);
    color: var(--w-text-tertiary);
}

.crm-inbox__trazer select[multiple] {
    width: 100%;
    margin-bottom: var(--w-space-2);
}

.crm-inbox__trazer-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-space-2);
}

.crm-inbox__trazer-acoes .lz-btn {
    flex: 1;
    justify-content: center;
    font-size: var(--w-text-xs);
}

.crm-inbox__trazer select,
.crm-inbox__select {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    background: var(--w-surface);
    color: var(--w-text-primary);
    padding: 6px 10px;
    font-size: var(--w-text-sm);
}

.crm-inbox__select {
    width: 100%;
}

/* O total da lista, à direita dos filtros: quantas conversas o recorte
   atual devolveu — a pergunta que vem logo depois de filtrar. */
.crm-inbox__total {
    margin-left: auto;
    align-self: center;
    font-size: var(--w-text-2xs);
    color: var(--w-text-tertiary);
}

.crm-inbox__ficha {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--w-space-3);
    padding: var(--w-space-4);
}

.crm-inbox__ficha .crm-inbox__campos {
    padding: 0;
    overflow: visible;
}

.crm-inbox__bloco {
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    background: var(--w-surface-sunken);
    padding: var(--w-space-3);
    font-size: var(--w-text-sm);
}

.crm-inbox__bloco span {
    display: block;
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
}

.crm-inbox__negocio p {
    margin: 6px 0 10px;
    font-size: var(--w-text-xs);
    color: var(--w-text-secondary);
}

.crm-inbox__largura-toda {
    width: 100%;
    justify-content: center;
}

/* Campo que se corrige com dois cliques. O lápis só aparece quando o
   ponteiro passa: mostrá-lo o tempo todo enche a ficha de ícones e some
   com a informação, que é o que se veio ler. */
.crm-inbox__editavel {
    cursor: text;
}

.crm-inbox__lapis {
    margin-left: 6px;
    padding: 2px 4px;
    border: 0;
    border-radius: var(--w-radius-xs);
    background: transparent;
    font-size: var(--w-text-2xs);
    color: var(--w-text-tertiary);
    opacity: 0;
}

/* Aparece no ponteiro e TAMBÉM no foco: escondido para o teclado, o lápis
   seria uma ação alcançável mas invisível — pior do que não existir. */
.crm-inbox__editavel:hover .crm-inbox__lapis,
.crm-inbox__lapis:focus-visible {
    opacity: 1;
}

.crm-inbox__lapis:hover {
    color: var(--w-text-primary);
    background: var(--w-surface-hover);
}

.crm-inbox__editar-campo {
    width: 100%;
    border: 1px solid var(--w-border-focus);
    border-radius: var(--w-radius-sm);
    background: var(--w-surface);
    color: var(--w-text-primary);
    padding: 4px 8px;
    font-size: var(--w-text-sm);
}

/* Cada ação numa linha, com o que ela faz logo abaixo. Espremidas lado a
   lado, "arquivar" e "excluir" chegavam com o mesmo peso visual — e são
   coisas muito diferentes. */
.crm-inbox__acoes {
    display: flex;
    flex-direction: column;
    gap: var(--w-space-2);
    margin-top: var(--w-space-2);
}

.crm-inbox__acao {
    display: flex;
    align-items: flex-start;
    gap: var(--w-space-3);
    width: 100%;
    text-align: left;
    padding: var(--w-space-2) var(--w-space-3);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    background: var(--w-surface);
    color: var(--w-text-primary);
}

.crm-inbox__acao:hover {
    background: var(--w-surface-hover);
}

.crm-inbox__acao strong {
    display: block;
    font-size: var(--w-text-sm);
}

.crm-inbox__acao small {
    display: block;
    font-size: var(--w-text-2xs);
    color: var(--w-text-tertiary);
}

.crm-inbox__acao--destaque {
    border-color: var(--w-accent);
    color: var(--w-text-brand);
}

.crm-inbox__acao--perigo {
    border-color: var(--w-danger);
    color: var(--w-danger-fg);
    background: var(--w-danger-bg);
}

/*--- Recorte de período e escolha de script ---*/

.crm-inbox__periodo,
.crm-inbox__scripts {
    position: relative;
}

.crm-inbox__periodo summary,
.crm-inbox__scripts summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    padding: 6px 10px;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    background: var(--w-surface);
    color: var(--w-text-secondary);
    font-size: var(--w-text-xs);
    white-space: nowrap;
}

.crm-inbox__periodo summary::-webkit-details-marker,
.crm-inbox__scripts summary::-webkit-details-marker {
    display: none;
}

.crm-inbox__periodo summary.is-ativo {
    border-color: var(--w-accent);
    color: var(--w-text-brand);
}

.crm-inbox__scripts summary {
    width: 38px;
    height: 38px;
    justify-content: center;
    padding: 0;
}

.crm-inbox__periodo-menu,
.crm-inbox__scripts-menu {
    position: absolute;
    right: 0;
    z-index: var(--w-z-dropdown);
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    padding: var(--w-space-3);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    background: var(--w-surface-overlay);
    box-shadow: var(--w-shadow-lg);
}

.crm-inbox__periodo-menu {
    top: calc(100% + 6px);
}

/* O menu de scripts abre para CIMA: a barra de escrita fica no rodapé da
   coluna, e para baixo a lista sairia da tela. */
.crm-inbox__scripts-menu {
    bottom: calc(100% + 6px);
    padding: var(--w-space-2);
}

.crm-inbox__scripts-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--w-radius-sm);
    background: transparent;
    color: var(--w-text-primary);
    font-size: var(--w-text-sm);
}

.crm-inbox__scripts-menu button:hover {
    background: var(--w-surface-hover);
}

.crm-inbox__periodo-titulo {
    font-size: var(--w-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--w-text-tertiary);
    margin: var(--w-space-2) 0 6px;
}

.crm-inbox__periodo-atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.crm-inbox__periodo-atalhos button {
    padding: 4px 10px;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-full);
    background: var(--w-surface);
    color: var(--w-text-secondary);
    font-size: var(--w-text-xs);
}

.crm-inbox__periodo-atalhos button:hover {
    background: var(--w-surface-hover);
    color: var(--w-text-primary);
}

.crm-inbox__periodo-atalhos button.is-ativo {
    border-color: var(--w-accent);
    color: var(--w-text-brand);
}

.crm-inbox__periodo-datas {
    display: flex;
    gap: var(--w-space-2);
}

.crm-inbox__periodo-datas label {
    flex: 1;
    font-size: var(--w-text-2xs);
    color: var(--w-text-tertiary);
}

.crm-inbox__periodo-datas input {
    width: 100%;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-sm);
    background: var(--w-surface);
    color: var(--w-text-primary);
    padding: 4px 6px;
    font-size: var(--w-text-xs);
}

.crm-inbox__periodo-limpar {
    width: 100%;
    margin-top: var(--w-space-3);
    padding: 6px;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    background: var(--w-surface);
    color: var(--w-text-secondary);
    font-size: var(--w-text-xs);
}

.crm-inbox__aviso {
    margin: 0 var(--w-space-3) 0;
    border-radius: 0;
}

/*------------------------------------------------------------------
  Trazer contatos para o inbox

  Era um `<select multiple>` com o aviso "segure Ctrl para escolher
  vários" — a lista nativa exige uma tecla que ninguém lembra, perde a
  seleção inteira a um clique solto e não comporta busca dentro dela.
  Com a carteira inteira ali, escolher meia dúzia de pessoas era mais
  trabalhoso do que desistir e mandar para todos.
------------------------------------------------------------------*/

.crm-trazer__busca {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: var(--w-space-2);
}

.crm-trazer__busca i {
    position: absolute;
    left: 10px;
    color: var(--w-text-tertiary);
    font-size: var(--w-text-xs);
    pointer-events: none;
}

.crm-trazer__busca input {
    width: 100%;
    min-height: 36px;
    padding: 0 10px 0 30px;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    background: var(--w-surface);
    color: var(--w-text-primary);
    font-size: var(--w-text-sm);
}

.crm-trazer__busca input:focus {
    outline: none;
    border-color: var(--w-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-accent) 20%, transparent);
}

/* "Selecionar todos" fora da lista rolável: dentro dela sumiria assim
   que a pessoa rolasse, que é justamente quando ela quer usá-lo. */
.crm-trazer__todos {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: 6px;
    border-radius: var(--w-radius-sm);
    background: var(--w-surface-sunken);
    font-size: var(--w-text-xs);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-secondary);
    cursor: pointer;
    user-select: none;
}

.crm-trazer__lista {
    max-height: 220px;
    margin: 0 0 var(--w-space-2);
    padding: 0;
    list-style: none;
    overflow-y: auto;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    background: var(--w-surface);
}

.crm-trazer__lista li + li {
    border-top: 1px solid var(--w-border-subtle);
}

.crm-trazer__lista label {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 40px de alvo: a lista é usada no celular, e caixa de seleção de
       13px é impossível de acertar com o dedo. */
    min-height: 40px;
    padding: 4px 10px;
    margin: 0;
    cursor: pointer;
    font-size: var(--w-text-sm);
    color: var(--w-text-primary);
}

.crm-trazer__lista label:hover {
    background: var(--w-surface-hover);
}

.crm-trazer__lista input[type='checkbox'] {
    flex: none;
    width: 16px;
    height: 16px;
    accent-color: var(--w-accent);
    cursor: pointer;
}

/* A inicial dá um ponto de fixação para o olho percorrer a lista, no
   lugar de uma coluna de texto uniforme. */
.crm-trazer__inicial {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--w-accent) 14%, transparent);
    color: var(--w-accent);
    font-size: var(--w-text-2xs);
    font-weight: var(--w-weight-bold);
}

.crm-trazer__nome {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Marcado continua visível depois de a busca ser limpa: sem isso a
   pessoa perde de vista o que já escolheu. */
.crm-trazer__lista label:has(input:checked) {
    background: color-mix(in srgb, var(--w-accent) 10%, transparent);
    font-weight: var(--w-weight-semibold);
}

.crm-trazer__vazio {
    margin: 0 0 var(--w-space-2);
    padding: var(--w-space-3);
    text-align: center;
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
}

/*==============================================================================
  Automações de disparo e listas (Leads)

  Duas telas novas do módulo de WhatsApp. Nada aqui inventa cor, raio ou
  espaçamento: tudo sai dos tokens semânticos, que é o que faz as duas nascerem
  corretas no tema escuro sem uma linha a mais.
==============================================================================*/

/*------------------------------------------------------------------------------
  Formulário da automação: os grupos de opção
------------------------------------------------------------------------------*/

.crm-disparo__bloco {
    margin: 0 0 var(--w-space-4);
    padding: var(--w-space-3);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    background: var(--w-surface-sunken);
}

.crm-disparo__bloco legend {
    padding: 0 var(--w-space-2);
    font-size: var(--w-text-xs);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* A opção inteira é clicável, e não só a bolinha: alvo de 16px é o que faz
   escolher no celular virar uma questão de pontaria. */
.crm-disparo__opcao {
    display: flex;
    align-items: flex-start;
    gap: var(--w-space-2);
    padding: var(--w-space-2);
    border-radius: var(--w-radius-sm);
    cursor: pointer;
}

.crm-disparo__opcao:hover {
    background: var(--w-surface-hover);
}

.crm-disparo__opcao input {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--w-accent);
}

.crm-disparo__opcao span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.crm-disparo__opcao strong {
    font-size: var(--w-text-sm);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-primary);
}

.crm-disparo__opcao small {
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
}

/* O campo que só existe depois de uma escolha. Recuado para ler como
   consequência da opção acima, e não como uma pergunta nova. */
.crm-disparo__dependente {
    margin-left: var(--w-space-6);
    margin-top: var(--w-space-2);
}

.crm-disparo__aparelho {
    display: flex;
    align-items: center;
    gap: var(--w-space-2);
    padding: var(--w-space-2);
    border-radius: var(--w-radius-sm);
    font-size: var(--w-text-sm);
    color: var(--w-text-primary);
    cursor: pointer;
}

.crm-disparo__aparelho:hover {
    background: var(--w-surface-hover);
}

.crm-disparo__aparelho input {
    flex: none;
    width: 16px;
    height: 16px;
    accent-color: var(--w-accent);
}

/*------------------------------------------------------------------------------
  Linha de uma lista de disparo
------------------------------------------------------------------------------*/

.crm-listadisp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-space-3);
    padding: var(--w-space-3) 0;
    border-bottom: 1px solid var(--w-border-subtle);
}

.crm-listadisp:last-of-type {
    border-bottom: 0;
}

.crm-listadisp__corpo {
    display: flex;
    align-items: center;
    gap: var(--w-space-3);
    min-width: 0;
    flex: 1 1 260px;
}

/* O ponto colorido é o que faz achar a lista certa numa coluna de doze nomes
   parecidos — a cor vem do cadastro, por isso fica no atributo `style`. */
.crm-listadisp__ponto {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: var(--w-radius-full);
}

.crm-listadisp__texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.crm-listadisp__texto strong {
    font-size: var(--w-text-sm);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-listadisp__texto small {
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
}

.crm-listadisp__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--w-space-2);
}

.crm-listadisp__acoes form {
    margin: 0;
}

/*------------------------------------------------------------------------------
  Importação
------------------------------------------------------------------------------*/

.crm-importar__titulo {
    margin: var(--w-space-4) 0 var(--w-space-1);
    font-size: var(--w-text-xs);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.crm-importar__colunas {
    margin: 0 0 var(--w-space-2);
    font-size: var(--w-text-xs);
    line-height: var(--w-leading-relaxed);
    color: var(--w-text-tertiary);
}

/* A tabela da amostra rola dentro da própria caixa: sem isto uma coluna longa
   empurra a página inteira para o lado no celular. */
.crm-importar__rolagem {
    overflow-x: auto;
    margin-bottom: var(--w-space-3);
}

.crm-importar__tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--w-text-sm);
}

.crm-importar__tabela th,
.crm-importar__tabela td {
    padding: var(--w-space-2) var(--w-space-3);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--w-border-subtle);
}

.crm-importar__tabela th {
    font-size: var(--w-text-xs);
    font-weight: var(--w-weight-semibold);
    color: var(--w-text-secondary);
}

.crm-importar__tabela td {
    color: var(--w-text-primary);
}

.crm-importar__erros {
    margin: var(--w-space-2) 0 0;
    padding-left: var(--w-space-5);
    font-size: var(--w-text-xs);
    line-height: var(--w-leading-relaxed);
}

@media (max-width: 640px) {
    .crm-listadisp__acoes {
        width: 100%;
    }

    .crm-disparo__dependente {
        margin-left: var(--w-space-3);
    }
}

/*==============================================================================
  AVISOS DE AGENDAMENTO

  Quatro cartoes, um por evento. Cada um e um formulario proprio: quem quer
  mexer so no aviso de falta nao salva os outros tres junto.
==============================================================================*/

.crm-avisos { display: grid; gap: var(--w-space-4, 16px); }

.crm-avisos__intro h2 {
    margin: 0 0 4px;
    font-size: var(--w-text-lg, 1.125rem);
    font-weight: var(--w-weight-bold, 700);
    color: var(--w-text-primary);
}

.crm-avisos__intro p {
    margin: 0;
    max-width: 78ch;
    font-size: var(--w-text-sm, .875rem);
    line-height: 1.55;
    color: var(--w-text-secondary);
}

/* A legenda das variaveis fica fechada: sao nove linhas que so interessam na
   hora de escrever a mensagem. */
.crm-avisos__variaveis {
    padding: 12px 16px;
    border: 1px solid var(--w-border);
    border-radius: 12px;
    background: var(--w-surface);
}

.crm-avisos__variaveis summary {
    cursor: pointer;
    font-size: var(--w-text-sm, .875rem);
    font-weight: var(--w-weight-semibold, 600);
    color: var(--w-text-primary);
}

.crm-avisos__variaveis ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 8px 18px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.crm-avisos__variaveis li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: var(--w-text-sm, .875rem);
    color: var(--w-text-secondary);
}

.crm-avisos__var {
    flex: none;
    padding: 2px 8px;
    border: 1px solid var(--w-border);
    border-radius: 6px;
    background: var(--w-surface-sunken);
    color: var(--w-accent);
    font-family: var(--w-font-mono, monospace);
    font-size: var(--w-text-xs, .75rem);
    cursor: pointer;
}

.crm-avisos__var:hover { border-color: var(--w-accent); }

.crm-avisos__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    gap: var(--w-space-4, 16px);
}

.crm-aviso {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--w-border);
    border-radius: 14px;
    background: var(--w-surface);
}

.crm-aviso__topo {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.crm-aviso__icone {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 11px;
    background: color-mix(in srgb, var(--w-accent) 13%, transparent);
    color: var(--w-accent);
}

.crm-aviso__topo h3 {
    margin: 0 0 3px;
    font-size: var(--w-text-md, .9375rem);
    font-weight: var(--w-weight-bold, 700);
    color: var(--w-text-primary);
}

.crm-aviso__topo p {
    margin: 0;
    font-size: var(--w-text-xs, .75rem);
    line-height: 1.5;
    color: var(--w-text-secondary);
}

/* A chave fica no topo do cartao porque e a primeira decisao: ligado ou nao.
   O texto so importa depois disso. */
.crm-aviso__chave {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: var(--w-text-xs, .75rem);
    font-weight: var(--w-weight-semibold, 600);
    color: var(--w-text-secondary);
    white-space: nowrap;
    cursor: pointer;
}

.crm-aviso__rotulo {
    margin: 4px 0 0;
    font-size: var(--w-text-sm, .875rem);
    font-weight: var(--w-weight-semibold, 600);
    color: var(--w-text-primary);
}

.crm-aviso__reenvio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.crm-aviso__reenvio label {
    display: block;
    margin-bottom: 5px;
    font-size: var(--w-text-sm, .875rem);
    font-weight: var(--w-weight-semibold, 600);
    color: var(--w-text-primary);
}

.crm-aviso__reenvio small {
    display: block;
    margin-top: 5px;
    font-size: var(--w-text-xs, .75rem);
    line-height: 1.4;
    color: var(--w-text-secondary);
}

.crm-aviso__acoes { display: flex; justify-content: flex-end; }

@media (max-width: 575.98px) {
    .crm-aviso__reenvio { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Sub-abas e chave de ligar/desligar
   --------------------------------------------------------------------------
   Nasceram na tela de Pipeline / Etapas: o nome do funil e as etapas sao
   trabalhos diferentes — um se faz uma vez, o outro se mexe toda semana — e
   empilhados viravam uma rolagem em que a pessoa perdia de vista em qual funil
   estava.
   ========================================================================== */

.crm-subabas {
    display: flex;
    gap: .3rem;
    padding: .25rem;
    margin: 0 0 1rem;
    border-radius: var(--w-radius-full, 999px);
    background: var(--w-surface-sunken, #f4f5f9);
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.crm-subabas::-webkit-scrollbar { width: 0; height: 0; }

.crm-subabas button {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem 1rem;
    border: 0;
    border-radius: var(--w-radius-full, 999px);
    background: transparent;
    font-size: .85rem;
    font-weight: 600;
    color: var(--w-text-secondary, #5b6172);
    white-space: nowrap;
    cursor: pointer;
}

.crm-subabas button.is-ativa {
    background: var(--w-surface, #fff);
    color: var(--w-text-primary, #171a21);
    box-shadow: var(--w-shadow-sm, 0 1px 2px rgba(16, 18, 27, .08));
}

.crm-subabas__conta {
    padding: 0 .4rem;
    border-radius: var(--w-radius-full, 999px);
    font-size: .72rem;
    font-weight: 800;
    color: var(--w-accent, #130a78);
    background: color-mix(in srgb, var(--w-accent, #130a78) 14%, transparent);
}

.crm-subaba[hidden] { display: none !important; }

/* --- Chave de ligar/desligar --------------------------------------------- */

/* Caixa de selecao com rotulo ao lado exige leitura para saber o estado; a
   chave se le de longe, e e o que decide qual funil abre e o que fecha um
   negocio. */
.crm-chave {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1rem;
    cursor: pointer;
    user-select: none;
}

.crm-chave input { position: absolute; opacity: 0; width: 0; height: 0; }

.crm-chave__trilho {
    position: relative;
    width: 2.4rem;
    height: 1.35rem;
    flex: none;
    border-radius: var(--w-radius-full, 999px);
    background: var(--w-gray-300, #d3d6df);
    transition: background var(--w-duration-normal, .2s) var(--w-ease-out, ease);
}

.crm-chave__trilho::after {
    content: '';
    position: absolute;
    top: .17rem;
    left: .17rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--w-gray-0, #fff);
    box-shadow: 0 1px 2px rgba(16, 18, 27, .3);
    transition: transform var(--w-duration-normal, .2s) var(--w-ease-spring, cubic-bezier(.34, 1.56, .64, 1));
}

.crm-chave input:checked + .crm-chave__trilho { background: var(--w-success, #16a34a); }
.crm-chave input:checked + .crm-chave__trilho::after { transform: translateX(1.05rem); }

.crm-chave input:focus-visible + .crm-chave__trilho {
    outline: 2px solid var(--w-border-focus, #4f46e5);
    outline-offset: 2px;
}

.crm-chave__texto strong {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    color: var(--w-text-primary, #171a21);
}

.crm-chave__texto small {
    display: block;
    font-size: .78rem;
    line-height: 1.4;
    color: var(--w-text-secondary, #5b6172);
}

/* Dentro da linha de etapa o espaco e curto: so a chave e uma palavra. */
.crm-chave--enxuta { margin: 0; gap: .4rem; }
.crm-chave--enxuta .crm-chave__trilho { width: 2rem; height: 1.15rem; }
.crm-chave--enxuta .crm-chave__trilho::after { width: .85rem; height: .85rem; }
.crm-chave--enxuta input:checked + .crm-chave__trilho::after { transform: translateX(.85rem); }
.crm-chave--enxuta .crm-chave__texto strong { font-size: .8rem; }

/* ==========================================================================
   Janela do CRM
   --------------------------------------------------------------------------
   Cadastro e edicao sem sair da lista. As telas do modulo abriam o formulario
   como uma secao no fim da pagina, e uma ancora jogava a pessoa para la: ela
   perdia de vista a lista que estava consultando e, ao salvar, voltava ao topo
   sem saber se deu certo.
   ========================================================================== */

/* Gaveta à direita, e não caixa no meio da tela.
   O formulário de cadastro e edição encosta na borda direita e ocupa a altura
   inteira. O ganho não é estético: a lista atrás continua visível e alinhada, e
   quem está conferindo um registro enquanto edita outro não perde a referência
   — que era justamente o que a caixa centralizada tapava.

   O caminho de abrir continua o mesmo (`data-crm-janela-abrir`, fechar no X, no
   fundo e no Esc): o que mudou foi só onde o painel pousa. */
.crm-janela {
    position: fixed;
    inset: 0;
    z-index: var(--w-z-modal, 1050);
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
}

.crm-janela[hidden] { display: none !important; }

.crm-janela__fundo {
    position: absolute;
    inset: 0;
    background: var(--w-overlay, rgba(16, 18, 27, .55));
    backdrop-filter: blur(2px);
}

.crm-janela__caixa {
    position: relative;
    width: 100%;
    max-width: 34rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--w-surface, #fff);
    border-left: 1px solid var(--w-border);
    box-shadow: var(--w-shadow-xl, 0 24px 60px rgba(15, 18, 40, .3));
    overflow: hidden;
    animation: crm-janela-entra var(--w-duration-normal, .2s) var(--w-ease-out, ease);
}

.crm-janela--largo .crm-janela__caixa { max-width: 46rem; }
.crm-janela--enxuto .crm-janela__caixa { max-width: 26rem; }

@keyframes crm-janela-entra {
    from { transform: translateX(100%); }
    to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .crm-janela__caixa { animation: none; }
}

/* No celular a gaveta sobe do pé: uma faixa colada à direita em 390px de
   largura seria a tela inteira, com um recorte inútil na esquerda. */
@media (max-width: 640px) {
    .crm-janela { align-items: flex-end; }

    .crm-janela__caixa {
        max-width: none;
        height: auto;
        max-height: 92vh;
        border-left: 0;
        border-top-left-radius: var(--w-radius-xl, 20px);
        border-top-right-radius: var(--w-radius-xl, 20px);
        animation-name: crm-janela-sobe;
    }

    @keyframes crm-janela-sobe {
        from { transform: translateY(100%); }
        to { transform: none; }
    }
}

.crm-janela__topo {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.35rem 1rem;
    border-bottom: 1px solid var(--w-border-subtle, #e5e7eb);
}

.crm-janela__topo h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--w-text-primary, #171a21);
}

.crm-janela__topo p {
    margin: .25rem 0 0;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--w-text-secondary, #5b6172);
}

.crm-janela__fechar {
    /* Empurrado para a direita. Sem isto ele encostava no fim do título — que
       muda de largura conforme o texto — e aparecia no meio do cabeçalho. */
    margin-left: auto;
    flex: none;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--w-radius-md, 10px);
    background: transparent;
    color: var(--w-text-tertiary, #7a8194);
    cursor: pointer;
}

.crm-janela__fechar:hover { background: var(--w-surface-hover, #f1f2f6); color: var(--w-text-primary, #171a21); }
.crm-janela__fechar svg { width: 16px; height: 16px; }

/* O corpo rola sozinho: o cabecalho e o rodape do formulario ficam a vista
   mesmo num formulario longo. */
.crm-janela__corpo {
    padding: 1.25rem 1.35rem 0;
    overflow-y: auto;
}

/* --- Barra de acoes em destaque ------------------------------------------ */

/* Cinco botoes de peso igual, um do lado do outro, obrigam a ler todos para
   achar o que se quer. O botao cheio e o que se faz primeiro; o resto fica
   secundario, agrupado por assunto. */
.crm-acoes-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.crm-acao-forte,
.crm-acao {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1.05rem;
    border-radius: var(--w-radius-md, 12px);
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--w-duration-fast, .15s) var(--w-ease-out, ease),
                border-color var(--w-duration-fast, .15s) var(--w-ease-out, ease);
}

.crm-acao-forte {
    border: 1px solid transparent;
    background: var(--w-accent, #130a78);
    color: var(--w-accent-contrast, #fff);
    font-weight: 700;
    box-shadow: var(--w-shadow-sm, 0 1px 2px rgba(16, 18, 27, .08));
}

.crm-acao-forte:hover { background: var(--w-accent-hover, #1b0fa0); color: var(--w-accent-contrast, #fff); }

.crm-acao {
    border: 1px solid var(--w-border, #d8dbe4);
    background: var(--w-surface, #fff);
    color: var(--w-text-primary, #171a21);
}

.crm-acao:hover {
    background: var(--w-surface-hover, #f1f2f6);
    border-color: var(--w-border-strong, #c3c7d2);
    color: var(--w-text-primary, #171a21);
}

.crm-acao i, .crm-acao-forte i { font-size: .9em; }

/* --- Formulario dentro da modal ------------------------------------------ */

.crm-janela__grade {
    display: grid;
    gap: .9rem;
}

.crm-janela__cor input[type="color"] {
    width: 3.5rem;
    height: 2.4rem;
    padding: 2px;
    cursor: pointer;
}

.crm-janela__cor small {
    display: block;
    margin-top: .3rem;
    font-size: .78rem;
    color: var(--w-text-tertiary, #7a8194);
}

.crm-janela__acoes {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--w-border-subtle, #e5e7eb);
}

/* Paginacao das listagens do CRM, centralizada como no resto do sistema. */
.crm-paginacao {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

.crm-paginacao .pagination { margin: 0; flex-wrap: wrap; justify-content: center; }

/* Quantas mensagens ainda cabem hoje neste aparelho. */
.crm-wa-medidor__resta {
    margin: .35rem 0 0;
    font-size: .78rem;
    color: var(--w-text-secondary);
}

.crm-wa-medidor__resta strong {
    color: var(--w-danger-fg, #9f1239);
}

/* ==========================================================================
   Aparelhos de WhatsApp — cartões
   --------------------------------------------------------------------------
   A lista era um empilhado de linhas de texto: qual está conectado, qual é o
   principal e qual está perto do teto exigiam ler tudo. Agora cada aparelho é
   um cartão, o principal se distingue de relance pela borda, e o estado é uma
   etiqueta com cor própria — a informação que decide alguma coisa aparece
   antes da que só descreve.
   ========================================================================== */

.crm-wa-aparelhos {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

.crm-wa-aparelho {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    background: var(--w-surface);
    transition: border-color var(--w-duration-fast, .15s) ease,
                box-shadow var(--w-duration-fast, .15s) ease;
}

.crm-wa-aparelho:hover {
    border-color: var(--w-accent);
    box-shadow: var(--w-shadow-sm);
}

/* O principal: borda de destaque e um fio de cor à esquerda. */
.crm-wa-aparelho:has(.crm-wa-selo) {
    border-color: var(--w-accent);
    box-shadow: inset 3px 0 0 var(--w-accent);
}

.crm-wa-aparelho__id {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}

.crm-wa-numero__rotulo {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    font-weight: 600;
    color: var(--w-text-primary);
}

.crm-wa-selo {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: .12rem .45rem;
    border-radius: var(--w-radius-full);
    background: var(--w-accent);
    color: var(--w-accent-contrast);
}

.crm-wa-aparelho__meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: .2rem;
    font-size: .82rem;
    color: var(--w-text-secondary);
}

.crm-wa-aparelho__meta [data-crm-wa-tel] {
    font-variant-numeric: tabular-nums;
    color: var(--w-text-primary);
}

/* O ponto de estado ganha um halo quando está de pé: some no meio do texto
   era exatamente o dado que se procura primeiro. */
.crm-wa-ponto {
    flex: 0 0 auto;
    width: .7rem;
    height: .7rem;
    margin-top: .3rem;
    border-radius: 50%;
    background: var(--w-text-tertiary);
}

.crm-wa-ponto--ok {
    background: var(--w-success, #16a34a);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-success, #16a34a) 22%, transparent);
}

.crm-wa-ponto--atencao {
    background: var(--w-warning, #d97706);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-warning, #d97706) 22%, transparent);
}

.crm-wa-medidor__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    font-size: .8rem;
    color: var(--w-text-secondary);
}

.crm-wa-medidor__topo strong {
    font-size: 1.05rem;
    color: var(--w-text-primary);
    font-variant-numeric: tabular-nums;
}

.crm-wa-medidor__trilho {
    margin-top: .35rem;
    height: .4rem;
    border-radius: var(--w-radius-full);
    background: var(--w-surface-sunken);
    overflow: hidden;
}

.crm-wa-medidor__trilho span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--w-success, #16a34a);
    transition: width var(--w-duration-normal, .2s) ease;
}

.crm-wa-medidor__trilho span.is-atencao { background: var(--w-warning, #d97706); }
.crm-wa-medidor__trilho span.is-critico { background: var(--w-danger, #dc2626); }

/* ---------------------- telefone com bandeira ------------------------- */

.crm-wa-tel__caixa {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .15rem .5rem;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    background: var(--w-surface);
}

.crm-wa-tel__caixa:focus-within {
    border-color: var(--w-accent);
    box-shadow: var(--w-shadow-focus);
}

.crm-wa-tel__bandeira {
    font-size: 1.15rem;
    line-height: 1;
}

/* Os dois campos vivem dentro da mesma caixa: cada um com a própria borda
   pareciam dois dados, e são um telefone só. */
.crm-wa-tel__caixa select,
.crm-wa-tel__caixa input {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: .45rem .15rem;
    min-width: 0;
    color: var(--w-text-primary);
}

.crm-wa-tel__caixa select {
    flex: 0 0 auto;
    max-width: 8.5rem;
    color: var(--w-text-secondary);
}

.crm-wa-tel__caixa input {
    flex: 1 1 auto;
    font-variant-numeric: tabular-nums;
}

.crm-wa-tel__caixa select:focus,
.crm-wa-tel__caixa input:focus {
    outline: none;
    box-shadow: none;
}

/* --- Cartões dos aparelhos: compactos ------------------------------------
   O primeiro desenho deixava os cartões esticarem até a altura do mais alto
   da fileira, e um aparelho recém-cadastrado — sem telefone e sem medidor —
   virava um retângulo com um palmo de vazio no meio. Agora cada cartão tem a
   altura do próprio conteúdo. */

.crm-wa-aparelhos {
    align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
}

.crm-wa-aparelho {
    gap: .6rem;
    padding: .85rem .9rem;
}

.crm-wa-aparelho > * {
    flex: 0 0 auto;
}

.crm-wa-numero__rotulo {
    font-size: .92rem;
}

.crm-wa-aparelho__meta {
    font-size: .78rem;
}

.crm-wa-aparelho__uso {
    margin: 0;
}

/* Ações no rodapé do cartão, em botões enxutos: com o tamanho cheio, três
   deles não cabiam na largura de um cartão e quebravam em duas linhas. */
.crm-wa-aparelho__acoes {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    padding-top: .6rem;
    border-top: 1px solid var(--w-border-subtle, var(--w-border));
}

.crm-wa-aparelho__acoes .lz-btn {
    padding: .35rem .7rem;
    font-size: .82rem;
}

.crm-wa-aparelho__acoes .lz-acao {
    width: 30px;
    height: 30px;
}

/* --- O formulário de cadastro, numa linha só ---------------------------- */

.crm-wa-forma-inline {
    display: grid;
    gap: .75rem;
    /* `end` alinha os campos pela base: com rótulos de alturas diferentes, o
       botão flutuava no meio e cada caixa começava numa altura. */
    align-items: end;
    grid-template-columns: minmax(11rem, 1fr) minmax(15rem, 1.3fr) auto;
}

@media (max-width: 720px) {
    .crm-wa-forma-inline {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

.crm-wa-forma-inline .lz-campo {
    margin: 0;
}

/* Nenhum texto de ajuda embaixo dos campos desta linha: posicionado fora do
   fluxo para não empurrar o botão, ele subia por cima do próprio rótulo. O
   formato do telefone vive no `placeholder` e na frase de abertura da seção,
   onde cabe sem disputar espaço com nada. */
.crm-wa-forma-inline .lz-campo small {
    display: none;
}

/* --- Rodapé de ações dentro da janela ------------------------------------
   O corpo da janela rola, e a barra de botões rolava com ele: em formulário
   longo o "Criar automação" ficava fora da vista e era preciso rolar até o fim
   só para encontrá-lo. Agora ela fica grudada embaixo.

   Com fundo OPACO, e este é o detalhe que faltava: sem ele, os campos passavam
   visivelmente por trás dos botões. `--w-surface` é o mesmo fundo da janela, e
   por vir de token acompanha o tema escuro sozinho. */

.crm-janela .crm-form__acoes,
.crm-janela .crm-janela__acoes,
.crm-janela .crm-script__salvar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    /* Sem margem negativa embaixo: ela punha a base do rodapé 1.35rem além do
       fim da área de rolagem, então ele grudava alto e o formulário continuava
       aparecendo numa faixa por baixo dos botões. As laterais seguem negativas
       para a barra atravessar a janela de ponta a ponta. */
    margin: 1rem -1.35rem 0;
    padding: .9rem 1.35rem;
    background: var(--w-surface);
    border-top: 1px solid var(--w-border);
}

@media (max-width: 640px) {
    .crm-janela .crm-form__acoes,
    .crm-janela .crm-janela__acoes,
    .crm-janela .crm-script__salvar {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .crm-janela .crm-form__acoes .lz-btn,
    .crm-janela .crm-janela__acoes .lz-btn,
    .crm-janela .crm-script__salvar .lz-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}


/* ==========================================================================
   Scripts prontos, na barra da conversa
   --------------------------------------------------------------------------
   Um botão ao lado do anexo abre a lista do que a conta já escreveu. Cada
   script traz duas ações porque são dois gestos diferentes: INSERIR, para quem
   vai ajustar uma frase antes de mandar, e ENVIAR, que dispara o script como
   ele foi montado — com imagem, áudio, vídeo e documento.
   ========================================================================== */

.crm-scripts {
    position: relative;
    flex: 0 0 auto;
}

.crm-scripts__painel {
    position: absolute;
    bottom: calc(100% + .5rem);
    right: 0;
    z-index: 30;
    width: min(24rem, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    max-height: 24rem;
    border-radius: var(--w-radius-lg);
    border: 1px solid var(--w-border);
    background: var(--w-surface);
    box-shadow: var(--w-shadow-lg);
    overflow: hidden;
}

.crm-scripts__painel[hidden] { display: none !important; }

.crm-scripts__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem .9rem;
    border-bottom: 1px solid var(--w-border-subtle, var(--w-border));
}

.crm-scripts__topo strong {
    display: block;
    font-size: .92rem;
    color: var(--w-text-primary);
}

.crm-scripts__topo small {
    display: block;
    margin-top: .1rem;
    font-size: .76rem;
    line-height: 1.4;
    color: var(--w-text-secondary);
}

.crm-scripts__fechar {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--w-radius-md);
    background: transparent;
    color: var(--w-text-tertiary);
    cursor: pointer;
}

.crm-scripts__fechar:hover {
    background: var(--w-surface-hover);
    color: var(--w-text-primary);
}

.crm-scripts__busca {
    position: relative;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--w-border-subtle, var(--w-border));
}

.crm-scripts__busca i {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .78rem;
    color: var(--w-text-tertiary);
    pointer-events: none;
}

.crm-scripts__busca input {
    width: 100%;
    padding: .45rem .7rem .45rem 1.85rem;
    font-size: .84rem;
    border-radius: var(--w-radius-md);
    border: 1px solid var(--w-border);
    background: var(--w-surface-sunken);
    color: var(--w-text-primary);
}

.crm-scripts__busca input:focus {
    outline: none;
    border-color: var(--w-accent);
    background: var(--w-surface);
}

.crm-scripts__lista {
    margin: 0;
    padding: .35rem;
    list-style: none;
    overflow-y: auto;
}

.crm-scripts__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .55rem;
    border-radius: var(--w-radius-md);
}

.crm-scripts__item[hidden] { display: none !important; }
.crm-scripts__item:hover { background: var(--w-surface-hover); }

.crm-scripts__info {
    flex: 1 1 auto;
    min-width: 0;
}

.crm-scripts__info strong {
    display: block;
    font-size: .86rem;
    font-weight: 600;
    color: var(--w-text-primary);
}

/* A prévia fica em UMA linha: duas ou três empurrariam os botões para fora e
   transformariam a lista numa parede de texto. */
.crm-scripts__info span {
    display: block;
    font-size: .76rem;
    color: var(--w-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-scripts__anexos {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .2rem;
    font-size: .72rem;
    font-style: normal;
    color: var(--w-accent);
}

.crm-scripts__acoes {
    flex: 0 0 auto;
    display: flex;
    gap: .3rem;
}

.crm-scripts__acao {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .6rem;
    font-size: .76rem;
    font-weight: 600;
    border-radius: var(--w-radius-md);
    border: 1px solid var(--w-border);
    background: var(--w-surface);
    color: var(--w-text-secondary);
    text-decoration: none;
    cursor: pointer;
}

.crm-scripts__acao:hover {
    border-color: var(--w-accent);
    color: var(--w-accent);
}

.crm-scripts__acao--forte {
    background: var(--w-accent);
    border-color: var(--w-accent);
    color: var(--w-accent-contrast);
}

.crm-scripts__acao--forte:hover {
    filter: brightness(1.08);
    color: var(--w-accent-contrast);
}

.crm-scripts__acao:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.crm-scripts__vazio {
    padding: 1.1rem .9rem 1.2rem;
    text-align: center;
    font-size: .82rem;
    color: var(--w-text-secondary);
}

.crm-scripts__vazio p { margin: 0 0 .7rem; }

/* ==========================================================================
   Aviso de mensagem nova
   --------------------------------------------------------------------------
   Canto inferior direito, longe do campo de digitação e do botão de enviar —
   um aviso que cobre o que a pessoa está fazendo é interrupção, não aviso.
   Some sozinho em seis segundos: esperar ser fechado vira uma pilha na frente
   da tela em dia movimentado. O cartão inteiro é clicável e abre a conversa.
   ========================================================================== */

.crm-avisos {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    /* A pilha não intercepta cliques; cada cartão volta a interceptar. */
    pointer-events: none;
}

/* O cartão: fundo do sistema com um véu verde por cima, para ele pertencer à
   tela e ainda assim dizer de onde veio a mensagem. O `overflow: hidden`
   segura a barra de tempo dentro do canto arredondado. */
.crm-aviso {
    position: relative;
    pointer-events: auto;
    width: min(21rem, calc(100vw - 2.5rem));
    padding: .85rem .95rem 1rem;
    border-radius: var(--w-radius-xl, 16px);
    border: 1px solid color-mix(in srgb, var(--w-success, #16a34a) 22%, var(--w-border));
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--w-success, #16a34a) 7%, transparent),
            transparent 42%
        ),
        var(--w-surface);
    box-shadow: var(--w-shadow-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--w-duration-fast, .15s) ease,
                box-shadow var(--w-duration-fast, .15s) ease;
    animation: crm-aviso-entra var(--w-duration-normal, .22s) var(--w-ease-out, ease);
}

/* Levanta de leve ao passar o mouse: o cartão é clicável, e nada na tela
   dizia isso além do cursor. */
.crm-aviso:hover {
    transform: translateY(-2px);
    box-shadow: var(--w-shadow-xl, 0 24px 60px rgba(15, 18, 40, .3));
}



.crm-aviso.is-saindo {
    animation: crm-aviso-sai .2s ease forwards;
}

@keyframes crm-aviso-entra {
    from { opacity: 0; transform: translateY(.75rem) scale(.98); }
    to   { opacity: 1; transform: none; }
}

@keyframes crm-aviso-sai {
    to { opacity: 0; transform: translateX(1rem); }
}

@media (prefers-reduced-motion: reduce) {
    .crm-aviso,
    .crm-aviso.is-saindo { animation: none; }
}

.crm-aviso__topo {
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* Anel em volta da inicial: o avatar ganha presença sem virar um disco
   chapado de cor. */
.crm-aviso__marca {
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--w-success, #16a34a) 16%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--w-success, #16a34a) 28%, transparent);
    color: var(--w-success, #16a34a);
    font-weight: 700;
    font-size: .92rem;
}

.crm-aviso__quem {
    flex: 1 1 auto;
    min-width: 0;
}

.crm-aviso__quem strong {
    display: block;
    font-size: .88rem;
    color: var(--w-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-aviso__quem small {
    display: block;
    font-size: .76rem;
    color: var(--w-text-secondary);
    font-variant-numeric: tabular-nums;
}

.crm-aviso__fechar {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--w-radius-md);
    background: transparent;
    color: var(--w-text-tertiary);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.crm-aviso__fechar:hover {
    background: var(--w-surface-hover);
    color: var(--w-text-primary);
}

/* Mesma família do contador da lista: o aviso e a bolinha falam da mesma
   coisa, e cores diferentes fariam parecer dois assuntos. */
.crm-aviso__selo {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: .5rem 0 .3rem;
    padding: .12rem .5rem;
    border-radius: var(--w-radius-full);
    background: color-mix(in srgb, var(--w-success, #16a34a) 16%, transparent);
    color: var(--w-success, #16a34a);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.crm-aviso__texto {
    margin: 0;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--w-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------- a bolinha na lista ------------------------------ */

.crm-inbox__topo-direita {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
}

/* Redonda de verdade: `min-width` igual à altura mantém o círculo com um
   dígito, e o padding só entra quando o número cresce. */
/* Verde, e não o azul do sistema: quem vê o contador associa na hora com o
   WhatsApp, que é de onde a mensagem veio. Suave, com o verde no texto e uma
   lâmina translúcida no fundo — um círculo verde chapado no meio de uma lista
   clara grita mais do que avisa. `--w-success` já muda sozinho no tema
   escuro, então o contraste acompanha sem uma segunda regra. */
.crm-inbox__bolinha {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .32rem;
    border-radius: var(--w-radius-full);
    background: color-mix(in srgb, var(--w-success, #16a34a) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--w-success, #16a34a) 32%, transparent);
    color: var(--w-success, #16a34a);
    font-size: .68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.crm-inbox__bolinha[hidden] { display: none !important; }

/* A conversa com mensagem nova pesa mais na lista: negrito no nome e um fio
   de cor à esquerda. Sem isso, a bolinha era o único sinal — e ela é pequena
   justamente para não gritar. */
.crm-inbox__item.tem-novas {
    box-shadow: inset 3px 0 0 var(--w-success, #16a34a);
}

.crm-inbox__item.tem-novas .crm-inbox__item-topo strong,
.crm-inbox__item.tem-novas .crm-inbox__previa {
    color: var(--w-text-primary);
    font-weight: 600;
}


/* Ponto que pisca ao lado do selo: diz "isto acabou de chegar", que é a única
   informação que o selo sozinho não dá. */
.crm-aviso__pulso {
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: var(--w-success, #16a34a);
    animation: crm-aviso-pulsa 1.6s ease-in-out infinite;
}

@keyframes crm-aviso-pulsa {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.82); }
}

/* A barra do tempo, rente à borda de baixo. Sem ela o cartão some sem
   explicação, e quem estava lendo acha que a tela engoliu o aviso. */
.crm-aviso__barra {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: color-mix(in srgb, var(--w-success, #16a34a) 12%, transparent);
}

.crm-aviso__barra i {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left center;
    background: var(--w-success, #16a34a);
    animation: crm-aviso-tempo 6s linear forwards;
}

@keyframes crm-aviso-tempo {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Mouse em cima segura tudo: a contagem e a barra param juntas. */
.crm-aviso.is-parado .crm-aviso__barra i {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .crm-aviso__pulso,
    .crm-aviso__barra i { animation: none; }

    .crm-aviso:hover { transform: none; }
}

/* A foto do contato por cima da inicial.
   A letra fica embaixo, sempre: o endereço da foto vem do WhatsApp e vence com
   o tempo; quando isso acontece, o `onerror` tira a imagem e a inicial
   reaparece sozinha — em vez do quadrado cinza de imagem que não carregou. */
.crm-inbox__avatar {
    position: relative;
    overflow: hidden;
}

.crm-inbox__avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/*==============================================================================
  FUNIL — a moldura de duas colunas

  À esquerda, a lista de contatos; à direita, o trabalho. A lista existe para
  responder no meio do caminho "esse cliente já tem negócio aberto?" sem custar
  uma saída da tela.
==============================================================================*/

.fn-area {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--w-space-4);
    align-items: start;
}

/* Recolhida, a lista devolve a largura para o quadro — que é onde ela faz
   falta num notebook. */
.fn-area:has(.fn-contatos.esta-recolhida) { grid-template-columns: 44px minmax(0, 1fr); }

.fn-trabalho { min-width: 0; }

@media (max-width: 1100px) {
    /* A lista vai para cima e vira uma faixa: espremida ao lado do quadro numa
       tela média, nenhum dos dois caberia. */
    .fn-area { grid-template-columns: minmax(0, 1fr); }
}

.fn-contatos {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    overflow: hidden;
}

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

.fn-contatos__topo h2 {
    margin: 0;
    font-size: var(--w-text-sm);
    font-weight: 700;
    color: var(--w-text-primary);
}

.fn-contatos__recolher {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-left: auto;
    color: var(--w-text-tertiary);
    background: var(--w-surface-sunken);
    border: 0;
    border-radius: var(--w-radius-full);
    cursor: pointer;
    flex: none;
}

.fn-contatos__recolher:hover { color: var(--w-text-primary); }
.fn-contatos__recolher svg { width: 14px; height: 14px; }

.fn-contatos__corpo {
    display: flex;
    flex-direction: column;
    gap: var(--w-space-3);
    min-height: 0;
    padding: var(--w-space-4);
}

/* Recolhida: some tudo menos a alça de abrir de volta. */
.fn-contatos.esta-recolhida { max-height: none; }
.fn-contatos.esta-recolhida .fn-contatos__corpo,
.fn-contatos.esta-recolhida .fn-contatos__topo h2 { display: none; }
.fn-contatos.esta-recolhida .fn-contatos__topo { padding: var(--w-space-2); border-bottom: 0; }
.fn-contatos.esta-recolhida .fn-contatos__recolher svg { transform: rotate(180deg); }

.fn-contatos__chave {
    display: flex;
    align-items: center;
    gap: var(--w-space-2);
    font-size: var(--w-text-xs);
    color: var(--w-text-secondary);
    cursor: pointer;
}

.fn-contatos__chave input { position: absolute; opacity: 0; pointer-events: none; }

.fn-contatos__chave span {
    position: relative;
    width: 32px;
    height: 18px;
    flex: none;
    background: var(--w-surface-active);
    border-radius: var(--w-radius-full);
    transition: background-color var(--w-duration-fast) var(--w-ease-out);
}

.fn-contatos__chave span::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--w-surface);
    border-radius: var(--w-radius-full);
    transition: transform var(--w-duration-fast) var(--w-ease-out);
}

.fn-contatos__chave input:checked + span { background: var(--w-accent); }
.fn-contatos__chave input:checked + span::after { transform: translateX(14px); }

.fn-contatos__busca { position: relative; }

.fn-contatos__busca svg {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--w-text-tertiary);
    pointer-events: none;
}

.fn-contatos__busca input {
    width: 100%;
    height: 34px;
    padding: 0 var(--w-space-3) 0 32px;
    font-size: var(--w-text-sm);
    color: var(--w-text-primary);
    background: var(--w-surface-sunken);
    border: 1px solid transparent;
    border-radius: var(--w-radius-md);
}

.fn-contatos__busca input:focus {
    outline: none;
    background: var(--w-surface);
    border-color: var(--w-border-focus);
}

.fn-contatos__resumo {
    margin: 0;
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
}

.fn-contatos__lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    min-height: 0;
}

.fn-contatos__lista li {
    display: flex;
    align-items: center;
    gap: var(--w-space-2);
    padding: 8px 10px;
    background: var(--w-surface-sunken);
    border-radius: var(--w-radius-md);
}

.fn-contatos__avatar {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    font-size: var(--w-text-xs);
    font-weight: 700;
    color: var(--w-accent-contrast);
    background: var(--w-accent);
    border-radius: var(--w-radius-full);
}

.fn-contatos__quem { min-width: 0; }
.fn-contatos__quem strong {
    display: block;
    font-size: var(--w-text-sm);
    font-weight: 600;
    color: var(--w-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fn-contatos__quem small { color: var(--w-text-tertiary); font-size: var(--w-text-2xs); }

.fn-contatos__novo {
    width: 24px;
    height: 24px;
    margin-left: auto;
    flex: none;
    font-size: 15px;
    line-height: 1;
    color: var(--w-accent);
    background: transparent;
    border: 1px dashed var(--w-border-strong);
    border-radius: var(--w-radius-full);
    cursor: pointer;
}

.fn-contatos__novo:hover { background: var(--w-accent-subtle); border-style: solid; }

.fn-contatos__vazio {
    padding: var(--w-space-4) 0;
    text-align: center;
    color: var(--w-text-tertiary);
    font-size: var(--w-text-sm);
    background: transparent;
}

/*------------------------------------------------------------------------------
  A lista, quando a visão não é o quadro
------------------------------------------------------------------------------*/

.fn-lista {
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    overflow: hidden;
}

.fn-lista__tabela { width: 100%; border-collapse: collapse; font-size: var(--w-text-sm); }

.fn-lista__tabela th {
    padding: var(--w-space-3) var(--w-space-4);
    text-align: left;
    font-size: var(--w-text-2xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--w-text-tertiary);
    background: var(--w-surface-sunken);
    border-bottom: 1px solid var(--w-border);
}

.fn-lista__tabela td {
    padding: var(--w-space-3) var(--w-space-4);
    border-bottom: 1px solid var(--w-border-subtle);
    color: var(--w-text-secondary);
}

.fn-lista__tabela tbody tr { cursor: pointer; }
.fn-lista__tabela tbody tr:hover { background: var(--w-surface-hover); }
.fn-lista__tabela tbody tr:last-child td { border-bottom: 0; }
.fn-lista__tabela strong { color: var(--w-text-primary); font-weight: 600; }
.fn-lista__num { text-align: right; white-space: nowrap; }

/* A etapa como pastilha na cor dela: é o que a lista perde do quadro. */
.fn-etapa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-size: var(--w-text-2xs);
    font-weight: 700;
    color: var(--w-text-secondary);
    background: color-mix(in srgb, var(--fn-cor, #64748b) 14%, transparent);
    border-radius: var(--w-radius-full);
}

.fn-etapa::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: var(--w-radius-full);
    background: var(--fn-cor, #64748b);
}

/*------------------------------------------------------------------------------
  Cartão compacto e cabeçalho de coluna

  O cartão encolheu: título, cliente, valor e um selo de estado à direita. Numa
  coluna passam a caber seis ou sete em vez de três, e é isso que faz o quadro
  ser lido de uma olhada em vez de rolado.
------------------------------------------------------------------------------*/

.crm-cartao {
    display: flex;
    align-items: flex-start;
    gap: var(--w-space-2);
}

.crm-cartao__corpo { flex: 1 1 auto; min-width: 0; }

.crm-cartao__titulo {
    margin: 0;
    font-size: var(--w-text-sm);
    font-weight: 600;
    line-height: 1.35;
    color: var(--w-text-primary);
}

.crm-cartao__cliente {
    margin: 2px 0 0;
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-cartao__valor {
    margin: 6px 0 0;
    font-size: var(--w-text-sm);
    font-weight: 700;
    color: var(--w-text-primary);
}

/* O selo de estado: um círculo com ícone, na cor do que ele avisa. */
.crm-cartao__estado {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: var(--w-radius-md);
    cursor: help;
}

.crm-cartao__estado svg { width: 16px; height: 16px; }

.crm-cartao__estado.crm-prazo--vencido { color: var(--w-danger); background: var(--w-danger-bg); }
.crm-cartao__estado.crm-prazo--hoje,
.crm-cartao__estado.crm-prazo--perto { color: var(--w-warning); background: var(--w-warning-bg); }
.crm-cartao__estado.crm-prazo--longe { color: var(--w-success); background: var(--w-success-bg); }
.crm-cartao__estado.crm-prazo--sem { color: var(--w-text-tertiary); background: var(--w-surface-sunken); }

/* Quantos e quanto, numa linha só, logo abaixo do nome da etapa. */
/* Centrados na coluna, e não encostados na borda: são dois números que se
   compara entre colunas vizinhas, e alinhados à esquerda a leitura tinha de
   caçar cada par no canto de cada uma. */
.crm-coluna__resumo {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin: 2px 0 var(--w-space-3);
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
    text-align: center;
}

.crm-coluna__resumo b { color: var(--w-text-secondary); font-weight: 600; }
.crm-coluna__resumo i { font-style: normal; opacity: .6; }

/* O nome da etapa é editável no lugar. */
.crm-coluna__nome[data-crm-renomear] {
    border-radius: var(--w-radius-sm);
    padding: 1px 4px;
    margin: -1px -4px;
    cursor: text;
}

.crm-coluna__nome[data-crm-renomear]:hover { background: var(--w-surface-hover); }

.crm-coluna__nome[data-crm-renomear]:focus {
    outline: none;
    background: var(--w-surface);
    box-shadow: var(--w-shadow-focus);
}

.fn-lista__paginacao {
    padding: var(--w-space-3) var(--w-space-4);
    border-top: 1px solid var(--w-border);
}

/*------------------------------------------------------------------------------
  Barras de rolagem do funil

  Mais largas e na cor da marca, com transparência: no quadro elas não são
  detalhe de acabamento — são a única pista de que a coluna continua abaixo e
  de que há mais etapas à direita. Finas e cinzas, passavam despercebidas.
------------------------------------------------------------------------------*/

.crm-quadro,
.crm-coluna__lista,
.fn-contatos__lista,
.fn-lista {
    scrollbar-width: auto;
    scrollbar-color: color-mix(in srgb, var(--w-accent) 55%, transparent) transparent;
}

.crm-quadro::-webkit-scrollbar,
.crm-coluna__lista::-webkit-scrollbar,
.fn-contatos__lista::-webkit-scrollbar,
.fn-lista::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.crm-quadro::-webkit-scrollbar-track,
.crm-coluna__lista::-webkit-scrollbar-track,
.fn-contatos__lista::-webkit-scrollbar-track,
.fn-lista::-webkit-scrollbar-track {
    background: transparent;
}

.crm-quadro::-webkit-scrollbar-thumb,
.crm-coluna__lista::-webkit-scrollbar-thumb,
.fn-contatos__lista::-webkit-scrollbar-thumb,
.fn-lista::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--w-accent) 45%, transparent);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: var(--w-radius-full);
}

.crm-quadro::-webkit-scrollbar-thumb:hover,
.crm-coluna__lista::-webkit-scrollbar-thumb:hover,
.fn-contatos__lista::-webkit-scrollbar-thumb:hover,
.fn-lista::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--w-accent) 70%, transparent);
    background-clip: padding-box;
}

/*------------------------------------------------------------------------------
  Botões redondos do quadro

  O "+" da coluna e o da lista de contatos são o mesmo gesto — criar um negócio
  já com o contexto escolhido —, então são o mesmo botão. Sólido e discreto,
  como no modelo: a borda tracejada os fazia parecer campo a preencher.
------------------------------------------------------------------------------*/

.crm-coluna__novo,
.fn-contatos__novo {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    flex: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: var(--w-accent);
    background: color-mix(in srgb, var(--w-accent) 10%, transparent);
    border: 0;
    border-radius: var(--w-radius-full);
    cursor: pointer;
    transition: background-color var(--w-duration-fast) var(--w-ease-out),
        color var(--w-duration-fast) var(--w-ease-out);
}

.crm-coluna__novo:hover,
.fn-contatos__novo:hover {
    color: var(--w-accent-contrast);
    background: var(--w-accent);
}

.crm-coluna__novo:focus-visible,
.fn-contatos__novo:focus-visible {
    outline: none;
    box-shadow: var(--w-shadow-focus);
}

/*------------------------------------------------------------------------------
  A modal de oportunidade vira gaveta

  Mesma modal do Bootstrap — mesmos gatilhos, mesmo JavaScript, mesma validação
  — encostada à direita e ocupando a altura inteira. O que muda é onde ela
  pousa: no meio da tela, tapava justamente o quadro em que a pessoa ia soltar
  o cartão que estava criando.
------------------------------------------------------------------------------*/

.modal-dialog.crm-modal--gaveta {
    max-width: 46rem;
    width: 100%;
    height: 100%;
    margin: 0 0 0 auto;
    display: flex;
    align-items: stretch;
    transform: translateX(24px);
}

.modal.show .modal-dialog.crm-modal--gaveta { transform: none; }

.crm-modal--gaveta .modal-content {
    height: 100%;
    border: 0;
    border-left: 1px solid var(--w-border);
    border-radius: 0;
    box-shadow: var(--w-shadow-xl);
}

/* O corpo rola; cabeçalho e rodapé ficam. */
.crm-modal--gaveta .modal-body { overflow-y: auto; }

.crm-modal--gaveta .modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--w-surface);
    border-top: 1px solid var(--w-border);
}

@media (max-width: 640px) {
    /* No celular a gaveta sobe do pé: uma faixa colada à direita em 390px é a
       tela inteira, com um recorte inútil na esquerda. */
    .modal-dialog.crm-modal--gaveta {
        max-width: none;
        height: auto;
        max-height: 92vh;
        margin: auto 0 0;
        transform: translateY(24px);
    }

    .crm-modal--gaveta .modal-content {
        border-left: 0;
        border-top-left-radius: var(--w-radius-xl);
        border-top-right-radius: var(--w-radius-xl);
    }
}

/*------------------------------------------------------------------------------
  Atalhos do CRM, no cabeçalho da tela

  Uma fileira discreta: o menu principal continua sendo o caminho completo, e
  isto é o pulo para a tela vizinha de quem já está dentro do módulo. Discreto
  de propósito — competindo com o título, viraria um segundo menu.
------------------------------------------------------------------------------*/

.crm-atalhos {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--w-surface-sunken);
    border-radius: var(--w-radius-md);
    overflow-x: auto;
    scrollbar-width: none;
}

.crm-atalhos::-webkit-scrollbar { display: none; }

.crm-atalhos__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px var(--w-space-3);
    font-size: var(--w-text-xs);
    font-weight: 600;
    color: var(--w-text-tertiary);
    border-radius: calc(var(--w-radius-md) - 3px);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--w-duration-fast) var(--w-ease-out),
        background-color var(--w-duration-fast) var(--w-ease-out);
}

.crm-atalhos__item:hover {
    color: var(--w-text-primary);
    background: var(--w-surface-hover);
    text-decoration: none;
}

/* A tela em que se está: pastilha clara, o mesmo estado do menu principal. */
.crm-atalhos__item.is-ativo {
    color: var(--w-accent);
    background: var(--w-surface);
    box-shadow: var(--w-shadow-xs);
}

.crm-atalhos__item i { font-size: 15px; }

@media (max-width: 1500px) {
    /* Fica o ícone; o nome continua no `title` e no menu principal. O item da
       tela atual guarda o rótulo — é ele que diz onde se está. */
    .crm-atalhos__item:not(.is-ativo) span { display: none; }
    .crm-atalhos__item:not(.is-ativo) { padding: 5px var(--w-space-2); }
}

/* Respiro depois dos atalhos.

   Eles são uma faixa fina e o conteúdo começava colado neles, como se fizesse
   parte do mesmo bloco. O espaço é o que separa "para onde posso ir" de "o que
   estou vendo". */
.crm-atalhos { margin-bottom: var(--w-space-8); }

/* A faixa de números, quando desce para junto do conteúdo, precisa do mesmo
   respiro que tinha no alto da página. */
.crm-wa-chips { margin-bottom: var(--w-space-4); }