/*
  Configuracoes (Corte 2A-3) - pagina /configuracoes.
  Usa exclusivamente tokens --crm-* (crm-theme.css). Os paineis reaproveitados
  (Cargos/Usuarios/Tags/Respostas rapidas/Filas/Conexoes/Aparencia) continuam usando as
  classes legadas de app.css (.settings-user-card, .position-card, .user-editor, .field-stack,
  .modal-backdrop etc.) - aqui apenas refinamos a aparencia desses paineis quando aninhados
  dentro de .crm-settings-card, sem alterar as regras globais em app.css (que tambem servem
  Comercial/outros modais). Ver docs/modules/crm-chatbot/specs/CRM_CHATBOT_TFLUX_UI_FORENSIC_MAP.md
  secao 6.
*/

/* ============================================================================
   UNICHAT-CONFIGURACOES-VISUAL-ASSISTED-CONVERGENCE-01 — fundação da superfície.

   O que havia aqui era gramática própria de Configurações, e é a origem literal da "cara de
   sistema" que o proprietário nomeou: abas sublinhadas de 13.5px (VL-16 proíbe aba com borda
   inferior), título de seção em 11.5px MAIÚSCULO colorido (fora da escada de VL-01, fora da
   régua de VL-03) e card de 18px em tokens --crm-* (fora da escada de VL-05, e EX-01 fixa 20px).

   As abas foram para `UniTabs` e as classes `.crm-settings-tab*` deixaram de existir.
   ============================================================================ */

/* VL-16 (emenda §14) — o trilho é `width: fit-content` e `flex: 0 0 auto`; sem isso ele é
   esmagado dentro de um container em coluna. O respiro até o bloco seguinte é o de VL-05. */
.crm-settings-tabrail {
    flex: 0 0 auto;
    margin-bottom: var(--uni-space-5);
}

.crm-settings-content {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-5);
    padding-bottom: var(--uni-space-6);
}

/* VL-05 — gap entre seções de uma página: 24px. */
.crm-settings-section {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
}

/* UNICHAT-CUT-6 (F-25) — várias seções de um mesmo painel (Minha conta) empilhadas com o respiro do conteúdo. */
.crm-settings-stack {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-5);
}

/* Minha conta → Seus dados (revisão local do Owner, 2026-09-18). Os dados fixos da pessoa deixam de
   ser uma grade 2×2 de "rótulo fino + valor em negrito" e viram:
     1. identidade — avatar canônico (UniAvatar, o mesmo de Contatos) + nome + e-mail;
     2. fatos — lista com fio: rótulo à esquerda em coluna fixa, valor em peso normal à direita.
   No mobile (≤767px) o rótulo sobe para cima do valor e o fio continua separando as linhas. */
.crm-account-identity {
    display: flex;
    align-items: center;
    gap: var(--uni-space-4);
    min-width: 0;
}

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

.crm-account-identity-name {
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    line-height: 1.25;
    color: var(--uni-color-text);
    overflow-wrap: anywhere;
}

.crm-account-identity-email {
    font-size: var(--uni-font-size-sm);
    line-height: 1.4;
    color: var(--uni-color-text-muted);
    overflow-wrap: anywhere;
}

.crm-account-facts {
    margin: 0;
    border-top: 1px solid var(--uni-color-border);
}

.crm-account-facts > div {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    align-items: baseline;
    gap: var(--uni-space-4);
    padding: var(--uni-space-3) 0;
    border-bottom: 1px solid var(--uni-color-border);
    min-width: 0;
}

.crm-account-facts dt {
    font-size: var(--uni-font-size-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--uni-color-text-muted);
    user-select: none;
}

.crm-account-facts dd {
    margin: 0;
    font-size: var(--uni-font-size-md);
    font-weight: 400;
    line-height: 1.4;
    color: var(--uni-color-text);
    overflow-wrap: anywhere;
}

/* Ações do card: "Redefinir senha" (secundária) à esquerda de "Salvar perfil" (primária); quando a
   conta não permite trocar a senha, o motivo ocupa o lugar do botão, alinhado ao rodapé. */
.crm-account-actions {
    align-items: center;
    flex-wrap: wrap;
}

.crm-account-actions-hint {
    margin-right: auto;
}

/* Modal "Redefinir senha": três campos empilhados com o respiro do sistema (não a grade de duas colunas). */
.crm-account-password-form {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
}

@media (max-width: 767px) {
    .crm-account-facts > div {
        grid-template-columns: 1fr;
        gap: 2px;
        align-items: start;
    }

    /* Mobile: botões de largura inteira, a primária por cima (é o que a pessoa veio fazer). */
    .crm-account-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .crm-account-actions .app-button {
        width: 100%;
        justify-content: center;
    }

    .crm-account-actions-hint {
        margin-right: 0;
    }
}

/* VL-01 / VL-02 / VL-06 — título de bloco é `lg`/600, sem caixa alta, sem cor de destaque e sem
   régua: o respiro entre blocos é o que separa hierarquia (§1.5), borda é o último recurso. */
.crm-settings-section-title {
    margin: 0;
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    line-height: 1.2;
    color: var(--uni-color-text);
    user-select: none;
}

/* VL-15 — card: padding 20px (EX-01), raio lg, borda de 1px, sem sombra dentro da página. */
.crm-settings-card {
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
    padding: var(--uni-space-5);
}

.crm-settings-card + .crm-settings-card {
    margin-top: var(--uni-space-3);
}

/* Refinamento visual dos paineis legados quando aninhados aqui: menos negrito, tipografia
   mais leve, cards internos mais compactos - sem tocar na logica nem nas classes globais. */
.crm-settings-card .settings-panel-header h3 {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--crm-color-text);
}

.crm-settings-card .settings-panel-header p {
    color: var(--crm-color-text-muted);
    font-size: 12.5px;
}

.crm-settings-card .settings-user-card,
.crm-settings-card .position-card {
    border-color: var(--crm-color-border);
    border-radius: var(--crm-radius-md);
    background: var(--crm-color-surface-elevated);
    padding: 10px 12px;
}

.crm-settings-card .settings-user-card strong,
.crm-settings-card .position-card-main strong {
    font-weight: 600;
    color: var(--crm-color-text);
}

.crm-settings-card .settings-users,
.crm-settings-card .settings-section,
.crm-settings-card .settings-list,
.crm-settings-card .settings-detail {
    border-color: var(--crm-color-border);
    background: transparent;
}

.crm-settings-card .settings-state {
    border-color: var(--crm-color-border);
    background: var(--crm-color-surface-elevated);
    color: var(--crm-color-text-muted);
}

.crm-settings-card .settings-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.crm-settings-card .settings-title-row strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-settings-card .settings-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 3px 10px;
    border-radius: var(--crm-radius-xl);
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    flex: 0 0 auto;
}

.crm-settings-card .primary,
.crm-settings-card button.primary {
    border-color: var(--crm-color-primary);
    background: var(--crm-color-primary);
    color: var(--crm-color-on-primary);
    font-weight: 600;
}

.crm-settings-card .primary:hover:not(:disabled),
.crm-settings-card button.primary:hover:not(:disabled) {
    border-color: var(--crm-color-primary-hover);
    background: var(--crm-color-primary-hover);
    color: var(--crm-color-on-primary);
}

.crm-settings-card .icon-button:hover {
    border-color: var(--crm-color-primary);
    color: var(--crm-color-primary);
    background: var(--crm-color-primary-soft);
}

.crm-settings-card .icon-button,
.crm-settings-card .settings-panel-header button,
.crm-settings-card .settings-inline button,
.crm-settings-card .position-editor-footer button,
.crm-settings-card .mini-button {
    border-color: var(--crm-color-border);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
}

.crm-settings-card .icon-button.danger,
.crm-settings-card .icon-button.danger svg {
    color: var(--crm-color-danger);
}

.crm-settings-card .position-card-icon {
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text);
}

.crm-settings-card .position-card-icon svg,
.crm-settings-card .icon-button svg,
.crm-settings-card .summary-contact-row svg {
    fill: currentColor;
}

.crm-settings-card .position-card-main span {
    color: var(--crm-color-primary-soft-text);
    font-weight: 700;
}

.crm-settings-card .settings-user-card span,
.crm-settings-card .settings-user-card small,
.crm-settings-card .settings-user-card label span,
.crm-settings-card .position-card-main small,
.crm-settings-card .field-stack,
.crm-settings-card .field-hint,
.crm-settings-card .checkbox-row,
.crm-settings-card .quick-reply-variables span {
    color: var(--crm-color-text-muted);
}

.crm-settings-card .settings-user-main > strong,
.crm-settings-card .settings-user-main > .settings-title-row strong {
    color: var(--crm-color-text);
}

/* CHAT-OMNI-10 - arquivadas ficam ocultas por padrao na lista de Conexoes; este toggle so aparece
   quando ha pelo menos uma arquivada, entao nao ocupa espaco a toa na maioria dos workspaces. */
.crm-settings-card .settings-archived-toggle {
    margin-bottom: 12px;
}

.crm-data-avatar {
    background: var(--crm-data-color) !important;
    color: var(--crm-data-on-color) !important;
    background-image: none !important;
}

.crm-settings-card .crm-data-avatar {
    border-color: color-mix(in srgb, var(--crm-data-color) 34%, var(--crm-color-border));
}

.crm-settings-card .field-stack input,
.crm-settings-card .field-stack select,
.crm-settings-card .field-stack textarea,
.crm-settings-card .user-form-grid input,
.crm-settings-card .user-form-grid select,
.crm-settings-card .settings-user-card select {
    border-color: var(--crm-color-border);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
}

.crm-settings-card .field-stack input:focus,
.crm-settings-card .field-stack select:focus,
.crm-settings-card .field-stack textarea:focus,
.crm-settings-card .user-form-grid input:focus,
.crm-settings-card .user-form-grid select:focus {
    border-color: var(--crm-color-primary);
    box-shadow: 0 0 0 3px var(--crm-color-focus-ring);
    outline: none;
}

.crm-settings-card .user-role-field,
.crm-settings-card .permission-row,
.crm-settings-card .request-history,
.crm-settings-card .summary-card,
.crm-settings-card .commercial-section,
.crm-settings-card .commercial-empty {
    border-color: var(--crm-color-border);
    background: var(--crm-color-surface-elevated);
    color: var(--crm-color-text);
}

/* D-47 (UNICHAT-UX-PRODUCT-ATENDIMENTO-OMNICHANNEL-05) — autosave por permissão */
.permission-row.is-saving { opacity: 0.7; }
.permission-row-saving {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--crm-color-text-muted);
    white-space: nowrap;
}

.crm-settings-card .settings-feedback {
    background: color-mix(in srgb, var(--crm-color-info) 16%, var(--crm-color-surface));
    color: var(--crm-color-info);
}

.crm-settings-card .settings-feedback.error,
.crm-settings-card .commercial-feedback.error {
    border-color: color-mix(in srgb, var(--crm-color-danger) 38%, var(--crm-color-border));
    background: color-mix(in srgb, var(--crm-color-danger) 12%, var(--crm-color-surface));
    color: var(--crm-color-danger);
}

.crm-settings-card .quick-reply-variable-chip,
.crm-settings-card .tag-chip-add {
    border-color: var(--crm-color-border);
    background: var(--crm-color-surface-elevated);
    color: var(--crm-color-primary-soft-text);
}

.crm-settings-card .qr-editor-body {
    text-align: center;
}

.crm-settings-card .archive-dialog .user-editor-body {
    text-align: left;
}

.crm-settings-card .archive-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.crm-settings-card .archive-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-color-surface-elevated);
}

.crm-settings-card .archive-summary-item span {
    font-size: 12px;
    color: var(--crm-color-text-muted);
}

.crm-settings-card .archive-summary-item strong {
    font-size: 18px;
    color: var(--crm-color-text);
}

.crm-settings-card .archive-alert {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: var(--crm-radius-sm);
    border: 1px solid transparent;
    font-size: 13px;
}

.crm-settings-card .archive-alert ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.crm-settings-card .archive-alert-subtitle {
    margin: 10px 0 0;
    font-weight: 600;
}

.crm-settings-card .archive-alert.warning {
    border-color: color-mix(in srgb, var(--crm-color-warning) 38%, var(--crm-color-border));
    background: color-mix(in srgb, var(--crm-color-warning) 14%, var(--crm-color-surface));
    color: var(--crm-color-warning);
}

.crm-settings-card .archive-alert.danger {
    border-color: color-mix(in srgb, var(--crm-color-danger) 38%, var(--crm-color-border));
    background: color-mix(in srgb, var(--crm-color-danger) 12%, var(--crm-color-surface));
    color: var(--crm-color-danger);
}

.crm-settings-card .archive-ticket-sample {
    color: var(--crm-color-text);
}

.crm-settings-card .archive-resolution {
    margin-bottom: 14px;
}

.crm-settings-card .archive-target-queue {
    margin: 6px 0 10px 24px;
}

.crm-settings-card .archive-final-confirmation {
    margin-top: 6px;
    font-weight: 600;
}

.crm-settings-card .position-editor-footer button.primary.danger {
    border-color: var(--crm-color-danger);
    background: var(--crm-color-danger);
    color: #ffffff;
}

.crm-settings-card .position-editor-footer button.primary.danger:disabled {
    opacity: .6;
}

/* CHAT-OMNI-08 - painel de configuracao da conexao WhatsApp Oficial (Cloud API).
   Reaproveita a estrutura de .user-editor/.field-stack ja usada pelos demais modais de
   Configuracoes; aqui so entram os blocos proprios (status, resumo, webhook, zona de risco). */

/* Revisão do proprietário (2026-09-08): *"Tudo está muito grudado, sem os devidos gaps e
   espaçamentos."* O corpo do modal não tinha modelo de layout nenhum — os blocos herdavam só a
   margem do navegador, e a margem do `<p>` colapsava contra a do vizinho. Uma coluna com o gap de
   VL-05 entre seções resolve, e é o mesmo respiro do resto do produto. */
.cloud-api-body {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-5);
    text-align: left;
}

/* Título de seção abre um bloco novo: precisa do respiro de seção acima e do de campo abaixo. */
.cloud-api-body > .cloud-api-section-title {
    margin: var(--uni-space-2) 0 0;
}

/* O "Avançado" é um `<details>`, e `<details>` NÃO se comporta como um contêiner flex comum: o
   conteúdo revelado vai para uma caixa anônima, e o `gap` não chega aos campos. Medido no
   navegador: vão de 0px entre TODOS os campos do Avançado, mesmo com `display: flex; gap: 16px`
   declarado. Espaçamento por irmão adjacente não depende do modelo de layout e funciona aqui. */
.cloud-api-advanced > * + * {
    margin-top: var(--uni-space-4);
}

/* Título de seção abre bloco: precisa do respiro de SEÇÃO acima dele, não o de campo. */
.cloud-api-advanced > * + .cloud-api-section-title {
    margin-top: var(--uni-space-5);
}

/* O CORPO já é `display: flex` com `gap: 24px`, e o gap FUNCIONA nele — quem não recebe o gap é o
   `<details>` do Avançado, tratado acima. Uma primeira tentativa somou margem de irmão adjacente
   AQUI também: medido 48px onde deveriam ser 24, o vão dobrado. Espaçamento vem de UMA camada só;
   no corpo é o gap, no Avançado é a margem. */
.cloud-api-body > * {
    margin-top: 0;
    margin-bottom: 0;
}

.cloud-api-section-title {
    margin: var(--uni-space-2) 0 0;
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    color: var(--uni-color-text);
    user-select: none;
}

/* D-08/D-27 — "Avançado" colapsado (UNICHAT-UX-PRODUCT-ATENDIMENTO-OMNICHANNEL-05) */
.cloud-api-advanced {
    margin-top: var(--uni-space-4);
    border-top: 1px solid var(--uni-color-border);
    padding-top: var(--uni-space-4);
}

/* O respiro dos campos do Avançado vem da regra de irmão adjacente acima (16px). Repetir aqui só
   confundiria de onde ele sai. */
.cloud-api-advanced > .crm-settings-field-block {
    margin-top: var(--uni-space-4);
}

.cloud-api-advanced > summary.cloud-api-section-title {
    cursor: pointer;
    list-style: revert;
}

.cloud-api-advanced > summary.cloud-api-section-title:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

.cloud-api-status-block {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    padding: var(--uni-space-4);
    border: 1px solid var(--uni-color-border);
    border-left-width: 3px;
    border-radius: var(--uni-radius-md);
    background: var(--crm-color-surface-elevated);
}

.cloud-api-status-block.ok {
    border-left-color: var(--uni-color-success);
}

.cloud-api-status-block.pending {
    border-left-color: var(--uni-color-warning);
}

.cloud-api-status-block.attention {
    border-left-color: var(--uni-color-danger);
}

/* "badges elegantes, SEPARADOS" — o gap de 8px colava as duas pílulas; 12px é o degrau que as
   lê como dois estados e não como um par. */
.cloud-api-status-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--uni-space-3);
}

.cloud-api-status-description,
.cloud-api-status-action,
.cloud-api-status-error {
    margin: 0;
    font-size: var(--uni-font-size-sm);
    line-height: 1.45;
}

.cloud-api-status-description {
    color: var(--uni-color-text);
}

.cloud-api-status-action {
    font-weight: 600;
    color: var(--uni-color-text);
}

.cloud-api-status-error {
    color: var(--uni-color-danger);
}

/* Ficha de dado — revisão do proprietário (2026-09-08): *"Estou achando os cards muito pobres.
   Talvez a fonte dos 'strong' esteja grosseira dentro do card. Talvez falte algo que o deixe mais
   elegante, sofisticado. Ele deve ser minimalista, mas talvez possa ser mais alto padrão."*

   Três coisas produziam o "pobre": o rótulo e o valor competiam (13px/500 muted contra 14px/700 do
   `strong` do navegador), o `strong` herdava o peso 700 do agente de usuário — fora da escada de
   VL-02 — e o respiro interno era o de uma linha de tabela, não o de uma ficha.

   A ficha passa a ter hierarquia de verdade: rótulo como MICRO-LABEL (`2xs`/600 maiúsculo com
   `letter-spacing`, a única caixa alta que VL-03 autoriza) e valor em `lg`/600, que é o degrau de
   "título de bloco" — o dado vira a coisa que se lê, e o rótulo, o que a nomeia. */
.cloud-api-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--uni-space-3);
}

.cloud-api-summary-item {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    min-width: 0;
    padding: var(--uni-space-4);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
}

.cloud-api-summary-item span {
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--uni-color-text-muted);
    user-select: none;
}

.cloud-api-summary-item strong {
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    line-height: 1.25;
    color: var(--uni-color-text);
    overflow-wrap: anywhere;
}

/* Valor ausente não pode ter o mesmo peso de um valor real: "—" e "Nunca validada" são a ausência
   do dado, não o dado. */
.cloud-api-summary-item strong.is-empty {
    font-size: var(--uni-font-size-md);
    font-weight: 400;
    color: var(--uni-color-text-subtle);
}

.cloud-api-hint,
.cloud-api-field-hint {
    margin: 0;
    font-size: var(--uni-font-size-xs);
    font-weight: 400;
    line-height: 1.45;
    color: var(--uni-color-text-muted);
}

.cloud-api-webhook {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    padding: var(--uni-space-4);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--crm-color-surface-elevated);
}

.cloud-api-webhook-url {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* URL longa nao pode empurrar o modal: ela rola dentro do proprio bloco. */
.cloud-api-webhook-url code {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    padding: 8px 10px;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    font-size: 12.5px;
    white-space: nowrap;
}

.cloud-api-webhook-url button {
    flex: 0 0 auto;
}

.cloud-api-danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--crm-color-danger) 38%, var(--crm-color-border));
    border-radius: var(--crm-radius-sm);
    background: color-mix(in srgb, var(--crm-color-danger) 8%, var(--crm-color-surface));
}

.cloud-api-danger-zone strong {
    display: block;
    font-size: 13px;
    color: var(--crm-color-text);
}

.cloud-api-danger-zone small {
    color: var(--crm-color-text-muted);
    font-size: 12px;
}

.cloud-api-danger-button {
    flex: 0 0 auto;
    border-color: var(--crm-color-danger);
    background: transparent;
    color: var(--crm-color-danger);
}

.cloud-api-footer {
    flex-wrap: wrap;
}

/* UNICHAT-MVP-UX-PRODUCT-EXPERIENCE-COMPLETION-01 (Fase A.1) — ações de verificação agrupadas
   numa linha deliberada, em vez de botões soltos no corpo do modal. */
/* `margin: 4px 0 8px` somava 4px ao gap do corpo e produzia o único vão de 28px do modal — 4 e 8
   também não existem como par na escada de VL-05. O respiro vem do gap do corpo. */
.cloud-api-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uni-space-3);
    margin: 0;
}

@media (max-width: 767px) {
    .cloud-api-summary-grid {
        grid-template-columns: 1fr;
    }

    .cloud-api-danger-zone,
    .cloud-api-webhook-url {
        flex-direction: column;
        align-items: stretch;
    }

    .cloud-api-footer button {
        flex: 1 1 auto;
    }
}

.crm-settings-card .qr-instructions {
    margin: 0 0 16px;
    padding-left: 20px;
    text-align: left;
}

.crm-settings-card .qr-code-image {
    display: block;
    width: 240px;
    height: 240px;
    margin: 0 auto;
}

.crm-settings-card .settings-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Central de integracoes.
   UNICHAT-CONFIGURACOES-VISUAL-ASSISTED-CONVERGENCE-01 — a grade inteira estava fora das escadas:
   11.5 / 12.5 / 13.5px em VL-01, 10 / 14px em VL-05, e o título de grupo repetia a caixa alta
   colorida que VL-03 reserva ao cabeçalho de coluna. O card também tinha borda E sombra, que
   VL-08 proíbe fora de superfície flutuante. */
.crm-integrations-group {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-3);
}

.crm-integrations-group-title {
    margin: 0;
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    line-height: 1.2;
    color: var(--uni-color-text);
    user-select: none;
}

/* C2 (PRE-PRODUCTION-CORRECTIONS-01) — `auto-fill` reservava uma quarta coluna vazia e deixava os
   três cards em 314px numa área de 1304px: os cards pareciam "limitados" e o rodapé (badge +
   "Gerenciar canal", 264px úteis) transbordava com um status mais longo ("Precisa de atenção").
   `auto-fit` colapsa as faixas vazias, os cards dividem a largura útil (VG-02) e o rodapé pode
   quebrar em duas linhas mantendo a ação à direita (VL-15). */
.crm-integrations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--uni-space-4);
}

.crm-integration-card {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-3);
    min-width: 0;
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
    padding: var(--uni-space-5);
}

.crm-integration-card-header {
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
}

.crm-integration-card-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-primary-soft);
    color: var(--crm-color-primary-soft-text);
    display: flex;
    align-items: center;
    justify-content: center;
}

.crm-integration-card-icon svg {
    width: 18px;
    height: 18px;
}

.crm-integration-card-name {
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    color: var(--uni-color-text);
}

.crm-integration-card-description {
    margin: 0;
    font-size: var(--uni-font-size-sm);
    color: var(--uni-color-text-muted);
    line-height: 1.45;
    flex: 1 1 auto;
}

.crm-integration-card-metrics {
    margin: 0;
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-text-muted);
}

.crm-integration-card-recommendation {
    margin: 0;
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-text);
}

.crm-integration-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-2);
    margin-top: auto;
    min-width: 0;
}

/* Quando badge e ação não cabem lado a lado, a ação desce para a linha seguinte e continua à
   direita (VL-15: ações no rodapé alinhadas à direita); nada transborda o card. */
.crm-integration-card-footer > .app-button,
.crm-integration-card-footer > .uni-button {
    flex: 0 0 auto;
    margin-left: auto;
}

.crm-integration-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: var(--crm-radius-xl);
    line-height: 1.2;
    white-space: nowrap;
}

.crm-integration-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
}

.crm-integration-status.connected {
    color: var(--crm-color-success);
    background: color-mix(in srgb, var(--crm-color-success) 14%, transparent);
}

.crm-integration-status.planned {
    color: var(--crm-color-text-muted);
    background: var(--crm-color-app-bg);
}

.crm-integration-status.attention {
    color: var(--crm-color-warning);
    background: color-mix(in srgb, var(--crm-color-warning) 16%, transparent);
}

.crm-integration-action {
    appearance: none;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
}

.crm-integration-action:hover:not(:disabled) {
    border-color: var(--crm-color-primary);
    color: var(--crm-color-primary-soft-text);
}

.crm-integration-action:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.crm-integration-action.primary {
    border-color: var(--crm-color-primary);
    background: var(--crm-color-primary);
    color: var(--crm-color-on-primary);
}

.crm-integration-action.primary:hover:not(:disabled) {
    border-color: var(--crm-color-primary-hover);
    background: var(--crm-color-primary-hover);
    color: var(--crm-color-on-primary);
}

/* Forma de pagamento */
.crm-payment-placeholder {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.crm-payment-plan-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-color-surface);
    padding: 18px;
}

.crm-payment-plan-card strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--crm-color-text);
}

.crm-payment-plan-card small {
    color: var(--crm-color-text-muted);
    font-size: 12.5px;
}

@media (max-width: 767px) {
    .crm-payment-plan-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* UNICHAT-CRM-INBOX-EXPERIENCE-COMPLETION-01 §13 — ícone dimensionado dentro do botão Uni na
   superfície de Integrações (Conectar WhatsApp / Conectar outro WhatsApp). */
.crm-settings-section .app-button .crm-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* UNICHAT-CRM-INBOX-EXPERIENCE-COMPLETION-01 §14 — lista de Conexões: reequilíbrio tipográfico.
   Herança de .settings-user-card span/small { font-weight:700 } + <strong> no nome deixava o card
   pesado demais. A informação principal (nome, número, status) continua legível sem gritar;
   detalhes técnicos ficam discretos. */
.crm-settings-card .settings-users .settings-user-main > strong {
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.crm-settings-card .settings-users .settings-user-card small,
.crm-settings-card .settings-users .settings-user-card span:not(.settings-pill):not(.avatar) {
    font-weight: 400;
}
.crm-settings-card .settings-users .settings-header-actions .icon-text-button {
    font-weight: 500;
}

/* UNICHAT-CRM-INBOX-EXPERIENCE-COMPLETION-01 §1 — pílula de estado PRINCIPAL projetado e a linha de
   detalhe secundária (sessão + credencial) na lista de Conexões. */
.crm-settings-card .settings-pill.settings-pill-good {
    background: color-mix(in srgb, var(--crm-color-success) 16%, transparent);
    color: var(--crm-color-success);
}
.crm-settings-card .settings-pill.settings-pill-warn {
    background: color-mix(in srgb, var(--crm-color-warning) 18%, transparent);
    color: var(--crm-color-warning);
}
.crm-settings-card .settings-pill.settings-pill-off {
    background: color-mix(in srgb, var(--crm-color-text-muted) 16%, transparent);
    color: var(--crm-color-text-muted);
}
.crm-settings-card .settings-users .settings-connection-detail {
    font-size: 11px;
    color: var(--crm-color-text-muted);
    opacity: 0.9;
}

/* ============================================================================
   UNICHAT-MOBILE-UX-CONFORMANCE-01 (Phase B) — Configurações mobile:
   HUB -> SUBPÁGINA -> VOLTAR (contrato §28 / U). Desktop (>=768) intocado:
   as classes msec-* e o chrome do hub são neutros fora do mobile.
   ============================================================================ */

.crm-settings-mobile-chrome {
    display: none;
}

@media (max-width: 767px) {
    .crm-settings-mobile-chrome {
        display: block;
    }

    /* No hub, o conteúdo das seções some inteiro; só a lista de categorias fica. */
    .crm-settings-content--hub { display: none; }

    /* As abas de topo não fazem sentido no fluxo hub/subpágina.
       REGRESSÃO CORRIGIDA — UNICHAT-CONFIGURACOES-VISUAL-ASSISTED-CONVERGENCE-01: esta regra tinha
       como alvo `.crm-settings-tabs`, a classe do trilho antigo. Ao trocar por `UniTabs` o trilho
       virou `.crm-settings-tabrail` e passou a APARECER no celular, dentro da subpágina, ao lado
       da app bar que já diz onde a pessoa está. Visto na captura de 390px. */
    .crm-settings-tabrail { display: none; }

    /* Subpágina: só a seção ativa aparece. */
    .msec-inactive { display: none; }
    .msec-hub { display: none; }

    .crm-settings-mobile-hub {
        display: grid;
        gap: 8px;
    }

    .crm-settings-hub-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 60px;
        padding: 10px 12px;
        border: 1px solid var(--crm-color-border);
        border-radius: var(--crm-radius-md);
        background: var(--crm-color-surface);
        color: var(--crm-color-text);
        text-align: left;
        text-decoration: none;
        cursor: pointer;
        font: inherit;
    }

    .crm-settings-hub-item > .crm-icon:last-child {
        flex: 0 0 auto;
        color: var(--crm-color-text-muted);
    }

    .crm-settings-hub-icon {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: var(--crm-radius-md);
        background: var(--crm-color-primary-soft);
        color: var(--crm-color-primary-soft-text);
    }

    .crm-settings-hub-copy {
        flex: 1 1 auto;
        display: grid;
        gap: 2px;
        min-width: 0;
    }

    .crm-settings-hub-copy strong {
        font-size: 14px;
        font-weight: 600;
    }

    .crm-settings-hub-copy small {
        color: var(--crm-color-text-muted);
        font-size: 12px;
    }

    .crm-settings-mobile-back {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-height: 44px;
        margin-bottom: 4px;
        padding: 0 8px 0 0;
        border: 0;
        background: transparent;
        color: var(--crm-color-primary);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }
}

/* UNICHAT-MOBILE-UX-ARCHITECTURE-01 (B6) — Plano e cobrança: visão geral → uso → movimentações. */
/* Plano e cobrança — UNICHAT-CONFIGURACOES-VISUAL-ASSISTED-CONVERGENCE-01: 11 / 13.5 / 12px em
   VL-01, e 2 / 6 / 10 / 14px em VL-05, todos fora das escadas. O rótulo do KPI é o único caso de
   micro-label MAIÚSCULO que VL-03 autoriza, e a régua exata dele é `2xs`/600/0.04em. */
.crm-billing { display: grid; gap: var(--uni-space-4); }
/* UNICHAT-COMMERCE-FIRST-ACCESS-01 — item de grid tem min-width:auto = min-content; um subtítulo de fatura
   em nowrap (UniScanRow) virava a largura da COLUNA inteira e todos os cards transbordavam no celular. */
.crm-billing > * { min-width: 0; }
.crm-billing-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--uni-space-4); }
.crm-billing-kpi { display: grid; gap: var(--uni-space-1); }
.crm-billing-kpi-label { font-size: var(--uni-font-size-2xs); font-weight: 600; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; color: var(--uni-color-text-muted); user-select: none; }
.crm-billing-kpi strong { font-size: var(--uni-font-size-2xl); line-height: 1.2; letter-spacing: -0.01em; }
.crm-billing-kpi small { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-xs); }
.crm-billing-section { border: 1px solid var(--uni-color-border); border-radius: var(--uni-radius-lg); background: var(--uni-color-surface); }
.crm-billing-section > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--uni-space-2); min-height: 48px; padding: var(--uni-space-2) var(--uni-space-5); font-size: var(--uni-font-size-lg); font-weight: 600; cursor: pointer; user-select: none; }
.crm-billing-section > summary::-webkit-details-marker { display: none; }
.crm-billing-section > summary:focus-visible { outline: 2px solid var(--uni-color-focus-ring); outline-offset: -2px; border-radius: var(--uni-radius-lg); }
.crm-billing-section > summary small { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-xs); font-weight: 400; }
.crm-billing-section > *:not(summary) { padding: 0 var(--uni-space-5) var(--uni-space-5); }
.crm-billing-limits { display: grid; gap: var(--uni-space-4); }
.crm-billing-limit { display: grid; gap: var(--uni-space-2); min-width: 0; }
.crm-billing-limit-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--uni-space-1) var(--uni-space-3); font-size: var(--uni-font-size-md); min-width: 0; }
/* UNICHAT-COMMERCE-FIRST-ACCESS-01 — nomes de negócio são mais longos ("Execuções de automação no mês"):
   o item de grid precisa de min-width:0 e a linha precisa quebrar, senão o card transborda no celular
   (visto na captura mobile: "2 de 3" cortado na borda). */
.crm-billing-limit-head strong { min-width: 0; overflow-wrap: anywhere; }
.crm-billing-limit-head > span { color: var(--uni-color-text-muted); white-space: nowrap; }
/* CUT 6R-A (Owner Visual Review) — o seletor acima era "head span" e alcançava o painel do (i) (UniFieldInfo
   também é <span>), prendendo o texto do tooltip numa linha só: transbordava a largura do balão. */
.crm-billing-limit-head .uni-field-info-panel { white-space: normal; }
.crm-billing-limit small { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-xs); }
.crm-billing-bar { height: 8px; border-radius: var(--uni-radius-pill); background: var(--crm-color-app-bg); overflow: hidden; }
.crm-billing-bar span { display: block; height: 100%; border-radius: var(--uni-radius-pill); background: var(--uni-color-primary); }
/* UNICHAT-COMMERCE-FIRST-ACCESS-01 (D-31/D-32) — consequência escrita: a barra muda de tom no degrau
   de aviso (WarningPercent do Control Plane) e ao atingir o limite; a frase abaixo diz o que acontece. */
.crm-billing-limit.is-near .crm-billing-bar span { background: var(--uni-color-warning); }
.crm-billing-limit.is-near small { color: var(--uni-color-warning); }
.crm-billing-limit.is-reached .crm-billing-bar span { background: var(--uni-color-danger); }
.crm-billing-limit.is-reached small { color: var(--uni-color-danger); font-weight: 600; }
.crm-billing-lifecycle { margin-top: var(--uni-space-4); }
.crm-billing-change { display: grid; gap: var(--uni-space-3); }
.crm-billing-change p { margin: 0; color: var(--uni-color-text-muted); font-size: var(--uni-font-size-sm); }
.crm-billing-change .app-button { justify-self: start; }
.crm-billing-history { margin-top: var(--uni-space-2); }
.crm-billing-change-form { display: grid; gap: var(--uni-space-3); }
.crm-billing-change-options { display: grid; gap: var(--uni-space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.crm-billing-change-option { display: flex; align-items: flex-start; gap: var(--uni-space-3); padding: var(--uni-space-3) var(--uni-space-4); border: 1px solid var(--uni-color-border); border-radius: var(--uni-radius-lg); background: var(--uni-color-surface); cursor: pointer; }
.crm-billing-change-option:has(input:checked) { border-color: var(--uni-color-primary); box-shadow: 0 0 0 1px var(--uni-color-primary) inset; }
.crm-billing-change-option.is-current { cursor: default; opacity: 0.7; }
.crm-billing-change-option input { margin-top: 4px; accent-color: var(--uni-color-primary); }
.crm-billing-change-option-body { display: grid; gap: 2px; font-size: var(--uni-font-size-sm); }
.crm-billing-change-option-body span { color: var(--uni-color-text-muted); }
.crm-billing-detail { display: grid; gap: var(--uni-space-3); margin: 0; }
.crm-billing-detail div { display: flex; justify-content: space-between; gap: var(--uni-space-3); font-size: var(--uni-font-size-md); }

/* O ⋮ do cabeçalho de página não tem contorno (VL-11, emenda §14): é só o ícone. */
.crm-settings-header-actions { display: flex; align-items: center; gap: var(--uni-space-2); }
.crm-billing-detail dt { color: var(--crm-color-text-muted); }
.crm-billing-detail dd { margin: 0; font-weight: 600; text-align: right; }
@media (max-width: 767px) { .crm-settings-mobile-chrome .crm-settings-mobile-back.uni-phone-hide { display: none; } }

/* B8 — Usuários no touch: o título e a ação primária já vivem na app bar da rota, então o
   cabeçalho interno do painel legado vira repetição. */
@media (max-width: 1023px) {
    .crm-users-page .settings-users > .settings-panel-header {
        display: none;
    }
}

/* ============================================================================
   UNICHAT-CONFIGURACOES-VISUAL-ASSISTED-CONVERGENCE-01 — peças da superfície.

   Só o que é genuinamente específico de Configurações mora aqui. Tudo o mais (card de lista,
   linha, ação de linha, busca, ficha de campo, botão, badge) vem da camada canônica, para não
   repetir a terceira gramática que o §1 do contrato descreve.
   ============================================================================ */

/* VL-17 (emenda §14) — cada superfície declara sua `grid-template-columns`; sem ela o grid
   empilha tudo numa coluna. */
.crm-settings-list-tags .uni-list-row {
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 0.8fr);
}

.crm-settings-list-queues .uni-list-row {
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.9fr) minmax(0, 0.7fr) minmax(0, 0.8fr);
}

.crm-settings-list-replies .uni-list-row {
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 0.7fr) minmax(0, 0.8fr);
}

.crm-settings-list-connections .uni-list-row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.8fr);
}

/* Identificação da linha (VL-17.1): marcador de cor + nome + subtítulo. O marcador é um ponto,
   não um avatar de pessoa — VL-33 descreve o círculo com iniciais de GENTE, e uma tag ou fila não
   é gente. O ponto carrega a cor que o usuário escolheu, que é o único papel dela. */
.crm-settings-identity {
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
    min-width: 0;
}

.crm-settings-identity-text {
    display: grid;
    min-width: 0;
}

.crm-settings-dot {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--uni-color-primary);
}

.crm-settings-value {
    color: var(--uni-color-text);
}

/* VL-39 — o menu ⋮ alinha ao CÍRCULO da ação, não ao conjunto círculo + rótulo. A ação ocupa
   duas alturas; centralizar no conjunto desce o menu para a altura do texto. */
.crm-settings-row-actions {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--uni-space-1);
}

.crm-settings-row-actions .uni-menu {
    display: inline-flex;
    align-items: flex-start;
}

.crm-settings-row-actions .uni-menu-row-trigger {
    min-height: 32px;
    height: 32px;
}

/* Campo que ocupa a linha inteira dentro de um `.uni-field-grid`, e o respiro de VL-05 entre
   campos quando ele vem depois da grade. */
.crm-settings-field-block {
    margin-top: var(--uni-space-4);
}

/* A busca vive no cabeçalho do card, ao lado da ação: não há filtros nesta superfície, e uma
   faixa própria com um controle só desperdiçaria uma linha inteira. */
.crm-settings-card-search {
    flex: 1 1 240px;
    min-width: 180px;
    max-width: 340px;
}

/* Grade de integrações (VL-15): cards de mesma altura, gap de VL-05. */
.crm-settings-integrations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--uni-space-4);
}

/* Bloco dependente de uma chave: recuado e separado, para que se leia como consequência da chave
   acima e não como um campo irmão dela. Borda esquerda, e não card, porque um card dentro do card
   do modal seria a superfície aninhada que VL-06 proíbe. */
.crm-settings-nested-block {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
    margin-top: var(--uni-space-4);
    padding-left: var(--uni-space-4);
    border-left: 1px solid var(--uni-color-border);
}

/* VL-49 — caixa SELECIONA itens. A lista rola por dentro do corpo do modal, não estica o modal. */
.crm-settings-check-list {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-3);
    max-height: 320px;
    overflow-y: auto;
}

/* VL-32 — chip: pílula, 2xs/600. Aqui o chip é acionável (insere a variável no conteúdo). */
.crm-settings-variable-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uni-space-2);
}

.crm-settings-variable-chip {
    padding: 1px var(--uni-space-3);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-pill);
    background: var(--uni-color-surface);
    color: var(--uni-color-text-muted);
    font-family: var(--uni-font-family);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    line-height: 1.8;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.crm-settings-variable-chip:hover {
    border-color: var(--uni-color-primary);
    background: var(--uni-color-primary-soft);
    color: var(--uni-color-primary);
}

.crm-settings-variable-chip:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

/* Painel simples de configuração — a anatomia comum a Fuso horário, Kanban Comercial, Campanhas e
   Aparência: um título de bloco, uma frase que explica a consequência, os campos e UMA ação.
   Antes cada um destes usava a classe de outra feature para desenhar o próprio cabeçalho
   (`.crm-payment-plan-card` da cobrança, `.settings-panel-header`, `.kanban-*`), que é a
   proibição 1 e a origem das três gramáticas do §1. */
.crm-settings-panel {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
}

.crm-settings-panel-copy {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
}

.crm-settings-panel-title {
    margin: 0;
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    line-height: 1.2;
    color: var(--uni-color-text);
    user-select: none;
}

.crm-settings-panel-subtitle {
    margin: 0;
    max-width: 68ch;
    font-size: var(--uni-font-size-sm);
    line-height: 1.45;
    color: var(--uni-color-text-muted);
}

/* VL-11 / UI-07A — uma ação por painel, alinhada à direita, com o gap de rodapé de VL-05. */
.crm-settings-panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--uni-space-3);
}

/* Grupo de chaves dentro de um painel: o respiro de VL-05 entre campos, sem régua entre elas —
   cada UniSwitch já carrega rótulo e descrição próprios. */
.crm-settings-switch-group {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
}

/* Leitura sem permissão de escrita (VL-12, estado read-only): parece dado, não campo vazio. */
.crm-settings-readonly-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--uni-space-4);
    margin: 0;
}

.crm-settings-readonly-grid > div {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
    min-width: 0;
}

.crm-settings-readonly-grid dt {
    font-size: var(--uni-font-size-sm);
    font-weight: 500;
    color: var(--uni-color-text-muted);
    user-select: none;
}

.crm-settings-readonly-grid dd {
    margin: 0;
    font-size: var(--uni-font-size-md);
    color: var(--uni-color-text);
}

/* Cabeçalho de painel com ação à direita (WhatsApp). */
.crm-settings-panel-head {
    display: flex;
    align-items: flex-start;
    gap: var(--uni-space-4);
}

.crm-settings-panel-head .crm-settings-panel-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.crm-settings-panel-actions-start {
    justify-content: flex-start;
}

/* Marcador de canal na linha da lista: ícone do CrmIcon, não sigla dentro de círculo colorido. */
.crm-settings-channel-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--uni-color-neutral-soft);
    color: var(--uni-color-text-muted);
}

.crm-settings-channel-icon .crm-icon {
    width: 16px;
    height: 16px;
}

.crm-settings-meta {
    display: block;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
    line-height: 1.4;
}

/* A coluna de ações das conexões precisa caber o círculo rotulado + o menu sem espremer. O
   alinhamento pelo TOPO vem de `.crm-settings-row-actions` (VL-39) e não é sobrescrito aqui: a ação
   ocupa duas alturas, e centralizar no conjunto desceria o menu para a altura do rótulo. */
.crm-settings-list-connections .crm-settings-row-actions {
    gap: var(--uni-space-2);
}

/* Escolha excludente (rádio) e reconhecimento de consequência (caixa): mesma escada de VL-05. */
.crm-settings-choice-list {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-3);
}

.crm-settings-choice-list input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--uni-color-primary);
}

.crm-settings-alert-list {
    margin: var(--uni-space-2) 0 0;
    padding-left: var(--uni-space-4);
    font-size: var(--uni-font-size-sm);
    line-height: 1.45;
}

.crm-settings-alert-subtitle {
    margin: var(--uni-space-3) 0 0;
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
}

/* Registros do canal: linha de leitura, não linha de lista clicável — sem hover e sem ação. */
.crm-settings-log-list {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-3);
}

.crm-settings-log-row {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
    padding-bottom: var(--uni-space-3);
    border-bottom: 1px solid var(--uni-color-border);
}

.crm-settings-log-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.crm-settings-log-row strong {
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    color: var(--uni-color-text);
}

.crm-settings-log-row small {
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-text-muted);
}

/* Conexão por QR: instruções numeradas + o palco do código. */
.crm-settings-qr-steps {
    margin: 0 0 var(--uni-space-4);
    padding-left: var(--uni-space-5);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
    line-height: 1.6;
}

.crm-settings-qr-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--uni-space-3);
    text-align: center;
}

.crm-settings-qr-stage > * {
    width: 100%;
}

/* REAL WHATSAPP QR UI CORRECTIVE (R1 PRE-PRODUCTION GATE) — o QR herdava `width: 100%` do palco (o
   modal Md tem 640px), virava um quadrado de ~590px e o modal passava da viewport: o proprietário
   precisava de F11 para escanear. Autoridade: QR com TETO absoluto, centralizado, e o modal inteiro
   dentro da viewport sem rolagem só para ver/escanear — o teto acompanha a altura disponível
   (cabeçalho + passos + dica + rodapé ≈ 430px) e nunca passa de 280px nem cai abaixo de 180px. */
.crm-settings-qr-stage > .qr-code-image {
    width: clamp(180px, calc(100vh - 430px), 280px);
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    image-rendering: pixelated;
}

/* UNICHAT-CUT-6 (F-13) — painel longo em modal: altura fixa (maior estado) com rolagem interna; o cabeçalho
   duplicado do painel (título/subtítulo já estão no modal) some. */
.crm-settings-long-modal .uni-modal-body {
    height: min(640px, calc(92vh - 150px));
}
.crm-settings-long-modal .crm-settings-panel > .crm-settings-panel-copy:first-child { display: none; }

/* UNICHAT-CUT-6 (F-06, Owner smoke) — modal "Conectar por QR Code": tamanho fixo (regra de modal do Uni: o
   tamanho não muda com o conteúdo). A altura do corpo é a do maior estado — passos (4 linhas) + QR (até 280px) +
   dica — e os outros estados ocupam o mesmo espaço, centralizados. Sem "pulo" entre gerando → QR → conectado. */
.crm-qr-modal .uni-modal-body {
    height: min(560px, calc(92vh - 150px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.crm-qr-modal .crm-settings-qr-stage {
    flex: 1 1 auto;
    min-height: 0;
    justify-content: center;
}
.crm-qr-modal .crm-settings-qr-stage > .qr-code-image {
    width: clamp(180px, calc(92vh - 430px), 280px);
}
.crm-qr-waiting { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; }
.crm-qr-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--uni-space-2);
}
.crm-qr-success-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin-bottom: var(--uni-space-2);
}
/* Indicador girando (anel) que some enquanto o check grande "entra". Só CSS: sem timers no componente. */
.crm-qr-success-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid color-mix(in srgb, var(--uni-color-success, #2f9e44) 25%, transparent);
    border-top-color: var(--uni-color-success, #2f9e44);
    animation: uni-spin 0.7s linear 1, crm-qr-ring-settle 0.4s ease 0.7s forwards;
}
.crm-qr-success-ring.is-spinning {
    position: static;
    width: 40px;
    height: 40px;
    border-width: 3px;
    border-color: color-mix(in srgb, var(--uni-color-text-muted) 30%, transparent);
    border-top-color: var(--uni-color-text-muted);
    animation: uni-spin 0.7s linear infinite;
}
.crm-qr-success-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--uni-color-success, #2f9e44);
    color: #fff;
    animation: crm-qr-check-pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3) 0.75s both;
}
.crm-qr-success-check .crm-icon { width: 52px; height: 52px; stroke-width: 2.5; }
.crm-qr-success-title { font-size: var(--uni-font-size-lg); color: var(--uni-color-text); }
.crm-qr-success-text { margin: 0; color: var(--uni-color-text-muted); font-size: var(--uni-font-size-sm); }
@keyframes crm-qr-ring-settle {
    to { border-color: var(--uni-color-success, #2f9e44); opacity: 0; transform: scale(1.15); }
}
@keyframes crm-qr-check-pop {
    from { opacity: 0; transform: scale(0.3); }
    to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .crm-qr-success-ring { animation: none; opacity: 0; }
    .crm-qr-success-check { animation: none; }
}

/* Passo do onboarding oficial: ícone tingido pelo resultado, no lugar dos glifos —/✓/! */
.cloud-api-step-line {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-2);
}

.cloud-api-step-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.cloud-api-step-icon .crm-icon { width: 12px; height: 12px; }

.cloud-api-step-icon-success { background: var(--uni-color-success-soft); color: var(--uni-color-success); }
.cloud-api-step-icon-warning { background: var(--uni-color-warning-soft); color: var(--uni-color-warning); }
.cloud-api-step-icon-neutral { background: var(--uni-color-neutral-soft); color: var(--uni-color-neutral); }

@media (max-width: 767px) {
    .crm-settings-card { padding: var(--uni-space-4); }
    .crm-settings-card-search { max-width: none; }
}

/* ---------- Abas: conformidade de VL-16 sob escopo (§8, classe 2) ----------
   UNICHAT-CONFIGURACOES-VISUAL-ASSISTED-CONVERGENCE-01.

   Medido no navegador: `.uni-tab` renderiza 34px de altura, `font-size: sm` e peso 600 fixo. VL-16
   prescreve **42px, padding horizontal 16px, `font-size: md`, peso 500 inativa / 600 ativa**. A
   primitive canônica está fora da própria regra — e no mobile os 34px ficam abaixo do alvo de
   toque de 44px que D-38 exige, que é acessibilidade, não estética.

   Por que sob escopo e não global: `/contatos`, `/usuarios` e Atendimento já estão OWNER VISUAL
   ACCEPTED usando `UniTabs` a 34px. Corrigir a primitive mudaria as três sem revisão — o rollout
   silencioso que §8 proíbe. Fica aqui, e a promoção global entra como conformidade aberta no
   anexo desta superfície (CF-02), com a nota de que a parte de toque é acessibilidade e não
   deveria esperar muito. */

.crm-settings-tabrail .uni-tab {
    min-height: 42px;
    padding: 0 var(--uni-space-4);
    font-size: var(--uni-font-size-md);
    font-weight: 500;
}

.crm-settings-tabrail .uni-tab.is-active {
    font-weight: 600;
}

/* D-38 / VL-27 — alvo de toque mínimo de 44px em ≤767. */
@media (max-width: 767px) {
    .crm-settings-tabrail .uni-tab {
        min-height: 44px;
    }
}

/* ---------- Card de canal conectado e lista de pendências ----------
   UNICHAT-CONFIGURACOES-VISUAL-ASSISTED-CONVERGENCE-01, revisão do proprietário (2026-09-08):
   o card empilhava cinco linhas de texto corrido, com estado e modo separados por ponto médio e as
   pendências concatenadas numa frase só. */

.crm-settings-channel-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--uni-space-4);
}

.crm-settings-channel-card {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
    padding: var(--uni-space-5);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
}

.crm-settings-channel-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--uni-space-3);
    flex-wrap: wrap;
}

/* VL-17.1 — o número é a identificação do canal; o nome é o subtítulo que o diferencia. */
.crm-settings-channel-card-id {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
    min-width: 0;
}

.crm-settings-channel-card-id strong {
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    line-height: 1.2;
    color: var(--uni-color-text);
}

.crm-settings-channel-card-id small {
    font-size: var(--uni-font-size-sm);
    color: var(--uni-color-text-muted);
}

/* "badges elegantes, separados" — o gap é o que os separa; empilham quando não cabem. */
.crm-settings-channel-card-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--uni-space-2);
}

/* Os dois números que importam, como dado e não como frase. */
.crm-settings-channel-card-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--uni-space-4);
    margin: 0;
    padding-top: var(--uni-space-4);
    border-top: 1px solid var(--uni-color-border);
}

.crm-settings-channel-card-facts > div {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
    min-width: 0;
}

.crm-settings-channel-card-facts dt {
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--uni-color-text-muted);
    user-select: none;
}

.crm-settings-channel-card-facts dd {
    margin: 0;
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    line-height: 1.25;
    color: var(--uni-color-text);
}

.crm-settings-channel-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uni-space-3);
}

/* ---------- Pendências ----------
   Uma lista de coisas a fazer se parece com uma lista de coisas a fazer: cada item tem o que
   falta (em peso) e o que fazer (em texto de apoio), e o bloco inteiro carrega UMA ação que leva
   ao lugar onde se resolve. */

.crm-settings-pending {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-3);
    padding: var(--uni-space-4);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-warning-soft);
}

.crm-settings-pending-title {
    margin: 0;
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    color: var(--uni-color-warning);
    user-select: none;
}

.crm-settings-pending-list {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-settings-pending-item {
    display: flex;
    align-items: flex-start;
    gap: var(--uni-space-2);
    min-width: 0;
}

.crm-settings-pending-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    color: var(--uni-color-warning);
}

.crm-settings-pending-icon .crm-icon { width: 16px; height: 16px; }

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

.crm-settings-pending-text strong {
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    line-height: 1.35;
    color: var(--uni-color-text);
}

.crm-settings-pending-text small {
    font-size: var(--uni-font-size-xs);
    line-height: 1.45;
    color: var(--uni-color-text-muted);
}

/* A ação fica alinhada à esquerda, sob a lista: é a saída do bloco, não uma ação de rodapé de
   card. `align-self` evita que ela estique na largura toda. */
.crm-settings-pending .app-button {
    align-self: flex-start;
}

@media (max-width: 767px) {
    .crm-settings-channel-cards { grid-template-columns: minmax(0, 1fr); }
    .crm-settings-channel-card { padding: var(--uni-space-4); }
}

/* ---------- Lista de verificação (prontidão do canal) ----------
   Cada item tem estado — feito, falta fazer, não conclusivo. A ficha de dado não expressa estado;
   virava um glifo de texto colado no rótulo, que VL-26 proíbe. */

.crm-settings-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-3);
    margin: 0;
    padding: var(--uni-space-4);
    list-style: none;
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
}

.crm-settings-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: var(--uni-space-3);
    min-width: 0;
}

.crm-settings-checklist-item + .crm-settings-checklist-item {
    padding-top: var(--uni-space-3);
    border-top: 1px solid var(--uni-color-border);
}

.crm-settings-checklist-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
}

.crm-settings-checklist-icon .crm-icon { width: 12px; height: 12px; }

.crm-settings-checklist-icon-success { background: var(--uni-color-success-soft); color: var(--uni-color-success); }
.crm-settings-checklist-icon-warning { background: var(--uni-color-warning-soft); color: var(--uni-color-warning); }
.crm-settings-checklist-icon-neutral { background: var(--uni-color-neutral-soft); color: var(--uni-color-neutral); }

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

.crm-settings-checklist-text strong {
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    line-height: 1.35;
    color: var(--uni-color-text);
}

.crm-settings-checklist-text small {
    font-size: var(--uni-font-size-xs);
    line-height: 1.45;
    color: var(--uni-color-text-muted);
}

/* O que FAZER se destaca do que É: o detalhe descreve, a ação instrui. */
.crm-settings-checklist-action {
    color: var(--uni-color-text) !important;
    font-weight: 500;
}

/* -------------------------------------------------------------------------------------
   UNICHAT-RESIDUAL-PRODUCT-SURFACE-VISUAL-COMPLETION-01 — Saúde do sistema (Decisão C)

   Superfície nova, então nasce inteira em token: nenhuma cor literal, nenhum tamanho fora da
   escala de VL-01, os dois temas pelos pares semânticos de VL-46.

   O resumo é o único bloco que muda de cor conforme o estado, e ele muda por TOKEN semântico —
   `success-soft` e `warning-soft` já têm par escuro medido. Foi exatamente o que faltava em
   `/operacao`, onde os mesmos três estados eram hexadecimais fixos.
   ------------------------------------------------------------------------------------- */
.crm-health-summary {
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
}

.crm-health-summary-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--uni-radius-md);
}

.crm-health-summary.is-ok .crm-health-summary-icon {
    background: var(--uni-color-success-soft);
    color: var(--uni-color-success);
}

.crm-health-summary.is-attention .crm-health-summary-icon {
    background: var(--uni-color-warning-soft);
    color: var(--uni-color-warning);
}

.crm-health-summary-icon .crm-icon { width: 20px; height: 20px; }

.crm-health-summary-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crm-health-summary-copy strong {
    font-size: var(--uni-font-size-md);
    color: var(--uni-color-text);
}

.crm-health-summary-copy span {
    font-size: var(--uni-font-size-sm);
    color: var(--uni-color-text-muted);
}

.crm-system-health {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
}

@media (max-width: 767px) {
    /* O resumo empilha: com 40px de ícone mais o botão, três colunas não cabem em 390px sem
       espremer a frase até a quebra por letra. */
    .crm-health-summary { flex-wrap: wrap; }
    .crm-health-summary-copy { flex: 1 1 100%; order: 3; }
}

/* ============================================================================================
   CUT 5F (Workstream D) — Plano e cobrança: hero da assinatura + faturas com hierarquia de estado.
   Sem "dashboard financeiro genérico": superfície, filete lateral, ícone e tipografia por estado,
   dentro dos tokens. Créditos e ajustes ficam recolhidos e só entram quando existem.
   ============================================================================================ */
.crm-billing-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--uni-space-4); }
@media (min-width: 720px) { .crm-billing-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.crm-billing-kpi--plan strong { font-size: var(--uni-font-size-2xl); }
.crm-billing-facts { margin: 0; display: grid; gap: var(--uni-space-3); align-content: start; }
.crm-billing-facts div { display: grid; gap: 2px; min-width: 0; }
.crm-billing-facts dt { font-size: var(--uni-font-size-2xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--uni-color-text-muted); }
.crm-billing-facts dd { margin: 0; font-size: var(--uni-font-size-md); color: var(--uni-color-text); overflow-wrap: anywhere; }

.crm-invoice-list { display: grid; gap: var(--uni-space-3); }
.crm-invoice {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    gap: var(--uni-space-3); padding: var(--uni-space-3) var(--uni-space-4) var(--uni-space-3) var(--uni-space-4);
    border: 1px solid var(--uni-color-border); border-left-width: 4px; border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface); cursor: pointer; min-width: 0;
    transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.crm-invoice:hover { box-shadow: var(--uni-shadow-sm); }
.crm-invoice:focus-visible { outline: 2px solid var(--uni-color-primary); outline-offset: 2px; }
.crm-invoice-icon {
    width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    background: var(--crm-color-app-bg); color: var(--uni-color-text-muted); flex: 0 0 auto;
}
.crm-invoice-icon svg { width: 18px; height: 18px; }
.crm-invoice-main { display: grid; gap: 2px; min-width: 0; }
.crm-invoice-amount { font-size: var(--uni-font-size-lg); font-weight: 700; letter-spacing: -0.01em; color: var(--uni-color-text); font-variant-numeric: tabular-nums; }
.crm-invoice-period { font-size: var(--uni-font-size-xs); color: var(--uni-color-text-muted); overflow-wrap: anywhere; }
.crm-invoice-side { display: grid; gap: 2px; justify-items: end; text-align: right; flex: 0 0 auto; }
.crm-invoice-status { font-size: var(--uni-font-size-sm); font-weight: 600; color: var(--uni-color-text); }
.crm-invoice-due { font-size: var(--uni-font-size-xs); color: var(--uni-color-text-muted); white-space: nowrap; }
.crm-invoice-pay { margin-top: 4px; }
/* estados */
.crm-invoice.is-open { border-left-color: var(--uni-color-warning); }
.crm-invoice.is-open .crm-invoice-icon { background: var(--uni-color-warning-soft, var(--crm-color-app-bg)); color: var(--uni-color-warning); }
.crm-invoice.is-open .crm-invoice-status { color: var(--uni-color-warning); }
.crm-invoice.is-overdue { border-left-color: var(--uni-color-danger); background: color-mix(in srgb, var(--uni-color-danger) 4%, var(--uni-color-surface)); }
.crm-invoice.is-overdue .crm-invoice-icon { background: var(--uni-color-danger-soft); color: var(--uni-color-danger); }
.crm-invoice.is-overdue .crm-invoice-status, .crm-invoice.is-overdue .crm-invoice-due { color: var(--uni-color-danger); font-weight: 600; }
.crm-invoice.is-paid { border-left-color: var(--uni-color-success); }
.crm-invoice.is-paid .crm-invoice-icon { background: var(--uni-color-success-soft); color: var(--uni-color-success); }
.crm-invoice.is-paid .crm-invoice-status { color: var(--uni-color-success); }
.crm-invoice.is-void { border-left-color: var(--uni-color-border-strong); opacity: .72; }
.crm-invoice.is-void .crm-invoice-amount { text-decoration: line-through; font-weight: 500; }
.crm-billing-credits { display: grid; gap: var(--uni-space-3); }
.crm-billing-credits p { margin: 0; color: var(--uni-color-text-muted); font-size: var(--uni-font-size-sm); }
.crm-billing-credits-balance { display: grid; gap: 2px; }
.crm-billing-credits-balance strong { font-size: var(--uni-font-size-xl); }
@media (max-width: 599px) {
    .crm-invoice { grid-template-columns: auto minmax(0, 1fr); }
    .crm-invoice-side { grid-column: 2; justify-items: start; text-align: left; }
}

/* ---------- CUT 5I — Preferências e Horário de atendimento ---------- */
.crm-preferences-list { display: flex; flex-direction: column; gap: var(--uni-space-3); }
.crm-hours-days { display: flex; flex-direction: column; gap: 6px; margin-block: var(--uni-space-3); }
.crm-hours-days.is-muted { opacity: 0.55; }
.crm-hours-day {
    display: flex; align-items: center; justify-content: space-between; gap: var(--uni-space-3); flex-wrap: wrap;
    padding: 8px 12px; border: 1px solid var(--crm-color-border); border-radius: var(--uni-radius-md, 10px); background: var(--crm-color-surface);
}
.crm-hours-day.is-on { border-color: color-mix(in srgb, var(--crm-color-primary) 35%, var(--crm-color-border)); }
.crm-hours-day-toggle { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; min-width: 130px; cursor: pointer; }
.crm-hours-day-toggle input { width: 18px; height: 18px; accent-color: var(--crm-color-primary); }
.crm-hours-day-times { display: inline-flex; align-items: center; gap: 8px; }
.crm-hours-time { width: 112px; padding-block: 4px; }
.crm-hours-sep, .crm-hours-closed { color: var(--crm-color-text-muted); font-size: 12.5px; }
@media (max-width: 600px) {
    .crm-hours-day { flex-direction: column; align-items: stretch; }
    .crm-hours-day-times { justify-content: space-between; }
    .crm-hours-time { width: 44%; }
}

/* CUT 5J — kit de instalação e integração de compras: bloco de código copiável e detalhes colapsados. */
.crm-settings-code {
    margin: 0; padding: var(--uni-space-3) var(--uni-space-4); overflow-x: auto;
    border: 1px solid var(--crm-color-border); border-radius: var(--crm-radius-md);
    background: var(--crm-color-surface-muted, var(--crm-color-surface)); color: var(--crm-color-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--uni-font-size-xs);
    white-space: pre; line-height: 1.5; user-select: text;
}
.crm-settings-details { margin-top: var(--uni-space-2); }
.crm-settings-details > summary { cursor: pointer; color: var(--crm-color-text-muted); font-size: var(--uni-font-size-sm); }
.crm-settings-details ul { margin: var(--uni-space-2) 0 0; padding-left: var(--uni-space-5); display: grid; gap: var(--uni-space-1); }

/* UNICHAT-CUT-6R-A (F-70) — nome do limite + (i) na mesma linha, sem empurrar o "x de N". */
.crm-billing-limit-name { display: inline-flex; align-items: center; gap: 4px; }
.crm-billing-limit-name .uni-field-info { display: inline-flex; }

/* UNICHAT-CUT-6T — Pixel do UniChat (Configurações → Campanhas → Rastreamento). Só tokens do DS. */
.crm-pixel-title { display: inline-flex; align-items: center; gap: var(--uni-space-2); }
.crm-pixel-code { display: flex; align-items: flex-start; gap: var(--uni-space-2); }
.crm-pixel-code .crm-settings-code { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; word-break: break-all; }
.crm-pixel-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uni-space-2); margin-top: var(--uni-space-3); }
.crm-pixel-actions { flex-wrap: wrap; }
.crm-pixel-test { margin-top: var(--uni-space-3); padding: var(--uni-space-3) var(--uni-space-4); border: 1px solid var(--crm-color-border); border-radius: var(--crm-radius-md); background: var(--crm-color-surface-muted, var(--crm-color-surface)); display: grid; gap: var(--uni-space-2); }
.crm-pixel-events { list-style: none; margin: var(--uni-space-2) 0 0; padding: 0; display: grid; gap: var(--uni-space-2); }
.crm-pixel-events li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uni-space-2); padding: var(--uni-space-2) var(--uni-space-3); border: 1px solid var(--crm-color-border); border-radius: var(--crm-radius-md); }
.crm-pixel-event-name { flex: 1 1 160px; font-size: var(--uni-font-size-sm); color: var(--crm-color-text); }
.crm-pixel-events code { flex: 1 1 200px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--uni-font-size-xs); color: var(--crm-color-text); background: var(--crm-color-surface-muted, var(--crm-color-surface)); padding: 2px 6px; border-radius: var(--crm-radius-sm, 4px); word-break: break-all; }
.crm-pixel-docs { display: grid; gap: var(--uni-space-2); }
.crm-pixel-docs p, .crm-pixel-docs li { font-size: var(--uni-font-size-sm); line-height: 1.5; color: var(--crm-color-text); }
.crm-pixel-docs p { margin: 0 0 var(--uni-space-2); }
.crm-pixel-docs ul { margin: 0 0 var(--uni-space-2); padding-left: var(--uni-space-5); display: grid; gap: var(--uni-space-1); }
.crm-pixel-docs code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--uni-font-size-xs); background: var(--crm-color-surface-muted, var(--crm-color-surface)); padding: 1px 5px; border-radius: 4px; word-break: break-all; }
@media (max-width: 599px) {
    .crm-pixel-code { flex-direction: column; }
    .crm-pixel-actions .app-button { width: 100%; }
}

/* UNICHAT-CUT-6T (Owner, Passo 10) — um bloco de seção mobile (msec) pode conter DUAS seções (Campanhas:
   Frequência e proteção + Rastreamento). Sem isto elas empilhavam sem o respiro que o contêiner dá entre blocos. */
.crm-settings-msec { display: flex; flex-direction: column; gap: var(--uni-space-5); }

/* ================================================================================================
   UNICHAT-CUT-6U (F-113) — experiência de sincronização de histórico (HistorySyncModal).

   Nenhum componente novo: o continente é o UniModal canônico. O que existe aqui é só o ritmo
   vertical do corpo, com os tokens de espaçamento do sistema. Cores, tipografia, raio e sombra
   vêm do modal e dos tokens — nada solto.
   ================================================================================================ */
.history-sync { display: flex; flex-direction: column; gap: var(--uni-space-4); }

.history-sync-progress { display: flex; flex-direction: column; gap: var(--uni-space-2); }

.history-sync-line {
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--uni-space-3);
}

.history-sync-label {
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    color: var(--uni-color-text);
}

/* `tabular-nums` é o detalhe que impede a linha de "respirar" a cada atualização: sem ele, 28% e
   47% têm larguras diferentes e o número treme enquanto a barra desliza. */
.history-sync-percent {
    font-size: var(--uni-font-size-md);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--crm-color-primary);
}

.history-sync-detail,
.history-sync-count,
.history-sync-reassurance {
    margin: 0;
    font-size: var(--uni-font-size-sm);
    line-height: 1.5;
    color: var(--uni-color-text-muted);
}

/* A promessa de "pode continuar usando" é a informação que desarma a espera: ganha o degrau de
   destaque que a separa do detalhe técnico logo acima, sem virar um aviso colorido. */
.history-sync-reassurance {
    padding-top: var(--uni-space-3);
    border-top: 1px solid var(--uni-color-border);
    color: var(--uni-color-text);
}

/* Telefone: o modal já é responsivo; aqui só o número desce para a linha de baixo quando o rótulo
   não cabe ao lado, em vez de espremer os dois. */
@media (max-width: 480px) {
    .history-sync-line { flex-direction: column; align-items: flex-start; gap: var(--uni-space-1); }
}