/* Camada canônica do Uni Design System no UniFin — UNIFIN-FPA-03 (porte ODR-10).
 *
 * Portado de TechVision.Uni.Crm.Web/wwwroot/css/{uni-components,crm-knowledge,crm-shell,uni-mobile-ux}.css
 * @d1ca3acaf (integration/uniplim-solution-reconciliation-01), preservando classes, anatomia e tokens
 * `--uni-*`. Cada bloco abaixo cita a folha e as linhas de origem. Melhorias descobertas no porte voltam
 * para a origem por corte próprio; nada aqui é "correção local" de primitiva.
 *
 * O UniFin é anterior à authority (tokens `--unifin-*`, família `UniFin*`). Esta folha é aditiva: só as
 * superfícies novas ou convergidas consomem `--uni-*` e as classes abaixo; as telas antigas continuam
 * com `unifin.css` até um corte próprio de convergência.
 *
 * Tema de produto (UI-05A — 3 tokens declarados, estados derivados com contraste 4.5:1, como faz o
 * crm-theme.js do UniPlim, que recalcula a própria primária): o verde de marca `#00e04b` não passa 4.5:1
 * nem com texto branco nem como texto sobre branco — e as primitivas usam a primária nos dois papéis
 * (fundo do botão e rótulo do "+"). A primária derivada é o mesmo verde escurecido até AA (`#0b7f39`,
 * 5:1 nos dois papéis); no escuro, `#22a85c` com texto escuro. O verde de marca segue no shell legado.
 * Danger segue ODR-08 (`#cf4242`). Tema escuro: tokens redefinidos em `:root[data-unifin-theme="dark"]`
 * (VL-28/VL-46). O UniFin ainda não tem seletor de tema; ver docs/architecture/unifin/UNIFIN_FPA03_PLANNING_WEB.md.
 */

/* --- Portado de crm-shell.css linhas 11-15 @d1ca3acaf (tamanho-base do CrmIcon; as primitivas ajustam por contexto) --- */
.crm-icon {
    width: 20px;
    height: 20px;
    display: block;
}

:root {
    --uni-color-primary: #0b7f39;
    --uni-color-primary-hover: #096a30;
    --uni-color-primary-soft: var(--unifin-primary-soft);
    --uni-color-primary-soft-text: #0b6b31;
    --uni-color-on-primary: #ffffff;

    --uni-color-success: #1a9c5e;
    --uni-color-warning: #e2932e;
    --uni-color-danger: #cf4242;
    --uni-color-info: #4d8fd6;
    --uni-color-neutral: var(--unifin-muted);

    --uni-color-success-soft: #e5f7ee;
    --uni-color-warning-soft: #fdf1e2;
    --uni-color-danger-soft: #fbe9e9;
    --uni-color-info-soft: #eaf2fb;
    --uni-color-neutral-soft: var(--unifin-neutral-soft);

    --uni-color-app-bg: var(--unifin-bg);
    --uni-color-surface: var(--unifin-surface);
    --uni-color-border: var(--unifin-border);
    --uni-color-border-strong: var(--unifin-border-strong);
    --uni-color-text: var(--unifin-text);
    --uni-color-text-muted: var(--unifin-muted);
    --uni-color-text-subtle: #8a9aa1;
    --uni-color-focus-ring: #b45309;
    --uni-color-shell-bg: var(--unifin-sidebar);
    --uni-color-shell-bg-hover: var(--unifin-sidebar-hover);

    --uni-font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    --uni-font-size-2xs: 0.6875rem;
    --uni-font-size-xs: 0.75rem;
    --uni-font-size-sm: 0.8125rem;
    --uni-font-size-md: 0.875rem;
    --uni-font-size-lg: 1rem;
    --uni-font-size-xl: 1.25rem;
    --uni-font-size-2xl: 1.75rem;
    --uni-font-size-page-title: 1.375rem;
    --uni-font-weight-page-title: 700;

    --uni-space-1: 4px;
    --uni-space-2: 8px;
    --uni-space-3: 12px;
    --uni-space-4: 16px;
    --uni-space-5: 24px;
    --uni-space-6: 32px;
    --uni-space-7: 40px;
    --uni-space-8: 48px;

    --uni-z-sticky: 10;
    --uni-z-nav: 30;
    --uni-z-dropdown: 40;
    --uni-z-backdrop: 50;
    --uni-z-modal: 51;
    --uni-z-toast: 60;
    --uni-z-tooltip: 70;

    --uni-radius-xs: 4px;
    --uni-radius-sm: 6px;
    --uni-radius-md: 10px;
    --uni-radius-lg: 14px;
    --uni-radius-xl: 20px;
    --uni-radius-pill: 999px;

    --uni-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --uni-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
    --uni-shadow-lg: 0 18px 60px rgba(15, 23, 42, 0.16);
}

:root[data-unifin-theme="dark"] {
    --uni-color-primary: #22a85c;
    --uni-color-primary-hover: #2fbf6a;
    --uni-color-on-primary: #072a12;
    --uni-color-primary-soft: color-mix(in srgb, #00e04b 16%, #161c28);
    --uni-color-primary-soft-text: #7ff0a8;

    --uni-color-success: #4ec98a;
    --uni-color-warning: #f0ab4d;
    --uni-color-danger: #f87171;
    --uni-color-info: #74aae4;
    --uni-color-neutral: #94a3b8;

    --uni-color-success-soft: color-mix(in srgb, #1a9c5e 20%, #0f1420);
    --uni-color-warning-soft: color-mix(in srgb, #e2932e 20%, #0f1420);
    --uni-color-danger-soft: color-mix(in srgb, #e14848 20%, #0f1420);
    --uni-color-info-soft: color-mix(in srgb, #4d8fd6 20%, #0f1420);
    --uni-color-neutral-soft: #222b3a;

    --uni-color-app-bg: #0f1420;
    --uni-color-surface: #161c28;
    --uni-color-border: #262f3f;
    --uni-color-border-strong: #364154;
    --uni-color-text: #e6ebf2;
    --uni-color-text-muted: #94a3b8;
    --uni-color-text-subtle: #6b7a90;
    --uni-color-focus-ring: #f59e0b;

    --uni-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --uni-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --uni-shadow-lg: 0 18px 60px rgba(0, 0, 0, 0.55);
}

/* --- Portado de uni-components.css linhas 157-336 @d1ca3acaf --- */
/* ---------- Botão ---------- */

.app-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    gap: var(--uni-space-2);
    border-radius: var(--uni-radius-pill);
    border: 1px solid transparent;
    font-family: var(--uni-font-family);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

.app-button-md {
    min-height: 42px;
    padding: 0 var(--uni-space-5);
    font-size: var(--uni-font-size-md);
}

.app-button-sm {
    min-height: 34px;
    padding: 0 var(--uni-space-4);
    font-size: var(--uni-font-size-sm);
}

/* UNICHAT-VISUAL-SYSTEM-ASSISTED-CONVERGENCE-01 / C-01 - conformidade aberta de UI-03A: o degrau
   `lg` (48px) foi aprovado pelo proprietario e nunca existiu no CSS. Aditivo: nenhuma superficie
   consome hoje, entao nada muda ate alguem pedir Size="Lg". */
.app-button-lg {
    min-height: 48px;
    padding: 0 var(--uni-space-6);
    font-size: var(--uni-font-size-md);
}

.app-button-primary {
    background: var(--uni-color-primary);
    border-color: var(--uni-color-primary);
    color: var(--uni-color-on-primary);
}

.app-button-primary:hover:not(:disabled) {
    background: var(--uni-color-primary-hover);
    border-color: var(--uni-color-primary-hover);
}

.app-button-secondary {
    background: var(--uni-color-surface);
    border-color: color-mix(in srgb, var(--uni-color-primary) 30%, var(--uni-color-border));
    color: var(--uni-color-primary);
}

.app-button-secondary:hover:not(:disabled) {
    background: var(--uni-color-primary-soft);
}

.app-button-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--uni-color-text-muted);
}

.app-button-ghost:hover:not(:disabled) {
    background: var(--uni-color-neutral-soft);
    color: var(--uni-color-text);
}

.app-button-danger {
    background: var(--uni-color-surface);
    border-color: color-mix(in srgb, var(--uni-color-danger) 45%, var(--uni-color-border));
    color: var(--uni-color-danger);
}

.app-button-danger:hover:not(:disabled) {
    background: var(--uni-color-danger-soft);
}

/* DSA-DIV-FPA03-03 — ODR-02 (FROZEN, Owner 2026-09-26) aplicada no porte: a confirmação destrutiva usa danger
   PREENCHIDO. A origem @d1ca3acaf ainda tem o contorno (LEGACY, DS §4) e converge por corte próprio do DS. */
.uni-notice-actions .app-button-danger {
    background: var(--uni-color-danger);
    border-color: var(--uni-color-danger);
    color: #ffffff;
}

.uni-notice-actions .app-button-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--uni-color-danger) 86%, #000000); }

:root[data-unifin-theme="dark"] .uni-notice-actions .app-button-danger { color: #2a0b0b; }

.app-button:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

.app-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Ação canônica Uni: o chrome clicável é circular e o rótulo permanece visível fora do círculo. */
.app-icon-action {
    min-width: 62px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--uni-color-text-muted);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--uni-space-1);
    font-family: var(--uni-font-family);
    font-size: var(--uni-font-size-xs);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

.app-icon-action-circle {
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--uni-color-primary) 32%, var(--uni-color-border));
    border-radius: 50%;
    background: var(--uni-color-surface);
    color: var(--uni-color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.app-icon-action-circle .crm-icon {
    width: 19px;
    height: 19px;
}

.app-icon-action-label {
    max-width: 92px;
    color: currentColor;
    overflow-wrap: anywhere;
}

.app-icon-action:hover:not(:disabled) .app-icon-action-circle {
    border-color: var(--uni-color-primary);
    background: var(--uni-color-primary-soft);
    transform: translateY(-1px);
}

.app-icon-action:focus-visible {
    outline: none;
}

.app-icon-action:focus-visible .app-icon-action-circle {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

.app-icon-action-primary .app-icon-action-circle {
    border-color: var(--uni-color-primary);
    background: var(--uni-color-primary);
    color: var(--uni-color-on-primary);
}

.app-icon-action-primary:hover:not(:disabled) .app-icon-action-circle {
    background: var(--uni-color-primary-hover);
    color: var(--uni-color-on-primary);
}

.app-icon-action-danger {
    color: var(--uni-color-danger);
}

.app-icon-action-danger .app-icon-action-circle {
    border-color: color-mix(in srgb, var(--uni-color-danger) 55%, var(--uni-color-border));
    color: var(--uni-color-danger);
}

.app-icon-action-danger:hover:not(:disabled) .app-icon-action-circle {
    border-color: var(--uni-color-danger);
    background: var(--uni-color-danger-soft);
}

.app-icon-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* --- Portado de uni-components.css linhas 337-563 @d1ca3acaf --- */
/* ---------- Campo de formulário ---------- */

.app-field-label {
    font-size: var(--uni-font-size-sm);
    font-weight: 500;
    color: var(--uni-color-text);
}

/* C-06 PROMOVIDO A REGRA GERAL (decisão do proprietário, 2026-09-07): controle de 42px e raio
   `md`, pareando com a altura do botão (VL-10). Era override sob o escopo `.crm-contacts-page`,
   provado em duas superfícies independentes sem contraexemplo. */
.app-control {
    width: 100%;
    height: 42px;
    padding: 0 var(--uni-space-3);
    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-family: var(--uni-font-family);
    font-size: var(--uni-font-size-md);
}

/* VL-44 — campo de entrada NÃO usa o anel âmbar: borda na cor do produto + halo de 3px a 22%,
   acompanhando o raio do próprio controle. */
.app-control:focus {
    outline: none;
    border-color: var(--uni-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--uni-color-primary) 22%, transparent);
}

.app-control::placeholder {
    color: var(--uni-color-text-subtle);
}

/* UNICHAT-CONFIGURACOES-VISUAL-ASSISTED-CONVERGENCE-01 — o campo de várias linhas não tinha ficha
   canônica: `/contatos` resolvia com `class="app-control"` mais um `style` inline de altura e
   padding, que é valor local (proibição 3) repetido em cada uso. A variante existe aqui para que a
   altura venha do `rows` e o padding vertical exista de verdade, mantendo borda, raio, tipografia e
   o foco de VL-44 idênticos ao controle de uma linha. */
.app-control-textarea {
    height: auto;
    min-height: 84px;
    padding: var(--uni-space-3);
    line-height: 1.45;
    resize: vertical;
}

/* ---------- Ficha de campo de formulário (C-09, promovida) ----------
   Revisão do proprietário (2026-09-08), sobre o modal "Nova conversa": *"garanta o gap correto em
   cada campo do formulário"* e *"tem certeza que esse modal está seguindo padrão de tipografia,
   espaçamento, aparência?"*.

   A anatomia rótulo-acima-do-controle já estava resolvida e ACEITA em `/contatos`
   (`.crm-contacts-field`), mas presa à folha daquela superfície — usá-la aqui seria a proibição 1
   (classe emprestada). Por §15, a peça é promovida ao canônico com a MESMA geometria em vez de
   reescrita: `/contatos` migra quando reentrar no programa, sem mudança visual. */

.uni-field {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    min-width: 0;
}

/* O rótulo é o primeiro span; ajuda/erro dentro do campo têm a própria ficha (abaixo). */
.uni-field > span:not(.uni-field-hint):not(.uni-field-error) {
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-sm);
    font-weight: 500;
    user-select: none;
}

.uni-field-hint,
.uni-field-error {
    margin: 0;
    font-size: var(--uni-font-size-xs);
    line-height: 1.4;
}

.uni-field-hint { color: var(--uni-color-text-muted); }
.uni-field-error { color: var(--uni-color-danger); }

/* Checkbox é a exceção: o rótulo fica ao lado, não acima — quem decide é a caixa. */
.uni-field-check {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
    font-size: var(--uni-font-size-sm);
    color: var(--uni-color-text);
}

.uni-field-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--uni-color-primary);
}

/* Duas colunas quando cabem; uma quando não cabem. Mesma escada de VL-05. */
/* =====================================================================================
   Espaço reservado para o resultado de uma ação dentro de modal (F-06, decisão do Owner:
   o tamanho do modal NÃO muda com o conteúdo). O modal de formulário renderiza este slot
   sempre — vazio ou com um UniInlineNotice (uma linha, 36px) — e por isso tem a mesma altura
   antes e depois de um erro ou sucesso. Nunca usar UniSectionAlert (duas linhas, padding de
   seção) como feedback dentro de modal: ele empurra o rodapé.
   ===================================================================================== */
.uni-modal-feedback {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Altura FIXA (não mínima): o aviso vive dentro de 36px e nunca empurra o rodapé — nem por
       arredondamento de zoom/DPR, nem por texto que quebraria linha (fica em uma linha, com reticências
       e o texto inteiro no title). */
    height: 36px;
    flex: 0 0 36px;
    overflow: hidden;
}

.uni-modal-feedback .uni-inline-notice {
    height: 36px;
    min-height: 0;
    box-sizing: border-box;
}

/* Campo de senha com olho (UniPasswordInput) — mesma anatomia do login, cores da superfície clara. */
.uni-password-field {
    position: relative;
    display: flex;
    min-width: 0;
}

.uni-password-field .app-control {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 2.75rem;
}

.uni-password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--uni-radius-sm);
    background: transparent;
    color: var(--uni-color-text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.uni-password-toggle:hover,
.uni-password-toggle:focus-visible {
    background: color-mix(in srgb, var(--uni-color-primary) 10%, transparent);
    color: var(--uni-color-primary);
}

.uni-password-toggle:focus-visible {
    outline: 2px solid var(--uni-color-primary);
    outline-offset: 1px;
}

.uni-password-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.uni-password-toggle .icon-eye-off { display: none; }
.uni-password-toggle.is-visible .icon-eye { display: none; }
.uni-password-toggle.is-visible .icon-eye-off { display: inline-flex; }

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

/* =====================================================================================
   FORM GRID ALIGNMENT CONTRACT — UNICHAT-CUT-6 (decisão do Owner, 2026-09-18)
   docs/design-system/uni/forms.md › "Grade de campos: alinhamento dos controles".

   Em grade de duas ou mais colunas, os CONTROLES de uma mesma linha lógica começam na mesma
   altura mesmo quando os rótulos têm alturas diferentes (um rótulo de duas linhas não empurra
   só o seu campo para baixo). A grade garante isso pela ESTRUTURA, não por margem: cada campo é
   um subgrid de três trilhos do pai — rótulo / controle / ajuda-ou-erro — e o trilho do rótulo
   é o mesmo para todos os campos daquela linha (mede pelo mais alto). Rótulo curto assenta no pé
   do trilho (align-self: end) e mantém o gap fixo até o controle. O trilho de ajuda fica vazio
   (0px, sem gap próprio) quando não há ajuda/erro: erro aparece sem deslocar a linha seguinte
   além do próprio texto, e nada reserva espaço permanente.
   Continua correto quando o texto do rótulo muda; sem margin-top por campo, sem offsets.
   ===================================================================================== */
.uni-field-grid > .uni-field {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;
    align-content: start;
}

.uni-field-grid > .uni-field > span:first-child,
.uni-field-grid > .uni-field > .app-field-label:first-child {
    grid-row: 1;
    align-self: end;
    padding-bottom: var(--uni-space-2);
}

.uni-field-grid > .uni-field > .uni-field-hint,
.uni-field-grid > .uni-field > .uni-field-error {
    grid-row: 3;
    margin-top: var(--uni-space-1);
}

/* Campo que ocupa a linha inteira (textarea, título longo): mesma regra de rótulo/controle. */
.uni-field--wide { grid-column: 1 / -1; }

/* Largura reduzida: uma coluna, determinística — a grade não se comprime até cortar rótulo. */
@media (max-width: 767px) {
    .uni-field-grid { grid-template-columns: 1fr; }
}


/* --- Portado de uni-components.css linhas 637-799 @d1ca3acaf --- */
/* ---------- (i) informativo do rótulo de campo ----------
   UNICHAT-CONFIGURACOES-VISUAL-ASSISTED-CONVERGENCE-01, decisão do proprietário: rótulo curto mais
   um "(i)" que abre a explicação, em vez de tentar informar o campo inteiro no título. O rótulo
   longo quebrava em duas linhas e desalinhava a grade toda.

   Fica na camada canônica porque a decisão do proprietário foi explícita em adotá-lo como padrão
   ("podemos adotar isso"), não só em Configurações. */

.uni-field-info {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.uni-field-info-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--uni-color-text-subtle);
    cursor: pointer;
    transition: color 0.12s ease, background-color 0.12s ease;
}

.uni-field-info-trigger:hover,
.uni-field-info.is-open .uni-field-info-trigger {
    background: var(--uni-color-primary-soft);
    color: var(--uni-color-primary);
}

/* VL-24 — fora de campo de entrada, o realce de foco é o anel âmbar. */
.uni-field-info-trigger:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

.uni-field-info-trigger .crm-icon {
    width: 14px;
    height: 14px;
}

/* UNICHAT-PARALLEL-VISUAL-AUTHORITY-AND-WEB-RECONCILIATION-01 — OD-C da Visão geral e a regra
   G do Planner: o glifo continua com 18px, mas o alvo precisa de 44×44 no toque.

   Aqui a separação entre geometria pintada e área interativa FUNCIONA, ao contrário das abas:
   `.uni-field-info` é `position: relative` e vive solto na linha do rótulo, sem contêiner que
   recorte por overflow. O pseudo-elemento é filho do próprio <button>, então o toque nele
   aciona o botão sem handler novo e sem mudar uma única propriedade visível.

   Só no toque, de propósito. No desktop um alvo invisível de 44px cobriria o fim do rótulo à
   esquerda, e o ponteiro fino não precisa dele. `(pointer: coarse)` entra ao lado do
   breakpoint para alcançar a tela sensível ao toque que não é estreita. */
.uni-field-info-trigger { position: relative; }

@media (max-width: 1023px), (pointer: coarse) {
    .uni-field-info-trigger::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
}

/* VL-30 — o backdrop fecha ao clicar fora e ao rolar a página. */
.uni-field-info-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--uni-z-dropdown);
}

/* VL-30 — `position: fixed` para nunca ser recortado pelo overflow do container; a posição real
   quem decide é `uniUx.anchor`. VL-08 — flutuante sobre fundo claro leva borda E sombra. */
.uni-field-info-panel {
    position: fixed;
    z-index: var(--uni-z-tooltip);
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
    width: max-content;
    max-width: 280px;
    /* `uniUx.anchor` aplica um teto de altura calibrado para DROPDOWN DE OPÇÕES (300px) mais rolagem
       interna. Num popover de duas frases isso cortava o título e escondia o começo do texto —
       visto na captura da revisão. Aqui o conteúdo é sempre curto: sem teto e sem rolagem. A
       direção (abrir para cima quando não cabe embaixo) continua sendo decidida pela função. */
    max-height: none !important;
    overflow: visible !important;
    padding: var(--uni-space-3) var(--uni-space-4);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
    box-shadow: var(--uni-shadow-md);
    text-align: left;
    white-space: normal;
}

.uni-field-info-panel strong {
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
}

.uni-field-info-panel span {
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
    font-weight: 400;
    line-height: 1.45;
}

/* UNICHAT-CUT-6T — ação opcional no fim do painel do (i): botão pequeno, alinhado à esquerda, com respiro. */
.uni-field-info-panel .uni-field-info-action {
    align-self: flex-start;
    margin-top: var(--uni-space-2);
    text-decoration: none;
}

/* Rótulo com o (i) ao lado: o texto e o ícone ficam na mesma linha de base, e o rótulo continua
   sendo o `> span` que `.uni-field` já estiliza. */
.uni-field > span.uni-field-label-row {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-2);
}

/* ---------- Badge de status ---------- */

.app-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-1);
    padding: 2px var(--uni-space-3);
    border-radius: var(--uni-radius-pill);
    font-size: var(--uni-font-size-xs);
    font-weight: 600;
    white-space: nowrap;
}

.app-badge-neutral { background: var(--uni-color-neutral-soft); color: var(--uni-color-neutral); }
.app-badge-info    { background: var(--uni-color-info-soft);    color: var(--uni-color-info); }
.app-badge-success { background: var(--uni-color-success-soft); color: var(--uni-color-success); }
.app-badge-warning { background: var(--uni-color-warning-soft); color: var(--uni-color-warning); }
.app-badge-danger  { background: var(--uni-color-danger-soft);  color: var(--uni-color-danger); }

/* UNICHAT-MVP-UX-PRODUCT-EXPERIENCE-COMPLETION-01 (Fase A) — breadcrumb curto de "volta" para
   páginas que passaram a ser subárea de outra (Base de Conhecimento -> Atendente de IA;
   Templates Oficiais -> Campanhas). */
.uni-breadcrumb {
    display: inline-block;
    margin-bottom: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--uni-color-text-muted);
    text-decoration: none;
}
.uni-breadcrumb:hover { color: var(--uni-color-primary-soft-text); }


/* --- Portado de uni-components.css linhas 806-814 @d1ca3acaf --- */
/* ---------- Visibilidade por shell (contrato B/C) ---------- */
.uni-desktop-only { display: revert; }
.uni-mobile-only { display: none !important; }

@media (max-width: 1023px) {
    .uni-desktop-only { display: none !important; }
    .uni-mobile-only { display: revert !important; }
}


/* --- Portado de uni-components.css linhas 970-990 @d1ca3acaf --- */
/* ---------- Faixa de tabs/chips com scroll próprio (contrato N) ----------
   Scroll horizontal SOMENTE dentro da faixa; a página nunca rola lateralmente. */
.uni-tabs-scroll {
    display: flex;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.uni-tabs-scroll > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
}



/* --- Portado de uni-components.css linhas 1066-1239 @d1ca3acaf --- */
/* ---------- UniButton: spinner (fecha G21) ---------- */
.app-button-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: uni-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .app-button-spinner { animation-duration: 1.6s; }
}

/* ---------- UniModal (D-03: decisão / formulário pequeno) ---------- */
.uni-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--uni-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--uni-space-4);
    background: rgba(15, 23, 42, 0.46);
}

.uni-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: min(720px, 92vh);
    background: var(--uni-color-surface);
    border-radius: var(--uni-radius-lg);
    box-shadow: var(--uni-shadow-md);
    outline: none;
}

.uni-modal-sm { max-width: 420px; }
.uni-modal-md { max-width: 640px; }
.uni-modal-lg { max-width: 900px; }
/* INSTAGRAM-EXPERIENCE-FIDELITY-POLISH-01 — degrau XL (Caixa de comentários com a aba Publicações). */
.uni-modal-xl { max-width: 1120px; }
.uni-modal-header-actions { display: inline-flex; align-items: center; gap: var(--uni-space-2); flex: 0 0 auto; margin-left: auto; }

.uni-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--uni-space-3);
    padding: var(--uni-space-5) var(--uni-space-5) var(--uni-space-3);
    border-bottom: 1px solid var(--uni-color-border);
}

.uni-modal-title-row { display: flex; align-items: center; gap: var(--uni-space-2); min-width: 0; }
.uni-modal-title-actions { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.uni-modal-icon-button {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0;
    border-radius: var(--uni-radius-pill); background: transparent; color: var(--uni-color-text-muted); cursor: pointer; padding: 0;
}
.uni-modal-icon-button .crm-icon { width: 18px; height: 18px; }
.uni-modal-icon-button:hover { background: var(--uni-color-neutral-soft); color: var(--uni-color-text); }
.uni-modal-icon-button.is-on { color: var(--uni-color-primary); }
.uni-modal-icon-button:focus-visible { outline: 2px solid var(--uni-color-focus-ring); outline-offset: 2px; }
.uni-modal-icon-button:disabled { opacity: .5; cursor: default; }

.uni-modal-header-titles h2 {
    margin: 0;
    font-size: var(--uni-font-size-lg);
    font-weight: 700;
    color: var(--uni-color-text);
}

.uni-modal-header-titles p {
    margin: 4px 0 0;
    font-size: var(--uni-font-size-sm);
    color: var(--uni-color-text-muted);
}

.uni-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--uni-radius-pill);
    background: transparent;
    color: var(--uni-color-text-muted);
    cursor: pointer;
    flex: 0 0 auto;
}

.uni-modal-close:hover { background: var(--uni-color-neutral-soft); color: var(--uni-color-text); }
.uni-modal-close:focus-visible { outline: 2px solid var(--uni-color-focus-ring); outline-offset: 2px; }

/* UNIPLIM-AUTOMATION-FOLLOWUP-03 — navegação em níveis dentro do modal (DESIGN_GAPS G-FU03-NAV).
   "‹ nível anterior" no canto superior esquerdo, acima do título; o rótulo curto diz para onde se volta. */
.uni-modal-back {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-1);
    max-width: 100%;
    min-height: 32px;
    margin: calc(-1 * var(--uni-space-1)) 0 var(--uni-space-1) calc(-1 * var(--uni-space-2));
    padding: var(--uni-space-1) var(--uni-space-3) var(--uni-space-1) var(--uni-space-1);
    border: 0;
    border-radius: var(--uni-radius-pill);
    background: transparent;
    color: var(--uni-color-primary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}
.uni-modal-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uni-modal-back .crm-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.uni-modal-back:hover { background: var(--uni-color-neutral-soft); }
.uni-modal-back:focus-visible { outline: 2px solid var(--uni-color-focus-ring); outline-offset: 2px; }
.uni-modal-header-titles h2:focus { outline: none; }
/* Com voltar, o bloco de títulos ocupa a largura livre: o rótulo só é cortado quando de fato não cabe. */
.uni-modal-header-titles:has(> .uni-modal-back) { flex: 1 1 auto; }

/* O conteúdo de cada nível entra pelo lado da navegação: para a frente vem da direita; ao voltar, da esquerda. */
.uni-modal-level { animation: uni-modal-level-forward 0.18s ease-out; }
.uni-modal-level--back { animation-name: uni-modal-level-back; }

@keyframes uni-modal-level-forward {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes uni-modal-level-back {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .uni-modal-level { animation: none; }
}

/* FU-03 — faixa fixa do cabeçalho (stepper de assistente). Não rola com o corpo: a posição no
   fluxo é justamente o que o operador precisa ver enquanto preenche. */
.uni-modal-subheader {
    flex: 0 0 auto;
    padding: var(--uni-space-5) var(--uni-space-5) var(--uni-space-4);
    border-bottom: 1px solid var(--uni-color-border);
    background: var(--uni-color-surface);
}

.uni-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--uni-space-5);
}

.uni-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--uni-space-3);
    padding: var(--uni-space-4) var(--uni-space-5);
    border-top: 1px solid var(--uni-color-border);
}

@media (max-width: 767px) {
    .uni-modal-backdrop { padding: 0; align-items: flex-end; }
    .uni-modal { max-width: 100%; max-height: 92vh; border-radius: var(--uni-radius-lg) var(--uni-radius-lg) 0 0; }
    .uni-modal-footer { flex-direction: column-reverse; align-items: stretch; }
}


/* --- Portado de uni-components.css linhas 1330-1540 @d1ca3acaf --- */
/* ---------- UniTabs (D-02/D-07) — generaliza .crm-ticket-tabs ---------- */
/* VL-16, revisado pela revisao visual do proprietario (2026-09-07).
   A primeira tentativa deste corte trocou a aba "de sistema" (borda inferior de 2px) por pilulas
   soltas. O proprietario apontou a referencia certa: o SEGMENTED CONTROL do UniCursos (calendario
   e comunicacao), que e um trilho fechado com fundo proprio e a aba ativa preenchida.
   Duas correcoes que vieram junto:
   - `width: fit-content` -> o trilho passa a ter o tamanho do conteudo. Antes, `display:flex`
     dentro de um container em coluna esticava a barra pela largura toda e as abas ficavam
     "espremidas" numa faixa larga e vazia;
   - `margin-bottom` -> na pagina de Listas as abas encostavam no titulo da secao seguinte. */
.uni-tabs {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    /* MEDIDO no navegador: sem isto o trilho renderiza com 8px de altura e as abas de 34px
       transbordam para fora dele. `.crm-page-container` é flex-column; como item flex, o trilho
       herda `flex-shrink: 1` e é espremido quando o conteúdo da página excede a altura. É o mesmo
       defeito que uni-mobile-ux.css já corrigia — mas só dentro da media query de mobile, e por
       isso o desktop continuava quebrado. */
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    gap: var(--uni-space-1);
    padding: 3px;
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-pill);
    background: color-mix(in srgb, var(--uni-color-neutral-soft) 70%, var(--uni-color-surface));
}

/* UNICHAT-VISUAL-SYSTEM-ASSISTED-CONVERGENCE-01 / VL-16.
   A anatomia anterior era borda inferior de 2px - o padrao de aba "de sistema" que o contrato
   proibe, e que diverge da anatomia canonica registrada em components.md ("ativo com fundo
   primary-soft", generalizada de TicketTabs/ConversationSwitcher). O componente nasceu assim no
   corte reprovado visualmente. Corrigido para a anatomia canonica: pilula de 42px.
   Efeito colateral verificado antes de aplicar: a UNICA superficie que consome <UniTabs> hoje e
   CrmMyAccountDrawer, que o proprietario ja reprovou explicitamente - nao ha superficie aprovada
   mudando de aparencia em silencio. */
.uni-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-1);
    min-height: 34px;
    padding: 0 var(--uni-space-3);
    border: 0;
    border-radius: var(--uni-radius-pill);
    background: transparent;
    color: var(--uni-color-text-muted);
    font-family: var(--uni-font-family);
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.14s ease, color 0.14s ease;
}

/* VL-24 mantida: selecionado e hover nao sao a mesma aparencia. O UniCursos usa o mesmo
   preenchimento para os dois, o que faz o hover mentir que a aba ja esta ativa. */
.uni-tab:hover:not(:disabled):not(.is-active) {
    background: var(--uni-color-surface);
    color: var(--uni-color-text);
}

.uni-tab.is-active {
    background: var(--uni-color-primary);
    color: var(--uni-color-on-primary);
}

.uni-tab:focus-visible { outline: 2px solid var(--uni-color-focus-ring); outline-offset: 2px; }
.uni-tab:disabled { opacity: 0.5; cursor: not-allowed; }

.uni-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--uni-radius-pill);
    background: var(--uni-color-neutral-soft);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
    font-weight: 700;
}

/* Aba ativa agora tem fundo preenchido: o contador precisa contrastar com ele, nao com a pagina. */
.uni-tab.is-active .uni-tab-count {
    background: color-mix(in srgb, var(--uni-color-on-primary) 26%, transparent);
    color: var(--uni-color-on-primary);
}

/* UNICHAT-PARALLEL-VISUAL-AUTHORITY-AND-WEB-RECONCILIATION-01 — metade de acessibilidade de
   CF-02. Por §0 acessibilidade está ACIMA deste contrato, então esta parte não espera decisão
   de estética: `.uni-tab` mede 34px, e D-38/VL-27 pedem 44px de alvo no toque.

   MEDIDO antes de escolher a abordagem: a tentativa de separar geometria pintada de área
   interativa — pseudo-elemento de 44px centrado na pílula de 34px — NÃO funciona aqui. O
   trilho é `.uni-tabs-scroll`, que carrega `overflow-y: hidden`; a caixa do pseudo-elemento
   é recortada na altura do trilho (40px de padding box) e o alvo real nunca chega a 44. Não
   há truque: para um alvo de 44px dentro de um trilho com borda, o trilho precisa ter 44px.

   Então a altura cresce de verdade, e SOMENTE no toque. O desktop fica exatamente como as
   oito superfícies aceitaram. E no mobile isto não estreia nada: é a mesma regra que a
   variante de 42px já aplicava, já vista e aceita pelo proprietário em Tarefas e no Kanban —
   está sendo estendida às demais abas, não inventada.

   `min-width` junto porque D-38 pede 44 nos DOIS eixos, e rótulo curto ("7d", "Mês") produz
   pílula de ~40px. Cresce a caixa real, não uma sobreposição: abas vizinhas continuam sem
   alvos que se cobrem. */
@media (max-width: 1023px) {
    .uni-tab {
        min-height: 44px;
        min-width: 44px;
        justify-content: center;
    }
}

/* ---------- UniSectionAlert (D-04/F-03) — status persistente de seção, 4 tons ---------- */
.uni-section-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--uni-space-3);
    padding: var(--uni-space-4);
    border: 1px solid transparent;
    border-radius: var(--uni-radius-md);
    /* UNICHAT-CUT-6S (F-99) — espaçamento próprio: nunca grudado em busca/inputs/cabeçalhos. */
    margin-block: var(--uni-space-2) var(--uni-space-4);
}
.uni-section-alert:first-child { margin-top: 0; }

/* F-99 — "X" para fechar, alinhado ao topo do aviso; espaço para ele não colidir com o texto. */
.uni-section-alert-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -4px -6px -4px 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--uni-color-text-muted);
    cursor: pointer;
}
.uni-section-alert-close:hover { background: color-mix(in srgb, currentColor 10%, transparent); color: var(--uni-color-text); }
.uni-section-alert-close:focus-visible { outline: 2px solid var(--uni-color-primary); outline-offset: 1px; }
.uni-section-alert-close .crm-icon { width: 14px; height: 14px; }

.uni-section-alert-icon { flex: 0 0 auto; display: inline-flex; margin-top: 1px; }
.uni-section-alert-content { flex: 1 1 auto; min-width: 0; }
.uni-section-alert-title { margin: 0; font-size: var(--uni-font-size-md); font-weight: 700; color: var(--uni-color-text); }
.uni-section-alert-message { margin: 4px 0 0; font-size: var(--uni-font-size-sm); color: var(--uni-color-text-muted); }
.uni-section-alert-action { flex: 0 0 auto; }

.uni-section-alert-info { background: var(--uni-color-info-soft); border-color: color-mix(in srgb, var(--uni-color-info) 30%, transparent); }
.uni-section-alert-info .uni-section-alert-icon { color: var(--uni-color-info); }

.uni-section-alert-success { background: var(--uni-color-success-soft); border-color: color-mix(in srgb, var(--uni-color-success) 30%, transparent); }
.uni-section-alert-success .uni-section-alert-icon { color: var(--uni-color-success); }

.uni-section-alert-warning { background: var(--uni-color-warning-soft); border-color: color-mix(in srgb, var(--uni-color-warning) 35%, transparent); }
.uni-section-alert-warning .uni-section-alert-icon { color: var(--uni-color-warning); }

.uni-section-alert-danger { background: var(--uni-color-danger-soft); border-color: color-mix(in srgb, var(--uni-color-danger) 35%, transparent); }
.uni-section-alert-danger .uni-section-alert-icon { color: var(--uni-color-danger); }

/* ---------- UniSelect (D-43) — nativo estilizado, seta afastada da borda (picker-aprovado.png) ---------- */
.uni-select {
    position: relative;
    display: inline-flex;
    width: 100%;
}

/* C-06 promovido: select acompanha o campo — 42px e raio `md`. VL-10 pareia os três
   (input, select, combobox) com o botão de 42px. */
.uni-select-control {
    width: 100%;
    height: 42px;
    padding: 0 var(--uni-space-7) 0 var(--uni-space-3);
    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-family: var(--uni-font-family);
    font-size: var(--uni-font-size-md);
    appearance: none;
    cursor: pointer;
}

/* VL-44 — campo usa o realce neon azul, nunca o anel âmbar. */
.uni-select-control:focus {
    outline: none;
    border-color: var(--uni-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--uni-color-primary) 22%, transparent);
}

.uni-select-caret {
    position: absolute;
    top: 50%;
    right: var(--uni-space-3);
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--uni-color-text-muted);
    pointer-events: none;
}

.uni-select.is-disabled .uni-select-control { opacity: 0.6; cursor: not-allowed; }


/* --- Portado de uni-components.css linhas 1701-1954 @d1ca3acaf --- */
/* ============================================================================
   Lista canônica do UniChat (UniList)

   UNICHAT-VISUAL-SYSTEM-ASSISTED-CONVERGENCE-01 — revisão visual do proprietário (2026-09-07):
   "Observe a lista de 'Turmas cadastradas' do UniCursos. Ela está dentro de um card, olhe a fonte
   e tipografia do título e dos demais componentes, o column header, o botão de ação circular com
   rótulo. Copie o modelo da página /classes. Esse será o padrão do UniChat para listas."

   Modelo de origem medido em feature/unicursos-efam-finance-ops-02 @ f92ff5d8
   (ClassesPage.razor + .table-card/.courses-list-toolbar/.admin-table).

   A diferença estrutural em relação à tabela que este corte tinha entregue: a lista NÃO é uma
   tabela com linhas separadas por régua. É um card contendo linhas que são elas próprias cartões
   delimitados, separados por espaço. O respiro entre linhas é o que dá o acabamento.

   Valores adaptados à escada do UniChat (VL-01/VL-02): o modelo usa font-weight 650 e 0.82rem,
   ambos fora da escada — aqui viram 600 e `sm` (13px), que é o degrau equivalente.
   ============================================================================ */

.uni-list-card {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-5);
    padding: var(--uni-space-5);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
    box-shadow: var(--uni-shadow-sm);
}

.uni-list-head {
    display: flex;
    align-items: flex-start;
    gap: var(--uni-space-4);
    min-width: 0;
}

.uni-list-head-copy {
    display: grid;
    flex: 1 1 280px;
    gap: var(--uni-space-1);
    min-width: 0;
}

.uni-list-title {
    margin: 0;
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    line-height: 1.2;
}

.uni-list-subtitle {
    margin: 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
    line-height: 1.45;
}

.uni-list-head-controls {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: var(--uni-space-3);
    min-width: 0;
    margin-left: auto;
}

/* Ação circular com rótulo do modelo. VG-07 proíbe repetir este padrão em CADA LINHA de uma
   lista; aqui ele vive no cabeçalho do card, que é exatamente o uso que a decisão reserva. */
.uni-list-action {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--uni-space-2);
    border: 0;
    background: transparent;
    color: var(--uni-color-primary);
    font-family: var(--uni-font-family);
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.uni-list-action-circle {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--uni-color-primary);
    color: var(--uni-color-on-primary);
    transition: background-color 0.14s ease;
}

.uni-list-action:hover .uni-list-action-circle { background: var(--uni-color-primary-hover); }
.uni-list-action:focus-visible { outline: 2px solid var(--uni-color-focus-ring); outline-offset: 2px; border-radius: var(--uni-radius-sm); }
.uni-list-action .crm-icon { width: 16px; height: 16px; }

/* ---- Corpo da lista ---- */

.uni-list {
    display: grid;
    gap: var(--uni-space-2);
    min-width: 0;
}

.uni-list-row {
    display: grid;
    align-items: center;
    gap: var(--uni-space-3);
    min-width: 0;
    padding: var(--uni-space-3);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-md);
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.uni-list-row > * { min-width: 0; }

/* A última coluna é sempre a de ações — alinhada à direita, no cabeçalho e nas linhas. */
.uni-list-row > :last-child {
    justify-self: end;
    text-align: right;
}

.uni-list-row-head {
    padding: var(--uni-space-2) var(--uni-space-3);
    border-color: transparent;
    background: var(--uni-color-neutral-soft);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    user-select: none;
}

.uni-list-row-link { cursor: pointer; }

.uni-list-row-link:hover {
    border-color: color-mix(in srgb, var(--uni-color-primary) 40%, var(--uni-color-border));
    background: color-mix(in srgb, var(--uni-color-primary-soft) 40%, var(--uni-color-surface));
}

.uni-list-row-link:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

.uni-list-row strong,
.uni-list-row small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

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

.uni-list-row small {
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
    line-height: 1.4;
}

.uni-list-empty {
    padding: var(--uni-space-6);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-md);
    text-align: center;
}

/* ≤767: o cabeçalho de coluna some e cada linha vira um cartão em pilha (VL-27). */
@media (max-width: 767px) {
    .uni-list-card { padding: var(--uni-space-4); gap: var(--uni-space-4); }
    .uni-list-head { flex-direction: column; }
    /* UNICHAT-CONFIGURACOES-VISUAL-ASSISTED-CONVERGENCE-01 — defeito medido no navegador a 390px:
       `.uni-list-head-copy` declara `flex: 1 1 280px` para o cabeçalho em LINHA, onde 280px é
       largura mínima. Ao virar coluna, o mesmo `flex-basis` passa a ser ALTURA, e o título ficava
       separado da descrição por um vão de ~280px. É a mesma família de armadilha do `flex-grow`
       herdado do contexto de linha já registrada no programa. Correção de defeito, não de
       composição: `/contatos` e `/usuarios` usam o mesmo cabeçalho e tinham o mesmo vão. */
    .uni-list-head-copy { flex: 0 0 auto; width: 100%; }
    .uni-list-head-controls { margin-left: 0; width: 100%; }
    .uni-list-row-head { display: none; }
    .uni-list-row { grid-template-columns: minmax(0, 1fr) !important; }
    .uni-list-row > :last-child { justify-self: start; text-align: left; }
}

/* Ação de linha com ícone circular e rótulo externo — padrão do UniCursos, pedido explícito do
   proprietário na revisão visual de 2026-09-07 ("devem ser botões circulares, com ícones internos,
   e rótulos externos. Padrão do UniCursos, deve ser aplicado também no UniChat").

   EMENDA A VG-07. A decisão VG-07 (2026-09-07) proibia repetir ícone+rótulo em cada linha de
   lista, medindo no UniCursos 167 usos de 68x68px que dobravam a altura da linha. O proprietário
   reviu essa restrição com a implementação na frente. A emenda preserva o motivo original ao
   limitar o número: UMA ação rotulada por linha, com o excedente no menu — o custo que VG-07
   nomeia (quebra em duas linhas com 3+ botões) não se materializa com uma só. */
.uni-row-action {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 56px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--uni-color-text-muted);
    font-family: var(--uni-font-family);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
}

.uni-row-action-circle {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--uni-color-border);
    border-radius: 50%;
    background: var(--uni-color-surface);
    color: var(--uni-color-text-muted);
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.uni-row-action:hover .uni-row-action-circle {
    border-color: var(--uni-color-primary);
    background: var(--uni-color-primary-soft);
    color: var(--uni-color-primary);
}

.uni-row-action:hover { color: var(--uni-color-primary); }

.uni-row-action:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--uni-radius-sm);
}

.uni-row-action .crm-icon { width: 16px; height: 16px; }


/* --- Portado de uni-components.css linhas 1955-1999 @d1ca3acaf --- */
/* ============================================================================
   Tema escuro dos controles nativos — revisão do proprietário (2026-09-07)

   "Os checkbox continuam com fundo branco, mesmo com dark mode. Esse problema é geral no app.
   Se necessário criamos nosso próprio checkbox."

   Não é necessário criar componente. O que faltava é declarar o esquema de cor do documento:
   sem `color-scheme`, o navegador desenha TODO controle nativo — checkbox, radio, barra de
   rolagem, seletor de data, spinner numérico — com a paleta clara, independentemente do CSS do
   app. Uma linha por tema resolve a família inteira e continua valendo para qualquer controle
   nativo que apareça depois.

   Um componente próprio de checkbox resolveria só o checkbox, custaria manutenção e teria que
   reimplementar estado indeterminado, foco e acessibilidade que o nativo já entrega. */

:root {
    color-scheme: light;
}

:root[data-unifin-theme="dark"] {
    --uni-color-primary: #22a85c;
    --uni-color-primary-hover: #2fbf6a;
    --uni-color-on-primary: #072a12;
    color-scheme: dark;
}

/* A cor de marcação acompanha o produto em ambos os temas. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--uni-color-primary);
}

/* O popup do <select> é desenhado pelo navegador a partir das próprias <option>. Com
   `color-scheme: dark` o campo fechado já escurece, mas a <option> nasce com fundo transparente:
   o popup aberto herda o padrão do sistema e sai claro dentro do tema escuro. Declarar a cor na
   opção é o que fecha o caso — vale para qualquer <select> do app, não só os estilizados.

   Revisão do proprietário, 2026-09-07. */
:root[data-unifin-theme="dark"] select option,
:root[data-unifin-theme="dark"] select optgroup {
    background-color: var(--uni-color-surface);
    color: var(--uni-color-text);
}

:root[data-unifin-theme="dark"] select optgroup {
    font-weight: 700;
}


/* --- Portado de uni-components.css linhas 2746-2799 @d1ca3acaf --- */
/* ============================================================================
   UNICHAT-WEB-MVP-PRE-PRODUCTION-CORRECTIONS-01 (D2) — sobreposições resistentes a conteúdo longo.
   Medido em produção (Campanhas, 2026-09-11): um erro técnico de 800+ caracteres no UniNoticeModal
   crescia sem teto e sem quebra em tokens longos (URLs de stack trace). Regras: largura responsiva,
   altura limitada ao viewport, corpo rolável, cabeçalho e rodapé fixos, quebra de qualquer token.
   crm-knowledge.css (dono original do .uni-notice-*) carrega DEPOIS desta folha, então as regras
   aqui usam o ancestral .uni-notice-overlay para vencer por especificidade, não por ordem.
   ============================================================================ */
.uni-notice-overlay .uni-notice-modal {
    max-height: min(640px, calc(100vh - 32px));
    grid-template-rows: auto auto;
    align-items: start;
}

.uni-notice-overlay .uni-notice-content {
    min-height: 0;
    max-height: min(440px, calc(100vh - 200px));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.uni-notice-overlay .uni-notice-modal h2,
.uni-notice-overlay .uni-notice-message,
.uni-notice-overlay .uni-notice-eyebrow {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.uni-notice-overlay .uni-notice-message { white-space: pre-line; }

.uni-notice-actions { flex: 0 0 auto; }

.uni-modal { min-height: 0; }
.uni-modal-header,
.uni-modal-footer { flex: 0 0 auto; }
.uni-modal-body {
    min-height: 0;
    overscroll-behavior: contain;
    overflow-wrap: anywhere;
}
.uni-modal-header-titles { min-width: 0; }
.uni-modal-header-titles h2,
.uni-modal-header-titles p { overflow-wrap: anywhere; }

@media (max-width: 767px) {
    .uni-notice-overlay .uni-notice-modal { width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
    .uni-notice-overlay .uni-notice-content { max-height: calc(100vh - 220px); }
}

/* CUT 5J — ficha de campo com caixa de seleção à esquerda e hint abaixo do rótulo (compartilhada). */
.uni-field-inline { display: grid; grid-template-columns: auto 1fr; column-gap: var(--uni-space-2); align-items: center; }
.uni-field-inline input[type="checkbox"] { grid-row: 1; }
.uni-field-inline > small { grid-column: 2; }


/* --- Portado de crm-knowledge.css linhas 185-293 @d1ca3acaf --- */
.uni-notice-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400; /* acima de .tpl-overlay (1200) — o aviso empilha sobre qualquer modal */
    display: grid;
    place-items: center;
    padding: 24px;
}

.uni-notice-scrim {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.42);
    cursor: default;
}

.uni-notice-modal {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    width: min(440px, calc(100vw - 32px));
    border: 1px solid var(--uni-color-border);
    border-radius: 16px;
    padding: 24px;
    background: var(--uni-color-surface);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.uni-notice-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.uni-notice-icon .crm-icon { width: 22px; height: 22px; }

.uni-notice-content { display: grid; gap: 4px; min-width: 0; }

.uni-notice-eyebrow {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--uni-color-text-muted);
}

.uni-notice-modal h2 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--uni-color-text);
}

.uni-notice-message {
    margin: 0;
    color: var(--uni-color-text-muted);
    line-height: 1.5;
}

.uni-notice-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* UNICHAT-MVP-UX-PRODUCT-EXPERIENCE-COMPLETION-01 (Fase A.1) — variante destrutiva do
   UniConfirmModal, mesma linguagem visual do tom "error". */
.uni-notice-modal-danger { border-color: var(--uni-color-danger); }
.uni-notice-modal-danger .uni-notice-icon {
    background: color-mix(in srgb, var(--uni-color-danger) 14%, var(--uni-color-surface));
    color: var(--uni-color-danger);
}

.uni-notice-modal-warning { border-color: var(--uni-color-warning); }
.uni-notice-modal-warning .uni-notice-icon {
    background: color-mix(in srgb, var(--uni-color-warning) 16%, var(--uni-color-surface));
    color: var(--uni-color-warning);
}

.uni-notice-modal-error { border-color: var(--uni-color-danger); }
.uni-notice-modal-error .uni-notice-icon {
    background: color-mix(in srgb, var(--uni-color-danger) 14%, var(--uni-color-surface));
    color: var(--uni-color-danger);
}

.uni-notice-modal-success { border-color: var(--uni-color-success); }
.uni-notice-modal-success .uni-notice-icon {
    background: color-mix(in srgb, var(--uni-color-success) 16%, var(--uni-color-surface));
    color: var(--uni-color-success);
}

.uni-notice-modal-info { border-color: var(--uni-color-info); }
.uni-notice-modal-info .uni-notice-icon {
    background: color-mix(in srgb, var(--uni-color-info) 16%, var(--uni-color-surface));
    color: var(--uni-color-info);
}

@media (max-width: 480px) {
    .uni-notice-modal { grid-template-columns: 1fr; text-align: left; }
    .uni-notice-icon { justify-self: start; }
}


/* --- Portado de crm-shell.css linhas 616-700 @d1ca3acaf --- */
.crm-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.crm-page-header-text h1 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--uni-color-text);
}

.crm-page-header-text p {
    margin: 0;
    font-size: 13.5px;
    color: var(--uni-color-text-muted);
}

.crm-page-header-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}

.crm-empty-state {
    background: var(--uni-color-surface);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    color: var(--uni-color-text-muted);
}

.crm-empty-state-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--uni-color-primary-soft);
    color: var(--uni-color-primary-soft-text);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.crm-empty-state-icon svg {
    width: 22px;
    height: 22px;
}

.crm-empty-state h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--uni-color-text);
}

.crm-empty-state p {
    margin: 0;
    max-width: 460px;
    font-size: 13.5px;
    line-height: 1.5;
}

.crm-empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
}


/* --- Portado de uni-mobile-ux.css linhas 255-452 @d1ca3acaf --- */
.uni-menu {
    position: relative;
    display: inline-flex;
}

.uni-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--uni-z-dropdown) - 1);
    background: transparent;
}

/* UNICHAT-VISUAL-SYSTEM-ASSISTED-CONVERGENCE-01, revisao visual do proprietario (2026-09-07):
   "o icone dos 3 pontinhos pode ficar sem contorno. So o icone."
   O gatilho de overflow nao e uma acao de igual peso as outras da barra — desenhar uma borda em
   volta dele dava a ele o mesmo peso visual de um botao secundario. Passa a ser so o glifo, com o
   alvo de toque preservado, e ganha chrome apenas no hover/foco. */
.uni-menu-trigger,
.uni-menu-row-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--uni-color-text-muted);
    border-radius: 999px;
    cursor: pointer;
    min-width: 36px;
    min-height: 36px;
    padding: 0 8px;
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
}

.uni-menu-row-trigger {
    border-color: transparent;
    background: transparent;
    color: var(--uni-color-text-muted);
    min-width: 40px;
    min-height: 40px;
    padding: 0;
}

.uni-menu-trigger:hover,
.uni-menu-row-trigger:hover,
.uni-menu-trigger:focus-visible,
.uni-menu-row-trigger:focus-visible {
    color: var(--uni-color-primary);
    background: var(--uni-color-primary-soft);
    border-color: transparent;
}

.uni-menu-row-trigger:hover,
.uni-menu-row-trigger:focus-visible {
    border-color: transparent;
    background: var(--uni-color-primary-soft);
}

.uni-menu-trigger .crm-icon,
.uni-menu-row-trigger .crm-icon {
    width: 18px;
    height: 18px;
}

.uni-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: var(--uni-z-dropdown);
    min-width: 220px;
    max-width: min(320px, calc(100vw - 24px));
    padding: 6px;
    background: var(--uni-color-surface);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    box-shadow: var(--uni-shadow-md);
    color: var(--uni-color-text);
    text-align: left;
    /* Observação do proprietário (2026-09-08): o conteúdo do menu vazava para fora do painel em
       Atendimentos. `uniUx.anchor` já media o espaço disponível e escrevia `max-height`, mas sem
       `overflow-y` o conteúdo simplesmente transbordava a caixa em vez de rolar dentro dela — a
       altura era respeitada pelo painel e ignorada pelo conteúdo. Vale para todo UniMenu do app,
       não só para esta superfície. */
    overflow-y: auto;
    overscroll-behavior: contain;
}


/* O painel recebe foco por programa quando abre (é o que faz o Escape funcionar). O anel de
   foco ali não comunica nada — quem tem foco visível é o item que o teclado percorre. */
.uni-menu-panel:focus { outline: none; }
.uni-menu-panel.is-left {
    right: auto;
    left: 0;
}

.uni-menu-heading {
    padding: 8px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--uni-color-text-muted);
}

.uni-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--uni-color-text);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

.uni-menu-item .crm-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--uni-color-text-muted);
}

.uni-menu-item small {
    margin-left: auto;
    color: var(--uni-color-text-muted);
    font-size: 12px;
}

/* CUT 5F — item em duas linhas (rótulo + descrição). A descrição quebra dentro do painel em vez de
   vazar pela direita, como o `small` (sufixo de uma linha) fazia quando recebia uma frase. */
.uni-menu-item .uni-menu-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.uni-menu-item .uni-menu-item-desc {
    font-size: 12px;
    line-height: 1.3;
    color: var(--uni-color-text-muted);
    white-space: normal;
}

.uni-menu-item.has-desc {
    align-items: flex-start;
    padding-block: 9px;
}

.uni-menu-item.has-desc .crm-icon {
    margin-top: 1px;
}

.uni-menu-item:hover:not(:disabled),
.uni-menu-item:focus-visible:not(:disabled) {
    background: var(--uni-color-primary-soft);
    color: var(--uni-color-primary-soft-text);
}

.uni-menu-item:disabled {
    opacity: 0.5;
    cursor: default;
}

.uni-menu-item.is-danger {
    color: var(--uni-color-danger);
}

.uni-menu-item.is-danger .crm-icon {
    color: var(--uni-color-danger);
}

.uni-menu-check {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--uni-color-primary);
    flex: 0 0 auto;
}

/* Quando o item marcavel TEM icone, a marca vai para o fim da linha: assim o icone fica na mesma
   coluna dos demais itens do menu, que era a queixa medida. */
.uni-menu-check.is-trailing {
    margin-left: auto;
}



/* --- Portado de crm-attention.css linhas 684-701 @d1ca3acaf (UniInlineNotice) --- */
.uni-inline-notice {
    display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 5px 8px 5px 10px;
    border-radius: 8px; font-size: 13px; line-height: 1.3; color: var(--uni-color-text);
    background: var(--uni-color-surface); border: 1px solid var(--uni-color-border);
}
.uni-inline-notice > .crm-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.uni-inline-notice--success { color: #166534; background: #ecfdf3; border-color: rgba(22, 163, 74, .3); }
.uni-inline-notice--success > .crm-icon { color: #16a34a; }
.uni-inline-notice--warning { color: #92400e; background: #fffbeb; border-color: rgba(217, 119, 6, .35); }
.uni-inline-notice--info { color: var(--uni-color-text); background: var(--uni-color-surface); border-color: var(--uni-color-border); }
.uni-inline-notice--info > .crm-icon { color: var(--uni-color-primary); }
.uni-inline-notice-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uni-inline-notice-close { flex: 0 0 auto; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .7; display: grid; place-items: center; cursor: pointer; padding: 0; }
.uni-inline-notice-close:hover { opacity: 1; background: rgba(0, 0, 0, .06); }
.uni-inline-notice-close .crm-icon { width: 14px; height: 14px; }
:root[data-unifin-theme="dark"] .uni-inline-notice--success { color: #86efac; background: rgba(22, 163, 74, .14); border-color: rgba(22, 163, 74, .35); }
:root[data-unifin-theme="dark"] .uni-inline-notice--warning { color: #fcd34d; background: rgba(217, 119, 6, .14); border-color: rgba(217, 119, 6, .35); }
:root[data-unifin-theme="dark"] .uni-inline-notice-close:hover { background: rgba(255, 255, 255, .08); }

/* --- Portado de uni-components.css linhas 2800-2891 @d1ca3acaf (UniDisclosure) --- */
/* ---------- UniDisclosure (UNICHAT-CUT-6S, Owner R2: seção recolhível de detalhe) ----------
   Cabeçalho inteiro clicável (o botão cobre a linha via ::after); o (i) e as ações ficam acima dessa
   camada. Chevron vazado, 16px (compatível com a fonte), encostado à direita, gira 180° quando aberto.
   Nível "section": título md 600 com régua inferior; nível "sub": título sm 600, sem régua. */
.uni-disclosure { display: flex; flex-direction: column; min-width: 0; }

.uni-disclosure-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
    min-height: 36px;
}

.uni-disclosure--section > .uni-disclosure-head {
    padding: var(--uni-space-2) 0;
    border-bottom: 1px solid var(--uni-color-border);
}

.uni-disclosure--sub > .uni-disclosure-head {
    min-height: 32px;
    padding: var(--uni-space-1) 0;
}

.uni-disclosure-trigger {
    display: inline-flex;
    align-items: baseline;
    gap: var(--uni-space-2);
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--uni-color-text);
    text-align: left;
    cursor: pointer;
}

/* A linha inteira alterna a seção. */
.uni-disclosure-trigger::after { content: ""; position: absolute; inset: 0; }

.uni-disclosure-trigger:focus-visible { outline: none; }
.uni-disclosure-trigger:focus-visible::after { outline: 2px solid var(--uni-color-primary); outline-offset: 2px; border-radius: var(--uni-radius-sm); }

.uni-disclosure--section .uni-disclosure-title { font-size: var(--uni-font-size-md); font-weight: 600; line-height: 1.3; }
.uni-disclosure--sub .uni-disclosure-title { font-size: var(--uni-font-size-sm); font-weight: 600; line-height: 1.3; }

.uni-disclosure-meta {
    font-size: var(--uni-font-size-xs);
    font-weight: 500;
    color: var(--uni-color-text-muted);
    white-space: nowrap;
}

/* (i) e ações acima da camada clicável do botão. */
.uni-disclosure-head > .uni-field-info,
.uni-disclosure-actions { position: relative; z-index: 1; }
.uni-disclosure-actions { display: inline-flex; align-items: center; gap: var(--uni-space-2); margin-left: auto; }
.uni-disclosure-actions + .uni-disclosure-chevron { margin-left: 0; }

.uni-disclosure-chevron {
    pointer-events: none; /* Owner R3: a seta girada (transform) ficava acima da camada clicável e engolia o clique */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: var(--uni-color-text-muted);
    transition: transform 140ms ease;
}

.uni-disclosure.is-open > .uni-disclosure-head > .uni-disclosure-chevron { transform: rotate(180deg); }
.uni-disclosure-head:hover .uni-disclosure-chevron { color: var(--uni-color-text); }

.uni-disclosure-body {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-3);
    min-width: 0;
}

.uni-disclosure--section > .uni-disclosure-body { padding-top: var(--uni-space-3); }
.uni-disclosure--sub > .uni-disclosure-body { padding-top: var(--uni-space-1); }

/* Subgrupos empilhados dentro de uma seção: régua fina entre eles. */
.uni-disclosure--section > .uni-disclosure-body > .uni-disclosure--sub + .uni-disclosure--sub {
    border-top: 1px solid var(--uni-color-border-subtle, var(--uni-color-border));
    padding-top: var(--uni-space-1);
}