/* CT11-392: acompanhamento usa botão, etiqueta e faixa já existentes.
   Repouso; hover e foco; ativo; desabilitado com razão; carregando; erro. */
.orion-follow-control { min-width: 0; }
/* AJ-006 — botão Seguir/Seguindo da proposta: Seguir é branco, borda de campo, texto de ação; Seguindo é
   verde-mar (fundo, borda e texto) com ícone de visto e aria-pressed="true". Altura 36 px (44 px onde há toque). */
.orion-follow-control [data-follow-button] {
    --bs-btn-bg: var(--orion-color-surface);
    --bs-btn-color: var(--orion-color-action);
    --bs-btn-border-color: var(--orion-color-field-border);
    --bs-btn-hover-bg: var(--orion-color-brand-tint);
    --bs-btn-hover-color: var(--orion-color-action);
    --bs-btn-hover-border-color: var(--orion-color-field-border);
    --bs-btn-active-bg: var(--orion-color-surface-sunken);
    --bs-btn-active-color: var(--orion-color-action);
    --bs-btn-active-border-color: var(--orion-color-field-border);
    display: inline-flex;
    align-items: center;
    gap: var(--orion-space-2);
    min-height: var(--orion-control-height);
}
.orion-follow-control [data-follow-button][aria-pressed="true"],
.orion-follow-control [data-follow-button][aria-pressed="true"]:hover,
.orion-follow-control [data-follow-button][aria-pressed="true"]:active {
    background-color: var(--orion-color-accent-surface);
    border-color: var(--orion-color-accent);
    color: var(--orion-color-accent);
}
.orion-follow-icon { flex: none; inline-size: var(--orion-follow-icon-size); block-size: var(--orion-follow-icon-size); }
.orion-follow-control [data-follow-button]:hover,
.orion-follow-control.is-hover [data-follow-button] { background: var(--orion-color-info-surface); }
.orion-follow-control [data-follow-button]:active,
.orion-follow-control.is-active [data-follow-button] { background: var(--orion-color-surface-sunken); }
/* Modo compacto: no cabeçalho só o botão; o aviso fica para o leitor de tela e só aparece quando é erro. */
.orion-follow-control--compact { display: inline-flex; flex-direction: column; align-items: flex-start; }
.orion-follow-control--compact [data-follow-status]:not([role="alert"]) { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.orion-follow-control--compact [data-follow-list] { display: none; }
.orion-follow-control [aria-disabled="true"] { cursor: not-allowed; }
.orion-follow-control [aria-busy="true"] { cursor: progress; }
.orion-follow-control [role="alert"] { color: var(--orion-color-danger); }
.orion-follow-control [data-follow-explanation] { margin-bottom: var(--orion-space-2); }
/* =============================================================================
   Orion Design System — biblioteca de componentes (RNF-009)  ·  CT11-480

   Carregado DEPOIS de orion-tokens.css. Nenhum valor literal aqui: cor,
   tipografia, espaço, raio, duração e alvo de toque vêm sempre de var(--orion-*).
   Há teste (ComponentLibraryTests) que falha se um hex, um rgb() ou uma duração
   em ms escapar para este arquivo.

   OS SETE ESTADOS
   Todo componente é especificado em repouso, hover, foco, ativo, desabilitado,
   carregando e — quando exibe dados — vazio e erro. Componente sem estado vazio
   definido é incompleto para desenvolvimento.

   Hover e ativo também existem como CLASSE (.is-hover, .is-active) além da
   pseudo-classe. Não é enfeite: é o que permite documentar e fotografar esses
   dois estados na página de referência e na evidência de aceite visual, que de
   outro modo só existiriam com o ponteiro em cima.

   Ordem do arquivo:
     1. Botão            .btn
     2. Campo            .orion-field / .form-control
     3. Seleção          .form-select
     4. Cartão           .orion-card
     5. Etiqueta         .orion-tag
     6. Modal            .orion-modal
     7. Painel           .orion-panel
     8. Faixa de alerta  .orion-banner
     9. Apoio            skeleton, estado vazio, estado de erro
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Botão — .btn

   O mapeamento de cor está em orion-tokens.css. Aqui entram os estados que o
   Bootstrap não cobre: o ativo como classe, o desabilitado com razão em texto e
   o carregando sem o botão mudar de largura (layout que pula sob o dedo do
   operador no cais é clique errado).
   -------------------------------------------------------------------------- */
.btn:hover,
.btn.is-hover {
    --bs-btn-bg: var(--orion-color-action-hover);
    --bs-btn-border-color: var(--orion-color-action-hover);
}

.btn:active,
.btn.is-active {
    --bs-btn-bg: var(--orion-color-action-active);
    --bs-btn-border-color: var(--orion-color-action-active);
}

/* Desabilitado nunca é só o cinza: o porquê vai em texto, no .orion-field-hint
   ao lado. O cursor de "proibido" confirma o que o texto já disse. */
.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: var(--orion-opacity-disabled);
}

/* Carregando: a largura é congelada pelo JS (Orion.setButtonLoading) antes da
   troca do rótulo, e o texto some para leitor de tela só depois do aria-busy. */
.btn.is-loading {
    position: relative;
    cursor: progress;
    pointer-events: none;
}

.btn.is-loading .orion-btn-label {
    visibility: hidden;
}

.btn.is-loading .orion-spinner {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
}

/* O botão não exibe dados: os estados vazio e erro pertencem ao componente que
   os exibe. O botão participa deles como ação de saída — "Cadastrar a primeira
   Pessoa", "Tentar de novo" — e recebe .orion-btn-recovery para nascer com o
   alvo de toque completo mesmo dentro de um bloco estreito. */
.orion-btn-recovery {
    min-block-size: var(--orion-touch-target);
    min-inline-size: var(--orion-touch-target);
}

/* -----------------------------------------------------------------------------
   2. Campo — .orion-field sobre .form-control

   O bloco .orion-field carrega rótulo, campo, dica e mensagem de erro juntos.
   Separá-los é como a mensagem de erro acaba longe do campo que ela explica.
   -------------------------------------------------------------------------- */
.orion-field {
    display: flex;
    flex-direction: column;
    gap: var(--orion-space-1);
    margin-block-end: var(--orion-space-4);
}

.orion-field .form-label {
    margin-block-end: 0;
    font-size: var(--orion-text-body-sm);
    font-weight: var(--orion-weight-medium);
    color: var(--orion-color-heading);
}

.orion-field-hint {
    font-size: var(--orion-text-caption);
    line-height: var(--orion-leading-caption);
    color: var(--orion-color-muted);
}

.form-control:hover,
.form-control.is-hover,
.form-select:hover,
.form-select.is-hover {
    border-color: var(--orion-color-action-hover);
}

/* Ativo do campo é o instante da digitação — a borda assume a cor de ação para
   que, com o anel de foco, fique claro qual campo recebe a tecla. */
.form-control:active,
.form-control.is-active,
.form-control:focus,
.form-select:active,
.form-select.is-active,
.form-select:focus {
    border-color: var(--orion-color-action);
    box-shadow: none;
}

.form-control:disabled,
.form-control.is-disabled,
.form-select:disabled,
.form-select.is-disabled {
    background-color: var(--orion-color-surface-sunken);
    color: var(--orion-color-muted);
    cursor: not-allowed;
}

/* Somente leitura vindo do Protheus (RF-010): cadeado MAIS a razão em texto.
   Desabilitar sem explicar gera chamado de suporte. */
.orion-field--readonly .form-control,
.orion-field--readonly .form-select {
    background-color: var(--orion-color-surface-sunken);
    border-style: dashed;
}

.orion-field--readonly .orion-field-hint::before {
    content: "";
    display: inline-block;
    inline-size: var(--orion-icon-inline);
    block-size: var(--orion-icon-inline);
    margin-inline-end: var(--orion-space-1);
    vertical-align: -0.125em;
    background-color: currentColor;
    mask: var(--orion-icon-mask-cadeado) center / contain no-repeat;
}

/* AJ-124: ícone de sprite dentro de texto corrido (herda a cor do texto). */
.orion-icon-inline {
    inline-size: var(--orion-icon-inline);
    block-size: var(--orion-icon-inline);
    flex: none;
    vertical-align: -0.125em;
}

/* Carregando: o campo que espera valor de integração mostra a altura real da
   linha, não spinner. */
.orion-field.is-loading .form-control,
.orion-field.is-loading .form-select {
    color: transparent;
    background-image: var(--orion-skeleton-gradient);
    background-size: 200% 100%;
    animation: orion-skeleton var(--orion-motion-skeleton) linear infinite;
}

/* Erro: borda, ícone e texto. Nunca só a borda vermelha — daltonismo vermelho
   e verde é a deficiência de cor mais comum entre os operadores. */
.orion-field.is-error .form-control,
.orion-field.is-error .form-select,
.form-control.input-validation-error,
.form-select.input-validation-error {
    border-color: var(--orion-color-danger);
}

/* asp-validation-for sempre renderiza o <span>, mesmo sem erro -- :empty
   evita o ícone (e o gap do flex) aparecerem por padrão em todo formulário
   do app; achado ao testar o CT11-168/170 em 28/09/2026, mas o defeito
   valia para qualquer tela com este componente, não só esta. */
.orion-field-error:empty {
    display: none;
}

.orion-field-error {
    display: flex;
    align-items: flex-start;
    gap: var(--orion-space-1);
    font-size: var(--orion-text-caption);
    line-height: var(--orion-leading-caption);
    color: var(--orion-color-danger);
}

.orion-field-error::before {
    content: "";
    flex: none;
    inline-size: var(--orion-icon-inline);
    block-size: var(--orion-icon-inline);
    margin-block-start: 0.125em;
    background-color: currentColor;
    mask: var(--orion-icon-mask-alerta) center / contain no-repeat;
}

/* Campo vazio de dados é o próprio placeholder, e ele nunca substitui o rótulo:
   placeholder some ao digitar, rótulo fica. */
.orion-field .form-control::placeholder {
    color: var(--orion-color-muted);
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   3. Seleção — .form-select

   Herda hover, foco, ativo, desabilitado e carregando da seção 2, que declara
   os dois seletores juntos. O que é próprio da seleção fica aqui.
   -------------------------------------------------------------------------- */
.form-select {
    background-color: var(--orion-color-surface);
    color: var(--orion-color-body);
}

/* Seleção sem opção alguma: o vazio é da lista, e precisa dizer o que fazer. */
.orion-field.is-empty .form-select {
    color: var(--orion-color-muted);
    font-style: italic;
}

.orion-field.is-empty .orion-field-hint {
    color: var(--orion-color-body);
}

/* -----------------------------------------------------------------------------
   4. Cartão — .orion-card

   Card de lista usa borda, não sombra — sombra por papel, não por hábito.
   Abaixo de 768px a Data Table vira lista destes cartões (RNF-006).
   -------------------------------------------------------------------------- */
.orion-card {
    display: block;
    padding: var(--orion-space-4);
    background-color: var(--orion-color-surface);
    border: 1px solid var(--orion-color-divider);
    border-radius: var(--orion-radius);
    color: var(--orion-color-body);
    text-decoration: none;
    transition: border-color var(--orion-motion) var(--orion-easing),
                background-color var(--orion-motion) var(--orion-easing);
}

.orion-card + .orion-card {
    margin-block-start: var(--orion-space-3);
}

/* Cartão clicável tem alvo de toque inteiro, não só o título dentro dele. */
a.orion-card,
button.orion-card {
    min-block-size: var(--orion-touch-target);
    inline-size: 100%;
    text-align: start;
}

a.orion-card:hover,
button.orion-card:hover,
.orion-card.is-hover {
    border-color: var(--orion-color-action);
    background-color: var(--orion-color-surface-sunken);
}

a.orion-card:active,
button.orion-card:active,
.orion-card.is-active {
    background-color: var(--orion-color-surface-sunken);
    border-color: var(--orion-color-action-active);
}

/* Cartão que contém ações próprias (botões/formulários) não pode ser um <a>
   -- interativo dentro de interativo é inválido. O link do título usa
   .stretched-link do Bootstrap para cobrir o cartão inteiro, e as ações
   ficam acima dele para continuar clicáveis. Mesmo visual de a.orion-card. */
.orion-card--linked {
    position: relative;
    cursor: pointer;
}

.orion-card--linked:hover {
    border-color: var(--orion-color-action);
    background-color: var(--orion-color-surface-sunken);
}

.orion-card--linked:active {
    background-color: var(--orion-color-surface-sunken);
    border-color: var(--orion-color-action-active);
}

.orion-card--linked .orion-card-actions {
    position: relative;
    z-index: 2;
}

.orion-card.is-disabled,
.orion-card[aria-disabled="true"] {
    opacity: var(--orion-opacity-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

/* Carregando: skeleton na altura real da linha, nunca spinner central. */
.orion-card.is-loading {
    pointer-events: none;
}

.orion-card-title {
    font-family: var(--orion-font-heading);
    font-size: var(--orion-text-h4);
    line-height: var(--orion-leading-h4);
    font-weight: var(--orion-weight-semibold);
    color: var(--orion-color-heading);
    margin-block-end: var(--orion-space-1);
}

.orion-card-meta {
    font-size: var(--orion-text-body-sm);
    color: var(--orion-color-muted);
}

/* Vazio e erro do cartão são o bloco .orion-empty e o .orion-state-error da
   seção 9, colocados dentro dele. */
.orion-card.is-empty,
.orion-card.is-error {
    border-style: dashed;
}

.orion-card.is-error {
    border-color: var(--orion-color-danger);
}

/* -----------------------------------------------------------------------------
   5. Etiqueta — .orion-tag

   Dois papéis: situação (só leitura, sempre com rótulo textual) e filtro ativo
   (removível). Todo filtro ativo é visível como chip removível.
   -------------------------------------------------------------------------- */
/* Pílula da proposta de 04/09/2026 (AJ-004): 12 px, 600, 3x8 px, raio 999, sem borda.
   A situação neutra é cinza claro com texto n-600 (6,01:1). O filtro removível (que
   tem o botão X) mantém um filete de 1 px, que ajuda o contraste do chip. */
.orion-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--orion-space-1);
    padding-block: var(--orion-tag-padding-block);
    padding-inline: var(--orion-tag-padding-inline);
    border: 0;
    border-radius: var(--orion-radius-pill);
    background-color: var(--orion-color-neutral-surface);
    color: var(--orion-color-neutral);
    font-size: var(--orion-text-xs);
    font-weight: var(--orion-weight-semibold);
    line-height: var(--orion-leading-overline);
    white-space: nowrap;
    transition: background-color var(--orion-motion-fast) var(--orion-easing),
                box-shadow var(--orion-motion-fast) var(--orion-easing);
}

.orion-tag:has(> .orion-tag-remove) {
    box-shadow: inset 0 0 0 1px var(--orion-color-divider);
}

/* Ponto de 6 px antes do rótulo (situação "Cliente"); a cor só reforça, o texto fica. */
.orion-tag--dot::before {
    content: "";
    inline-size: var(--orion-tag-dot);
    block-size: var(--orion-tag-dot);
    border-radius: var(--orion-radius-pill);
    background-color: currentColor;
}

.orion-tag:hover,
.orion-tag.is-hover {
    box-shadow: inset 0 0 0 1px var(--orion-color-action);
}

.orion-tag:active,
.orion-tag.is-active {
    background-color: var(--orion-color-divider);
}

.orion-tag.is-disabled,
.orion-tag[aria-disabled="true"] {
    opacity: var(--orion-opacity-disabled);
    pointer-events: none;
}

.orion-tag.is-loading {
    color: transparent;
    background-image: var(--orion-skeleton-gradient);
    background-size: 200% 100%;
    animation: orion-skeleton var(--orion-motion-skeleton) linear infinite;
}

/* A lista de filtros vazia não desaparece: ela diz que não há filtro aplicado,
   senão o usuário não sabe se está vendo tudo ou um recorte. */
.orion-tag-list.is-empty,
.orion-tag.is-empty {
    color: var(--orion-color-muted);
    font-style: italic;
}

.orion-tag.is-error {
    box-shadow: inset 0 0 0 1px var(--orion-color-danger);
    color: var(--orion-color-danger);
}

.orion-tag-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--orion-space-2);
}

/* O X de remover é um botão de verdade, com alvo de toque próprio: no celular o
   dedo do conferente não acerta um X de 12px. */
.orion-tag-remove {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--orion-space-5);
    block-size: var(--orion-space-5);
    padding: 0;
    border: 0;
    background: none;
    color: var(--orion-color-muted);
    border-radius: var(--orion-radius-chip);
    cursor: pointer;
}

/* O desenho do X tem 24px; a área que recebe o toque tem 44 (RNF-008). A área
   maior é um pseudo-elemento centrado, e não o botão inteiro, porque um chip de
   44px de altura faria a barra de filtros ocupar o dobro da tela. */
.orion-tag-remove::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    inline-size: var(--orion-touch-target);
    block-size: var(--orion-touch-target);
}

.orion-tag-remove:hover,
.orion-tag-remove.is-hover {
    color: var(--orion-color-danger);
}

/* Situação por cor E rótulo — a cor é redundância, nunca a informação. */
.orion-tag--success { background-color: var(--orion-color-success-surface); color: var(--orion-color-success); }
.orion-tag--warning { background-color: var(--orion-color-warning-surface); color: var(--orion-color-warning); }
.orion-tag--danger  { background-color: var(--orion-color-danger-surface);  color: var(--orion-color-danger); }
.orion-tag--info    { background-color: var(--orion-color-info-surface);    color: var(--orion-color-info); }

/* Destaque (CT11-130): não é situação boa/ruim, é ênfase -- o vínculo
   principal entre vários ativos. Mesmo papel de cor do botão "Seguindo". */
.orion-tag--accent  { background-color: var(--orion-color-accent-surface);  color: var(--orion-color-accent); }

.orion-tag--success:has(> .orion-tag-remove) { box-shadow: inset 0 0 0 1px var(--orion-color-success); }
.orion-tag--warning:has(> .orion-tag-remove) { box-shadow: inset 0 0 0 1px var(--orion-color-warning); }
.orion-tag--danger:has(> .orion-tag-remove)  { box-shadow: inset 0 0 0 1px var(--orion-color-danger); }
.orion-tag--info:has(> .orion-tag-remove)    { box-shadow: inset 0 0 0 1px var(--orion-color-info); }
.orion-tag--accent:has(> .orion-tag-remove)  { box-shadow: inset 0 0 0 1px var(--orion-color-accent); }

/* -----------------------------------------------------------------------------
   5a. Campo de participantes — .orion-tag-input (CT11-540/543, revisão de UX
   pedida pelo Ernesto em 29/09/2026)

   Um só campo por Direto/Citado, no estilo "destinatários de e-mail": Pessoa
   e Empresa entram pela mesma busca (painel reaproveitado da busca global,
   .orion-search-panel/.orion-search-option, CT11-484) e cada escolha vira um
   chip (.orion-tag) dentro do próprio campo. .orion-tag-kind rotula o tipo
   por extenso dentro do chip -- a cor (--info Pessoa, --accent Empresa) é
   reforço, nunca a única pista (RNF-009).
   -------------------------------------------------------------------------- */
.orion-tag-input {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--orion-space-2);
    inline-size: 100%;
    box-sizing: border-box;
    padding: var(--orion-space-2) var(--orion-space-3);
    border: 1px solid var(--orion-color-field-border);
    border-radius: var(--orion-radius);
    background-color: var(--orion-color-surface);
}

.orion-tag-input:focus-within {
    border-color: var(--orion-color-action);
}

.orion-tag-input-field {
    flex: 1 1 10rem;
    min-inline-size: 8rem;
    border: 0;
    padding: var(--orion-space-1) 0;
    background: none;
    color: var(--orion-color-body);
    font-size: var(--orion-text-body-sm);
}

/* O anel de foco é o do sistema (:focus-visible de orion-tokens.css); aqui só se
   tira a sombra do Bootstrap. Apagar o outline deixaria o teclado sem referência
   -- a borda do contêiner sozinha não basta (WCAG 2.2 §2.4.7). */
.orion-tag-input-field:focus {
    box-shadow: none;
}

.orion-tag-kind {
    font-size: var(--orion-text-overline);
    line-height: var(--orion-leading-overline);
    letter-spacing: var(--orion-tracking-overline);
    text-transform: uppercase;
    opacity: 0.8;
}

/* -----------------------------------------------------------------------------
   5b. Campo de menções — .orion-mention-field (CT11-xxx, pedido do Ernesto em
   29/09/2026, etapa 2 da revisão de UX: marcar @Pessoa/#Empresa direto no
   texto de Nota/Chamada)

   Truque de "textarea destacada": uma <textarea> de verdade por baixo, com
   texto e fundo transparentes (só o caret continua visível, via
   caret-color), e uma cópia só-leitura por cima (.orion-mention-highlight)
   com o MESMO texto, caractere por caractere -- só assim o cursor invisível
   da textarea real fica alinhado com o que a cópia mostra. É por isso que a
   menção resolvida entra por inteiro no texto de verdade
   (@[Nome](person:guid)/#[Nome](company:guid), ver orion-interactions.js) e
   o destaque colore o token inteiro em vez de esconder um pedaço dele --
   esconder mudaria a largura só de um lado dos dois textos e desalinharia
   tudo depois do token. As duas camadas herdam .form-control para ter a
   mesma fonte/preenchimento/borda; só a de cima (a textarea) mostra borda e
   fundo de verdade.
   -------------------------------------------------------------------------- */
.orion-mention-field {
    position: relative;
}

.orion-mention-highlight,
.orion-mention-textarea {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.orion-mention-highlight {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-color: transparent;
    border-color: transparent;
    color: var(--orion-color-body);
    pointer-events: none;
}

.orion-mention-textarea,
.orion-mention-textarea:disabled {
    position: relative;
    z-index: 1;
    background-color: transparent;
    color: transparent;
    caret-color: var(--orion-color-body);
    /* Só vertical (nunca "both"/horizontal): a textarea usa .form-control
       (width: 100%, igual à cópia por cima) -- redimensionar a largura
       destravaria a textarea do tamanho do wrapper (.orion-mention-field,
       que é quem a cópia usa como referência via inset: 0) e desalinharia
       as duas. A altura não tem esse problema: o wrapper não define altura
       própria (position: relative só, sem height), então ela é sempre a da
       textarea (único filho em fluxo normal -- a cópia é position: absolute
       e o painel de sugestões também), e a cópia acompanha via inset: 0
       sem precisar de JavaScript nenhum. Pedido do Ernesto em 30/09/2026:
       "o campo de notas deve poder ser redimensionado pelo usuário".
       min-height trava no tamanho de 1 linha -- abaixo disso o texto já
       digitado ficaria cortado sem scroll (overflow-y: auto por padrão do
       navegador cobre o resto). */
    resize: vertical;
    min-height: 2.75rem;
}

.orion-mention-token {
    border-radius: 0.2em;
    padding-inline: 0.15em;
}

.orion-mention-token--person {
    background-color: var(--orion-color-info-surface);
    color: var(--orion-color-info);
}

.orion-mention-token--company {
    background-color: var(--orion-color-accent-surface);
    color: var(--orion-color-accent);
}

/* Colchete/parêntese/tipo/guid -- a parte que só existe para o token poder
   ser resolvido de volta (ver o JS), não para a pessoa ler. Quase apagado
   (opacity, nunca font-size: mudar o tamanho mudaria a largura só na cópia,
   e desalinharia do texto de verdade por baixo -- ver seção 5b acima).
   Pedido do Ernesto em 30/09/2026: "o usuário não sabe o que guid
   significa". */
.orion-mention-token-tecnico {
    opacity: 0.3;
}

/* -----------------------------------------------------------------------------
   5c. Interruptor — .orion-switch (pedido do Ernesto em 30/09/2026: "usar o
   check para esse tipo de opção não fica legal" -- a opção "Classificar como
   restrita", RF-007, em Nota/Chamada/Anexo)

   Continua sendo um <input type="checkbox"> de verdade -- asp-for, o
   data-orion-restrict-toggle que orion-interactions.js já ouvia no "change"
   e o envio no formulário não mudam nada, só o desenho. appearance: none
   troca a caixa nativa por trilho + bolinha (::before); role="switch" no
   HTML (não dá pra declarar em CSS) faz o leitor de tela anunciar
   "ativado"/"desativado" em vez de "marcado"/"desmarcado" -- o texto da
   opção ao lado, nunca só a cor do trilho, continua sendo quem diz o que a
   opção faz (mesma regra de "nunca só por cor" da biblioteca de
   componentes). O <label> que já envolve o campo continua sendo a área de
   clique/toque -- não precisa de pseudo-elemento de 44px à parte, como o X
   de remover filtro, porque aqui o rótulo inteiro (bolinha + frase) já é
   clicável.
   -------------------------------------------------------------------------- */
.orion-switch {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    position: relative;
    inline-size: 2.5rem;
    block-size: 1.5rem;
    margin: 0;
    margin-block-start: 0.125rem;
    border: none;
    border-radius: var(--orion-radius-pill);
    background-color: var(--orion-color-field-border);
    cursor: pointer;
    transition: background-color var(--orion-motion) var(--orion-easing);
}

.orion-switch::before {
    content: "";
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    inline-size: calc(1.5rem - 4px);
    block-size: calc(1.5rem - 4px);
    border-radius: 50%;
    background-color: var(--orion-n-000);
    transition: transform var(--orion-motion) var(--orion-easing);
}

.orion-switch:checked {
    background-color: var(--orion-color-accent);
}

.orion-switch:checked::before {
    transform: translateX(1rem);
}

.orion-switch:disabled {
    cursor: not-allowed;
    opacity: var(--orion-opacity-disabled);
}

/* AJ-017 — variante compacta da proposta (Atividade e Empresa): 32x18, bolinha de 14 px, ligado em
   azul de ação. O 40x24 acima fica nos formulários de restrição (decisão do Ernesto, 30/09/2026).
   O trilho desligado continua em n-400 (3,47:1), não no #C3CCD8 do desenho (1,62:1, reprova 1.4.11). */
/* AJ-116: grupo de caixas de seleção (fieldset + legend), linha de 44 px e rolagem com foco por teclado. */
.orion-fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.orion-fieldset > legend {
    float: none;
    inline-size: auto;
    padding: 0;
    font-size: inherit;
}

.orion-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--orion-space-1);
    max-block-size: var(--orion-checklist-max-height);
    overflow-y: auto;
}

.orion-checklist-item {
    display: flex;
    align-items: center;
    gap: var(--orion-space-2);
    min-block-size: var(--orion-touch-target);
    cursor: pointer;
}

.orion-checklist-item .form-check-input {
    flex: none;
    margin: 0;
}

.orion-checklist:focus-visible {
    outline: 2px solid var(--orion-color-focus-ring);
    outline-offset: 2px;
}

.orion-measure-record {
    max-inline-size: var(--orion-measure-record);
}

.orion-select-auto {
    inline-size: auto;
}

.orion-measure-search {
    max-inline-size: var(--orion-measure-search);
}

.orion-switch--compact {
    inline-size: var(--orion-switch-compact-width);
    block-size: var(--orion-switch-compact-height);
    margin-block-start: 0;
}

.orion-switch--compact::before {
    inline-size: var(--orion-switch-compact-thumb);
    block-size: var(--orion-switch-compact-thumb);
}

.orion-switch--compact:checked {
    background-color: var(--orion-color-action);
}

.orion-switch--compact:checked::before {
    transform: translateX(calc(var(--orion-switch-compact-width) - var(--orion-switch-compact-thumb) - 4px));
}

/* -----------------------------------------------------------------------------
   6. Modal — .orion-modal sobre .modal do Bootstrap

   Foco preso dentro e devolvido ao gatilho ao fechar: o Bootstrap faz isso,
   desde que o modal seja aberto pelo componente dele e não por display.
   -------------------------------------------------------------------------- */
.orion-modal .modal-content {
    border: 1px solid var(--orion-color-divider);
    border-radius: var(--orion-radius-overlay);
    background-color: var(--orion-color-surface);
}

.orion-modal .modal-header,
.orion-modal .modal-footer {
    border-color: var(--orion-color-divider);
}

.orion-modal .modal-title {
    font-family: var(--orion-font-heading);
    font-size: var(--orion-text-h3);
    line-height: var(--orion-leading-h3);
}

/* Hover do modal é o dos controles dentro dele — o gatilho, os botões do rodapé,
   o fechar. A caixa em si não reage ao ponteiro, e inventar uma reação para ela
   seria movimento sem informação. Ativo, sim: é a caixa recebendo a confirmação. */
.orion-modal.is-active .modal-content,
.orion-modal .modal-content:active {
    border-color: var(--orion-color-action);
}

/* Confirmação bloqueada (RF-022): o botão só habilita com o motivo preenchido, e
   o porquê fica visível no rodapé. */
.orion-modal.is-disabled .modal-footer .btn-primary {
    pointer-events: none;
    opacity: var(--orion-opacity-disabled);
}

.orion-modal.is-loading .modal-body {
    pointer-events: none;
}

.orion-modal.is-empty .modal-body,
.orion-modal.is-error .modal-body {
    text-align: center;
}

.orion-modal.is-error .modal-content {
    border-color: var(--orion-color-danger);
}

/* -----------------------------------------------------------------------------
   7. Painel — .orion-panel sobre .offcanvas

   Painel lateral de detalhe e de filtros. Mesmo contrato de teclado do modal:
   Esc fecha o mais interno, foco volta ao gatilho.
   -------------------------------------------------------------------------- */
.orion-panel {
    background-color: var(--orion-color-surface);
    border-inline-start: 1px solid var(--orion-color-divider);
    border-start-start-radius: var(--orion-radius-overlay);
    border-end-start-radius: var(--orion-radius-overlay);
}

.orion-panel .offcanvas-header {
    border-block-end: 1px solid var(--orion-color-divider);
    gap: var(--orion-space-3);
}

.orion-panel .offcanvas-title {
    font-family: var(--orion-font-heading);
    font-size: var(--orion-text-h3);
    line-height: var(--orion-leading-h3);
    color: var(--orion-color-heading);
}

/* Fechar o painel é a ação mais usada dele: alvo de toque inteiro. */
.orion-panel .btn-close {
    min-inline-size: var(--orion-touch-target);
    min-block-size: var(--orion-touch-target);
}

.orion-panel-trigger:hover,
.orion-panel-trigger.is-hover {
    border-color: var(--orion-color-action);
}

.orion-panel.is-active,
.orion-panel-trigger:active,
.orion-panel-trigger.is-active {
    border-color: var(--orion-color-action-active);
}

.orion-panel.is-disabled .offcanvas-body {
    opacity: var(--orion-opacity-disabled);
    pointer-events: none;
}

.orion-panel.is-loading .offcanvas-body {
    pointer-events: none;
}

.orion-panel.is-empty .offcanvas-body,
.orion-panel.is-error .offcanvas-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.orion-panel.is-error .offcanvas-header {
    border-block-end-color: var(--orion-color-danger);
}

/* Em 390px o painel ocupa a largura toda — painel de 400px em tela de 390
   deixa uma faixa inútil e rolagem horizontal (RNF-006). */
@media (max-width: 767.98px) {
    .orion-panel {
        inline-size: 100%;
        border-radius: 0;
    }
}

/* -----------------------------------------------------------------------------
   8. Faixa de alerta — .orion-banner

   O caso do RNF-014: separar "Gmail indisponível" de "nenhuma mensagem
   encontrada". São coisas diferentes e o usuário age diferente em cada uma.
   A faixa fica no topo da área afetada, não numa notificação que some.
   -------------------------------------------------------------------------- */
.orion-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--orion-space-3);
    padding: var(--orion-space-3) var(--orion-space-4);
    border: 1px solid var(--orion-color-divider);
    border-inline-start-width: var(--orion-space-1);
    border-radius: var(--orion-radius);
    background-color: var(--orion-color-surface-sunken);
    color: var(--orion-color-body);
    font-size: var(--orion-text-body-sm);
    line-height: var(--orion-leading-body-sm);
    margin-block-end: var(--orion-space-4);
}

.orion-banner-content {
    flex: 1 1 auto;
}

.orion-banner-title {
    font-family: var(--orion-font-heading);
    font-weight: var(--orion-weight-semibold);
    color: var(--orion-color-heading);
}

/* Só o fundo e a borda do início: a cor do texto vem do bloco base e serve aos
   dois temas, porque a superfície tonal acompanha o tema. Foi exatamente isso que
   faltou na primeira versão — o fundo pastel ficava claro no tema escuro e o
   texto claro sumia dentro dele. */
.orion-banner--info    { background-color: var(--orion-color-info-surface);    border-inline-start-color: var(--orion-color-info); }
.orion-banner--success { background-color: var(--orion-color-success-surface); border-inline-start-color: var(--orion-color-success); }
.orion-banner--warning { background-color: var(--orion-color-warning-surface); border-inline-start-color: var(--orion-color-warning); }
.orion-banner--danger  { background-color: var(--orion-color-danger-surface);  border-inline-start-color: var(--orion-color-danger); }

/* AJ-015 — variante da proposta: moldura inteira de 1 px (âmbar #E0A63C no alerta de crédito), ícone
   por tom (decorativo; o título diz a situação) e sem margem embutida (o uso decide o espaço). */
.orion-banner--outlined {
    align-items: center;
    padding: var(--orion-banner-padding-block) var(--orion-banner-padding-inline);
    margin-block-end: 0;
    border-inline-start-width: 1px;
}

.orion-banner--outlined.orion-banner--warning { border-color: var(--orion-color-warning-border); }
.orion-banner--outlined.orion-banner--danger  { border-color: var(--orion-color-danger); }
.orion-banner--outlined.orion-banner--info    { border-color: var(--orion-color-info); }
.orion-banner--outlined.orion-banner--success { border-color: var(--orion-color-success); }

.orion-banner-icon {
    flex: none;
    inline-size: var(--orion-icon-size);
    block-size: var(--orion-icon-size);
    color: currentColor;
}

/* Hover e ativo mexem em três lados da borda, nunca no quarto: a borda grossa do
   início é o que diz o tom da faixa, e ela precisa sobreviver ao ponteiro. */
.orion-banner:hover,
.orion-banner.is-hover {
    border-block-color: var(--orion-color-field-border);
    border-inline-end-color: var(--orion-color-field-border);
}

.orion-banner:active,
.orion-banner.is-active {
    border-block-color: var(--orion-color-action-active);
    border-inline-end-color: var(--orion-color-action-active);
}

.orion-banner.is-disabled .btn {
    pointer-events: none;
    opacity: var(--orion-opacity-disabled);
}

/* Carregando é a nova tentativa em curso — a faixa continua no lugar, dizendo
   que está tentando, em vez de sumir e reaparecer. */
.orion-banner.is-loading .orion-banner-content {
    color: var(--orion-color-muted);
}

.orion-banner.is-empty {
    background-color: var(--orion-color-surface-sunken);
    border-inline-start-color: var(--orion-color-field-border);
    font-style: italic;
}

.orion-banner.is-error {
    background-color: var(--orion-color-danger-surface);
    border-inline-start-color: var(--orion-color-danger);
}

/* -----------------------------------------------------------------------------
   9. Apoio — skeleton, estado vazio, estado de erro
   -------------------------------------------------------------------------- */

/* Skeleton com a altura REAL da linha que vai chegar. Spinner central diz
   "espere"; skeleton diz "espere, e o que vem tem esta forma". */
.orion-skeleton {
    display: block;
    block-size: var(--orion-row-comfortable);
    border-radius: var(--orion-radius);
    background-color: var(--orion-color-surface-sunken);
    background-image: var(--orion-skeleton-gradient);
    background-size: 200% 100%;
    animation: orion-skeleton var(--orion-motion-skeleton) linear infinite;
}

.orion-skeleton + .orion-skeleton {
    margin-block-start: var(--orion-space-2);
}

.orion-skeleton--text {
    block-size: var(--orion-leading-body);
    inline-size: 60%;
}

.orion-skeleton--compact {
    block-size: var(--orion-row-compact);
}

@keyframes orion-skeleton {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* Estado vazio. Os dois casos são diferentes e têm textos diferentes:
   .orion-empty--first  → nenhum registro cadastrado, com a ação de criar
   .orion-empty--filter → nenhum resultado para os filtros, com a ação de limpar */
.orion-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--orion-space-2);
    padding: var(--orion-space-6) var(--orion-space-4);
    text-align: center;
    color: var(--orion-color-muted);
}

.orion-empty-title {
    font-family: var(--orion-font-heading);
    font-size: var(--orion-text-h4);
    line-height: var(--orion-leading-h4);
    font-weight: var(--orion-weight-semibold);
    color: var(--orion-color-heading);
}

.orion-empty-hint {
    max-inline-size: 32rem;
}

.orion-empty .btn {
    margin-block-start: var(--orion-space-2);
}

/* Estado de erro de um bloco que exibe dados. Diz o que fazer, não só o que
   falhou, e a ação de tentar de novo é um botão de verdade. */
.orion-state-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--orion-space-2);
    padding: var(--orion-space-6) var(--orion-space-4);
    text-align: center;
    color: var(--orion-color-body);
}

.orion-state-error-title {
    font-family: var(--orion-font-heading);
    font-size: var(--orion-text-h4);
    line-height: var(--orion-leading-h4);
    font-weight: var(--orion-weight-semibold);
    color: var(--orion-color-danger);
}

/* O spinner só existe dentro de um botão ou ao lado de um rótulo de progresso.
   Spinner sozinho no meio da tela é o que o skeleton substituiu. */
.orion-spinner {
    display: inline-block;
    inline-size: var(--orion-space-4);
    block-size: var(--orion-space-4);
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: var(--orion-radius-pill);
    animation: orion-spin var(--orion-motion-spinner) linear infinite;
}

@keyframes orion-spin {
    to { rotate: 360deg; }
}

/* Foco documentado. O anel real é o :focus-visible de orion-tokens.css; esta
   classe repete a MESMA declaração para que o estado de foco possa ser exibido
   na página de referência e fotografado na evidência do aceite visual — com a
   pseudo-classe ele só existiria enquanto o dedo estivesse no Tab. */
.is-focus {
    outline: 2px solid var(--orion-color-focus-ring);
    outline-offset: 2px;
}

/* Região só para leitor de tela — usada pelos avisos de aria-live dos
   componentes (chip removido, carregamento concluído). */
.orion-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* -----------------------------------------------------------------------------
   10. Ficha da Pessoa — cabeçalho e seletor de visão (CT11-130)

   Sem nav-tabs do Bootstrap: o canvas validado (Main.dc.html/PessoaMobile.dc.html)
   usa um traço inferior de 2px na aba ativa, sem fundo nem borda lateral — mais
   perto de um seletor de visão do que de uma aba de formulário.
   -------------------------------------------------------------------------- */
.orion-avatar--lg {
    inline-size: 3.25rem;
    block-size: 3.25rem;
    font-size: var(--orion-text-h4);
}

.orion-ficha-header {
    display: flex;
    align-items: flex-start;
    gap: var(--orion-space-4);
    flex-wrap: wrap;
}

.orion-ficha-identity {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.orion-ficha-name {
    margin: 0;
    font-family: var(--orion-font-heading);
    font-size: var(--orion-text-page);
    line-height: var(--orion-leading-page);
    font-weight: var(--orion-weight-bold);
    letter-spacing: var(--orion-tracking-tight);
    color: var(--orion-color-heading);
}

.orion-ficha-position {
    margin: var(--orion-space-1) 0 0;
    font-size: var(--orion-text-body-sm);
    color: var(--orion-color-muted);
}

.orion-ficha-tabs {
    display: flex;
    align-items: flex-end;
    gap: var(--orion-space-5);
    margin-block-start: var(--orion-space-4);
    border-bottom: 1px solid var(--orion-color-divider);
    overflow-x: auto;
}

.orion-ficha-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--orion-space-2);
    padding-block: var(--orion-space-2) var(--orion-space-3);
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: inherit;
    font-size: var(--orion-text-body-sm);
    font-weight: var(--orion-weight-medium);
    color: var(--orion-color-muted);
    text-decoration: none;
    white-space: nowrap;
}

/* AJ-144: a faixa de abas rola na horizontal e corta o anel de foco; o anel fica por dentro do link
   (vale para Parâmetros, Protheus e as fichas). */
.orion-ficha-tab:focus-visible {
    outline: 2px solid var(--orion-color-focus-ring);
    outline-offset: -2px;
}

/* AJ-013 (RNF-008): alvo de toque de 44 px onde há toque; o sublinhado de 2 px fica. */
@media (max-width: 991.98px), (pointer: coarse) {
    .orion-ficha-tab {
        min-block-size: var(--orion-touch-target);
    }
}

/* AJ-013: caixa de seleção com rótulo clicável de 44 px (perfis de convite e de usuário). */
.form-check.orion-check-touch {
    display: flex;
    align-items: center;
    gap: var(--orion-space-2);
    min-block-size: var(--orion-touch-target);
    padding-inline-start: 0;
}

.orion-check-touch .form-check-input {
    float: none;
    flex: none;
    margin: 0;
}

.orion-check-touch .form-check-label {
    flex: 1 1 auto;
    cursor: pointer;
}

.orion-ficha-tab.is-active {
    border-bottom-color: var(--orion-color-action);
    color: var(--orion-color-heading);
    font-weight: var(--orion-weight-semibold);
}

.orion-ficha-tab[aria-disabled="true"] {
    color: var(--orion-color-muted);
    opacity: .6;
    cursor: not-allowed;
}

.orion-ficha-tab-badge {
    font-size: var(--orion-text-overline);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--orion-color-muted);
}

.orion-ficha-count {
    margin-inline-start: auto;
    padding-block-end: var(--orion-space-2);
    font-size: var(--orion-text-caption);
    color: var(--orion-color-muted);
}

/* Vínculo encerrado — mesmo cartão, num tom mais apagado (RF-009: nenhum é
   ocultado, mas o encerrado não compete visualmente com o ativo). */
.orion-card--ended {
    background-color: var(--orion-color-surface-sunken);
    color: var(--orion-color-muted);
}

.orion-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--orion-space-2);
    margin-block-start: var(--orion-space-3);
    padding-block-start: var(--orion-space-3);
    border-top: 1px solid var(--orion-color-divider);
}

/* -----------------------------------------------------------------------------
   10. Recusa por vínculo ausente — .orion-refusal  ·  CT11-566

   O Lead não pode ocupar o estágio porque falta Empresa ou Pessoa; a regra
   respondeu (âmbar, aviso), não houve falha técnica (vermelho). Um componente só,
   no quadro, no seletor "Mover para" e na ficha. Aviso inline com ação, nunca
   toast: não some sozinho. Sem backdrop e sem foco preso — quem prende o foco é o
   modal do Bootstrap, e aqui o aviso vive dentro de um menu.
   -------------------------------------------------------------------------- */
.orion-refusal {
    padding: var(--orion-space-3) var(--orion-space-4);
    border: 1px solid var(--orion-color-warning);
    border-inline-start-width: var(--orion-space-1);
    border-radius: var(--orion-radius);
    background-color: var(--orion-color-warning-surface);
    color: var(--orion-color-body);
    font-size: var(--orion-text-body-sm);
    line-height: var(--orion-leading-body-sm);
    margin-block-end: var(--orion-space-4);
    scroll-margin-top: calc(var(--orion-topbar-height) + var(--orion-space-4));
}

.orion-refusal-title {
    margin: 0;
    font-family: var(--orion-font-heading);
    font-weight: var(--orion-weight-semibold);
    color: var(--orion-color-heading);
}

.orion-refusal-lead {
    margin: 0 0 var(--orion-space-2);
    font-size: var(--orion-text-caption);
    color: var(--orion-color-muted);
}

.orion-refusal-message {
    display: flex;
    align-items: flex-start;
    gap: var(--orion-space-2);
    font-weight: var(--orion-weight-semibold);
    color: var(--orion-color-heading);
}

.orion-refusal-consequence {
    margin: var(--orion-space-1) 0 var(--orion-space-3);
    font-size: var(--orion-text-caption);
    color: var(--orion-color-muted);
}

.orion-refusal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--orion-space-2);
    justify-content: flex-end;
}

.orion-refusal-actions .btn {
    min-block-size: var(--orion-touch-target);
}

/* Hover e ativo mexem em três lados da borda, nunca no início: a borda grossa é o
   que diz "aviso" e precisa sobreviver ao ponteiro (mesma regra da faixa). */
.orion-refusal:hover,
.orion-refusal.is-hover {
    border-block-color: var(--orion-color-field-border);
    border-inline-end-color: var(--orion-color-field-border);
}

.orion-refusal:active,
.orion-refusal.is-active {
    border-block-color: var(--orion-color-action-active);
    border-inline-end-color: var(--orion-color-action-active);
}

/* Foco: o anel único dos tokens, aplicado ao botão por :focus-visible; a classe
   existe só para a página de referência. */
.orion-refusal .btn.is-focus {
    outline: 2px solid var(--orion-color-focus-ring);
    outline-offset: 2px;
}

/* Carregando ("Vincular agora" abrindo a edição) e desabilitado ("Cancelar" enquanto isso). */
.orion-refusal.is-loading .orion-refusal-actions [data-orion-refusal-dismiss],
.orion-refusal.is-disabled .btn {
    pointer-events: none;
    opacity: var(--orion-opacity-disabled);
}

/* Erro ao vincular: a recusa continua, com o aviso técnico (vermelho) acima da mensagem. */
.orion-refusal.is-error {
    border-color: var(--orion-color-danger);
    background-color: var(--orion-color-danger-surface);
}

/* Folha inferior em telas estreitas: botões em largura total, primário em cima. */
@media (max-width: 767.98px) {
    .orion-refusal-actions {
        flex-direction: column-reverse;
    }

    .orion-refusal-actions .btn {
        inline-size: 100%;
    }
}

/* Busca de Pessoa/Empresa do Lead (CT11-260/582): o painel de sugestões ancora no próprio campo,
   e o aviso de "Empresa mencionada" é âmbar com ícone e texto (nunca só cor). */
[data-orion-link-picker] {
    position: relative;
}

[data-orion-link-picker] mark {
    background: none;
    color: inherit;
    font-weight: var(--orion-weight-semibold);
}

.orion-field-hint--warning {
    color: var(--orion-color-warning);
}

/* -----------------------------------------------------------------------------
   Sincronizar agora (CT11-306, RF-026): botão secundário e linha de situação.
   Usado na agenda e no check-in do compromisso.
   ----------------------------------------------------------------------------- */
.orion-calendar-sync {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--orion-space-2);
}

.orion-calendar-sync__button {
    min-block-size: var(--orion-touch-target);
    display: inline-flex;
    align-items: center;
    gap: var(--orion-space-2);
}

.orion-calendar-sync__button[aria-disabled="true"] {
    opacity: 0.65;
    cursor: not-allowed;
}

.orion-calendar-sync.is-busy .orion-calendar-sync__icon {
    animation: orion-calendar-sync-spin var(--orion-motion-spinner) linear infinite;
}

.orion-calendar-sync__status {
    font-size: var(--orion-text-caption);
    color: var(--orion-color-muted);
}

.orion-calendar-sync__status.is-success { color: var(--orion-color-success); }
.orion-calendar-sync__status.is-danger { color: var(--orion-color-danger); }
.orion-calendar-sync__status.is-warning { color: var(--orion-color-warning); }

.orion-calendar-sync__status a {
    color: inherit;
    font-weight: var(--orion-weight-semibold);
    text-decoration: underline;
}

@keyframes orion-calendar-sync-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .orion-calendar-sync.is-busy .orion-calendar-sync__icon { animation-name: none; }
}

/* -----------------------------------------------------------------------------
   Edição do cadastro de Pessoa (CT11-597, RF-008; mockup CT11-595): linha de
   coleção editável (e-mail, telefone), aviso âmbar de regra de negócio, barra de
   salvar fixa no pé e a leitura em lista de definição.
   ----------------------------------------------------------------------------- */
.orion-field-optional {
    margin-inline-start: var(--orion-space-1);
    font-size: var(--orion-text-caption);
    font-weight: var(--orion-weight-regular);
    color: var(--orion-color-muted);
}

/* Regra de negócio (ex.: e-mail já cadastrado) não é erro técnico: âmbar, com ícone e texto. */
.orion-field-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--orion-space-1);
    margin: var(--orion-space-1) 0 0;
    font-size: var(--orion-text-caption);
    line-height: var(--orion-leading-caption);
    color: var(--orion-color-warning);
}

.orion-field-warning::before {
    content: "";
    flex: none;
    inline-size: var(--orion-icon-inline);
    block-size: var(--orion-icon-inline);
    margin-block-start: 0.125em;
    background-color: currentColor;
    mask: var(--orion-icon-mask-alerta) center / contain no-repeat;
}

.form-control.is-warning {
    border-color: var(--orion-color-warning);
}

.orion-collection legend {
    float: none;
    padding: 0;
    margin-block-end: var(--orion-space-1);
    font-size: inherit;
}

.orion-collection__rows {
    display: flex;
    flex-direction: column;
    gap: var(--orion-space-2);
    margin-block-end: var(--orion-space-2);
}

.orion-collection__narrow {
    max-inline-size: 20rem;
}

.orion-collection-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--orion-space-2);
}

.orion-collection-row > .form-control {
    flex: 1 1 14rem;
    min-inline-size: 0;
}

.orion-collection-row__kind {
    flex: 0 0 9rem;
}

.orion-collection-row__tag {
    align-self: center;
}

/* Alvo de toque de 44px em "Tornar principal" e no "×" (RNF-008). */
.orion-collection-row .btn {
    min-block-size: var(--orion-touch-target);
}

.orion-collection-row__remove {
    min-inline-size: var(--orion-touch-target);
}

.orion-collection-row__error {
    flex: 1 0 100%;
}

/* Remover não some a linha: ela fica riscada e tracejada, com "Desfazer", até o Salvar. */
.orion-collection-row__removed {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: var(--orion-space-2);
    margin: 0;
    font-size: var(--orion-text-caption);
    color: var(--orion-color-muted);
}

.orion-collection-row__removed[hidden] {
    display: none;
}

.orion-collection-row.is-removed .form-control,
.orion-collection-row.is-removed .form-select {
    border-style: dashed;
    color: var(--orion-color-muted);
    text-decoration: line-through;
}

.orion-collection-row.is-removed [data-orion-make-primary],
.orion-collection-row.is-removed .orion-collection-row__remove {
    display: none;
}

/* Barra de salvar: única ação primária da aba, fixa no pé do conteúdo. */
.orion-savebar {
    position: sticky;
    inset-block-end: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--orion-space-3);
    margin-block: var(--orion-space-3) var(--orion-space-4);
    padding: var(--orion-space-3) var(--orion-space-4);
    background-color: var(--orion-color-surface);
    border: 1px solid var(--orion-color-divider);
    border-radius: var(--orion-radius);
}

.orion-savebar__state {
    margin: 0;
    font-weight: var(--orion-weight-semibold);
    color: var(--orion-color-warning);
}

.orion-savebar__state[hidden] {
    display: none;
}

.orion-savebar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--orion-space-2);
    margin-inline-start: auto;
}

@media (max-width: 575.98px) {
    .orion-savebar__actions {
        flex-direction: column;
        inline-size: 100%;
    }

    .orion-savebar__actions .btn {
        inline-size: 100%;
    }
}

/* Leitura (quem só tem ReadSharedBase): texto, não campo desabilitado. */
.orion-readonly-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--orion-space-3) var(--orion-space-4);
}

.orion-readonly-list dt {
    font-size: var(--orion-text-caption);
    font-weight: var(--orion-weight-medium);
    color: var(--orion-color-muted);
}

.orion-readonly-list dd {
    margin: 0;
    color: var(--orion-color-body);
    overflow-wrap: anywhere;
}

.orion-readonly-list__multiline {
    white-space: pre-line;
}

/* -----------------------------------------------------------------------------
   Cabeçalho de página — .orion-page-header  ·  AJ-011

   Título, linha de contexto (14 px, texto secundário) e ações à direita. O
   espaço título-contexto é o mesmo em toda tela (nada de 32 px de rodapé).
   -------------------------------------------------------------------------- */
.orion-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--orion-space-3) var(--orion-space-4);
    margin-block-end: var(--orion-space-5);
}

.orion-page-header-text {
    flex: 1 1 20rem;
    min-inline-size: 0;
}

.orion-page-header-title {
    margin: 0;
}

.orion-page-header-context {
    margin: var(--orion-space-1) 0 0;
    font-size: var(--orion-text-body-sm);
    line-height: var(--orion-leading-body-sm);
    color: var(--orion-color-text-secondary);
}

.orion-page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--orion-space-2);
}

@media (max-width: 575.98px) {
    .orion-page-header-actions {
        inline-size: 100%;
    }

    .orion-page-header-actions .btn {
        flex: 1 1 auto;
    }
}

/* -----------------------------------------------------------------------------
   Rótulo de seção — .orion-overline  ·  AJ-029 (A.3-7, rótulo ".ov")

   Caixa-alta pequena que nomeia um bloco (cartão lateral, KPI). Cor de texto
   mudo: 5,18:1 sobre branco, acima do mínimo de 4,5:1.
   -------------------------------------------------------------------------- */
.orion-overline {
    margin: 0;
    font-family: var(--orion-font-heading);
    font-size: var(--orion-text-overline);
    line-height: var(--orion-leading-overline);
    font-weight: var(--orion-weight-semibold);
    letter-spacing: var(--orion-tracking-overline);
    text-transform: uppercase;
    color: var(--orion-color-muted);
}

/* -----------------------------------------------------------------------------
   Chip de filtro — .orion-chip  ·  AJ-028 (A.3-2)

   Pílula alternável com contador em texto ("E-mail 21"). O estado ativo é
   sólido E aria-pressed: nunca só a cor. Abaixo de 992px a área de toque chega
   a 44px por um pseudo-elemento (como o X do .orion-tag), sem engordar a barra.
   -------------------------------------------------------------------------- */
.orion-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--orion-space-1);
    padding: var(--orion-chip-padding-block) var(--orion-chip-padding-inline);
    border: 1px solid var(--orion-color-divider);
    border-radius: var(--orion-radius-pill);
    background-color: var(--orion-color-surface);
    color: var(--orion-color-text-secondary);
    font-family: var(--orion-font-heading);
    font-size: var(--orion-text-xs);
    line-height: var(--orion-leading-caption);
    font-weight: var(--orion-weight-semibold);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--orion-motion-fast) var(--orion-easing),
                border-color var(--orion-motion-fast) var(--orion-easing);
}

.orion-chip::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    translate: 0 -50%;
    block-size: 100%;
    min-block-size: var(--orion-touch-target);
}

@media (min-width: 992px) and (pointer: fine) {
    .orion-chip::before {
        min-block-size: 100%;
    }
}

.orion-chip:hover,
.orion-chip.is-hover {
    border-color: var(--orion-color-action);
    color: var(--orion-color-action);
}

.orion-chip.is-active,
.orion-chip[aria-pressed="true"] {
    background-color: var(--orion-color-action);
    border-color: var(--orion-color-action);
    color: var(--orion-color-on-action);
}

.orion-chip.is-active:hover,
.orion-chip[aria-pressed="true"]:hover {
    background-color: var(--orion-color-action-hover);
    border-color: var(--orion-color-action-hover);
    color: var(--orion-color-on-action);
}

.orion-chip:disabled,
.orion-chip.is-disabled {
    background-color: var(--orion-color-surface-sunken);
    border-color: var(--orion-color-divider);
    color: var(--orion-color-muted);
    cursor: not-allowed;
}

.orion-chip.is-loading {
    cursor: progress;
    pointer-events: none;
}

.orion-chip.is-error {
    border-color: var(--orion-color-danger);
    color: var(--orion-color-danger);
}

.orion-chip-count {
    font-variant-numeric: tabular-nums;
}

.orion-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--orion-space-2);
}

@media (max-width: 767.98px) {
    .orion-chip-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-block-end: var(--orion-space-1);
    }
}

/* -----------------------------------------------------------------------------
   Cartão lateral — .orion-card--side  ·  AJ-029 (A.3-7)

   Cartão de coluna lateral: rótulo .orion-overline, link "Ver todos" à direita,
   divisor suave entre blocos e rodapé de 12px. Borda, não sombra.
   -------------------------------------------------------------------------- */
.orion-card--side {
    padding: var(--orion-card-side-padding-block) var(--orion-space-4);
}

.orion-card--side .orion-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--orion-space-2);
    margin-block-end: var(--orion-space-2);
}

.orion-card--side .orion-card__action {
    font-size: var(--orion-text-xs);
    font-weight: var(--orion-weight-semibold);
    color: var(--orion-color-action);
}

.orion-card--side .orion-card__divider {
    margin-block: var(--orion-space-3);
    border: 0;
    border-block-start: 1px solid var(--orion-color-divider-soft);
    opacity: 1;
}

.orion-card--side .orion-card__foot {
    margin: var(--orion-space-3) 0 0;
    font-size: var(--orion-text-xs);
    line-height: var(--orion-leading-caption);
    color: var(--orion-color-muted);
}

/* Título de cartão de 14px (referência), ao lado do de 18px que o Bootstrap herda. */
.orion-card-title--sm {
    font-size: var(--orion-text-body-sm);
    line-height: var(--orion-leading-body-sm);
}

/* -----------------------------------------------------------------------------
   Controle segmentado — .orion-segmented  ·  AJ-029 (A.3-11)

   Escolha exclusiva entre poucas visões (Dia/Semana/Mês). O ativo é sólido e
   leva aria-pressed (ou aria-current em links). Altura é a do controle: 36px no
   desktop, 44px em tela estreita ou ponteiro grosso.
   -------------------------------------------------------------------------- */
.orion-segmented {
    display: inline-flex;
    border: 1px solid var(--orion-color-field-border);
    border-radius: var(--orion-radius);
    background-color: var(--orion-color-surface);
    overflow: hidden;
}

.orion-segmented-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--orion-control-height);
    padding: 0 var(--orion-space-4);
    border: 0;
    background: transparent;
    color: var(--orion-color-text-secondary);
    font-family: var(--orion-font-heading);
    font-size: var(--orion-text-body-sm);
    font-weight: var(--orion-weight-semibold);
    text-decoration: none;
    cursor: pointer;
}

.orion-segmented-item + .orion-segmented-item {
    border-inline-start: 1px solid var(--orion-color-field-border);
}

.orion-segmented-item:hover,
.orion-segmented-item.is-hover {
    background-color: var(--orion-color-info-surface);
    color: var(--orion-color-action);
}

.orion-segmented-item.is-active,
.orion-segmented-item[aria-pressed="true"],
.orion-segmented-item[aria-current="page"] {
    background-color: var(--orion-color-action);
    color: var(--orion-color-on-action);
}

.orion-segmented-item:disabled,
.orion-segmented-item.is-disabled {
    background-color: var(--orion-color-surface-sunken);
    color: var(--orion-color-muted);
    cursor: not-allowed;
}

.orion-segmented-item.is-loading {
    cursor: progress;
    pointer-events: none;
}

/* -----------------------------------------------------------------------------
   Indicador — .orion-kpi  ·  AJ-029 (A.1)

   Número grande em Archivo 19px/700 com cifras tabulares, e o rótulo
   .orion-overline por cima. O valor sempre vem com texto, nunca só cor.
   -------------------------------------------------------------------------- */
.orion-kpi {
    display: flex;
    flex-direction: column;
    gap: var(--orion-space-1);
}

.orion-kpi-value {
    margin: 0;
    font-family: var(--orion-font-heading);
    font-size: var(--orion-text-kpi);
    line-height: var(--orion-leading-h4);
    font-weight: var(--orion-weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--orion-color-heading);
}

.orion-kpi.is-empty .orion-kpi-value,
.orion-kpi.is-loading .orion-kpi-value {
    color: var(--orion-color-muted);
}

.orion-kpi.is-error .orion-kpi-value {
    color: var(--orion-color-danger);
}

/* -----------------------------------------------------------------------------
   Ícone de entidade — .orion-entity-icon  ·  AJ-029 (cabeçalho da Empresa)

   Quadrado de 52px, raio 8px, fundo de marca clara com borda de marca. O
   desenho é decorativo (aria-hidden): o nome da Empresa está ao lado.
   -------------------------------------------------------------------------- */
.orion-entity-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: var(--orion-entity-icon-size);
    block-size: var(--orion-entity-icon-size);
    border: 1px solid var(--orion-color-brand-tint-border);
    border-radius: var(--orion-radius-entity);
    background-color: var(--orion-color-brand-tint);
    color: var(--orion-color-action);
}

.orion-entity-icon svg {
    inline-size: var(--orion-icon-size);
    block-size: var(--orion-icon-size);
}

/* -----------------------------------------------------------------------------
   Linha do tempo — .orion-timeline  ·  AJ-005 / AJ-053 (A.3-3 e A.3-4)

   Trilho vertical de 2px a 9px da borda, marco circular de 20px com ícone de
   10px na cor do tipo, cabeçalho de mês em .orion-overline e cartão por evento.
   O marco é decorativo (aria-hidden): o tipo está escrito no título do cartão.
   Pessoa, Empresa e Grupo Econômico usam o mesmo markup.
   -------------------------------------------------------------------------- */
.orion-timeline {
    position: relative;
    padding-inline-start: var(--orion-timeline-gutter);
}

.orion-timeline::before {
    content: "";
    position: absolute;
    inset-block: calc(var(--orion-space-2));
    inset-inline-start: var(--orion-timeline-rail-offset);
    inline-size: var(--orion-timeline-rail-width);
    background-color: var(--orion-color-divider);
}

.orion-timeline-month {
    margin: calc(var(--orion-space-1) / 2) 0 var(--orion-space-3);
    font-family: var(--orion-font-heading);
    font-size: var(--orion-text-overline);
    line-height: var(--orion-leading-overline);
    font-weight: var(--orion-weight-semibold);
    letter-spacing: var(--orion-tracking-overline);
    text-transform: uppercase;
    color: var(--orion-color-muted);
}

.orion-timeline-item {
    --orion-timeline-tone: var(--orion-color-ornament);
    --orion-timeline-tone-icon: var(--orion-color-muted);
    position: relative;
    margin-block-end: var(--orion-timeline-item-gap);
}

.orion-timeline-item:last-child {
    margin-block-end: 0;
}

.orion-timeline-marker {
    position: absolute;
    inset-block-start: var(--orion-timeline-marker-top);
    inset-inline-start: calc(var(--orion-timeline-gutter) * -1);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--orion-timeline-marker);
    block-size: var(--orion-timeline-marker);
    border: 2px solid var(--orion-timeline-tone);
    border-radius: 50%;
    background-color: var(--orion-color-surface);
    color: var(--orion-timeline-tone-icon);
}

.orion-timeline-marker svg {
    inline-size: var(--orion-timeline-icon);
    block-size: var(--orion-timeline-icon);
}

/* Cor do marco por tipo de evento. */
.orion-timeline-item--TrackedEmailMessage { --orion-timeline-tone: var(--orion-brand-500); --orion-timeline-tone-icon: var(--orion-color-action); }
.orion-timeline-item--Appointment { --orion-timeline-tone: var(--orion-color-success); --orion-timeline-tone-icon: var(--orion-color-success); }
.orion-timeline-item--Note { --orion-timeline-tone: var(--orion-color-warning); --orion-timeline-tone-icon: var(--orion-color-warning); }
.orion-timeline-item--PhoneCall { --orion-timeline-tone: var(--orion-color-accent); --orion-timeline-tone-icon: var(--orion-color-accent); }
.orion-timeline-item--Attachment { --orion-timeline-tone: var(--orion-color-muted); --orion-timeline-tone-icon: var(--orion-color-muted); }
.orion-timeline-item--Lead { --orion-timeline-tone: var(--orion-color-action); --orion-timeline-tone-icon: var(--orion-color-action); }

/* Troca de vínculo: marco cheio na cor do acento, com o ícone em branco. */
.orion-timeline-item--milestone .orion-timeline-marker {
    background-color: var(--orion-color-accent);
    border-color: var(--orion-color-accent);
    color: var(--orion-color-on-action);
}

/* Cartão do evento: título de 14px, etiquetas, data em fonte monoespaçada à direita. */
.orion-timeline-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--orion-space-2) var(--orion-space-3);
}

.orion-timeline-when {
    margin-inline-start: auto;
    font-family: var(--orion-font-mono);
    font-size: var(--orion-text-xs);
    color: var(--orion-color-muted);
}

.orion-timeline-body {
    margin: var(--orion-space-1) 0 0;
    font-size: var(--orion-text-body-sm);
    line-height: var(--orion-leading-body-sm);
    color: var(--orion-color-body);
}

.orion-timeline-foot {
    margin: var(--orion-space-2) 0 0;
    font-size: var(--orion-text-xs);
    color: var(--orion-color-muted);
}

/* Cartão de evento não é clicável como um todo (as ações estão dentro dele): sem cursor de mão nem hover de link. */
.orion-timeline .orion-card {
    cursor: default;
}

/* Marco de mudança de vínculo (AJ-005 / PE-03): fundo e borda do acento, não um cartão comum. */
.orion-card--milestone {
    background-color: var(--orion-color-accent-surface);
    border-color: var(--orion-accent-400);
}

.orion-card--milestone .orion-timeline-milestone-kind {
    margin: 0;
    font-family: var(--orion-font-heading);
    font-size: var(--orion-text-overline);
    line-height: var(--orion-leading-overline);
    font-weight: var(--orion-weight-semibold);
    letter-spacing: var(--orion-tracking-overline);
    text-transform: uppercase;
    color: var(--orion-color-accent);
}

.orion-card--milestone .orion-timeline-milestone-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--orion-space-2);
    margin: var(--orion-space-1) 0 0;
    font-size: var(--orion-text-body-sm);
    font-weight: var(--orion-weight-semibold);
    color: var(--orion-color-heading);
}

.orion-card--milestone .orion-timeline-milestone-path svg {
    inline-size: 15px;
    block-size: 15px;
    color: var(--orion-color-accent);
}

.orion-card--milestone .orion-timeline-milestone-note {
    margin: var(--orion-space-2) 0 0;
    font-size: var(--orion-text-xs);
    color: var(--orion-color-accent);
}

/* Filtro por tipo como chips (AJ-044): a caixa de seleção real fica por dentro, escondida só visualmente. */
.orion-chip--check {
    cursor: pointer;
}

.orion-chip--check input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.orion-chip--check:has(input:checked) {
    background-color: var(--orion-color-action);
    border-color: var(--orion-color-action);
    color: var(--orion-color-on-action);
}

.orion-chip--check:has(input:focus-visible) {
    outline: 2px solid var(--orion-color-focus-ring);
    outline-offset: 2px;
}

.orion-timeline-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--orion-space-3);
    margin-block-end: var(--orion-space-4);
}

.orion-timeline-filter fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.orion-timeline-filter-period {
    display: flex;
    align-items: center;
    gap: var(--orion-space-2);
}

.orion-timeline-filter-period .form-select {
    inline-size: auto;
}

@media (max-width: 575.98px) {
    /* Celular (PessoaMobile): sem trilho, borda esquerda de 3px na cor do tipo e chips que rolam. */
    .orion-timeline {
        padding-inline-start: 0;
    }

    .orion-timeline::before,
    .orion-timeline-marker {
        display: none;
    }

    .orion-timeline-item > .orion-card {
        border-inline-start: 3px solid var(--orion-timeline-tone);
    }

    .orion-timeline-filter fieldset .orion-chip-row {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}

@media (max-width: 767.98px) {
    /* Celular: a pílula cresce um pouco (6px 11px) e não encolhe dentro da faixa rolável. */
    .orion-chip {
        flex: none;
        padding-block: calc(var(--orion-chip-padding-block) + 1px);
    }
}

/* AJ-054: medidas das telas da Pessoa em token, no lugar de style="". */
.orion-list-narrow {
    max-inline-size: var(--orion-measure-list);
}

.orion-select-kind {
    max-inline-size: var(--orion-select-kind-width);
}

.orion-measure-form {
    max-inline-size: var(--orion-measure-form);
}

.orion-measure-card {
    max-inline-size: var(--orion-measure-card);
}

/* -----------------------------------------------------------------------------
   Cabeçalho da Pessoa em faixa  ·  AJ-045 / AJ-046 / AJ-049

   Primeira linha: avatar, identidade e ações (à direita); abas em faixa de
   largura total logo abaixo. A Empresa fica em link na linha de contexto e a
   data de início do vínculo principal vem separada por um fio.
   -------------------------------------------------------------------------- */
.orion-ficha-header--bands {
    align-items: center;
}

.orion-ficha-header--bands > .orion-ficha-tabs {
    flex: 1 0 100%;
    margin-block-start: 0;
}

.orion-ficha-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--orion-space-2);
    margin-inline-start: auto;
}

.orion-ficha-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--orion-space-2);
    margin: var(--orion-space-1) 0 0;
    font-size: var(--orion-text-body-sm);
    color: var(--orion-color-text-secondary, var(--orion-color-muted));
}

.orion-ficha-context-sep {
    color: var(--orion-color-ornament);
}

.orion-ficha-company-link {
    font-weight: var(--orion-weight-semibold);
}

.orion-ficha-since {
    padding-inline-start: var(--orion-space-3);
    border-inline-start: 1px solid var(--orion-color-divider);
    font-size: var(--orion-text-xs);
    color: var(--orion-color-muted);
}

/* Celular: ações em grade de quatro colunas com alvo de toque de 44 px (AJ-049, parcial). */
@media (max-width: 575.98px) {
    .orion-ficha-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        inline-size: 100%;
    }

    .orion-ficha-actions .btn {
        inline-size: 100%;
    }
}

/* -----------------------------------------------------------------------------
   Ficha em duas colunas  ·  AJ-048 (Q-08)

   Principal flexível e coluna lateral de 372 px a partir de 1200 px; abaixo
   disso a coluna lateral vai para depois do conteúdo principal.
   -------------------------------------------------------------------------- */
.orion-ficha-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--orion-ficha-gap);
    margin-block-start: var(--orion-space-4);
}

.orion-ficha-main {
    min-inline-size: 0;
}

.orion-ficha-side {
    display: flex;
    flex-direction: column;
    gap: var(--orion-space-3);
    min-inline-size: 0;
}

@media (min-width: 1200px) {
    .orion-ficha-layout {
        grid-template-columns: minmax(0, 1fr) var(--orion-ficha-side-width);
        align-items: start;
    }
}

.orion-side-list {
    display: flex;
    flex-direction: column;
    gap: var(--orion-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.orion-side-list > div {
    display: flex;
    flex-direction: column;
}

.orion-side-list dt {
    font-size: var(--orion-text-xs);
    font-weight: var(--orion-weight-medium);
    color: var(--orion-color-muted);
}

.orion-side-list dd {
    margin: 0;
    font-size: var(--orion-text-body-sm);
    overflow-wrap: anywhere;
}

.orion-side-list--stack > li {
    display: flex;
    flex-direction: column;
}

.orion-side-company {
    font-weight: var(--orion-weight-semibold);
}

.orion-side-item--ended {
    opacity: var(--orion-opacity-disabled);
}

.orion-ficha-cnpj {
    font-size: var(--orion-text-caption);
}

.orion-measure-appointment {
    max-inline-size: var(--orion-measure-appointment);
}

/* -----------------------------------------------------------------------------
   Assinatura do Gmail (CT11-739, RF-021; UX CT11-743): cartão de "Meu cadastro" com a
   assinatura do próprio usuário, só leitura, e o botão "Atualizar". Compõe o botão, a
   etiqueta, a faixa, o vazio e o esqueleto da biblioteca; só acrescenta o arranjo.
   O conteúdo da assinatura mora num iframe sandbox: a moldura é do CRM, o dentro não é.
   ----------------------------------------------------------------------------- */
.orion-signature {
    display: flex;
    flex-direction: column;
    gap: var(--orion-space-3);
}

.orion-signature__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--orion-space-3);
}

.orion-signature__heading {
    display: flex;
    flex-direction: column;
    gap: var(--orion-space-2);
    min-inline-size: 0;
}

.orion-signature__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--orion-space-2);
}

.orion-signature__button {
    min-block-size: var(--orion-touch-target);
    display: inline-flex;
    align-items: center;
    gap: var(--orion-space-2);
}

.orion-signature.is-loading .orion-signature__icon {
    visibility: hidden;
}

.orion-signature__meta,
.orion-signature__status {
    margin: 0;
    font-size: var(--orion-text-caption);
    line-height: var(--orion-leading-caption);
    color: var(--orion-color-muted);
    font-variant-numeric: tabular-nums;
}

.orion-signature__status:empty {
    display: none;
}

.orion-signature__frame {
    display: block;
    inline-size: 100%;
    block-size: var(--orion-signature-frame-height);
    overflow: auto;
    border: 1px solid var(--orion-color-divider);
    border-radius: var(--orion-radius);
    background-color: var(--orion-color-surface);
}

/* Refazendo a busca, a assinatura anterior continua à vista, só esmaecida. */
.orion-signature.is-loading .orion-signature__frame {
    opacity: var(--orion-opacity-disabled);
}

.orion-signature__frame--sample {
    padding: var(--orion-space-3);
    color: var(--orion-color-body);
}

@media (max-width: 767.98px) {
    .orion-signature__actions,
    .orion-signature__button {
        inline-size: 100%;
        justify-content: center;
    }
}