/* /Components/Crm/Campaigns/CampaignTemplateMessagePreview.razor.rz.scp.css */
/* C500-D — a bolha, e só a bolha.
   Tudo aqui sai da escada de VL-01/VL-05/VL-07. Nenhum valor literal: a folha antiga desta
   superfície tinha 143 grafias de font-size, e esta peça nasce depois dessa lição. */

.cmp-msg[b-y1loazl3s7] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    min-width: 0;
}

/* OR-4 — decisão do proprietário (2026-09-10): *"mesmo quando estiver no modo 'Ver como mensagem',
   deve exibir a mensagem decorada (mas sem o mockup do celular explicitamente). Fica bom mostrar
   exatamente como a Meta mostra."*

   A primeira versão desenhava a bolha com os tokens do app — correta quanto ao tema, e errada
   quanto ao propósito: uma prévia existe para prever, e prever exige parecer com o destino. Agora
   a bolha usa as cores da conversa real do WhatsApp, sobre o papel de parede da conversa.

   Isso NÃO reabre VL-28. O tema escuro continua respeitado: o WhatsApp também tem tema escuro, e
   é o par dele que entra ali — não uma placa clara dentro de um drawer escuro, que era o defeito
   medido no mockup antigo. O que se recusa é o dark mode PARCIAL, não a fidelidade. */
.cmp-msg[b-y1loazl3s7] {
    --wa-paper: #efe7de;
    --wa-bubble: #ffffff;
    --wa-text: #111b21;
    --wa-meta: #667781;
    --wa-action: #1a7ff0;
    --wa-divider: rgba(17, 27, 33, .1);
    --wa-media: #dfe5e7;
}

:root[data-crm-theme="dark"] .cmp-msg[b-y1loazl3s7] {
    --wa-paper: #0b141a;
    --wa-bubble: #1f2c33;
    --wa-text: #e9edef;
    --wa-meta: #8696a0;
    --wa-action: #53bdeb;
    --wa-divider: rgba(233, 237, 239, .12);
    --wa-media: #2a3942;
}

.cmp-msg-paper[b-y1loazl3s7] {
    padding: var(--uni-space-3);
    border-radius: var(--uni-radius-lg);
    background: var(--wa-paper);
    min-width: 0;
}

.cmp-msg-bubble[b-y1loazl3s7] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    padding: var(--uni-space-2);
    border-radius: var(--uni-radius-md);
    /* O canto vivo em cima e à esquerda é o lado de quem enviou, como na conversa real. */
    border-top-left-radius: var(--uni-radius-xs);
    background: var(--wa-bubble);
    color: var(--wa-text);
    /* A sombra é a do WhatsApp, não a da escada: aqui a bolha imita um objeto de fora do produto. */
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, .13);
    min-width: 0;
}

.cmp-msg-media[b-y1loazl3s7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--uni-space-1);
    aspect-ratio: 16 / 9;
    border-radius: var(--uni-radius-sm);
    background: var(--wa-media);
    color: var(--wa-meta);
    font-size: var(--uni-font-size-xs);
}

.cmp-msg-media[b-y1loazl3s7]  .crm-icon {
    width: 24px;
    height: 24px;
}

.cmp-msg-header[b-y1loazl3s7] {
    color: var(--wa-text);
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    line-height: 1.35;
}

/* `pre-wrap` porque o corpo do modelo tem quebras de linha reais, e elas fazem parte do que o
   contato vai ler. Renderizá-lo como parágrafo corrido mostraria uma mensagem diferente da que
   será enviada — que é exatamente o erro que uma prévia existe para evitar. */
.cmp-msg-body[b-y1loazl3s7] {
    color: var(--wa-text);
    font-size: var(--uni-font-size-md);
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cmp-msg-footer[b-y1loazl3s7] {
    color: var(--wa-meta);
    font-size: var(--uni-font-size-xs);
    line-height: 1.4;
}

.cmp-msg-time[b-y1loazl3s7] {
    align-self: flex-end;
    color: var(--wa-meta);
    font-size: var(--uni-font-size-2xs);
    line-height: 1.2;
}

/* Os botões do modelo são faixas dentro da bolha, separadas do corpo por uma linha fina — é assim
   que a conversa real os desenha, e é isso que o operador precisa reconhecer. */
.cmp-msg-buttons[b-y1loazl3s7] {
    display: flex;
    flex-direction: column;
    /* Anula o `gap` da bolha para que a linha divisória encoste no conteúdo, como no original. */
    margin-top: calc(var(--uni-space-2) * -1);
}

.cmp-msg-button[b-y1loazl3s7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--uni-space-2);
    padding: var(--uni-space-2);
    border-top: 1px solid var(--wa-divider);
    color: var(--wa-action);
    font-size: var(--uni-font-size-sm);
    line-height: 1.35;
    text-align: center;
}

.cmp-msg-button[b-y1loazl3s7]  .crm-icon {
    width: 15px;
    height: 15px;
    /* O ícone de resposta aponta para a esquerda na conversa real. */
    transform: scaleX(-1);
}

.cmp-msg-caption[b-y1loazl3s7] {
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
    line-height: 1.4;
}

/* Apoio, não assunto: dentro do drawer a prévia divide espaço com preflight e progresso. */
.cmp-msg.is-compact .cmp-msg-bubble[b-y1loazl3s7] {
    padding: var(--uni-space-2);
    gap: var(--uni-space-1);
}

.cmp-msg.is-compact .cmp-msg-body[b-y1loazl3s7] {
    font-size: var(--uni-font-size-sm);
}

/* No modo compacto o cabeçalho de mídia é um indicador de que existe imagem, não a imagem: a
   proporção 16:9 sobre 400px de drawer produzia uma caixa cinza de mais de 200px de altura antes
   da primeira palavra da mensagem. */
.cmp-msg.is-compact .cmp-msg-media[b-y1loazl3s7] {
    aspect-ratio: auto;
    flex-direction: row;
    justify-content: flex-start;
    padding: var(--uni-space-2) var(--uni-space-3);
}

.cmp-msg.is-compact .cmp-msg-media[b-y1loazl3s7]  .crm-icon {
    width: 16px;
    height: 16px;
}

/* FEAT-12 — imagem efetiva do cabeçalho. UNICHAT-CUT-6S (F-92, Owner R1) — largura do balão, altura pela proporção da imagem. */
.cmp-msg-media-image[b-y1loazl3s7] {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: var(--uni-radius-sm);
    background: var(--wa-media);
}

.cmp-msg-media-source[b-y1loazl3s7] {
    display: block;
    margin: 2px 0 4px;
    font-size: 10px;
    line-height: 1.2;
    color: var(--wa-meta, #667781);
}
/* /Components/Crm/Campaigns/CampaignTemplatePhonePreview.razor.rz.scp.css */
/* UNICHAT-CAMPANHAS-VISUAL-ASSISTED-CONVERGENCE-01 / OR-9 — o mockup não pode distorcer.
 *
 * Decisão do proprietário (2026-09-10): *"o mockup do celular ficou distorcido por causa do tamanho
 * da mensagem. Isso não deve acontecer. O mockup deve simbolizar um celular real, que não muda de
 * altura ou largura. Nos casos em que a mensagem for maior, deve ter um scroll interno no mockup,
 * elegante e minimalista, que só aparece quando o mouse está sobre o body do mockup."*
 *
 * CAUSA MEDIDA. `crm-templates.css` já declara `aspect-ratio: 9 / 19.5` no aparelho e
 * `overflow-y: auto` na conversa — e mesmo assim o telefone esticou. `aspect-ratio` só governa a
 * altura enquanto ela é `auto` E o conteúdo cabe: quando o conteúdo é maior, a propriedade CEDE em
 * vez de recortar. A tela interna tem `height: 100%`, que contra um pai de altura `auto` resolve
 * também para `auto` — e a corrente inteira passa a ser dimensionada pela mensagem. Uma mensagem
 * longa deixava de ser mostrada num celular e passava a esticar o celular até ela.
 *
 * A CORREÇÃO. Altura explícita, derivada da largura pela mesma proporção. Com altura real na
 * cadeia, `height: 100%` da tela tem contra o que resolver, o `flex: 1` da conversa passa a
 * significar "o que sobra", e o `overflow-y` que já existia começa a valer.
 *
 * ESCOPO. Esta folha é do componente e não toca `crm-templates.css`, que pertence ao corte
 * UNICHAT-TEMPLATES-CHANNELS-RESIDUAL-VISUAL-CONVERGENCE-01, em execução paralela. A mesma causa
 * atinge o editor de Templates; fica registrada como PAA-CAMPAIGN-11 para aquele corte ou para a
 * reconciliação, e não é corrigida aqui por guardrail.
 */

.tpl-whatsapp-phone[b-j3obikapnx] {
    /* `--cmp-phone-w` é a única medida a ajustar; a altura acompanha a proporção de um aparelho
       real (9:19.5), e nenhuma das duas responde ao tamanho da mensagem. */
    --cmp-phone-w: 224px;
    width: var(--cmp-phone-w);
    height: calc(var(--cmp-phone-w) * 19.5 / 9);
    /* Explícito porque `aspect-ratio` ficaria como reserva silenciosa e voltaria a ceder. */
    aspect-ratio: auto;
    flex: 0 0 auto;
}

/* Sem isto, o item flex assume `min-height: auto` e volta a crescer com o conteúdo — a altura do
   pai passaria a ser sugestão. */
.tpl-whatsapp-phone-screen[b-j3obikapnx] {
    min-height: 0;
}

.tpl-whatsapp-chat[b-j3obikapnx] {
    min-height: 0;
    overflow-y: auto;
    /* A barra ocupa lugar sempre, mas só ganha cor no hover: reservar a calha evita que o texto
       salte 6px lateralmente quando ela aparece. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 160ms ease;
}

/* "Elegante e minimalista, e só quando o mouse está sobre o corpo": o alvo é a conversa, não o
   aparelho inteiro — passar o mouse pela moldura não precisa acender nada. */
.tpl-whatsapp-chat:hover[b-j3obikapnx],
.tpl-whatsapp-chat:focus-within[b-j3obikapnx] {
    scrollbar-color: rgba(17, 27, 33, .28) transparent;
}

.tpl-whatsapp-chat[b-j3obikapnx]::-webkit-scrollbar {
    width: 6px;
}

.tpl-whatsapp-chat[b-j3obikapnx]::-webkit-scrollbar-track {
    background: transparent;
}

.tpl-whatsapp-chat[b-j3obikapnx]::-webkit-scrollbar-thumb {
    border-radius: var(--uni-radius-pill);
    background: transparent;
    transition: background-color 160ms ease;
}

.tpl-whatsapp-chat:hover[b-j3obikapnx]::-webkit-scrollbar-thumb,
.tpl-whatsapp-chat:focus-within[b-j3obikapnx]::-webkit-scrollbar-thumb {
    background: rgba(17, 27, 33, .28);
}

.tpl-whatsapp-chat[b-j3obikapnx]::-webkit-scrollbar-thumb:hover {
    background: rgba(17, 27, 33, .45);
}

/* A tela do WhatsApp é clara nos dois temas do app (é a tela de um aplicativo de fora), então o
   polegar continua escuro sobre ela no tema escuro — a cor acompanha a superfície onde a barra
   corre, não o tema do produto. */

@media (max-width: 767px) {
    .tpl-whatsapp-phone[b-j3obikapnx] { --cmp-phone-w: 200px; }
}

/* FEAT-12 — imagem efetiva do cabeçalho no mockup do celular.
   UNICHAT-CUT-6S (F-92) — proporção da imagem, sem crop nem ampliação (ver crm-templates.css). */
.tpl-whatsapp-media-image[b-j3obikapnx] {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 0 0 6px;
    background: rgba(0, 0, 0, .06);
}

/* F-96 — origem honesta da imagem da prévia ("Exemplo da Meta (só prévia)"). */
.tpl-whatsapp-media-source[b-j3obikapnx] {
    display: block;
    margin: -2px 0 6px;
    font-size: 10px;
    line-height: 1.2;
    color: #667781;
}
/* /Components/Crm/Campaigns/CrmCampaignsPage.razor.rz.scp.css */
/* UNICHAT-CAMPANHAS-VISUAL-ASSISTED-CONVERGENCE-01 — folha da superfície de Campanhas.
 *
 * O QUE ESTA FOLHA DEIXOU DE SER. A versão anterior tinha 404 linhas com 61 grafias literais de
 * `font-size` (incluindo 13.5, 12.5, 11.5 e 10.5px), nove de `border-radius`, seis `z-index`
 * literais (1100/1101/1200/1201/5/51) e nenhum token `--uni-font-size-*`. Com a folha da
 * Intelligence, eram 143 grafias — mais do que as três gramáticas que o §1 do contrato nomeia,
 * somadas. Era a quarta gramática do UniChat, e a maior.
 *
 * O QUE ELA É AGORA. Só o que é específico de Campanhas. Cabeçalho, abas, modais, drawer, campos,
 * botões, busca, estado vazio e alertas saíram daqui: são as primitives canônicas. Todo valor vem
 * da escada de VL-01/VL-05/VL-07/VL-09.
 */

.cmp-page[b-bu1hf8yruo] {
    padding: var(--uni-space-5);
    color: var(--uni-color-text);
}

.cmp-section[b-bu1hf8yruo] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
}

/* OR-14 — a faixa de seções encostava no conteúdo. VL-20 fixa o respiro entre o cabeçalho e o
   bloco seguinte em 24px, e a faixa de abas é a continuação do cabeçalho. `::deep` porque o
   elemento é renderizado pelo `UniTabs` e não recebe o atributo de isolamento desta folha — a
   mesma armadilha de "seletor sem alvo" de §22.2.

   Margem, e não `gap` no pai: o espaçamento de um contêiner vem de UMA camada (§22.2), e
   `.cmp-page` tem filhos de naturezas diferentes (app bar, alertas, seção) que não devem receber
   o mesmo respiro por acidente. */
[b-bu1hf8yruo] .cmp-section-tabs {
    margin-bottom: var(--uni-space-5);
}

/* ---- Barra de filtros (VL-21) --------------------------------------------------------------
   Busca permanente à esquerda ocupando o espaço livre, uma faixa de segmentação, e nada mais
   permanente. A paginação saiu daqui: pertence ao pé da lista. */

.cmp-toolbar[b-bu1hf8yruo] {
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
    flex-wrap: wrap;
}

.cmp-toolbar-search[b-bu1hf8yruo] {
    flex: 1 1 260px;
    min-width: 0;
}

/* `::deep` obrigatório: o elemento que carrega esta classe é renderizado pelo `UniSelect`, ou
   seja, pertence a OUTRO componente e não recebe o atributo de isolamento desta folha. Sem o
   `::deep` a regra não tem alvo e falha em silêncio — foi o que a medição pegou: `flex` continuava
   `0 1 auto` e o select ocupava a linha inteira, empurrando a busca para cima. É o mesmo defeito
   de "seletor sem alvo" registrado em §22.2. */
[b-bu1hf8yruo] .cmp-toolbar-status {
    flex: 0 0 auto;
    width: 220px;
    min-width: 0;
}

/* ---- A lista (VL-17 / D-37) -----------------------------------------------------------------
   Cada linha é um cartão próprio separado por espaço (emenda de VL-17 pelo UniList). O conteúdo
   é: identificação + situação + UM dado que diferencia + a seta. Seis colunas de métrica com
   rótulo em caixa alta — que era o que existia — não cabem na régua e não cabiam na tela. */

.cmp-rows[b-bu1hf8yruo] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
}

.cmp-row[b-bu1hf8yruo] {
    display: flex;
    align-items: center;
    gap: var(--uni-space-4);
    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;
    transition: border-color 150ms ease, background-color 150ms ease;
}

/* VL-24 — hover é `primary-soft`; sem sombra e sem deslocamento (UI-03A proíbe o lift). */
.cmp-row:hover[b-bu1hf8yruo] {
    border-color: var(--uni-color-primary);
    background: color-mix(in srgb, var(--uni-color-primary-soft) 40%, var(--uni-color-surface));
}

/* VL-44 — fora de campo de entrada, o realce de foco é o anel âmbar do token canônico. */
.cmp-row:focus-visible[b-bu1hf8yruo] {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

.cmp-row-identity[b-bu1hf8yruo] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
}

.cmp-row-headline[b-bu1hf8yruo] {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
    flex-wrap: wrap;
}

.cmp-row-name[b-bu1hf8yruo] {
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.cmp-row-sub[b-bu1hf8yruo] {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
    flex-wrap: wrap;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
    line-height: 1.4;
}

.cmp-row-sub .cmp-dot[b-bu1hf8yruo] {
    opacity: .5;
}

/* VL-04 — o nome do modelo é subtítulo de linha: uma linha, com reticências. */
.cmp-row-template[b-bu1hf8yruo] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 22ch;
}

/* O único dado que diferencia. Alinhado à direita porque é número. */
.cmp-row-outcome[b-bu1hf8yruo] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    text-align: right;
    min-width: 0;
}

.cmp-row-outcome strong[b-bu1hf8yruo] {
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.cmp-row-outcome span[b-bu1hf8yruo] {
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
    line-height: 1.4;
}

/* VL-60 — antes de lançar não existe resultado; dizer "0 entregues" afirmaria um fato falso. */
.cmp-row-outcome-idle[b-bu1hf8yruo] {
    color: var(--uni-color-text-subtle);
    font-size: var(--uni-font-size-xs);
}

.cmp-row-go[b-bu1hf8yruo] {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--uni-color-text-subtle);
}

.cmp-row-go[b-bu1hf8yruo]  .crm-icon {
    width: 18px;
    height: 18px;
}

.cmp-row:hover .cmp-row-go[b-bu1hf8yruo] {
    color: var(--uni-color-primary);
}

/* VL-29 — o esqueleto não anima. "Animação ao carregar lista" é proibição explícita da regra;
   o que ele precisa fazer é ocupar o lugar, não chamar atenção. */
.cmp-row-skeleton[b-bu1hf8yruo] {
    height: 64px;
    cursor: default;
    border-style: dashed;
    opacity: .5;
}

.cmp-row-skeleton:hover[b-bu1hf8yruo] {
    border-color: var(--uni-color-border);
    background: var(--uni-color-surface);
}

/* ---- Badge de situação (VL-36) -------------------------------------------------------------- */

.cmp-badge[b-bu1hf8yruo] {
    display: inline-flex;
    align-items: center;
    width: max-content;
    white-space: nowrap;
    padding: 2px var(--uni-space-3);
    border-radius: var(--uni-radius-pill);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
}

/* VL-46 — os pastéis semânticos têm par escuro declarado na camada canônica; usá-los por token
   é o que faz o badge funcionar nos dois temas sem regra de tema aqui. */
.cmp-badge.neutral[b-bu1hf8yruo] { background: var(--uni-color-neutral-soft); color: var(--uni-color-text-muted); }

/* O marcador de variante é dado, não estado: cursor de ajuda porque o nome completo do
   experimento está no `title`, e não na linha. */
.cmp-badge.cmp-variant[b-bu1hf8yruo] { cursor: help; }
.cmp-badge.ok[b-bu1hf8yruo]      { background: var(--uni-color-success-soft); color: var(--uni-color-success); }
.cmp-badge.info[b-bu1hf8yruo]    { background: var(--uni-color-info-soft);    color: var(--uni-color-info); }
.cmp-badge.warn[b-bu1hf8yruo]    { background: var(--uni-color-warning-soft); color: var(--uni-color-warning); }
.cmp-badge.bad[b-bu1hf8yruo]     { background: var(--uni-color-danger-soft);  color: var(--uni-color-danger); }

/* ---- Estados e textos auxiliares ------------------------------------------------------------ */

.cmp-alert[b-bu1hf8yruo] {
    padding: var(--uni-space-3) var(--uni-space-4);
    border-radius: var(--uni-radius-md);
    font-size: var(--uni-font-size-sm);
    line-height: 1.45;
}

.cmp-alert.error[b-bu1hf8yruo]   { background: var(--uni-color-danger-soft);  color: var(--uni-color-danger); }
.cmp-alert.success[b-bu1hf8yruo] { background: var(--uni-color-success-soft); color: var(--uni-color-success); }
.cmp-alert.warning[b-bu1hf8yruo] { background: var(--uni-color-warning-soft); color: var(--uni-color-text); }

.cmp-empty[b-bu1hf8yruo],
.cmp-loading[b-bu1hf8yruo] {
    padding: var(--uni-space-6) var(--uni-space-4);
    text-align: center;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
}

.cmp-empty.compact[b-bu1hf8yruo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--uni-space-3);
    padding: var(--uni-space-4);
}

.cmp-empty.compact p[b-bu1hf8yruo] { margin: 0; }

.cmp-link[b-bu1hf8yruo] {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--uni-color-primary);
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.cmp-help[b-bu1hf8yruo] {
    margin: 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
    line-height: 1.45;
}

/* Nome do arquivo escolhido para a imagem de cabeçalho, no assistente. */
.cmp-file-name[b-bu1hf8yruo] {
    display: block;
    margin-top: var(--uni-space-1);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
}

/* ---- O assistente: corpo -------------------------------------------------------------------
   O modal, o cabeçalho, o rodapé e os campos são do UniModal e da ficha `.uni-field`. O que
   resta aqui é o enquadramento do stepper e a composição das etapas. */

.cmp-modal-body[b-bu1hf8yruo] {
    display: grid;
    gap: var(--uni-space-4);
}

[b-bu1hf8yruo] .cmp-stepper-frame {
    padding: var(--uni-space-4) var(--uni-space-5) var(--uni-space-3);
}

.cmp-footer-gap[b-bu1hf8yruo] { flex: 1; }

.cmp-variable-box[b-bu1hf8yruo] {
    display: grid;
    gap: var(--uni-space-3);
    padding: var(--uni-space-4);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
}

.cmp-variable-box > strong[b-bu1hf8yruo] {
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-md);
    font-weight: 600;
}

.cmp-variable-box p[b-bu1hf8yruo] {
    margin: 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
}

/* ---- UNICHAT-CUT-6S (F-95) — etapa 1 em duas colunas no desktop: formulário | prévia ---------- */

.cmp-step1-layout[b-bu1hf8yruo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    grid-template-rows: auto auto;
    column-gap: var(--uni-space-5);
    row-gap: var(--uni-space-4);
    align-items: start;
}

.cmp-step1-form[b-bu1hf8yruo] {
    grid-column: 1;
    display: grid;
    gap: var(--uni-space-4);
    min-width: 0;
}

.cmp-step1-form--tail[b-bu1hf8yruo] { grid-row: 2; }

/* A prévia ocupa a coluna da direita nas duas linhas e acompanha a rolagem do corpo do modal; nunca ultrapassa a
   largura da coluna — o balão e o aparelho escalam para dentro dela. */
.cmp-step1-preview[b-bu1hf8yruo] {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: 0;
    min-width: 0;
}

.cmp-step1-preview[b-bu1hf8yruo]  .cmp-template-phone { --cmp-phone-w: 220px; }

/* CC-03: era `var(--uni-color-surface-muted, var(--uni-color-surface))` com o token indefinido — o Owner aprovou o fallback. */
.cmp-preview-block--empty[b-bu1hf8yruo] { border-style: dashed; background: var(--uni-color-surface); }
.cmp-preview-empty[b-bu1hf8yruo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--uni-space-2);
    margin: 0;
    padding: var(--uni-space-6) var(--uni-space-4);
    text-align: center;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
}
.cmp-preview-empty[b-bu1hf8yruo]  .crm-icon { width: 28px; height: 28px; opacity: .6; }

@media (max-width: 1023px) {
    .cmp-step1-layout[b-bu1hf8yruo] { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    .cmp-step1-form[b-bu1hf8yruo], .cmp-step1-form--tail[b-bu1hf8yruo], .cmp-step1-preview[b-bu1hf8yruo] { grid-column: 1; grid-row: auto; position: static; }
}

/* ---- Prévia da mensagem (C500-D) ------------------------------------------------------------ */

.cmp-preview-block[b-bu1hf8yruo] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-3);
    padding: var(--uni-space-4);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
}

.cmp-preview-head[b-bu1hf8yruo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-3);
}

/* VL-03 — micro-label. Nomeia o bloco; não compete com o conteúdo. */
.cmp-preview-head > span[b-bu1hf8yruo] {
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.2;
    user-select: none;
}

/* OR-9 — a geometria do aparelho passou para a folha do próprio CampaignTemplatePhonePreview,
   onde a altura é explícita. Aqui só resta a posição. */
.cmp-preview-block[b-bu1hf8yruo]  .cmp-template-phone {
    justify-self: center;
    align-self: center;
}

/* ---- Etapa 2: fontes de audiência ----------------------------------------------------------- */

.cmp-audience[b-bu1hf8yruo] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--uni-space-3);
}

.cmp-audience-col[b-bu1hf8yruo] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    overflow: hidden;
    background: var(--uni-color-surface);
}

.cmp-audience-picker[b-bu1hf8yruo] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
}

.cmp-audience-head[b-bu1hf8yruo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-2);
    padding: var(--uni-space-2) var(--uni-space-3);
    border-bottom: 1px solid var(--uni-color-border);
    background: var(--uni-color-neutral-soft);
}

.cmp-audience-head > span[b-bu1hf8yruo] {
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.2;
}

.cmp-audience-head > small[b-bu1hf8yruo] {
    flex: 0 0 auto;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-2xs);
    font-variant-numeric: tabular-nums;
}

/* Owner R2 (CUT 6T) — estado + (i) na mesma linha do cabeçalho de "Rastrear resultados". */
.cmp-audience-head > small.cmp-tracking-state[b-bu1hf8yruo] {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-1);
}

.cmp-audience-picker .cmp-audience-head[b-bu1hf8yruo] {
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
}

.cmp-option-list[b-bu1hf8yruo] {
    display: flex;
    flex-direction: column;
    max-height: 196px;
    overflow-y: auto;
}

.cmp-empty-inline[b-bu1hf8yruo] {
    margin: 0;
    padding: var(--uni-space-3);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
}

.cmp-audience .cmp-option[b-bu1hf8yruo] {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
    padding: var(--uni-space-2) var(--uni-space-3);
    cursor: pointer;
    border-bottom: 1px solid var(--uni-color-border);
    transition: background-color 120ms ease;
    /* D-38 / VL-59 — alvo de toque. A linha é o alvo, e ela cresce sem a caixa pintada crescer. */
    min-height: 40px;
}

.cmp-audience .cmp-option:last-child[b-bu1hf8yruo] { border-bottom: 0; }
.cmp-audience .cmp-option:hover[b-bu1hf8yruo] { background: var(--uni-color-neutral-soft); }
.cmp-audience .cmp-option.is-on[b-bu1hf8yruo] { background: var(--uni-color-primary-soft); }

.cmp-option > input[type="checkbox"][b-bu1hf8yruo] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.cmp-option-check[b-bu1hf8yruo] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--uni-color-border-strong);
    border-radius: var(--uni-radius-xs);
    background: var(--uni-color-surface);
    transition: background-color 120ms ease, border-color 120ms ease;
}

.cmp-option-check svg[b-bu1hf8yruo] {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--uni-color-on-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transform: scale(.6);
    transition: opacity 120ms ease, transform 120ms ease;
}

.cmp-option.is-on .cmp-option-check[b-bu1hf8yruo] {
    border-color: var(--uni-color-primary);
    background: var(--uni-color-primary);
}

.cmp-option.is-on .cmp-option-check svg[b-bu1hf8yruo] {
    opacity: 1;
    transform: scale(1);
}

.cmp-option-name[b-bu1hf8yruo] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmp-option-meta[b-bu1hf8yruo] {
    flex: 0 0 auto;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
    font-variant-numeric: tabular-nums;
}

.cmp-audience-summary[b-bu1hf8yruo] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
    padding: var(--uni-space-3) var(--uni-space-4);
    border: 1px solid var(--uni-color-primary);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-primary-soft);
}

.cmp-audience-summary > div[b-bu1hf8yruo] {
    display: flex;
    align-items: baseline;
    gap: var(--uni-space-2);
    flex-wrap: wrap;
}

.cmp-audience-summary strong[b-bu1hf8yruo] {
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-xl);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.cmp-audience-summary span[b-bu1hf8yruo] {
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-sm);
}

.cmp-audience-summary small[b-bu1hf8yruo] {
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
    line-height: 1.4;
}

/* ---- Busca de contatos dentro do assistente ------------------------------------------------- */

.cmp-typeahead[b-bu1hf8yruo] { position: relative; }

.cmp-search-in-modal[b-bu1hf8yruo] {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
    min-height: 42px;
    padding: 0 var(--uni-space-4);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-pill);
    background: var(--uni-color-surface);
}

/* VL-14 — o realce de foco vive no CONTAINER, e o input interno não desenha nada. */
.cmp-search-in-modal:focus-within[b-bu1hf8yruo] {
    border-color: var(--uni-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--uni-color-primary) 22%, transparent);
}

.cmp-search-in-modal[b-bu1hf8yruo]  .crm-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--uni-color-text-muted);
}

.cmp-search-in-modal input[b-bu1hf8yruo] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    color: var(--uni-color-text);
    font: inherit;
    font-size: var(--uni-font-size-md);
}

/* VL-30 — painel ancorado limitado em altura e com rolagem própria. */
.cmp-typeahead-menu[b-bu1hf8yruo] {
    position: absolute;
    z-index: var(--uni-z-dropdown);
    top: calc(100% + var(--uni-space-1));
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    padding: var(--uni-space-1);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
    box-shadow: var(--uni-shadow-md);
}

.cmp-typeahead-state[b-bu1hf8yruo] {
    margin: var(--uni-space-1) var(--uni-space-2);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
}

/* VL-31 — opção de dropdown: `md`, padding 8/12, raio `sm`. */
.cmp-typeahead-opt[b-bu1hf8yruo] {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    text-align: left;
    padding: var(--uni-space-2) var(--uni-space-3);
    border: 0;
    border-radius: var(--uni-radius-sm);
    background: transparent;
    cursor: pointer;
}

.cmp-typeahead-opt:hover[b-bu1hf8yruo] {
    background: var(--uni-color-primary-soft);
    color: var(--uni-color-primary-soft-text);
}

.cmp-typeahead-opt.is-on[b-bu1hf8yruo] {
    background: var(--uni-color-primary-soft);
}

/* VL-32 — chips abaixo do campo, em linha própria. */
.cmp-chips[b-bu1hf8yruo] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uni-space-2);
}

.cmp-chip[b-bu1hf8yruo] {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-2);
    padding: 1px var(--uni-space-2) 1px var(--uni-space-3);
    border-radius: var(--uni-radius-pill);
    background: var(--uni-color-primary-soft);
    color: var(--uni-color-primary-soft-text);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
}

.cmp-chip button[b-bu1hf8yruo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: var(--uni-radius-pill);
    background: transparent;
    color: inherit;
    opacity: .6;
    cursor: pointer;
}

.cmp-chip button:hover[b-bu1hf8yruo],
.cmp-chip button:focus-visible[b-bu1hf8yruo] { opacity: 1; }

/* ---- Etapa 3: revisão ------------------------------------------------------------------------ */

.cmp-review-card[b-bu1hf8yruo],
.cmp-review-audience[b-bu1hf8yruo] {
    padding: var(--uni-space-4);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
}

.cmp-review-card h3[b-bu1hf8yruo] {
    margin: 0 0 var(--uni-space-1);
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
}

.cmp-review-card p[b-bu1hf8yruo] {
    margin: 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
}

.cmp-review-checks[b-bu1hf8yruo] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
}

.cmp-review-checks li[b-bu1hf8yruo] {
    display: grid;
    grid-template-columns: 20px 92px 1fr;
    align-items: center;
    gap: var(--uni-space-3);
    padding: var(--uni-space-3);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    font-size: var(--uni-font-size-sm);
}

.cmp-review-checks li[b-bu1hf8yruo]  .crm-icon { width: 16px; height: 16px; }
.cmp-review-checks li.ok[b-bu1hf8yruo]  .crm-icon { color: var(--uni-color-success); }
.cmp-review-checks li.pending[b-bu1hf8yruo]  .crm-icon { color: var(--uni-color-warning); }
.cmp-review-checks li > span[b-bu1hf8yruo] { color: var(--uni-color-text-muted); }
.cmp-review-checks li > strong[b-bu1hf8yruo] { color: var(--uni-color-text); font-weight: 600; }

.cmp-review-audience[b-bu1hf8yruo] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
}

.cmp-review-audience.is-empty[b-bu1hf8yruo] {
    border-color: var(--uni-color-warning);
    background: var(--uni-color-warning-soft);
}

.cmp-review-audience.is-empty .cmp-review-audience-figure strong[b-bu1hf8yruo] { color: var(--uni-color-warning); }

.cmp-review-audience-head[b-bu1hf8yruo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-2);
}

.cmp-review-audience-head > span[b-bu1hf8yruo] {
    display: inline-flex;
    align-items: center;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.2;
}

.cmp-review-audience-figure[b-bu1hf8yruo] {
    margin: 0;
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-sm);
}

.cmp-review-audience-figure strong[b-bu1hf8yruo] {
    font-size: var(--uni-font-size-xl);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.cmp-review-audience-detail[b-bu1hf8yruo],
.cmp-review-audience-state[b-bu1hf8yruo] {
    margin: 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
    line-height: 1.45;
}

.cmp-review-audience-link[b-bu1hf8yruo] { align-self: flex-start; }

/* VL-59 — o glifo do (i) mede 18px, e o alvo de toque cresce sem a caixa pintada crescer. */
.cmp-info-dot[b-bu1hf8yruo] {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-left: var(--uni-space-1);
    padding: 0;
    border: 1px solid var(--uni-color-border-strong);
    border-radius: var(--uni-radius-pill);
    background: transparent;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    font-style: italic;
    line-height: 1;
    cursor: pointer;
}

.cmp-info-dot[b-bu1hf8yruo]::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.cmp-info-dot:hover[b-bu1hf8yruo] {
    border-color: var(--uni-color-primary);
    color: var(--uni-color-primary);
}

.cmp-icon-btn[b-bu1hf8yruo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-pill);
    background: var(--uni-color-surface);
    color: var(--uni-color-text-muted);
    cursor: pointer;
}

.cmp-icon-btn:hover:not(:disabled)[b-bu1hf8yruo] {
    border-color: var(--uni-color-primary);
    color: var(--uni-color-primary);
}

.cmp-icon-btn:disabled[b-bu1hf8yruo] { opacity: .5; cursor: not-allowed; }
.cmp-icon-btn[b-bu1hf8yruo]  .crm-icon { width: 16px; height: 16px; }

/* ---- Ajuda (opt-in) -------------------------------------------------------------------------- */

.cmp-help-body[b-bu1hf8yruo] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-3);
}

.cmp-help-body p[b-bu1hf8yruo] {
    margin: 0;
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-md);
    line-height: 1.45;
}

.cmp-help-body h3[b-bu1hf8yruo] {
    margin: var(--uni-space-2) 0 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.2;
}

.cmp-help-body ul[b-bu1hf8yruo],
.cmp-help-body ol[b-bu1hf8yruo] {
    margin: 0;
    padding-left: var(--uni-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-md);
    line-height: 1.45;
}

.cmp-help-note[b-bu1hf8yruo] {
    margin: 0;
    padding-top: var(--uni-space-2);
    border-top: 1px solid var(--uni-color-border);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
}

/* ---- O detalhe (C500-A / C500-C) -------------------------------------------------------------
   Dentro do drawer canônico de 440px, tudo empilha numa coluna. Os "12 caixas iguais" do estado
   anterior — 5 cartões de preflight mais 7 de métrica, mesma aparência para coisas de naturezas
   diferentes, com o mesmo número aparecendo três vezes — viram duas listas de linhas rotuladas. */

/* A barra é uma grade de duas linhas: situação e ações compartilham a primeira (é ali que o olho
   procura "posso mandar?"), e a frase que explica o estado ocupa a segunda inteira. Com `flex` e
   `flex-wrap` o menu caía sozinho numa terceira linha sempre que não havia ação primária — que é
   o caso de toda campanha concluída, medido no navegador. */
.cmp-detail-actions[b-bu1hf8yruo] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--uni-space-2) var(--uni-space-3);
}

.cmp-detail-actions-end[b-bu1hf8yruo] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--uni-space-2);
}

.cmp-detail-overview[b-bu1hf8yruo] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
}

.cmp-detail-overview-preview[b-bu1hf8yruo] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-3);
    min-width: 0;
}

.cmp-detail-overview-preview[b-bu1hf8yruo]  .cmp-template-phone {
    align-self: center;
}

/* Preflight e métricas: linhas rotuladas, não cartões. Uma linha por fato, o rótulo à esquerda e
   o valor à direita — a leitura é vertical e o olho compara valores na mesma coluna. */
.cmp-preflight[b-bu1hf8yruo],
.cmp-metric-cards[b-bu1hf8yruo] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    overflow: hidden;
}

.cmp-preflight > div[b-bu1hf8yruo],
.cmp-metric-cards > div[b-bu1hf8yruo],
.cmp-metric-cards > .cmp-metric-card-button[b-bu1hf8yruo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-3);
    padding: var(--uni-space-3) var(--uni-space-4);
    border-bottom: 1px solid var(--uni-color-border);
}

.cmp-preflight > div:last-child[b-bu1hf8yruo],
.cmp-metric-cards > :last-child[b-bu1hf8yruo] { border-bottom: 0; }

/* UNICHAT-CUT-6S (F-97) — cartão de métrica clicável ("Sem identidade válida" abre o detalhamento): mesma anatomia
   das linhas, com affordance de link. Lista de contatos afetados com motivo por contato. */
.cmp-metric-cards .cmp-metric-card-button[b-bu1hf8yruo] {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--uni-color-border);
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}
/* Owner R2 — o botão herda a linha (flex, padding) pelo seletor acima; o rótulo continua à direita como nas outras. */
.cmp-metric-cards .cmp-metric-card-button span[b-bu1hf8yruo] { text-align: right; }
/* FINAL-MVP-CONVERGENCE-CANDIDATE-01 (CC-03): `--uni-color-surface-muted` nunca foi definido — o hover resolvia
   como vazio. O papel "superfície neutra de hover" na família Uni é `--uni-color-neutral-soft` (par claro/escuro). */
.cmp-metric-cards .cmp-metric-card-button:hover[b-bu1hf8yruo] { background: var(--uni-color-neutral-soft); }
.cmp-metric-cards .cmp-metric-card-button:focus-visible[b-bu1hf8yruo] { outline: 2px solid var(--uni-color-primary); outline-offset: -2px; }
.cmp-metric-cards .cmp-metric-card-button span[b-bu1hf8yruo] { text-decoration: underline dotted; text-underline-offset: 3px; }
.cmp-metric-cards--compact[b-bu1hf8yruo] { margin-bottom: var(--uni-space-4); }
.cmp-invalid-list[b-bu1hf8yruo] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--uni-space-2); }
.cmp-invalid-item[b-bu1hf8yruo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--uni-space-3);
    padding: var(--uni-space-3);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
}
.cmp-invalid-copy[b-bu1hf8yruo] { display: flex; flex-direction: column; min-width: 0; }
.cmp-invalid-copy strong[b-bu1hf8yruo] { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-invalid-copy small[b-bu1hf8yruo] { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-sm); }
.cmp-invalid-link[b-bu1hf8yruo] { font-size: var(--uni-font-size-sm); white-space: nowrap; }
@media (max-width: 767px) {
    .cmp-invalid-item[b-bu1hf8yruo] { grid-template-columns: minmax(0, 1fr) auto; }
    .cmp-invalid-link[b-bu1hf8yruo] { grid-column: 1 / -1; }
}

.cmp-preflight span[b-bu1hf8yruo],
.cmp-metric-cards span[b-bu1hf8yruo] {
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
}

.cmp-preflight strong[b-bu1hf8yruo],
.cmp-metric-cards strong[b-bu1hf8yruo] {
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* VL-06 — a marca de situação é uma borda esquerda de 3px, como a linha selecionada de VL-17.
   Cor por domínio (VL-36 / PAA-CAMPAIGN-04), nunca por escolha da tela. */
.cmp-preflight > div[b-bu1hf8yruo] { border-left: 3px solid transparent; }
.cmp-preflight > div.ok[b-bu1hf8yruo]   { border-left-color: var(--uni-color-success); }
.cmp-preflight > div.info[b-bu1hf8yruo] { border-left-color: var(--uni-color-info); }
.cmp-preflight > div.warn[b-bu1hf8yruo] { border-left-color: var(--uni-color-warning); }
.cmp-preflight > div.bad[b-bu1hf8yruo]  { border-left-color: var(--uni-color-danger); }
.cmp-preflight > div.neutral[b-bu1hf8yruo] { border-left-color: var(--uni-color-border); }

/* ---- Destinatários (C500-B) ------------------------------------------------------------------ */

.cmp-recipients[b-bu1hf8yruo],
.cmp-audit[b-bu1hf8yruo] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-3);
}

.cmp-recipients-head[b-bu1hf8yruo] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--uni-space-3);
    flex-wrap: wrap;
}

.cmp-recipients-titles[b-bu1hf8yruo] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
    min-width: 0;
}

.cmp-recipients-titles h3[b-bu1hf8yruo] {
    margin: 0;
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    line-height: 1.2;
}

.cmp-recipients-titles p[b-bu1hf8yruo] {
    margin: 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
}

.cmp-recipients-search[b-bu1hf8yruo] {
    flex: 1 1 200px;
    min-width: 0;
}

/* OR-6 — cada destinatário é um cartão, não uma linha de tabela.
   Dentro de 440px, seis colunas cortavam o conteúdo. VL-27 já dizia por quê: componente de dado
   responde à largura ÚTIL DO CONTAINER, não à do viewport — e nessa largura a forma certa é a
   mesma que VL-17 prescreve abaixo de 1023px. Os fatos ficam em duas colunas para o olho
   comparar; o que é longo ocupa a linha inteira. */
.cmp-people[b-bu1hf8yruo] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
}

.cmp-person[b-bu1hf8yruo] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    padding: var(--uni-space-3);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
}

.cmp-person-head[b-bu1hf8yruo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-2);
    flex-wrap: wrap;
}

.cmp-person-name[b-bu1hf8yruo] {
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    line-height: 1.35;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cmp-person-facts[b-bu1hf8yruo] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--uni-space-2) var(--uni-space-3);
    margin: 0;
}

.cmp-person-facts > div[b-bu1hf8yruo] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

/* O que é longo — motivo de falha, data de nova tentativa — ocupa a linha inteira em vez de
   espremer numa coluna de metade da largura. */
.cmp-person-facts > .cmp-person-wide[b-bu1hf8yruo] {
    grid-column: 1 / -1;
}

/* VL-03 — micro-label. */
.cmp-person-facts dt[b-bu1hf8yruo] {
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.2;
    user-select: none;
}

.cmp-person-facts dd[b-bu1hf8yruo] {
    margin: 0;
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-sm);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.cmp-person-action[b-bu1hf8yruo] {
    display: flex;
    justify-content: flex-end;
}

/* A linha da aba de consentimento não é clicável sem permissão de gerir. */
.cmp-row.is-static[b-bu1hf8yruo] {
    cursor: default;
}

.cmp-row.is-static:hover[b-bu1hf8yruo] {
    border-color: var(--uni-color-border);
    background: var(--uni-color-surface);
}

/* Título de seção dentro do detalhe (OR-3). */
.cmp-section-title[b-bu1hf8yruo] {
    margin: 0;
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    line-height: 1.2;
}

/* OR-15 — separa a grade de campos do alerta de seção dentro do modal de consentimento. */
.cmp-consent-form[b-bu1hf8yruo] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-5);
}

/* OR-2 — a situação e o (i) que a explica andam juntos. */
.cmp-status-with-info[b-bu1hf8yruo] {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-1);
}

/* ---- Auditoria -------------------------------------------------------------------------------- */

.cmp-timeline[b-bu1hf8yruo] {
    display: grid;
    gap: 0;
}

.cmp-timeline > div[b-bu1hf8yruo] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--uni-space-1);
    padding: 0 0 var(--uni-space-4) var(--uni-space-4);
    border-left: 2px solid var(--uni-color-border);
}

.cmp-timeline span[b-bu1hf8yruo] {
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-2xs);
}

.cmp-timeline strong[b-bu1hf8yruo] {
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
}

.cmp-timeline p[b-bu1hf8yruo] {
    margin: 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
    line-height: 1.45;
}

/* ---- Responsividade -------------------------------------------------------------------------
   VL-27 — o shell tem breakpoints fixos; os componentes de dado respondem à largura útil. */

@media (max-width: 1023px) {
    .cmp-row-go[b-bu1hf8yruo] { display: none; }
}

@media (max-width: 767px) {
    .cmp-page[b-bu1hf8yruo] { padding: var(--uni-space-4); }

    .cmp-toolbar[b-bu1hf8yruo] { align-items: stretch; }
    .cmp-toolbar-search[b-bu1hf8yruo],
    .cmp-toolbar-status[b-bu1hf8yruo] { flex-basis: 100%; }

    /* A linha empilha: identificação em cima, o dado embaixo e alinhado à esquerda. */
    .cmp-row[b-bu1hf8yruo] {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--uni-space-2);
    }

    .cmp-row-identity[b-bu1hf8yruo] { flex-basis: 100%; }

    .cmp-row-outcome[b-bu1hf8yruo] {
        flex-direction: row;
        align-items: baseline;
        gap: var(--uni-space-2);
        text-align: left;
    }

    .cmp-audience[b-bu1hf8yruo] { grid-template-columns: 1fr; }

    .cmp-review-checks li[b-bu1hf8yruo] { grid-template-columns: 20px 1fr; }
    .cmp-review-checks li > span[b-bu1hf8yruo] { grid-column: 2; }

    [b-bu1hf8yruo] .cmp-stepper-frame {
        padding-left: var(--uni-space-4);
        padding-right: var(--uni-space-4);
    }

    /* VL-17 — abaixo de 1023 a tabela vira lista de scan, com rótulo declarativo vindo do
       markup (`data-label`), nunca de `content` em `::before` sobre texto inventado pelo CSS. */
    .cmp-recipient-table thead[b-bu1hf8yruo] { display: none; }
    .cmp-recipient-table tbody[b-bu1hf8yruo],
    .cmp-recipient-table tr[b-bu1hf8yruo],
    .cmp-recipient-table td[b-bu1hf8yruo] { display: block; width: 100%; }

    .cmp-recipient-table tr[b-bu1hf8yruo] {
        padding: var(--uni-space-3);
        border-bottom: 1px solid var(--uni-color-border);
    }

    .cmp-recipient-table td[b-bu1hf8yruo] {
        display: grid;
        grid-template-columns: 92px 1fr;
        gap: var(--uni-space-2);
        border: 0;
        padding: var(--uni-space-1) 0;
    }

    .cmp-recipient-table td[data-label][b-bu1hf8yruo]::before {
        content: attr(data-label);
        color: var(--uni-color-text-muted);
        font-size: var(--uni-font-size-2xs);
    }
}

/* UNICHAT-POST-CAMPAIGN-OPERATIONAL-HARDENING-20260910-01 — estatísticas com proveniência. Reusa a
   gramática de linhas rotuladas acima; só acrescenta o subtítulo de bloco (com a origem em <small>),
   a lista de motivos de falha e o detalhe pequeno dentro do valor de custo. */
.cmp-stats[b-bu1hf8yruo] { display: flex; flex-direction: column; gap: var(--uni-space-3); }

.cmp-stats-title[b-bu1hf8yruo] {
    margin: var(--uni-space-2) 0 0;
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    color: var(--uni-color-text);
}

.cmp-stats-title small[b-bu1hf8yruo] {
    margin-left: var(--uni-space-2);
    font-weight: 400;
    color: var(--uni-color-text-muted);
}

.cmp-failures[b-bu1hf8yruo] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    overflow: hidden;
}

.cmp-failures li[b-bu1hf8yruo] {
    display: flex;
    gap: var(--uni-space-3);
    align-items: flex-start;
    padding: var(--uni-space-3) var(--uni-space-4);
    border-bottom: 1px solid var(--uni-color-border);
}

.cmp-failures li:last-child[b-bu1hf8yruo] { border-bottom: 0; }

.cmp-failures li > strong[b-bu1hf8yruo] { min-width: 2.5rem; text-align: right; }

.cmp-failures li > div[b-bu1hf8yruo] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.cmp-failure-explain[b-bu1hf8yruo] { color: var(--uni-color-text); }

.cmp-failure-raw[b-bu1hf8yruo] {
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
    overflow-wrap: anywhere;
}

.cmp-cost > div[b-bu1hf8yruo] { flex-wrap: wrap; }

.cmp-cost strong[b-bu1hf8yruo] { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; margin-left: auto; }
.cmp-cost strong > span[b-bu1hf8yruo] { display: block; }

.cmp-cost strong small[b-bu1hf8yruo] {
    font-weight: 400;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
    overflow-wrap: anywhere;
}

/* CUT 5J / J01 — "Rastrear resultados": seção opcional da Mensagem, mesma gramática das seções de audiência. */
.cmp-tracking[b-bu1hf8yruo] { display: grid; gap: var(--uni-space-3); margin-top: var(--uni-space-4); }
.cmp-tracking-button[b-bu1hf8yruo] { display: grid; gap: var(--uni-space-2); padding: var(--uni-space-3); border: 1px solid var(--crm-color-border); border-radius: var(--crm-radius-md); }

/* CUT 6T — status compacto do Pixel na seção "Rastrear resultados" (aponta para a source of truth). */
.cmp-pixel-status[b-bu1hf8yruo] { display: grid; gap: 2px; padding: var(--uni-space-2) var(--uni-space-3); border: 1px dashed var(--crm-color-border); border-radius: var(--crm-radius-md); }
.cmp-pixel-status-label[b-bu1hf8yruo] { font-size: var(--uni-font-size-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--crm-color-text-muted); }
.cmp-pixel-status-value[b-bu1hf8yruo] { display: inline-flex; align-items: center; gap: var(--uni-space-1); font-size: var(--uni-font-size-sm); font-weight: 600; color: var(--crm-color-text); }
.cmp-pixel-status-value[b-bu1hf8yruo]  .crm-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.cmp-pixel-status-value.is-ok[b-bu1hf8yruo] { color: var(--crm-color-success); }
/* Owner (Passo 12): não verificado / não detectado com ícone de alerta e cor de aviso (contraste AA no fundo claro). */
.cmp-pixel-status-value.is-pending[b-bu1hf8yruo], .cmp-pixel-status-value.is-warn[b-bu1hf8yruo] { color: color-mix(in srgb, var(--uni-color-warning) 65%, var(--uni-color-text)); }
.cmp-pixel-status .cmp-link[b-bu1hf8yruo] { justify-self: start; }
/* /Components/Crm/Contacts/ContactImportWizard.razor.rz.scp.css */
/* UNICHAT-CONTACT-IMPORT-01 — estilos próprios do assistente.

   FU-03 — o que ESTA folha deixou de fazer: não desenha mais o modal (era `.import-wizard` com
   largura própria — agora é o `UniModal Size="Lg"`), não desenha mais a régua de etapas (era
   `.import-steps`, três caixas com `font-size:12px` e `border-radius:7px`, ambos fora da escada
   — agora é o `UniStepper`), e não repete rótulo/dica de campo (era `.import-hint` /
   `.import-file-hint` — agora é `.uni-field-hint`, a peça canônica).

   Sobrou só o que é específico deste fluxo, e todo valor vem da escada de VL-01/VL-05. */

.import-form[b-8ll9361zwr] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-5);
}

/* Bloco temático do formulário. VL: "branco é estrutura" — o que separa as seções é o respiro,
   e a linha só existe entre elas, nunca em volta de cada uma. */
.import-section[b-8ll9361zwr] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
}

.import-section + .import-section[b-8ll9361zwr] {
    padding-top: var(--uni-space-5);
    border-top: 1px solid var(--uni-color-border);
}

.import-section > h3[b-8ll9361zwr] {
    margin: 0;
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    color: var(--uni-color-text);
}

/* Ação secundária de dentro de uma seção (reanalisar, baixar rejeitados): alinhada à esquerda,
   nunca esticada — quem ocupa a largura toda é o rodapé do modal. */
.import-section-action[b-8ll9361zwr] {
    display: flex;
}

/* D1 (PRE-PRODUCTION-CORRECTIONS-01) — a escolha de arquivo é o UniFilePicker canônico;
   .import-file/.import-file-trigger/.import-file-name saíram do markup. */

.import-summary-grid[b-8ll9361zwr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--uni-space-2);
}

.import-summary-grid > div[b-8ll9361zwr] {
    display: grid;
    gap: var(--uni-space-1);
    padding: var(--uni-space-3);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-neutral-soft);
    border: 1px solid var(--uni-color-border);
    text-align: center;
}

.import-summary-grid strong[b-8ll9361zwr] {
    font-size: var(--uni-font-size-xl);
    font-variant-numeric: tabular-nums;
}

.import-summary-grid span[b-8ll9361zwr] {
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-text-muted);
}

/* Os três tons vêm dos tokens semânticos: os hexadecimais que estavam aqui (#128659, #b45309,
   #c62c38) não tinham par no tema escuro. */
.import-summary-good strong[b-8ll9361zwr] { color: var(--uni-color-success); }
.import-summary-warn strong[b-8ll9361zwr] { color: var(--uni-color-warning); }
.import-summary-bad strong[b-8ll9361zwr] { color: var(--uni-color-danger); }

.import-problems-table[b-8ll9361zwr] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--uni-font-size-xs);
}

.import-problems-table th[b-8ll9361zwr],
.import-problems-table td[b-8ll9361zwr] {
    padding: var(--uni-space-2) var(--uni-space-3);
    border-bottom: 1px solid var(--uni-color-border);
    text-align: left;
}

.import-problems-table th[b-8ll9361zwr] {
    color: var(--uni-color-text-muted);
    font-weight: 600;
}

/* UNICHAT-POST-CAMPAIGN-OPERATIONAL-HARDENING-20260910-01 / BUG-09 — escolha explícita da aba. */
.import-sheets[b-8ll9361zwr] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
}

.import-sheet[b-8ll9361zwr] {
    display: flex;
    align-items: center;
    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-md);
    cursor: pointer;
}

.import-sheet.is-selected[b-8ll9361zwr] { border-color: var(--uni-color-primary); }
.import-sheet.is-empty[b-8ll9361zwr] { opacity: .55; cursor: not-allowed; }
.import-sheet-name[b-8ll9361zwr] { flex: 1; font-weight: 600; }
.import-sheet-rows[b-8ll9361zwr] { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-sm); }
/* /Components/Crm/Onboarding/UniChatOnboardingChecklist.razor.rz.scp.css */
/* OS-12 / UNICHAT-DASHBOARD-VISUAL-ASSISTED-CONVERGENCE-01 — faixa de retomada da configuração.

   Altura mínima deliberada: a faixa mede uma linha de controle (42px de conteúdo dentro do
   respiro), não um card. Ela informa e sai da frente — a primeira dobra pertence aos KPIs. */

.crm-onboarding-strip[b-elrykyy0v9] {
    display: flex;
    align-items: center;
    gap: var(--uni-space-4);
    padding: var(--uni-space-2) var(--uni-space-4);
    border: 1px solid var(--crm-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--crm-color-surface);
}

.crm-onboarding-strip-text[b-elrykyy0v9] {
    display: flex;
    align-items: baseline;
    gap: var(--uni-space-2);
    flex: 0 1 auto;
    min-width: 0;
}

.crm-onboarding-strip-text strong[b-elrykyy0v9] {
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    color: var(--crm-color-text);
    white-space: nowrap;
}

.crm-onboarding-strip-text > span[b-elrykyy0v9] {
    font-size: var(--uni-font-size-xs);
    color: var(--crm-color-text-muted);
    white-space: nowrap;
}

/* Segmentos reais, um por etapa. Crescem para ocupar o vão entre o texto e o botão, então a
   faixa respira em telas largas sem ganhar altura. */
.crm-onboarding-strip-track[b-elrykyy0v9] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 80px;
}

.crm-onboarding-strip-seg[b-elrykyy0v9] {
    flex: 1 1 0;
    height: 6px;
    min-width: 12px;
    max-width: 56px;
    border-radius: var(--uni-radius-pill);
    background: var(--uni-color-neutral-soft);
}

.crm-onboarding-strip-seg.done[b-elrykyy0v9] { background: var(--crm-color-primary); }

/* Adiada e aguardando terceiro não são "pendentes comuns": o tom âmbar diz que existe uma
   decisão ou uma espera por trás, sem exigir legenda. */
.crm-onboarding-strip-seg.postponed[b-elrykyy0v9],
.crm-onboarding-strip-seg.awaiting[b-elrykyy0v9] {
    background: color-mix(in srgb, var(--crm-color-warning) 45%, var(--uni-color-neutral-soft));
}

@media (max-width: 767px) {
    /* No celular a faixa quebra em duas linhas em vez de espremer os segmentos: texto e botão
       ficam legíveis, e a trilha atravessa a largura toda. */
    .crm-onboarding-strip[b-elrykyy0v9] {
        flex-wrap: wrap;
        gap: var(--uni-space-2) var(--uni-space-3);
        padding: var(--uni-space-3) var(--uni-space-4);
    }

    .crm-onboarding-strip-text[b-elrykyy0v9] { flex: 1 1 100%; }
    .crm-onboarding-strip-track[b-elrykyy0v9] { order: 3; flex: 1 1 100%; }
    [b-elrykyy0v9] .crm-onboarding-strip > .app-button { flex: 0 0 auto; }
}
/* /Components/Crm/Onboarding/UniChatOnboardingPage.razor.rz.scp.css */
/* UNICHAT-VISUAL-SYSTEM-ASSISTED-CONVERGENCE-01, terceira superfície.
   Nenhuma classe emprestada de outra feature (proibição 1) e nenhum valor fora da escada de
   VL-05 (proibição 3). O stepper e seus estados vivem na primitive (uni-components.css).

   UNICHAT-CUT-6 (polish, item 7) — tudo o que desenha o MIOLO (progresso, card da etapa, "Já
   deixamos pronto", link da Ajuda, formulário) foi para `UniChatOnboardingPanel.razor.css`: desde o
   CUT 5G o miolo é um componente filho (UniChatOnboardingPanel) e o CSS isolado desta página não
   chegava a ele — a página e a aba da Ajuda rendiam o painel sem card, sem respiro e com o marcador
   nativo do <details>. Aqui fica só o que é desta página. */

.crm-onboarding-page[b-wh58knan8r] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-5);
}
/* /Components/Crm/Onboarding/UniChatOnboardingPanel.razor.rz.scp.css */
/* UNICHAT-CUT-6 (polish, item 7) — CSS do miolo de "Primeiros passos", no escopo do COMPONENTE que o
   renderiza. Origem: UniChatOnboardingPage.razor.css (UNICHAT-VISUAL-SYSTEM-ASSISTED-CONVERGENCE-01,
   terceira superfície). Quando o miolo virou componente filho no CUT 5G, o CSS isolado da página
   deixou de alcançá-lo: a página e a aba "Primeiros passos" da Ajuda mostravam o painel cru — sem
   card, sem respiro, com o marcador nativo (preenchido) do <details>. Foi isso que o Owner viu
   como "desalinhado", "colado ao botão" e "chevron preenchido".

   Mesmas proibições do contrato: nenhuma classe emprestada (1), nenhum valor fora da escada de
   VL-05 (3). O stepper e seus estados continuam na primitive (uni-components.css).

   Composição (7B/7C): progresso → card da etapa em foco, CENTRADO (título + selo, explicação curta
   com largura de leitura, CTA separado) → "Já deixamos pronto" recolhido → link da Ajuda como
   metadado. O respiro entre blocos é um só (gap do hub), não margens soltas. */

.crm-onboarding-hub[b-w84noare12] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-5);
}

.crm-onboarding-loading[b-w84noare12] {
    padding: var(--uni-space-5);
    color: var(--crm-color-text-muted);
    font-size: var(--uni-font-size-md);
}

/* ---- Progresso: o stepper É o progresso (OS-04). O contador é metadado discreto. ---- */
.crm-onboarding-progress[b-w84noare12] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
    padding: var(--uni-space-5);
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-color-surface);
}

.crm-onboarding-counter[b-w84noare12] {
    margin: 0;
    text-align: center;
    font-size: var(--uni-font-size-xs);
    color: var(--crm-color-text-muted);
}

/* ---- Card da etapa em foco (OS-07) — centrado (7B) ---- */
.crm-onboarding-panel[b-w84noare12] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--uni-space-3);
    padding: var(--uni-space-6) var(--uni-space-5);
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-color-surface);
    text-align: center;
    /* OS-07 — reserva de altura para o painel não saltar ao trocar de etapa. */
    min-height: 200px;
}

/* OWNER DECISION (2026-09-10) — o selo de estado ao lado do título, no mesmo eixo. Centrado, os
   dois dividem a mesma linha; o selo não estica nem quebra: é rótulo curto de estado. */
.crm-onboarding-panel-head[b-w84noare12] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--uni-space-2) var(--uni-space-3);
    max-width: 100%;
}

.crm-onboarding-panel-head .app-badge[b-w84noare12] {
    flex: 0 0 auto;
    white-space: nowrap;
}

.crm-onboarding-panel h2[b-w84noare12] {
    margin: 0;
    font-size: var(--uni-font-size-xl);
    font-weight: 600;
    line-height: 1.25;
    color: var(--crm-color-text);
}

/* Explicação curta com largura de leitura confortável, centrada com o título. */
.crm-onboarding-panel-description[b-w84noare12] {
    margin: 0;
    max-width: 56ch;
    font-size: var(--uni-font-size-md);
    line-height: 1.5;
    color: var(--crm-color-text-muted);
}

/* Status persistentes (adiado, sem permissão) ficam entre a explicação e a ação, alinhados à
   esquerda por dentro — alerta centrado lê mal — e limitados à mesma largura de leitura. */
.crm-onboarding-panel[b-w84noare12]  .uni-section-alert {
    width: 100%;
    max-width: 56ch;
    text-align: left;
}

.crm-onboarding-locked[b-w84noare12] {
    margin: 0;
    max-width: 56ch;
    font-size: var(--uni-font-size-sm);
    color: var(--crm-color-text-muted);
}

/* CTA bem separado do texto (7C): um degrau a mais da escada, não margem avulsa. */
.crm-onboarding-panel-actions[b-w84noare12] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--uni-space-3);
    margin-top: var(--uni-space-3);
}

/* ---- Conclusão (OS-14) ---- */
.crm-onboarding-done[b-w84noare12] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--uni-space-3);
    padding: var(--uni-space-6) var(--uni-space-5);
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-color-surface);
    text-align: center;
}

.crm-onboarding-done h2[b-w84noare12] {
    margin: 0;
    font-size: var(--uni-font-size-xl);
    font-weight: 600;
    color: var(--crm-color-text);
}

.crm-onboarding-done p[b-w84noare12] {
    margin: 0;
    max-width: 56ch;
    font-size: var(--uni-font-size-md);
    color: var(--crm-color-text-muted);
}

.crm-onboarding-done-icon[b-w84noare12] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--uni-color-success-soft);
    color: var(--crm-color-success);
}

.crm-onboarding-done-icon[b-w84noare12]  .crm-icon {
    width: 24px;
    height: 24px;
}

/* ---- "Já deixamos pronto para você" (OS-09) — recolhido, hierarquia menor que o card ---- */
.crm-onboarding-ready[b-w84noare12] {
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-color-surface);
}

.crm-onboarding-ready > summary[b-w84noare12] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-3);
    padding: var(--uni-space-4) var(--uni-space-5);
    cursor: pointer;
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    color: var(--crm-color-text);
    list-style: none;
}

.crm-onboarding-ready > summary[b-w84noare12]::-webkit-details-marker { display: none; }

/* 7D — chevron VAZADO (traço, não triângulo preenchido), o mesmo desenho do restante do produto;
   gira ao abrir com a transição curta da escada. */
.crm-onboarding-ready > summary[b-w84noare12]::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin: -4px var(--uni-space-1) 0 0;
    border-right: 1.5px solid var(--crm-color-text-muted);
    border-bottom: 1.5px solid var(--crm-color-text-muted);
    transform: rotate(45deg);
    transition: transform 180ms ease;
}

.crm-onboarding-ready[open] > summary[b-w84noare12]::after { transform: rotate(-135deg); margin-top: 4px; }

.crm-onboarding-ready > summary:focus-visible[b-w84noare12] {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

.crm-onboarding-ready ul[b-w84noare12] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-3);
    margin: 0;
    padding: 0 var(--uni-space-5) var(--uni-space-5);
    list-style: none;
}

.crm-onboarding-ready li[b-w84noare12] {
    display: flex;
    align-items: flex-start;
    gap: var(--uni-space-3);
}

.crm-onboarding-ready li strong[b-w84noare12] {
    display: block;
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    color: var(--crm-color-text);
}

.crm-onboarding-ready li p[b-w84noare12] {
    margin: var(--uni-space-1) 0 0;
    font-size: var(--uni-font-size-sm);
    color: var(--crm-color-text-muted);
}

.crm-onboarding-ready-icon[b-w84noare12] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--uni-color-success-soft);
    color: var(--crm-color-success);
}

.crm-onboarding-ready-icon[b-w84noare12]  .crm-icon {
    width: 12px;
    height: 12px;
}

/* D-41 — continuidade para a Ajuda: uma linha, no fim, mesma cor do metadado. O respiro é o gap do hub. */
.crm-onboarding-help[b-w84noare12] {
    margin: 0;
    text-align: center;
    font-size: var(--uni-font-size-sm);
    color: var(--crm-color-text-muted);
}

.crm-onboarding-help a[b-w84noare12] { color: var(--uni-color-primary-soft-text); font-weight: 600; }

/* ---- Formulário de "Empresa e operação" (OS-08) ---- */
.crm-onboarding-form[b-w84noare12] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
}

.crm-onboarding-field[b-w84noare12] {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
}

.crm-onboarding-field > span[b-w84noare12] {
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    color: var(--crm-color-text);
}

.crm-onboarding-form-hint[b-w84noare12] {
    margin: 0;
    font-size: var(--uni-font-size-sm);
    color: var(--crm-color-text-muted);
}

.crm-onboarding-form-error[b-w84noare12] {
    margin: 0;
    font-size: var(--uni-font-size-sm);
    color: var(--crm-color-danger);
}

@media (max-width: 767px) {
    .crm-onboarding-progress[b-w84noare12] { padding: var(--uni-space-4); }
    .crm-onboarding-counter[b-w84noare12] { text-align: left; }
    .crm-onboarding-panel[b-w84noare12] { padding: var(--uni-space-5) var(--uni-space-4); }
    .crm-onboarding-panel-actions[b-w84noare12] { width: 100%; }
    .crm-onboarding-panel-actions[b-w84noare12]  .app-button { flex: 1 1 auto; }
    .crm-onboarding-ready > summary[b-w84noare12] { padding: var(--uni-space-4); }
    .crm-onboarding-ready ul[b-w84noare12] { padding: 0 var(--uni-space-4) var(--uni-space-4); }
}
/* /Components/Crm/Operations/CrmOperationsPage.razor.rz.scp.css */
/* CHAT-OMNI-14 §5.1 — painel operacional.
   Segue as variáveis do tema do CRM; nenhuma cor literal fora das de estado. */

.ops-page[b-evdi87l7hb] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ops-header[b-evdi87l7hb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.ops-eyebrow[b-evdi87l7hb] {
    margin: 0;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .7;
}

.ops-header h1[b-evdi87l7hb] {
    margin: .15rem 0 .35rem;
    font-size: 1.5rem;
}

.ops-header p[b-evdi87l7hb] {
    margin: 0;
    opacity: .8;
}

.ops-muted[b-evdi87l7hb] {
    opacity: .7;
    font-size: .875rem;
    margin: .25rem 0 0;
}

.ops-empty[b-evdi87l7hb] {
    padding: 2rem;
    text-align: center;
    opacity: .75;
    border: 1px dashed var(--crm-border, #d6dae2);
    border-radius: .75rem;
}

/* ---- armazenamento ---- */

.ops-storage[b-evdi87l7hb] {
    border-radius: .75rem;
    padding: .9rem 1.1rem;
    border-left: 4px solid;
}

.ops-storage-label[b-evdi87l7hb] {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .7;
}

.ops-storage strong[b-evdi87l7hb] {
    font-size: 1.05rem;
}

.ops-storage.healthy[b-evdi87l7hb] { border-color: #1f9d55; background: rgba(31, 157, 85, .08); }
.ops-storage.warning[b-evdi87l7hb] { border-color: #b7791f; background: rgba(183, 121, 31, .10); }
.ops-storage.critical[b-evdi87l7hb] { border-color: #c53030; background: rgba(197, 48, 48, .10); }

/* ---- abas ---- */

.ops-tabs[b-evdi87l7hb] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--crm-border, #d6dae2);
    padding-bottom: .5rem;
}

.ops-tabs button[b-evdi87l7hb] {
    background: none;
    border: none;
    padding: .5rem .85rem;
    border-radius: .5rem;
    cursor: pointer;
    font-size: .95rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.ops-tabs button.active[b-evdi87l7hb] {
    background: var(--crm-accent-soft, rgba(45, 108, 223, .12));
    font-weight: 600;
}

.ops-badge[b-evdi87l7hb] {
    background: #c53030;
    color: #fff;
    border-radius: 999px;
    padding: 0 .45rem;
    font-size: .75rem;
    line-height: 1.35;
}

/* ---- tabela ---- */

.ops-table[b-evdi87l7hb] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.ops-table th[b-evdi87l7hb],
.ops-table td[b-evdi87l7hb] {
    text-align: left;
    padding: .6rem .5rem;
    border-bottom: 1px solid var(--crm-border, #e6e9ef);
    vertical-align: middle;
}

.ops-table th[b-evdi87l7hb] {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .7;
}

/* Motivo de falha pode ser longo; trunca na tabela e mostra inteiro no title. */
.ops-reason[b-evdi87l7hb] {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-actions[b-evdi87l7hb] {
    display: flex;
    gap: .4rem;
    white-space: nowrap;
}

/* ---- chips de estado ---- */

.ops-chip[b-evdi87l7hb] {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}

.ops-chip.ok[b-evdi87l7hb] { background: rgba(31, 157, 85, .15); color: #1f7a44; }
.ops-chip.warning[b-evdi87l7hb] { background: rgba(183, 121, 31, .18); color: #8a5a12; }
.ops-chip.danger[b-evdi87l7hb] { background: rgba(197, 48, 48, .15); color: #9b2c2c; }
.ops-chip.muted[b-evdi87l7hb] { background: rgba(120, 130, 145, .15); opacity: .85; }

/* ---- botões ---- */

.ops-btn[b-evdi87l7hb] {
    border: 1px solid var(--crm-border, #d6dae2);
    background: transparent;
    border-radius: .5rem;
    padding: .45rem .9rem;
    cursor: pointer;
    font-size: .9rem;
}

.ops-btn.small[b-evdi87l7hb] { padding: .3rem .6rem; font-size: .8rem; }
.ops-btn.primary[b-evdi87l7hb] { background: var(--crm-accent, #2d6cdf); color: #fff; border-color: transparent; }
.ops-btn.danger[b-evdi87l7hb] { background: #c53030; color: #fff; border-color: transparent; }
.ops-btn:disabled[b-evdi87l7hb] { opacity: .5; cursor: not-allowed; }

/* ---- alertas ---- */

.ops-alert[b-evdi87l7hb] {
    padding: .7rem .9rem;
    border-radius: .6rem;
    font-size: .9rem;
}

.ops-alert.error[b-evdi87l7hb] { background: rgba(197, 48, 48, .12); color: #9b2c2c; }
.ops-alert.success[b-evdi87l7hb] { background: rgba(31, 157, 85, .12); color: #1f7a44; }

/* ---- confirmação ---- */

.ops-modal-backdrop[b-evdi87l7hb] {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 30, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1000;
}

.ops-modal[b-evdi87l7hb] {
    background: var(--crm-surface, #fff);
    border-radius: .85rem;
    padding: 1.4rem;
    max-width: 32rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.ops-modal h2[b-evdi87l7hb] { margin: 0; font-size: 1.15rem; }
.ops-modal p[b-evdi87l7hb] { margin: 0; opacity: .85; }

.ops-modal label[b-evdi87l7hb] {
    font-size: .8rem;
    opacity: .8;
}

.ops-input[b-evdi87l7hb] {
    width: 100%;
    padding: .5rem .7rem;
    border-radius: .5rem;
    border: 1px solid var(--crm-border, #d6dae2);
    font-size: .9rem;
}

.ops-modal-actions[b-evdi87l7hb] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .25rem;
}

/* UNICHAT-MOBILE-UX-CONFORMANCE-01 (Phase B): a cardificação das tabelas passou para o
   primitivo compartilhado .uni-table-cardify (uni-components.css), com labels reais. */
@media (max-width: 1023px) {
    .ops-reason[b-evdi87l7hb] { max-width: none; white-space: normal; }
}

@media (max-width: 767px) {
    /* Contrato O/L: footer de modal empilha com primário embaixo, botões 100%. */
    .ops-modal-actions[b-evdi87l7hb] { flex-direction: column-reverse; align-items: stretch; }
    .ops-modal-actions > *[b-evdi87l7hb] { width: 100%; }
}

/* UNICHAT-MOBILE-UX-ARCHITECTURE-01 (B6) */
@media (max-width: 1023px) { .ops-row-tappable[b-evdi87l7hb] { cursor: pointer; } .ops-storage[b-evdi87l7hb] { padding: 10px 14px; } }
/* /Components/Crm/Shared/UniPager.razor.rz.scp.css */
/* OR-7 / VL-34 — paginação canônica.
   Folha própria do componente: nenhuma regra entra em `uni-components.css`, que está sendo tocado
   por um corte em paralelo. */

.uni-pager[b-i1tkuw60ya] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-3);
    flex-wrap: wrap;
    padding-top: var(--uni-space-2);
}

/* O total à esquerda: é o que responde "de quanta coisa estamos falando". */
.uni-pager-status[b-i1tkuw60ya] {
    display: flex;
    align-items: baseline;
    gap: var(--uni-space-1);
    margin: 0;
    min-width: 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
}

.uni-pager-status strong[b-i1tkuw60ya] {
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.uni-pager-controls[b-i1tkuw60ya] {
    display: flex;
    align-items: center;
    gap: var(--uni-space-4);
    margin-left: auto;
}

/* VL-34 — seletor SEM chrome: só texto e a seta, largura do conteúdo. Um seletor com a largura de
   um campo de formulário é proibição explícita da regra. */
.uni-pager-size[b-i1tkuw60ya] {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-2);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
}

.uni-pager-size select[b-i1tkuw60ya] {
    border: 0;
    background: transparent;
    padding: 0 var(--uni-space-1) 0 0;
    color: var(--uni-color-text);
    font: inherit;
    font-size: var(--uni-font-size-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.uni-pager-size select:focus-visible[b-i1tkuw60ya] {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--uni-radius-xs);
}

.uni-pager-nav[b-i1tkuw60ya] {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
}

/* VL-34 — setas circulares de 34px. Nunca botões de texto. */
.uni-pager-btn[b-i1tkuw60ya] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-pill);
    background: var(--uni-color-surface);
    color: var(--uni-color-text);
    cursor: pointer;
}

.uni-pager-btn:hover:not(:disabled)[b-i1tkuw60ya] {
    border-color: var(--uni-color-primary);
    color: var(--uni-color-primary);
}

/* VL-34 — desabilitado nunca é oculto: a pessoa precisa ver que a ponta foi alcançada. */
.uni-pager-btn:disabled[b-i1tkuw60ya] {
    opacity: .4;
    cursor: not-allowed;
}

.uni-pager-btn[b-i1tkuw60ya]  .crm-icon {
    width: 16px;
    height: 16px;
}

.uni-pager-jump[b-i1tkuw60ya],
.uni-pager-position[b-i1tkuw60ya] {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-2);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* O campo tem a largura do maior número que vai conter, não a de um campo de formulário. */
.uni-pager-jump input[b-i1tkuw60ya] {
    width: 56px;
    height: 34px;
    padding: 0 var(--uni-space-2);
    border: 1px solid var(--uni-color-border-strong);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
    color: var(--uni-color-text);
    font: inherit;
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* VL-44 — dentro de campo de entrada o realce é o neon azul, não o anel âmbar. */
.uni-pager-jump input:focus[b-i1tkuw60ya] {
    outline: 0;
    border-color: var(--uni-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--uni-color-primary) 22%, transparent);
}

/* As setinhas nativas do number roubam largura e desalinham o dígito; a navegação já tem setas
   próprias, de 34px, que é o alvo de verdade. */
.uni-pager-jump input[b-i1tkuw60ya]::-webkit-outer-spin-button,
.uni-pager-jump input[b-i1tkuw60ya]::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.uni-pager-jump input[type="number"][b-i1tkuw60ya] {
    -moz-appearance: textfield;
    appearance: textfield;
}

@media (max-width: 767px) {
    .uni-pager[b-i1tkuw60ya] { gap: var(--uni-space-2); }
    .uni-pager-controls[b-i1tkuw60ya] { gap: var(--uni-space-3); width: 100%; justify-content: space-between; }
    /* No celular o rótulo do seletor some: o valor e a seta já dizem o que é, e a linha é curta. */
    .uni-pager-size-label[b-i1tkuw60ya] { display: none; }
}

/* UNICHAT-AUTOMATION-AI-KNOWLEDGE-VISUAL-ASSISTED-CONVERGENCE-01 — VL-59 sobre VL-34.

   MEDIDO a 390x844 na Base de conhecimento: as setas mediam 34x34, que é exatamente o que VL-34
   prescreve — e exatamente 10px abaixo do piso de toque de D-38/VL-59.

   As duas regras não brigam: VL-59 diz que o alvo mínimo NÃO obriga o elemento a parecer 44px.
   Aqui a separação é possível, porque a linha do paginador não tem `overflow` recortando nada —
   que era o limite medido que impediu a mesma solução no trilho de abas. O círculo pintado
   continua com os 34px aceitos; só a área que recebe o toque cresce, e só no toque. */

@media (max-width: 767px) {
    .uni-pager-btn[b-i1tkuw60ya] {
        position: relative;
    }

    .uni-pager-btn[b-i1tkuw60ya]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-thgvsqmakm],
.components-reconnect-repeated-attempt-visible[b-thgvsqmakm],
.components-reconnect-failed-visible[b-thgvsqmakm],
.components-pause-visible[b-thgvsqmakm],
.components-resume-failed-visible[b-thgvsqmakm],
.components-rejoining-animation[b-thgvsqmakm] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-thgvsqmakm],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-thgvsqmakm],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-thgvsqmakm],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-thgvsqmakm],
#components-reconnect-modal.components-reconnect-retrying[b-thgvsqmakm],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-thgvsqmakm],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-thgvsqmakm],
#components-reconnect-modal.components-reconnect-failed[b-thgvsqmakm],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-thgvsqmakm] {
    display: block;
}


/* UNICHAT-RESIDUAL-PRODUCT-SURFACE-VISUAL-COMPLETION-01 (RS-45) — a ficha vinha do template do
   Blazor com `background-color: white`, `#6b9ed2` no botão e `#0087ff` na animação: três cores
   claras fixas, nenhuma com par escuro. No tema escuro este diálogo abria BRANCO por cima do
   produto inteiro — e ele abre toda vez que o circuito cai, ou seja, é o defeito de tema escuro
   com maior chance de ser visto.

   Folha com escopo (`.razor.css`) enxerga os tokens de `:root` normalmente, então tokenizar aqui
   resolve os dois temas sem uma segunda regra. A largura fixa ganhou teto de viewport: 20rem mais
   2rem de padding dos dois lados passava de 400px no celular. */
#components-reconnect-modal[b-thgvsqmakm] {
    background-color: var(--uni-color-surface);
    color: var(--uni-color-text);
    width: min(20rem, calc(100vw - 2rem));
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    box-shadow: var(--uni-shadow-lg);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-thgvsqmakm 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-thgvsqmakm 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-thgvsqmakm 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-thgvsqmakm]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-thgvsqmakm 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-thgvsqmakm {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-thgvsqmakm {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-thgvsqmakm {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-thgvsqmakm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-thgvsqmakm] {
    margin: 0;
    text-align: center;
}

/* O botão NÃO recebe a classe `.app-button`: este seletor tem id (1,0,1) mais o atributo de
   escopo, e venceria a família canônica (0,1,0) em silêncio — a marcação pareceria convergida e
   a aparência continuaria a do template. A ficha é convergida aqui, onde ela realmente manda. */
#components-reconnect-modal button[b-thgvsqmakm] {
    min-height: 42px;
    padding: 0 var(--uni-space-4);
    border: 1px solid var(--uni-color-primary);
    border-radius: var(--uni-radius-md);
    background-color: var(--uni-color-primary);
    color: var(--uni-color-on-primary);
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    cursor: pointer;
}

    #components-reconnect-modal button:hover[b-thgvsqmakm] {
        background-color: var(--uni-color-primary-hover);
        border-color: var(--uni-color-primary-hover);
    }

    #components-reconnect-modal button:focus-visible[b-thgvsqmakm] {
        outline: 2px solid var(--uni-color-focus-ring);
        outline-offset: 2px;
    }

.components-rejoining-animation[b-thgvsqmakm] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-thgvsqmakm] {
        position: absolute;
        border: 3px solid var(--uni-color-primary);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-thgvsqmakm 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-thgvsqmakm] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-thgvsqmakm {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/SelfServiceCheckoutPage.razor.rz.scp.css */
/* UNICHAT-SELF-SERVICE-COMMERCE-01 — CSS isolado da página de contratação.
   Reaproveita os controles já existentes (app-control, app-button, app-field-label) e não
   introduz identidade visual nova no formulário.

   UNICHAT-CUT-5K — COMMERCIAL LAUNCH EXPERIENCE: continuação da landing.
   - A casca é a área rolável (html/body/.travel-shell travam overflow no shell do app — sem isto a
     página não rola com a roda do mouse; mesma correção F9 do acompanhamento).
   - Faixa de marca escura com a paleta da landing (#05070d, azul-elétrico), conteúdo claro com a
     paleta do app onde a pessoa entra depois.
   - Duas colunas no desktop: formulário + resumo do pedido (sticky). O resumo é escolhido por
     CSS :has() — as regras por plano×ciclo são emitidas pelo Razor, ver a tag <style> na página. */

.checkout-shell[b-cibimop2j4] {
    height: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
        radial-gradient(circle at 12% 0%, rgba(28, 126, 214, 0.10), transparent 38%),
        radial-gradient(circle at 92% 100%, rgba(34, 211, 255, 0.08), transparent 40%),
        #f3f6fb;
    color: #1d2a3d;
}

/* ---- faixa de marca (paleta da landing) ---- */
.checkout-brand[b-cibimop2j4] {
    position: relative;
    background:
        radial-gradient(60% 120% at 18% 0%, rgba(0, 132, 214, 0.28), transparent 60%),
        radial-gradient(40% 100% at 88% 100%, rgba(4, 193, 231, 0.18), transparent 60%),
        #05070d;
    border-bottom: 1px solid rgba(0, 168, 253, 0.22);
}

.checkout-brand[b-cibimop2j4]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 179, 254, 0.9) 35%, rgba(71, 216, 255, 0.9) 50%, rgba(0, 179, 254, 0.9) 65%, transparent);
    opacity: .8;
}

.checkout-brand-inner[b-cibimop2j4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 72rem;
    margin: 0 auto;
    padding: 1rem 1.25rem;
}

.checkout-brand-lockup[b-cibimop2j4] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}

.checkout-brand-lockup img:first-child[b-cibimop2j4] {
    filter: drop-shadow(0 0 10px rgba(0, 168, 253, 0.45));
}

.checkout-brand-wordmark[b-cibimop2j4] {
    height: 22px;
    width: auto;
}

.checkout-brand-note[b-cibimop2j4] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .75rem;
    border: 1px solid rgba(0, 168, 253, 0.28);
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    color: #cfe3f5;
}

.checkout-brand-note[b-cibimop2j4]::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.7);
}

/* ---- página ---- */
.checkout-page[b-cibimop2j4] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.checkout-header[b-cibimop2j4] {
    max-width: 46rem;
    margin-bottom: 1.5rem;
}

.checkout-header h1[b-cibimop2j4] {
    margin: 0 0 .5rem;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #0f1b2d;
}

/* O Blazor foca o título na navegação (acessibilidade); o contorno não é um estado visual da página. */
.checkout-header h1:focus[b-cibimop2j4] {
    outline: none;
}

.checkout-eyebrow[b-cibimop2j4] {
    margin: 0 0 .5rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #0a8ff0;
}

.checkout-lead[b-cibimop2j4] {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #4a5b70;
}

.checkout-alert[b-cibimop2j4] {
    margin: 0 0 1.5rem;
    padding: .75rem 1rem;
    border-radius: .5rem;
    border: 1px solid rgba(220, 53, 69, .35);
    background: rgba(220, 53, 69, .08);
}

.checkout-empty[b-cibimop2j4] {
    padding: 1.5rem;
    border-radius: .5rem;
    border: 1px dashed currentColor;
    opacity: .75;
}

/* ---- duas colunas ---- */
.checkout-layout[b-cibimop2j4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .checkout-layout[b-cibimop2j4] {
        grid-template-columns: minmax(0, 1fr) 20rem;
        gap: 2rem;
    }

    .checkout-summary[b-cibimop2j4] {
        position: sticky;
        top: 1.25rem;
    }
}

.checkout-form[b-cibimop2j4] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.checkout-page .checkout-fieldset[b-cibimop2j4] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    padding: 1.25rem 1.5rem 1.5rem;
    background: #fff;
    border: 1px solid #e3e9f2;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(21, 34, 56, 0.05);
}

.checkout-fieldset legend[b-cibimop2j4] {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    padding: 0 .5rem;
    font-weight: 700;
    color: #0f1b2d;
}

.checkout-step[b-cibimop2j4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #0a8ff0;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.checkout-cycles[b-cibimop2j4] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.checkout-page .checkout-choice[b-cibimop2j4] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1rem;
    background: #fafbfd;
    border: 1px solid #dbe3ee;
    border-radius: .625rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.checkout-plans[b-cibimop2j4] {
    display: grid;
    gap: .75rem;
}

.checkout-page .checkout-plan[b-cibimop2j4] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem 1.125rem;
    background: #fafbfd;
    border: 1px solid #dbe3ee;
    border-radius: .75rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.checkout-page .checkout-plan input[b-cibimop2j4] {
    margin-top: .3rem;
}

.checkout-page .checkout-plan:has(input:checked)[b-cibimop2j4],
.checkout-page .checkout-choice:has(input:checked)[b-cibimop2j4] {
    border-color: #1c7ed6;
    background: #eaf3fd;
    box-shadow: 0 0 0 1px #1c7ed6;
}

.checkout-plan-body[b-cibimop2j4] {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 0;
    flex: 1;
}

.checkout-plan-head[b-cibimop2j4] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
}

.checkout-plan-name[b-cibimop2j4] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0f1b2d;
}

.checkout-plan-prices[b-cibimop2j4] {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
}

.checkout-plan-price[b-cibimop2j4] {
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
    color: #4a5b70;
    /* O preço do ciclo escolhido fica opaco (regra :has emitida pelo Razor); o outro, apagado. */
    opacity: .55;
    transition: opacity .15s ease;
}

.checkout-plan-price strong[b-cibimop2j4] {
    color: #0f1b2d;
}

.checkout-plan-description[b-cibimop2j4] {
    font-size: .875rem;
    color: #4a5b70;
}

.checkout-plan-limits[b-cibimop2j4] {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: .25rem;
}

.checkout-plan-limit[b-cibimop2j4] {
    display: inline-flex;
    gap: .3rem;
    padding: .25rem .625rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #dbe3ee;
    font-size: .8125rem;
    color: #4a5b70;
}

.checkout-plan-limit b[b-cibimop2j4] {
    color: #0f1b2d;
}

.checkout-hint[b-cibimop2j4] {
    margin: 0;
    font-size: .8125rem;
    color: #5b6b80;
}

.checkout-submit[b-cibimop2j4] {
    align-self: flex-start;
}

/* ---- resumo do pedido ---- */
.checkout-summary-card[b-cibimop2j4] {
    padding: 1.25rem 1.375rem;
    background: #fff;
    border: 1px solid #e3e9f2;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(21, 34, 56, 0.08);
}

.checkout-summary-title[b-cibimop2j4] {
    margin: 0 0 .75rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #0a8ff0;
}

.checkout-summary-option[b-cibimop2j4] {
    display: none;
}

.checkout-summary-plan[b-cibimop2j4] {
    margin: 0;
    color: #4a5b70;
}

.checkout-summary-plan strong[b-cibimop2j4] {
    color: #0f1b2d;
}

.checkout-summary-price[b-cibimop2j4] {
    margin: .25rem 0 .75rem;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #0f1b2d;
    font-variant-numeric: tabular-nums;
}

.checkout-summary-price span[b-cibimop2j4] {
    margin-left: .125rem;
    font-size: .9375rem;
    font-weight: 600;
    color: #4a5b70;
}

.checkout-summary-limits[b-cibimop2j4] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .375rem;
    font-size: .875rem;
    color: #4a5b70;
}

.checkout-summary-limits li[b-cibimop2j4]::before {
    content: "";
    display: inline-block;
    width: .375rem;
    height: .375rem;
    margin: 0 .5rem .125rem 0;
    border-radius: 50%;
    background: #0a8ff0;
}

.checkout-summary-limits b[b-cibimop2j4] {
    color: #0f1b2d;
}

.checkout-summary-empty[b-cibimop2j4] {
    margin: 0;
    font-size: .875rem;
    color: #4a5b70;
}

.checkout-summary-notes[b-cibimop2j4] {
    margin: 1rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid #e3e9f2;
    list-style: none;
    display: grid;
    gap: .375rem;
    font-size: .8125rem;
    color: #5b6b80;
}

@media (max-width: 1023px) {
    /* No empilhamento, o resumo vem depois do formulário e não fica preso ao topo. */
    .checkout-summary[b-cibimop2j4] {
        order: 2;
    }
}

@media (max-width: 767px) {
    .checkout-page[b-cibimop2j4] {
        padding: 1.5rem 1rem 3rem;
    }

    .checkout-header h1[b-cibimop2j4] {
        font-size: 1.625rem;
    }

    .checkout-page .checkout-fieldset[b-cibimop2j4] {
        padding: 1rem 1rem 1.25rem;
    }

    .checkout-submit[b-cibimop2j4] {
        align-self: stretch;
        width: 100%;
    }
}

/* UNICHAT-COMMERCE-FIRST-ACCESS-01 — o campo causador do erro é apontado onde ele está. */
.checkout-fieldset.is-invalid[b-cibimop2j4],
.app-control.is-invalid[b-cibimop2j4] {
    border-color: rgba(220, 53, 69, .7);
    box-shadow: 0 0 0 1px rgba(220, 53, 69, .35);
}

.checkout-field-error[b-cibimop2j4] {
    margin: 0;
    font-size: .875rem;
    color: #b42318;
}

.app-field-label small[b-cibimop2j4] {
    font-weight: 400;
    opacity: .7;
}

/* FINAL COMMERCIAL AUTHORITY — Enterprise não é um radio; é um caminho paralelo ao checkout. Mesma
   moldura dos planos para ler como "a quarta opção", sem cursor de seleção. */
.checkout-plan-enterprise[b-cibimop2j4] {
    cursor: default;
}

.checkout-enterprise-cta[b-cibimop2j4] {
    align-self: flex-start;
    margin-top: .25rem;
    font-weight: 600;
    text-decoration: underline;
}

.checkout-plan-enterprise .checkout-plan-price[b-cibimop2j4] {
    opacity: 1;
}
/* /Components/Pages/SelfServiceCheckoutStatusPage.razor.rz.scp.css */
/* UNICHAT-SELF-SERVICE-COMMERCE-01 — CSS isolado do acompanhamento da contratação.
   UNICHAT-CUT-5H (F3/F4) — integração visual mínima com a identidade do UniChat: marca no topo,
   superfície clara com card canônico, etapas e atividade na paleta do produto. Não é redesenho de
   marketing; a mesma casca é usada no /contratar. */

/* UNICHAT-CUT-5H (F9) — o shell do app trava a rolagem do documento (html, body { overflow: hidden }
   em app.css, para o chat ocupar a janela). Numa tela baixa isso cortava o card sem deixar rolar.
   Aqui a própria casca é a área rolável: a identidade não muda e nada fica inacessível. */
.checkout-shell[b-ovh37b06ma] {
    height: 100%;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 100dvh;
    background:
        radial-gradient(circle at 12% 0%, rgba(28, 126, 214, 0.10), transparent 38%),
        radial-gradient(circle at 92% 100%, rgba(34, 211, 255, 0.08), transparent 40%),
        #f3f6fb;
    color: #1d2a3d;
}

.checkout-brand[b-ovh37b06ma] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 46rem;
    margin: 0 auto;
    padding: 1.25rem 1.25rem .5rem;
}

.checkout-brand-lockup[b-ovh37b06ma] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}

.checkout-brand-wordmark[b-ovh37b06ma] {
    height: 22px;
    width: auto;
}

.checkout-brand-note[b-ovh37b06ma] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
    color: #526071;
}

.checkout-brand-note[b-ovh37b06ma]::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #2f9e44;
}

.checkout-status-page[b-ovh37b06ma] {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1rem 1.25rem 4rem;
}

.checkout-status-card[b-ovh37b06ma] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 2rem;
    background: #fff;
    border: 1px solid #e3e9f2;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(21, 34, 56, 0.08);
}

.checkout-status-eyebrow[b-ovh37b06ma] {
    margin: 0;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1c7ed6;
}

.checkout-status-card h1[b-ovh37b06ma] {
    margin: -.75rem 0 0;
    font-size: 1.75rem;
    line-height: 1.2;
    color: #152238;
}

/* O Blazor foca o título na navegação (acessibilidade); o contorno não deve piscar. */
.checkout-status-card h1:focus[b-ovh37b06ma] {
    outline: none;
}

.checkout-status-lead[b-ovh37b06ma] {
    margin: -.5rem 0 0;
    color: #3d4b5f;
}

.checkout-steps[b-ovh37b06ma] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.checkout-step[b-ovh37b06ma] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem .75rem;
    border-radius: 10px;
    background: #f5f7fb;
    color: #7a8699;
    font-size: .875rem;
    font-weight: 600;
}

.checkout-step-mark[b-ovh37b06ma] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    border: 2px solid #c7d0dd;
    font-size: .75rem;
    line-height: 1;
}

.checkout-step.is-current[b-ovh37b06ma] {
    background: #eaf3fd;
    color: #155fa6;
}

.checkout-step.is-current .checkout-step-mark[b-ovh37b06ma] {
    border-color: #1c7ed6;
    border-top-color: transparent;
    animation: checkout-spin-b-ovh37b06ma 1s linear infinite;
}

/* F11 — estado verdadeiro: o sistema terminou a parte dele e espera uma ação do cliente. Sem
   animação, para não sugerir trabalho em andamento. */
.checkout-step.is-waiting[b-ovh37b06ma] {
    background: #fff6e6;
    color: #8a5a00;
}

.checkout-step.is-waiting .checkout-step-mark[b-ovh37b06ma] {
    border-color: #d99100;
    color: #8a5a00;
    animation: none;
}

.checkout-step.is-waiting[b-ovh37b06ma] {
    flex-wrap: wrap;
    row-gap: .125rem;
}

.checkout-step-note[b-ovh37b06ma] {
    flex-basis: 100%;
    padding-left: calc(1.375rem + .5rem);
    font-size: .6875rem;
    font-weight: 500;
    opacity: .85;
}

@media (max-width: 767px) {
    /* No celular a etapa já é uma coluna: a nota vai embaixo do rótulo, sem quebra por largura. */
    .checkout-step.is-waiting[b-ovh37b06ma] {
        flex-wrap: nowrap;
    }

    .checkout-step-note[b-ovh37b06ma] {
        flex-basis: auto;
        padding-left: 0;
        text-align: center;
        white-space: nowrap;
    }
}

.checkout-step.is-done[b-ovh37b06ma] {
    background: #ebf8ee;
    color: #256a35;
}

.checkout-step.is-done .checkout-step-mark[b-ovh37b06ma] {
    border-color: #2f9e44;
    background: #2f9e44;
    color: #fff;
}

.checkout-activity[b-ovh37b06ma] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    border-radius: 12px;
    background: #eaf3fd;
    color: #155fa6;
    font-weight: 600;
}

.checkout-activity.is-waiting[b-ovh37b06ma] {
    background: #fff8e6;
    color: #7a5a00;
    font-weight: 500;
}

.checkout-spinner[b-ovh37b06ma] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(28, 126, 214, 0.25);
    border-top-color: #1c7ed6;
    border-radius: 50%;
    animation: checkout-spin-b-ovh37b06ma .8s linear infinite;
}

.checkout-pulse[b-ovh37b06ma] {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f59f00;
    animation: checkout-pulse-b-ovh37b06ma 1.6s ease-in-out infinite;
}

@keyframes checkout-spin-b-ovh37b06ma {
    to { transform: rotate(360deg); }
}

@keyframes checkout-pulse-b-ovh37b06ma {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.75); }
}

@media (prefers-reduced-motion: reduce) {
    .checkout-spinner[b-ovh37b06ma],
    .checkout-step.is-current .checkout-step-mark[b-ovh37b06ma] {
        animation-duration: 2.4s;
    }

    .checkout-pulse[b-ovh37b06ma] {
        animation: none;
    }
}

.checkout-status-facts[b-ovh37b06ma] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
    width: 100%;
    margin: 0;
    padding: 1.25rem;
    border: 1px solid #e3e9f2;
    border-radius: 12px;
    background: #fafbfd;
}

.checkout-status-facts dt[b-ovh37b06ma] {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b778a;
}

.checkout-status-facts dd[b-ovh37b06ma] {
    margin: .25rem 0 0;
    font-weight: 600;
    color: #152238;
}

.checkout-status-actions[b-ovh37b06ma] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
}

.checkout-status-next[b-ovh37b06ma] {
    margin: 0;
    color: #253247;
}

.checkout-hint[b-ovh37b06ma] {
    margin: 0;
    font-size: .875rem;
    color: #5c6879;
}

.checkout-status-alert[b-ovh37b06ma] {
    width: 100%;
    margin: 0;
    padding: .875rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(245, 159, 0, .45);
    background: #fff8e6;
    color: #5f4600;
}

.visually-hidden[b-ovh37b06ma] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 767px) {
    .checkout-brand[b-ovh37b06ma] {
        padding: 1rem 1rem .25rem;
    }

    .checkout-status-page[b-ovh37b06ma] {
        padding: .75rem 1rem 3rem;
    }

    .checkout-status-card[b-ovh37b06ma] {
        padding: 1.25rem;
        border-radius: 14px;
    }

    .checkout-status-card h1[b-ovh37b06ma] {
        font-size: 1.5rem;
    }

    .checkout-step[b-ovh37b06ma] {
        flex-direction: column;
        gap: .25rem;
        padding: .5rem .25rem;
        font-size: .75rem;
        text-align: center;
    }

    .checkout-status-actions .app-button[b-ovh37b06ma] {
        align-self: stretch;
        text-align: center;
    }
}