/* ============================================================================
   ui-kit.css — Biblioteca de componentes REAPROVEITÁVEIS do portal do cliente.
   Namespace ui-* (+ breadcrumb dsh-* reaproveitado do dashboard). Carregar via
   asset('css/ui-kit.css') em QUALQUER página. Não toca no style.css/app.js
   compartilhados (admin+agent). Dark via [data-theme="dark"] no <html>.
   Tokens derivam de --primary/--primary-rgb (white-label, setados no header).
   Regras da casa: sem box-shadow (borda 1px), Lucide, sem inline, sem !important.

   Documentação (tokens, componentes, migração): docs/DESIGN-SYSTEM.md.
   Esta folha também entra no modo admin de página cheia da conversa, então ela
   NUNCA estiliza elemento solto (body, button, input...): só classes ui-* e
   variáveis --ui-*.
   ============================================================================ */

/* ── FUNDAÇÃO: tokens do design system (DS-1, 01/10/2026) ──────────────────
   Escalas fixas: ninguém inventa 13px de margem ou 11px de raio. Cor nunca é
   repetida aqui: superfícies e bordas por PAPEL apontam para as cores que já
   existem (--ui-card-bg, --ui-line...), que a paleta calm e o tema escuro
   trocam sozinhos. */
:root {
    /* Espaçamento (grade de 4) */
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-8: 32px;
    --ui-space-12: 48px;

    /* Raios */
    --ui-r-sm: 8px;        /* botão sm, item de menu, chip, campo pequeno */
    --ui-r-md: 10px;       /* botão, campo, tile */
    --ui-r-lg: 12px;       /* cartão interno, popover, mídia, botão lg */
    --ui-r-xl: 16px;       /* cartão, modal */
    --ui-r-2xl: 20px;      /* herói, folha de baixo do celular */
    --ui-r-pill: 999px;

    /* Tipografia: uma família só (a do painel), tamanhos por PAPEL e só os pesos
       400/500/600 (docs/UX-CALMA.md, regra 12). Escala 11/12/13/14/15/16/18/24/28/32. */
    --ui-font: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --ui-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ui-fs-display: 2rem;      /* 32  número de destaque (KPI grande) */
    --ui-fs-page: 1.75rem;      /* 28  título de página (24 no celular) */
    --ui-fs-h2: 1.5rem;         /* 24  número de KPI, título de seção grande */
    --ui-fs-modal: 1.125rem;    /* 18  título de modal / gaveta (18 a 20) */
    --ui-fs-title: 1rem;        /* 16  título de cartão, estado vazio */
    --ui-fs-body-lg: .9375rem;  /* 15  bolha de mensagem, botão lg */
    --ui-fs-body: .875rem;      /* 14  corpo, botão, campo, item de menu */
    --ui-fs-label: .8125rem;    /* 13  rótulo de campo, aba, meta de cartão */
    --ui-fs-help: .75rem;       /* 12  ajuda, erro, selo, hora */
    --ui-fs-caption: .6875rem;  /* 11  legenda, contador, sobrelinha */
    --ui-fw-regular: 400;
    --ui-fw-medium: 500;
    --ui-fw-semibold: 600;
    --ui-lh-tight: 1.25;        /* títulos */
    --ui-lh-snug: 1.35;
    --ui-lh-body: 1.5;          /* corpo (1.45 a 1.6) */
    --ui-ls-title: -.02em;
    --ui-ls-page: -.03em;

    /* Ícones (Lucide): 16 em texto e menu, 18 em ação de cabeçalho, 20 na
       navegação; 14 só dentro de selo/chip; 24 em estado vazio. */
    --ui-ic-xs: 14px;
    --ui-ic-sm: 16px;
    --ui-ic-md: 18px;
    --ui-ic-lg: 20px;
    --ui-ic-xl: 24px;
    /* Alturas de controle e alvos (40 no desktop, 44 no celular) */
    --ui-ctl-sm: 32px;     /* compacto (linha densa, barra) */
    --ui-ctl-md: 40px;     /* padrão: botão, campo, select */
    --ui-ctl-lg: 48px;     /* CTA, ação principal do estado vazio */
    --ui-target: 40px;     /* alvo mínimo no desktop */
    --ui-target-touch: 44px; /* alvo mínimo no celular */

    /* Movimento (UX-CALMA regra 10): só transform/opacity; saída = 75% da entrada */
    --ui-dur-1: 120ms;     /* feedback: hover, pressão, check, switch */
    --ui-dur-2: 200ms;     /* menu, popover, tooltip, toast */
    --ui-dur-3: 250ms;     /* modal, indicador de aba */
    --ui-dur-4: 350ms;     /* gaveta, painel grande, folha de baixo */
    --ui-ease-out: cubic-bezier(.2, 0, 0, 1);     /* entrada (desacelera) */
    --ui-ease-in: cubic-bezier(.3, 0, 1, 1);      /* saída (acelera) */

    /* Camadas (o Bootstrap usa 1050/1055 no modal) */
    --ui-z-sticky: 20;
    --ui-z-header: 30;
    --ui-z-dropdown: 60;
    --ui-z-drawer: 1040;
    --ui-z-modal: 1055;
    --ui-z-popover: 1070;
    --ui-z-tooltip: 1080;
    --ui-z-toast: 12000;

    /* Superfícies e bordas por papel (apontam para as cores existentes) */
    --ui-neutral-rgb: 42, 45, 52;
    --ui-fill-1: rgba(var(--ui-neutral-rgb), .045);   /* trilho, tile, fundo afundado */
    --ui-fill-2: rgba(var(--ui-neutral-rgb), .07);    /* hover neutro */
    --ui-fill-3: rgba(var(--ui-neutral-rgb), .11);    /* pressionado / selecionado neutro */
    --ui-bg-page: var(--body-bg, #F6F7F9);
    --ui-bg-card: var(--ui-card-bg);
    --ui-bg-raised: var(--ui-card-bg);                /* menu, popover, modal */
    --ui-border-subtle: var(--ui-line-2);             /* divisória interna */
    --ui-border: var(--ui-line);                      /* contorno de cartão */
    /* Contorno de CONTROLE (campo, checkbox, switch desligado): 3:1 contra o
       fundo do campo (WCAG 1.4.11). #8E95A0 no branco = 3.02:1. */
    --ui-ctl-line: #8E95A0;
    --ui-ctl-line-hover: #6B7280;
    --ui-line-strong: rgba(var(--ui-neutral-rgb), .16);   /* contorno de botão secundário */
    --ui-focus: var(--ui-accent);
    /* Texto da marca sobre fundo claro/tingido: a cor da marca escurecida, para
       ler bem mesmo quando o white-label escolhe um tom claro. */
    --ui-accent-ink: color-mix(in srgb, var(--ui-accent) 74%, #000);
    --ui-solid-mix: #000;   /* hover/pressão dos botões sólidos */
    /* Texto de cada tom semântico sobre o fundo tingido dele (selo, tile): o
       tom escurecido no claro e clareado no escuro, para passar AA. */
    --ui-ok-ink: color-mix(in srgb, var(--ui-ok) 80%, #000);
    --ui-warn-ink: color-mix(in srgb, var(--ui-warn) 78%, #000);
    --ui-danger-ink: color-mix(in srgb, var(--ui-danger) 84%, #000);
    --ui-info-ink: color-mix(in srgb, var(--ui-info) 84%, #000);
    --ui-scrim: rgba(17, 19, 24, .42);
    --ui-shine: rgba(255, 255, 255, .55);             /* brilho do esqueleto */
    --ui-track: var(--ui-fill-1);                     /* trilho de abas/segmentado (afundado) */
}

:root[data-theme="dark"] {
    --ui-neutral-rgb: 255, 255, 255;
    --ui-fill-1: rgba(var(--ui-neutral-rgb), .045);
    --ui-fill-2: rgba(var(--ui-neutral-rgb), .07);
    --ui-fill-3: rgba(var(--ui-neutral-rgb), .1);
    --ui-bg-raised: var(--ui-surface);
    /* #5B6472 sobre o campo #0F1218 = 3.1:1 */
    --ui-ctl-line: #5B6472;
    --ui-ctl-line-hover: #7A8494;
    --ui-line-strong: rgba(var(--ui-neutral-rgb), .14);
    --ui-accent-ink: color-mix(in srgb, var(--ui-accent) 82%, #fff);
    --ui-solid-mix: #fff;
    --ui-ok-ink: color-mix(in srgb, var(--ui-ok) 86%, #fff);
    --ui-warn-ink: color-mix(in srgb, var(--ui-warn) 86%, #fff);
    --ui-danger-ink: color-mix(in srgb, var(--ui-danger) 86%, #fff);
    --ui-info-ink: color-mix(in srgb, var(--ui-info) 86%, #fff);
    --ui-scrim: rgba(0, 0, 0, .55);
    --ui-shine: rgba(255, 255, 255, .05);
    --ui-track: rgba(0, 0, 0, .22);
}
/* Calm escuro: a paleta já entrega o contorno de campo com 3:1 (grafite quente). */
:root[data-palette="calm"][data-theme="dark"] {
    --ui-ctl-line: var(--ui-field-line);
    --ui-ctl-line-hover: #8A7F74;
}

@media (prefers-reduced-motion: reduce) {
    :root { --ui-dur-1: 1ms; --ui-dur-2: 1ms; --ui-dur-3: 1ms; --ui-dur-4: 1ms; }
}
@media (max-width: 640px) {
    :root { --ui-target: var(--ui-target-touch); }
}

:root {
    --ui-accent: var(--primary, #FF7E01);
    --ui-accent-rgb: var(--primary-rgb, 255, 126, 1);
    --ui-teal: #5DA399;
    --ui-ink: #1F2430;
    --ui-ink-2: #3A3F4B;
    --ui-muted: #6B7280;
    --ui-muted-2: #9CA3AF;
    --ui-card-bg: #FFFFFF;
    --ui-surface: #FAFAFB;
    --ui-line: rgba(42, 45, 52, 0.10);
    --ui-line-2: rgba(42, 45, 52, 0.06);
    --ui-hover: rgba(var(--ui-accent-rgb), 0.06);
    --ui-field-bg: #FFFFFF;
    --ui-field-line: rgba(42, 45, 52, 0.14);
    --ui-toast-bg: rgba(255, 255, 255, 0.72);
    --ui-toast-border: rgba(42, 45, 52, 0.14);
    --ui-ok: #0E9F6E;
    --ui-ok-rgb: 14, 159, 110;
    --ui-warn: #D97706;
    --ui-warn-rgb: 217, 119, 6;
    --ui-danger: #E11D48;
    --ui-danger-rgb: 225, 29, 72;
    --ui-info: #2563EB;
    --ui-info-rgb: 37, 99, 235;
    /* Cor do canal Telegram (selo e bolinha do avatar). Cor de marca, nunca a
       logo oficial (PLANO-TELEGRAM D11). --ui-tg-ink e a versao para TEXTO sobre
       o fundo claro do selo (a cor cheia ali fica abaixo do contraste de leitura). */
    --ui-tg: #229ED9;
    --ui-tg-rgb: 34, 158, 217;
    --ui-tg-ink: #17729F;
    /* Cor do canal WhatsApp (marca da página de dispositivos, DS-2). -ink = texto AA. */
    --ui-wa-rgb: 37, 211, 102;
    --ui-wa-ink: #0F7A3E;
    /* Nomes antigos (usados em dezenas de folhas): apontam para a escala. */
    --ui-radius: var(--ui-r-md);
    --ui-radius-sm: var(--ui-r-sm);
    --ui-ease: cubic-bezier(0.4, 0, 0.2, 1);   /* padrão (entra e sai) */
}

:root[data-theme="dark"] {
    --ui-ink: #E7EAF0;
    --ui-ink-2: #C5CAD3;
    --ui-muted: #94A0B0;
    --ui-muted-2: #6B7686;
    --ui-card-bg: #14171F;
    --ui-surface: #1A1E27;
    --ui-line: rgba(255, 255, 255, 0.09);
    --ui-line-2: rgba(255, 255, 255, 0.06);
    --ui-hover: rgba(var(--ui-accent-rgb), 0.14);
    --ui-field-bg: #0F1218;
    --ui-field-line: rgba(255, 255, 255, 0.12);
    --ui-toast-bg: rgba(20, 23, 31, 0.68);
    --ui-toast-border: rgba(255, 255, 255, 0.14);
    --ui-tg-ink: #6CC3EE;
    --ui-wa-ink: #4ADE80;
}

/* ── Breadcrumb (reaproveitado do dashboard; mesmas classes do partial) ────── */
.dsh-breadcrumb { margin: 0 0 18px; }
.dsh-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; }
.dsh-crumb { display: inline-flex; align-items: center; font-size: .82rem; font-weight: 600; color: var(--ui-muted); }
.dsh-crumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-muted); text-decoration: none; transition: color .15s var(--ui-ease); }
.dsh-crumb a:hover { color: var(--ui-accent); }
.dsh-crumb svg { width: 15px; height: 15px; }
.dsh-crumb:not(:first-child)::before { content: ""; width: 6px; height: 6px; margin-right: 8px; border-right: 1.6px solid var(--ui-muted-2); border-bottom: 1.6px solid var(--ui-muted-2); transform: rotate(-45deg); opacity: .6; }
.dsh-crumb.active { color: var(--ui-ink); }

/* ── Section title ─────────────────────────────────────────────────────────── */
.ui-section-title { display: flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 600; color: var(--ui-ink); margin: 0 0 12px; letter-spacing: -.01em; }
.ui-section-title svg { width: 18px; height: 18px; color: var(--ui-accent); }

/* ── Card ──────────────────────────────────────────────────────────────────── */
.ui-card {
    background: var(--ui-card-bg);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    overflow: hidden;
}
.ui-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.ui-card-head.bordered { border-bottom: 1px solid var(--ui-line-2); }
/* Título de card: usar em <div>/<p> (NÃO h2/h5/h6, que o style.css força a cor). */
.ui-card-title { font-size: .95rem; font-weight: 600; color: var(--ui-ink); margin: 0; letter-spacing: -.01em; }
.ui-card-sub { font-size: .78rem; color: var(--ui-muted); margin: 2px 0 0; }
.ui-card-body { padding: 18px; }
.ui-card-body.flush { padding: 0; }

/* ── Stat card (ícone no topo → label → valor + variação) — estilo sales.html ── */
.ui-stat { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.ui-stat-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: var(--ui-hover); color: var(--ui-accent); }
.ui-stat-icon svg { width: 22px; height: 22px; }
.ui-stat-lbl { font-size: .82rem; font-weight: 500; color: var(--ui-muted); margin: 0 0 4px; }
.ui-stat-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ui-stat-val { font-size: 1.7rem; font-weight: 600; color: var(--ui-ink); line-height: 1.05; letter-spacing: -.02em; margin: 0; font-variant-numeric: tabular-nums; }
/* Info secundária SEMPRE inline na linha do valor (nunca 3ª linha) — mantém padrão. */
.ui-stat-meta { font-size: .74rem; color: var(--ui-muted-2); font-weight: 500; white-space: nowrap; padding-bottom: 3px; }
.ui-stat-badge { flex: 0 0 auto; font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.ui-stat-badge.up { color: var(--ui-ok); background: rgba(var(--ui-ok-rgb), .12); }
.ui-stat-badge.down { color: var(--ui-danger); background: rgba(var(--ui-danger-rgb), .12); }
.ui-ic-primary { background: rgba(var(--ui-accent-rgb), .10); color: var(--ui-accent); }
.ui-ic-teal { background: rgba(93, 163, 153, .12); color: var(--ui-teal); }
.ui-ic-indigo { background: rgba(99, 102, 241, .12); color: #6366F1; }
.ui-ic-amber { background: rgba(217, 119, 6, .12); color: var(--ui-warn); }
.ui-ic-green { background: rgba(var(--ui-ok-rgb), .12); color: var(--ui-ok); }
.ui-ic-danger { background: rgba(var(--ui-danger-rgb), .12); color: var(--ui-danger); }
.ui-ic-gray { background: rgba(var(--ui-muted-rgb, 107,114,128), .14); color: var(--ui-muted); }

/* ── Botões (ui-btn) ───────────────────────────────────────────────────────
   Uma base + variante de cor + tamanho. Alturas exatas (md 40, sm 32, lg 48)
   pela soma linha + padding + borda, SEM height fixo: a folha da página que
   precisa de outra altura (barra do construtor, zoom) continua mandando.
   Estados: hover, pressão (scale .98), foco de teclado (anel de 2px), desabilitado
   e carregando (.is-loading: spinner próprio, largura intacta; JS: uiBtnLoading).
   Regra da casa: rótulo em sentence case; ícone só nos botões do cabeçalho/
   barra da página; ação só com ícone = .ui-btn-icon (ou o legado .ui-iconbtn). */
.ui-btn {
    --ui-btn-h: var(--ui-ctl-md);
    --ui-btn-spin: var(--ui-ink-2);
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-space-2);
    padding: 9px var(--ui-space-4);
    font-family: inherit; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-semibold);
    line-height: 20px; letter-spacing: -.005em;
    border-radius: var(--ui-r-md);
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--ui-dur-1) var(--ui-ease), border-color var(--ui-dur-1) var(--ui-ease),
                color var(--ui-dur-1) var(--ui-ease), opacity var(--ui-dur-1) var(--ui-ease),
                transform var(--ui-dur-1) var(--ui-ease);
}
.ui-btn svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); flex: 0 0 auto; }
.ui-btn:active { transform: scale(.98); }
.ui-btn:focus:not(:focus-visible) { outline: none; }
.ui-btn:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-btn:disabled, .ui-btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Sólidos. Texto sobre o preenchido: --ui-on-* (default = #fff; a calm escura
   troca por texto escuro). Hover/pressão misturam a cor com --ui-solid-mix
   (preto no claro, branco no escuro): serve para qualquer cor de marca
   (white-label) e a transição de cor continua suave. */
.ui-btn-primary { background-color: var(--ui-accent); color: var(--ui-on-primary, #fff); --ui-btn-spin: var(--ui-on-primary, #fff); }
.ui-btn-success { background-color: var(--ui-ok); color: var(--ui-on-success, #fff); --ui-btn-spin: var(--ui-on-success, #fff); }
.ui-btn-danger  { background-color: var(--ui-danger); color: var(--ui-on-danger, #fff); --ui-btn-spin: var(--ui-on-danger, #fff); }
.ui-btn-warning { background-color: var(--ui-warn); color: var(--ui-on-warning, #fff); --ui-btn-spin: var(--ui-on-warning, #fff); }
.ui-btn-info    { background-color: var(--ui-info); color: var(--ui-on-info, #fff); --ui-btn-spin: var(--ui-on-info, #fff); }
.ui-btn-dark    { background-color: var(--ui-ink); color: var(--ui-card-bg); --ui-btn-spin: var(--ui-card-bg); }
.ui-btn-primary:hover { background-color: color-mix(in srgb, var(--ui-accent), var(--ui-solid-mix) 9%); color: var(--ui-on-primary, #fff); }
.ui-btn-success:hover { background-color: color-mix(in srgb, var(--ui-ok), var(--ui-solid-mix) 9%); color: var(--ui-on-success, #fff); }
.ui-btn-danger:hover  { background-color: color-mix(in srgb, var(--ui-danger), var(--ui-solid-mix) 9%); color: var(--ui-on-danger, #fff); }
.ui-btn-warning:hover { background-color: color-mix(in srgb, var(--ui-warn), var(--ui-solid-mix) 9%); color: var(--ui-on-warning, #fff); }
.ui-btn-info:hover    { background-color: color-mix(in srgb, var(--ui-info), var(--ui-solid-mix) 9%); color: var(--ui-on-info, #fff); }
.ui-btn-dark:hover    { background-color: color-mix(in srgb, var(--ui-ink), var(--ui-card-bg) 14%); color: var(--ui-card-bg); }
.ui-btn-primary:active { background-color: color-mix(in srgb, var(--ui-accent), var(--ui-solid-mix) 16%); }
.ui-btn-success:active { background-color: color-mix(in srgb, var(--ui-ok), var(--ui-solid-mix) 16%); }
.ui-btn-danger:active  { background-color: color-mix(in srgb, var(--ui-danger), var(--ui-solid-mix) 16%); }

/* Soft (fundo tingido, texto da cor). .ui-btn-soft = .ui-btn-soft-primary = .ui-btn-subtle */
.ui-btn-soft, .ui-btn-subtle, .ui-btn-soft-primary { background-color: rgba(var(--ui-accent-rgb), .11); color: var(--ui-accent-ink); --ui-btn-spin: var(--ui-accent-ink); }
.ui-btn-soft:hover, .ui-btn-subtle:hover, .ui-btn-soft-primary:hover { background-color: rgba(var(--ui-accent-rgb), .18); color: var(--ui-accent-ink); }
.ui-btn-soft-success { background-color: rgba(var(--ui-ok-rgb), .12); color: var(--ui-ok-ink); --ui-btn-spin: var(--ui-ok-ink); }
.ui-btn-soft-success:hover { background-color: rgba(var(--ui-ok-rgb), .19); color: var(--ui-ok-ink); }
.ui-btn-soft-danger { background-color: rgba(var(--ui-danger-rgb), .11); color: var(--ui-danger-ink); --ui-btn-spin: var(--ui-danger-ink); }
.ui-btn-soft-danger:hover { background-color: rgba(var(--ui-danger-rgb), .18); color: var(--ui-danger-ink); }
.ui-btn-soft-warning { background-color: rgba(var(--ui-warn-rgb), .12); color: var(--ui-warn-ink); --ui-btn-spin: var(--ui-warn-ink); }
.ui-btn-soft-warning:hover { background-color: rgba(var(--ui-warn-rgb), .19); color: var(--ui-warn-ink); }
.ui-btn-soft-info { background-color: rgba(var(--ui-info-rgb), .12); color: var(--ui-info-ink); --ui-btn-spin: var(--ui-info-ink); }
.ui-btn-soft-info:hover { background-color: rgba(var(--ui-info-rgb), .19); color: var(--ui-info-ink); }
.ui-btn-soft-neutral { background-color: var(--ui-fill-2); color: var(--ui-ink-2); }
.ui-btn-soft-neutral:hover { background-color: var(--ui-fill-3); color: var(--ui-ink); }

/* Secundário (contorno neutro). .ui-btn-secondary = .ui-btn-ghost = .ui-btn-outline-neutral.
   Hover neutro (calmo): a cor da marca fica para a ação principal. */
.ui-btn-secondary, .ui-btn-ghost, .ui-btn-outline-neutral { background-color: var(--ui-bg-card); color: var(--ui-ink); border-color: var(--ui-line-strong); }
.ui-btn-secondary:hover, .ui-btn-ghost:hover, .ui-btn-outline-neutral:hover { background-color: var(--ui-fill-1); border-color: var(--ui-ctl-line); color: var(--ui-ink); }
.ui-btn-secondary:active, .ui-btn-ghost:active, .ui-btn-outline-neutral:active { background-color: var(--ui-fill-2); }
.ui-btn-outline-primary { background-color: transparent; color: var(--ui-accent-ink); border-color: rgba(var(--ui-accent-rgb), .55); --ui-btn-spin: var(--ui-accent-ink); }
.ui-btn-outline-primary:hover { background-color: rgba(var(--ui-accent-rgb), .08); border-color: var(--ui-accent); color: var(--ui-accent-ink); }
.ui-btn-outline-success { background-color: transparent; color: var(--ui-ok); border-color: var(--ui-ok); --ui-btn-spin: var(--ui-ok); }
.ui-btn-outline-success:hover { background-color: rgba(var(--ui-ok-rgb), .08); color: var(--ui-ok); }
.ui-btn-outline-danger { background-color: transparent; color: var(--ui-danger); border-color: var(--ui-danger); --ui-btn-spin: var(--ui-danger); }
.ui-btn-outline-danger:hover { background-color: rgba(var(--ui-danger-rgb), .08); color: var(--ui-danger); }

/* Quieto (terciário): sem fundo nem borda até o hover. Barras e cabeçalhos. */
.ui-btn-quiet { background-color: transparent; color: var(--ui-ink-2); }
.ui-btn-quiet:hover { background-color: var(--ui-fill-2); color: var(--ui-ink); }
.ui-btn-quiet:active { background-color: var(--ui-fill-3); }
/* Botão de alternar (aria-pressed / .is-active) no quieto e no secundário */
.ui-btn-quiet[aria-pressed="true"], .ui-btn-quiet.is-active,
.ui-btn-secondary[aria-pressed="true"], .ui-btn-secondary.is-active,
.ui-btn-ghost[aria-pressed="true"], .ui-btn-ghost.is-active { background-color: rgba(var(--ui-accent-rgb), .10); border-color: rgba(var(--ui-accent-rgb), .35); color: var(--ui-accent-ink); }

/* Link */
.ui-btn-link { background-color: transparent; border-color: transparent; color: var(--ui-accent-ink); padding: 4px 6px; --ui-btn-spin: var(--ui-accent-ink); }
.ui-btn-link:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--ui-accent-ink); }
.ui-btn-link:active { transform: none; }

/* Tamanhos e formas */
.ui-btn-sm { --ui-btn-h: var(--ui-ctl-sm); padding: 6px var(--ui-space-3); font-size: var(--ui-fs-label); line-height: 18px; gap: 6px; border-radius: var(--ui-r-sm); }
.ui-btn-sm svg { width: var(--ui-ic-xs); height: var(--ui-ic-xs); }
.ui-btn-lg { --ui-btn-h: var(--ui-ctl-lg); padding: 12px 22px; font-size: .9375rem; line-height: 22px; border-radius: var(--ui-r-lg); }
.ui-btn-lg svg { width: var(--ui-ic-md); height: var(--ui-ic-md); }
.ui-btn-block { width: 100%; }
.ui-btn-pill { border-radius: var(--ui-r-pill); }
/* Só ícone (quadrado; com .ui-btn-pill vira círculo). Sempre com aria-label. */
.ui-btn-icon { width: var(--ui-btn-h); height: var(--ui-btn-h); padding: 0; gap: 0; }
.ui-btn-icon svg { width: var(--ui-ic-md); height: var(--ui-ic-md); }
.ui-btn-sm.ui-btn-icon svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.ui-btn-lg.ui-btn-icon svg { width: var(--ui-ic-lg); height: var(--ui-ic-lg); }

/* Celular: botão padrão com 44px de alvo (UX-CALMA regra 11). :where mantém
   a especificidade de uma classe: a folha da página que ajusta continua mandando. */
@media (max-width: 640px) {
    .ui-btn:where(:not(.ui-btn-sm, .ui-btn-lg, .ui-btn-link)) { --ui-btn-h: var(--ui-target-touch); padding-top: 11px; padding-bottom: 11px; }
    .ui-btn-icon:where(:not(.ui-btn-sm, .ui-btn-lg)) { padding: 0; }
}
/* Botão pequeno no celular e em tela de toque (DS-7): o desenho continua com
   32 px, e um ::after transparente leva a ÁREA DE TOQUE a 44 x 44
   (centralizada; só cresce para os lados quando o botão tem menos de 44 de
   largura). No computador com mouse nada muda. O ::before fica livre (é a dica
   do data-ui-tip). :where() deixa a especificidade em zero: a folha da página
   manda. Os botões de ícone em que o kit já desenha o ícone no ::after (copiar
   do campo de link, o "?" da ajuda) são transparentes: o próprio botão vai a 44
   (no campo de link, sem mudar a altura do campo). */
@media (max-width: 640px), (pointer: coarse) {
    :where(.ui-btn.ui-btn-sm:not(.ui-linkfield-copy:empty, [data-ui-help-open]:empty, .is-copied, .is-loading, [aria-busy="true"]))::after {
        content: ""; position: absolute; top: 50%; left: 50%;
        width: max(100%, var(--ui-target-touch)); height: max(100%, var(--ui-target-touch));
        transform: translate(-50%, -50%);
    }
    .ui-btn-sm.ui-btn-icon:is(.ui-linkfield-copy:empty, [data-ui-help-open]:empty) { flex-shrink: 0; width: var(--ui-target-touch); height: var(--ui-target-touch); }
    .ui-linkfield > .ui-btn-sm.ui-btn-icon.ui-linkfield-copy:empty { margin-block: -6px; }
    /* Botão só de ícone (32 de largura): o ::after passa 6 px para cada lado. Com
       contain: layout esse excesso vira só tinta: continua tocável, mas não entra na
       largura de rolagem de quem está em volta (encostado na borda de um contêiner sem
       margem, criava rolagem lateral). O contain tira a linha de base; o
       vertical-align: middle segura a mesma posição na linha e na célula de tabela. */
    .ui-btn.ui-btn-sm.ui-btn-icon { contain: layout; vertical-align: middle; }
    /* Os outros alvos pequenos do kit (DS-7c), todos só crescendo para cima e para
       baixo (a largura fica a do desenho, então nada passa para os lados):
       link do tamanho padrão (30; no ::before porque há página que desenha seta no
       ::after do link), fechar do modal (32, 44 x 44), opção do segmentado (36: vai
       até a borda do trilho), chip clicável (22) e o summary de abrir/fechar dentro
       de modal ou painel (32). */
    :where(.ui-btn.ui-btn-link:not(.ui-btn-sm, .ui-btn-lg, [data-ui-tip], .is-loading, [aria-busy="true"]))::before,
    :where(.ui-seg-btn)::after,
    :where(button.ui-chip, a.ui-chip, .ui-chip[data-ui-locked-open])::after,
    :where(.ui-mbody, .ui-panel) :where(details > summary)::before {
        content: ""; position: absolute; top: 50%; left: 0;
        width: 100%; height: max(100%, var(--ui-target-touch));
        transform: translateY(-50%);
    }
    :where(button.ui-chip, a.ui-chip, .ui-chip[data-ui-locked-open]),
    :where(.ui-mbody, .ui-panel) :where(details > summary) { position: relative; }
    /* O fechar é só ícone: a área passa 6 px para os lados e vira só tinta (contain). */
    :where(.ui-mclose) { position: relative; contain: layout; }
    :where(.ui-mclose)::after {
        content: ""; position: absolute; top: 50%; left: 50%;
        width: var(--ui-target-touch); height: var(--ui-target-touch);
        transform: translate(-50%, -50%);
    }
}

/* Carregando: o texto some sem mudar a largura e o spinner entra no meio.
   A cor do spinner vem da variante (--ui-btn-spin); o uiBtnLoading copia a cor
   do texto para os botões de página que não usam variante.
   DS-7: carregando nunca fica translúcido (o disabled põe .5, aqui volta a 1)
   e o spinner tem no mínimo 3:1 contra o fundo. No primário a cor sai da
   luminância da marca (--ui-btn-spin-solid, que vence a cópia do uiBtnLoading):
   branco em marca escura, grafite em marca clara (no laranja #FF7E01 o branco
   dá 2,55:1). Sem suporte a cor relativa, fica o --ui-on-primary. */
.ui-btn.ui-btn.is-loading, .ui-btn.ui-btn[aria-busy="true"] { color: transparent; cursor: progress; pointer-events: none; opacity: 1; }
.ui-btn.is-loading > *, .ui-btn[aria-busy="true"] > * { visibility: hidden; }
.ui-btn.is-loading::after, .ui-btn[aria-busy="true"]::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
    border: 2px solid var(--ui-btn-spin-solid, var(--ui-btn-spin)); border-right-color: transparent;
    animation: uiSpin .7s linear infinite;
}
.ui-btn-primary { --ui-btn-spin-solid: var(--ui-on-primary, #fff); }
@supports (color: lch(from #000 clamp(14, (61 - l) * 1000, 100) 0 0)) {
    .ui-btn-primary { --ui-btn-spin-solid: lch(from var(--ui-accent) clamp(14, (61 - l) * 1000, 100) 0 0); }
}
.ui-btn-sm.is-loading::after, .ui-btn-sm[aria-busy="true"]::after { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
/* Carregando com rótulo (DS-7c): uiBtnLoading(btn, true, 'Testando…'). O kit guarda o
   conteúdo (.ui-btn-load-orig, escondido), escreve o rótulo e o spinner entra antes
   dele, na mesma cor (3:1 no mínimo, 6:1 no laranja). A largura não encolhe. */
.ui-btn.has-load-txt.is-loading::after, .ui-btn.has-load-txt[aria-busy="true"]::after { position: static; flex: 0 0 auto; order: -1; margin: 0; }
.ui-btn.is-loading > .ui-btn-load-txt, .ui-btn[aria-busy="true"] > .ui-btn-load-txt { visibility: visible; color: var(--ui-btn-spin-solid, var(--ui-btn-spin)); }
.ui-btn > .ui-btn-load-orig[hidden] { display: none; }
@keyframes uiSpin { to { transform: rotate(360deg); } }
/* Spinner avulso (mídia, lista carregando): herda a cor do texto. */
.ui-spinner { display: inline-block; width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: uiSpin .7s linear infinite; vertical-align: -3px; }
.ui-spinner.is-lg { width: 24px; height: 24px; border-width: 2.5px; }

/* Ação só com ícone (legado, 34px; tela nova: .ui-btn .ui-btn-icon) */
.ui-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-line); background: var(--ui-card-bg); color: var(--ui-muted);
    cursor: pointer; text-decoration: none;
    transition: background-color var(--ui-dur-1) var(--ui-ease), border-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease), transform var(--ui-dur-1) var(--ui-ease);
}
.ui-iconbtn svg { width: 16px; height: 16px; }
.ui-iconbtn:hover { border-color: var(--ui-ctl-line); color: var(--ui-ink); background: var(--ui-fill-1); }
.ui-iconbtn:active { transform: scale(.96); }
.ui-iconbtn:focus:not(:focus-visible) { outline: none; }
.ui-iconbtn:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-iconbtn.is-danger:hover { border-color: var(--ui-danger); color: var(--ui-danger); background: rgba(var(--ui-danger-rgb), .10); }
.ui-iconbtn.is-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* ── Selos (ui-badge) e chips ───────────────────────────────────────────────
   Selo = ESTADO (pílula tingida, ponto opcional .dot). Chip = META neutra
   (tipo, categoria, canal). Cor só quando carrega significado; até 2 cores
   por linha. Texto curto (1 ou 2 palavras). */
.ui-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ui-fs-help); font-weight: var(--ui-fw-medium); padding: 3px 9px; border-radius: var(--ui-r-pill); line-height: 16px; white-space: nowrap; color: var(--ui-ink-2); background: var(--ui-fill-2); }
.ui-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.ui-badge.on, .ui-badge.ok { color: var(--ui-ok-ink); background: rgba(var(--ui-ok-rgb), .12); }
.ui-badge.wait { color: var(--ui-warn-ink); background: rgba(var(--ui-warn-rgb), .13); }
.ui-badge.off, .ui-badge.neutral { color: var(--ui-muted); background: var(--ui-fill-2); }
.ui-badge.info { color: var(--ui-info-ink); background: rgba(var(--ui-info-rgb), .12); }
.ui-badge.accent { color: var(--ui-accent-ink); background: rgba(var(--ui-accent-rgb), .11); }
/* Ponto "ao vivo" (pulso suave, só opacity/transform) */
.ui-badge.is-live .dot { position: relative; }
.ui-badge.is-live .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: uiPing 2s var(--ui-ease-out) infinite; }
@keyframes uiPing { 0% { transform: scale(.6); opacity: .6; } 80%, 100% { transform: scale(2.2); opacity: 0; } }
/* Semanticas gerais (alerta e perigo), para selos fora do estado de conexao
   (orcamento em 80%, franquia esgotada...). Tokens claro/escuro do ui-kit, sem sombra. */
.ui-badge.warn { color: var(--ui-warn-ink); background: rgba(var(--ui-warn-rgb), .13); }
.ui-badge.danger { color: var(--ui-danger-ink); background: rgba(var(--ui-danger-rgb), .11); }
/* "busy": alguem humano cuidando (em atendimento). Indigo, a mesma cor da faixa
   "está atendendo" do chat, para o selo da lista e a faixa dizerem a mesma coisa. */
.ui-badge.busy { color: #4F46E5; background: rgba(99, 102, 241, .12); }
:root[data-theme="dark"] .ui-badge.busy { color: #A5B4FC; background: rgba(129, 140, 248, .18); }
/* Compacto, para linha de lista (conversa, card). Com icone Lucide no lugar do .dot. */
.ui-badge.sm { gap: 4px; font-size: .64rem; font-weight: 600; padding: 2px 7px; line-height: 1.35; white-space: nowrap; }
.ui-badge.sm svg { width: 11px; height: 11px; flex: 0 0 auto; }

/* ── Tag: etiqueta / etapa com marcador de cor ─────────────────────────────── */
/* Pilula NEUTRA: a cor do dado (etiqueta, etapa do Kanban) vive so no marcador
   (bolinha ou icone), via --ui-tag-color, senao uma fileira com 4 etiquetas vira
   um arco-iris gritante. Serve como <span> ou <button> (este ganha hover e foco).
   Quem preenche --ui-tag-color entrega a cor ja validada (hex). */
.ui-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; max-width: 100%; padding: 0 8px; border: 1px solid var(--ui-line); border-radius: 999px; background: transparent; color: var(--ui-ink-2); font: inherit; font-size: .7rem; font-weight: 600; line-height: 1; white-space: nowrap; }
.ui-tag[hidden] { display: none; }
.ui-tag-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-tag-color, var(--ui-muted-2)); flex: 0 0 auto; }
.ui-tag-ico { display: inline-flex; color: var(--ui-tag-color, var(--ui-muted)); flex: 0 0 auto; }
.ui-tag .ui-tag-ico svg { width: 12px; height: 12px; }
.ui-tag-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
button.ui-tag { cursor: pointer; transition: background .15s var(--ui-ease), border-color .15s var(--ui-ease); }
button.ui-tag:hover { background: var(--ui-line-2); border-color: var(--ui-field-line); }
button.ui-tag:focus-visible { outline: 2px solid rgba(var(--ui-accent-rgb), .45); outline-offset: 1px; }
.ui-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: var(--ui-fw-semibold); padding: 3px 9px; border-radius: 6px; letter-spacing: .01em; line-height: 1.4; white-space: nowrap; color: var(--ui-ink-2); background: var(--ui-fill-2); }
.ui-chip svg { width: 12px; height: 12px; flex: 0 0 auto; }
.ui-chip.api { color: var(--ui-teal); background: rgba(93, 163, 153, .12); }
.ui-chip.api-official { color: #1877F2; background: rgba(24, 119, 242, .12); }
.ui-chip.neutral { color: var(--ui-muted); background: var(--ui-line-2); }

/* Pílula de filtro (ui-pill): botão que liga/desliga um filtro (aria-pressed).
   Ex.: "Todas 12 · Não lidas 3 · Minhas". Contador em .ui-pill-n. */
.ui-pills { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
.ui-pill { display: inline-flex; align-items: center; gap: 6px; height: var(--ui-ctl-sm); padding: 0 var(--ui-space-3); border: 1px solid var(--ui-line); border-radius: var(--ui-r-pill); background: var(--ui-bg-card); color: var(--ui-ink-2); font: inherit; font-size: var(--ui-fs-label); font-weight: var(--ui-fw-medium); line-height: 1; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--ui-dur-1) var(--ui-ease), border-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease), transform var(--ui-dur-1) var(--ui-ease); }
.ui-pill svg { width: var(--ui-ic-xs); height: var(--ui-ic-xs); }
.ui-pill:hover { background: var(--ui-fill-1); border-color: var(--ui-line-strong); color: var(--ui-ink); }
.ui-pill:active { transform: scale(.97); }
.ui-pill:focus:not(:focus-visible) { outline: none; }
.ui-pill:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-pill[aria-pressed="true"], .ui-pill.is-active { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-card-bg); }
.ui-pill-n { font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-pill[aria-pressed="true"] .ui-pill-n, .ui-pill.is-active .ui-pill-n { color: inherit; opacity: .7; }

/* ── Progress (barra de uso) ───────────────────────────────────────────────── */
.ui-progress { height: 8px; border-radius: 999px; background: var(--ui-line-2); overflow: hidden; }
.ui-progress-bar { height: 100%; border-radius: 999px; background: var(--ui-accent); transition: width .6s var(--ui-ease); }
.ui-progress-bar.is-warn { background: var(--ui-warn); }
.ui-progress-bar.is-danger { background: var(--ui-danger); }

/* ── Estado vazio (ui-empty) ───────────────────────────────────────────────
   Ensina o próximo passo: ícone em tile, título curto, uma frase e UMA ação.
   (O formato antigo, com o <svg> solto, continua valendo.) */
.ui-empty { text-align: center; padding: 48px 20px; color: var(--ui-muted); }
.ui-empty > svg { width: 40px; height: 40px; color: var(--ui-muted-2); opacity: .6; margin-bottom: 12px; }
.ui-empty-ico { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto var(--ui-space-4); border-radius: var(--ui-r-lg); background: var(--ui-fill-1); color: var(--ui-muted); }
.ui-empty-ico svg { width: var(--ui-ic-lg); height: var(--ui-ic-lg); }
.ui-empty-t { font-size: var(--ui-fs-title); font-weight: var(--ui-fw-semibold); letter-spacing: var(--ui-ls-title); color: var(--ui-ink); margin: 0 0 6px; }
.ui-empty p { max-width: 380px; font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); margin: 0 auto var(--ui-space-5); }
.ui-empty > p { text-wrap: balance; }
.ui-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ui-space-2); }
.ui-empty.is-compact { padding: 28px 16px; }
.ui-empty.is-compact .ui-empty-ico { width: 40px; height: 40px; margin: 0 auto var(--ui-space-3); }
/* Tom do tile: primeiro uso ("conecte um dispositivo") = is-accent; problema = is-warn/is-danger; filtro sem resultado = neutro (padrão). */
.ui-empty-ico.is-accent { background: rgba(var(--ui-accent-rgb), .11); color: var(--ui-accent-ink); }
.ui-empty-ico.is-warn { background: rgba(var(--ui-warn-rgb), .13); color: var(--ui-warn-ink); }
.ui-empty-ico.is-danger { background: rgba(var(--ui-danger-rgb), .11); color: var(--ui-danger-ink); }

/* ── Passos numerados (DS-2, 01/10) ───────────────────────────────────────────
   <ol class="ui-steps"><li><strong>Crie a integração</strong> e copie o endereço.</li>...</ol>
   O número vem do CSS (contador). Padrão = lista vertical; .is-inline = linha centrada
   (vira coluna no celular); .is-cards = 3 cartões lado a lado (vira lista no celular).
   Estado do passo: li.is-current (agora) e li.is-done (feito). */
.ui-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ui-space-3); counter-reset: uist; font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); color: var(--ui-ink-2); text-align: left; }
.ui-steps > li { display: flex; align-items: flex-start; gap: var(--ui-space-3); min-width: 0; counter-increment: uist; }
.ui-steps > li::before { content: counter(uist); flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--ui-r-pill); background: rgba(var(--ui-accent-rgb), .11); color: var(--ui-accent-ink); font-size: var(--ui-fs-help); font-weight: var(--ui-fw-semibold); font-variant-numeric: tabular-nums; line-height: 1; }
.ui-steps strong { font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.ui-steps > li.is-current { color: var(--ui-ink); }
.ui-steps > li.is-current::before { background: var(--ui-accent); color: var(--ui-on-primary, #fff); }
.ui-steps > li.is-done { color: var(--ui-muted); }
.ui-steps > li.is-done::before { background: rgba(var(--ui-ok-rgb), .13); color: var(--ui-ok-ink); }
.ui-steps.is-inline { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ui-space-2) var(--ui-space-5); font-size: var(--ui-fs-label); }
.ui-steps.is-inline > li { align-items: center; gap: var(--ui-space-2); }
.ui-steps.is-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; font-size: var(--ui-fs-label); font-weight: var(--ui-fw-medium); line-height: var(--ui-lh-snug); text-align: center; }
.ui-steps.is-cards > li { flex-direction: column; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-4) var(--ui-space-3); border-radius: var(--ui-r-lg); background: var(--ui-fill-1); }
@media (max-width: 560px) {
    .ui-steps.is-inline { flex-direction: column; align-items: flex-start; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
    .ui-steps.is-cards { grid-template-columns: minmax(0, 1fr); max-width: 360px; text-align: left; }
    .ui-steps.is-cards > li { flex-direction: row; }
}

/* ── Notice inline ─────────────────────────────────────────────────────────── */
.ui-notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 15px; border-radius: var(--ui-radius-sm); font-size: .82rem; line-height: 1.5; border: 1px solid var(--ui-line-2); background: var(--ui-surface); color: var(--ui-ink-2); }
.ui-notice svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: var(--ui-teal); }

/* ── Selo de canal ────────────────────────────────────────────── */
/* Diz de QUAL canal e a conversa (cabecalho do chat, painel de contato, painel
   do atendente, card do Kanban). Substitui o degrade escrito no atributo style
   de cada uma dessas telas. Sem sombra, borda por cor de fundo translucida, e o
   icone entra por Lucide, nunca por emoji. */
.ui-chip.channel-whatsapp { color: var(--ui-ok); background: rgba(var(--ui-ok-rgb), .12); }
.ui-chip.channel-instagram { color: #C13584; background: rgba(193, 53, 132, .12); }
.ui-chip.channel-telegram { color: var(--ui-tg-ink); background: rgba(var(--ui-tg-rgb), .12); }
.ui-chip.channel-whatsapp svg, .ui-chip.channel-instagram svg, .ui-chip.channel-telegram svg { width: 13px; height: 13px; flex: 0 0 auto; }
:root[data-theme="dark"] .ui-chip.channel-instagram { color: #E4709F; background: rgba(228, 112, 159, .16); }
:root[data-theme="dark"] .ui-chip.channel-telegram { background: rgba(var(--ui-tg-rgb), .18); }
/* Selo de canal no avatar (partial client/layout/channel-dot.php): a logo da
   rede num circulo com a cor da marca, no canto de baixo da foto. O aro e da
   cor do fundo por onde ele passa (--ui-chan-dot-ring, o chamador troca por
   estado), o que recorta o selo da foto sem sombra. Quem posiciona e o chamador. */
.ui-chan-dot { --ui-chan-dot-ring: var(--ui-card-bg); display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ui-chan-dot-ring); color: #fff; line-height: 0; pointer-events: none; }
.ui-chan-dot svg { width: 11px; height: 11px; flex: 0 0 auto; }
.ui-chan-dot--whatsapp { background: #25D366; }
.ui-chan-dot--instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.ui-chan-dot--instagram svg { stroke-width: 2.4; }
/* Telegram: icone Lucide `send` (aviao de papel), traco um pouco mais grosso
   para ler no circulo de 20px; o desenho pesa para a direita, entao desce e
   volta meio pixel para ficar no centro otico. */
.ui-chan-dot--telegram { background: var(--ui-tg); }
.ui-chan-dot--telegram svg { stroke-width: 2.4; transform: translate(-0.5px, 0.5px); }
.ui-chan-dot--sm { width: 17px; height: 17px; }
.ui-chan-dot--sm svg { width: 9px; height: 9px; }
/* Logo por máscara (pedido Z-A/PERF-0): o partial manda o <span> VAZIO e o
   glifo vem daqui, uma vez por página em vez de 1,7 KB de <svg> por linha da
   lista. Marcação antiga (com <svg> dentro) continua igual: o ::before só
   entra quando o selo está vazio. */
.ui-chan-dot:empty::before { content: ""; width: 11px; height: 11px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--ui-chan-dot-ico) center / contain no-repeat; mask: var(--ui-chan-dot-ico) center / contain no-repeat; }
.ui-chan-dot--sm:empty::before { width: 9px; height: 9px; }
.ui-chan-dot--whatsapp { --ui-chan-dot-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='black'%20d='M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413Z'/%3E%3C/svg%3E"); }
.ui-chan-dot--instagram { --ui-chan-dot-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20width='20'%20height='20'%20x='2'%20y='2'%20rx='5'%20ry='5'/%3E%3Cpath%20d='M16%2011.37A4%204%200%201%201%2012.63%208%204%204%200%200%201%2016%2011.37z'/%3E%3Cline%20x1='17.5'%20x2='17.51'%20y1='6.5'%20y2='6.5'/%3E%3C/svg%3E"); }
.ui-chan-dot--telegram { --ui-chan-dot-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14.536%2021.686a.5.5%200%200%200%20.937-.024l6.5-19a.496.496%200%200%200-.635-.635l-19%206.5a.5.5%200%200%200-.024.937l7.93%203.18a2%202%200%200%201%201.112%201.11z'/%3E%3Cpath%20d='m21.854%202.147-10.94%2010.939'/%3E%3C/svg%3E"); }
.ui-chan-dot--telegram:empty::before { transform: translate(-0.5px, 0.5px); }
/* Chip de anuncio: a conversa comecou por um anuncio Click to WhatsApp
   (partial client/layout/ad-chip.php). Tom de atencao, nunca cor solta. */
.ui-chip.ad { color: var(--ui-warn); background: rgba(var(--ui-warn-rgb), .13); }
.ui-chip.ad svg { width: 13px; height: 13px; flex: 0 0 auto; }
:root[data-theme="dark"] .ui-chip.ad { color: #FBBF24; background: rgba(251, 191, 36, .16); }

/* ── Callout: aviso com acao (ui-callout) ────────────────────────────── */
/* Bloqueio ou alerta que precisa de um proximo passo visivel (regra da casa:
   motivo + caminho para resolver, nunca so tooltip). Icone em ladrilho, titulo,
   texto e o botao a direita, na mesma linha; no celular o botao desce. Borda
   1px na cor da variante, sem sombra, sem faixa. */
.ui-callout { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--ui-radius); border: 1px solid var(--ui-line); background: var(--ui-card-bg); color: var(--ui-ink-2); }
.ui-callout-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px; background: var(--ui-surface); color: var(--ui-muted); }
.ui-callout-ico svg { width: 20px; height: 20px; }
.ui-callout-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-callout-title { font-size: .86rem; font-weight: 600; color: var(--ui-ink); line-height: 1.3; }
.ui-callout-text { font-size: .8rem; line-height: 1.5; color: var(--ui-ink-2); }
.ui-callout-action { flex: 0 0 auto; }
.ui-callout.is-warn { border-color: rgba(var(--ui-warn-rgb), .38); background: rgba(var(--ui-warn-rgb), .06); }
.ui-callout.is-warn .ui-callout-ico { background: rgba(var(--ui-warn-rgb), .14); color: var(--ui-warn); }
.ui-callout.is-danger { border-color: rgba(var(--ui-danger-rgb), .38); background: rgba(var(--ui-danger-rgb), .06); }
.ui-callout.is-danger .ui-callout-ico { background: rgba(var(--ui-danger-rgb), .14); color: var(--ui-danger); }
.ui-callout.is-info { border-color: rgba(var(--ui-accent-rgb), .35); background: rgba(var(--ui-accent-rgb), .05); }
.ui-callout.is-info .ui-callout-ico { background: rgba(var(--ui-accent-rgb), .12); color: var(--ui-accent); }
@media (max-width: 640px) {
    .ui-callout { flex-wrap: wrap; }
    .ui-callout-action { flex-basis: 100%; }
    .ui-callout-action .ui-btn { width: 100%; justify-content: center; }
}

/* ── Aviso de janela de atendimento ──────────────────────────────── */
/* Fica acima do campo de mensagem quando o canal fecha a janela de 24 horas.
   E o "motivo visivel" que a regra da casa exige: antes o unico sinal era o
   texto de dica do campo, que some assim que o usuario digita e nao existe para
   leitor de tela. Herda .ui-notice (flex, borda 1px, sem sombra) e so troca a
   cor para o tom de atencao. `[hidden]` precisa vencer o display:flex herdado. */
.wa-window-notice { border-color: rgba(var(--ui-warn-rgb), .35); background: rgba(var(--ui-warn-rgb), .08); color: var(--ui-ink-2); }
.wa-window-notice[hidden] { display: none; }
.wa-window-notice svg { color: var(--ui-warn); }
.wa-window-notice-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.wa-window-notice-title { font-size: .82rem; font-weight: 600; color: var(--ui-ink); }
.wa-window-notice-text { font-size: .8rem; line-height: 1.5; }
.wa-window-notice-link { margin-top: 4px; text-decoration: none; }
.wa-window-notice-link[hidden] { display: none; }

/* ── Nota de capacidade indisponivel ─────────────────────────────── */
/* Uma linha explicando por que um menu veio menor do que o usuario esperava
   (o canal nao aceita aquele tipo de anexo, por exemplo). E o "motivo visivel"
   da regra da casa para o caso em que a acao nao foi bloqueada e sim NUNCA
   existiu naquele canal: em vez de um item cinza que nao faz nada, o item sai
   do menu e uma frase diz o porque, no mesmo lugar em que ele estaria.
   Mora aqui, e nao na folha de uma tela, porque vale para qualquer menu em
   qualquer canal. Separada por borda de 1px, nunca por sombra; o icone entra
   por Lucide (SVG), nunca por emoji. */
.ui-capnote { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; padding: 9px 20px 2px; border-top: 1px solid var(--ui-line-2); font-size: .76rem; line-height: 1.45; color: var(--ui-muted-2); }
.ui-capnote svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--ui-muted-2); }
.ui-capnote-ico { display: inline-flex; align-items: center; margin-top: 2px; flex: 0 0 auto; }

/* ── Campos (ui-field / ui-input / ui-select / ui-textarea) ─────────────────
   Mesma altura dos botões (md 40, sm 32, lg 48), mesmo raio, contorno com 3:1
   (--ui-ctl-line) e foco = borda da marca + anel de 3px (outline, nunca sombra).
   Anatomia: .ui-field > .ui-label (+ .req | .ui-label-opt) + controle + .ui-help
   | .ui-error. Erro: .is-invalid no campo ou aria-invalid="true" no controle. */
.ui-field { margin-bottom: var(--ui-space-5); min-width: 0; }
.ui-label { display: block; font-size: var(--ui-fs-label); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-snug); color: var(--ui-ink); margin-bottom: var(--ui-space-2); }
.ui-label .req { color: var(--ui-danger); }
.ui-label-opt { margin-left: 4px; font-weight: var(--ui-fw-regular); color: var(--ui-muted); }
.ui-input, .ui-select, .ui-textarea {
    display: block; width: 100%; min-width: 0; margin: 0;
    font-family: inherit; font-size: var(--ui-fs-body); line-height: 20px; color: var(--ui-ink);
    padding: 9px 12px;
    background-color: var(--ui-field-bg);
    border: 1px solid var(--ui-ctl-line);
    border-radius: var(--ui-r-md);
    outline: 3px solid transparent; outline-offset: 0;
    color-scheme: light;
    transition: border-color var(--ui-dur-1) var(--ui-ease), outline-color var(--ui-dur-1) var(--ui-ease), background-color var(--ui-dur-1) var(--ui-ease);
}
:root[data-theme="dark"] .ui-input, :root[data-theme="dark"] .ui-select, :root[data-theme="dark"] .ui-textarea { color-scheme: dark; }
.ui-textarea { resize: vertical; min-height: 88px; line-height: var(--ui-lh-body); }
.ui-input:hover, .ui-select:hover, .ui-textarea:hover { border-color: var(--ui-ctl-line-hover); }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus { border-color: var(--ui-accent); outline-color: rgba(var(--ui-accent-rgb), .18); }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--ui-muted-2); opacity: 1; }
.ui-input:disabled, .ui-input[readonly], .ui-select:disabled, .ui-textarea:disabled, .ui-textarea[readonly] { background-color: var(--ui-fill-1); border-color: var(--ui-line); color: var(--ui-muted); cursor: default; }
.ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled { cursor: not-allowed; }
.ui-input.is-mono { font-family: var(--ui-mono); font-size: .82rem; }
/* Erro: borda e anel de perigo; a frase vai em .ui-error logo abaixo. */
.ui-input.is-invalid, .ui-select.is-invalid, .ui-textarea.is-invalid,
.ui-input[aria-invalid="true"], .ui-select[aria-invalid="true"], .ui-textarea[aria-invalid="true"],
.ui-field.is-invalid .ui-input, .ui-field.is-invalid .ui-select, .ui-field.is-invalid .ui-textarea { border-color: var(--ui-danger); }
.ui-input.is-invalid:focus, .ui-input[aria-invalid="true"]:focus, .ui-field.is-invalid .ui-input:focus,
.ui-textarea[aria-invalid="true"]:focus, .ui-field.is-invalid .ui-textarea:focus { outline-color: rgba(var(--ui-danger-rgb), .18); }
/* Tamanhos */
.ui-input-sm { padding: 5px 10px; font-size: var(--ui-fs-label); border-radius: var(--ui-r-sm); }
.ui-input-lg { padding: 13px 14px; font-size: .9375rem; border-radius: var(--ui-r-lg); }
/* Celular: campo de 44px (alvo de toque). :where mantém a especificidade de
   uma classe, então a folha da página que ajusta o campo continua mandando. */
@media (max-width: 640px) {
    .ui-input:where(:not(.ui-input-sm, .ui-input-lg, textarea)), .ui-select:where(:not(.ui-input-sm, .ui-input-lg)) { padding-top: 11px; padding-bottom: 11px; }
}
/* Select nativo com a seta do sistema (claro/escuro) */
.ui-select, select.ui-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; cursor: pointer; }
:root[data-theme="dark"] .ui-select, :root[data-theme="dark"] select.ui-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A3ABB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
/* Data e hora: o ícone nativo segue o color-scheme do campo (escuro no claro,
   claro no escuro). Vence a regra global do style.css pela especificidade. */
:root .ui-input[type="date"]::-webkit-calendar-picker-indicator,
:root .ui-input[type="time"]::-webkit-calendar-picker-indicator,
:root .ui-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
:root .ui-input[type="month"]::-webkit-calendar-picker-indicator,
:root .ui-input[type="week"]::-webkit-calendar-picker-indicator { filter: none; opacity: .55; cursor: pointer; border-radius: 4px; transition: opacity var(--ui-dur-1) var(--ui-ease); }
:root[data-theme="dark"] .ui-input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] .ui-input[type="time"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] .ui-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] .ui-input[type="month"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] .ui-input[type="week"]::-webkit-calendar-picker-indicator { filter: none; opacity: .7; }
:root .ui-input[type="date"]:hover::-webkit-calendar-picker-indicator,
:root .ui-input[type="time"]:hover::-webkit-calendar-picker-indicator,
:root .ui-input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator { opacity: .9; }
.ui-input[type="date"], .ui-input[type="time"], .ui-input[type="datetime-local"] { font-variant-numeric: tabular-nums; }
/* Data/hora sempre em pt-BR (.ui-dt + window.uiDate): texto com máscara
   dd/mm/aaaa hh:mm + botão que abre o seletor nativo (escondido, fonte da verdade). */
.ui-dt { position: relative; display: block; min-width: 0; }
.ui-dt .ui-dt-text { padding-right: 44px; font-variant-numeric: tabular-nums; }
.ui-dt-native { position: absolute; right: 12px; bottom: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.ui-dt-btn { position: absolute; right: 4px; top: 50%; width: 32px; height: 32px; margin-top: -16px; padding: 0; display: grid; place-items: center; border: 0; border-radius: var(--ui-r-sm); background: transparent; color: var(--ui-muted); cursor: pointer; transition: background-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease); }
.ui-dt-btn svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.ui-dt-btn:hover { background: var(--ui-fill-2); color: var(--ui-ink); }
.ui-dt-btn:focus:not(:focus-visible) { outline: none; }
.ui-dt-btn:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 0; }
.ui-dt-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Ajuda e erro (12px). Ajuda em --ui-muted: 4.5:1. */
.ui-help { font-size: var(--ui-fs-help); color: var(--ui-muted); margin-top: 6px; line-height: var(--ui-lh-body); }
.ui-error { display: flex; align-items: flex-start; gap: 6px; font-size: var(--ui-fs-help); font-weight: var(--ui-fw-medium); color: var(--ui-danger); margin-top: 6px; line-height: var(--ui-lh-body); }
.ui-error svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; }
.ui-error[hidden] { display: none; }
/* Campo + botão colados */
.ui-input-group { position: relative; display: flex; align-items: stretch; }
.ui-input-group .ui-input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ui-input-group .ui-btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* Duas colunas de campo (vira uma no celular) */
.ui-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--ui-space-4); }
@media (max-width: 560px) { .ui-field-row { grid-template-columns: minmax(0, 1fr); } }
/* Celular com toque: 16px no campo evita o zoom automático do iPhone. */
@media (pointer: coarse) { .ui-input, .ui-select, .ui-textarea, .ui-search .ui-input { font-size: 16px; } }

/* Busca com ícone: <label class="ui-search"> svg + input.ui-input [+ .ui-search-clear] */
.ui-search { position: relative; display: block; min-width: 0; }
.ui-search > svg { position: absolute; left: 12px; top: 50%; width: var(--ui-ic-sm); height: var(--ui-ic-sm); margin-top: -8px; color: var(--ui-muted); pointer-events: none; }
.ui-search .ui-input { padding-left: 38px; padding-right: 36px; }
.ui-search .ui-input-sm { padding-left: 34px; }
.ui-search .ui-input::-webkit-search-decoration, .ui-search .ui-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ui-search-clear { position: absolute; right: 6px; top: 50%; width: 28px; height: 28px; margin-top: -14px; padding: 0; display: grid; place-items: center; border: 0; border-radius: var(--ui-r-sm); background: transparent; color: var(--ui-muted); cursor: pointer; transition: background-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease); }
.ui-search-clear svg { width: 14px; height: 14px; }
.ui-search-clear:hover { background: var(--ui-fill-2); color: var(--ui-ink); }
.ui-search .ui-input:placeholder-shown ~ .ui-search-clear { display: none; }
.ui-search.is-pill .ui-input { border-radius: var(--ui-r-pill); }

/* Switch (ui-switch): <label class="ui-switch"><input type="checkbox" role="switch">
   <span class="ui-switch-track"></span><span class="ui-switch-label">Texto</span></label>
   Substitui .cs-switch (mesma estrutura: só trocar as classes) e .form-switch. */
.ui-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.ui-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-switch-track { position: relative; flex: 0 0 auto; width: 40px; height: 24px; border-radius: var(--ui-r-pill); background-color: var(--ui-ctl-line); transition: background-color var(--ui-dur-2) var(--ui-ease); }
.ui-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ui-switch-knob, #fff); transform-origin: left center; transition: transform var(--ui-dur-2) var(--ui-ease-out); }
.ui-switch:hover input:not(:checked):not(:disabled) + .ui-switch-track { background-color: var(--ui-ctl-line-hover); }
.ui-switch input:checked + .ui-switch-track { background-color: var(--ui-accent); }
.ui-switch input:checked + .ui-switch-track::after { transform: translateX(16px); transform-origin: right center; }
.ui-switch:active input:not(:disabled) + .ui-switch-track::after { transform: scaleX(1.18); }
.ui-switch:active input:checked:not(:disabled) + .ui-switch-track::after { transform: translateX(16px) scaleX(1.18); }
.ui-switch input:focus-visible + .ui-switch-track { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-switch input:disabled + .ui-switch-track { opacity: .5; }
.ui-switch:has(input:disabled) { cursor: not-allowed; }
.ui-switch-label { font-size: var(--ui-fs-body); color: var(--ui-ink-2); font-weight: var(--ui-fw-medium); line-height: 20px; }
.ui-switch-sm .ui-switch-track { width: 32px; height: 20px; }
.ui-switch-sm .ui-switch-track::after { top: 3px; left: 3px; width: 14px; height: 14px; }
.ui-switch-sm input:checked + .ui-switch-track::after { transform: translateX(12px); }
.ui-switch-sm:active input:checked:not(:disabled) + .ui-switch-track::after { transform: translateX(12px) scaleX(1.18); }

/* Switch num input solto (migração de .form-check-input role="switch"):
   <input type="checkbox" class="ui-toggle" role="switch"> */
.ui-toggle { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; display: inline-block; width: 40px; height: 24px; margin: 0; border: 0; border-radius: var(--ui-r-pill); background-color: var(--ui-ctl-line); vertical-align: middle; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--ui-dur-2) var(--ui-ease); }
.ui-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ui-switch-knob, #fff); transform-origin: left center; transition: transform var(--ui-dur-2) var(--ui-ease-out); }
.ui-toggle:hover:not(:checked):not(:disabled) { background-color: var(--ui-ctl-line-hover); }
.ui-toggle:checked { background-color: var(--ui-accent); }
.ui-toggle:checked::after { transform: translateX(16px); transform-origin: right center; }
.ui-toggle:active:not(:disabled)::after { transform: scaleX(1.18); }
.ui-toggle:checked:active:not(:disabled)::after { transform: translateX(16px) scaleX(1.18); }
.ui-toggle:focus:not(:focus-visible) { outline: none; }
.ui-toggle:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-toggle:disabled { opacity: .5; cursor: not-allowed; }

/* Checkbox e radio (no próprio input): .ui-checkbox / .ui-radio.
   Com texto: <label class="ui-check"><input class="ui-checkbox"> <span>Texto
   <span class="ui-check-desc">detalhe</span></span></label> */
.ui-checkbox, .ui-radio { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; display: inline-block; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--ui-ctl-line); background-color: var(--ui-field-bg); vertical-align: middle; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--ui-dur-1) var(--ui-ease), border-color var(--ui-dur-1) var(--ui-ease); }
.ui-checkbox { border-radius: 5px; }
.ui-radio { border-radius: 50%; }
.ui-checkbox::after { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; background: var(--ui-on-primary, #fff); opacity: 0; transform: scale(.5);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
    transition: transform var(--ui-dur-2) var(--ui-ease-out), opacity var(--ui-dur-1) var(--ui-ease); }
.ui-checkbox:indeterminate::after { -webkit-mask: none; mask: none; width: 9px; height: 2px; border-radius: 2px; }
.ui-radio::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-on-primary, #fff); transform: scale(0); transition: transform var(--ui-dur-2) var(--ui-ease-out); }
.ui-checkbox:hover:not(:disabled), .ui-radio:hover:not(:disabled) { border-color: var(--ui-ctl-line-hover); }
.ui-checkbox:checked, .ui-checkbox:indeterminate, .ui-radio:checked { background-color: var(--ui-accent); border-color: var(--ui-accent); }
.ui-checkbox:checked::after, .ui-checkbox:indeterminate::after { opacity: 1; transform: none; }
.ui-radio:checked::after { transform: scale(1); }
.ui-checkbox:focus:not(:focus-visible), .ui-radio:focus:not(:focus-visible) { outline: none; }
.ui-checkbox:focus-visible, .ui-radio:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-checkbox:disabled, .ui-radio:disabled { opacity: .5; cursor: not-allowed; }
.ui-check { display: inline-flex; align-items: flex-start; gap: 10px; font-size: var(--ui-fs-body); line-height: 20px; color: var(--ui-ink-2); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.ui-check > .ui-checkbox, .ui-check > .ui-radio { margin-top: 1px; }
.ui-check > .ui-toggle { margin-top: -2px; }
.ui-check-desc { display: block; font-size: var(--ui-fs-help); line-height: var(--ui-lh-body); color: var(--ui-muted); }
.ui-check:has(input:disabled) { cursor: not-allowed; color: var(--ui-muted); }
/* Lista de opções empilhada */
.ui-checks { display: flex; flex-direction: column; gap: var(--ui-space-3); }

/* Cartão de escolha (radio/checkbox com título e descrição, como "papel"):
   <label class="ui-choice"><input type="radio" class="ui-radio" name="x">
   <span class="ui-choice-body"><span class="ui-choice-title">..</span>
   <span class="ui-choice-desc">..</span></span></label> */
.ui-choices { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.ui-choice { display: flex; align-items: flex-start; gap: var(--ui-space-3); padding: 14px 16px; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-lg); background: var(--ui-bg-card); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color var(--ui-dur-1) var(--ui-ease), background-color var(--ui-dur-1) var(--ui-ease); }
.ui-choice > .ui-radio, .ui-choice > .ui-checkbox { margin-top: 1px; }
.ui-choice:hover { border-color: var(--ui-ctl-line); }
.ui-choice:has(> input:checked), .ui-choice.is-selected { border-color: var(--ui-accent); background: rgba(var(--ui-accent-rgb), .05); }
.ui-choice:has(> input:focus-visible) { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-choice:has(> input:focus-visible) > input { outline: none; }
.ui-choice:has(> input:disabled) { opacity: .55; cursor: not-allowed; }
.ui-choice-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-choice-title { font-size: var(--ui-fs-body); font-weight: var(--ui-fw-semibold); line-height: 20px; color: var(--ui-ink); }
.ui-choice-desc { font-size: var(--ui-fs-help); line-height: var(--ui-lh-body); color: var(--ui-muted); }

/* Linha de opção (rótulo + descrição + controle à direita) */
.ui-optrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ui-line-2); }
.ui-optrow:last-child { border-bottom: 0; }
.ui-optrow-txt strong { display: block; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.ui-optrow-txt span { font-size: var(--ui-fs-help); color: var(--ui-muted); }

/* ── Abas em pílula (ui-tabs) ──────────────────────────────────────────────
   Trilho suave + indicador que DESLIZA até a aba ativa (o ui-kit.js injeta o
   .ui-tabs-ink e acompanha cliques, troca de classe e redimensionamento).
   Ativa = .active | .is-active | [aria-selected="true"]: peso 600 e indicador
   (dois sinais, não só cor). Contador opcional em .ui-tab-n. Até 5 abas.
   Variantes: .ui-tabs-solid (indicador escuro, texto claro) e .ui-tabs-block
   (largura toda, abas iguais; bom no celular). Sem JS, a aba ativa pinta o
   próprio fundo. */
.ui-tabs { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: var(--ui-r-pill); background: var(--ui-track); border: 1px solid var(--ui-line-2); }
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; height: var(--ui-ctl-sm); padding: 0 14px; border: 1px solid transparent; border-radius: var(--ui-r-pill); background: transparent; color: var(--ui-muted); font: inherit; font-size: var(--ui-fs-label); font-weight: var(--ui-fw-medium); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--ui-dur-1) var(--ui-ease), background-color var(--ui-dur-1) var(--ui-ease); }
.ui-tab svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.ui-tab:hover { color: var(--ui-ink); }
/* Sem anel de foco ao clicar; foco visível no teclado */
.ui-tab:focus:not(:focus-visible) { outline: none; }
.ui-tab:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
.ui-tab.active, .ui-tab.is-active, .ui-tab[aria-selected="true"] { color: var(--ui-ink); font-weight: var(--ui-fw-semibold); background: var(--ui-bg-raised); border-color: var(--ui-line); }
.ui-tab-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--ui-r-pill); font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); font-variant-numeric: tabular-nums; color: var(--ui-muted); background: var(--ui-fill-2); }
/* Indicador deslizante (JS). Com ele, a aba ativa deixa o fundo para o indicador. */
.ui-tabs-ink { position: absolute; top: 0; left: 0; z-index: 0; width: 0; height: 0; border-radius: var(--ui-r-pill); background: var(--ui-bg-raised); border: 1px solid var(--ui-line); pointer-events: none; opacity: 0; transition: transform var(--ui-dur-3) var(--ui-ease-out), width var(--ui-dur-3) var(--ui-ease-out), height var(--ui-dur-3) var(--ui-ease-out), opacity var(--ui-dur-1) var(--ui-ease); }
.ui-tabs.has-ink .ui-tabs-ink { opacity: 1; }
.ui-tabs.has-ink .ui-tab.active, .ui-tabs.has-ink .ui-tab.is-active, .ui-tabs.has-ink .ui-tab[aria-selected="true"] { background: transparent; border-color: transparent; }
.ui-tabs.no-anim .ui-tabs-ink { transition: none; }
/* Sólida: indicador na cor do texto (escuro no claro, claro no escuro) */
.ui-tabs-solid .ui-tab.active, .ui-tabs-solid .ui-tab.is-active, .ui-tabs-solid .ui-tab[aria-selected="true"] { color: var(--ui-card-bg); background: var(--ui-ink); border-color: var(--ui-ink); }
.ui-tabs-solid .ui-tabs-ink { background: var(--ui-ink); border-color: var(--ui-ink); }
.ui-tabs-solid.has-ink .ui-tab.active, .ui-tabs-solid.has-ink .ui-tab.is-active, .ui-tabs-solid.has-ink .ui-tab[aria-selected="true"] { color: var(--ui-card-bg); background: transparent; border-color: transparent; }
.ui-tabs-solid .ui-tab.active .ui-tab-n, .ui-tabs-solid .ui-tab.is-active .ui-tab-n, .ui-tabs-solid .ui-tab[aria-selected="true"] .ui-tab-n { color: inherit; background: rgba(127, 127, 127, .28); }
.ui-tabs-block { display: flex; width: 100%; }
.ui-tabs-block .ui-tab { flex: 1 1 0; min-width: 0; padding: 0 8px; }
@media (max-width: 640px) { .ui-tab { height: 36px; } }

/* ── Seletor de dispositivo (compartilhado: campaigns, templates, etc.) ─────── */
.ui-devsel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 15px; margin-bottom: 14px; }
.ui-devsel-lbl { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600; color: var(--ui-muted); white-space: nowrap; }
.ui-devsel-lbl svg { width: 16px; height: 16px; }
.ui-devsel-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-dev { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: var(--ui-radius); border: 1px solid var(--ui-line); background: var(--ui-card-bg); color: var(--ui-ink-2); font-size: .8rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: border-color .16s var(--ui-ease), color .16s var(--ui-ease), background .16s var(--ui-ease); }
.ui-dev:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-dev.active { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-on-primary, #fff); }
.ui-dev-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--ui-muted-2); }
.ui-dev-dot.on  { background: var(--ui-ok); }
.ui-dev-dot.off { background: var(--ui-danger); }
.ui-dev.active .ui-dev-dot { background: #fff; }
.ui-devsel-empty { font-size: .82rem; color: var(--ui-muted); }
/* Variante leve (consistência WhatsApp, 01/10): linha solta, sem cartão. Uma
   fonte só para Grupos, Canais, Automação de grupos e Rede de grupos.
   <div class="ui-devsel is-plain" role="group" aria-label="Dispositivo"><span class="ui-devsel-lbl">Dispositivo</span><div class="ui-devsel-list">...</div></div> */
.ui-devsel.is-plain { gap: var(--ui-space-2); padding: 0; margin-bottom: var(--ui-space-4); }
.ui-devsel.is-plain .ui-devsel-lbl { margin-right: var(--ui-space-1); font-size: var(--ui-fs-label); font-weight: var(--ui-fw-regular); }
.ui-devsel.is-plain .ui-dev { min-height: 36px; }
@media (max-width: 720px) { .ui-devsel.is-plain .ui-dev { min-height: var(--ui-target); } }

/* ── Separação por tipo de API: API Própria x API Oficial (reutilizável) ──────
   Injetado por ui-kit.js (initDeviceTypeFilters) em qualquer seletor cujos
   chips/labels carreguem data-dev-type="own|official". O toggle só aparece
   quando há os DOIS tipos. NÃO expõe nome real de API ao cliente. */
.dev-type-seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-sm); }
.dev-type-seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 14px; border: 0; background: transparent; color: var(--ui-muted); font-size: .78rem; font-weight: 600; line-height: 1; border-radius: calc(var(--ui-radius-sm) - 3px); cursor: pointer; white-space: nowrap; transition: background .15s var(--ui-ease), color .15s var(--ui-ease); }
.dev-type-seg-btn svg { width: 15px; height: 15px; }
.dev-type-seg-btn:hover { color: var(--ui-ink-2); }
.dev-type-seg-btn.active { background: var(--ui-card-bg); color: var(--ui-ink); border: 1px solid var(--ui-line); padding: 6px 13px; }
.dev-type-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font-size: .68rem; font-weight: 600; border-radius: 999px; background: var(--ui-line-2); color: var(--ui-muted); }
.dev-type-seg-btn.active .dev-type-count { background: rgba(var(--ui-accent-rgb), .14); color: var(--ui-accent); }

/* Esconde os itens que não são do tipo ativo (genérico: chip, label, botão). */
[data-active-type="own"] [data-dev-type="official"],
[data-active-type="official"] [data-dev-type="own"] { display: none; }

/* Layout dos seletores ui-devsel com o toggle: [label] [chips] ... [toggle →]. */
.ui-devsel--typed { align-items: center; }
.ui-devsel--typed .ui-devsel-list { order: 1; }
.ui-devsel--typed .dev-type-seg   { order: 2; margin-left: auto; }
.dev-type-seg--end { margin-left: auto; } /* toggle no fim da linha (ex.: kanban) */
/* Quando o toggle fica ACIMA dos chips (ex.: /campaigns/create), dá respiro. */
.dev-type-seg { margin-bottom: 10px; }
.ui-devsel--typed .dev-type-seg, .dev-type-seg--end { margin-bottom: 0; }

@media (max-width: 560px) {
    .ui-devsel--typed .dev-type-seg { margin-left: 0; flex-basis: 100%; }
    .dev-type-seg { display: flex; }
    .dev-type-seg-btn { flex: 1; }
}

/* Selo "verificado" (API Oficial), estilo Meta — azul com check branco. */
.ui-verified { display: inline-flex; align-items: center; vertical-align: middle; width: 16px; height: 16px; flex-shrink: 0; }
.ui-verified svg { width: 100%; height: 100%; display: block; }

/* ── Modal (ui-modal) ──────────────────────────────────────────────────────
   Usa .modal/.modal-dialog do Bootstrap (abrir/fechar, foco, Esc), mas o BOX é
   feito com classes PRÓPRIAS: o style.css compartilhado força .modal-content,
   .modal-header... com !important, então a migração é TROCAR as classes:
     .modal-content → .ui-mbox      .modal-header → .ui-mhead
     .modal-title   → .ui-mtitle    .btn-close    → .ui-mclose
     .modal-body    → .ui-mbody     .modal-footer → .ui-mfoot
   Anatomia única: cabeçalho (título 18px + .ui-msub opcional dentro de
   .ui-mhead-txt, X à direita), corpo com 24px, rodapé à direita com
   [secundário][primário]. Larguras (UX-CALMA regra 14): sm 480 (confirmação),
   md 640 (formulário), lg 800 (galeria), wide 840.
   Variantes: .ui-modal-scroll (corpo rola), .ui-modal-sheet (folha de baixo no
   celular), .ui-modal-drawer (painel lateral com fundo escurecido).
   Entrada sobe 8px (250ms, desacelera); saída 75% disso, acelerando. */
.ui-modal .modal-dialog { pointer-events: none; }
.ui-modal.ui-modal-sm .modal-dialog { max-width: 480px; }
.ui-modal.ui-modal-md .modal-dialog { max-width: 640px; }
.ui-modal.ui-modal-lg .modal-dialog { max-width: 800px; }
.ui-modal.ui-modal-wide .modal-dialog { max-width: 840px; }
.ui-modal.fade { transition: opacity calc(var(--ui-dur-3) * .75) var(--ui-ease-in); }
.ui-modal.fade.show { transition-duration: var(--ui-dur-3); transition-timing-function: var(--ui-ease-out); }
.ui-modal.fade .modal-dialog { transform: translateY(8px) scale(.985); transition: transform calc(var(--ui-dur-3) * .75) var(--ui-ease-in); }
.ui-modal.show .modal-dialog { transform: none; transition-duration: var(--ui-dur-3); transition-timing-function: var(--ui-ease-out); }
.ui-modal.modal-static .modal-dialog { transform: scale(1.015); }

.ui-mbox {
    pointer-events: auto;
    width: 100%;
    display: flex; flex-direction: column;
    background: var(--ui-bg-raised);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-xl);
    overflow: hidden;
    color: var(--ui-ink);
}
.ui-mhead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ui-space-4); padding: 20px 24px 4px; }
.ui-mhead-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 4px; }
.ui-mtitle { font-size: var(--ui-fs-modal); font-weight: var(--ui-fw-semibold); letter-spacing: var(--ui-ls-title); color: var(--ui-ink); margin: 0; line-height: var(--ui-lh-tight); }
.ui-mhead > .ui-mtitle { padding-top: 4px; }
.ui-msub { font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); color: var(--ui-muted); margin: 0; }
.ui-mbody { padding: 16px 24px; color: var(--ui-ink-2); font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); }
.ui-mbody > :last-child { margin-bottom: 0; }
.ui-mfoot { display: flex; align-items: center; justify-content: flex-end; gap: var(--ui-space-2); padding: 12px 24px 24px; }
.ui-mfoot.between { justify-content: space-between; }
.ui-mfoot-start { margin-right: auto; }   /* ação terciária à esquerda (ex.: "Excluir") */
/* Rolagem interna (substitui .modal-dialog-scrollable): divisórias aparecem
   porque o conteúdo passa por baixo do cabeçalho e do rodapé. */
.ui-modal-scroll .ui-mbox { max-height: calc(100vh - 3.5rem); max-height: calc(100dvh - 3.5rem); }
.ui-modal-scroll .ui-mbody { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.ui-modal-scroll .ui-mhead { padding-bottom: 16px; border-bottom: 1px solid var(--ui-line-2); }
.ui-modal-scroll .ui-mfoot { padding-top: 16px; border-top: 1px solid var(--ui-line-2); }
/* Modal cujo <form> envolve head/body/foot (ex.: /client/api-tokens): o form
   vira o filho flex e cresceria sem limite, escondendo o rodapé com os botões.
   Ele herda o papel de coluna flex limitada e o corpo continua rolando. */
.ui-modal-scroll .ui-mbox > form { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 3.5rem); max-height: calc(100dvh - 3.5rem); }
/* Botão fechar (X): classe própria; data-bs-dismiss continua funcionando */
.ui-mclose {
    width: 32px; height: 32px; flex: 0 0 auto; padding: 0; margin: 0 -8px 0 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: var(--ui-r-sm); background: transparent;
    color: var(--ui-muted); cursor: pointer;
    transition: background-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease), transform var(--ui-dur-1) var(--ui-ease);
}
.ui-mclose::before {
    content: ""; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / 18px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.ui-mclose:hover { background: var(--ui-fill-2); color: var(--ui-ink); }
.ui-mclose:active { transform: scale(.94); }
.ui-mclose:focus:not(:focus-visible) { outline: none; }
.ui-mclose:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
@media (max-width: 560px) {
    .ui-mhead { padding: 18px 20px 4px; }
    .ui-mbody { padding: 14px 20px; }
    .ui-mfoot { padding: 12px 20px 20px; }
}

/* Folha de baixo no celular (opt-in: .ui-modal-sheet). No desktop é o modal
   normal; até 560px encosta embaixo, ocupa a largura e o corpo rola. */
@media (max-width: 560px) {
    .ui-modal-sheet .modal-dialog { margin: 0; max-width: none; min-height: 100%; display: flex; align-items: flex-end; }
    .ui-modal-sheet .ui-mbox { border-radius: var(--ui-r-2xl) var(--ui-r-2xl) 0 0; border-bottom: 0; max-height: 92vh; max-height: 92dvh; padding-bottom: env(safe-area-inset-bottom, 0px); }
    .ui-modal-sheet .ui-mbox > form { display: flex; flex-direction: column; min-height: 0; }
    .ui-modal-sheet .ui-mbody { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
    .ui-modal-sheet .ui-mfoot > .ui-btn { flex: 1 1 0; }
    .ui-modal-sheet.fade .modal-dialog { transform: translateY(100%); transition: transform calc(var(--ui-dur-4) * .75) var(--ui-ease-in); }
    .ui-modal-sheet.show .modal-dialog { transform: none; transition-duration: var(--ui-dur-4); transition-timing-function: var(--ui-ease-out); }
}

/* Painel lateral modal (.ui-modal-drawer): consulta/edição longa com o resto
   da tela escurecido. Flutua a 8px da borda no desktop; tela cheia no celular.
   Cabeçalho e rodapé fixos, corpo rola. */
.ui-modal-drawer .modal-dialog { margin: 8px 8px 8px auto; width: calc(100% - 16px); max-width: 440px; height: calc(100% - 16px); min-height: 0; }
.ui-modal-drawer.ui-modal-md .modal-dialog { max-width: 560px; }
.ui-modal-drawer .ui-mbox { height: 100%; }
.ui-modal-drawer .ui-mbox > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ui-modal-drawer .ui-mhead { padding-bottom: 16px; border-bottom: 1px solid var(--ui-line-2); }
.ui-modal-drawer .ui-mbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: 20px; padding-bottom: 20px; }
.ui-modal-drawer .ui-mfoot { padding-top: 16px; border-top: 1px solid var(--ui-line-2); }
.ui-modal-drawer.fade .modal-dialog { transform: translateX(calc(100% + 16px)); transition: transform calc(var(--ui-dur-4) * .75) var(--ui-ease-in); }
.ui-modal-drawer.show .modal-dialog { transform: none; transition-duration: var(--ui-dur-4); transition-timing-function: var(--ui-ease-out); }
@media (max-width: 560px) {
    .ui-modal-drawer .modal-dialog { margin: 0 0 0 auto; width: 100%; max-width: none; height: 100%; }
    .ui-modal-drawer .ui-mbox { border-radius: 0; border-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ui-modal.fade .modal-dialog, .ui-modal-sheet.fade .modal-dialog, .ui-modal-drawer.fade .modal-dialog { transform: none; }
}

/* ── Menu / dropdown (ui-menu) ─────────────────────────────────────────────
   Próprio, sem Bootstrap (o style.css força .dropdown-menu com !important).
   .ui-dropdown > [data-ui-menu] (gatilho) + .ui-menu. O ui-kit.js abre/fecha,
   fecha no clique fora e no Esc, navega com as setas e marca aria-expanded.
   Item: ícone 16 + rótulo (+ .ui-menu-hint à direita). Grupos com
   .ui-menu-divider / .ui-menu-label; destrutivo por último (.danger).
   Posição: padrão abre para baixo alinhado à direita; .is-start (esquerda),
   .is-up (para cima). Até 8 itens. */
.ui-dropdown { position: relative; display: inline-block; }
.ui-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--ui-z-dropdown);
    min-width: 200px; max-width: min(320px, calc(100vw - 24px));
    padding: 6px; display: none;
    background: var(--ui-bg-raised); border: 1px solid var(--ui-line); border-radius: var(--ui-r-lg);
    transform-origin: top right;
}
.ui-dropdown.open .ui-menu { display: block; animation: uiMenuIn var(--ui-dur-2) var(--ui-ease-out); }
.ui-menu.is-start { right: auto; left: 0; transform-origin: top left; }
.ui-menu.is-up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom right; }
.ui-menu.is-up.is-start { transform-origin: bottom left; }
@keyframes uiMenuIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
/* Menu aberto como camada flutuante (o ui-kit.js põe .is-float e calcula a posição pelo
   gatilho): fixed, por cima de tudo, nunca cortado por overflow; .is-flip abre para cima;
   .is-scroll rola quando nem em cima nem embaixo cabe tudo. */
.ui-menu.is-float { position: fixed; right: auto; bottom: auto; z-index: var(--ui-z-popover); }
.ui-menu.is-float.is-flip { transform-origin: bottom right; }
.ui-menu.is-float.is-start.is-flip { transform-origin: bottom left; }
.ui-menu.is-float.is-scroll { overflow-y: auto; overscroll-behavior: contain; }
.ui-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; text-align: left;
    background: none; border: 0; cursor: pointer; padding: 8px 10px; border-radius: var(--ui-r-sm);
    font: inherit; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); line-height: 20px; color: var(--ui-ink); text-decoration: none;
    transition: background-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease); white-space: nowrap;
}
.ui-menu-item svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); flex: 0 0 auto; color: var(--ui-muted); transition: color var(--ui-dur-1) var(--ui-ease); }
.ui-menu-item:hover, .ui-menu-item:focus-visible { background: var(--ui-fill-2); color: var(--ui-ink); outline: none; }
.ui-menu-item:hover svg, .ui-menu-item:focus-visible svg { color: var(--ui-ink-2); }
.ui-menu-item.danger { color: var(--ui-danger); }
.ui-menu-item.danger svg { color: var(--ui-danger); }
.ui-menu-item.danger:hover, .ui-menu-item.danger:focus-visible { background: rgba(var(--ui-danger-rgb), .10); color: var(--ui-danger); }
.ui-menu-item.danger:hover svg, .ui-menu-item.danger:focus-visible svg { color: var(--ui-danger); }
.ui-menu-item.is-disabled { opacity: .5; pointer-events: none; }
.ui-menu-item[aria-checked="true"]::after { content: ""; width: 16px; height: 16px; margin-left: auto; flex: 0 0 auto; background: var(--ui-accent-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.ui-menu-hint { margin-left: auto; padding-left: 12px; font-size: var(--ui-fs-help); font-weight: var(--ui-fw-regular); color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-menu-label { padding: 8px 10px 4px; font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); }
.ui-menu-divider { height: 1px; background: var(--ui-line-2); margin: 6px 4px; }
@media (max-width: 640px) { .ui-menu-item { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .ui-dropdown.open .ui-menu { animation: none; } }

/* ── Select customizado (ui-cselect) — window.uiSelect no ui-kit.js ─────────
   O <select> nativo fica no DOM (fonte da verdade, escondido); o botão e a
   lista são a interface. Opção com data-ui-font desenha o rótulo na própria
   fonte via --ui-cs-font (setada pelo JS a partir do catálogo). Sem sombra:
   a lista se separa pela borda. A lista é position: fixed (o JS ancora no
   botão), então nenhum pai com overflow a corta. Variante compacta: .ui-cselect-sm. */
.ui-cselect { position: relative; width: 100%; min-width: 0; }
.ui-cselect-native {
    position: absolute; width: 1px; height: 1px; max-width: 1px; max-height: 1px; margin: 0; padding: 0; border: 0;
    opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%);
}
.ui-cselect-btn {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px;
    padding: 7px 11px; margin: 0; font: inherit; font-size: .88rem; line-height: 1.35; text-align: left;
    color: var(--ui-ink); background: var(--ui-field-bg); border: 1px solid var(--ui-ctl-line);
    border-radius: var(--ui-r-md); cursor: pointer;
    outline: 3px solid transparent; outline-offset: 0;
    transition: border-color var(--ui-dur-1) var(--ui-ease), background-color var(--ui-dur-1) var(--ui-ease), outline-color var(--ui-dur-1) var(--ui-ease);
}
.ui-cselect-btn:hover { border-color: var(--ui-ctl-line-hover); }
.ui-cselect-btn:focus-visible, .ui-cselect.is-open .ui-cselect-btn { border-color: var(--ui-accent); outline-color: rgba(var(--ui-accent-rgb), .18); }
.ui-cselect-btn:disabled { opacity: .55; cursor: default; }
.ui-cselect-btn > svg { width: 16px; height: 16px; flex: 0 0 auto; margin-left: auto; color: var(--ui-muted); transition: transform .18s var(--ui-ease); }
.ui-cselect.is-open .ui-cselect-btn > svg { transform: rotate(180deg); color: var(--ui-accent); }
.ui-cselect-val { display: flex; align-items: baseline; gap: 7px; min-width: 0; overflow: hidden; }
.ui-cselect-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-cselect-hint { flex: 0 1 auto; min-width: 0; font-size: .74rem; font-weight: 500; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.has-font > .ui-cselect-lbl { font-family: var(--ui-cs-font), system-ui, sans-serif; font-size: 1.06em; }
.ui-cselect-list {
    position: fixed; left: 0; top: 0; z-index: 1090;
    width: max-content; max-width: min(340px, calc(100vw - 24px)); max-height: 300px;
    margin: 0; padding: 5px; list-style: none; overflow-y: auto; overscroll-behavior: contain;
    background: var(--ui-bg-raised); border: 1px solid var(--ui-line); border-radius: var(--ui-r-lg);
    animation: ui-cs-in var(--ui-dur-2) var(--ui-ease-out);
}
.ui-cselect-list[hidden] { display: none; }
.ui-cselect.is-up .ui-cselect-list { animation-name: ui-cs-up; }
@keyframes ui-cs-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@keyframes ui-cs-up { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.ui-cselect-opt {
    display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; margin: 0; border-radius: 7px;
    font-size: .88rem; line-height: 1.3; color: var(--ui-ink-2); cursor: pointer; user-select: none;
}
.ui-cselect-opt.is-active { background: var(--ui-hover); color: var(--ui-ink); }
.ui-cselect-opt[aria-selected="true"] { color: var(--ui-accent); }
.ui-cselect-opt[aria-disabled="true"] { opacity: .5; cursor: default; }
.ui-cselect-opt > svg { width: 15px; height: 15px; flex: 0 0 auto; margin-left: auto; align-self: center; visibility: hidden; }
.ui-cselect-opt[aria-selected="true"] > svg { visibility: visible; }
.ui-cselect-opt.has-font > .ui-cselect-lbl { font-size: 1.12em; }
.ui-cselect-sm .ui-cselect-btn { min-height: 28px; padding: 3px 8px; font-size: .8rem; gap: 6px; border-radius: 7px; }
.ui-cselect-sm .ui-cselect-btn > svg { width: 14px; height: 14px; }
.ui-cselect-sm .ui-cselect-btn .ui-cselect-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .ui-cselect-list { animation: none; } .ui-cselect-btn > svg { transition: none; } }

/* ── Toast translúcido (window.uiToast) — estilo "Translucent" do template ────
   Vidro fosco: fundo semi-transparente + backdrop-filter (deixa o conteúdo de
   baixo transparecer). Sem sombra (borda 1px define a borda). */
.ui-toast-wrap { position: fixed; right: 20px; bottom: 20px; z-index: var(--ui-z-toast); display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
/* Com modal/gaveta aberto: topo à direita (não cobre o rodapé do modal). */
.ui-toast-wrap.is-top { top: 20px; bottom: auto; }
.ui-toast {
    min-width: 300px; max-width: 400px; overflow: hidden;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-toast-bg);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--ui-toast-border);
    pointer-events: auto; transform: translateY(12px); opacity: 0;
    transition: transform calc(var(--ui-dur-2) * .75) var(--ui-ease-in), opacity calc(var(--ui-dur-2) * .75) var(--ui-ease-in);
}
.ui-toast.show { transform: translateY(0); opacity: 1; transition-duration: var(--ui-dur-2); transition-timing-function: var(--ui-ease-out); }
.ui-toast-foot { display: flex; justify-content: flex-end; padding: 0 12px 12px; margin-top: -2px; }
.ui-toast-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--ui-toast-border); }
.ui-toast-ic { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: 0 0 auto; }
.ui-toast-ic svg { width: 15px; height: 15px; }
.ui-toast-title { font-size: .82rem; font-weight: 600; color: var(--ui-ink); margin-right: auto; }
.ui-toast-time { font-size: .72rem; color: var(--ui-muted-2); }
.ui-toast-close { width: 22px; height: 22px; border: 0; background: none; cursor: pointer; color: var(--ui-muted-2); border-radius: 5px; display: grid; place-items: center; font-size: 1.15rem; line-height: 1; transition: .15s var(--ui-ease); }
.ui-toast-close:hover { background: var(--ui-line-2); color: var(--ui-ink); }
.ui-toast-body { padding: 11px 13px; font-size: .85rem; color: var(--ui-ink-2); line-height: 1.45; }
.ui-toast.ok .ui-toast-ic { color: var(--ui-ok); background: rgba(var(--ui-ok-rgb), .14); }
.ui-toast.warn .ui-toast-ic { color: var(--ui-warn); background: rgba(var(--ui-warn-rgb), .14); }
.ui-toast.danger .ui-toast-ic { color: var(--ui-danger); background: rgba(var(--ui-danger-rgb), .14); }
.ui-toast.info .ui-toast-ic { color: var(--ui-accent); background: var(--ui-hover); }

@media (max-width: 560px) {
    .ui-toast-wrap { left: 12px; right: 12px; bottom: 12px; }
    .ui-toast-wrap.is-top { top: 12px; bottom: auto; }
    .ui-toast { max-width: none; min-width: 0; }
}

/* ── Parede de recurso (client/layout/feature-wall) ─────────────────────────
   Hero de upsell genérico: mesmo visual do card de upgrade da marca d'água do
   scrapper (âmbar + CTA translúcido), em classes ui-* pra qualquer página. */
.ui-wall {
    display: flex; align-items: center; gap: 18px;
    padding: 22px 26px; margin-bottom: 22px;
    border-radius: var(--ui-radius); color: #fff;
    background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
}
.ui-wall-icon {
    width: 60px; height: 60px; flex: 0 0 auto; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .18);
}
.ui-wall-icon svg { width: 28px; height: 28px; }
.ui-wall-body { flex: 1 1 auto; min-width: 0; }
.ui-wall-title { margin: 0 0 4px; font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.ui-wall-text { margin: 0; font-size: .9rem; opacity: .92; line-height: 1.45; max-width: 640px; }
.ui-wall-plan { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: .82rem; font-weight: 600; opacity: .95; }
.ui-wall-plan svg { width: 15px; height: 15px; flex: 0 0 auto; }
.ui-wall-cta {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 20px; border: 1px solid rgba(255, 255, 255, .38); border-radius: var(--ui-radius-sm);
    background: rgba(255, 255, 255, .16); color: #fff; font-size: .86rem; font-weight: 600;
    text-decoration: none; white-space: nowrap; transition: .15s var(--ui-ease);
}
.ui-wall-cta:hover { background: #fff; color: #B45309; }
.ui-wall-cta svg { width: 15px; height: 15px; }
@media (max-width: 760px) { .ui-wall { flex-wrap: wrap; } .ui-wall-cta { width: 100%; justify-content: center; } }

/* ── Convite da comunidade (partial client.layout.community-popup) ────────────
   Card no canto inferior direito, mesmo formato do banner de cookies do site.
   z 35: acima do conteúdo e do cabeçalho (30), abaixo do menu lateral do
   celular (backdrop 39 / menu 40), dos modais do Bootstrap (1050+) e dos
   toasts (12000). Um convite nunca cobre um modal ou um aviso em andamento. */
.ui-community-pop { position: fixed; right: 22px; bottom: 22px; z-index: 35; max-width: calc(100vw - 44px); animation: uiCommunityUp .45s cubic-bezier(.16, 1, .3, 1); }
@keyframes uiCommunityUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.ui-community-pop-inner { width: 352px; max-width: 100%; padding: 20px; background: var(--ui-card-bg); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); }
.ui-community-pop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ui-community-pop-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--ui-radius-sm); background: rgba(var(--ui-accent-rgb), .12); color: var(--ui-accent); }
.ui-community-pop-ic svg { width: 17px; height: 17px; }
.ui-community-pop-title { font-size: .92rem; font-weight: 600; color: var(--ui-ink); }
.ui-community-pop-text { margin: 0 0 16px; font-size: .845rem; line-height: 1.6; color: var(--ui-ink-2); }
.ui-community-pop-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ui-community-pop-dismiss,
.ui-community-pop-join { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 16px; border-radius: var(--ui-radius-sm); font-size: .845rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .16s var(--ui-ease), border-color .16s var(--ui-ease), color .16s var(--ui-ease), filter .16s var(--ui-ease); }
.ui-community-pop-dismiss { font-weight: 500; background: transparent; color: var(--ui-ink-2); border: 1px solid var(--ui-line); }
.ui-community-pop-dismiss:hover { background: var(--ui-line-2); color: var(--ui-ink); border-color: var(--ui-field-line); }
.ui-community-pop-join { font-weight: 600; background: var(--ui-accent); color: var(--ui-on-primary, #fff); border: 1px solid var(--ui-accent); }
.ui-community-pop-join:hover, .ui-community-pop-join:focus-visible { filter: brightness(.94); color: var(--ui-on-primary, #fff); }
@media (max-width: 640px) { .ui-community-pop { right: 14px; left: 14px; bottom: 14px; max-width: none; } .ui-community-pop-inner { width: auto; padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .ui-community-pop { animation: none; } }

/* ════════════════════════════════════════════════════════════════════════════
   DS-1 (01/10/2026): componentes da fundação. API em docs/DESIGN-SYSTEM.md.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Cabeçalho de página (UX-CALMA regra 2) ──────────────────────────────── */
.ui-page-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--ui-space-4) var(--ui-space-6); margin-bottom: var(--ui-space-6); }
.ui-page-head-txt { min-width: 0; }
.ui-page-title { margin: 0; font-size: var(--ui-fs-page); font-weight: var(--ui-fw-semibold); line-height: 1.15; letter-spacing: var(--ui-ls-page); color: var(--ui-ink); }
.ui-page-meta { margin: 6px 0 0; font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); color: var(--ui-muted); }
.ui-page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-space-2); }
/* O "..." do cabeçalho é sempre o último (ordem [secundária][primária][...]). */
.ui-page-actions > .ui-dropdown:has(> .ui-btn-icon[data-ui-menu]) { order: 1; }
/* Marca ao lado do título (DS-2): só na página-casa do canal (Dispositivos) e na de API.
   <div class="ui-page-title-row"><span class="ui-page-mark is-whatsapp" aria-hidden="true">ícone</span><h1 class="ui-page-title">...</h1></div> */
.ui-page-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-space-2) var(--ui-space-3); min-width: 0; }
.ui-page-mark { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--ui-r-lg); color: var(--ui-accent-ink); background: rgba(var(--ui-accent-rgb), .11); }
.ui-page-mark svg { width: var(--ui-ic-lg); height: var(--ui-ic-lg); }
.ui-page-mark.is-whatsapp { color: var(--ui-wa-ink); background: rgba(var(--ui-wa-rgb), .14); }
.ui-page-mark.is-telegram { color: var(--ui-tg-ink); background: rgba(var(--ui-tg-rgb), .12); }
.ui-overline { font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); }
@media (max-width: 560px) {
    .ui-page-title { font-size: var(--ui-fs-h2); }
    .ui-page-actions { width: 100%; }
    .ui-page-actions .ui-btn-primary { flex: 1 1 auto; }
}

/* ── Tile de ícone (ui-tile) ─────────────────────────────────────────────────
   O quadradinho com ícone dos menus, listas e cartões. Tom SUAVE da paleta
   (fundo 11% + ícone na cor), nunca saturado. Cor só quando é tipo/estado. */
.ui-tile { --ui-tile-size: 36px; display: inline-grid; place-items: center; flex: 0 0 auto; width: var(--ui-tile-size); height: var(--ui-tile-size); border-radius: var(--ui-r-md); background: var(--ui-fill-2); color: var(--ui-ink-2); }
.ui-tile svg { width: var(--ui-ic-md); height: var(--ui-ic-md); }
.ui-tile-sm { --ui-tile-size: 28px; border-radius: var(--ui-r-sm); }
.ui-tile-sm svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.ui-tile-lg { --ui-tile-size: 44px; border-radius: var(--ui-r-lg); }
.ui-tile-lg svg { width: var(--ui-ic-lg); height: var(--ui-ic-lg); }
.ui-tile.is-round { border-radius: 50%; }
.ui-tile.is-accent { background: rgba(var(--ui-accent-rgb), .11); color: var(--ui-accent-ink); }
.ui-tile.is-ok { background: rgba(var(--ui-ok-rgb), .12); color: var(--ui-ok-ink); }
.ui-tile.is-warn { background: rgba(var(--ui-warn-rgb), .13); color: var(--ui-warn-ink); }
.ui-tile.is-danger { background: rgba(var(--ui-danger-rgb), .11); color: var(--ui-danger-ink); }
.ui-tile.is-info { background: rgba(var(--ui-info-rgb), .12); color: var(--ui-info-ink); }

/* ── Avatar (ui-avatar) ──────────────────────────────────────────────────────
   Foto ou iniciais (no máx. 2 letras, escapadas). Neutro por padrão; a cor da
   pessoa (se houver) entra por --ui-av-bg. Ponto de status em .ui-avatar-dot
   (aro na cor do fundo, sem sombra). */
.ui-avatar { --ui-av-size: 40px; position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: var(--ui-av-size); height: var(--ui-av-size); border-radius: 50%; background: var(--ui-av-bg, var(--ui-fill-3)); color: var(--ui-av-fg, var(--ui-ink-2)); font-size: calc(var(--ui-av-size) * .38); font-weight: var(--ui-fw-semibold); line-height: 1; letter-spacing: .01em; text-transform: uppercase; user-select: none; }
.ui-avatar > img { width: var(--ui-av-size); height: var(--ui-av-size); border-radius: 50%; object-fit: cover; display: block; }
.ui-avatar-xs { --ui-av-size: 24px; }
.ui-avatar-sm { --ui-av-size: 32px; }
.ui-avatar-lg { --ui-av-size: 48px; }
.ui-avatar-xl { --ui-av-size: 64px; }
.ui-avatar.is-accent { --ui-av-bg: rgba(var(--ui-accent-rgb), .13); --ui-av-fg: var(--ui-accent-ink); }
/* Tom pelo nome (iniciais sem foto): .is-tone-0 a .is-tone-11, índice de
   uiAvatar.tone(nome). Fundo suave e inicial no mesmo tom (AA); os 12 tons são
   os da lista de conversas (--ui-av-0..11 na paleta calm). Com foto, o tom só aparece se ela falhar. */
.ui-avatar[class*="is-tone-"] { --ui-av-bg: color-mix(in srgb, var(--ui-av-hue) 15%, var(--ui-bg-card)); --ui-av-fg: color-mix(in srgb, var(--ui-av-hue) 50%, var(--ui-ink)); }
/* Paleta calm: os tons são dessaturados; com 15% o fundo virava bege igual para todos.
   Mais tom no fundo e na inicial (AA conferido nos 4 temas, F-DES 06/10/2026). */
:root[data-palette="calm"] .ui-avatar[class*="is-tone-"] { --ui-av-bg: color-mix(in srgb, var(--ui-av-hue) 24%, var(--ui-bg-card)); --ui-av-fg: color-mix(in srgb, var(--ui-av-hue) 78%, var(--ui-ink)); }
:root[data-theme="dark"] .ui-avatar[class*="is-tone-"] { --ui-av-bg: color-mix(in srgb, var(--ui-av-hue) 24%, var(--ui-bg-card)); --ui-av-fg: color-mix(in srgb, var(--ui-av-hue) 60%, var(--ui-ink)); }
:root[data-palette="calm"][data-theme="dark"] .ui-avatar[class*="is-tone-"] { --ui-av-bg: color-mix(in srgb, var(--ui-av-hue) 34%, var(--ui-bg-card)); --ui-av-fg: color-mix(in srgb, var(--ui-av-hue) 45%, var(--ui-ink)); }
.ui-avatar.is-tone-0 { --ui-av-hue: var(--ui-av-0, #5DA399); }
.ui-avatar.is-tone-1 { --ui-av-hue: var(--ui-av-1, var(--ui-accent)); }
.ui-avatar.is-tone-2 { --ui-av-hue: var(--ui-av-2, #3b82f6); }
.ui-avatar.is-tone-3 { --ui-av-hue: var(--ui-av-3, #ef4444); }
.ui-avatar.is-tone-4 { --ui-av-hue: var(--ui-av-4, #8b5cf6); }
.ui-avatar.is-tone-5 { --ui-av-hue: var(--ui-av-5, #ec4899); }
.ui-avatar.is-tone-6 { --ui-av-hue: var(--ui-av-6, #14b8a6); }
.ui-avatar.is-tone-7 { --ui-av-hue: var(--ui-av-7, #f59e0b); }
.ui-avatar.is-tone-8 { --ui-av-hue: var(--ui-av-8, #6366f1); }
.ui-avatar.is-tone-9 { --ui-av-hue: var(--ui-av-9, #10b981); }
.ui-avatar.is-tone-10 { --ui-av-hue: var(--ui-av-10, #e11d48); }
.ui-avatar.is-tone-11 { --ui-av-hue: var(--ui-av-11, #0ea5e9); }
.ui-avatar[class*="is-tone-"] > img { background: var(--ui-bg-card); }
.ui-avatar-dot { position: absolute; right: -1px; bottom: -1px; width: max(10px, calc(var(--ui-av-size) * .28)); height: max(10px, calc(var(--ui-av-size) * .28)); border-radius: 50%; border: 2px solid var(--ui-av-ring, var(--ui-bg-card)); background: var(--ui-ok); }
.ui-avatar-dot.is-off { background: var(--ui-muted-2); }
.ui-avatar-dot.is-warn { background: var(--ui-warn); }
.ui-avatar-dot.is-danger { background: var(--ui-danger); }
.ui-avatars { display: inline-flex; align-items: center; }
.ui-avatars > .ui-avatar { border: 2px solid var(--ui-av-ring, var(--ui-bg-card)); box-sizing: content-box; }
.ui-avatars > .ui-avatar + .ui-avatar { margin-left: -8px; }

/* ── Lista (ui-list) ─────────────────────────────────────────────────────────
   Linha com tile/avatar, título, sub e meta à direita. 56px com 2 linhas.
   Clicável quando for <a>/<button> ou .is-clickable; .is-selected = acento 9%. */
.ui-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-list-item { display: flex; align-items: center; gap: var(--ui-space-3); width: 100%; min-height: 56px; padding: 8px 12px; border: 0; border-radius: var(--ui-r-lg); background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: none; transition: background-color var(--ui-dur-1) var(--ui-ease); }
a.ui-list-item, button.ui-list-item, .ui-list-item.is-clickable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a.ui-list-item:hover, button.ui-list-item:hover, .ui-list-item.is-clickable:hover { background: var(--ui-fill-1); color: inherit; }
a.ui-list-item:focus-visible, button.ui-list-item:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
.ui-list-item.is-selected, .ui-list-item[aria-current="true"] { background: rgba(var(--ui-accent-rgb), .09); }
.ui-list-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-list-title { font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); line-height: 20px; color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-list-sub { font-size: var(--ui-fs-label); line-height: 18px; color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-list-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: var(--ui-fs-help); color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-list-chev { flex: 0 0 auto; width: var(--ui-ic-sm); height: var(--ui-ic-sm); color: var(--ui-muted-2); }
.ui-list.is-divided { gap: 0; }
.ui-list.is-divided > .ui-list-item + .ui-list-item, .ui-list.is-divided > li + li > .ui-list-item { border-top: 1px solid var(--ui-line-2); border-radius: 0; }
.ui-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--ui-r-pill); font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); line-height: 1; font-variant-numeric: tabular-nums; color: var(--ui-on-primary, #fff); background: var(--ui-accent); }
.ui-count.is-neutral { color: var(--ui-ink-2); background: var(--ui-fill-3); }
.ui-dot-new { display: inline-block; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--ui-accent); }

/* ── Dica (tooltip) ──────────────────────────────────────────────────────────
   data-ui-tip="Texto" (texto puro, via attr(): nunca HTML). Aparece no hover
   depois de 300 ms e na hora no foco do teclado. data-ui-tip-pos="bottom|left|
   right" (padrão: em cima). Botão desabilitado não recebe hover: o motivo da
   recusa vai em texto visível ao lado (regra da casa), não só na dica. */
:where([data-ui-tip]) { position: relative; }
[data-ui-tip]::before {
    content: attr(data-ui-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: var(--ui-z-tooltip);
    width: max-content; max-width: 240px; padding: 6px 10px; border-radius: var(--ui-r-sm);
    background: var(--ui-ink); color: var(--ui-card-bg); font-size: var(--ui-fs-help); font-weight: var(--ui-fw-medium); line-height: 1.4;
    text-align: center; white-space: normal; text-transform: none; letter-spacing: 0; pointer-events: none;
    opacity: 0; transform: translate(-50%, 4px);
    transition: opacity calc(var(--ui-dur-2) * .75) var(--ui-ease-in), transform calc(var(--ui-dur-2) * .75) var(--ui-ease-in);
}
[data-ui-tip]:hover::before { opacity: 1; transform: translate(-50%, 0); transition: opacity var(--ui-dur-2) var(--ui-ease-out) 300ms, transform var(--ui-dur-2) var(--ui-ease-out) 300ms; }
[data-ui-tip]:focus-visible::before { opacity: 1; transform: translate(-50%, 0); transition-duration: var(--ui-dur-2); transition-delay: 0s; }
[data-ui-tip-pos="bottom"]::before { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -4px); }
[data-ui-tip-pos="left"]::before { left: auto; right: calc(100% + 8px); bottom: auto; top: 50%; transform: translate(4px, -50%); }
[data-ui-tip-pos="right"]::before { left: calc(100% + 8px); bottom: auto; top: 50%; transform: translate(-4px, -50%); }
[data-ui-tip-pos="bottom"]:hover::before, [data-ui-tip-pos="bottom"]:focus-visible::before { transform: translate(-50%, 0); }
[data-ui-tip-pos="left"]:hover::before, [data-ui-tip-pos="left"]:focus-visible::before,
[data-ui-tip-pos="right"]:hover::before, [data-ui-tip-pos="right"]:focus-visible::before { transform: translate(0, -50%); }
[data-ui-tip=""]::before { display: none; }
/* Botão com o menu/painel dele já aberto: a dica não aparece por cima (CRIT-1). */
[data-ui-tip][aria-expanded="true"]::before { display: none; }
@media (hover: none) { [data-ui-tip]::before { display: none; } }
/* Com o ui-kit.js (telas com mouse) a dica sai numa caixa só no <body>, fixed e por
   cima de tudo: o ::before fica só como reserva sem JS. */
.ui-tip-js [data-ui-tip]::before { display: none; }
.ui-tipbox { position: fixed; left: 0; top: 0; z-index: var(--ui-z-tooltip); width: max-content; max-width: 240px; padding: 6px 10px; border-radius: var(--ui-r-sm);
    background: var(--ui-ink); color: var(--ui-card-bg); font-size: var(--ui-fs-help); font-weight: var(--ui-fw-medium); line-height: 1.4; text-align: center;
    white-space: normal; overflow-wrap: anywhere; pointer-events: none; opacity: 0; transition: opacity var(--ui-dur-2) var(--ui-ease-out); }
.ui-tipbox[hidden] { display: none; }
.ui-tipbox.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ui-tipbox { transition: none; } }

/* ── Esqueleto (ui-skel) ─────────────────────────────────────────────────────
   Formato do conteúdo real (linhas, bolhas, avatar). Envolva em .ui-skel-group:
   ele só aparece depois de 300 ms (resposta rápida nunca pisca esqueleto). */
.ui-skel { position: relative; display: block; overflow: hidden; border-radius: var(--ui-r-sm); background: var(--ui-fill-2); }
.ui-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--ui-shine), transparent); animation: uiShimmer 1.6s ease-in-out infinite; }
@keyframes uiShimmer { to { transform: translateX(100%); } }
.ui-skel-line { height: 12px; margin-bottom: 8px; }
.ui-skel-line.is-short { width: 60%; }
.ui-skel-line.is-tiny { width: 32%; }
.ui-skel-title { height: 20px; width: 45%; margin-bottom: 12px; }
.ui-skel-circle { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; }
.ui-skel-block { height: 64px; border-radius: var(--ui-r-lg); }
.ui-skel-bubble { height: 40px; width: 55%; border-radius: 16px; }
.ui-skel-row { display: flex; align-items: center; gap: var(--ui-space-3); padding: 8px 12px; }
.ui-skel-row > .ui-skel-stack { flex: 1 1 auto; min-width: 0; }
.ui-skel-row .ui-skel-line { margin-bottom: 6px; }
.ui-skel-row .ui-skel-line:last-child { margin-bottom: 0; }
.ui-skel-group { animation: uiFadeIn var(--ui-dur-2) var(--ui-ease-out) 300ms both; }
@keyframes uiFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ui-skel::after { animation: none; opacity: 0; } }

/* ── Painéis flutuantes sem bloqueio: popover e gaveta ───────────────────────
   Mesma anatomia do modal (.ui-mhead/.ui-mtitle/.ui-mclose, .ui-mbody,
   .ui-mfoot). Começam com [hidden]; o window.uiPanel abre, fecha (Esc, clique
   fora no popover, [data-ui-panel-close]) e devolve o foco. Gatilho
   declarativo: [data-ui-panel="id"]. Gaveta com fundo escurecido = use o
   .ui-modal-drawer (Bootstrap). */
.ui-popover {
    position: fixed; z-index: var(--ui-z-popover);
    width: min(320px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
    display: flex; flex-direction: column;
    background: var(--ui-bg-raised); border: 1px solid var(--ui-line); border-radius: var(--ui-r-xl); color: var(--ui-ink);
    opacity: 0; transform: translateY(4px) scale(.98); transform-origin: var(--ui-pop-origin, bottom center); pointer-events: none;
    transition: opacity calc(var(--ui-dur-2) * .75) var(--ui-ease-in), transform calc(var(--ui-dur-2) * .75) var(--ui-ease-in);
}
.ui-popover[hidden], .ui-drawer[hidden] { display: none; }
.ui-popover.is-open { opacity: 1; transform: none; pointer-events: auto; transition-duration: var(--ui-dur-2); transition-timing-function: var(--ui-ease-out); }
.ui-popover-lg { width: min(400px, calc(100vw - 24px)); }
.ui-popover > .ui-mhead { padding: 14px 16px 0; }
.ui-popover .ui-mtitle { font-size: var(--ui-fs-body-lg); }
.ui-popover > .ui-mhead > .ui-mtitle { padding-top: 5px; }
.ui-popover .ui-mclose { margin-right: -6px; }
.ui-popover > .ui-mbody { padding: 12px 16px; overflow-y: auto; min-height: 0; }
.ui-popover > .ui-mfoot { padding: 4px 16px 16px; }
.ui-popover .ui-field { margin-bottom: var(--ui-space-3); }

.ui-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--ui-z-drawer);
    width: min(400px, 100vw); display: flex; flex-direction: column;
    background: var(--ui-bg-card); border-left: 1px solid var(--ui-line); color: var(--ui-ink);
    transform: translateX(100%);
    transition: transform calc(var(--ui-dur-4) * .75) var(--ui-ease-in);
}
.ui-drawer.is-open { transform: none; transition-duration: var(--ui-dur-4); transition-timing-function: var(--ui-ease-out); }
.ui-drawer-left { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--ui-line); transform: translateX(-100%); }
.ui-drawer > .ui-mhead { padding: 16px 20px; border-bottom: 1px solid var(--ui-line-2); align-items: center; }
.ui-drawer > .ui-mhead > .ui-mtitle { padding-top: 0; }
.ui-drawer > .ui-mbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px; }
.ui-drawer > .ui-mfoot { padding: 14px 20px; border-top: 1px solid var(--ui-line-2); }
@media (prefers-reduced-motion: reduce) { .ui-popover, .ui-drawer { transform: none; } }

/* ── Mídia na conversa ───────────────────────────────────────────────────────
   Funciona em qualquer bolha: cores derivam de currentColor (a cor do texto da
   bolha), então a mesma peça serve na recebida (clara) e na enviada (marca).
   Raio 12, largura máx. 320 (UX-CALMA, conversa item 8). */
:root { --ui-media-radius: 12px; --ui-media-w: 300px; --ui-audio-w: 260px; }

/* Player de áudio: <div class="ui-audio"> play 36 + trilha + tempo + velocidade.
   O JS da tela só atualiza --ui-audio-p (0 a 1) e as classes is-playing /
   is-loading / is-error. Progresso por transform (sem reflow). */
.ui-audio { --ui-audio-p: 0; display: flex; align-items: flex-start; gap: 10px; width: var(--ui-audio-w, 260px); max-width: 100%; min-width: 0; padding: 2px 0; color: inherit; }
.ui-audio-play { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--ui-audio-btn-bg, var(--ui-accent)); color: var(--ui-audio-btn-fg, var(--ui-on-primary, #fff)); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--ui-dur-1) var(--ui-ease), background-color var(--ui-dur-1) var(--ui-ease); }
.ui-audio-play:active { transform: scale(.94); }
.ui-audio-play:focus:not(:focus-visible) { outline: none; }
.ui-audio-play:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-audio-play svg { grid-area: 1 / 1; width: 16px; height: 16px; }
.ui-audio-play .ui-audio-i-play { transform: translateX(1px); }
.ui-audio-play .ui-audio-i-pause, .ui-audio.is-playing .ui-audio-i-play { display: none; }
.ui-audio.is-playing .ui-audio-i-pause { display: block; }
.ui-audio.is-loading .ui-audio-play svg { visibility: hidden; }
.ui-audio.is-loading .ui-audio-play::after { content: ""; grid-area: 1 / 1; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: uiSpin .7s linear infinite; }
.ui-audio-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 8px; }   /* trilha alinhada ao centro do play */
/* A trilha recorta (overflow) e o trilho fica 6px para dentro: a bolinha cabe
   inteira nas pontas e o deslocamento nunca cria rolagem lateral. */
.ui-audio-track { position: relative; height: 20px; overflow: hidden; cursor: pointer; touch-action: none; }
.ui-audio-track::before, .ui-audio-fill { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; }
.ui-audio-track::before { background: color-mix(in srgb, currentColor 18%, transparent); }
.ui-audio-fill { background: var(--ui-audio-accent, var(--ui-accent)); transform-origin: left center; transform: scaleX(var(--ui-audio-p)); }
.ui-audio-head { position: absolute; top: 0; bottom: 0; left: 6px; right: 6px; transform: translateX(calc(var(--ui-audio-p) * 100%)); pointer-events: none; }
.ui-audio-knob { position: absolute; top: 50%; left: -6px; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--ui-audio-accent, var(--ui-accent)); transform: scale(0); transition: transform var(--ui-dur-1) var(--ui-ease-out); }
.ui-audio:hover .ui-audio-knob, .ui-audio.is-playing .ui-audio-knob, .ui-audio-track:focus-visible .ui-audio-knob { transform: scale(1); }
.ui-audio-track:focus:not(:focus-visible) { outline: none; }
.ui-audio-track:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; border-radius: 4px; }
.ui-audio-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; font-size: var(--ui-fs-help); line-height: 1; color: color-mix(in srgb, currentColor 68%, transparent); font-variant-numeric: tabular-nums; }
.ui-audio-speed { height: 20px; min-width: 34px; padding: 0 7px; border: 0; border-radius: var(--ui-r-pill); background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; font: inherit; font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); cursor: pointer; transition: background-color var(--ui-dur-1) var(--ui-ease); }
.ui-audio-speed:hover { background: color-mix(in srgb, currentColor 18%, transparent); }
.ui-audio.is-error .ui-audio-play { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
/* Sobre bolha colorida (enviada): tudo na cor do texto da bolha */
.ui-audio.on-color { --ui-audio-btn-bg: color-mix(in srgb, currentColor 20%, transparent); --ui-audio-btn-fg: currentColor; --ui-audio-accent: currentColor; }

/* Moldura de mídia + botão "carregar": <div class="ui-media [has-thumb]">
   [img.ui-media-thumb] <button class="ui-media-btn">ícone Rótulo
   <span class="ui-media-size">1,2 MB</span></button></div>. Estados no
   botão: .is-loading (spinner), :disabled + .ui-media-note (motivo). */
.ui-media { position: relative; display: grid; place-items: center; width: var(--ui-media-w); max-width: 100%; aspect-ratio: var(--ui-media-ratio, 4 / 3); overflow: hidden; border-radius: var(--ui-media-radius); background: color-mix(in srgb, currentColor 7%, transparent); color: inherit; isolation: isolate; }
.ui-media.is-wide { --ui-media-ratio: 16 / 9; }
.ui-media.is-square { --ui-media-ratio: 1 / 1; }
.ui-media-thumb { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: blur(14px); transform: scale(1.12); opacity: .9; }
.ui-media-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--ui-line); border-radius: var(--ui-r-pill); background: var(--ui-bg-raised); color: var(--ui-ink); font: inherit; font-size: var(--ui-fs-label); font-weight: var(--ui-fw-semibold); line-height: 1; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--ui-dur-1) var(--ui-ease), border-color var(--ui-dur-1) var(--ui-ease), transform var(--ui-dur-1) var(--ui-ease); }
.ui-media-btn svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); flex: 0 0 auto; }
.ui-media-btn:hover { border-color: var(--ui-line-strong); background: color-mix(in srgb, var(--ui-bg-raised), var(--ui-ink) 4%); }
.ui-media-btn:active { transform: scale(.97); }
.ui-media-btn:focus:not(:focus-visible) { outline: none; }
.ui-media-btn:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-media-size { font-weight: var(--ui-fw-regular); color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-media-btn.is-loading { pointer-events: none; }
.ui-media-btn.is-loading > svg { display: none; }
.ui-media-btn.is-loading::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: uiSpin .7s linear infinite; }
.ui-media-btn:disabled { cursor: not-allowed; opacity: .7; }
.ui-media.has-thumb .ui-media-btn { background: rgba(17, 19, 24, .58); border-color: transparent; color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ui-media.has-thumb .ui-media-btn:hover { background: rgba(17, 19, 24, .7); }
.ui-media.has-thumb .ui-media-size { color: rgba(255, 255, 255, .78); }
.ui-media-play { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: rgba(17, 19, 24, .58); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform var(--ui-dur-1) var(--ui-ease), background-color var(--ui-dur-1) var(--ui-ease); }
.ui-media-play svg { width: 22px; height: 22px; transform: translateX(2px); }
.ui-media-play:hover { background: rgba(17, 19, 24, .72); }
.ui-media-play:active { transform: scale(.95); }
.ui-media-note { display: flex; align-items: flex-start; gap: 6px; max-width: var(--ui-media-w); margin-top: 6px; font-size: var(--ui-fs-help); line-height: 1.45; color: color-mix(in srgb, currentColor 72%, transparent); }
.ui-media-note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }
.ui-media-img { display: block; max-width: min(var(--ui-media-w), 100%); height: auto; border-radius: var(--ui-media-radius); cursor: zoom-in; }

/* Cartão de documento: <a class="ui-doc" href download> tile + nome (o meio
   encolhe: .ui-doc-stem com reticências + .ui-doc-ext fixo) + "PDF · 2,4 MB"
   + ícone de baixar. data-kind no .ui-doc-ico pinta o tipo. */
.ui-doc { display: flex; align-items: center; gap: var(--ui-space-3); width: var(--ui-media-w); max-width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, currentColor 12%, transparent); border-radius: var(--ui-media-radius); background: color-mix(in srgb, currentColor 5%, transparent); color: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--ui-dur-1) var(--ui-ease), border-color var(--ui-dur-1) var(--ui-ease); }
.ui-doc:hover { color: inherit; background: color-mix(in srgb, currentColor 9%, transparent); border-color: color-mix(in srgb, currentColor 18%, transparent); }
.ui-doc:focus:not(:focus-visible) { outline: none; }
.ui-doc:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-doc-ico { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--ui-r-md); background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; }
.ui-doc-ico svg { width: var(--ui-ic-md); height: var(--ui-ic-md); }
.ui-doc-ico[data-kind="pdf"] { background: rgba(var(--ui-danger-rgb), .13); color: var(--ui-danger-ink); }
.ui-doc-ico[data-kind="sheet"] { background: rgba(var(--ui-ok-rgb), .14); color: var(--ui-ok-ink); }
.ui-doc-ico[data-kind="doc"] { background: rgba(var(--ui-info-rgb), .14); color: var(--ui-info-ink); }
.ui-doc-ico[data-kind="zip"] { background: rgba(var(--ui-warn-rgb), .15); color: var(--ui-warn-ink); }
.ui-doc-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-doc-name { display: flex; min-width: 0; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); line-height: 20px; }
.ui-doc-stem { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-doc-ext { flex: 0 0 auto; white-space: nowrap; }
.ui-doc-meta { font-size: var(--ui-fs-help); line-height: 16px; color: color-mix(in srgb, currentColor 65%, transparent); font-variant-numeric: tabular-nums; }
.ui-doc-act { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; color: color-mix(in srgb, currentColor 70%, transparent); transition: background-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease); }
.ui-doc-act svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.ui-doc:hover .ui-doc-act { color: inherit; background: color-mix(in srgb, currentColor 10%, transparent); }
.ui-doc.on-color .ui-doc-ico[data-kind] { background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; }
@media (prefers-reduced-motion: reduce) { .ui-audio-fill, .ui-audio-head { transition: none; } }

/* ════════════════════════════════════════════════════════════════════════════
   DS-3 (01/10/2026): cartão de número, mini linha, medidor, gráfico, tabela,
   paginação, segmentado e alternador de visualização, cartões de objeto,
   "Precisa de você", assistente em passos, campo de link, copiar e os
   acabamentos (select, switch, filtro, escolha, passos ao vivo, barra de
   salvar, moldura de prévia). API e exemplos em docs/DESIGN-SYSTEM.md (v1.2);
   vitrine em tests/e2e/ds_kitchen.php. Regras de sempre: só tokens, sem
   sombra, sem faixa de accent, sem !important, movimento só em
   opacity/transform (cai com reduced-motion).
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    /* Ícones por máscara (a cor vem de currentColor). */
    --ui-ico-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E");
    --ui-ico-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
    --ui-ico-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
    --ui-ico-chev-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
    --ui-ico-chev-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
    --ui-ico-chev-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --ui-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --ui-ico-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
    --ui-ico-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");
    --ui-ico-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
    --ui-ico-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
    --ui-ico-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    --ui-ico-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    /* Medidas por componente */
    --ui-table-pad: var(--ui-space-5);     /* respiro das bordas da tabela (= padding do cartão) */
    --ui-cards-min: 340px;                 /* largura mínima de um cartão de objeto na grade */
    --ui-kpi-min: 180px;                   /* largura mínima de um cartão de número */
    --ui-chart-h: 240px;                   /* altura padrão da área do gráfico */
    --ui-wizard-aside-w: 320px;            /* palco da prévia ao vivo no assistente */
}

/* Só para leitor de tela (rótulo de coluna de ações, "Selecionar todos"...). */
.ui-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── Variação (ui-delta) ─────────────────────────────────────────────────────
   Pílula 22 px com seta + % e SEMPRE o comparativo ao lado ("vs. 7 dias
   antes"). .is-up = subiu (verde), .is-down = caiu (vermelho), .is-flat =
   igual (cinza, sem seta). Quando subir é ruim (tempo de resposta, saídas):
   .is-inverse troca os tons. .is-neutral = seta sem julgamento (cinza). */
.ui-delta { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; height: 22px; padding: 0 8px; border-radius: var(--ui-r-pill); font-size: var(--ui-fs-help); font-weight: var(--ui-fw-semibold); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ui-muted); background: var(--ui-fill-2); }
.ui-delta.is-up, .ui-delta.is-down { padding-left: 6px; }
.ui-delta.is-up::before, .ui-delta.is-down::before { content: ""; flex: 0 0 auto; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--ui-ico-arrow-up) center / 12px no-repeat; mask: var(--ui-ico-arrow-up) center / 12px no-repeat; }
.ui-delta.is-down::before { -webkit-mask-image: var(--ui-ico-arrow-down); mask-image: var(--ui-ico-arrow-down); }
.ui-delta.is-up, .ui-delta.is-inverse.is-down { color: var(--ui-ok-ink); background: rgba(var(--ui-ok-rgb), .12); }
.ui-delta.is-down, .ui-delta.is-inverse.is-up { color: var(--ui-danger-ink); background: rgba(var(--ui-danger-rgb), .11); }
.ui-delta.is-neutral { color: var(--ui-muted); background: var(--ui-fill-2); }
.ui-delta-vs { font-size: var(--ui-fs-help); color: var(--ui-muted); white-space: nowrap; }

/* ── Cartão de número (ui-kpi) e fileira (ui-kpis) ───────────────────────────
   Evolui o .ui-stat (o legado continua igual). Rótulo 13 (+ "?" opcional),
   número 28 tabular (24 no celular), rodapé com a variação e o comparativo
   ou até 2 fatos (" · "), mini linha opcional à direita do número. Fileira:
   2 a 4 por linha (nunca mais de 5), 2 no celular; .is-joined = uma faixa só
   com divisórias (herói do painel). button.ui-kpi com aria-pressed escolhe a
   série do gráfico. */
.ui-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--ui-kpi-min), 100%), 1fr)); gap: var(--ui-space-4); min-width: 0; margin: 0; padding: 0; list-style: none; }
.ui-kpi { position: relative; display: flex; flex-direction: column; gap: var(--ui-space-2); min-width: 0; margin: 0; padding: var(--ui-space-5); background: var(--ui-bg-card); border: 1px solid var(--ui-border); border-radius: var(--ui-r-xl); color: var(--ui-ink); font: inherit; text-align: left; }
.ui-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2); min-width: 0; }
.ui-kpi-top .ui-tile { --ui-tile-size: 32px; margin: -7px 0; border-radius: var(--ui-r-md); }
.ui-kpi-top .ui-tile svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.ui-kpi-lbl { display: inline-flex; align-items: center; gap: 4px; min-width: 0; margin: 0; font-size: var(--ui-fs-label); font-weight: var(--ui-fw-medium); line-height: 18px; color: var(--ui-muted); }
.ui-kpi-lbl > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-kpi-help { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; margin: -1px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ui-muted-2); cursor: help; }
.ui-kpi-help::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ui-ico-help) center / 14px no-repeat; mask: var(--ui-ico-help) center / 14px no-repeat; }
.ui-kpi-help:hover { color: var(--ui-muted); }
.ui-kpi-help:focus:not(:focus-visible) { outline: none; }
.ui-kpi-help:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
.ui-kpi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ui-space-3); min-width: 0; }
.ui-kpi-val { display: block; flex: 0 1 auto; min-width: 0; margin: 0; font-size: var(--ui-fs-page); font-weight: var(--ui-fw-semibold); line-height: 34px; letter-spacing: -.025em; color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ui-kpi-unit { margin-left: 3px; font-size: var(--ui-fs-body-lg); font-weight: var(--ui-fw-medium); letter-spacing: 0; color: var(--ui-muted); }
/* Cor no número só quando é semântica (meta batida, limite estourado); 0 fica cinza. */
.ui-kpi-val.is-ok { color: var(--ui-ok-ink); }
.ui-kpi-val.is-warn { color: var(--ui-warn-ink); }
.ui-kpi-val.is-danger { color: var(--ui-danger-ink); }
.ui-kpi-val.is-muted { color: var(--ui-muted); }
.ui-kpi-row > .ui-spark { flex: 0 1 72px; width: auto; min-width: 0; max-width: 72px; height: 24px; margin-bottom: 5px; }
.ui-kpi-foot { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 22px; font-size: var(--ui-fs-help); line-height: 1.3; color: var(--ui-muted); white-space: nowrap; overflow: hidden; }
.ui-kpi-ctx { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-kpi-skel { display: block; width: 62%; height: 26px; margin: 4px 0; border-radius: var(--ui-r-sm); }
.ui-kpi > .ui-spark { margin-top: var(--ui-space-1); }
button.ui-kpi { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--ui-dur-1) var(--ui-ease), border-color var(--ui-dur-1) var(--ui-ease); }
button.ui-kpi:hover { border-color: var(--ui-line-strong); }
button.ui-kpi:focus:not(:focus-visible) { outline: none; }
button.ui-kpi:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-kpi[aria-pressed="true"], .ui-kpi[aria-selected="true"] { border-color: rgba(var(--ui-accent-rgb), .45); background: rgba(var(--ui-accent-rgb), .05); }
.ui-kpi[aria-pressed="true"] .ui-kpi-lbl, .ui-kpi[aria-selected="true"] .ui-kpi-lbl { color: var(--ui-ink); font-weight: var(--ui-fw-semibold); }
/* Faixa única: as divisórias de fora somem pelo recorte do cartão. */
.ui-kpis.is-joined { gap: 0; overflow: hidden; background: var(--ui-bg-card); border: 1px solid var(--ui-border); border-radius: var(--ui-r-xl); }
.ui-kpis.is-joined > .ui-kpi { margin: 0 -1px -1px 0; border: 0; border-right: 1px solid var(--ui-border-subtle); border-bottom: 1px solid var(--ui-border-subtle); border-radius: 0; background: transparent; }
.ui-kpis.is-joined > button.ui-kpi:hover { background: var(--ui-fill-1); }
.ui-kpis.is-joined > button.ui-kpi:focus-visible { outline-offset: -2px; }
.ui-kpis.is-joined > .ui-kpi[aria-pressed="true"], .ui-kpis.is-joined > .ui-kpi[aria-selected="true"] { background: rgba(var(--ui-accent-rgb), .06); }
@media (max-width: 560px) {
    .ui-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-3); }
    .ui-kpis:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
    .ui-kpis > .ui-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .ui-kpis.is-joined { gap: 0; }
    .ui-kpi { padding: var(--ui-space-4); }
    .ui-kpi-val { font-size: var(--ui-fs-h2); line-height: 30px; }
    .ui-kpi-row > .ui-spark { flex-basis: 56px; }
    .ui-kpi-val { flex-shrink: 0; }
    .ui-kpi-lbl { align-items: flex-start; }
    .ui-kpi-lbl > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
    .ui-kpi-foot { flex-wrap: wrap; row-gap: 2px; }
    .ui-kpi-ctx { flex: 1 1 100%; white-space: nowrap; }
}

/* ── Mini linha (ui-spark) ───────────────────────────────────────────────────
   <span class="ui-spark" data-ui-spark="3,5,4,8,6,9"></span> (linha + área) ou
   data-ui-spark-type="bars" (barras de 7 dias, a última na cor cheia). O
   ui-kit.js desenha o SVG (uiSpark.render). Decorativa: o número ao lado leva
   o significado. Sem dado (menos de 2 pontos): não desenha nada. */
.ui-spark { position: relative; display: block; width: 100%; height: var(--ui-spark-h, 32px); color: var(--ui-accent); }
.ui-spark:empty { display: none; }
.ui-spark > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ui-spark-area { fill: currentColor; fill-opacity: .1; stroke: none; }
.ui-spark-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ui-spark-bar { fill: currentColor; fill-opacity: .4; }
.ui-spark-bar.is-last { fill-opacity: 1; }
.ui-spark-end { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: currentColor; outline: 2px solid var(--ui-bg-card); pointer-events: none; }
.ui-spark.is-ok { color: var(--ui-ok); }
.ui-spark.is-danger { color: var(--ui-danger); }
.ui-spark.is-muted { color: var(--ui-muted-2); }

/* ── Medidor (ui-meter) ──────────────────────────────────────────────────────
   Quanto está CHEIO (capacidade, uso do plano); tarefa em andamento continua
   no .ui-progress. data-ui-meter="0.93" (0 a 1) vira --ui-meter-p pelo JS e o
   preenchimento anda por transform (sem reflow). O tom é da PÁGINA (cheio que
   se resolve sozinho = is-info; cheio sem saída = is-danger), nunca só cor:
   sempre com o texto "880 / 950" (.ui-meter-txt). .is-segmented = mapa (um
   segmento por item, até 10 + "+N"). */
.ui-meter { --ui-meter-p: 0; --ui-meter-c: var(--ui-accent); position: relative; display: block; width: 100%; height: 6px; border-radius: var(--ui-r-pill); background: var(--ui-fill-2); overflow: hidden; }
.ui-meter.sm { height: 4px; }
.ui-meter-bar { position: absolute; inset: 0; border-radius: inherit; background: var(--ui-meter-c); transform-origin: left center; transform: scaleX(var(--ui-meter-p)); transition: transform var(--ui-dur-4) var(--ui-ease-out); }
.ui-meter.is-ok, .ui-meter-seg.is-ok { --ui-meter-c: var(--ui-ok); }
.ui-meter.is-warn, .ui-meter-seg.is-warn { --ui-meter-c: var(--ui-warn); }
/* Aviso com listras (além da cor): no calm o ocre fica perto da terracota da marca. */
.ui-meter.is-warn .ui-meter-bar { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .32) 0 3px, transparent 3px 6px), var(--ui-meter-c); }
.ui-meter.is-danger, .ui-meter-seg.is-danger { --ui-meter-c: var(--ui-danger); }
.ui-meter.is-info, .ui-meter-seg.is-info { --ui-meter-c: var(--ui-info); }
.ui-meter.is-muted, .ui-meter-seg.is-muted { --ui-meter-c: var(--ui-muted-2); }
.ui-meter-line { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); min-width: 0; margin-top: 6px; font-size: var(--ui-fs-help); color: var(--ui-muted); }
.ui-meter-txt { font-size: var(--ui-fs-help); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-meter-txt strong { font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
/* Segmentado: o fundo é de cada segmento; o preenchimento vem no ::after
   (o ::before fica livre para a dica data-ui-tip). */
.ui-meter.is-segmented { display: flex; align-items: center; gap: 2px; height: auto; background: transparent; border-radius: 0; overflow: visible; }
.ui-meter-seg { --ui-meter-p: 0; --ui-meter-c: rgba(var(--ui-accent-rgb), .5); position: relative; flex: 1 1 0; min-width: 6px; height: 8px; border-radius: var(--ui-r-pill); background: var(--ui-fill-2); }
.ui-meter-seg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ui-meter-c); transform-origin: left center; transform: scaleX(var(--ui-meter-p)); transition: transform var(--ui-dur-4) var(--ui-ease-out); }
.ui-meter-seg.is-current { --ui-meter-c: var(--ui-accent); }
/* No escuro só o segmento PADRÃO muda (:where = sem peso): os tons is-ok/-warn/-danger/-info/-muted/-current continuam valendo. */
:where(:root[data-theme="dark"]) .ui-meter-seg { --ui-meter-c: rgba(var(--ui-neutral-rgb), .32); }
/* Segmento .is-warn (sem admin, problema): listras a 45°, não depende só da cor. */
.ui-meter-seg.is-warn { background: repeating-linear-gradient(45deg, rgba(var(--ui-warn-rgb), .38) 0 3px, transparent 3px 6px), var(--ui-fill-2); }
.ui-meter-seg.is-warn::after { opacity: .75; }
.ui-meter-more { flex: 0 0 auto; padding-left: 4px; font-size: var(--ui-fs-help); font-weight: var(--ui-fw-medium); color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-meter.is-segmented.is-lg .ui-meter-seg { height: 12px; }

/* ── Gráfico (ui-chart + window.uiChart) ─────────────────────────────────────
   <div class="ui-chart"> esqueleto + <canvas role="img"> + (dica .ui-chart-tip
   e vazio .ui-chart-empty, que o JS cria se faltar). O tema (cores, grade 7%,
   fonte, dica, cruz, rótulo no último ponto) vem dos tokens e troca ao vivo
   com tema/paleta. Altura por --ui-chart-h. Sem dado: .is-empty (nunca eixo
   vazio). Extraído do painel (dashboard.js), que agora usa o padrão. */
.ui-chart { position: relative; height: var(--ui-chart-h); min-width: 0; }
.ui-chart > canvas { position: relative; display: block; opacity: 0; transition: opacity var(--ui-dur-3) var(--ui-ease-out); }
.ui-chart.is-ready > canvas { opacity: 1; }
.ui-chart.is-swapping > canvas { opacity: .35; transition-duration: calc(var(--ui-dur-2) * .75); transition-timing-function: var(--ui-ease-in); }
.ui-chart > .ui-skel-group { position: absolute; inset: 0; }
.ui-chart.is-ready > .ui-skel-group { display: none; }
.ui-chart-skel { height: 100%; border-radius: var(--ui-r-lg); }
.ui-chart.is-empty > canvas { visibility: hidden; }
.ui-chart > .ui-chart-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--ui-space-4); }
.ui-chart > .ui-chart-empty[hidden] { display: none; }
.ui-chart-empty p { margin-bottom: 0; }
.ui-chart-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ui-space-2) var(--ui-space-3); min-height: 22px; margin-bottom: var(--ui-space-3); }
.ui-chart-title { margin: 0; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-semibold); line-height: 20px; color: var(--ui-ink); }
/* Legenda curta (prefira o rótulo direto no fim da linha). */
.ui-chart-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px var(--ui-space-4); margin: 0; padding: 0; list-style: none; font-size: var(--ui-fs-help); color: var(--ui-muted); }
.ui-chart-leg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ui-chart-leg[hidden] { display: none; }
.ui-chart-leg::before, .ui-chart-sw { content: ""; flex: 0 0 auto; width: 14px; height: 0; border-top: 2px solid var(--ui-accent); border-radius: 2px; }
.ui-chart-sw { width: 10px; border-radius: 0; }
.ui-chart-leg.is-cmp::before, .ui-chart-sw.is-cmp { border-top: 2px dashed var(--ui-muted-2); }
.ui-chart-leg.is-bar::before, .ui-chart-sw.is-bar { width: 10px; border-top-width: 6px; border-radius: 2px; }
/* Série rala que o uiChart desenhou em barras (.ui-chart.is-bars): a legenda acompanha. */
:is(.ui-chart-head, .ui-panel, .ui-card):has(+ .ui-chart.is-bars, .ui-chart.is-bars) .ui-chart-leg:not(.is-cmp):not(.is-alt):not(.is-muted)::before { width: 10px; border-top-width: 6px; }
.ui-chart-leg.is-alt::before, .ui-chart-sw.is-alt { width: 10px; border-top: 6px solid rgba(var(--ui-accent-rgb), .42); border-radius: 2px; }
.ui-chart-leg.is-muted::before, .ui-chart-sw.is-muted { border-top-color: var(--ui-muted-2); }
:root[data-theme="dark"] .ui-chart-leg.is-alt::before, :root[data-theme="dark"] .ui-chart-sw.is-alt { border-top-color: rgba(var(--ui-neutral-rgb), .3); }
/* Dica: segue o cursor por transform; valor grande + comparação + variação. */
.ui-chart-tip { position: absolute; top: 0; left: 0; z-index: 3; min-width: 168px; max-width: 240px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); background: var(--ui-bg-raised); color: var(--ui-ink); font-size: var(--ui-fs-help); line-height: 1.4; pointer-events: none; opacity: 0; transition: opacity var(--ui-dur-1) var(--ui-ease); }
.ui-chart-tip.is-on { opacity: 1; }
.ui-chart-tip-t { margin-bottom: 6px; font-weight: var(--ui-fw-medium); color: var(--ui-muted); }
.ui-chart-tip-row { display: flex; align-items: center; gap: var(--ui-space-2); }
.ui-chart-tip-row + .ui-chart-tip-row { margin-top: 4px; }
.ui-chart-tip-v { font-size: var(--ui-fs-body-lg); font-weight: var(--ui-fw-semibold); color: var(--ui-ink); font-variant-numeric: tabular-nums; }
.ui-chart-tip-l { color: var(--ui-muted); }
.ui-chart-tip-row .ui-chart-tip-l { flex: 1 1 auto; min-width: 0; }
.ui-chart-tip-n { margin-left: auto; color: var(--ui-ink-2); font-weight: var(--ui-fw-medium); font-variant-numeric: tabular-nums; }
.ui-chart-tip > .ui-delta { margin-top: 8px; }
.ui-chart-sum { margin: var(--ui-space-2) 0 0; font-size: var(--ui-fs-help); color: var(--ui-muted); }

/* ── Tabela (ui-table) ───────────────────────────────────────────────────────
   <div class="ui-table-wrap"> [barra .ui-table-bar | .ui-table-bulk] +
   <table class="ui-table" data-ui-table> + [.ui-table-empty] + [.ui-table-foot].
   Cabeçalho discreto (12, peso 500, sentence case), linha 64 (foto + 2
   linhas; .is-compact 48), hover de um tom, selecionada no acento 8%,
   seleção em .is-check e ações num "..." (.is-actions). Larguras por classe
   na <th> (.ui-col-*) e layout fixo: texto longo encolhe com reticências.
   Linha clicável: <a class="ui-row-link"> no título da .ui-cell-main (o link
   cobre a linha; caixas e "..." ficam por cima) ou tr[data-href] (JS).
   Até 760 px vira LISTA DE CARTÕES só com CSS: .ui-cell-main é o topo, o
   "..." vai para o canto e as outras células mostram o data-label em grade
   de 2 (.is-wide-sm ocupa as 2; .is-hide-sm some; .is-hide-md some até 1024).
   .is-scroll mantém a tabela (rolagem dentro de .ui-table-scroll). */
.ui-table-wrap { position: relative; min-width: 0; background: var(--ui-bg-card); border: 1px solid var(--ui-border); border-radius: var(--ui-r-xl); }
.ui-table-wrap.is-plain { background: transparent; border: 0; border-radius: 0; }
.ui-table-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-3) var(--ui-space-4); padding: var(--ui-space-4) var(--ui-table-pad); }
.ui-table-bar .ui-search { flex: 1 1 240px; max-width: 360px; }
.ui-table-bar-end { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-space-2); margin-left: auto; }
.ui-table-meta { font-size: var(--ui-fs-label); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Ações em massa: entra no lugar da barra enquanto há seleção, fixa ao rolar. */
.ui-table-bulk { position: sticky; top: var(--ui-sticky-top, 0px); z-index: var(--ui-z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2) var(--ui-space-3); min-height: 64px; padding: var(--ui-space-3) var(--ui-table-pad); border-radius: var(--ui-r-xl) var(--ui-r-xl) 0 0; background: color-mix(in srgb, var(--ui-bg-card), var(--ui-accent) 7%); animation: uiFadeIn var(--ui-dur-2) var(--ui-ease-out); }
.ui-table-bulk[hidden] { display: none; }
.ui-table-wrap.has-selection > .ui-table-bar { display: none; }
.ui-table-bulk-n { margin-right: auto; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-semibold); color: var(--ui-ink); font-variant-numeric: tabular-nums; }

.ui-table { width: 100%; margin: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: var(--ui-fs-body); line-height: 20px; color: var(--ui-ink-2); }
.ui-table th, .ui-table td { padding: 0 var(--ui-space-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--ui-border-subtle); }
.ui-table th:first-child, .ui-table td:first-child { padding-left: var(--ui-table-pad); }
.ui-table th:last-child, .ui-table td:last-child { padding-right: var(--ui-table-pad); }
.ui-table > caption { caption-side: top; padding: 0 var(--ui-table-pad) var(--ui-space-2); text-align: left; font-size: var(--ui-fs-label); color: var(--ui-muted); }
.ui-table thead th { height: 40px; font-size: var(--ui-fs-help); font-weight: var(--ui-fw-medium); line-height: 16px; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-table-wrap > :not(.ui-table):not(.ui-table-empty) + .ui-table thead th { border-top: 1px solid var(--ui-border-subtle); }
.ui-table tbody td { height: 64px; padding-top: var(--ui-space-2); padding-bottom: var(--ui-space-2); overflow-wrap: anywhere; transition: background-color var(--ui-dur-1) var(--ui-ease); }
.ui-table.is-compact tbody td { height: 48px; padding-top: var(--ui-space-1); padding-bottom: var(--ui-space-1); }
.ui-table tbody tr:last-child > td { border-bottom: 0; }
.ui-table tbody tr:hover > td { background: var(--ui-fill-1); }
.ui-table tbody tr.is-selected > td { background: rgba(var(--ui-accent-rgb), .08); }
.ui-table tbody tr.is-selected:hover > td { background: rgba(var(--ui-accent-rgb), .11); }
.ui-table tbody tr[data-href] { cursor: pointer; }
.ui-table tbody tr:has(.ui-dropdown.open) { position: relative; z-index: 3; }
.ui-table-wrap > .ui-table:last-child tbody tr:last-child > td:first-child { border-bottom-left-radius: calc(var(--ui-r-xl) - 1px); }
.ui-table-wrap > .ui-table:last-child tbody tr:last-child > td:last-child { border-bottom-right-radius: calc(var(--ui-r-xl) - 1px); }
/* Alinhamento e tom por coluna */
.ui-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-table .is-center { text-align: center; }
.ui-table .is-muted { color: var(--ui-muted); }
.ui-table .is-nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Larguras (na <th>): o resto divide o espaço. */
.ui-col-xs { width: 80px; } .ui-col-sm { width: 112px; } .ui-col-md { width: 144px; } .ui-col-lg { width: 200px; } .ui-col-xl { width: 280px; }
.ui-table .is-check { width: calc(var(--ui-table-pad) + 30px); padding-right: 0; }
.ui-table .is-check .ui-checkbox { display: block; }
.ui-table .is-check .ui-check { display: flex; gap: var(--ui-space-2); }
.ui-table .is-actions { width: calc(var(--ui-table-pad) + 44px); padding-left: 0; text-align: right; overflow: visible; }
.is-actions .ui-dropdown { vertical-align: middle; }
/* Célula principal: avatar/tile + título + sub */
.ui-cell { display: flex; align-items: center; gap: var(--ui-space-3); min-width: 0; }
.ui-cell-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-cell-title { font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); line-height: 20px; color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-cell-sub { font-size: var(--ui-fs-label); line-height: 18px; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.ui-row-link { display: flex; min-width: 0; color: inherit; text-decoration: none; border-radius: var(--ui-r-sm); }
a.ui-row-link:hover { color: inherit; }
a.ui-row-link:hover .ui-cell-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ui-line-strong); }
a.ui-row-link:focus:not(:focus-visible) { outline: none; }
a.ui-row-link:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
/* Link esticado: a linha toda abre o item; caixa, "..." e botões ficam por cima. */
.ui-table tbody tr:has(.ui-row-link) { position: relative; }
.ui-row-link::after { content: ""; position: absolute; inset: 0; }
.ui-table tbody tr:has(.ui-row-link) :where(.is-check, .is-actions, td a:not(.ui-row-link), td button, td label, td input, td select) { position: relative; z-index: 1; }
.ui-cell-tags { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.ui-cell-tags .ui-tag { flex: 0 1 auto; max-width: 140px; }
/* Ordenação acessível: <th aria-sort="ascending|descending"><button class="ui-th-sort"> */
.ui-th-sort { display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% + 12px); margin: 0 -6px; padding: 4px 6px; border: 0; border-radius: var(--ui-r-sm); background: transparent; color: inherit; font: inherit; line-height: 16px; text-align: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--ui-dur-1) var(--ui-ease), background-color var(--ui-dur-1) var(--ui-ease); }
.ui-th-sort > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-th-sort::after { content: ""; flex: 0 0 auto; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ui-ico-sort) center / 14px no-repeat; mask: var(--ui-ico-sort) center / 14px no-repeat; opacity: 0; transition: opacity var(--ui-dur-1) var(--ui-ease); }
.ui-th-sort:hover { color: var(--ui-ink); background: var(--ui-fill-2); }
.ui-th-sort:hover::after, .ui-th-sort:focus-visible::after { opacity: .55; }
.ui-th-sort:focus:not(:focus-visible) { outline: none; }
.ui-th-sort:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 0; }
.ui-table th[aria-sort="ascending"], .ui-table th[aria-sort="descending"] { color: var(--ui-ink); }
th[aria-sort="ascending"] > .ui-th-sort::after, th[aria-sort="descending"] > .ui-th-sort::after { opacity: 1; -webkit-mask-image: var(--ui-ico-arrow-up); mask-image: var(--ui-ico-arrow-up); -webkit-mask-size: 12px; mask-size: 12px; }
th[aria-sort="descending"] > .ui-th-sort::after { -webkit-mask-image: var(--ui-ico-arrow-down); mask-image: var(--ui-ico-arrow-down); }
.ui-table th.is-num > .ui-th-sort { flex-direction: row-reverse; }
/* Carregando: linhas de esqueleto com o formato real (só depois de 300 ms). */
.ui-table tbody.is-loading { animation: uiFadeIn var(--ui-dur-2) var(--ui-ease-out) 300ms both; }
.ui-table tbody.is-loading tr:hover > td { background: transparent; }
.ui-table tbody.is-loading .ui-skel-line { margin: 0; }
.ui-table tbody.is-loading .ui-skel-stack { flex: 1 1 auto; min-width: 0; }
.ui-table tbody.is-loading .ui-skel-stack .ui-skel-line + .ui-skel-line { margin-top: 6px; }
/* Vazio: some a tabela inteira (nunca cabeçalho sem linha) e entra o .ui-empty. */
.ui-table-wrap.is-empty > .ui-table, .ui-table-wrap.is-empty > .ui-table-foot, .ui-table-wrap.is-empty > .ui-table-scroll { display: none; }
.ui-table-wrap:not(.is-empty) > .ui-table-empty { display: none; }
.ui-table-wrap > .ui-table-empty { border-top: 1px solid var(--ui-border-subtle); }
.ui-table-wrap > .ui-table-empty:first-child { border-top: 0; }
.ui-table-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-3); padding: var(--ui-space-3) var(--ui-table-pad); border-top: 1px solid var(--ui-border-subtle); font-size: var(--ui-fs-label); color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.ui-table-scroll > .ui-table { min-width: 640px; }
@media (max-width: 1024px) { .ui-table .is-hide-md { display: none; } }
@media (max-width: 760px) {
    .ui-table-wrap { --ui-table-pad: var(--ui-space-4); }
    .ui-table-bar .ui-search { flex-basis: 100%; max-width: none; }
    .ui-table-bar-end { margin-left: 0; }
    .ui-table-bar .ui-pills { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .ui-table-bar .ui-pills::-webkit-scrollbar { display: none; }
    .ui-table-bar .ui-pill { flex: 0 0 auto; }
    .ui-table-bulk { min-height: 56px; }
    .ui-table-foot { justify-content: center; text-align: center; }
    /* Lista de cartões */
    .ui-table:not(.is-scroll), .ui-table:not(.is-scroll) > tbody, .ui-table:not(.is-scroll) > thead { display: block; }
    .ui-table:not(.is-scroll) > thead > tr { display: flex; }
    .ui-table:not(.is-scroll) > thead th { display: none; }
    .ui-table:not(.is-scroll) > thead th.is-check { display: block; flex: 1 1 auto; width: auto; height: auto; padding: var(--ui-space-2) var(--ui-table-pad); border-top: 0; font-size: var(--ui-fs-label); font-weight: var(--ui-fw-medium); color: var(--ui-ink-2); }
    .ui-table:not(.is-scroll) > thead th.is-check .ui-sr { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; }
    .ui-table:not(.is-scroll) > tbody > tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-2) var(--ui-space-4); padding: 14px var(--ui-table-pad); border-top: 1px solid var(--ui-border-subtle); transition: background-color var(--ui-dur-1) var(--ui-ease); }
    .ui-table:not(.is-scroll) > tbody > tr:first-child { border-top: 0; }
    .ui-table-wrap > :not(.ui-table):not(.ui-table-empty) + .ui-table:not(.is-scroll) > tbody > tr:first-child,
    .ui-table:not(.is-scroll) > thead:has(th.is-check) + tbody > tr:first-child { border-top: 1px solid var(--ui-border-subtle); }
    .ui-table:not(.is-scroll) > tbody > tr:has(> .is-check) { padding-left: calc(var(--ui-table-pad) + 30px); }
    .ui-table:not(.is-scroll) > tbody > tr > td { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: var(--ui-fs-label); line-height: 18px; text-align: left; }
    .ui-table:not(.is-scroll) > tbody > tr > td[data-label]::before { content: attr(data-label); font-size: var(--ui-fs-help); line-height: 16px; color: var(--ui-muted); }
    .ui-table:not(.is-scroll) > tbody > tr > td.ui-cell-main { display: block; grid-column: 1 / -1; font-size: var(--ui-fs-body); line-height: 20px; }
    .ui-table:not(.is-scroll) > tbody > tr:has(> .is-actions) > td.ui-cell-main { padding-right: 36px; }
    .ui-table:not(.is-scroll) > tbody > tr > td.ui-cell-main::before { content: none; }
    .ui-table:not(.is-scroll) > tbody > tr > td[data-label=""]::before { content: none; }
    .ui-table:not(.is-scroll) > tbody > tr > td.is-wide-sm { grid-column: 1 / -1; }
    .ui-table:not(.is-scroll) > tbody > tr > td.is-hide-sm { display: none; }
    .ui-table:not(.is-scroll) > tbody > tr > td.is-check { position: absolute; top: 14px; left: var(--ui-table-pad); z-index: 1; display: flex; flex-direction: row; align-items: center; width: auto; height: 40px; }
    .ui-table:not(.is-scroll) > tbody > tr > td.is-actions { position: absolute; top: 12px; right: calc(var(--ui-table-pad) - 10px); z-index: 1; display: block; width: auto; }
    .ui-table:not(.is-scroll) > tbody > tr > td.is-actions .ui-btn-icon { width: var(--ui-target-touch); height: var(--ui-target-touch); }
    .ui-table:not(.is-scroll) > tbody > tr > td .ui-cell-tags { flex-wrap: wrap; overflow: visible; }
    .ui-table:not(.is-scroll) > tbody > tr:hover { background: var(--ui-fill-1); }
    .ui-table:not(.is-scroll) > tbody > tr.is-selected { background: rgba(var(--ui-accent-rgb), .08); }
    .ui-table-wrap > .ui-table:not(.is-scroll):last-child > tbody > tr:last-child { border-radius: 0 0 calc(var(--ui-r-xl) - 1px) calc(var(--ui-r-xl) - 1px); }
}

/* ── Paginação (ui-pagination) ───────────────────────────────────────────────
   <nav class="ui-pagination" aria-label="Paginação">: anterior, números
   (atual com aria-current="page", lacuna "…") e próxima. No celular os
   números viram "Página 2 de 8" e as setas ganham 44 px. Lista curta com
   muito item: prefira "Mostrar mais" (.ui-load-more). uiPagination.render. */
.ui-pagination { display: flex; align-items: center; gap: var(--ui-space-1); min-width: 0; }
.ui-page-list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-page-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 32px; height: 32px; padding: 0 var(--ui-space-2); border: 0; border-radius: var(--ui-r-sm); background: transparent; color: var(--ui-ink-2); font: inherit; font-size: var(--ui-fs-label); font-weight: var(--ui-fw-medium); line-height: 1; font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease); }
.ui-page-btn:hover { background: var(--ui-fill-2); color: var(--ui-ink); }
.ui-page-btn:focus:not(:focus-visible) { outline: none; }
.ui-page-btn:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
.ui-page-btn[aria-current="page"] { background: rgba(var(--ui-accent-rgb), .11); color: var(--ui-accent-ink); font-weight: var(--ui-fw-semibold); cursor: default; }
.ui-page-btn[aria-disabled="true"], .ui-page-btn:disabled { opacity: .4; cursor: default; pointer-events: none; }
.ui-page-prev, .ui-page-next { width: 32px; padding: 0; }
.ui-page-prev::before, .ui-page-next::before { content: ""; width: var(--ui-ic-sm); height: var(--ui-ic-sm); background: currentColor; -webkit-mask: var(--ui-ico-chev-left) center / 16px no-repeat; mask: var(--ui-ico-chev-left) center / 16px no-repeat; }
.ui-page-next::before { -webkit-mask-image: var(--ui-ico-chev-right); mask-image: var(--ui-ico-chev-right); }
.ui-page-gap { display: inline-block; min-width: 24px; text-align: center; font-size: var(--ui-fs-label); color: var(--ui-muted); user-select: none; }
.ui-page-of { display: none; padding: 0 var(--ui-space-2); font-size: var(--ui-fs-label); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-load-more { display: flex; justify-content: center; padding: var(--ui-space-4) var(--ui-table-pad); }
@media (max-width: 560px) {
    .ui-pagination { justify-content: space-between; width: 100%; }
    .ui-page-list { display: none; }
    .ui-page-of { display: inline; }
    .ui-page-prev, .ui-page-next { width: var(--ui-target-touch); height: var(--ui-target-touch); }
}

/* ── Segmentado (ui-seg) e alternador de visualização (ui-viewswitch) ────────
   Troca um VALOR ou um filtro (Hoje · 7 dias · 30 dias; Imediato · Agendar).
   Aba troca o conteúdo da página; segmentado troca o valor. Trilho em
   pílula, opção de 32 px (36 no celular, .ui-seg-md 36, .ui-seg-sm 26) e a
   escolhida em superfície com borda e peso 600 (dois sinais).
   role="radiogroup" + button role="radio" aria-checked (ou aria-pressed num
   role="group"), ou <label class="ui-seg-btn"><input type="radio">. Com
   data-ui-seg o ui-kit.js marca, troca pelas setas e avisa ui:seg-change. */
.ui-seg { display: inline-flex; align-items: center; gap: 2px; width: fit-content; max-width: 100%; padding: 3px; border: 1px solid var(--ui-line-2); border-radius: var(--ui-r-pill); background: var(--ui-track); }
.ui-seg-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; min-width: 0; height: 32px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--ui-r-pill); background: transparent; color: var(--ui-muted); font: inherit; font-size: var(--ui-fs-label); font-weight: var(--ui-fw-medium); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: color var(--ui-dur-1) var(--ui-ease), background-color var(--ui-dur-1) var(--ui-ease), border-color var(--ui-dur-1) var(--ui-ease); }
.ui-seg-btn svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); flex: 0 0 auto; }
.ui-seg-btn > input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ui-seg-btn:hover { color: var(--ui-ink); }
.ui-seg-btn:focus:not(:focus-visible) { outline: none; }
.ui-seg-btn:focus-visible, .ui-seg-btn:has(> input:focus-visible) { outline: 2px solid var(--ui-focus); outline-offset: 0; }
.ui-seg-btn[aria-pressed="true"], .ui-seg-btn[aria-checked="true"], .ui-seg-btn.is-active, .ui-seg-btn:has(> input:checked) { background: var(--ui-bg-raised); border-color: var(--ui-line); color: var(--ui-ink); font-weight: var(--ui-fw-semibold); }
.ui-seg-btn:disabled, .ui-seg-btn:has(> input:disabled) { opacity: .45; cursor: not-allowed; }
.ui-seg-btn.is-icon { width: 32px; padding: 0; }
.ui-seg-n { font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-seg-md .ui-seg-btn { height: 36px; }
.ui-seg-md .ui-seg-btn.is-icon { width: 36px; }
.ui-seg-sm { padding: 2px; }
.ui-seg-sm .ui-seg-btn { height: 26px; padding: 0 10px; font-size: var(--ui-fs-help); }
.ui-seg-sm .ui-seg-btn.is-icon { width: 26px; padding: 0; }
.ui-seg-block { display: flex; width: 100%; }
.ui-seg-block .ui-seg-btn { flex: 1 1 0; }
/* Em bloco só no celular (no computador fica do tamanho das opções). */
@media (max-width: 560px) { .ui-seg-block-sm { display: flex; width: 100%; } .ui-seg-block-sm .ui-seg-btn { flex: 1 1 0; } }
@media (max-width: 640px) {
    .ui-seg:not(.ui-seg-sm) .ui-seg-btn { height: 36px; }
    .ui-seg:not(.ui-seg-sm) .ui-seg-btn.is-icon { width: 40px; }
}
/* Alternador de visualização: ícone + rótulo (no celular só o ícone, com aria-label). */
.ui-viewswitch .ui-seg-btn { padding: 0 12px; }
@media (max-width: 560px) {
    .ui-viewswitch .ui-seg-btn { width: 40px; padding: 0; }
    .ui-viewswitch .ui-viewswitch-txt { display: none; }
}
[data-ui-view-panel][hidden] { display: none; }
[data-ui-view-panel]:not([hidden]) { animation: uiFadeIn var(--ui-dur-2) var(--ui-ease-out); }

/* ── Cartões de objeto (ui-cards + ui-object-card) ───────────────────────────
   Para poucos objetos com identidade e estado (redes, dispositivos, canais):
   grade que se ajusta (mínimo --ui-cards-min, 340; .is-dense 260), gap 16
   (12 no celular); .is-single = um cartão na largura toda (use .is-wide).
   Partes: .ui-oc-head [.ui-oc-media, .ui-oc-id (.ui-oc-title + .ui-oc-badge,
   .ui-oc-meta), .ui-oc-menu], .ui-oc-stats (2; 3 no is-wide), .ui-oc-body
   (medidor + linha) e .ui-oc-foot. Clique: o título é o link
   (.ui-oc-link cobre o cartão); menu e rodapé ficam por cima. */
.ui-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--ui-cards-min), 100%), 1fr)); gap: var(--ui-space-4); min-width: 0; margin: 0; padding: 0; list-style: none; }
.ui-cards.is-dense { --ui-cards-min: 260px; }
.ui-cards.is-single { grid-template-columns: minmax(0, 1fr); }
.ui-cards > * { min-width: 0; }
.ui-object-card { position: relative; display: flex; flex-direction: column; gap: var(--ui-space-4); min-width: 0; height: 100%; padding: var(--ui-space-5); background: var(--ui-bg-card); border: 1px solid var(--ui-border); border-radius: var(--ui-r-xl); color: var(--ui-ink); transition: border-color var(--ui-dur-2) var(--ui-ease); }
.ui-object-card:has(.ui-oc-link):hover { border-color: var(--ui-line-strong); }
.ui-object-card:has(.ui-oc-link:focus-visible) { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-object-card:has(.ui-dropdown.open) { z-index: 5; }
.ui-object-card.is-selected { border-color: rgba(var(--ui-accent-rgb), .55); background: rgba(var(--ui-accent-rgb), .04); }
.ui-object-card.is-off { background: var(--ui-fill-1); }
.ui-oc-head { display: flex; align-items: center; gap: var(--ui-space-3); min-width: 0; }
.ui-oc-media { display: inline-flex; flex: 0 0 auto; }
.ui-oc-media .ui-avatar { --ui-av-size: 32px; }
.ui-oc-media > .ui-avatar, .ui-oc-media > .ui-tile { --ui-av-size: 40px; }
.ui-oc-id { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ui-oc-titlerow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--ui-space-2); min-width: 0; }
.ui-oc-title { min-width: 0; margin: 0; font-size: var(--ui-fs-title); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); letter-spacing: var(--ui-ls-title); color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-oc-badge { flex: 0 0 auto; }
.ui-oc-meta { min-width: 0; font-size: var(--ui-fs-label); line-height: 18px; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-oc-link { color: inherit; text-decoration: none; }
.ui-oc-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ui-oc-link:hover { color: inherit; }
.ui-oc-link:focus { outline: none; }
.ui-oc-menu { position: relative; z-index: 1; flex: 0 0 auto; align-self: flex-start; margin: -4px -8px 0 0; }
.ui-oc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-4); min-width: 0; }
.ui-oc-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-oc-stat-v { display: flex; align-items: center; gap: var(--ui-space-2); min-width: 0; font-size: var(--ui-fs-h2); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); letter-spacing: var(--ui-ls-title); color: var(--ui-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-oc-stat-v.is-muted { color: var(--ui-muted); }
.ui-oc-stat-v .ui-spark { flex: 0 0 auto; width: 64px; height: 20px; }
.ui-oc-stat-l { font-size: var(--ui-fs-help); color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-oc-body { display: flex; flex-direction: column; gap: var(--ui-space-2); min-width: 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-body); color: var(--ui-ink-2); }
.ui-oc-line { font-size: var(--ui-fs-label); color: var(--ui-muted); }
.ui-oc-line.is-info { color: var(--ui-info-ink); }
.ui-oc-line.is-warn { color: var(--ui-warn-ink); }
.ui-oc-line.is-danger { color: var(--ui-danger-ink); }
.ui-oc-foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2) var(--ui-space-3); margin-top: auto; padding-top: var(--ui-space-4); border-top: 1px solid var(--ui-border-subtle); }
.ui-oc-foot > .ui-linkfield { flex: 1 1 160px; }
/* Um objeto só (wireframe 5.4): identidade em cima na largura toda; embaixo,
   os números à esquerda e o mapa à direita, lado a lado; rodapé com o link. */
@media (min-width: 900px) {
    .ui-object-card.is-wide { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "head head" "stats body" "foot foot"; column-gap: var(--ui-space-8); row-gap: var(--ui-space-4); }
    .ui-object-card.is-wide > .ui-oc-head { grid-area: head; }
    .ui-object-card.is-wide > .ui-oc-stats { grid-area: stats; align-self: start; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ui-object-card.is-wide > .ui-oc-body { grid-area: body; align-self: start; }
    .ui-object-card.is-wide > .ui-oc-foot { grid-area: foot; }
}
/* Legenda por segmento do medidor (mesmas colunas e o mesmo vão de 2 px):
   <div class="ui-meter-legend" aria-hidden="true"><span class="ui-meter-legend-i is-current"><span class="ui-meter-legend-t">Grupo #3</span><span class="ui-meter-legend-d">389 de 950</span></span>..</div> */
.ui-meter-legend { display: flex; gap: 2px; min-width: 0; margin-top: var(--ui-space-2); }
.ui-meter-legend-i { display: flex; flex-direction: column; gap: 1px; flex: 1 1 0; min-width: 6px; overflow: hidden; font-size: var(--ui-fs-help); line-height: var(--ui-lh-snug); color: var(--ui-muted); }
.ui-meter-legend-t, .ui-meter-legend-d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-meter-legend-t { font-weight: var(--ui-fw-medium); color: var(--ui-ink-2); }
.ui-meter-legend-d { font-variant-numeric: tabular-nums; }
.ui-meter-legend-i.is-current .ui-meter-legend-t { color: var(--ui-accent-ink); }
.ui-meter-legend-i.is-warn .ui-meter-legend-d { color: var(--ui-warn-ink); }
.ui-meter-legend-i.is-danger .ui-meter-legend-d { color: var(--ui-danger-ink); }
@media (max-width: 560px) {
    .ui-cards { gap: var(--ui-space-3); }
    .ui-object-card { padding: var(--ui-space-4); }
    .ui-oc-menu .ui-btn-icon { width: var(--ui-target-touch); height: var(--ui-target-touch); }
    .ui-oc-foot > .ui-btn { flex: 1 1 100%; }
    .ui-linkfield.is-readonly:not(.is-plain) { flex-wrap: wrap; padding: 8px; }
    .ui-linkfield.is-readonly:not(.is-plain) > .ui-linkfield-url { flex: 1 1 100%; padding: 2px 4px 4px; }
    .ui-linkfield.is-readonly:not(.is-plain) > .ui-btn:not(.ui-btn-icon) { flex: 1 1 auto; }
}

/* ── "Precisa de você" (ui-attn) ─────────────────────────────────────────────
   Até 5 itens acionáveis (o resto atrás de "Ver mais N", que abre no lugar),
   na ordem vermelho, âmbar, azul (o ui-kit.js ordena). Cor só no tile; texto
   com o objeto em negrito + o motivo; UMA ação (verbo + objeto). Some quando
   não há item (sem "Tudo certo"). Título em <div> ou <h3> (o style.css força
   a cor de h2/h5/h6). */
.ui-attn { min-width: 0; background: var(--ui-bg-card); border: 1px solid var(--ui-border); border-radius: var(--ui-r-xl); }
.ui-attn[hidden] { display: none; }
.ui-attn-head { display: flex; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-4) var(--ui-space-5) var(--ui-space-1); }
.ui-attn-title { margin: 0; font-size: var(--ui-fs-body-lg); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); letter-spacing: -.01em; color: var(--ui-ink); }
.ui-attn-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: var(--ui-space-1) var(--ui-space-2) var(--ui-space-2); list-style: none; }
.ui-attn-item { display: flex; align-items: center; gap: var(--ui-space-3); min-height: 48px; padding: var(--ui-space-2) var(--ui-space-3); border-radius: var(--ui-r-lg); transition: background-color var(--ui-dur-1) var(--ui-ease); }
.ui-attn-item[hidden] { display: none; }
.ui-attn-item:hover { background: var(--ui-fill-1); }
.ui-attn-item > .ui-tile { align-self: flex-start; margin-top: 2px; }
.ui-attn-txt { flex: 1 1 auto; min-width: 0; font-size: var(--ui-fs-body); line-height: var(--ui-lh-snug); color: var(--ui-ink-2); overflow-wrap: anywhere; }
.ui-attn-txt b, .ui-attn-txt strong { font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.ui-attn-sub { display: block; margin-top: 2px; font-size: var(--ui-fs-label); color: var(--ui-muted); }
.ui-attn-item > .ui-btn, .ui-attn-item > a.ui-btn { flex: 0 0 auto; }
/* "Ver mais N" na coluna do texto dos itens: lista 8 + item 12 + tile + vão 12
   (tile 36 = 68; ui-tile-sm 28 = 60; sem tile = 20). */
.ui-attn-more { padding: 0 var(--ui-space-2) var(--ui-space-3) calc(var(--ui-space-2) + var(--ui-space-3) + 36px + var(--ui-space-3)); }
.ui-attn:has(.ui-attn-item > .ui-tile-sm) > .ui-attn-more { padding-left: calc(var(--ui-space-2) + var(--ui-space-3) + 28px + var(--ui-space-3)); }
.ui-attn:not(:has(.ui-attn-item > .ui-tile)) > .ui-attn-more { padding-left: calc(var(--ui-space-2) + var(--ui-space-3)); }
.ui-attn-more > .ui-btn-link { padding-left: 0; padding-right: 0; }
@media (max-width: 560px) {
    .ui-attn-item { flex-wrap: wrap; column-gap: var(--ui-space-3); row-gap: 4px; }
    .ui-attn-txt { flex-basis: calc(100% - 48px); }
    /* ação na coluna do texto: tile 36 + vão 12 (tile pequeno 28 + 12; sem tile, 0) */
    .ui-attn-item > .ui-btn { margin-left: 0; padding-left: 0; }
    .ui-attn-item:has(> .ui-tile) > .ui-btn { margin-left: 48px; }
    .ui-attn-item:has(> .ui-tile-sm) > .ui-btn { margin-left: 40px; }
}

/* ── Assistente em passos (ui-wizard + window.uiWizard) ──────────────────────
   Criação em 2 a 5 passos, UM por vez. Cabeça: "Passo 1 de 2 · Sobre a rede"
   + passos em pílula (feito com check e clicável, atual na marca; no celular
   só o "Passo X de Y"). Miolo: .ui-wizard-main com o passo atual + palco
   .ui-wizard-aside (prévia ao vivo, fixo ao rolar a partir de 1100 px; no
   celular vira folha de baixo pelo botão [data-ui-wizard-preview]). Rodapé:
   [Cancelar] à esquerda, [Voltar] [Continuar] à direita, fixo embaixo.
   Estados finais: .ui-wizard-progress (criando) e .ui-wizard-done (pronto).
   Página: <form class="ui-wizard" data-ui-wizard> com head, main, aside e
   foot como filhos diretos. Modal: .ui-mbox.ui-wizard com .ui-mbody.ui-wizard-body
   (main + aside) e .ui-mfoot.ui-wizard-foot. */
.ui-wizard { --ui-wz-pad: var(--ui-space-6); display: flex; flex-direction: column; min-width: 0; }
.ui-wizard.is-page, form.ui-wizard:not(.ui-mbox) { background: var(--ui-bg-card); border: 1px solid var(--ui-border); border-radius: var(--ui-r-xl); }
/* Página: cabeça, miolo (+ palco) e rodapé numa grade. */
.ui-wizard:has(> .ui-wizard-main) { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "main" "foot"; }
.ui-wizard:has(> .ui-wizard-main):has(> .ui-wizard-aside) { grid-template-columns: minmax(0, 1fr) var(--ui-wizard-aside-w); grid-template-areas: "head head" "main aside" "foot foot"; column-gap: var(--ui-space-6); }
.ui-wizard > .ui-wizard-head { grid-area: head; }
.ui-wizard > .ui-wizard-main { grid-area: main; padding: var(--ui-space-5) 0 var(--ui-space-6) var(--ui-wz-pad); }
.ui-wizard:not(:has(> .ui-wizard-aside)) > .ui-wizard-main { padding-right: var(--ui-wz-pad); }
.ui-wizard > .ui-wizard-aside { grid-area: aside; align-self: start; margin: var(--ui-space-5) var(--ui-wz-pad) var(--ui-space-6) 0; }
.ui-wizard > .ui-wizard-foot { grid-area: foot; }
.ui-wizard > .ui-wizard-progress, .ui-wizard > .ui-wizard-done { grid-column: 1 / -1; }
/* Formulário (até 560) + palco ficam juntos e centrados, sem vão morto no
   meio; cabeça e rodapé alinham com o par (o fundo e a divisória seguem a
   largura toda). */
@media (min-width: 761px) {
    .ui-wizard:has(> .ui-wizard-main):has(> .ui-wizard-aside) {
        --ui-wz-inner: calc(var(--ui-wz-pad) * 2 + 560px + var(--ui-space-8) + var(--ui-wizard-aside-w));
        grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--ui-wz-pad) + 560px + var(--ui-space-8))) calc(var(--ui-wizard-aside-w) + var(--ui-wz-pad)) minmax(0, 1fr);
        grid-template-areas: "head head head head" ". main aside ." "foot foot foot foot";
        column-gap: 0;
    }
    .ui-wizard:has(> .ui-wizard-main):has(> .ui-wizard-aside) > .ui-wizard-main { padding-right: var(--ui-space-8); }
    .ui-wizard:has(> .ui-wizard-main):has(> .ui-wizard-aside) > .ui-wizard-head,
    .ui-wizard:has(> .ui-wizard-main):has(> .ui-wizard-aside) > .ui-wizard-foot:not(.ui-mfoot) { padding-left: max(var(--ui-wz-pad), calc((100% - var(--ui-wz-inner)) / 2 + var(--ui-wz-pad))); padding-right: max(var(--ui-wz-pad), calc((100% - var(--ui-wz-inner)) / 2 + var(--ui-wz-pad))); }
}
.ui-wizard-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ui-space-2) var(--ui-space-4); padding: var(--ui-space-5) var(--ui-wz-pad) 0; }
.ui-mbox.ui-wizard > .ui-wizard-head, .ui-mbox.ui-wizard > form > .ui-wizard-head { padding-top: var(--ui-space-2); }
.ui-wizard-count { margin: 0; font-size: var(--ui-fs-label); color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-wizard-count b, .ui-wizard-count strong { font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.ui-wizard-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: uiwz; }
.ui-wizard-steps > li { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px; border-radius: var(--ui-r-pill); background: var(--ui-fill-1); font-size: var(--ui-fs-help); font-weight: var(--ui-fw-medium); color: var(--ui-muted); white-space: nowrap; counter-increment: uiwz; -webkit-tap-highlight-color: transparent; transition: background-color var(--ui-dur-2) var(--ui-ease), color var(--ui-dur-2) var(--ui-ease); }
.ui-wizard-steps > li::before { content: counter(uiwz); display: grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--ui-line); background: var(--ui-bg-card); font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); font-variant-numeric: tabular-nums; color: var(--ui-muted); transition: background-color var(--ui-dur-2) var(--ui-ease), color var(--ui-dur-2) var(--ui-ease), border-color var(--ui-dur-2) var(--ui-ease); }
.ui-wizard-steps > li.is-current { color: var(--ui-ink); background: rgba(var(--ui-accent-rgb), .11); }
.ui-wizard-steps > li.is-current::before { color: var(--ui-on-primary, #fff); background: var(--ui-accent); border-color: var(--ui-accent); }
.ui-wizard-steps > li.is-done { color: var(--ui-ok-ink); background: rgba(var(--ui-ok-rgb), .1); cursor: pointer; }
.ui-wizard-steps > li.is-done::before { content: ""; border-color: var(--ui-ok); background: var(--ui-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.ui-wizard-steps > li.is-done:hover { background: rgba(var(--ui-ok-rgb), .16); }
.ui-wizard-steps > li:focus:not(:focus-visible) { outline: none; }
.ui-wizard-steps > li:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-wizard-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-6); align-items: start; min-width: 0; }
.ui-wizard-body:not(.ui-mbody) { padding: var(--ui-space-5) var(--ui-wz-pad) var(--ui-space-6); }
.ui-wizard-body:has(> .ui-wizard-aside) { grid-template-columns: minmax(0, 1fr) var(--ui-wizard-aside-w); }
.ui-wizard-main { min-width: 0; }
.ui-wizard-main > .ui-wizard-step { max-width: 560px; }
.ui-wizard-step { min-width: 0; }
.ui-wizard-step[hidden] { display: none; }
.ui-wizard-step.is-in-next { animation: uiWzNext var(--ui-dur-3) var(--ui-ease-out); }
.ui-wizard-step.is-in-back { animation: uiWzBack var(--ui-dur-3) var(--ui-ease-out); }
@keyframes uiWzNext { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes uiWzBack { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.ui-wizard-title { margin: 0 0 6px; font-size: var(--ui-fs-modal); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); letter-spacing: var(--ui-ls-title); color: var(--ui-ink); }
.ui-wizard-title:focus { outline: none; }
.ui-wizard-desc { margin: 0 0 var(--ui-space-5); font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); color: var(--ui-muted); }
.ui-wizard-step .ui-field { margin-bottom: var(--ui-space-4); }
.ui-wizard-step > :last-child, .ui-wizard-step > .ui-field:last-child { margin-bottom: 0; }
.ui-wizard-reason { margin-top: var(--ui-space-4); }
.ui-wizard-reason[hidden] { display: none; }
/* Palco: a prévia ao vivo do que está sendo criado. */
.ui-wizard-aside { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); min-width: 0; min-height: 320px; padding: var(--ui-space-6) var(--ui-space-5); border-radius: var(--ui-r-xl); background: var(--ui-fill-1); }
.ui-wizard-aside-card { width: 100%; max-width: 260px; padding: var(--ui-space-4); border: 1px solid var(--ui-line); border-radius: var(--ui-r-xl); background: var(--ui-bg-card); }
.ui-wizard-aside-cap { margin: 0; font-size: var(--ui-fs-help); color: var(--ui-muted); text-align: center; }
.ui-wizard-aside-close, [data-ui-wizard-preview] { display: none; }
@media (min-width: 1100px) { .ui-wizard:not(.ui-mbox) .ui-wizard-aside { position: sticky; top: var(--ui-space-4); } }
/* Resumo do último passo */
.ui-wizard-summary { display: flex; flex-direction: column; margin: 0; border: 1px solid var(--ui-line); border-radius: var(--ui-r-lg); }
.ui-wizard-sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ui-space-4); min-width: 0; padding: var(--ui-space-3) var(--ui-space-4); }
.ui-wizard-sum-row + .ui-wizard-sum-row { border-top: 1px solid var(--ui-border-subtle); }
.ui-wizard-sum-row dt { flex: 0 0 auto; max-width: 45%; font-size: var(--ui-fs-label); font-weight: var(--ui-fw-regular); color: var(--ui-muted); }
.ui-wizard-sum-row dd { display: flex; align-items: baseline; justify-content: flex-end; gap: var(--ui-space-2); min-width: 0; margin: 0; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); color: var(--ui-ink); text-align: right; overflow-wrap: anywhere; }
.ui-wizard-sum-row .is-empty { color: var(--ui-muted); font-weight: var(--ui-fw-regular); }
/* Rodapé: [Cancelar] ......... [Voltar] [Continuar]; fixo embaixo na página. */
.ui-wizard-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ui-space-2); }
.ui-wizard-foot:not(.ui-mfoot) { position: sticky; bottom: 0; z-index: var(--ui-z-sticky); padding: var(--ui-space-4) var(--ui-wz-pad) calc(var(--ui-space-4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ui-border-subtle); border-radius: 0 0 var(--ui-r-xl) var(--ui-r-xl); background: var(--ui-bg-card); }
.ui-wizard-foot-start { margin-right: auto; }
.ui-wizard-foot [hidden] { display: none; }
/* Estados finais: criando (progresso real, ui-steps.is-live) e pronto. */
.ui-wizard-progress, .ui-wizard-done { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-3); min-width: 0; padding: var(--ui-space-12) var(--ui-wz-pad); text-align: center; animation: uiFadeIn var(--ui-dur-3) var(--ui-ease-out); }
.ui-wizard-progress[hidden], .ui-wizard-done[hidden] { display: none; }
.ui-wizard-progress .ui-steps { width: 100%; max-width: 360px; text-align: left; }
.ui-wizard-done-mark { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--ui-space-1); border-radius: 50%; color: var(--ui-ok-ink); background: rgba(var(--ui-ok-rgb), .12); animation: uiWzPop var(--ui-dur-4) var(--ui-ease-out) backwards; }
.ui-wizard-done-mark::before { content: ""; width: var(--ui-ic-xl); height: var(--ui-ic-xl); background: currentColor; -webkit-mask: var(--ui-ico-check) center / 24px no-repeat; mask: var(--ui-ico-check) center / 24px no-repeat; }
@keyframes uiWzPop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.ui-wizard-state-t { margin: 0; font-size: var(--ui-fs-h2); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); letter-spacing: var(--ui-ls-title); color: var(--ui-ink); }
.ui-wizard-state-t:focus { outline: none; }
.ui-wizard-state-d { max-width: 440px; margin: 0; font-size: var(--ui-fs-body-lg); line-height: var(--ui-lh-body); color: var(--ui-muted); }
.ui-wizard-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ui-space-2); margin-top: var(--ui-space-2); }
.ui-wizard-done > .ui-linkfield { width: 100%; max-width: 440px; }
.ui-wizard-scrim { position: fixed; inset: 0; z-index: calc(var(--ui-z-drawer) - 1); background: var(--ui-scrim); opacity: 0; pointer-events: none; transition: opacity calc(var(--ui-dur-4) * .75) var(--ui-ease-in); }
.ui-wizard-scrim.is-open { opacity: 1; pointer-events: auto; transition-duration: var(--ui-dur-4); transition-timing-function: var(--ui-ease-out); }
@media (max-width: 760px) {
    .ui-wizard { --ui-wz-pad: var(--ui-space-4); }
    .ui-wizard:has(> .ui-wizard-main):has(> .ui-wizard-aside) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "aside" "main" "foot"; }
    .ui-wizard > .ui-wizard-main { padding-right: var(--ui-wz-pad); }
    .ui-wizard > .ui-wizard-aside { margin: var(--ui-space-4) var(--ui-wz-pad) 0; }
    .ui-wizard-body:has(> .ui-wizard-aside) { grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-4); }
    .ui-wizard-aside { min-height: 0; padding: var(--ui-space-5) var(--ui-space-4); }
    .ui-wizard-aside.is-hide-sm { display: none; }
    /* Com o botão "Ver prévia": a prévia vira folha de baixo. */
    .ui-wizard:has([data-ui-wizard-preview]) .ui-wizard-aside { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ui-z-drawer); max-height: 85vh; max-height: 85dvh; margin: 0; overflow-y: auto; overscroll-behavior: contain; justify-content: flex-start; padding: var(--ui-space-5) var(--ui-space-4) calc(var(--ui-space-5) + env(safe-area-inset-bottom, 0px)); border: 1px solid var(--ui-line); border-bottom: 0; border-radius: var(--ui-r-2xl) var(--ui-r-2xl) 0 0; background: var(--ui-bg-raised); transform: translateY(100%); visibility: hidden; transition: transform calc(var(--ui-dur-4) * .75) var(--ui-ease-in), visibility 0s linear calc(var(--ui-dur-4) * .75); }
    .ui-wizard:has([data-ui-wizard-preview]) .ui-wizard-aside.is-open { transform: none; visibility: visible; transition: transform var(--ui-dur-4) var(--ui-ease-out), visibility 0s; }
    .ui-wizard:has([data-ui-wizard-preview]) .ui-wizard-aside-close { display: inline-flex; align-self: flex-end; }
    [data-ui-wizard-preview] { display: inline-flex; }
}
@media (max-width: 560px) {
    .ui-wizard-head { padding-top: var(--ui-space-3); }
    .ui-wizard-head > .ui-wizard-steps { display: none; }
    .ui-wizard-body:not(.ui-mbody) { padding: var(--ui-space-4); }
    .ui-wizard > .ui-wizard-main { padding-top: var(--ui-space-4); padding-bottom: var(--ui-space-4); }
    .ui-wizard-foot:not(.ui-mfoot) { padding-top: var(--ui-space-3); padding-bottom: calc(var(--ui-space-3) + env(safe-area-inset-bottom, 0px)); }
    .ui-wizard-foot > .ui-btn:not(.ui-btn-quiet):not(.ui-btn-link) { flex: 1 1 0; }
    .ui-wizard-foot-start { flex: 1 1 100%; margin: 0; order: 2; }
    .ui-wizard-progress, .ui-wizard-done { padding: var(--ui-space-8) var(--ui-wz-pad); }
}

/* ── Campo de link (ui-linkfield + window.uiLinkfield) ───────────────────────
   Endereço público com o começo fixo e o final editável, no MESMO contorno:
   [ dropecrm.com/g/ | minha-rede      ✓ Disponível  ⧉ ]. O ui-kit.js tira
   acento, deixa minúsculo, troca espaço e _ por hífen (o cursor fica no
   lugar), confere se está livre (data-check-url, 400 ms depois de parar;
   "Usar {sugestão}" quando já existe), acompanha o nome até a pessoa editar
   (data-ui-linkfield-source), copia o link inteiro e atualiza a prévia.
   Começo longo encolhe pela ESQUERDA. .is-readonly: só leitura (URL mono 13
   cortada no MEIO) + [Copiar link] [QR Code] [Abrir]. .is-plain: sem caixa. */
.ui-linkfield { position: relative; display: flex; align-items: center; min-width: 0; min-height: var(--ui-ctl-md); padding-right: 4px; background-color: var(--ui-field-bg); border: 1px solid var(--ui-ctl-line); border-radius: var(--ui-r-md); outline: 3px solid transparent; outline-offset: 0; cursor: text; transition: border-color var(--ui-dur-1) var(--ui-ease), outline-color var(--ui-dur-1) var(--ui-ease); }
.ui-linkfield:hover { border-color: var(--ui-ctl-line-hover); }
.ui-linkfield:focus-within { border-color: var(--ui-accent); outline-color: rgba(var(--ui-accent-rgb), .18); }
.ui-linkfield.is-invalid, .ui-linkfield.is-taken, .ui-field.is-invalid .ui-linkfield { border-color: var(--ui-danger); }
.ui-linkfield.is-invalid:focus-within, .ui-linkfield.is-taken:focus-within, .ui-field.is-invalid .ui-linkfield:focus-within { outline-color: rgba(var(--ui-danger-rgb), .18); }
.ui-linkfield.is-disabled { background-color: var(--ui-fill-1); border-color: var(--ui-line); cursor: not-allowed; }
.ui-linkfield-prefix { display: block; flex: 0 1 auto; min-width: 0; max-width: 58%; padding-left: 12px; font-size: var(--ui-fs-body); line-height: 20px; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; user-select: none; }
.ui-linkfield-prefix > bdi { direction: ltr; unicode-bidi: isolate; }
.ui-linkfield > .ui-input, .ui-linkfield-input { flex: 1 1 auto; width: auto; min-width: 72px; height: 38px; margin: 0; padding: 0 8px 0 1px; border: 0; border-radius: 0; background: transparent; color: var(--ui-ink); font: inherit; font-size: var(--ui-fs-body); line-height: 20px; outline: 0; }
.ui-linkfield > .ui-input:hover, .ui-linkfield > .ui-input:focus { border: 0; outline: 0; }
.ui-linkfield > .ui-input::placeholder, .ui-linkfield-input::placeholder { color: var(--ui-muted-2); opacity: 1; }
.ui-linkfield > .ui-input:disabled { background: transparent; cursor: not-allowed; color: var(--ui-muted); }
.ui-linkfield-status { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 0 6px; font-size: var(--ui-fs-help); font-weight: var(--ui-fw-medium); color: var(--ui-muted); white-space: nowrap; }
.ui-linkfield-status:empty { display: none; }
.ui-linkfield.is-checking .ui-linkfield-status::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: uiSpin .7s linear infinite; }
.ui-linkfield.is-ok .ui-linkfield-status { color: var(--ui-ok-ink); }
.ui-linkfield.is-ok .ui-linkfield-status::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ui-ico-check) center / 14px no-repeat; mask: var(--ui-ico-check) center / 14px no-repeat; }
.ui-linkfield.is-invalid .ui-linkfield-status, .ui-linkfield.is-taken .ui-linkfield-status { color: var(--ui-danger-ink); }
.ui-linkfield-copy { flex: 0 0 auto; }
.ui-linkfield-copy:empty::after { content: ""; width: var(--ui-ic-sm); height: var(--ui-ic-sm); background: currentColor; -webkit-mask: var(--ui-ico-copy) center / 16px no-repeat; mask: var(--ui-ico-copy) center / 16px no-repeat; }
.ui-linkfield-preview { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 6px; font-size: var(--ui-fs-help); line-height: var(--ui-lh-body); color: var(--ui-muted); }
.ui-linkfield-preview::before { content: ""; flex: 0 0 auto; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ui-ico-link) center / 14px no-repeat; mask: var(--ui-ico-link) center / 14px no-repeat; }
.ui-linkfield-url { display: flex; min-width: 0; font-family: var(--ui-mono); color: var(--ui-ink-2); white-space: nowrap; }
.ui-linkfield-url > .ui-lf-a { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-linkfield-url > .ui-lf-b { flex: 0 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Já cortado no JS: o começo (com as reticências) não encolhe mais; se faltar
   lugar, quem corta (no fim) é o caminho. */
.ui-linkfield-url > .ui-lf-a.is-cut { flex-shrink: 0; text-overflow: clip; }
.ui-linkfield-url > .ui-lf-a.is-cut + .ui-lf-b { flex-shrink: 1; min-width: 0; }
.ui-linkfield-preview .ui-linkfield-url { overflow: hidden; text-overflow: ellipsis; }
.ui-linkfield-open { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 2px 4px; border-radius: var(--ui-r-sm); color: var(--ui-accent-ink); font-weight: var(--ui-fw-medium); text-decoration: none; }
.ui-linkfield-open::after { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--ui-ico-external) center / 12px no-repeat; mask: var(--ui-ico-external) center / 12px no-repeat; }
.ui-linkfield-open:hover { color: var(--ui-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.ui-linkfield-open:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
.ui-linkfield-open[hidden] { display: none; }
.ui-error .ui-linkfield-use { margin-left: 4px; padding: 0 2px; height: auto; font-size: inherit; }
/* Só leitura: a URL inteira (mono 13, cortada no meio) + ações ao lado. */
.ui-linkfield.is-readonly { gap: var(--ui-space-2); padding: 4px 4px 4px 12px; background-color: var(--ui-fill-1); border-color: var(--ui-line); cursor: default; }
.ui-linkfield.is-readonly:hover { border-color: var(--ui-line); }
.ui-linkfield.is-readonly > .ui-linkfield-url { flex: 1 1 auto; font-size: var(--ui-fs-label); }
.ui-linkfield.is-readonly > .ui-btn { flex: 0 0 auto; }
.ui-linkfield.is-plain { min-height: 0; padding: 0; background: transparent; border: 0; outline: 0; }
@media (max-width: 640px) {
    .ui-linkfield:not(.is-readonly):not(.is-plain) { min-height: var(--ui-target-touch); }
    .ui-linkfield > .ui-input, .ui-linkfield-input { height: 42px; }
    .ui-linkfield-prefix { max-width: 46%; }
    .ui-linkfield-status > span { display: none; }
}
@media (pointer: coarse) { .ui-linkfield > .ui-input, .ui-linkfield-input { font-size: 16px; } }

/* Copiar ([data-ui-copy]): "Copiado" por 2 s no próprio botão, mesma largura. */
[data-ui-copy].is-copied, [data-ui-copy].is-copied:hover, .ui-linkfield-copy.is-copied, .ui-linkfield-copy.is-copied:hover { color: var(--ui-ok-ink); }
.ui-linkfield-copy.is-copied:empty::after { -webkit-mask-image: var(--ui-ico-check); mask-image: var(--ui-ico-check); }
[data-ui-copy].is-copied > svg { display: none; }
[data-ui-copy].is-copied::after { content: ""; order: -1; flex: 0 0 auto; width: var(--ui-ic-sm); height: var(--ui-ic-sm); background: currentColor; -webkit-mask: var(--ui-ico-check) center / 16px no-repeat; mask: var(--ui-ico-check) center / 16px no-repeat; }
.ui-btn-icon[data-ui-copy].is-copied::after { width: var(--ui-ic-md); height: var(--ui-ic-md); -webkit-mask-size: 18px; mask-size: 18px; }

/* ── Escolha com desenho, selo "Recomendado" e conteúdo do escolhido ─────── */
.ui-choice-tag { display: inline-flex; align-items: center; margin-left: var(--ui-space-2); padding: 2px var(--ui-space-2); line-height: 16px; border-radius: var(--ui-r-pill); background: rgba(var(--ui-accent-rgb), .11); color: var(--ui-accent-ink); font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); vertical-align: 1px; white-space: nowrap; }
.ui-choice.has-visual .ui-choice-body { flex: 1 1 auto; }
.ui-choice-visual { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 32px; margin-left: auto; color: var(--ui-muted-2); transition: color var(--ui-dur-1) var(--ui-ease); }
.ui-choice-visual svg { width: 100%; height: 100%; }
.ui-choice:has(> input:checked) .ui-choice-visual { color: var(--ui-accent-ink); }
.ui-choice-more { display: none; margin-top: var(--ui-space-3); cursor: default; }
.ui-choice:has(> input:checked) .ui-choice-more { display: block; animation: uiFadeIn var(--ui-dur-2) var(--ui-ease-out); }
.ui-choices.is-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-choices.is-grid > .ui-choice { height: 100%; }
@media (max-width: 760px) { .ui-choices.is-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Passos ao vivo (ui-steps.is-live): progresso de uma operação ────────── */
.ui-steps.is-live > li { color: var(--ui-muted); }
.ui-steps.is-live > li::before { background: var(--ui-fill-2); color: var(--ui-muted); }
.ui-steps.is-live > li.is-current { color: var(--ui-ink); font-weight: var(--ui-fw-medium); }
.ui-steps.is-live > li.is-current::before { content: ""; box-sizing: border-box; background: transparent; border: 2px solid var(--ui-accent); border-right-color: transparent; animation: uiSpin .8s linear infinite; }
.ui-steps.is-live > li.is-done { color: var(--ui-ink-2); }
.ui-steps.is-live > li.is-done::before { content: ""; background: var(--ui-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ui-steps.is-live > li.is-error { color: var(--ui-danger-ink); }
.ui-steps.is-live > li.is-error::before { content: ""; background: var(--ui-danger) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ui-steps-err { display: block; margin-top: 2px; font-size: var(--ui-fs-help); font-weight: var(--ui-fw-regular); color: var(--ui-ink-2); }

/* ── Barra de salvar (ui-savebar + form[data-ui-savebar]) ────────────────────
   Aparece embaixo quando o formulário muda: "Alterações não salvas"
   [Descartar] [Salvar]. Sair com mudança pendente pede confirmação. */
.ui-savebar { position: fixed; left: 50%; bottom: var(--ui-space-4); z-index: var(--ui-z-popover); display: flex; align-items: center; gap: var(--ui-space-2); width: min(560px, calc(100% - 32px)); padding: var(--ui-space-2) var(--ui-space-2) var(--ui-space-2) var(--ui-space-4); border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-pill); background: var(--ui-bg-raised); color: var(--ui-ink); opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity calc(var(--ui-dur-3) * .75) var(--ui-ease-in), transform calc(var(--ui-dur-3) * .75) var(--ui-ease-in); }
.ui-savebar.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; transition-duration: var(--ui-dur-3); transition-timing-function: var(--ui-ease-out); }
.ui-savebar-txt { display: inline-flex; align-items: center; gap: var(--ui-space-2); flex: 1 1 auto; min-width: 0; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); }
.ui-savebar-txt::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-warn); }
@media (max-width: 560px) {
    .ui-savebar { left: var(--ui-space-3); right: var(--ui-space-3); width: auto; bottom: calc(var(--ui-space-3) + env(safe-area-inset-bottom, 0px)); border-radius: var(--ui-r-xl); transform: translateY(16px); }
    .ui-savebar.is-on { transform: none; }
    .ui-savebar-txt { font-size: var(--ui-fs-label); }
}

/* ── Moldura de prévia (ui-phone) ────────────────────────────────────────────
   Celular 300 x 600 (escala por --ui-phone-scale), raio 36, borda 1 px, tela
   sempre clara (é a prévia do que o contato vê). Vistas por
   [data-ui-phone-view] trocadas com um ui-seg[data-ui-phone-switch]. */
.ui-phone { --ui-phone-scale: 1; position: relative; flex: 0 0 auto; width: calc(300px * var(--ui-phone-scale)); height: calc(600px * var(--ui-phone-scale)); max-width: 100%; padding: calc(10px * var(--ui-phone-scale)); border: 1px solid var(--ui-line-strong); border-radius: calc(36px * var(--ui-phone-scale)); background: var(--ui-bg-card); }
.ui-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: calc(28px * var(--ui-phone-scale)); background: var(--ui-phone-bg, #FFFFFF); color: var(--ui-phone-ink, #111B21); color-scheme: light; font-size: 13px; }
.ui-phone-screen > [data-ui-phone-view] { height: 100%; overflow-y: auto; scrollbar-width: none; }
.ui-phone-screen > [data-ui-phone-view]::-webkit-scrollbar { display: none; }
.ui-phone-screen > [data-ui-phone-view][hidden] { display: none; }
.ui-phone-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-3); min-width: 0; }

/* ── Painel de seção (ui-panel) ──────────────────────────────────────────────
   A superfície da família nova (raio 16, como ui-kpi, ui-table-wrap, ui-attn
   e ui-object-card): cabeçalho com título + sub + ações, corpo e rodapé
   opcional. Sem overflow:hidden (menus saem). .is-flush = corpo sem padding
   (lista ou tabela dentro). O .ui-card antigo (raio 10) fica para as telas
   que já o usam. */
.ui-panel { position: relative; min-width: 0; background: var(--ui-bg-card); border: 1px solid var(--ui-border); border-radius: var(--ui-r-xl); color: var(--ui-ink); }
.ui-panel-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--ui-space-2) var(--ui-space-3); padding: var(--ui-space-5) var(--ui-space-5) 0; }
.ui-panel-htxt { min-width: 0; flex: 1 1 auto; }
.ui-panel-title { margin: 0; font-size: var(--ui-fs-body-lg); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); letter-spacing: -.01em; color: var(--ui-ink); }
.ui-panel-sub { margin: 4px 0 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-snug); color: var(--ui-muted); }
.ui-panel-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-space-2); flex: 0 0 auto; }
.ui-panel-body { min-width: 0; padding: var(--ui-space-4) var(--ui-space-5) var(--ui-space-5); }
.ui-panel.is-flush > .ui-panel-body { padding: 0; }
.ui-panel.is-flush > .ui-panel-head + .ui-panel-body { padding-top: var(--ui-space-3); }
.ui-panel-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-space-2) var(--ui-space-3); padding: var(--ui-space-3) var(--ui-space-5); border-top: 1px solid var(--ui-border-subtle); }
@media (max-width: 560px) {
    .ui-panel-head { padding: var(--ui-space-4) var(--ui-space-4) 0; }
    .ui-panel-body { padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-4); }
    .ui-panel-foot { padding: var(--ui-space-3) var(--ui-space-4); }
}

/* ── Vazio de primeiro uso (ui-empty.is-hero) + modelos ──────────────────────
   1 por página: desenho (até 480 x 120) + título 20 + texto 15 + ações em
   coluna + "Comece por um modelo" (cartões-link .ui-choice.is-link). */
.ui-empty.is-hero { padding: var(--ui-space-12) 40px 40px; background: var(--ui-bg-card); border: 1px solid var(--ui-border); border-radius: var(--ui-r-xl); }
.ui-empty-art { display: flex; align-items: center; justify-content: center; gap: var(--ui-space-4); width: 100%; max-width: 480px; min-height: 64px; margin: 0 auto var(--ui-space-6); }
.ui-empty.is-hero .ui-empty-t { font-size: 1.25rem; margin-bottom: var(--ui-space-2); }
.ui-empty.is-hero > p { max-width: 56ch; font-size: var(--ui-fs-body-lg); }
.ui-empty.is-hero .ui-empty-actions { flex-direction: column; align-items: center; }
.ui-empty-templates { margin-top: var(--ui-space-8); padding-top: var(--ui-space-6); border-top: 1px solid var(--ui-border-subtle); text-align: left; }
.ui-empty-templates-t { margin: 0 0 var(--ui-space-3); font-size: var(--ui-fs-label); font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
/* Cartão-link: escolha que navega (sem rádio). */
.ui-choice.is-link { position: relative; flex-direction: column; gap: var(--ui-space-3); color: var(--ui-ink); text-decoration: none; }
.ui-choice.is-link:hover { border-color: var(--ui-ctl-line); background: var(--ui-fill-1); color: var(--ui-ink); }
.ui-choice.is-link:focus:not(:focus-visible) { outline: none; }
.ui-choice.is-link:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-choice.is-link > .ui-tile { flex: 0 0 auto; }
.ui-choice.is-link.is-disabled, .ui-choice.is-link[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
@media (max-width: 560px) {
    .ui-empty.is-hero { padding: var(--ui-space-8) var(--ui-space-4) var(--ui-space-6); }
    .ui-empty.is-hero .ui-empty-t { font-size: var(--ui-fs-modal); }
    .ui-empty.is-hero .ui-empty-actions > .ui-btn { width: 100%; }
}
@media (max-width: 760px) { .ui-choice.is-link { flex-direction: row; } }

/* ── Lista de consequências (ui-mlist): "o que acontece" no modal destrutivo ── */
.ui-mlist { display: flex; flex-direction: column; gap: var(--ui-space-2); margin: 0; padding: 0; list-style: none; }
.ui-mlist > li { position: relative; padding-left: 18px; font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); color: var(--ui-ink-2); }
.ui-mlist > li::before { content: ""; position: absolute; left: 5px; top: .7em; width: 4px; height: 4px; border-radius: 50%; background: var(--ui-muted-2); }
.ui-mlist:not(:last-child) { margin-bottom: var(--ui-space-5); }

/* ── Passo com ação (checklist "Primeiros passos") ──────────────────────────
   <li class="is-current"><span class="ui-steps-txt">..</span><a class="ui-btn ui-btn-link ui-btn-sm ui-steps-act">..</a></li> */
.ui-steps > li > .ui-steps-txt { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.ui-steps > li > .ui-steps-act { flex: 0 0 auto; margin-top: calc((24px - var(--ui-btn-h, 32px)) / 2); margin-bottom: calc((24px - var(--ui-btn-h, 32px)) / 2); }
.ui-steps > li.is-done > .ui-steps-act { display: none; }
.ui-steps > li.is-done > .ui-steps-txt { color: var(--ui-muted); }
/* Passo feito = check (no lugar do número), em --ui-ok-ink sobre o verde suave.
   Lista vertical e em linha; os cartões (.is-cards) e o .is-live têm o deles. */
.ui-steps:not(.is-live):not(.is-cards) > li.is-done { position: relative; }
.ui-steps:not(.is-live):not(.is-cards) > li.is-done::after { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; background: var(--ui-ok-ink); -webkit-mask: var(--ui-ico-check) center / 14px no-repeat; mask: var(--ui-ico-check) center / 14px no-repeat; pointer-events: none; }
.ui-steps.is-inline:not(.is-live) > li.is-done::after { top: 50%; transform: translateY(-50%); }
.ui-steps:not(.is-live):not(.is-cards) > li.is-done::before { color: transparent; }

/* ── Gaveta larga (ui-modal-drawer): formulário longo e editor com prévia ── */
.ui-modal-drawer.ui-modal-lg .modal-dialog { max-width: 640px; }
.ui-modal-drawer.ui-modal-wide .modal-dialog { max-width: 960px; }
@media (max-width: 560px) { .ui-modal-drawer.ui-modal-lg .modal-dialog, .ui-modal-drawer.ui-modal-wide .modal-dialog { max-width: none; } }

/* ── QR Code local (ui-qr + window.uiQr) ─────────────────────────────────────
   <figure class="ui-qr" data-ui-qr="https://..." data-ui-qr-name="Nome"></figure>
   Gerado no navegador pela biblioteca do projeto (qrcode-generator, carregada
   sob demanda): fundo SEMPRE branco (também no escuro) para a câmera ler. */
.ui-qr { --ui-qr-size: 240px; display: inline-flex; flex-direction: column; align-items: center; gap: var(--ui-space-2); max-width: 100%; margin: 0; }
.ui-qr-box { display: grid; place-items: center; width: calc(var(--ui-qr-size) + 24px); max-width: 100%; aspect-ratio: 1 / 1; padding: var(--ui-space-3); border: 1px solid var(--ui-line); border-radius: var(--ui-r-lg); background: #FFFFFF; }
.ui-qr-box svg { display: block; width: 100%; height: 100%; }
.ui-qr.is-loading .ui-qr-box { background: var(--ui-fill-2); }
.ui-qr-name { max-width: var(--ui-qr-size); font-size: var(--ui-fs-label); font-weight: var(--ui-fw-medium); color: var(--ui-ink-2); text-align: center; overflow-wrap: anywhere; }
.ui-qr-name:empty { display: none; }
.ui-qr.is-sm { --ui-qr-size: 160px; }
.ui-qr-err { padding: var(--ui-space-3); font-size: var(--ui-fs-help); line-height: var(--ui-lh-snug); color: #3B4A54; text-align: center; }

/* ── Prévia do WhatsApp (ui-wa-*) dentro do ui-phone ─────────────────────────
   Cores nativas do app (regra da casa para prévias de WhatsApp), sempre
   claras: o cliente vê o que o contato vai ver. Tokens --ui-wa-*. */
:root {
    --ui-wa-head-bg: #008069; --ui-wa-head-ink: #FFFFFF;
    --ui-wa-chat-bg: #EFEAE2; --ui-wa-in-bg: #FFFFFF; --ui-wa-out-bg: #D9FDD3;
    --ui-wa-text: #111B21; --ui-wa-meta: #667781; --ui-wa-link: #027EB5; --ui-wa-sys-bg: #FFFFFF;
    --ui-wa-read: #53BDEB;
    --ui-phone-bg: #FFFFFF; --ui-phone-ink: #111B21;
    /* Prévia do post do Telegram (DS-4, pedido SC4-04): cores do app no tema
       claro, iguais no claro e no escuro do portal. Link e botão escurecidos
       para AA sobre o cartão branco. */
    --ui-tg-chat-bg: #DCE6EE; --ui-tg-card-bg: #FFFFFF; --ui-tg-text: #000000;
    --ui-tg-btn-bg: #E8F1F8; --ui-tg-btn-ink: #1B6FA8;
    --ui-tg-link: #1B6FA8; --ui-tg-meta: #6E7B87;
    --ui-tg-sys-bg: rgba(0, 0, 0, .2); --ui-tg-line: rgba(0, 0, 0, .08);
    --ui-ico-wa-ticks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 6l3 3 6-7.5M7 8.2l.8.8 6-7.5'/%3E%3C/svg%3E");
}
.ui-wa-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--ui-wa-head-bg); color: var(--ui-wa-head-ink); }
.ui-wa-head-av { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: rgba(255, 255, 255, .25); font-size: 13px; font-weight: 600; }
.ui-wa-head-av > img { width: 100%; height: 100%; object-fit: cover; }
.ui-wa-head-txt { display: flex; flex-direction: column; min-width: 0; }
.ui-wa-head-name { font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-wa-head-sub { font-size: 11px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-wa-chat { display: flex; flex-direction: column; gap: 4px; min-height: 100%; padding: 10px 14px 14px; background-color: var(--ui-wa-chat-bg); background-image: radial-gradient(rgba(17, 27, 33, .05) 1px, transparent 1.2px); background-size: 14px 14px; color: var(--ui-wa-text); }
.ui-wa-sys { align-self: center; max-width: 85%; margin: 6px 0; padding: 4px 10px; border-radius: 8px; background: var(--ui-wa-sys-bg); color: var(--ui-wa-meta); font-size: 11px; text-align: center; }
.ui-wa-bubble { position: relative; align-self: flex-start; max-width: 85%; padding: 6px 8px 4px; border-radius: 8px; border-top-left-radius: 0; background: var(--ui-wa-in-bg); color: var(--ui-wa-text); font-size: 13px; line-height: 1.38; overflow-wrap: anywhere; }
.ui-wa-text { display: block; white-space: pre-wrap; }
.ui-wa-bubble::before { content: ""; position: absolute; top: 0; left: -7px; width: 8px; height: 10px; background: inherit; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.ui-wa-bubble.is-out { align-self: flex-end; border-top-left-radius: 8px; border-top-right-radius: 0; background: var(--ui-wa-out-bg); }
.ui-wa-bubble.is-out::before { left: auto; right: -7px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.ui-wa-bubble.is-cont { border-radius: 8px; }
.ui-wa-bubble.is-cont::before { display: none; }
.ui-wa-bubble-time { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 2px; font-size: 11px; line-height: 15px; color: var(--ui-wa-meta); white-space: nowrap; }
.ui-wa-bubble-time.is-read::after, .ui-wa-bubble-time.is-delivered::after { content: ""; width: 16px; height: 11px; background: currentColor; -webkit-mask: var(--ui-ico-wa-ticks) center / 16px 11px no-repeat; mask: var(--ui-ico-wa-ticks) center / 16px 11px no-repeat; }
.ui-wa-bubble-time.is-read::after { background: var(--ui-wa-read); }
.ui-wa-bubble-media { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 4px; overflow: hidden; border-radius: 6px; background: rgba(17, 27, 33, .08); color: var(--ui-wa-meta); }
.ui-wa-bubble-media > img { width: 100%; height: 100%; object-fit: cover; }
.ui-wa-bubble-doc { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; padding: 8px; border-radius: 6px; background: rgba(17, 27, 33, .05); font-size: 12px; }
.ui-wa-linkcard { display: flex; flex-direction: column; margin: -2px -4px 6px; overflow: hidden; border-radius: 6px; background: rgba(17, 27, 33, .05); }
.ui-wa-linkcard-img { width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; background: rgba(17, 27, 33, .08); }
.ui-wa-linkcard-txt { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; }
.ui-wa-linkcard-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12.5px; font-weight: 600; color: var(--ui-wa-text); }
.ui-wa-linkcard-d { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 11.5px; color: var(--ui-wa-meta); }
.ui-wa-linkcard-u { font-size: 11px; color: var(--ui-wa-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-wa-btns { display: flex; flex-direction: column; gap: 2px; align-self: flex-start; width: 85%; }
.ui-wa-bubble.is-out + .ui-wa-btns { align-self: flex-end; }
.ui-wa-btn { padding: 8px; border-radius: 8px; background: var(--ui-wa-in-bg); color: var(--ui-wa-link); font-size: 13px; font-weight: 500; text-align: center; }

/* ── Acabamentos (DS-3): select, switch, checkbox, filtro ────────────────── */
/* Dica (data-ui-tip) escondida não ocupa espaço: sem isso, a dica de um
   item perto da borda direita criava rolagem lateral no celular estreito. */
[data-ui-tip]:not(:hover):not(:focus-visible)::before { width: 0; height: 0; padding: 0; overflow: hidden; }
/* Select com lista própria: mesma fonte e altura do campo (44 no celular),
   hover neutro como o menu e marcado em texto legível (AA). */
.ui-cselect-btn { font-size: var(--ui-fs-body); }
.ui-cselect-opt { font-size: var(--ui-fs-body); border-radius: var(--ui-r-sm); }
.ui-cselect-opt.is-active { background: var(--ui-fill-2); }
.ui-cselect-opt[aria-selected="true"] { color: var(--ui-accent-ink); font-weight: var(--ui-fw-medium); }
@media (max-width: 640px) {
    .ui-cselect:not(.ui-cselect-sm) .ui-cselect-btn { min-height: var(--ui-target-touch); }
    .ui-cselect-opt { min-height: 44px; align-items: center; }
}
/* Switch esperando o servidor: trilho esmaece e um spinner aparece ao lado. */
.ui-switch.is-loading, .ui-switch[aria-busy="true"] { cursor: progress; pointer-events: none; }
.ui-switch.is-loading .ui-switch-track, .ui-switch[aria-busy="true"] .ui-switch-track { opacity: .55; }
.ui-switch.is-loading::after, .ui-switch[aria-busy="true"]::after { content: ""; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ui-muted); border-right-color: transparent; animation: uiSpin .7s linear infinite; }
/* Switch solto pequeno (par do ui-switch-sm) */
.ui-toggle.ui-toggle-sm { width: 32px; height: 20px; }
.ui-toggle.ui-toggle-sm::after { width: 14px; height: 14px; }
.ui-toggle.ui-toggle-sm:checked::after { transform: translateX(12px); }
.ui-toggle.ui-toggle-sm:checked:active:not(:disabled)::after { transform: translateX(12px) scaleX(1.18); }
/* Checkbox/radio com erro (ex.: aceite obrigatório) */
.ui-checkbox[aria-invalid="true"], .ui-radio[aria-invalid="true"], .ui-field.is-invalid .ui-checkbox:not(:checked), .ui-field.is-invalid .ui-radio:not(:checked) { border-color: var(--ui-danger); }
/* Pílula de filtro: 36 no celular; fileira que rola (sem quebrar); pílula
   com menu (seta) e filtro aplicado com X para tirar. */
@media (max-width: 640px) { .ui-pill { height: 36px; } }
.ui-pills.is-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ui-pills.is-scroll::-webkit-scrollbar { display: none; }
.ui-pills.is-scroll > .ui-pill { flex: 0 0 auto; }
/* Trilho rolável (pílulas, abas): degradê de 24 px na borda que ainda tem
   conteúdo. O ui-kit.js liga .is-overflow-start/-end conforme a rolagem. */
.ui-pills.is-overflow-end, .ui-tabs.is-overflow-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
.ui-pills.is-overflow-start, .ui-tabs.is-overflow-start { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent); }
.ui-pills.is-overflow-start.is-overflow-end, .ui-tabs.is-overflow-start.is-overflow-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.ui-pill[aria-haspopup]::after { content: ""; flex: 0 0 auto; width: 14px; height: 14px; margin-right: -2px; background: currentColor; opacity: .7; -webkit-mask: var(--ui-ico-chev-down) center / 14px no-repeat; mask: var(--ui-ico-chev-down) center / 14px no-repeat; transition: transform var(--ui-dur-2) var(--ui-ease-out); }
.ui-pill[aria-haspopup][aria-expanded="true"]::after { transform: rotate(180deg); }
span.ui-pill { cursor: default; }
span.ui-pill:active { transform: none; }
.ui-pill.is-applied { padding-right: 6px; background: rgba(var(--ui-accent-rgb), .09); border-color: rgba(var(--ui-accent-rgb), .3); color: var(--ui-accent-ink); }
.ui-pill-x { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background-color var(--ui-dur-1) var(--ui-ease); }
.ui-pill-x::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--ui-ico-x) center / 12px no-repeat; mask: var(--ui-ico-x) center / 12px no-repeat; }
.ui-pill-x:hover { background: rgba(var(--ui-accent-rgb), .14); }
.ui-pill-x:focus:not(:focus-visible) { outline: none; }
.ui-pill-x:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
    .ui-chart > canvas, .ui-chart-tip, .ui-table tbody td, .ui-th-sort, .ui-th-sort::after, .ui-seg-btn, .ui-wizard-steps > li, .ui-wizard-steps > li::before, .ui-object-card, .ui-linkfield, .ui-pill[aria-haspopup]::after, .ui-meter-bar, .ui-meter-seg::after, .ui-attn-item, .ui-savebar, .ui-wizard-aside, .ui-wizard-scrim, .ui-choice-visual, .ui-choice.is-link { transition: none; }
    .ui-wizard-step.is-in-next, .ui-wizard-step.is-in-back, .ui-table-bulk, [data-ui-view-panel]:not([hidden]), .ui-wizard-progress, .ui-wizard-done, .ui-wizard-done-mark, .ui-choice-more { animation: none; }
    .ui-table tbody.is-loading { animation-duration: 1ms; }
    .ui-steps.is-live > li.is-current::before { animation-duration: 2.4s; }
}

/* ════════════════════════════════════════════════════════════════════════════
   DS-4 (v1.3, 01/10/2026): componentes do Afiliados (docs/ux/AFILIADOS.md,
   seção 11). ui-flow (caminho vivo), ui-chipfield (palavras com limite),
   ui-checkgrid (escolha múltipla com busca e limite) e ui-splitbtn (ação +
   escolha). Documentação em docs/DESIGN-SYSTEM.md (v1.3); vitrine na seção
   "Afiliados" de tests/e2e/ds_kitchen.php. Regras de sempre: só tokens, sem
   sombra, sem !important, movimento só em opacity/transform.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    --ui-flow-gap: 56px;          /* vão entre colunas (por onde passam as linhas) */
    --ui-flow-node-h: 56px;       /* nó de 2 linhas */
    --ui-flow-media: 28px;        /* logo da loja / foto do grupo */
    --ui-flow-line-w: 1.5px;
    --ui-chip-h: 28px;            /* chip dentro do campo */
    --ui-checkgrid-cols: 3;
}

/* ── Caminho vivo (ui-flow) ──────────────────────────────────────────────────
   .ui-panel.ui-flow > .ui-flow-cols (role=list) > .ui-flow-col (role=listitem)
   > .ui-flow-col-t + .ui-flow-node... As linhas são um <svg> absoluto que o
   ui-kit.js desenha a partir de data-ui-flow-id / data-ui-flow-to. */
.ui-flow-cols { --ui-flow-n: 3; position: relative; display: grid; grid-template-columns: repeat(var(--ui-flow-n), minmax(0, 1fr)); gap: var(--ui-space-3) var(--ui-flow-gap); align-items: start; padding: var(--ui-space-4) var(--ui-space-5) var(--ui-space-5); }
/* nth-of-type: o <svg> das linhas é outra tag e não conta como coluna. */
.ui-flow-cols:has(> .ui-flow-col:nth-of-type(4)) { --ui-flow-n: 4; }
.ui-flow-cols:not(:has(> .ui-flow-col:nth-of-type(3))) { --ui-flow-n: 2; }
.ui-flow-col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--ui-space-2); min-width: 0; }
.ui-flow-col-t { margin: 0 0 var(--ui-space-1); font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); }
.ui-flow-svg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* Linha em repouso: neutra a .6 (o pacote precisa se destacar dela). Só filhos diretos:
   o pacote (.ui-flow-pkt) tem as próprias regras. */
.ui-flow-svg > path { fill: none; stroke: var(--ui-ctl-line); stroke-width: var(--ui-flow-line-w); stroke-linecap: round; opacity: .6; transition: opacity var(--ui-dur-2) var(--ui-ease); }
.ui-flow-svg > circle { fill: var(--ui-bg-card); stroke: var(--ui-ctl-line); stroke-width: var(--ui-flow-line-w); transition: opacity var(--ui-dur-2) var(--ui-ease); }
/* Interrompida (problema na origem): tracejada no tom e cortada 12 px antes do destino (o ui-kit.js
   encurta a curva e não desenha a bolinha de chegada: "não chega", sem x nem ícone). Nunca anima. */
.ui-flow-svg > .is-warn { stroke: var(--ui-warn); stroke-dasharray: 4 4; opacity: .9; }
.ui-flow-svg > .is-danger { stroke: var(--ui-danger); stroke-dasharray: 4 4; opacity: .9; }
/* Pausada: pontilhada e quase apagada. */
.ui-flow-svg > .is-off { stroke-dasharray: 2 5; opacity: .35; }
.ui-flow-svg > circle.is-warn, .ui-flow-svg > circle.is-danger, .ui-flow-svg > circle.is-off { stroke-dasharray: none; }
/* prefers-reduced-motion: sem pacote; a ligação viva ganha só a bolinha de origem no accent (sinal parado). */
.ui-flow-svg > circle.is-live { fill: var(--ui-accent); stroke: var(--ui-accent); }
/* Pacote: ponto de 5 px no accent com contorno na cor do card (lê sobre a linha, no claro e no escuro).
   O movimento é SMIL (animateMotion/mpath) e o sumiço na pausa é animate r: nada de opacity por CSS no
   círculo, que sobrescreveria o valor animado. */
.ui-flow-svg .ui-flow-pkt circle { fill: var(--ui-accent); stroke: var(--ui-bg-card); stroke-width: 2px; }
.ui-flow-svg .ui-flow-pkt { transition: opacity var(--ui-dur-2) var(--ui-ease); }
/* Passar o mouse (ou o foco) num nó realça os caminhos dele; o resto apaga (pacotes fora da corrente somem). */
.ui-flow.is-hl .ui-flow-svg > path:not(.is-hl), .ui-flow.is-hl .ui-flow-svg > circle:not(.is-hl) { opacity: .14; }
.ui-flow.is-hl .ui-flow-svg > .ui-flow-pkt:not(.is-hl) { opacity: 0; }
.ui-flow.is-hl .ui-flow-svg > path.is-hl { opacity: 1; }
.ui-flow.is-hl .ui-flow-svg > path.is-hl:not(.is-warn):not(.is-danger), .ui-flow.is-hl .ui-flow-svg > circle.is-hl:not(.is-warn):not(.is-danger) { stroke: var(--ui-accent); }
@media (prefers-reduced-motion: reduce) { .ui-flow-svg .ui-flow-pkt { display: none; } }

/* Nó: 56 px (2 linhas), raio 12, borda 1 px. <a> inteiro OU <div> com a
   .ui-flow-name como link (cobre o nó) e ação própria (.ui-flow-act). */
.ui-flow-node { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "m t n" ". a a"; align-items: center; min-width: 0; min-height: var(--ui-flow-node-h); padding: var(--ui-space-2) var(--ui-space-3); background: var(--ui-bg-card); border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); color: var(--ui-ink); text-decoration: none; transition: border-color var(--ui-dur-1) var(--ui-ease), background-color var(--ui-dur-1) var(--ui-ease); }
.ui-flow-node[hidden] { display: none; }
a.ui-flow-node:hover, .ui-flow-node:has(a.ui-flow-name):hover { border-color: var(--ui-ctl-line); color: var(--ui-ink); }
a.ui-flow-node:focus:not(:focus-visible) { outline: none; }
a.ui-flow-node:focus-visible, .ui-flow-node:has(a.ui-flow-name:focus-visible) { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
a.ui-flow-name { color: inherit; text-decoration: none; outline: none; }
a.ui-flow-name:hover { color: inherit; }
a.ui-flow-name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ui-flow-media { grid-area: m; margin-right: var(--ui-space-3); display: grid; place-items: center; flex: 0 0 auto; width: var(--ui-flow-media); height: var(--ui-flow-media); overflow: hidden; border-radius: var(--ui-r-sm); background: var(--ui-fill-2); color: var(--ui-ink-2); font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); }
.ui-flow-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-flow-media svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.ui-flow-media.is-round { border-radius: 50%; }
/* Logo de loja: fundo claro fixo (a logo é feita para fundo branco, também no escuro) e sem corte. */
.ui-flow-media.is-logo { background: var(--ui-phone-bg); border: 1px solid var(--ui-border-subtle); color: var(--ui-phone-ink); }
.ui-flow-media.is-logo img { object-fit: contain; padding: 3px; }
/* Foto de verdade ou iniciais com tom: um .ui-avatar dentro da mídia (foto redonda de grupo),
   do tamanho da mídia. Em .is-avatars, 2 avatares de 24 sobrepostos (a rede e os 2 primeiros grupos). */
.ui-flow-media > .ui-avatar { --ui-av-size: var(--ui-flow-media); }
.ui-flow-media.is-avatars { width: auto; min-width: var(--ui-flow-media); overflow: visible; border-radius: 0; background: transparent; }
.ui-flow-media.is-avatars .ui-avatars > .ui-avatar { --ui-av-size: 24px; }
.ui-flow-media .ui-avatar svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.ui-flow-txt { grid-area: t; display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ui-flow-name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-semibold); line-height: 20px; color: var(--ui-ink); }
.ui-flow-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 2px var(--ui-space-2); min-width: 0; font-size: var(--ui-fs-help); line-height: var(--ui-lh-snug); color: var(--ui-muted); }
.ui-flow-sub > span { min-width: 0; }
/* Estado = ponto + palavra (nunca só cor). O tom vem do nó (.is-ok...) ou do
   próprio estado. Também aceita .ui-badge. */
.ui-flow-state { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-weight: var(--ui-fw-medium); color: var(--ui-ink-2); white-space: nowrap; }
.ui-flow-state::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--ui-muted-2); }
.ui-flow-node.is-ok .ui-flow-state, .ui-flow-state.is-ok { color: var(--ui-ok-ink); }
.ui-flow-node.is-ok .ui-flow-state::before, .ui-flow-state.is-ok::before { background: var(--ui-ok); }
.ui-flow-node.is-warn .ui-flow-state, .ui-flow-state.is-warn { color: var(--ui-warn-ink); }
.ui-flow-node.is-warn .ui-flow-state::before, .ui-flow-state.is-warn::before { background: var(--ui-warn); }
.ui-flow-node.is-danger .ui-flow-state, .ui-flow-state.is-danger { color: var(--ui-danger-ink); }
.ui-flow-node.is-danger .ui-flow-state::before, .ui-flow-state.is-danger::before { background: var(--ui-danger); }
.ui-flow-node.is-off .ui-flow-state, .ui-flow-state.is-off { color: var(--ui-muted); }
.ui-flow-node.is-info .ui-flow-state, .ui-flow-state.is-info { color: var(--ui-info-ink); }
.ui-flow-node.is-info .ui-flow-state::before, .ui-flow-state.is-info::before { background: var(--ui-info); }
.ui-flow-node.is-live .ui-flow-state::before { animation: uiFlowPulse 2s var(--ui-ease-out) infinite; }
@keyframes uiFlowPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
/* Número do nó (novas, enviadas hoje): à direita, tabular, legenda opcional. */
.ui-flow-n { grid-area: n; margin-left: var(--ui-space-3); display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; font-size: var(--ui-fs-title); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); font-variant-numeric: tabular-nums; color: var(--ui-ink); }
.ui-flow-n small { font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-regular); line-height: var(--ui-lh-snug); color: var(--ui-muted); }
/* Ação do nó (Reconectar, Ver motivo): fica acima do link que cobre o nó. */
.ui-flow-act { position: relative; z-index: 1; flex: 0 0 auto; }
.ui-flow-node > .ui-flow-act { grid-area: a; justify-self: start; margin-top: var(--ui-space-2); }
.ui-flow-txt > .ui-flow-act { align-self: flex-start; margin-top: 2px; }
.ui-flow-txt > .ui-flow-act.ui-btn-link, .ui-flow-sub > .ui-flow-act.ui-btn-link { height: auto; min-height: 0; padding: 0; font-size: inherit; line-height: inherit; }
.ui-flow-sub > .ui-flow-act { margin-left: var(--ui-space-1); }
.ui-flow-txt > .ui-flow-act.ui-btn-link { font-size: var(--ui-fs-help); }
/* Vínculo em texto ("Vem de Achadinhos ML"): só para leitor de tela no
   desktop (a linha mostra), visível no celular (a linha some). */
.ui-flow-via { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Estados do nó */
.ui-flow-node.is-dashed { border-style: dashed; }
.ui-flow-node.is-warn { border-style: dashed; border-color: rgba(var(--ui-warn-rgb), .6); background: color-mix(in srgb, var(--ui-warn) 5%, var(--ui-bg-card)); }
.ui-flow-node.is-danger { border-style: dashed; border-color: rgba(var(--ui-danger-rgb), .55); background: color-mix(in srgb, var(--ui-danger) 5%, var(--ui-bg-card)); }
.ui-flow-node.is-off { border-style: dashed; border-color: var(--ui-ctl-line); }
.ui-flow-node.is-off > .ui-flow-media, .ui-flow-node.is-off > .ui-flow-n, .ui-flow-node.is-off .ui-flow-name { opacity: .6; }
.ui-flow-node.is-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-1) var(--ui-space-3); border-style: dashed; border-color: var(--ui-ctl-line); background: var(--ui-bg-card); font-size: var(--ui-fs-label); line-height: var(--ui-lh-snug); color: var(--ui-muted); }
.ui-flow-node.is-empty > .ui-btn { flex: 0 0 auto; }
.ui-flow-more { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) {
    .ui-flow-node.is-live .ui-flow-state::before { animation: none; }
    .ui-flow-node, .ui-flow-svg > path, .ui-flow-svg > circle, .ui-flow-svg .ui-flow-pkt { transition: none; }
}
/* Celular (até 760): colunas empilhadas, seta curta entre elas, sem SVG; o
   vínculo vira texto no nó (.ui-flow-via). */
@media (max-width: 760px) {
    .ui-flow-cols { grid-template-columns: minmax(0, 1fr); gap: 0; padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-4); }
    .ui-flow-svg { display: none; }
    .ui-flow-col + .ui-flow-col { padding-top: var(--ui-space-8); }
    .ui-flow-col + .ui-flow-col::before { content: ""; position: absolute; top: var(--ui-space-2); left: var(--ui-space-4); width: var(--ui-ic-sm); height: var(--ui-ic-sm); background: var(--ui-muted-2); -webkit-mask: var(--ui-ico-arrow-down) center / var(--ui-ic-sm) no-repeat; mask: var(--ui-ico-arrow-down) center / var(--ui-ic-sm) no-repeat; }
    .ui-flow-via { position: static; display: block; width: auto; height: auto; margin: 0; overflow: hidden; clip: auto; clip-path: none; text-overflow: ellipsis; font-size: var(--ui-fs-help); line-height: var(--ui-lh-snug); color: var(--ui-muted); }
}

/* ── Palavras com limite (ui-chipfield) ──────────────────────────────────────
   Campo com cara de .ui-input que junta chips + o texto digitado + contador.
   Enter, vírgula ou colar uma lista viram chips; no limite trava e mostra a
   frase da página (data-ui-max-msg) num .ui-error.is-limit. */
.ui-chipfield { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; min-height: var(--ui-ctl-md); padding: 5px 10px 5px 6px; background-color: var(--ui-field-bg); border: 1px solid var(--ui-ctl-line); border-radius: var(--ui-r-md); outline: 3px solid transparent; cursor: text; transition: border-color var(--ui-dur-1) var(--ui-ease), outline-color var(--ui-dur-1) var(--ui-ease); }
.ui-chipfield:hover { border-color: var(--ui-ctl-line-hover); }
.ui-chipfield:focus-within { border-color: var(--ui-accent); outline-color: rgba(var(--ui-accent-rgb), .18); }
.ui-chipfield.is-invalid, .ui-field.is-invalid .ui-chipfield { border-color: var(--ui-danger); }
.ui-chipfield.is-invalid:focus-within { outline-color: rgba(var(--ui-danger-rgb), .18); }
.ui-chipfield.is-disabled { background-color: var(--ui-fill-1); border-color: var(--ui-line); cursor: not-allowed; }
.ui-chipfield > .ui-chip { gap: 2px; max-width: 100%; height: var(--ui-chip-h); padding: 0 2px 0 10px; border-radius: var(--ui-r-sm); font-size: var(--ui-fs-label); font-weight: var(--ui-fw-medium); line-height: var(--ui-chip-h); letter-spacing: 0; color: var(--ui-ink); background: var(--ui-fill-2); transition: background-color var(--ui-dur-1) var(--ui-ease); }
.ui-chip-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-chip.is-selected { color: var(--ui-ink); background: var(--ui-fill-3); outline: 2px solid var(--ui-focus); outline-offset: 1px; }
.ui-chip.is-flash { animation: uiChipFlash 600ms var(--ui-ease) 1; }
@keyframes uiChipFlash { 0%, 100% { opacity: 1; } 30%, 70% { opacity: .3; } }
.ui-chip-x { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ui-muted); cursor: pointer; transition: background-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease); }
.ui-chip-x::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--ui-ico-x) center / 12px no-repeat; mask: var(--ui-ico-x) center / 12px no-repeat; }
.ui-chip-x:hover { background: var(--ui-fill-3); color: var(--ui-ink); }
.ui-chip-x:focus:not(:focus-visible) { outline: none; }
.ui-chip-x:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 0; }
.ui-chipfield-input { flex: 1 1 120px; min-width: 96px; height: var(--ui-chip-h); margin: 0; padding: 0 4px; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--ui-fs-body); line-height: 20px; color: var(--ui-ink); }
.ui-chipfield-input::placeholder { color: var(--ui-muted-2); opacity: 1; }
.ui-chipfield.is-full .ui-chipfield-input::placeholder { color: transparent; }
.ui-chipfield-n, .ui-checkgrid-n { flex: 0 0 auto; margin-left: auto; font-size: var(--ui-fs-help); font-weight: var(--ui-fw-medium); line-height: var(--ui-chip-h); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ui-muted); }
.ui-chipfield.is-full .ui-chipfield-n, .ui-checkgrid.is-full .ui-checkgrid-n { color: var(--ui-warn-ink); }
/* Frase do limite: âmbar (é aviso de regra, não erro do usuário), com ação
   opcional ([Nova fonte]). Serve ao chipfield e ao checkgrid. */
/* Grade: ícone na 1ª coluna, frase ao lado (quebra dentro dela), ação embaixo da frase. */
.ui-error.is-limit { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 6px; color: var(--ui-warn-ink); }
.ui-error.is-limit[hidden] { display: none; }
.ui-error.is-limit > :not(svg) { grid-column: 2; min-width: 0; }
.ui-error.is-limit > .ui-btn-link { justify-self: start; height: auto; min-height: 0; margin-top: 2px; padding: 0; font-size: inherit; }
.ui-error.is-in { animation: uiFadeIn var(--ui-dur-2) var(--ui-ease-out); }
@media (max-width: 640px) {
    .ui-chipfield { min-height: var(--ui-target-touch); padding-top: 7px; padding-bottom: 7px; }
    .ui-chip-x { width: 28px; height: 28px; }
}
@media (pointer: coarse) { .ui-chipfield-input { font-size: 16px; } }

/* ── Escolha múltipla com busca e limite (ui-checkgrid) ─────────────────────
   v1.3 refeito: cabeçalho numa linha (rótulo à esquerda, "3 de 10" à
   direita) + UM contêiner (.ui-checkgrid-box, borda --ui-border, raio
   --ui-radius) com a busca colada no topo, a lista rolável de 6 linhas de
   40 px em 2 colunas (1 no celular) com degradê no pé, e o rodapé interno
   (motivo do limite + "Mostrar só as marcadas" + "Limpar"). O ui-kit.js
   monta o contêiner a partir da marcação antiga. */
.ui-checkgrid { --ui-cg-row: 40px; --ui-cg-rows: 6; --ui-checkgrid-cols: 2; min-width: 0; }
.ui-checkgrid[data-rows="4"] { --ui-cg-rows: 4; }
.ui-checkgrid[data-rows="5"] { --ui-cg-rows: 5; }
.ui-checkgrid[data-rows="8"] { --ui-cg-rows: 8; }
.ui-checkgrid[data-cols="1"] { --ui-checkgrid-cols: 1; }
.ui-checkgrid[data-cols="3"] { --ui-checkgrid-cols: 3; }
.ui-checkgrid-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ui-space-3); min-width: 0; margin-bottom: var(--ui-space-2); }
.ui-checkgrid-head > .ui-label { min-width: 0; margin-bottom: 0; }
.ui-checkgrid-head > .ui-checkgrid-n { line-height: var(--ui-lh-snug); }
.ui-checkgrid-box { position: relative; min-width: 0; overflow: hidden; background: var(--ui-field-bg); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); transition: border-color var(--ui-dur-1) var(--ui-ease); }
.ui-checkgrid-box:hover { border-color: var(--ui-line-strong); }
.ui-checkgrid-box:focus-within { border-color: var(--ui-ctl-line); }
/* Busca: largura toda, colada no topo, separada por 1 px. */
.ui-checkgrid-box > .ui-search { margin: 0; border-bottom: 1px solid var(--ui-border-subtle); }
.ui-checkgrid-box > .ui-search > svg { left: var(--ui-space-3); }
.ui-checkgrid-box > .ui-search .ui-input { height: 44px; padding-left: 38px; border: 0; border-radius: 0; background-color: transparent; outline: 0; }
.ui-checkgrid-box > .ui-search .ui-input:focus { background-color: var(--ui-fill-1); }
/* Área rolável de altura fixa; degradê na borda que ainda tem conteúdo. */
.ui-checkgrid-scroll { max-height: calc(var(--ui-cg-row) * var(--ui-cg-rows) + var(--ui-space-2)); overflow-y: auto; overscroll-behavior: contain; padding: var(--ui-space-1); scrollbar-width: thin; }
.ui-checkgrid-scroll.is-overflow-end { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent); }
.ui-checkgrid-scroll.is-overflow-start { -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to top, #000 calc(100% - 24px), transparent); }
.ui-checkgrid-scroll.is-overflow-start.is-overflow-end { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 32px), transparent); }
.ui-checks.ui-checkgrid-list { display: grid; grid-template-columns: repeat(var(--ui-checkgrid-cols), minmax(0, 1fr)); gap: 0 var(--ui-space-1); }
/* Linha de 40 px, padding 12, uma linha só com reticências (nome inteiro no title). */
.ui-checkgrid-list > .ui-check { display: flex; align-items: center; gap: 10px; min-width: 0; height: var(--ui-cg-row); margin: 0; padding: 0 var(--ui-space-3); border-radius: var(--ui-r-sm); transition: background-color var(--ui-dur-1) var(--ui-ease), opacity var(--ui-dur-1) var(--ui-ease); }
.ui-checkgrid-list > .ui-check > input { margin-top: 0; }
.ui-checkgrid-list > .ui-check > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-checkgrid-list > .ui-check[hidden] { display: none; }
.ui-checkgrid-list > .ui-check:hover { background: var(--ui-fill-1); }
.ui-checkgrid-list > .ui-check:has(> input:checked) { color: var(--ui-ink); font-weight: var(--ui-fw-medium); }
/* Travada no limite: 50%, sem hover; o motivo fica no rodapé. */
.ui-checkgrid-list > .ui-check:has(> input[aria-disabled="true"]) { opacity: .5; cursor: not-allowed; }
.ui-checkgrid-list > .ui-check:has(> input[aria-disabled="true"]):hover { background: transparent; }
.ui-checkgrid-list > .ui-check > input[aria-disabled="true"] { cursor: not-allowed; }
.ui-checkgrid-none { grid-column: 1 / -1; padding: var(--ui-space-3); font-size: var(--ui-fs-label); color: var(--ui-muted); }
.ui-checkgrid-none[hidden] { display: none; }
/* Rodapé interno: motivo (quando há) à esquerda, ferramentas à direita. */
.ui-checkgrid-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-space-1) var(--ui-space-3); min-height: 44px; padding: var(--ui-space-1) var(--ui-space-2) var(--ui-space-1) var(--ui-space-3); border-top: 1px solid var(--ui-border-subtle); }
.ui-checkgrid-foot > .ui-checkgrid-msg { flex: 1 1 240px; margin: 0; padding: var(--ui-space-1) 0; }
.ui-checkgrid-foot > .ui-checkgrid-msg[hidden] { display: none; }
.ui-checkgrid-tools { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.ui-checkgrid-tools > .ui-btn:disabled { opacity: .45; }
@media (max-width: 640px) {
    .ui-checkgrid { --ui-cg-row: 44px; }
    .ui-checks.ui-checkgrid-list { grid-template-columns: minmax(0, 1fr); }
}

/* ── Ação + escolha (ui-splitbtn) ────────────────────────────────────────────
   .ui-splitbtn.ui-dropdown > .ui-btn + .ui-btn.ui-btn-icon[data-ui-menu] +
   .ui-menu. Mesma altura, divisória de 1 px, um foco por parte; o menu é o
   ui-menu de sempre (Esc, clique fora, setas). Sem a seta, é um botão comum. */
.ui-splitbtn { position: relative; display: inline-flex; align-items: stretch; vertical-align: middle; }
.ui-splitbtn > .ui-btn:focus-visible { z-index: 1; }
.ui-splitbtn > .ui-btn:active { transform: none; }
.ui-splitbtn > .ui-btn:has(+ [data-ui-menu]) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ui-splitbtn > .ui-btn + [data-ui-menu] { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid color-mix(in srgb, currentColor 32%, transparent); }
.ui-splitbtn > .ui-btn-secondary + [data-ui-menu], .ui-splitbtn > .ui-btn-ghost + [data-ui-menu], .ui-splitbtn > .ui-btn-outline-neutral + [data-ui-menu] { margin-left: -1px; border-left-color: var(--ui-line-strong); }
.ui-splitbtn > [data-ui-menu]:not(:has(svg))::before { content: ""; width: var(--ui-ic-sm); height: var(--ui-ic-sm); background: currentColor; -webkit-mask: var(--ui-ico-chev-down) center / var(--ui-ic-sm) no-repeat; mask: var(--ui-ico-chev-down) center / var(--ui-ic-sm) no-repeat; transition: transform var(--ui-dur-2) var(--ui-ease-out); }
.ui-splitbtn > [data-ui-menu][aria-expanded="true"]::before { transform: rotate(180deg); }
.ui-splitbtn.is-block { display: flex; }
.ui-splitbtn.is-block > .ui-btn:first-child { flex: 1 1 auto; }
/* Botão principal que ocupa a largura (celular): .ui-splitbtn.is-block ou .ui-btn-block no principal. */
.ui-splitbtn:has(> .ui-btn-block) { display: flex; }
.ui-splitbtn > .ui-btn-block { flex: 1 1 auto; width: auto; }

/* ── Progresso compacto numa linha (ui-progress-line), pedido SC3 ───────────
   Dentro de cartão/linha: spinner 14 + texto + barra fina. A largura da barra
   vem de data-ui-pct (uiApplyPct); sem número, .is-indeterminate (desliza). */
.ui-spinner.is-sm { width: 14px; height: 14px; border-width: 2px; vertical-align: -2px; }
.ui-progress.is-thin { height: 4px; }
.ui-progress.is-indeterminate { position: relative; }
.ui-progress.is-indeterminate > .ui-progress-bar { width: 40%; animation: uiProgIndet 1.4s var(--ui-ease) infinite; }
@keyframes uiProgIndet { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.ui-progress-line { display: flex; align-items: center; gap: var(--ui-space-2); min-width: 0; font-size: var(--ui-fs-help); line-height: var(--ui-lh-snug); color: var(--ui-muted); }
.ui-progress-line > .ui-spinner { color: var(--ui-accent-ink); }
.ui-progress-line-t { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ui-progress-line > .ui-progress { flex: 1 1 64px; min-width: 48px; }
.ui-progress-line.is-done > .ui-spinner { display: none; }
.ui-progress-line.is-done { color: var(--ui-ok-ink); }
.ui-progress-line.is-done .ui-progress-bar { background: var(--ui-ok); }
@media (prefers-reduced-motion: reduce) {
    .ui-splitbtn > [data-ui-menu]::before, .ui-chip-x, .ui-chipfield, .ui-checkgrid-list > .ui-check { transition: none; }
    .ui-chip.is-flash, .ui-error.is-in { animation: none; }
    .ui-progress.is-indeterminate > .ui-progress-bar { animation: none; width: 100%; opacity: .45; }
}

/* ════════════════════════════════════════════════════════════════════════════
   DS-4 rodada 2 (v1.3, pedido do dono nos modais do Afiliados): ritmo de
   formulário, linha de interruptor, nota e aviso, assistente com cabeçalho
   separado e prévia fixa, cartões de escolha alinhados, lista de resumo e
   prévia do Telegram. Tudo por tokens; nada muda em tela que não use a classe.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Ritmo de formulário (ui-form-stack + ui-form-section) ───────────────────
   20 px entre campos, 28 px entre seções; ninguém cola em ninguém. Vale no
   corpo de modal, no passo do assistente ou numa página. */
.ui-form-stack, .ui-form-section { display: flex; flex-direction: column; gap: var(--ui-space-5); min-width: 0; }
:is(.ui-form-stack, .ui-form-section) > * { margin-top: 0; margin-bottom: 0; }
:is(.ui-form-stack, .ui-form-section) > :is(.ui-field, .ui-field-row, .ui-checkgrid, .ui-switch-row, .ui-switch-rows, .ui-note, .ui-callout, .ui-choices, .ui-error, .ui-help) { margin-top: 0; margin-bottom: 0; }
:is(.ui-form-stack, .ui-form-section) .ui-field-row { row-gap: var(--ui-space-5); }
:is(.ui-form-stack, .ui-form-section) .ui-field-row > .ui-field { margin-bottom: 0; }
.ui-form-stack > .ui-form-section + *, .ui-form-stack > * + .ui-form-section { margin-top: var(--ui-space-2); }
.ui-form-stack > .ui-wizard-title + .ui-wizard-desc { margin-top: calc(6px - var(--ui-space-5)); }
.ui-form-section.is-divided { padding-top: 28px; border-top: 1px solid var(--ui-border-subtle); }
.ui-form-section-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-form-section-t { margin: 0; font-size: var(--ui-fs-body-lg); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); letter-spacing: -.01em; color: var(--ui-ink); }
.ui-form-section-d { margin: 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-snug); color: var(--ui-muted); }

/* ── Linha de interruptor (ui-switch-row) ─────────────────────────────────────
   Rótulo (mesma cor e peso do .ui-label) + apoio à esquerda, switch à
   direita, 56 px. Várias seguidas: .ui-switch-rows (divisória de 1 px). */
.ui-switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-4); min-width: 0; min-height: 56px; margin: 0; padding: var(--ui-space-2) 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-switch-row-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ui-switch-row-t { font-size: var(--ui-fs-label); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-snug); color: var(--ui-ink); }
.ui-switch-row-d { font-size: var(--ui-fs-help); line-height: var(--ui-lh-body); color: var(--ui-muted); }
.ui-switch-row > .ui-toggle, .ui-switch-row > .ui-switch { flex: 0 0 auto; margin: 0; }
.ui-switch-row:has(input:disabled) { cursor: not-allowed; }
.ui-switch-row:has(input:disabled) .ui-switch-row-t { color: var(--ui-muted); }
.ui-switch-rows { display: flex; flex-direction: column; min-width: 0; }
.ui-switch-rows > .ui-switch-row + .ui-switch-row { border-top: 1px solid var(--ui-border-subtle); }
.ui-switch-rows.is-boxed { padding: 0 var(--ui-space-4); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); }
@media (max-width: 640px) { .ui-switch-row { min-height: 60px; } }

/* ── Nota (ui-note): informação neutra, sem caixa pesada ──────────────────────
   <p class="ui-note"><svg/> <span>texto <a>link</a></span></p>. Ícone 16, 13 px. */
.ui-note { display: flex; align-items: flex-start; gap: var(--ui-space-2); min-width: 0; margin: 0; padding: 10px var(--ui-space-3); border-radius: var(--ui-r-md); background: var(--ui-fill-1); font-size: var(--ui-fs-label); line-height: var(--ui-lh-body); color: var(--ui-ink-2); }
.ui-note > svg { flex: 0 0 auto; width: var(--ui-ic-sm); height: var(--ui-ic-sm); margin-top: 2px; color: var(--ui-muted); }
.ui-note > span, .ui-note > div { flex: 1 1 0; min-width: 0; }
/* O spinner também é <span>: sem isto ele esticava (flex 1 1 0) e virava uma elipse girando. */
.ui-note > .ui-spinner { flex: 0 0 auto; margin-top: 3px; }
.ui-note a { color: var(--ui-accent-ink); font-weight: var(--ui-fw-medium); text-decoration: none; }
.ui-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ui-note strong, .ui-note b { font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.ui-note.is-plain { padding: 0; background: transparent; }
.ui-note[hidden] { display: none; }
/* Aviso (ui-callout): o ícone fica SEMPRE na linha do texto (a frase quebra ao lado). */
.ui-callout-body { flex: 1 1 0%; }
.ui-callout[hidden] { display: none; }

/* ── Assistente em modal: cabeçalho de passos separado, prévia fixa ──────── */
.ui-mbox.ui-wizard > .ui-wizard-head, .ui-mbox.ui-wizard > form > .ui-wizard-head { position: relative; z-index: 1; padding-bottom: var(--ui-space-3); border-bottom: 1px solid var(--ui-border-subtle); background: var(--ui-bg-raised); }
.ui-mbox.ui-wizard > .ui-mhead + .ui-wizard-head, .ui-mbox.ui-wizard > form > .ui-mhead + .ui-wizard-head { margin-top: 0; }
.ui-modal-scroll .ui-mbox.ui-wizard .ui-mhead:has(+ .ui-wizard-head) { border-bottom: 0; }
@media (max-width: 560px) {
    /* No celular os passos somem (fica o "Passo X de Y"); sem ele, o cabeçalho some inteiro (sem faixa vazia com borda). */
    .ui-mbox.ui-wizard > .ui-wizard-head:not(:has(.ui-wizard-count)), .ui-mbox.ui-wizard > form > .ui-wizard-head:not(:has(.ui-wizard-count)) { display: none; }
}
@media (min-width: 761px) and (max-height: 820px) {
    .ui-modal .ui-mbody.ui-wizard-body > .ui-wizard-aside .ui-phone { --ui-phone-scale: .66; }
}
@media (min-width: 761px) {
    /* Duas colunas: o passo rola, a prévia fica parada no topo da área. */
    .ui-mbody.ui-wizard-body:has(> .ui-wizard-aside) > .ui-wizard-aside { position: sticky; top: 0; min-height: 0; padding: var(--ui-space-4); }
    /* A moldura encolhe no modal para caber parada na área visível. */
    .ui-mbody.ui-wizard-body > .ui-wizard-aside .ui-phone { --ui-phone-scale: .8; }
    .ui-wizard.is-sticky-head:not(.ui-mbox) > .ui-wizard-head { position: sticky; top: 0; z-index: var(--ui-z-sticky); padding-bottom: var(--ui-space-4); border-bottom: 1px solid var(--ui-border-subtle); border-radius: var(--ui-r-xl) var(--ui-r-xl) 0 0; background: var(--ui-bg-card); }
}

/* ── Cartões de escolha em grade: mesma altura por linha, título em 1 linha ── */
.ui-choices.is-grid { align-items: stretch; }
.ui-choices.is-grid > .ui-choice { height: auto; min-height: 100%; }
.ui-choices.is-grid .ui-choice-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-choices.is-grid.is-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-choices.is-grid.is-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ui-choices.is-grid.is-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ui-choices.is-grid.is-cols-2, .ui-choices.is-grid.is-cols-4 { grid-template-columns: minmax(0, 1fr); } }

/* ── Lista de resumo (ui-dl): rótulo | valor | ação, alinhados à esquerda ──── */
.ui-dl { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr) auto; margin: 0; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); }
.ui-dl-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; column-gap: var(--ui-space-4); padding: var(--ui-space-3) var(--ui-space-4); }
.ui-dl-row + .ui-dl-row { border-top: 1px solid var(--ui-border-subtle); }
.ui-dl-row > dt { grid-column: 1; margin: 0; font-size: var(--ui-fs-label); font-weight: var(--ui-fw-regular); line-height: var(--ui-lh-snug); color: var(--ui-muted); }
.ui-dl-row > dd { grid-column: 2; min-width: 0; margin: 0; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); line-height: var(--ui-lh-snug); color: var(--ui-ink); overflow-wrap: anywhere; }
.ui-dl-row > dd.ui-dl-act { grid-column: 3; align-self: center; font-weight: var(--ui-fw-regular); }
.ui-dl-row > dd.ui-dl-act > .ui-btn-link { height: auto; min-height: 0; padding: 0; }
.ui-dl-row > dd .is-empty, .ui-dl-row > dd.is-empty { color: var(--ui-muted); font-weight: var(--ui-fw-regular); }
.ui-dl-row > dd > .ui-input { margin-top: -6px; margin-bottom: -6px; }
@media (max-width: 560px) {
    .ui-dl { grid-template-columns: minmax(0, 1fr) auto; }
    .ui-dl-row { row-gap: 2px; }
    .ui-dl-row > dt { grid-column: 1; grid-row: 1; }
    .ui-dl-row > dd { grid-column: 1; grid-row: 2; }
    .ui-dl-row > dd.ui-dl-act { grid-column: 2; grid-row: 1 / span 2; }
}

/* ── Prévia do Telegram (ui-tg-*), irmã da ui-wa-*, dentro do ui-phone ──────
   Cores do app no tema claro (tokens --ui-tg-*), iguais no claro e no escuro
   do portal. Nunca o verde do WhatsApp. */
.ui-tg-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--ui-tg-line); background: var(--ui-tg-card-bg); color: var(--ui-tg-text); }
.ui-tg-head-av { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: var(--ui-tg); color: var(--ui-tg-card-bg); font-size: 13px; font-weight: 600; }
.ui-tg-head-av > img { width: 100%; height: 100%; object-fit: cover; }
.ui-tg-head-txt { display: flex; flex-direction: column; min-width: 0; }
.ui-tg-head-name { overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.ui-tg-head-sub { overflow: hidden; font-size: 11px; color: var(--ui-tg-meta); white-space: nowrap; text-overflow: ellipsis; }
.ui-tg-chat { display: flex; flex-direction: column; gap: 4px; min-height: 100%; padding: 10px 10px 14px; background: var(--ui-tg-chat-bg); color: var(--ui-tg-text); }
.ui-tg-sys { align-self: center; margin: 6px 0; padding: 3px 10px; border-radius: var(--ui-r-pill); background: var(--ui-tg-sys-bg); color: var(--ui-tg-card-bg); font-size: 11px; font-weight: 500; }
.ui-tg-bubble { position: relative; align-self: flex-start; width: 92%; overflow: hidden; border-radius: 12px; border-bottom-left-radius: 4px; background: var(--ui-tg-card-bg); color: var(--ui-tg-text); font-size: 13px; line-height: 1.42; overflow-wrap: anywhere; }
.ui-tg-media { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in srgb, var(--ui-tg-chat-bg) 60%, var(--ui-tg-card-bg)); color: var(--ui-tg-meta); font-size: 12px; }
.ui-tg-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-tg-text { display: block; padding: 7px 10px 0; white-space: pre-wrap; }
.ui-tg-text a, .ui-tg-link { color: var(--ui-tg-link); text-decoration: none; }
.ui-tg-text s { color: var(--ui-tg-meta); }
.ui-tg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 2px 10px 6px; font-size: 11px; line-height: 15px; color: var(--ui-tg-meta); white-space: nowrap; }
.ui-tg-views::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; background: currentColor; -webkit-mask: var(--ui-ico-tg-eye) center / 13px no-repeat; mask: var(--ui-ico-tg-eye) center / 13px no-repeat; }
/* Botões do post (teclado em linha): embaixo da bolha, lado a lado. */
.ui-tg-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 108px), 1fr)); gap: 4px; flex: 0 0 auto; align-self: flex-start; width: 92%; }
.ui-tg-btns.is-stack { grid-template-columns: minmax(0, 1fr); }
.ui-tg-btn { overflow: hidden; padding: 8px 6px; border-radius: 8px; background: var(--ui-tg-btn-bg); color: var(--ui-tg-btn-ink); font-size: 12.5px; font-weight: 600; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
/* Moldura baixa (prévia em telefone): só o texto encolhe; mídia, hora e botões
   ficam inteiros, e o corte do texto ganha degradê (.is-cut, posto pelo ui-kit.js). */
.ui-tg-bubble, .ui-tg-post { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; }
:is(.ui-tg-bubble, .ui-tg-post) > :is(.ui-tg-media, .ui-tg-post-media, .ui-tg-meta, .ui-tg-post-meta) { flex: 0 0 auto; }
:is(.ui-tg-text, .ui-tg-post-text) { flex: 0 1 auto; min-height: 0; overflow: hidden; }
:is(.ui-tg-text, .ui-tg-post-text).is-cut { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2em), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2em), transparent); }
.ui-tg-chat > :is(.ui-tg-sys, .ui-tg-btns, .ui-tg-cap) { flex-shrink: 0; }
.ui-phone-screen > [data-ui-phone-view]:not([hidden]):has(> .ui-tg-chat) { display: flex; flex-direction: column; overflow: hidden; }
.ui-phone-screen > [data-ui-phone-view] > .ui-tg-head { flex: 0 0 auto; }
.ui-phone-screen > [data-ui-phone-view] > .ui-tg-chat { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.ui-tg-cap { margin-top: 4px; font-size: 11px; color: var(--ui-tg-meta); }
.ui-tg-cap.is-over { color: var(--ui-warn-ink); }
:root { --ui-ico-tg-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }

/* ── Apelidos e variantes pedidos pelas telas (PEDIDOS 21:58 a 22:20) ───────
   Nomes que os agentes já escreveram: valem igual aos oficiais. */
.ui-form-sec { display: flex; flex-direction: column; gap: var(--ui-space-5); min-width: 0; }
.ui-form-sec > * { margin-top: 0; margin-bottom: 0; }
.ui-form-stack > .ui-form-sec + *, .ui-form-stack > * + .ui-form-sec { margin-top: var(--ui-space-2); }
.ui-form-sec-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-form-sec-t { margin: 0; font-size: var(--ui-fs-body-lg); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); letter-spacing: -.01em; color: var(--ui-ink); }
.ui-form-sec-d, .ui-form-section-sub { margin: 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-snug); color: var(--ui-muted); }
/* Nota com tom (atenção curta DENTRO de formulário, sem ação grande). */
.ui-note.is-warn { background: rgba(var(--ui-warn-rgb), .08); color: var(--ui-ink-2); }
.ui-note.is-warn > svg { color: var(--ui-warn-ink); }
.ui-note.is-danger { background: rgba(var(--ui-danger-rgb), .07); }
.ui-note.is-danger > svg { color: var(--ui-danger-ink); }
.ui-note.is-info { background: rgba(var(--ui-info-rgb), .07); }
.ui-note.is-info > svg { color: var(--ui-info-ink); }
.ui-note.d-none { display: none; }
/* Resumo com valor numa linha só (reticências). */
.ui-dl.is-clip .ui-dl-row > dd:not(.ui-dl-act) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; }
/* Telegram: .ui-tg-post* = .ui-tg-bubble/-media/-text/-meta; .ui-tg-chat.is-card fora do ui-phone. */
.ui-tg-post { position: relative; align-self: flex-start; width: 92%; overflow: hidden; border-radius: 12px; border-bottom-left-radius: 4px; background: var(--ui-tg-card-bg); color: var(--ui-tg-text); font-size: 13px; line-height: 1.42; overflow-wrap: anywhere; }
.ui-tg-post-media { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in srgb, var(--ui-tg-chat-bg) 60%, var(--ui-tg-card-bg)); color: var(--ui-tg-meta); font-size: 12px; }
.ui-tg-post-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-tg-post-text { display: block; padding: 7px 10px 0; white-space: pre-wrap; }
.ui-tg-post-text a { color: var(--ui-tg-link); text-decoration: none; }
.ui-tg-post-meta { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 2px 10px 6px; font-size: 11px; line-height: 15px; color: var(--ui-tg-meta); white-space: nowrap; }
.ui-tg-chat.is-card { min-height: 0; border-radius: var(--ui-r-lg); }

/* ════════════════════════════════════════════════════════════════════════════
   DS-5 (v1.4, 02/10/2026): casca do portal e agenda.
   Navegação lateral ui-nav, seletor de conta ui-switcher, cartão do usuário
   ui-usercard, atalho ui-kbd + busca rápida ui-cmdk, contador no canto
   .ui-count.is-corner, calendário compacto ui-cal, destaque "próximo" ui-spot,
   conversa do WhatsApp fora da moldura .ui-wa-chat.is-card, página de seções
   ui-secpage + ui-secnav, senha com mostrar ui-pass, códigos ui-codes.
   Pedidos em scratchpad/cs-ui/PEDIDOS.md (SH, SC, AC). Mesmas regras: sem
   sombra, sem faixa de accent, sem !important, movimento só em
   opacity/transform (cai com reduced-motion), 40 px (44 no celular).
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    --ui-nav-item-h: 36px;          /* item de 1º nível do menu (44 na gaveta do celular) */
    --ui-nav-sub-h: 32px;           /* item dentro do grupo, sem ícone (44 na gaveta) */
    --ui-nav-w: 248px;              /* largura da lateral aberta (casca) */
    --ui-nav-w-collapsed: 64px;     /* lateral só com ícones */
    --ui-cal-cell: 36px;            /* dia do calendário (40 no celular) */
    --ui-cmdk-w: 560px;             /* busca rápida */
    --ui-secnav-w: 176px;           /* coluna de seções da página */
    --ui-secnav-top: 24px;          /* onde a coluna para, medido do topo da área que rola (.cl-main-inner) */
    --ui-ico-updown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
    --ui-ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    --ui-ico-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    --ui-ico-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    --ui-ico-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.73 5.08A10.43 10.43 0 0 1 12 5c4.67 0 8.6 3 10 7a12.9 12.9 0 0 1-1.67 3.15'/%3E%3Cpath d='M14.08 14.16a3 3 0 0 1-4.24-4.24'/%3E%3Cpath d='M17.48 17.5A10.7 10.7 0 0 1 12 19c-4.67 0-8.6-3-10-7a12.6 12.6 0 0 1 4.52-5.5'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
    --ui-ico-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E");
    --ui-ico-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3C/svg%3E");
}
@media (max-width: 991.98px) {
    :root { --ui-nav-item-h: 44px; --ui-nav-sub-h: 44px; }
}
@media (max-width: 640px) {
    :root { --ui-cal-cell: 40px; }
}

/* ── Navegação lateral ui-nav ─────────────────────────────────────────────── */
.ui-nav { display: flex; flex-direction: column; gap: var(--ui-space-5); min-width: 0; font-family: var(--ui-font); }
.ui-nav-sec { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-nav-heading {
    display: flex; align-items: center; min-height: 24px; padding: 0 var(--ui-space-3); margin: 0 0 2px;
    font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); letter-spacing: .05em; text-transform: uppercase; line-height: 1.2;
    color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-nav-item {
    position: relative; display: flex; align-items: center; gap: var(--ui-space-3);
    width: 100%; min-width: 0; min-height: var(--ui-nav-item-h); margin: 0; padding: 0 var(--ui-space-3);
    border: 0; border-radius: var(--ui-r-md); background: transparent;
    font-family: inherit; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); line-height: var(--ui-lh-snug); text-align: left;
    color: var(--ui-ink-2); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease);
}
.ui-nav-item > svg { width: var(--ui-ic-lg); height: var(--ui-ic-lg); flex: 0 0 auto; color: var(--ui-muted); transition: color var(--ui-dur-1) var(--ui-ease); }
.ui-nav-item:hover { background: var(--ui-fill-2); color: var(--ui-ink); text-decoration: none; }
.ui-nav-item:hover > svg { color: var(--ui-ink-2); }
.ui-nav-item:active { background: var(--ui-fill-3); }
.ui-nav-item:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
/* Atual: dois sinais (superfície da marca + peso 600), ícone na marca. */
.ui-nav-item[aria-current="page"], .ui-nav-item[aria-current="true"], .ui-nav-item.is-active { background: rgba(var(--ui-accent-rgb), .10); color: var(--ui-accent-ink); font-weight: var(--ui-fw-semibold); }
.ui-nav-item[aria-current="page"] > svg, .ui-nav-item[aria-current="true"] > svg, .ui-nav-item.is-active > svg { color: var(--ui-accent-ink); }
:root[data-theme="dark"] .ui-nav-item[aria-current="page"], :root[data-theme="dark"] .ui-nav-item[aria-current="true"], :root[data-theme="dark"] .ui-nav-item.is-active { background: rgba(var(--ui-accent-rgb), .16); }
.ui-nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Contador: neutro e tabular; .is-accent = novidade que pede ação; .is-alert = problema. */
.ui-nav-n {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: var(--ui-r-pill); font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--ui-ink-2); background: var(--ui-fill-2);
}
.ui-nav-n:empty, .ui-nav-n[hidden] { display: none; }
.ui-nav-n.is-alert, .ui-nav-n.is-accent { color: var(--ui-on-primary, #fff); background: var(--ui-accent); }
.ui-nav-n.is-danger { color: var(--ui-danger-ink); background: rgba(var(--ui-danger-rgb), .12); }
:root[data-theme="dark"] .ui-nav-n.is-danger { background: rgba(var(--ui-danger-rgb), .2); }
.ui-nav-item[aria-current] .ui-nav-n:not(.is-alert):not(.is-accent):not(.is-danger), .ui-nav-item.is-active .ui-nav-n:not(.is-alert):not(.is-accent):not(.is-danger) { color: var(--ui-accent-ink); background: rgba(var(--ui-accent-rgb), .14); }
.ui-nav-tag { flex: 0 0 auto; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--ui-r-pill); font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); line-height: 1; color: var(--ui-accent-ink); background: rgba(var(--ui-accent-rgb), .10); }
/* Fora do plano: continua clicável (a página mostra a parede com o motivo). */
.ui-nav-item.is-locked { color: var(--ui-muted); }
.ui-nav-item.is-locked::after { content: ""; width: var(--ui-ic-xs); height: var(--ui-ic-xs); flex: 0 0 auto; background: currentColor; -webkit-mask: var(--ui-ico-lock) center / contain no-repeat; mask: var(--ui-ico-lock) center / contain no-repeat; }
/* Grupo recolhível: <details class="ui-nav-group"><summary class="ui-nav-item">…</summary><div class="ui-nav-group-body">…</div></details> */
.ui-nav-group { min-width: 0; }
.ui-nav-group > summary { list-style: none; }
.ui-nav-group > summary::-webkit-details-marker { display: none; }
.ui-nav-group > summary.ui-nav-item::after { content: ""; width: var(--ui-ic-sm); height: var(--ui-ic-sm); flex: 0 0 auto; background: var(--ui-muted); -webkit-mask: var(--ui-ico-chev-down) center / contain no-repeat; mask: var(--ui-ico-chev-down) center / contain no-repeat; transform: rotate(-90deg); transition: transform var(--ui-dur-2) var(--ui-ease-out); }
.ui-nav-group[open] > summary.ui-nav-item::after { transform: none; }
.ui-nav-group.has-current > summary.ui-nav-item, .ui-nav-group > summary.ui-nav-item.is-current { color: var(--ui-ink); font-weight: var(--ui-fw-semibold); }
.ui-nav-group.has-current > summary.ui-nav-item > svg, .ui-nav-group > summary.ui-nav-item.is-current > svg { color: var(--ui-accent-ink); }
.ui-nav-sub, .ui-nav-group-body { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 var(--ui-space-1); }
/* Item do grupo: sem ícone, texto alinhado ao rótulo do grupo (recuo = 12 + ícone 20 + 12). */
.ui-nav-item.is-sub { min-height: var(--ui-nav-sub-h); padding-left: calc(var(--ui-space-3) * 2 + var(--ui-ic-lg)); }
.ui-nav-item.is-sub > svg { display: none; }
.ui-nav-heading.is-sub { min-height: 28px; margin: var(--ui-space-1) 0 0; padding-left: calc(var(--ui-space-3) * 2 + var(--ui-ic-lg)); }
/* Linha quieta (atalho no fim de um grupo): sem estado de atual. */
.ui-nav-item.is-quiet, .ui-nav-item.is-quiet[aria-current] { color: var(--ui-muted); font-weight: var(--ui-fw-medium); background: transparent; }
.ui-nav-item.is-quiet:hover { background: var(--ui-fill-2); color: var(--ui-ink); }
.ui-nav-sep { height: var(--ui-space-3); flex: 0 0 auto; }
/* Só ícones: o rótulo some da tela e fica para o leitor; a dica do kit mostra o nome.
   A casca cuida da largura e da "espiada" (clicar num grupo abre a lateral por cima). */
.ui-nav.is-collapsed { align-items: center; gap: var(--ui-space-3); }
.ui-nav.is-collapsed .ui-nav-sec { align-items: center; }
.ui-nav.is-collapsed .ui-nav-item { width: var(--ui-ctl-md); padding: 0; justify-content: center; gap: 0; }
.ui-nav.is-collapsed .ui-nav-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ui-nav.is-collapsed .ui-nav-tag, .ui-nav.is-collapsed .ui-nav-item.is-locked::after, .ui-nav.is-collapsed .ui-nav-group > summary.ui-nav-item::after,
.ui-nav.is-collapsed .ui-nav-sub, .ui-nav.is-collapsed .ui-nav-group-body, .ui-nav.is-collapsed .ui-nav-heading.is-sub, .ui-nav.is-collapsed .ui-nav-item.is-sub { display: none; }
.ui-nav.is-collapsed .ui-nav-heading { align-self: stretch; height: 1px; min-height: 0; margin: 0 var(--ui-space-3) var(--ui-space-1); padding: 0; font-size: 0; background: var(--ui-border-subtle); }
.ui-nav.is-collapsed .ui-nav-n { position: absolute; top: 5px; right: 7px; min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; }
.ui-nav.is-collapsed .ui-nav-n:not(.is-alert):not(.is-accent):not(.is-danger) { display: none; }
.ui-nav.is-collapsed .ui-nav-n.is-danger { background: var(--ui-danger); }
/* Botão de recolher (ícone do painel por máscara). */
.ui-nav-toggle::before { content: ""; width: var(--ui-ic-md); height: var(--ui-ic-md); background: currentColor; -webkit-mask: var(--ui-ico-panel) center / contain no-repeat; mask: var(--ui-ico-panel) center / contain no-repeat; }

/* ── Seletor de conta ui-switcher ─────────────────────────────────────────── */
.ui-dropdown.is-block:not(.ui-splitbtn) { display: block; }   /* o .ui-splitbtn.is-block tem a regra dele (DS-4) */
.ui-switcher {
    display: flex; align-items: center; gap: var(--ui-space-3); width: 100%; min-width: 0; min-height: 56px; margin: 0;
    padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-2) var(--ui-space-2);
    border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); background: var(--ui-bg-card);
    font-family: inherit; color: var(--ui-ink); text-align: left; text-decoration: none; cursor: pointer;
    transition: border-color var(--ui-dur-1) var(--ui-ease), background-color var(--ui-dur-1) var(--ui-ease);
}
.ui-switcher:hover { border-color: var(--ui-ctl-line); color: var(--ui-ink); text-decoration: none; }
.ui-switcher[aria-expanded="true"] { border-color: var(--ui-ctl-line); }
.ui-switcher:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-switcher-mark { flex: 0 0 auto; }
.ui-switcher-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-switcher-name { font-size: var(--ui-fs-body); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-switcher-sub { font-size: var(--ui-fs-help); line-height: var(--ui-lh-snug); color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-switcher-chev { width: var(--ui-ic-sm); height: var(--ui-ic-sm); flex: 0 0 auto; background: var(--ui-muted); -webkit-mask: var(--ui-ico-updown) center / contain no-repeat; mask: var(--ui-ico-updown) center / contain no-repeat; }
.ui-switcher.is-static { cursor: default; }
.ui-switcher.is-static:hover { border-color: var(--ui-border); }
.ui-switcher.is-plain { border-color: transparent; background: transparent; }
.ui-switcher.is-plain:hover, .ui-switcher.is-plain[aria-expanded="true"] { border-color: transparent; background: var(--ui-fill-2); }
.ui-switcher.is-compact { width: auto; min-height: 48px; padding: var(--ui-space-1); border-color: transparent; background: transparent; }
.ui-switcher.is-compact .ui-switcher-txt, .ui-switcher.is-compact .ui-switcher-chev { display: none; }
/* Menu com a largura do gatilho (seletor, cartão do usuário). */
.ui-menu.is-match { max-width: min(360px, calc(100vw - 24px)); }

/* ── Cartão do usuário ui-usercard ────────────────────────────────────────── */
.ui-usercard {
    display: flex; align-items: center; gap: var(--ui-space-3); width: 100%; min-width: 0; min-height: 52px; margin: 0; padding: var(--ui-space-2);
    border: 1px solid transparent; border-radius: var(--ui-r-lg); background: transparent;
    font-family: inherit; color: var(--ui-ink); text-align: left; text-decoration: none;
    transition: background-color var(--ui-dur-1) var(--ui-ease), border-color var(--ui-dur-1) var(--ui-ease);
}
button.ui-usercard, a.ui-usercard { cursor: pointer; }
button.ui-usercard:hover, a.ui-usercard:hover, .ui-usercard[aria-expanded="true"] { background: var(--ui-fill-2); color: var(--ui-ink); text-decoration: none; }
.ui-usercard:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-usercard.is-boxed { border-color: var(--ui-border); background: var(--ui-bg-card); }
.ui-usercard-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-usercard-name { font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); line-height: var(--ui-lh-tight); color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-usercard-sub { font-size: var(--ui-fs-help); line-height: var(--ui-lh-snug); color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-usercard-dots { width: var(--ui-ic-md); height: var(--ui-ic-md); flex: 0 0 auto; background: var(--ui-muted); -webkit-mask: var(--ui-ico-dots) center / contain no-repeat; mask: var(--ui-ico-dots) center / contain no-repeat; }
.ui-usercard.is-compact { width: auto; }
.ui-usercard.is-compact .ui-usercard-txt, .ui-usercard.is-compact .ui-usercard-dots { display: none; }

/* ── Atalho de teclado ui-kbd e busca rápida ui-cmdk ──────────────────────── */
.ui-kbd {
    display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 20px; height: 20px; padding: 0 6px;
    border: 1px solid var(--ui-border); border-radius: 6px; background: var(--ui-bg-card);
    font-family: var(--ui-font); font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-medium); line-height: 1;
    color: var(--ui-muted); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ui-kbd:empty { display: none; }
@media (hover: none) { .ui-cmdk-trigger .ui-kbd { display: none; } }
/* Gatilho com cara de campo de busca (abre a paleta; não é um campo de verdade). */
.ui-cmdk-trigger {
    display: flex; align-items: center; gap: var(--ui-space-2); width: 100%; min-width: 0; height: var(--ui-ctl-md); margin: 0; padding: 0 var(--ui-space-2) 0 var(--ui-space-3);
    border: 1px solid var(--ui-border); border-radius: var(--ui-r-md); background: var(--ui-field-bg);
    font-family: inherit; font-size: var(--ui-fs-body); color: var(--ui-muted); text-align: left; cursor: pointer;
    transition: border-color var(--ui-dur-1) var(--ui-ease);
}
.ui-cmdk-trigger::before { content: ""; width: var(--ui-ic-sm); height: var(--ui-ic-sm); flex: 0 0 auto; background: currentColor; -webkit-mask: var(--ui-ico-search) center / contain no-repeat; mask: var(--ui-ico-search) center / contain no-repeat; }
.ui-cmdk-trigger:hover { border-color: var(--ui-ctl-line); }
.ui-cmdk-trigger:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-cmdk-trigger-txt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-cmdk-trigger.is-icon { width: var(--ui-ctl-md); padding: 0; justify-content: center; }
/* Mesma peça com a marcação da casca: <button class="ui-search is-trigger" data-ui-cmdk-open><svg/>Buscar no menu<kbd class="ui-kbd"></kbd></button> */
.ui-search.is-trigger {
    display: flex; align-items: center; gap: var(--ui-space-2); width: 100%; height: var(--ui-ctl-md); margin: 0; padding: 0 var(--ui-space-2) 0 38px;
    border: 1px solid var(--ui-border); border-radius: var(--ui-r-md); background: var(--ui-field-bg);
    font-family: inherit; font-size: var(--ui-fs-body); color: var(--ui-muted); text-align: left; white-space: nowrap; overflow: hidden; cursor: pointer;
    transition: border-color var(--ui-dur-1) var(--ui-ease);
}
.ui-search.is-trigger:hover { border-color: var(--ui-ctl-line); color: var(--ui-ink-2); }
.ui-search.is-trigger:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-search.is-trigger > .ui-kbd { margin-left: auto; }
.ui-search.is-trigger.is-icon { width: var(--ui-ctl-md); padding: 0; justify-content: center; }
.ui-search.is-trigger.is-icon > svg { position: static; margin: 0; }
.ui-search.is-trigger.is-icon > :not(svg) { display: none; }
.ui-cmdk-trigger.is-icon .ui-cmdk-trigger-txt, .ui-cmdk-trigger.is-icon .ui-kbd { display: none; }
@media (max-width: 640px) { .ui-cmdk-trigger, .ui-search.is-trigger { height: var(--ui-target-touch); } .ui-cmdk-trigger.is-icon, .ui-search.is-trigger.is-icon { width: var(--ui-target-touch); } }
@media (hover: none) { .ui-search.is-trigger > .ui-kbd { display: none; } }
/* A paleta (montada pelo ui-kit.js no fim do <body>). */
.ui-cmdk { position: fixed; inset: 0; z-index: var(--ui-z-modal); display: flex; justify-content: center; align-items: flex-start; padding: 12vh var(--ui-space-4) var(--ui-space-4); }
.ui-cmdk[hidden] { display: none; }
.ui-cmdk-scrim { position: absolute; inset: 0; background: var(--ui-scrim); opacity: 0; transition: opacity var(--ui-dur-2) var(--ui-ease-out); }
.ui-cmdk-box {
    position: relative; display: flex; flex-direction: column; width: min(var(--ui-cmdk-w), 100%); max-height: min(560px, 76vh);
    border: 1px solid var(--ui-line); border-radius: var(--ui-r-xl); background: var(--ui-bg-raised); overflow: hidden;
    opacity: 0; transform: translateY(-6px) scale(.985); transition: opacity var(--ui-dur-2) var(--ui-ease-out), transform var(--ui-dur-2) var(--ui-ease-out);
}
.ui-cmdk.is-open .ui-cmdk-scrim { opacity: 1; }
.ui-cmdk.is-open .ui-cmdk-box { opacity: 1; transform: none; }
.ui-cmdk-head { display: flex; align-items: center; gap: var(--ui-space-3); min-height: 56px; padding: 0 var(--ui-space-4); border-bottom: 1px solid var(--ui-border-subtle); transition: border-color var(--ui-dur-1) var(--ui-ease); }
.ui-cmdk-head:focus-within { border-bottom-color: var(--ui-focus); }
.ui-cmdk-head::before { content: ""; width: var(--ui-ic-md); height: var(--ui-ic-md); flex: 0 0 auto; background: var(--ui-muted); -webkit-mask: var(--ui-ico-search) center / contain no-repeat; mask: var(--ui-ico-search) center / contain no-repeat; }
.ui-cmdk-input { flex: 1 1 auto; min-width: 0; height: 54px; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: var(--ui-fs-body-lg); color: var(--ui-ink); }
.ui-cmdk-input::placeholder { color: var(--ui-muted); }
.ui-cmdk-input::-webkit-search-cancel-button { display: none; }
.ui-cmdk-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--ui-space-2); }
.ui-cmdk-group + .ui-cmdk-group { margin-top: var(--ui-space-2); }
.ui-cmdk-gl { padding: var(--ui-space-2) var(--ui-space-2) var(--ui-space-1); font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); }
.ui-cmdk-item {
    display: flex; align-items: center; gap: var(--ui-space-3); min-height: var(--ui-ctl-md); padding: 0 var(--ui-space-3); border-radius: var(--ui-r-md);
    font-size: var(--ui-fs-body); color: var(--ui-ink); text-decoration: none; cursor: pointer; scroll-margin: var(--ui-space-2);
}
.ui-cmdk-item > svg { width: var(--ui-ic-md); height: var(--ui-ic-md); flex: 0 0 auto; color: var(--ui-muted); }
.ui-cmdk-item:hover { color: var(--ui-ink); text-decoration: none; }
.ui-cmdk-item[aria-selected="true"] { background: rgba(var(--ui-accent-rgb), .10); color: var(--ui-accent-ink); }
.ui-cmdk-item[aria-selected="true"] > svg { color: var(--ui-accent-ink); }
:root[data-theme="dark"] .ui-cmdk-item[aria-selected="true"] { background: rgba(var(--ui-accent-rgb), .16); }
.ui-cmdk-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-cmdk-hl { padding: 0; background: transparent; color: inherit; font-weight: var(--ui-fw-semibold); }
.ui-cmdk-item.is-locked { color: var(--ui-muted); }
.ui-cmdk-item.is-locked::after { content: ""; width: var(--ui-ic-xs); height: var(--ui-ic-xs); flex: 0 0 auto; background: currentColor; -webkit-mask: var(--ui-ico-lock) center / contain no-repeat; mask: var(--ui-ico-lock) center / contain no-repeat; }
.ui-cmdk-hint { flex: 0 0 auto; max-width: 40%; font-size: var(--ui-fs-help); color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-cmdk-empty { padding: var(--ui-space-8) var(--ui-space-4); font-size: var(--ui-fs-body); color: var(--ui-muted); text-align: center; overflow-wrap: anywhere; }
.ui-cmdk-empty[hidden] { display: none; }
.ui-cmdk-foot { display: flex; align-items: center; gap: var(--ui-space-4); min-height: 40px; padding: 0 var(--ui-space-4); border-top: 1px solid var(--ui-border-subtle); font-size: var(--ui-fs-help); color: var(--ui-muted); }
.ui-cmdk-foot > span { display: inline-flex; align-items: center; gap: var(--ui-space-1); }
html.ui-cmdk-on { overflow: hidden; }
@media (max-width: 640px) {
    .ui-cmdk { padding: var(--ui-space-2); }
    .ui-cmdk-box { max-height: calc(100dvh - var(--ui-space-4)); border-radius: var(--ui-r-lg); }
    .ui-cmdk-input { font-size: 16px; }
    .ui-cmdk-item { min-height: var(--ui-target-touch); }
    .ui-cmdk-foot { display: none; }
}
@media (hover: none) { .ui-cmdk-foot { display: none; } }

/* ── Contador no canto de um botão de ícone ───────────────────────────────── */
.ui-count.is-corner, .ui-dot-new.is-corner { position: absolute; z-index: 1; pointer-events: none; }
/* No canto de cima à direita do botão, saindo 35% da própria largura: "3" cobre ~3 px da ponta do ícone,
   "99+" ~12 px, e nunca passa 12 px para fora do botão (deixe 8 px entre botões do cabeçalho). */
.ui-count.is-corner { top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid var(--ui-corner-ring, var(--ui-bg-card)); box-sizing: content-box; transform: translate(35%, -10%); }
.ui-count.is-corner.is-neutral { border-color: var(--ui-corner-ring, var(--ui-bg-card)); }
.ui-count.is-corner:empty, .ui-count.is-corner[hidden] { display: none; }
.ui-dot-new.is-corner { top: 8px; right: 8px; border: 2px solid var(--ui-corner-ring, var(--ui-bg-card)); box-sizing: content-box; }
.ui-dot-new.is-corner[hidden] { display: none; }

/* ── Calendário compacto ui-cal ──────────────────────────────────────────── */
.ui-cal { width: 100%; max-width: calc(7 * var(--ui-cal-cell) + 7 * var(--ui-space-2)); min-width: 0; font-family: var(--ui-font); user-select: none; }
.ui-cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2); margin-bottom: var(--ui-space-2); }
.ui-cal-title { flex: 1 1 auto; min-width: 0; font-size: var(--ui-fs-body-lg); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); color: var(--ui-ink); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-cal-nav::before { content: ""; width: var(--ui-ic-sm); height: var(--ui-ic-sm); background: currentColor; -webkit-mask: var(--ui-ico-chev-left) center / contain no-repeat; mask: var(--ui-ico-chev-left) center / contain no-repeat; }
.ui-cal-nav.is-next::before { -webkit-mask-image: var(--ui-ico-chev-right); mask-image: var(--ui-ico-chev-right); }
.ui-cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ui-cal-grid th { padding: 0 0 var(--ui-space-1); font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); color: var(--ui-muted); text-align: center; text-transform: none; }
.ui-cal-grid td { padding: 2px 0; text-align: center; }
.ui-cal-day {
    position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--ui-cal-cell); height: var(--ui-cal-cell); max-width: 100%;
    margin: 0; padding: 0; border: 0; border-radius: var(--ui-r-md); background: transparent;
    font-family: inherit; font-size: var(--ui-fs-label); font-weight: var(--ui-fw-medium); line-height: 1; color: var(--ui-ink);
    font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease);
}
.ui-cal-day:hover { background: var(--ui-fill-2); color: var(--ui-ink); text-decoration: none; }
.ui-cal-day:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
.ui-cal-day.is-today { color: var(--ui-accent-ink); font-weight: var(--ui-fw-semibold); }
.ui-cal-day.is-today::after { content: ""; position: absolute; inset: 0; border: 1.5px solid rgba(var(--ui-accent-rgb), .55); border-radius: inherit; pointer-events: none; }
.ui-cal-day.is-past:not(.is-today) { color: var(--ui-muted); }
.ui-cal-day[aria-selected="true"], .ui-cal-day.is-selected { background: var(--ui-accent); color: var(--ui-on-primary, #fff); font-weight: var(--ui-fw-semibold); }
.ui-cal-day[aria-selected="true"]:hover, .ui-cal-day.is-selected:hover { background: color-mix(in srgb, var(--ui-accent), var(--ui-solid-mix) 9%); color: var(--ui-on-primary, #fff); }
.ui-cal-day[aria-selected="true"]::after, .ui-cal-day.is-selected::after { display: none; }
.ui-cal-day.is-out { color: var(--ui-muted-2); cursor: default; pointer-events: none; }
.ui-cal-day[aria-disabled="true"] { color: var(--ui-muted-2); cursor: not-allowed; }
.ui-cal-day[aria-disabled="true"]:hover { background: transparent; }
.ui-cal-dot { position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ui-accent); pointer-events: none; }
.ui-cal-dot.is-danger { width: 6px; height: 6px; margin-left: -3px; bottom: 3px; background: var(--ui-danger); }
.ui-cal-dot.is-warn { background: var(--ui-warn); }
.ui-cal-dot.is-ok { background: var(--ui-ok); }
.ui-cal-dot.is-info { background: var(--ui-info); }
.ui-cal-dot.is-muted { background: var(--ui-muted-2); }
.ui-cal-day[aria-selected="true"] .ui-cal-dot, .ui-cal-day.is-selected .ui-cal-dot { background: var(--ui-on-primary, #fff); }
.ui-cal-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2) var(--ui-space-4); margin-top: var(--ui-space-3); font-size: var(--ui-fs-help); color: var(--ui-muted); }

/* ── Destaque "próximo" ui-spot ───────────────────────────────────────────── */
.ui-spot {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main actions"; align-items: center; gap: var(--ui-space-4) var(--ui-space-6);
    padding: var(--ui-space-6); border: 1px solid var(--ui-border); border-radius: var(--ui-r-xl);
    background: color-mix(in srgb, var(--ui-bg-card) 95%, var(--ui-accent));
}
:root[data-theme="dark"] .ui-spot { background: color-mix(in srgb, var(--ui-bg-card) 92%, var(--ui-accent)); }
.ui-spot:has(> .ui-spot-aside), .ui-spot.has-aside { grid-template-columns: minmax(0, 1fr) minmax(200px, 240px); grid-template-areas: "main aside" "actions aside"; align-items: start; }
.ui-spot:has(> .ui-spot-aside) .ui-spot-actions, .ui-spot.has-aside .ui-spot-actions { justify-content: flex-start; }
.ui-spot-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: var(--ui-space-2); }
.ui-spot-main > .ui-overline { margin: 0; color: var(--ui-accent-ink); }
.ui-spot-title { margin: 0; font-size: 1.25rem; font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); letter-spacing: var(--ui-ls-title); color: var(--ui-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ui-spot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ui-spot-text { margin: 0; font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); color: var(--ui-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-spot-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ui-space-2); }
.ui-spot-aside { grid-area: aside; min-width: 0; display: flex; align-items: flex-start; gap: var(--ui-space-3); padding: var(--ui-space-4); border-radius: var(--ui-r-lg); background: var(--ui-fill-1); font-size: var(--ui-fs-label); line-height: var(--ui-lh-snug); color: var(--ui-ink-2); }
.ui-spot-aside > svg { width: var(--ui-ic-md); height: var(--ui-ic-md); flex: 0 0 auto; color: var(--ui-muted); }
.ui-spot-aside-t { display: block; font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.ui-spot-aside-d { display: block; margin-top: 2px; font-size: var(--ui-fs-help); color: var(--ui-muted); }
@media (max-width: 760px) {
    .ui-spot, .ui-spot:has(> .ui-spot-aside), .ui-spot.has-aside { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "actions" "aside"; align-items: start; padding: var(--ui-space-4); }
    .ui-spot-title { font-size: var(--ui-fs-modal); }
    .ui-spot-actions { justify-content: flex-start; }
    .ui-spot-actions > .ui-btn { flex: 1 1 auto; }
}

/* ── WhatsApp fora da moldura (gaveta, modal) ────────────────────────────── */
.ui-wa-chat.is-card { min-height: 0; border-radius: var(--ui-r-lg); }

/* ── Página de seções ui-secpage + ui-secnav (pedido AC 12:20) ───────────── */
.ui-secpage { display: grid; grid-template-columns: var(--ui-secnav-w) minmax(0, 760px); gap: var(--ui-space-8); align-items: start; }
.ui-secpage-main { min-width: 0; display: flex; flex-direction: column; gap: var(--ui-space-5); }
.ui-secpage-main > [id] { scroll-margin-top: var(--ui-secnav-top); }
.ui-secnav { position: sticky; top: var(--ui-secnav-top); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-secnav-item {
    display: flex; align-items: center; min-height: 36px; padding: 0 var(--ui-space-3); border-radius: var(--ui-r-md);
    font-size: var(--ui-fs-label); font-weight: var(--ui-fw-medium); line-height: var(--ui-lh-snug); color: var(--ui-muted); text-decoration: none; white-space: nowrap;
    transition: background-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease);
}
.ui-secnav-item:hover { background: var(--ui-fill-2); color: var(--ui-ink); text-decoration: none; }
.ui-secnav-item:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
.ui-secnav-item[aria-current="true"], .ui-secnav-item[aria-current="location"] { background: var(--ui-fill-2); color: var(--ui-ink); font-weight: var(--ui-fw-semibold); }
@media (max-width: 900px) {
    .ui-secpage { grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-4); }
    .ui-secnav { top: var(--ui-secnav-top-sm, 0px); z-index: var(--ui-z-sticky); flex-direction: row; gap: var(--ui-space-2); overflow-x: auto; scrollbar-width: none; padding: var(--ui-space-2) 0; background: var(--ui-bg-page); }
    .ui-secnav::-webkit-scrollbar { display: none; }
    .ui-secnav-item { flex: 0 0 auto; min-height: 36px; padding: 0 var(--ui-space-4); border: 1px solid var(--ui-border); border-radius: var(--ui-r-pill); background: var(--ui-bg-card); color: var(--ui-ink-2); }
    .ui-secnav-item[aria-current="true"], .ui-secnav-item[aria-current="location"] { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-card-bg); }
    .ui-secnav.is-overflow-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
    .ui-secnav.is-overflow-start { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent); }
    .ui-secnav.is-overflow-start.is-overflow-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
    .ui-secpage-main > [id] { scroll-margin-top: calc(var(--ui-secnav-top-sm, 0px) + 60px); }
}

/* ── Senha com mostrar ui-pass (pedido AC) ───────────────────────────────── */
.ui-pass { position: relative; display: flex; align-items: center; min-width: 0; }
.ui-pass > .ui-input { flex: 1 1 auto; min-width: 0; padding-right: calc(var(--ui-ctl-md) + var(--ui-space-1)); }
.ui-pass-toggle {
    position: absolute; top: 0; right: 0; bottom: 0; display: grid; place-items: center; width: var(--ui-ctl-md); margin: 0; padding: 0;
    border: 0; border-radius: 0 var(--ui-r-md) var(--ui-r-md) 0; background: transparent; color: var(--ui-muted); cursor: pointer;
    transition: color var(--ui-dur-1) var(--ui-ease);
}
.ui-pass-toggle::before { content: ""; width: var(--ui-ic-md); height: var(--ui-ic-md); background: currentColor; -webkit-mask: var(--ui-ico-eye) center / contain no-repeat; mask: var(--ui-ico-eye) center / contain no-repeat; }
.ui-pass-toggle[aria-pressed="true"]::before { -webkit-mask-image: var(--ui-ico-eye-off); mask-image: var(--ui-ico-eye-off); }
.ui-pass-toggle:hover { color: var(--ui-ink); }
.ui-pass-toggle:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -4px; border-radius: var(--ui-r-md); }
.ui-pass-toggle:disabled { cursor: not-allowed; opacity: .5; }
@media (max-width: 640px), (pointer: coarse) {
    .ui-pass > .ui-input { padding-right: calc(var(--ui-target-touch) + var(--ui-space-1)); }
    .ui-pass-toggle { width: var(--ui-target-touch); }
}

/* ── Códigos de reserva ui-codes (pedido AC) ─────────────────────────────── */
.ui-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-2); margin: 0; padding: 0; list-style: none; counter-reset: uicodes; }
.ui-codes > li {
    counter-increment: uicodes; display: flex; align-items: center; gap: var(--ui-space-3); min-width: 0; min-height: var(--ui-ctl-md); padding: 0 var(--ui-space-3);
    border-radius: var(--ui-r-sm); background: var(--ui-fill-1);
    font-family: var(--ui-mono); font-size: var(--ui-fs-body); letter-spacing: .04em; color: var(--ui-ink); font-variant-numeric: tabular-nums; user-select: all;
}
.ui-codes > li::before { content: counter(uicodes); min-width: 16px; font-family: var(--ui-font); font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-medium); letter-spacing: 0; color: var(--ui-muted); user-select: none; }
@media (max-width: 359.98px) { .ui-codes { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
    .ui-cmdk-box, .ui-cmdk.is-open .ui-cmdk-box { transform: none; }
    .ui-nav-group > summary.ui-nav-item::after { transition: none; }
}

/* ── [hidden] vale em toda peça do kit (pedido AC): a classe tinha display próprio
   e vencia o atributo; agora "hidden" esconde ui-note, ui-callout, ui-btn, ui-mlist... ── */
[class^="ui-"][hidden], [class*=" ui-"][hidden] { display: none; }
/* Barra de salvar com modal aberto: fica atrás do fundo escurecido (não cobre o rodapé da folha). */
body.modal-open .ui-savebar { z-index: var(--ui-z-sticky); }

/* ── Seção com divisória dentro da pilha (achado do SC): a linha fica NO MEIO dos 28 px
   entre seções, em vez de somar 28 + 1 + 28 = 57. A régua do dono (28 entre seções) vale
   com ou sem linha. Fora de um ui-form-stack continua como era (borda + 28 em cima). ── */
.ui-form-stack > .ui-form-section.is-divided { position: relative; }
.ui-form-stack > .ui-form-section.is-divided:not(:first-child) { padding-top: 0; border-top: 0; }
.ui-form-stack > .ui-form-section.is-divided:not(:first-child)::before { content: ""; position: absolute; left: 0; right: 0; top: calc((var(--ui-space-5) + var(--ui-space-2)) / -2); height: 1px; background: var(--ui-border-subtle); pointer-events: none; }

/* Migalha com anel de foco do kit (o anel do navegador tinha 1 px). */
.dsh-crumb a:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; border-radius: var(--ui-r-sm); }

/* Menu flutuante sem transição de posição (pedido SH 12:55): com "menos movimento" ligado, o
   style.css põe .01 ms de transição em TUDO; como o .ui-menu não tinha lista própria, left/top
   transicionavam e a medida do posicionamento lia o valor antigo (o menu ia para fora da tela). */
.ui-menu { transition-property: none; }

/* ── "Inclui / não inclui" em tabela de comparação (pedido BL): ui-yes / ui-no, com nome no aria-label ── */
.ui-yes, .ui-no { display: inline-flex; align-items: center; justify-content: center; width: var(--ui-ic-sm); height: var(--ui-ic-sm); flex: 0 0 auto; vertical-align: middle; }
.ui-yes::before { content: ""; width: var(--ui-ic-sm); height: var(--ui-ic-sm); background: var(--ui-ok-ink); -webkit-mask: var(--ui-ico-check) center / contain no-repeat; mask: var(--ui-ico-check) center / contain no-repeat; }
.ui-no::before { content: ""; width: 10px; height: 2px; border-radius: 2px; background: var(--ui-muted); }

/* ── Pílula que é link (filtro por endereço, pedidos CB e BL): sem sublinhado; aria-current = escolhida ── */
a.ui-pill, a.ui-pill:hover, a.ui-pill:focus { text-decoration: none; }
.ui-pill[aria-current="page"], .ui-pill[aria-current="true"] { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-card-bg); }
.ui-pill[aria-current="page"] .ui-pill-n, .ui-pill[aria-current="true"] .ui-pill-n { color: inherit; opacity: .7; }

/* ── Linha do tempo ui-timeline (pedido CB 13:15; serve a assinatura e campanhas) ──────────────
   ol.ui-timeline > li.ui-timeline-item(.is-ok|.is-warn|.is-danger|.is-info|.is-next|.is-muted)
   > span.ui-timeline-dot + div.ui-timeline-body(.ui-timeline-t, .ui-timeline-d, .ui-timeline-act) + time.ui-timeline-time.
   Mais novo em cima. O tom nunca vai sozinho: a palavra está no título. */
:root {
    --ui-ico-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.ui-timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ui-timeline-item { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: var(--ui-space-3); padding-bottom: var(--ui-space-4); }
.ui-timeline-item:last-child { padding-bottom: 0; }
/* trilho: do ponto até o próximo item */
.ui-timeline-item::before { content: ""; position: absolute; left: 11.5px; top: 24px; bottom: 0; width: 1px; background: var(--ui-line); }
.ui-timeline-item:last-child::before, .ui-timeline-item.is-last::before { display: none; }
.ui-timeline-dot { grid-column: 1; grid-row: 1 / span 4; position: relative; display: flex; align-items: center; justify-content: center; align-self: start; width: 24px; height: 20px; }
.ui-timeline-dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ui-muted-2); box-sizing: border-box; }
.ui-timeline-dot::after { content: none; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: currentColor; -webkit-mask: var(--ui-ico-check) center / contain no-repeat; mask: var(--ui-ico-check) center / contain no-repeat; }
.ui-timeline-item:is(.is-ok, .is-warn, .is-danger) .ui-timeline-dot::before { width: 20px; height: 20px; }
.ui-timeline-item:is(.is-ok, .is-warn, .is-danger) .ui-timeline-dot::after { content: ""; }
.ui-timeline-item.is-ok .ui-timeline-dot { color: var(--ui-ok-ink); }
.ui-timeline-item.is-ok .ui-timeline-dot::before { background: rgba(var(--ui-ok-rgb), .16); }
.ui-timeline-item.is-warn .ui-timeline-dot { color: var(--ui-warn-ink); }
.ui-timeline-item.is-warn .ui-timeline-dot::before { background: rgba(var(--ui-warn-rgb), .16); }
.ui-timeline-item.is-warn .ui-timeline-dot::after { -webkit-mask-image: var(--ui-ico-clock); mask-image: var(--ui-ico-clock); }
.ui-timeline-item.is-danger .ui-timeline-dot { color: var(--ui-danger-ink); }
.ui-timeline-item.is-danger .ui-timeline-dot::before { background: rgba(var(--ui-danger-rgb), .16); }
.ui-timeline-item.is-danger .ui-timeline-dot::after { -webkit-mask-image: var(--ui-ico-alert); mask-image: var(--ui-ico-alert); }
.ui-timeline-item:is(.is-info, .is-accent) .ui-timeline-dot::before { background: var(--ui-accent); }
.ui-timeline-item.is-next .ui-timeline-dot::before { background: var(--ui-bg-card); border: 2px solid var(--ui-accent); }
.ui-timeline-item.is-muted .ui-timeline-dot::before { background: transparent; border: 2px solid var(--ui-muted-2); }
.ui-timeline-item.is-muted .ui-timeline-t { color: var(--ui-muted); }
/* o corpo "some" para o título, a descrição, a ação e a hora dividirem a mesma grade */
.ui-timeline-body { display: contents; }
.ui-timeline-t { grid-column: 2; grid-row: 1; min-width: 0; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-semibold); line-height: 20px; color: var(--ui-ink); overflow-wrap: anywhere; }
.ui-timeline-d { grid-column: 2; grid-row: 2; min-width: 0; margin-top: 2px; font-size: var(--ui-fs-label); line-height: var(--ui-lh-body); color: var(--ui-ink-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-timeline-act { grid-column: 2; grid-row: 3; margin-top: var(--ui-space-1); }
.ui-timeline-act > .ui-btn-link { padding-left: 0; padding-right: 0; }   /* a ação começa na linha do texto */
.ui-timeline-time { grid-column: 3; grid-row: 1; font-size: var(--ui-fs-help); line-height: 20px; color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-timeline-more { display: flex; justify-content: flex-start; padding: var(--ui-space-3) 0 0 calc(24px + var(--ui-space-3)); }
@media (max-width: 560px) {
    .ui-timeline-item { grid-template-columns: 24px minmax(0, 1fr); }
    .ui-timeline-time { grid-column: 2; grid-row: 2; line-height: 18px; }
    .ui-timeline-d { grid-row: 3; }
    .ui-timeline-act { grid-row: 4; }
}

/* ── Pedidos IA e AT (13:55) ───────────────────────────────────────────────── */
/* Lista de impacto dentro da pilha: a pilha cuida do vão (era 20 da margem + 20 da pilha = 40). */
:is(.ui-form-stack, .ui-form-section) > .ui-mlist { margin-top: 0; margin-bottom: 0; }
/* fieldset/legend como campo do kit (o Bootstrap põe float, largura e tamanho de título na legend). */
fieldset.ui-field { min-width: 0; margin: 0; padding: 0; border: 0; }
legend.ui-label { float: none; width: auto; padding: 0; margin: 0 0 var(--ui-space-2); font-size: var(--ui-fs-label); line-height: var(--ui-lh-snug); }
/* Unidade colada no campo de número: [ 30 ][minutos]. */
.ui-input-affix { display: flex; align-items: stretch; min-width: 0; }
.ui-input-affix > .ui-input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ui-input-affix-txt { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0 var(--ui-space-3); border: 1px solid var(--ui-ctl-line); border-left: 0; border-radius: 0 var(--ui-r-md) var(--ui-r-md) 0; background: var(--ui-fill-1); font-size: var(--ui-fs-body); color: var(--ui-muted); white-space: nowrap; }
.ui-input-affix.is-start > .ui-input { border-radius: 0 var(--ui-r-md) var(--ui-r-md) 0; }
.ui-input-affix.is-start > .ui-input-affix-txt { order: -1; border-left: 1px solid var(--ui-ctl-line); border-right: 0; border-radius: var(--ui-r-md) 0 0 var(--ui-r-md); }
.ui-input-affix > .ui-input:focus { position: relative; z-index: 1; }
/* "Digitando" na prévia do WhatsApp: 3 pontos (param com reduced-motion). */
.ui-wa-bubble.is-typing { display: inline-flex; align-items: center; gap: 4px; min-width: 48px; padding: 10px 12px; }
.ui-wa-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-wa-meta); opacity: .45; animation: uiWaTyping 1.2s var(--ui-ease) infinite; }
.ui-wa-typing-dot:nth-child(2) { animation-delay: .15s; }
.ui-wa-typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes uiWaTyping { 0%, 60%, 100% { opacity: .45; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .ui-wa-typing-dot { animation: none; opacity: .7; } }

/* ── Link solto em lista e aviso (CRIT-5, BL-07, 14:20) ─────────────────────── */
/* <a> sem classe dentro de ui-mlist / ui-callout sai na cor da marca, sem o azul sublinhado do navegador.
   Especificidade de UMA classe + a: a regra da página (que vem depois do kit) ganha. */
.ui-mlist a:where(:not([class])), .ui-callout a:where(:not([class])) { color: var(--ui-accent-ink); font-weight: var(--ui-fw-medium); text-decoration: none; }
.ui-mlist a:where(:not([class])):hover, .ui-callout a:where(:not([class])):hover { text-decoration: underline; text-underline-offset: 3px; }
.ui-mlist a:where(:not([class])):focus-visible, .ui-callout a:where(:not([class])):focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; border-radius: 2px; }

/* ── Pedido AT (14:24): tabela vira cartão no celular ──────────────────────── */
/* Título + sub (`ui-cell-txt`) numa célula comum ficava da largura do texto (a td vira coluna com
   align-items: flex-start) e as reticências nunca entravam: a página rolava de lado. */
@media (max-width: 760px) {
    .ui-table:not(.is-scroll) > tbody > tr > td > .ui-cell-txt { max-width: 100%; }
}

/* ── Tabela em painel sem respiro (`ui-panel.is-flush`) no celular (CRIT-5, "Por número" das campanhas) ── */
/* Até 560 a cabeça do painel vai para 16; a tabela de dentro ficava com o respiro de 20 (o 16 só valia dentro de
   `ui-table-wrap`): o nome da 1ª linha começava 4 px à direita do título. Agora o painel leva o 16 junto. */
@media (max-width: 560px) {
    .ui-panel.is-flush { --ui-table-pad: var(--ui-space-4); }
}


/* ── Contraste AA em superfície afundada (F-DES, 06/10/2026) ───────────────────
   O --ui-muted dá 4,5:1 sobre o cartão, mas cai para ~4,2:1 sobre o trilho das
   abas/segmentado, o fundo cinza do selo neutro e o sufixo do campo. Nesses
   lugares o texto secundário usa um tom um pouco mais perto da tinta. */
:root { --ui-muted-on-fill: color-mix(in srgb, var(--ui-muted) 72%, var(--ui-ink)); }
.ui-tab, .ui-seg-btn, .ui-tab-n, .ui-input-affix-txt { color: var(--ui-muted-on-fill); }
.ui-badge.off, .ui-badge.neutral { color: var(--ui-muted-on-fill); }
/* Alvo do "?" do cartão de número: o ícone continua 14 px, a área de toque vai a 28 px (F-DES). */
.ui-kpi-help::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
/* No celular e em tela de toque (DS-7): o botão (transparente) vai a 44 x 44 com margem
   negativa, então o ícone, a linha e o anel de foco ficam iguais. Não usa o ::before:
   com data-ui-tip ele é da dica (e fica display: none no toque e com o ui-kit.js). */
@media (max-width: 640px), (pointer: coarse) {
    .ui-kpi-help { width: var(--ui-target-touch); height: var(--ui-target-touch); margin: -13px -12px; }
    .ui-kpi-help:focus-visible { outline-offset: -11px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   DS-6 (v1.6, 08/10/2026): recurso travado e compra de adicional (Link próprio).
   Linha travada e clicável (.ui-optrow.is-locked, .ui-switch-row.is-locked),
   cartão de número travado (.ui-kpi.is-locked), opção travada no segmentado
   (.ui-seg-btn.is-locked), exemplo apagado (.ui-sample + uiChart sample),
   mapa de horários 7 x 24 (ui-heat), gaveta de ajuda com conteúdo trocado por
   gatilho (uiHelp: .ui-helppanel) e resumo de cobrança (ui-buy-sum, promovido
   do wd-buy-sum de /client/devices). Apoio: chip com cadeado, fim de linha
   (.ui-optrow-end/-state), herói dividido (.ui-empty.is-hero.is-split), frase
   de estado (.ui-page-meta.is-state), preço e itens no cartão de escolha.
   API e exemplos em docs/DESIGN-SYSTEM.md (seção "Componentes DS-6"); vitrine
   em tests/e2e/ds_kitchen.php (#dskLp). Regras de sempre: só tokens, sem
   sombra, sem faixa de accent, sem !important, movimento só em
   opacity/transform (cai com reduced-motion), 40 px (44 no celular).
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    --ui-heat-gap: 3px;                 /* vão entre as células do mapa */
    --ui-heat-h: 22px;                  /* altura da célula (hora a hora); 32 na versão por faixas */
    --ui-heat-lbl-w: 32px;              /* coluna dos dias */
    /* Escala sequencial da MARCA (mistura com a superfície do cartão: no escuro
       ela nasce escura e acende, sem branco estourado). 0 = sem clique (neutro). */
    --ui-heat-0: var(--ui-fill-2);
    --ui-heat-1: color-mix(in srgb, var(--ui-accent) 18%, var(--ui-bg-card));
    --ui-heat-2: color-mix(in srgb, var(--ui-accent) 36%, var(--ui-bg-card));
    --ui-heat-3: color-mix(in srgb, var(--ui-accent) 56%, var(--ui-bg-card));
    --ui-heat-4: color-mix(in srgb, var(--ui-accent) 78%, var(--ui-bg-card));
    --ui-heat-5: var(--ui-accent);
    --ui-sample-opacity: .5;            /* corpo do exemplo apagado */
}

/* ── Chip com cadeado: o MOTIVO visível ("Nível Pro", "Adicional", "Terminou") ── */
.ui-chip.is-locked { gap: 4px; padding-left: 7px; color: var(--ui-ink-2); background: var(--ui-fill-2); transition: color var(--ui-dur-1) var(--ui-ease), background-color var(--ui-dur-1) var(--ui-ease); }
.ui-chip.is-locked::before { content: ""; flex: 0 0 auto; width: 12px; height: 12px; background: currentColor; opacity: .8; -webkit-mask: var(--ui-ico-lock) center / contain no-repeat; mask: var(--ui-ico-lock) center / contain no-repeat; }

/* ── Fim da linha de ajuste: estado + ação (antes cada página tinha o seu) ─────── */
.ui-optrow-end, .ui-switch-row-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--ui-space-2); flex: 0 0 auto; min-width: 0; }
.ui-optrow-state { min-width: 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-snug); color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ui-optrow-state.is-on { color: var(--ui-ink-2); font-weight: var(--ui-fw-medium); }
/* Estado normal com ponto (sem selo): "oferta.lojadaju.com.br · No ar". */
.ui-optrow-state.is-ok::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--ui-ok); vertical-align: middle; }
.ui-optrow:has(> .ui-optrow-end) > .ui-optrow-txt { flex: 1 1 auto; min-width: 0; }
.ui-optrow:has(> .ui-optrow-end) > .ui-optrow-txt > span { display: block; margin-top: 2px; line-height: var(--ui-lh-snug); }
/* Celular: texto em cima, estado e ação embaixo (opt-in, para não mexer nas telas que já usam a linha). */
@media (max-width: 560px) {
    .ui-optrow.is-stack-sm { flex-direction: column; align-items: stretch; gap: var(--ui-space-2); }
    .ui-optrow.is-stack-sm > .ui-optrow-end { justify-content: space-between; }
}

/* ── Linha de recurso travada e CLICÁVEL ──────────────────────────────────────
   Texto em --ui-muted, chip com cadeado à direita, a linha inteira é um botão
   esticado (.ui-locked-hit, 1º filho; o ui-kit.js cria se faltar) SEM
   pointer-events: none; o "?" e qualquer outro controle ficam por cima.
   Clique, Enter ou Espaço disparam ui:locked { feature, level } (a página abre
   a compra; dentro de modal, um popover). .is-showcase = vitrine (quem ainda
   não tem o adicional): texto normal e chip do nível sem cadeado. */
.ui-optrow.is-locked, .ui-switch-row.is-locked, .ui-kpi.is-locked { position: relative; }
.ui-switch-row.is-locked { cursor: default; }
.ui-optrow.is-locked:not(.is-showcase) > .ui-optrow-txt strong,
.ui-optrow.is-locked:not(.is-showcase) > .ui-optrow-txt span,
.ui-switch-row.is-locked:not(.is-showcase) .ui-switch-row-t,
.ui-switch-row.is-locked:not(.is-showcase) .ui-switch-row-d { color: var(--ui-muted); }
.ui-locked-hit { position: absolute; inset: var(--ui-space-1) calc(var(--ui-space-2) * -1); z-index: 1; display: block; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: var(--ui-r-md); background: transparent; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--ui-dur-1) var(--ui-ease); }
.ui-locked-hit:hover { background: var(--ui-fill-1); }
.ui-locked-hit:active { background: var(--ui-fill-2); }
.ui-locked-hit:focus:not(:focus-visible) { outline: none; }
.ui-locked-hit:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 0; }
/* Tudo o que é controle dentro da linha fica acima do botão esticado. */
:is(.ui-optrow, .ui-switch-row, .ui-kpi).is-locked :is(a, button, select, textarea, summary, [tabindex]):not(.ui-locked-hit) { position: relative; z-index: 2; }
/* O chip acende no tom da marca no passar do mouse e no foco: "dá para liberar". */
:is(.ui-optrow, .ui-switch-row, .ui-kpi).is-locked:has(> .ui-locked-hit:hover) :is(.ui-chip.is-locked, .ui-chip.is-level),
:is(.ui-optrow, .ui-switch-row, .ui-kpi).is-locked:has(> .ui-locked-hit:focus-visible) :is(.ui-chip.is-locked, .ui-chip.is-level) { color: var(--ui-accent-ink); background: rgba(var(--ui-accent-rgb), .11); }
/* Interruptor numa linha travada: não liga nem recebe foco (o motivo está no chip). */
.ui-switch-row.is-locked > .ui-toggle, .ui-switch-row.is-locked > .ui-switch { display: none; }
/* Chip neutro do nível na vitrine (sem cadeado). */
.ui-chip.is-level { transition: color var(--ui-dur-1) var(--ui-ease), background-color var(--ui-dur-1) var(--ui-ease); }

/* ── Cartão de número travado: rótulo normal, valor trocado pelo chip ─────── */
.ui-kpi.is-locked { transition: border-color var(--ui-dur-1) var(--ui-ease); }
.ui-kpi.is-locked:has(> .ui-locked-hit:hover) { border-color: var(--ui-line-strong); }
.ui-kpi.is-locked > .ui-locked-hit { inset: 0; border-radius: inherit; }
.ui-kpi.is-locked .ui-kpi-row { min-height: 34px; align-items: center; }
.ui-kpi.is-locked .ui-kpi-row > .ui-chip.is-locked { padding: 4px 10px 4px 9px; font-size: var(--ui-fs-help); }
.ui-kpi.is-locked .ui-kpi-top .ui-tile { background: var(--ui-fill-2); color: var(--ui-muted); }
.ui-kpis.is-joined > .ui-kpi.is-locked > .ui-locked-hit { border-radius: 0; }
@media (max-width: 560px) { .ui-kpi.is-locked .ui-kpi-row { min-height: 30px; } }

/* ── Opção travada no segmentado (período além do que o nível guarda) ──────── */
.ui-seg-btn.is-locked { color: var(--ui-muted); }
.ui-seg-btn.is-locked::before { content: ""; flex: 0 0 auto; width: 12px; height: 12px; margin-right: -2px; background: currentColor; opacity: .8; -webkit-mask: var(--ui-ico-lock) center / contain no-repeat; mask: var(--ui-ico-lock) center / contain no-repeat; }
.ui-seg-btn.is-locked:hover { color: var(--ui-ink-2); }

/* ── Exemplo apagado (bloco travado: gráfico, mapa, dica de exemplo) ─────────
   .ui-sample > .ui-sample-tag ("Exemplo") + .ui-sample-body (o conteúdo, cinza e
   apagado, sem clique) + .ui-sample-lock opcional (chip + 1 frase + 1 botão). */
.ui-sample { position: relative; min-width: 0; }
.ui-sample-body { opacity: var(--ui-sample-opacity); filter: grayscale(1); pointer-events: none; user-select: none; }
.ui-sample-tag { position: relative; z-index: 2; display: inline-flex; margin-bottom: var(--ui-space-2); align-items: center; height: 22px; padding: 0 var(--ui-space-2); border-radius: var(--ui-r-pill); background: var(--ui-fill-2); color: var(--ui-muted-on-fill, var(--ui-muted)); font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); letter-spacing: .02em; line-height: 1; pointer-events: none; }
.ui-sample-lock { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: var(--ui-space-4); pointer-events: none; }
.ui-sample-card { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-2); max-width: 320px; padding: var(--ui-space-4) var(--ui-space-5); border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); background: var(--ui-bg-card); text-align: center; pointer-events: auto; }
.ui-sample-text { margin: 0; font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); color: var(--ui-ink-2); text-wrap: balance; }
.ui-sample-card > .ui-btn { margin-top: var(--ui-space-1); }
/* Gráfico de exemplo (uiChart com sample: true): fica cinza; a caixa ganha .is-sample. */
.ui-chart.is-sample > canvas { pointer-events: none; }
.ui-chart.is-sample > svg.ui-chart-sample-svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ui-muted-2); }
/* Dica de exemplo ("Onde melhorar" travado): uma linha de lista apagada atrás do chip. */
.ui-sample-body > .ui-note { background: var(--ui-fill-2); }

/* ── Mapa de horários 7 x 24 (ui-heat + window.uiHeat) ──────────────────────
   O ui-kit.js desenha a partir de data-ui-heat='[[24 números] x 7]' (segunda a
   domingo): grade hora a hora + a versão por faixas de 3 h (contêiner até
   479 px, celular ou coluna estreita) + rodapé com a leitura (pico ou a célula
   em foco) e a legenda. Cor = escala sequencial da marca; o número está sempre
   na dica, no rótulo do leitor de tela e na leitura (nunca só a cor). */
.ui-heat { display: flex; flex-direction: column; gap: var(--ui-space-3); width: 100%; min-width: 0; container-type: inline-size; container-name: uiheat; }
.ui-heat-grid, .ui-heat-bands { display: flex; flex-direction: column; gap: var(--ui-heat-gap); min-width: 0; }
.ui-heat-bands { display: none; }
.ui-heat-row { display: grid; grid-template-columns: var(--ui-heat-lbl-w) repeat(24, minmax(0, 1fr)); align-items: center; gap: var(--ui-heat-gap); min-width: 0; }
.ui-heat-bands .ui-heat-row { grid-template-columns: var(--ui-heat-lbl-w) repeat(8, minmax(0, 1fr)); }
.ui-heat-axis > span { min-width: 0; overflow: visible; white-space: nowrap; font-size: var(--ui-fs-caption); line-height: 14px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-heat-day { font-size: var(--ui-fs-help); line-height: 1; color: var(--ui-muted); white-space: nowrap; }
.ui-heat-cell { position: relative; display: block; min-width: 0; height: var(--ui-heat-h); border-radius: 4px; background: var(--ui-heat-0); outline: 2px solid transparent; outline-offset: 1px; cursor: default; transition: outline-color var(--ui-dur-1) var(--ui-ease); }
.ui-heat-cell.is-l1 { background: var(--ui-heat-1); }
.ui-heat-cell.is-l2 { background: var(--ui-heat-2); }
.ui-heat-cell.is-l3 { background: var(--ui-heat-3); }
.ui-heat-cell.is-l4 { background: var(--ui-heat-4); }
.ui-heat-cell.is-l5 { background: var(--ui-heat-5); }
.ui-heat-cell:hover { outline-color: var(--ui-ctl-line-hover); }
.ui-heat-cell.is-peak { z-index: 1; outline-color: var(--ui-ink); }
.ui-heat-cell:focus { outline-color: transparent; }
.ui-heat-cell:focus-visible { z-index: 2; outline-color: var(--ui-focus); }
.ui-heat-bands .ui-heat-cell { height: 32px; }
.ui-heat-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ui-space-2) var(--ui-space-4); min-width: 0; padding-left: calc(var(--ui-heat-lbl-w) + var(--ui-heat-gap)); }
.ui-heat-read { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-snug); color: var(--ui-ink-2); font-variant-numeric: tabular-nums; }
.ui-heat-legend { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; font-size: var(--ui-fs-caption); color: var(--ui-muted); }
.ui-heat-legend > i { display: block; width: 12px; height: 12px; border-radius: 3px; background: var(--ui-heat-0); }
.ui-heat-legend > i:first-of-type { margin-left: 3px; }
.ui-heat-legend > i:last-of-type { margin-right: 3px; }
.ui-heat-legend > i.is-l1 { background: var(--ui-heat-1); }
.ui-heat-legend > i.is-l2 { background: var(--ui-heat-2); }
.ui-heat-legend > i.is-l3 { background: var(--ui-heat-3); }
.ui-heat-legend > i.is-l4 { background: var(--ui-heat-4); }
.ui-heat-legend > i.is-l5 { background: var(--ui-heat-5); }
.ui-heat > .ui-empty { padding: var(--ui-space-6) var(--ui-space-4); }
@container uiheat (max-width: 479px) {
    .ui-heat-grid { display: none; }
    .ui-heat-bands { display: flex; }
    .ui-heat-foot { padding-left: 0; }
}

/* ── Gaveta de ajuda (uiHelp): UMA gaveta, conteúdo de um <template> por recurso ──
   aside.ui-drawer.ui-helppanel[data-ui-help] (o ui-kit.js cria se faltar) +
   <template data-ui-help="chave" data-ui-help-title="..."> + gatilho
   [data-ui-help-open="chave"]. Dentro de modal o kit usa um ui-popover
   (.ui-popover.ui-helppanel), porque a gaveta fica atrás do modal. */
.ui-helppanel > .ui-mbody { display: flex; flex-direction: column; gap: var(--ui-space-5); }
.ui-popover.ui-helppanel > .ui-mbody { gap: var(--ui-space-4); }
.ui-helppanel-lead { margin: 0; font-size: var(--ui-fs-body-lg); line-height: var(--ui-lh-body); color: var(--ui-ink); }
.ui-popover.ui-helppanel .ui-helppanel-lead { font-size: var(--ui-fs-body); }
.ui-helppanel-sec { display: flex; flex-direction: column; gap: var(--ui-space-2); min-width: 0; }
.ui-helppanel-sec > .ui-overline { margin: 0; }
.ui-helppanel-sec > p { margin: 0; font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); color: var(--ui-ink-2); }
.ui-helppanel-sec > .ui-mlist, .ui-helppanel-sec > .ui-steps { margin: 0; }
.ui-helppanel-level { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-space-2); margin: 0; padding: var(--ui-space-3); border-radius: var(--ui-r-lg); background: var(--ui-fill-1); font-size: var(--ui-fs-label); line-height: var(--ui-lh-snug); color: var(--ui-ink-2); }
.ui-helppanel > .ui-mfoot { justify-content: flex-end; }
.ui-helppanel > .ui-mfoot[hidden] { display: none; }
/* Gatilho vazio ganha o ícone de ajuda (circle-help) por máscara. */
[data-ui-help-open]:empty::after { content: ""; width: var(--ui-ic-sm); height: var(--ui-ic-sm); background: currentColor; -webkit-mask: var(--ui-ico-help) center / contain no-repeat; mask: var(--ui-ico-help) center / contain no-repeat; }
[data-ui-help-open][aria-expanded="true"] { color: var(--ui-ink); background: var(--ui-fill-2); }
/* O "?" mora colado no rótulo da linha (Domínio próprio (?)), sem mudar a altura da linha. */
.ui-optrow-txt > strong:has(> [data-ui-help-open]), .ui-switch-row-t:has(> [data-ui-help-open]) { display: flex; align-items: center; gap: var(--ui-space-1); }
.ui-optrow-txt > strong > [data-ui-help-open], .ui-switch-row-t > [data-ui-help-open] { margin: -6px 0; }
/* Celular: o "?" ganha o alvo de toque do kit (44). */
@media (max-width: 640px) { .ui-btn-icon[data-ui-help-open] { width: var(--ui-target-touch); height: var(--ui-target-touch); } }

/* ── Resumo de cobrança ui-buy-sum (promovido do wd-buy-sum de /client/devices) ──
   "Você paga agora" (valor grande + porquê) | divisória | "Nova mensalidade" ou
   "Novo valor anual" (+ quando). Fundo afundado, sem borda; a forma de
   pagamento vai embaixo em .ui-buy-pay. .is-loading = valores em esqueleto
   (ponha depois de 300 ms de espera pela cotação). */
.ui-buy-sum { min-width: 0; padding: var(--ui-space-4) var(--ui-space-5); border-radius: var(--ui-r-xl); background: var(--ui-fill-1); }
.ui-buy-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ui-space-3); min-width: 0; }
.ui-buy-lbl { min-width: 0; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); line-height: var(--ui-lh-snug); color: var(--ui-ink-2); }
.ui-buy-val { flex: 0 0 auto; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-snug); color: var(--ui-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-buy-row.is-main .ui-buy-val { font-size: var(--ui-fs-h2); line-height: var(--ui-lh-tight); letter-spacing: var(--ui-ls-title); }
.ui-buy-why { margin: 4px 0 0; font-size: var(--ui-fs-help); line-height: var(--ui-lh-body); color: var(--ui-muted); }
.ui-buy-why:empty { display: none; }
.ui-buy-why strong { font-weight: var(--ui-fw-semibold); color: var(--ui-ink-2); }
.ui-buy-sep { height: 1px; margin: var(--ui-space-4) 0; background: var(--ui-border); }
.ui-buy-pay { display: flex; align-items: flex-start; gap: var(--ui-space-2); margin: 0; font-size: var(--ui-fs-help); line-height: var(--ui-lh-body); color: var(--ui-muted); }
.ui-buy-pay > svg { flex: 0 0 auto; width: var(--ui-ic-xs); height: var(--ui-ic-xs); margin-top: 2px; }
.ui-buy-sum.is-loading .ui-buy-val, .ui-buy-sum.is-loading .ui-buy-why { position: relative; overflow: hidden; border-radius: var(--ui-r-sm); background: var(--ui-fill-2); color: transparent; animation: uiFadeIn var(--ui-dur-2) var(--ui-ease-out); }
.ui-buy-sum.is-loading .ui-buy-val::after, .ui-buy-sum.is-loading .ui-buy-why::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--ui-shine), transparent); animation: uiShimmer 1.6s ease-in-out infinite; }
.ui-buy-sum.is-loading .ui-buy-val { min-width: 96px; }
.ui-buy-sum.is-loading .ui-buy-why:empty { display: block; height: 14px; width: 70%; }
@media (max-width: 560px) { .ui-buy-sum { padding: var(--ui-space-4); } }

/* ── Cartão de escolha com preço e itens (nível, pacote) ──────────────────── */
.ui-choice-price { display: block; font-size: var(--ui-fs-title); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); color: var(--ui-ink); font-variant-numeric: tabular-nums; }
.ui-choice-price > small { margin-left: 2px; font-size: var(--ui-fs-help); font-weight: var(--ui-fw-regular); color: var(--ui-muted); }
.ui-choice-points { display: flex; flex-direction: column; gap: 4px; margin: var(--ui-space-2) 0 0; padding: 0; list-style: none; font-size: var(--ui-fs-help); line-height: var(--ui-lh-snug); color: var(--ui-ink-2); }
.ui-choice-points > li { position: relative; padding-left: 18px; }
.ui-choice-points > li::before { content: ""; position: absolute; left: 0; top: 2px; width: 12px; height: 12px; background: var(--ui-ok-ink); -webkit-mask: var(--ui-ico-check) center / contain no-repeat; mask: var(--ui-ico-check) center / contain no-repeat; }
.ui-choices.is-grid .ui-choice:has(.ui-choice-points) { flex-direction: column; gap: var(--ui-space-2); }
.ui-choices.is-grid .ui-choice:has(.ui-choice-points) > .ui-radio { position: absolute; top: 14px; right: 14px; margin: 0; }
.ui-choices.is-grid .ui-choice:has(.ui-choice-points) { position: relative; }
.ui-choices.is-grid .ui-choice:has(.ui-choice-points) .ui-choice-title { padding-right: 28px; white-space: normal; }
.ui-choice-tag.is-neutral { background: var(--ui-fill-2); color: var(--ui-muted-on-fill, var(--ui-muted)); }

/* ── Herói dividido: vitrine de um adicional (texto + ação à esquerda, prévia à direita) ── */
.ui-empty.is-hero.is-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: var(--ui-space-8); padding: var(--ui-space-8); text-align: left; }
.ui-empty.is-hero.is-split > .ui-empty-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ui-space-5); min-width: 0; }
.ui-empty.is-hero.is-split .ui-empty-t { margin: 0; font-size: var(--ui-fs-h2); line-height: var(--ui-lh-tight); }
.ui-empty.is-hero.is-split .ui-empty-main > p { max-width: 54ch; margin: 0; font-size: var(--ui-fs-body-lg); text-wrap: pretty; }
.ui-empty.is-hero.is-split .ui-empty-actions { flex-direction: row; align-items: center; justify-content: flex-start; }
.ui-empty.is-hero.is-split > .ui-empty-side { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-3); min-width: 0; }
@media (max-width: 900px) {
    .ui-empty.is-hero.is-split { grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-6); padding: var(--ui-space-6) var(--ui-space-4); }
}
@media (max-width: 560px) {
    .ui-empty.is-hero.is-split .ui-empty-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .ui-empty.is-hero.is-split .ui-empty-t { font-size: var(--ui-fs-modal); }
}

/* ── Frase de estado no topo (UX-CALMA: a mais grave vence) ───────────────── */
/* No <p> (página que desenha o cabeçalho) ou num <span class="ui-page-state"> dentro da meta da casca
   (a casca do Afiliados escreve o <p>; a página manda o span no $metaHtml). */
.ui-page-meta.is-state { max-width: 72ch; color: var(--ui-ink-2); }
.ui-page-state { color: var(--ui-ink-2); }
.ui-page-meta:has(> .ui-page-state) { max-width: 72ch; }
:is(.ui-page-meta.is-state, .ui-page-state):is(.is-warn, .is-danger)::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--ui-warn); vertical-align: middle; }
:is(.ui-page-meta.is-state, .ui-page-state).is-danger::before { background: var(--ui-danger); }
.ui-page-meta > .ui-chip:first-child { margin-right: var(--ui-space-2); vertical-align: 1px; }

/* Lista de resumo com valor técnico (registro de domínio, ID): fonte mono. */
.ui-dl-row > dd.is-mono { font-family: var(--ui-mono); font-size: var(--ui-fs-label); font-weight: var(--ui-fw-regular); }

@media (prefers-reduced-motion: reduce) {
    .ui-locked-hit, .ui-chip.is-locked, .ui-chip.is-level, .ui-kpi.is-locked, .ui-heat-cell { transition: none; }
    .ui-buy-sum.is-loading .ui-buy-val::after, .ui-buy-sum.is-loading .ui-buy-why::after { animation: none; opacity: 0; }
}